标签管理

This commit is contained in:
caoyang
2022-02-14 15:07:27 +08:00
parent e2e2076002
commit d2d9fe50c1
3 changed files with 112 additions and 189 deletions
@@ -3,25 +3,11 @@
<j-form-container :disabled="formDisabled">
<a-form :form="form" slot="detail">
<a-row>
<div class="form-title">基本信息</div>
<p class="tag-info">基本信息</p>
<a-divider dashed />
<a-col :span="24">
<a-form-item label="所属模块" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isModel">
<a-select
v-model="form.isModel"
v-decorator="[
'select',
]"
placeholder="请选择所属模块"
>
<a-select-option value="1">
文档库
</a-select-option>
<a-select-option value="2">
文档条款
</a-select-option>
</a-select>
<!-- <j-dict-select-tag type="list" v-decorator="['isModel', validatorRules.isModel]" :trigger-change="true" dictCode="is_model" placeholder="请选择所属模块(1文档库,0文档拆分)" />-->
<a-form-item label="所属模块" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag type="list" v-decorator="['isModel', validatorRules.isModel]" :trigger-change="true" dictCode="module" placeholder="请选择所属模块" />
</a-form-item>
</a-col>
<a-col :span="24">
@@ -31,69 +17,70 @@
</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-input v-decorator="['dbFieldName', validatorRules.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="请选择属性类型" />
<j-dict-select-tag type="list" v-decorator="['fieldShowType', validatorRules.fieldShowType]" :trigger-change="true" dictCode="attribute_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">-->
<!-- <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-input-number v-decorator="['dbLength', validatorRules.dbLength]" :min="1" :max="200" placeholder="请输入字段长度" style="width: 100%" :formatter="limitNumber" :parser="limitNumber" />
</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-input-number v-decorator="['orderNum', validatorRules.orderNum]" placeholder="请输入展示顺序" style="width: 100%" :min="1" :formatter="limitNumber" :parser="limitNumber" />
</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="请选择是否必填" />
<j-dict-select-tag type="list" v-decorator="['fieldMustInput', validatorRules.fieldMustInput]" :trigger-change="true" dictCode="yn" placeholder="请选择是否必填" />
</a-form-item>
</a-col>
<div class="form-title">文档库模块展示</div>
<p class="tag-info">文档库模块展示</p>
<a-divider dashed />
<a-col :span="24">
<a-form-item label="文档库列表展示" :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="请选择文档库列表是否展示" />
<j-dict-select-tag type="list" v-decorator="['isShowForm', validatorRules.isShowForm]" :trigger-change="true" dictCode="yn" 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="['showArea', validatorRules.showArea]" :trigger-change="true" dictCode="onl_cgform_field,展示区域,show_area" placeholder="请选择展示区域" />
<j-dict-select-tag type="list" v-decorator="['showArea', validatorRules.showArea]" :trigger-change="true" dictCode="onl_cgform_area,展示区域,show_area" 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="['isQuery', validatorRules.isQuery]" :trigger-change="true" dictCode="onl_cgform_field,是否搜索,is_query" placeholder="请选择是否搜索" />
<j-dict-select-tag type="list" v-decorator="['isQuery', validatorRules.isQuery]" :trigger-change="true" dictCode="yn" placeholder="请选择是否搜索" />
</a-form-item>
</a-col>
<div class="form-title">其模块展示</div>
<p class="tag-info">其模块展示</p>
<a-divider dashed />
<a-col :span="24">
<a-form-item label="法规清单展示" :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="请选择法规清单是否展示" />
<j-dict-select-tag type="list" v-decorator="['isShowLawsList', validatorRules.isShowLawsList]" :trigger-change="true" dictCode="yn" 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="['isShowSearch', validatorRules.isShowSearch]" :trigger-change="true" dictCode="onl_cgform_field,搜索中心展示,is_show_search" placeholder="请选择搜索中心是否展示0否 1是" />
<a-form-item label="搜索中心展示" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag type="list" v-decorator="['isShowSearch', validatorRules.isShowSearch]" :trigger-change="true" dictCode="yn" placeholder="请选择搜索中心是否展示" />
</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-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>
@@ -132,10 +119,7 @@
},
data () {
return {
form: {
isModel:'',
},
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: { span: 24 },
@@ -149,32 +133,37 @@
validatorRules: {
isModel: {
rules: [
{ required: true, message: '请输入所属模块(1文档库,0文档拆分!'},
{ required: true, message: '请输入所属模块!'},
]
},
dbFieldTxt: {
rules: [
{ required: true, message: '请输入字段备注!'},
{ required: true, message: '请输入属性名称!'},
]
},
dbFieldName: {
rules: [
{ required: true, message: '请输入英文名称!'},
]
},
fieldShowType: {
rules: [
{ required: true, message: '请输入表单控件类型!'},
{ required: true, message: '请输入属性类型!'},
]
},
dictName: {
rules: [
{ required: true, message: '请输入字典名称!'},
// { required: true, message: '请输入选项内容!'},
]
},
dbLength: {
rules: [
{ required: true, message: '请输入数据库字段长度!'},
{ required: true, message: '请输入字段长度!'},
]
},
orderNum: {
rules: [
{ required: true, message: '请输入序!'},
{ required: true, message: '请输入展示顺序!'},
]
},
fieldMustInput: {
@@ -184,12 +173,12 @@
},
isShowForm: {
rules: [
{ required: true, message: '请输入表单是否显示0否 1是!'},
{ required: true, message: '请选择是否显示文档库列表'},
]
},
showArea: {
rules: [
{ required: true, message: '请输入展示区域!'},
// { required: true, message: '请输入展示区域!'},
]
},
isQuery: {
@@ -199,30 +188,20 @@
},
isShowLawsList: {
rules: [
{ required: true, message: '请输入法规清单是否展示0否 1是!'},
{ required: true, message: '请选择法规清单是否展示!'},
]
},
isShowSearch: {
rules: [
{ required: true, message: '请输入搜索中心是否展示0否 1是!'},
{ required: true, message: '请选择搜索中心是否展示!'},
]
},
},
url: {
add: "/tag/onlCgformTag/add",
edit: "/tag/onlCgformTag/edit",
queryById: "/tag/onlCgformTag/queryById"
},
is_model:[
{
label:1,
value:'文档库'
},
{
label:2,
value:'文档条款'
}
]
add: "tag/onlCgformTag/add",
edit: "tag/onlCgformTag/edit",
queryById: "tag/onlCgformTag/queryById"
}
}
},
computed: {
@@ -284,7 +263,7 @@
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
method = 'put';
}
let formData = Object.assign(this.model, values);
console.log("表单提交数据",formData)
@@ -292,6 +271,7 @@
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
@@ -299,18 +279,27 @@
that.confirmLoading = false;
})
}
})
},
popupCallback(row){
this.form.setFieldsValue(pick(row,'isModel','dbFieldTxt','dbFieldName','fieldShowType','dictName','dbLength','orderNum','fieldMustInput','isShowForm','showArea','isQuery','isShowLawsList','isShowSearch'))
},
//正则替换小数点
limitNumber(value) {
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/\./g, '') : 0
} else {
return 0
}
}
}
}
</script>
<style lang="less" scoped>
.form-title{
.tag-info{
margin-left: 30px;
font-weight: 600;
}
</style>
@@ -1,91 +1,34 @@
<template>
<div>
<!-- <onl-cgform-tag-form ref="tagForm" @ok="submitCallback" :disabled="disableSubmit" normal></onl-cgform-tag-form>-->
<div class="new-tag-drawer">
<onl-cgform-tag-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></onl-cgform-tag-form>
<!-- <div class="tag-form">-->
<!-- <a-form-model-->
<!-- ref="tagForm"-->
<!-- :form="form"-->
<!-- :rules="rules"-->
<!-- :label-col="labelCol"-->
<!-- :wrapper-col="wrapperCol"-->
<!-- >-->
<!-- <div class="form-title">基本信息</div>-->
<!-- <a-divider dashed />-->
<!-- <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-->
<!-- label="属性名称"-->
<!-- prop="dbFieldName"-->
<!-- >-->
<!-- <a-input placeholder="请输入属性名称" v-model="form.dbFieldName" ></a-input>-->
<!-- </a-form-model-item>-->
<!-- </a-form-model>-->
<!-- </div>-->
<div class="drawer-footer">
<a-button v-if="!disableSubmit" @click="submitForm" type="primary" style="margin-bottom: 0;">保存</a-button>
<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 { httpAction, getAction } from '@/api/manage'
// import OnlCgformTagForm from './OnlCgformTagForm'
import OnlCgformTagForm from './OnlCgformTagForm'
export default {
name: 'newDrawer',
components: {
// OnlCgformTagForm
OnlCgformTagForm
},
data () {
return {
title:"操作",
width:800,
visible: false,
disableSubmit: false,
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
form:{
isModel:'1',
dbFieldName:''
},
rules:{
isModel:[
{ required: true, message: '请选择所属模块',trigger: 'change'},
],
dbFieldName:[
{ required: true, message: '请输入属性名称',trigger: 'blur'},
{ min:1, max: 20, message: '长度在 1 - 20字符', trigger: 'blur' },
]
}
disableSubmit: false
}
},
props:{
drawerVisible:Boolean,
},
// beforeCreate() {
// this.form = this.$form.createForm(this, { name: 'validate_other' });
// },
mounted() {
this.visible=this.drawerVisible
},
@@ -93,82 +36,49 @@
add () {
this.visible=true
this.$nextTick(()=>{
this.$refs.tagForm.add();
this.$refs.realForm.add();
})
},
edit (record) {
this.visible=true
this.$nextTick(()=>{
this.$refs.tagForm.edit(record);
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()
},
//表单提交
submitForm () {
console.log('formValid',this.$refs.tagForm)
console.log('this.form',this.form)
const that = this;
// 触发表单验证
this.$refs.tagForm.validateField((err,values)=>{
console.log('validateddd',err)
if(!err){
// this.$refs.tagForm.validate(valid => {
// console.log('validateddd',valid,)
// if(valid){
// 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;
// })
}
})
},
}
}
}
</script>
<style lang="less" scoped>
.new-tag-drawer{
/** Button按钮间距 */
.ant-btn {
margin-left: 30px;
margin-bottom: 30px;
float: right;
}
.drawer-footer{
position: absolute;
bottom: 0;
bottom: 0px;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
@@ -177,4 +87,18 @@
background: #fff;
border-radius: 0 0 2px 2px;
}
}
</style>
<style lang="less">
.new-tag-drawer{
.ant-spin-nested-loading{
.ant-spin-container{
.ant-form{
margin-bottom: 25px;
}
}
}
}
</style>
@@ -162,10 +162,10 @@
],
tagSplit:[
{
dataIndex: 'name',
key: 'name',
dataIndex: 'dbFieldName',
key: 'dbFieldName',
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'name' },
scopedSlots: { customRender: 'dbFieldName' },
align: "center",
width: 100,
},
@@ -173,7 +173,7 @@
title: '英文名称',
align: "center",
width: 100,
dataIndex: 'englishName',
dataIndex: 'dbFieldEnName',
},
{
title: this.$t('operation'),
@@ -190,7 +190,7 @@
}
},
mounted() {
this.loadData()
this.loadData(1)
},
methods:{
searchQuery(){
@@ -212,9 +212,17 @@
}
})
},
//标签项管理初始数据
loadData(){
getAction(`Field/onlCgformField/page`,{}).then(res=>{
//标签项管理文档库初始数据
loadData(val){
let params={
isModel:1
}
if(val==1){
params.isModel=1
}else if(val==0){
params.isModel=0
}
getAction(`tag/onlCgformTag/page`,params).then(res=>{
if(res.success){
this.tableData= [ ...res.result.records]
}
@@ -223,9 +231,11 @@
//标签项管理tab切换
callbackTab(value){
if(value==1){
this.loadData()
this.loadData(1)
// this.tableData=this.taglab
// this.tableData=this.taglabSplit
}else if(value=2){
this.loadData(0)
}
},
diaHide(vis){