标签管理
This commit is contained in:
caoyang
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<j-form-container :disabled="formDisabled">
|
||||
<a-form :form="form" slot="detail">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="所属模块(1文档库,0文档拆分" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['isModel', validatorRules.isModel]" :trigger-change="true" dictCode="onl_cgform_area,所属模块,is_model" placeholder="请选择所属模块(1文档库,0文档拆分" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="字段备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input v-decorator="['dbFieldTxt', validatorRules.dbFieldTxt]" placeholder="请输入字段备注" :maxLength="120" ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="字段英文名称描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input v-decorator="['dbFieldName']" placeholder="请输入字段英文名称描述" :maxLength="120" ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="表单控件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['fieldShowType', validatorRules.fieldShowType]" :trigger-change="true" dictCode="onl_cgform_field,属性类型,field_show_type" placeholder="请选择表单控件类型" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="字典名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['dictName', validatorRules.dictName]" :trigger-change="true" dictCode="sys_dict,选项内容,dict_name" placeholder="请选择字典名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="数据库字段长度" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number v-decorator="['dbLength', validatorRules.dbLength]" placeholder="请输入数据库字段长度" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number v-decorator="['orderNum', validatorRules.orderNum]" placeholder="请输入排序" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="字段是否必填" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['fieldMustInput', validatorRules.fieldMustInput]" :trigger-change="true" dictCode="onl_cgform_field,是否必填,field_must_input" placeholder="请选择字段是否必填" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="表单是否显示0否 1是" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['isShowForm', validatorRules.isShowForm]" :trigger-change="true" dictCode="onl_cgform_field,文档库列表展示,is_show_form" placeholder="请选择表单是否显示0否 1是" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="展示区域" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['showArea', validatorRules.showArea]" :trigger-change="true" dictCode="onl_cgform_field,展示区域,show_area" placeholder="请选择展示区域" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="是否查询条件0否 1是" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['isQuery', validatorRules.isQuery]" :trigger-change="true" dictCode="onl_cgform_field,是否搜索,is_query" placeholder="请选择是否查询条件0否 1是" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="法规清单是否展示0否 1是" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['isShowLawsList', validatorRules.isShowLawsList]" :trigger-change="true" dictCode="onl_cgform_field,法规清单展示,is_show_laws_list" placeholder="请选择法规清单是否展示0否 1是" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="搜索中心是否展示0否 1是" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag type="list" v-decorator="['isShowSearch', validatorRules.isShowSearch]" :trigger-change="true" dictCode="onl_cgform_field,搜索中心展示,is_show_search" placeholder="请选择搜索中心是否展示0否 1是" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
|
||||
<a-button @click="submitForm">提 交</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-container>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import { validateDuplicateValue } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'OnlCgformTagForm',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
//流程表单data
|
||||
formData: {
|
||||
type: Object,
|
||||
default: ()=>{},
|
||||
required: false
|
||||
},
|
||||
//表单模式：true流程表单 false普通表单
|
||||
formBpm: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
//表单禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
validatorRules: {
|
||||
isModel: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入所属模块(1文档库,0文档拆分!'},
|
||||
]
|
||||
},
|
||||
dbFieldTxt: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入字段备注!'},
|
||||
]
|
||||
},
|
||||
fieldShowType: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入表单控件类型!'},
|
||||
]
|
||||
},
|
||||
dictName: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入字典名称!'},
|
||||
]
|
||||
},
|
||||
dbLength: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入数据库字段长度!'},
|
||||
]
|
||||
},
|
||||
orderNum: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入排序!'},
|
||||
]
|
||||
},
|
||||
fieldMustInput: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入字段是否必填!'},
|
||||
]
|
||||
},
|
||||
isShowForm: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入表单是否显示0否 1是!'},
|
||||
]
|
||||
},
|
||||
showArea: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入展示区域!'},
|
||||
]
|
||||
},
|
||||
isQuery: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入是否查询条件0否 1是!'},
|
||||
]
|
||||
},
|
||||
isShowLawsList: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入法规清单是否展示0否 1是!'},
|
||||
]
|
||||
},
|
||||
isShowSearch: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入搜索中心是否展示0否 1是!'},
|
||||
]
|
||||
},
|
||||
},
|
||||
url: {
|
||||
add: "/tag/onlCgformTag/add",
|
||||
edit: "/tag/onlCgformTag/edit",
|
||||
queryById: "/tag/onlCgformTag/queryById"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formDisabled(){
|
||||
if(this.formBpm===true){
|
||||
if(this.formData.disabled===false){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
return this.disabled
|
||||
},
|
||||
showFlowSubmitButton(){
|
||||
if(this.formBpm===true){
|
||||
if(this.formData.disabled===false){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
//如果是流程中表单，则需要加载流程表单data
|
||||
this.showFlowData();
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model,'isModel','dbFieldTxt','dbFieldName','fieldShowType','dictName','dbLength','orderNum','fieldMustInput','isShowForm','showArea','isQuery','isShowLawsList','isShowSearch'))
|
||||
})
|
||||
},
|
||||
//渲染流程表单数据
|
||||
showFlowData(){
|
||||
if(this.formBpm === true){
|
||||
let params = {id:this.formData.dataId};
|
||||
getAction(this.url.queryById,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.edit (res.result);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
submitForm () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.model.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
console.log("表单提交数据",formData)
|
||||
httpAction(httpurl,formData,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
popupCallback(row){
|
||||
this.form.setFieldsValue(pick(row,'isModel','dbFieldTxt','dbFieldName','fieldShowType','dictName','dbLength','orderNum','fieldMustInput','isShowForm','showArea','isQuery','isShowLawsList','isShowSearch'))
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<onl-cgform-tag-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></onl-cgform-tag-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import OnlCgformTagForm from './OnlCgformTagForm'
|
||||
export default {
|
||||
name: 'OnlCgformTagModal',
|
||||
components: {
|
||||
OnlCgformTagForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:'',
|
||||
width:800,
|
||||
visible: false,
|
||||
disableSubmit: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.add();
|
||||
})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.edit(record);
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.realForm.submitForm();
|
||||
},
|
||||
submitCallback(){
|
||||
this.$emit('ok');
|
||||
this.visible = false;
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="diolag-area">
|
||||
<a-button type="primary" @click="showModal">新增</a-button>
|
||||
<a-modal class="area-module" v-model="newVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel">
|
||||
<a-form-model
|
||||
class="tag-module"
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-model-item label="所属模块" prop="isModel">
|
||||
<a-select v-model="form.isModel" placeholder="请选择所属模块">
|
||||
<a-select-option value="1">
|
||||
文档库
|
||||
</a-select-option>
|
||||
<a-select-option value="2">
|
||||
文档条款
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item ref="showArea" label="展示区域" prop="showArea">
|
||||
<a-input
|
||||
v-model="form.showArea"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.showArea.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item ref="enName" label="英文名称" prop="enName">
|
||||
<a-input
|
||||
v-model="form.enName"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.enName.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item ref="sort" label="排序号" prop="sort">
|
||||
<a-input
|
||||
v-model="form.sort"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.sort.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-modal>
|
||||
<a-table
|
||||
class="table-area"
|
||||
ref="table"
|
||||
bordered
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="areaTable"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
<a slot="name" slot-scope="text">{{ text }}</a>
|
||||
<span slot="customTitle">属性名称</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a>编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="table-del">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { putAction,postAction,getAction } from '@/api/manage'
|
||||
export default {
|
||||
name: 'diolagArea',
|
||||
components:{
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
selectedRowKeys: [],
|
||||
loading: false,
|
||||
ipagination:true,
|
||||
columns: [
|
||||
{
|
||||
title: '展示区域',
|
||||
dataIndex: 'showArea',
|
||||
key: 'showArea',
|
||||
align: "center",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '英文名称',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'englishName',
|
||||
},
|
||||
{
|
||||
title: '所属模块',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: 'numberSort'
|
||||
},
|
||||
{
|
||||
title: this.$t('operation'),
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: "center",
|
||||
width: 170
|
||||
}
|
||||
],
|
||||
newVisible:false,
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
form: {
|
||||
isModel:'',
|
||||
showArea:'',
|
||||
enName:'',
|
||||
sort:''
|
||||
},
|
||||
rules: {
|
||||
isModel:[{ required: true, message: '请选择所属模块', trigger: 'change' }],
|
||||
area:[
|
||||
{ required: true, message: '请选择展示区域', trigger: 'blur' },
|
||||
{ min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
props:{
|
||||
areaTable:Array
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
onSelectChange(selectedRowKeys) {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
},
|
||||
handleTableChange(){
|
||||
|
||||
},
|
||||
showModal() {
|
||||
this.newVisible = true;
|
||||
},
|
||||
hideModal() {
|
||||
this.newVisible = false;
|
||||
console.log('form',this.form)
|
||||
this.$refs.ruleForm.validate(valid => {
|
||||
if (valid) {
|
||||
postAction(`/tag/onlCgformArea/add`,this.form).then(res=>{
|
||||
console.log('res',res)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
cancelModel(){
|
||||
this.newVisible=false
|
||||
this.$refs.ruleForm.resetFields();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.diolag-area{
|
||||
.table-area{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.table-del{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
.area-module{
|
||||
.ant-modal-wrap{
|
||||
.ant-modal{
|
||||
.ant-modal-content{
|
||||
.ant-modal-footer{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="content-manage">
|
||||
<a-form-model
|
||||
class="tag-module"
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-model-item label="所属模块" prop="isModel">
|
||||
<a-select v-model="form.isModel" placeholder="请选择所属模块">
|
||||
<a-select-option value="1">
|
||||
文档库
|
||||
</a-select-option>
|
||||
<a-select-option value="2">
|
||||
文档条款
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item ref="showArea" label="展示区域" prop="showArea">
|
||||
<a-input
|
||||
v-model="form.showArea"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.showArea.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item ref="enName" label="英文名称" prop="enName">
|
||||
<a-input
|
||||
v-model="form.enName"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.enName.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item ref="sort" label="排序号" prop="sort">
|
||||
<a-input
|
||||
v-model="form.sort"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.sort.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'contentManage'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<onl-cgform-tag-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></onl-cgform-tag-form>
|
||||
|
||||
<div class="drawer-footer">
|
||||
<a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0;">保存</a-button>
|
||||
<a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import OnlCgformTagForm from './OnlCgformTagForm'
|
||||
|
||||
export default {
|
||||
name: 'newDrawer',
|
||||
components: {
|
||||
OnlCgformTagForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
width:800,
|
||||
visible: false,
|
||||
disableSubmit: false
|
||||
}
|
||||
},
|
||||
props:{
|
||||
drawerVisible:Boolean,
|
||||
},
|
||||
mounted() {
|
||||
this.visible=this.drawerVisible
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.add();
|
||||
})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible=true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.realForm.edit(record);
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
submitCallback(){
|
||||
this.$emit('ok');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.realForm.submitForm();
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 30px;
|
||||
margin-bottom: 30px;
|
||||
float: right;
|
||||
}
|
||||
.drawer-footer{
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="tags">
|
||||
<div class="tag-tab">
|
||||
<a-tabs type="card" @change="callback">
|
||||
<a-tab-pane key="1" tab="标签项管理">
|
||||
<tag-item></tag-item>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="标签内容管理">
|
||||
<tag-content></tag-content>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tagItem from './tabs/tagItem'
|
||||
import tagContent from './tabs/tagContent'
|
||||
export default {
|
||||
name: 'tags',
|
||||
components:{
|
||||
tagItem,
|
||||
tagContent
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
callback(key) {
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="tab-table">
|
||||
<a-table
|
||||
ref="table"
|
||||
bordered
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="tableData"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
<a slot="name" slot-scope="text">{{ text }}</a>
|
||||
<span slot="customTitle">属性名称</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a>编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="table-del">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tabTable',
|
||||
data(){
|
||||
return{
|
||||
selectedRowKeys: [],
|
||||
loading: false,
|
||||
ipagination:true,
|
||||
|
||||
}
|
||||
},
|
||||
props:{
|
||||
tableData:Array,
|
||||
columns:Array
|
||||
},
|
||||
mounted() {
|
||||
// console.log('colum',this.tableData,this.columns)
|
||||
},
|
||||
methods:{
|
||||
onSelectChange(selectedRowKeys) {
|
||||
// console.log('selectedRowKeys changed: ', selectedRowKeys);
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
},
|
||||
handleTableChange(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tab-table{
|
||||
.table-del{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="tag-content">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item :label="'标签项名称'">
|
||||
<j-input :placeholder="'请输入标签名称'" v-model="queryParam.tagName"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">{{$t('query')}}</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('reset')}}</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="table-operator" style="border-top: 5px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
</div>
|
||||
<a-modal class="show-content" v-model="contentVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel">
|
||||
<a-form-model
|
||||
class="tag-content"
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-model-item ref="tagName" label="标签名称" prop="tagName">
|
||||
<a-input
|
||||
v-model="form.tagName"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.tagName.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="标签类型" prop="tagType">
|
||||
<a-select v-model="form.tagType" placeholder="请选择标签类型">
|
||||
<a-select-option value="1">
|
||||
文本框
|
||||
</a-select-option>
|
||||
<a-select-option value="2">
|
||||
下拉单选
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item ref="describe" label="描述" prop="describe">
|
||||
<a-input
|
||||
v-model="form.describe"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.describe.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-modal>
|
||||
<tab-table :tableData="tableData" :columns="columns"></tab-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabTable from './tabTable'
|
||||
export default {
|
||||
name: 'tagContent',
|
||||
components:{
|
||||
tabTable
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
queryParam:{
|
||||
tagName:'',
|
||||
},
|
||||
contentVisible:false,
|
||||
tableData:[
|
||||
{
|
||||
key: '1',
|
||||
tagName: '适用地区',
|
||||
tagType:'下拉单选',
|
||||
describe:'单选',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tagName: '类别',
|
||||
tagType:'下拉单选',
|
||||
describe:'单选',
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '标签名称',
|
||||
dataIndex: 'tagName',
|
||||
key: 'tagName',
|
||||
align: "center",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '标签类型',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'tagType',
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'describe',
|
||||
},
|
||||
{
|
||||
title: this.$t('operation'),
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: "center",
|
||||
width: 170
|
||||
}
|
||||
],
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
form:{
|
||||
tagName:'',
|
||||
tagType:'',
|
||||
describe:''
|
||||
},
|
||||
rules:{
|
||||
tagName:[{ required: true, message: '请输入标签名称', trigger: 'change' },
|
||||
{ min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' }],
|
||||
tagType:[
|
||||
{ required: true, message: '请选择标签类型', trigger: 'blur' },
|
||||
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
searchQuery(){
|
||||
|
||||
},
|
||||
searchReset(){
|
||||
|
||||
},
|
||||
handleAdd(){
|
||||
this.contentVisible=true
|
||||
},
|
||||
hideModal(){
|
||||
this.contentVisible=false
|
||||
},
|
||||
cancelModel(){
|
||||
this.contentVisible=false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="tag-item">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item :label="'标签项名称'">
|
||||
<j-input :placeholder="'请输入标签名称'" v-model="queryParam.tagName"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item :label="'显示区域'">
|
||||
<a-select v-model="queryParam.area" :placeholder="$t('pleaseSelect')">
|
||||
<a-select-option :value="item.value" v-for="item in areas">{{item.label}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">{{$t('query')}}</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('reset')}}</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="table-operator" style="border-top: 5px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" @click="handleShow">展示区域管理</a-button>
|
||||
</div>
|
||||
<a-drawer class="show-drawer" title="新增标签项" placement="right" width="1000px" @close="close" :visible="drawerVisible">
|
||||
<new-drawer v-if="drawerVisible"></new-drawer>
|
||||
</a-drawer>
|
||||
<a-modal class="show-area" v-model="areaVisible" title="展示区域管理" :footer="null" @cancel="hideModal">
|
||||
<area-manage v-if="areaVisible" @diaHide="diaHide" :areaTable="areaTable"></area-manage>
|
||||
</a-modal>
|
||||
<div class="tag-doc-tab">
|
||||
<a-tabs default-active-key="1" @change="callbackTab">
|
||||
<a-tab-pane key="1" tab="文档库">
|
||||
<tabTable :tableData="tableData" :columns="taglabColumns"></tabTable>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="文档拆分" force-render>
|
||||
<tabTable :tableData="tableData" :columns="tagSplit"></tabTable>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JInput from '@/components/jero/JInput'
|
||||
import tabTable from './tabTable'
|
||||
import areaManage from '../dialog/areaManage'
|
||||
import newDrawer from '../dialog/newDrawer'
|
||||
export default {
|
||||
name: 'tagItem',
|
||||
components:{
|
||||
JInput,
|
||||
tabTable,
|
||||
areaManage,
|
||||
newDrawer
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
queryParam:{
|
||||
area:'', //显示区域
|
||||
tagName:'', //标签项名称
|
||||
page:1,
|
||||
pageSize:10,
|
||||
},
|
||||
areas:[
|
||||
{
|
||||
value: 1,
|
||||
label:'文档库'
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:'文档条款'
|
||||
}
|
||||
],
|
||||
tableData:[],
|
||||
taglab:[
|
||||
{
|
||||
key: '1',
|
||||
name: '编号',
|
||||
englishName:'number',
|
||||
type:'文本框',
|
||||
length:100,
|
||||
numberSort:1,
|
||||
showArea:'文档库'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '标题',
|
||||
englishName:'title',
|
||||
type:'下拉单选',
|
||||
length:100,
|
||||
numberSort:2,
|
||||
showArea:'文档拆分'
|
||||
},
|
||||
],
|
||||
taglabColumns: [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
slots: { title: 'customTitle' },
|
||||
scopedSlots: { customRender: 'name' },
|
||||
align: "center",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '英文名称',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'englishName',
|
||||
},
|
||||
{
|
||||
title: '属性类型',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '字段长度',
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: 'length'
|
||||
},
|
||||
{
|
||||
title: '展示顺序',
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: 'numberSort'
|
||||
},
|
||||
{
|
||||
title: '展示区域',
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: 'showArea'
|
||||
},
|
||||
{
|
||||
title: this.$t('operation'),
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: "center",
|
||||
width: 170
|
||||
}
|
||||
],
|
||||
taglabSplit:[
|
||||
{
|
||||
key: '1',
|
||||
name: '编号',
|
||||
englishName:'number',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '标题',
|
||||
englishName:'title',
|
||||
},
|
||||
],
|
||||
tagSplit:[
|
||||
{
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
slots: { title: 'customTitle' },
|
||||
scopedSlots: { customRender: 'name' },
|
||||
align: "center",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '英文名称',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'englishName',
|
||||
},
|
||||
{
|
||||
title: this.$t('operation'),
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: "center",
|
||||
width: 170
|
||||
}
|
||||
],
|
||||
areaVisible:false,
|
||||
areaTable:[],
|
||||
drawerVisible:false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
searchQuery(){
|
||||
|
||||
},
|
||||
searchReset(){
|
||||
|
||||
},
|
||||
handleAdd(){
|
||||
this.drawerVisible=true
|
||||
},
|
||||
handleShow(){
|
||||
this.areaVisible=true
|
||||
},
|
||||
callbackTab(value){
|
||||
console.log('values',value)
|
||||
if(value==1){
|
||||
this.tableData=this.taglab
|
||||
this.tableData=this.taglabSplit
|
||||
}
|
||||
},
|
||||
diaHide(vis){
|
||||
this.areaVisible=vis
|
||||
console.log('vis',vis)
|
||||
},
|
||||
hideModal(){
|
||||
this.visible = false;
|
||||
},
|
||||
close(){
|
||||
this.drawerVisible=false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
.show-area{
|
||||
.ant-modal-wrap{
|
||||
.ant-modal{
|
||||
width: 800px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user