标签编辑

This commit is contained in:
caoyang
2022-02-15 18:00:18 +08:00
parent 12ac3223e1
commit 875c7d0ead
8 changed files with 893 additions and 160 deletions
@@ -1,90 +1,101 @@
<template> <template>
<a-spin :spinning="confirmLoading"> <!-- <a-spin :spinning="confirmLoading">-->
<j-form-container :disabled="formDisabled"> <!-- <j-form-container :disabled="formDisabled">-->
<a-form :form="form" slot="detail"> <div class="form-tag">
<a-form>
<a-form-model
class="tag-content"
:model="form"
:rules="validatorRules"
ref="tagEditForm"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-row> <a-row>
<p class="tag-info">基本信息</p> <p class="tag-info">基本信息</p>
<a-divider dashed /> <a-divider dashed />
<a-col :span="24"> <a-col :span="24">
<a-form-item label="所属模块" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="所属模块" prop="isModel">
<j-dict-select-tag type="list" v-decorator="['isModel', validatorRules.isModel]" :trigger-change="true" dictCode="module" placeholder="请选择所属模块" /> <j-dict-select-tag type="list" v-model="form.isModel" dictCode="module" placeholder="请选择所属模块" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="属性名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="属性名称" prop="dbFieldTxt">
<a-input v-decorator="['dbFieldTxt', validatorRules.dbFieldTxt]" placeholder="请输入属性名称" :maxLength="120" ></a-input> <a-input v-model="form.dbFieldTxt" placeholder="请输入属性名称" :maxLength="120" ></a-input>
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="英文名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="英文名称" prop="dbFieldName">
<a-input v-decorator="['dbFieldName', validatorRules.dbFieldName]" placeholder="请输入英文名称" :maxLength="120" ></a-input> <a-input v-model="form.dbFieldName" placeholder="请输入英文名称" :maxLength="120" ></a-input>
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="属性类型" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="属性类型" prop="fieldShowType">
<j-dict-select-tag type="list" v-decorator="['fieldShowType', validatorRules.fieldShowType]" :trigger-change="true" dictCode="attribute_type" placeholder="请选择属性类型" /> <j-dict-select-tag type="list" v-model="form.fieldShowType" dictCode="attribute_type" placeholder="请选择属性类型" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24" v-if="isTagContent"> <a-col :span="24" v-if="isTagContent">
<a-form-item label="选项内容" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="选项内容" prop="dictName">
<j-dict-select-tag type="list" v-decorator="['dictName', validatorRules.dictName]" :trigger-change="true" dictCode="sys_dict,选项内容,dict_name" placeholder="请选择选项内容" /> <j-dict-select-tag type="list" v-model="form.dictName" dictCode="" placeholder="请选择选项内容" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="字段长度" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="字段长度" prop="dbLength">
<a-input-number v-decorator="['dbLength', validatorRules.dbLength]" :min="1" :max="200" placeholder="请输入字段长度" style="width: 100%" :formatter="limitNumber" :parser="limitNumber" /> <a-input-number v-model="form.dbLength" :min="1" :max="200" placeholder="请输入字段长度" style="width: 100%" :formatter="limitNumber" :parser="limitNumber" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="展示顺序" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="展示顺序" prop="orderNum">
<a-input-number v-decorator="['orderNum', validatorRules.orderNum]" placeholder="请输入展示顺序" style="width: 100%" :min="1" :formatter="limitNumber" :parser="limitNumber" /> <a-input-number v-model="form.orderNum" placeholder="请输入展示顺序" style="width: 100%" :min="1" :formatter="limitNumber" :parser="limitNumber" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="是否必填" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="是否必填" prop="fieldMustInput">
<j-dict-select-tag type="list" v-decorator="['fieldMustInput', validatorRules.fieldMustInput]" :trigger-change="true" dictCode="yn" placeholder="请选择是否必填" /> <j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn" placeholder="请选择是否必填" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<p class="tag-info">文档库模块展示</p> <p class="tag-info">文档库模块展示</p>
<a-divider dashed /> <a-divider dashed />
<a-col :span="24"> <a-col :span="24">
<a-form-item label="文档库列表展示" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="文档库列表展示" prop="isShowForm">
<j-dict-select-tag type="list" v-decorator="['isShowForm', validatorRules.isShowForm]" :trigger-change="true" dictCode="yn" placeholder="请选择是否文档库列表展示" /> <j-dict-select-tag type="list" v-model="form.isShowForm" dictCode="yn" placeholder="请选择是否文档库列表展示" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="展示区域" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="展示区域" prop="showArea">
<j-dict-select-tag type="list" v-decorator="['showArea', validatorRules.showArea]" :trigger-change="true" dictCode="onl_cgform_area,展示区域,show_area" placeholder="请选择展示区域" /> <j-dict-select-tag type="list" v-model="form.showArea" dictCode="" placeholder="请选择展示区域" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="是否搜索" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="是否搜索" prop="isQuery">
<j-dict-select-tag type="list" v-decorator="['isQuery', validatorRules.isQuery]" :trigger-change="true" dictCode="yn" placeholder="请选择是否搜索" /> <j-dict-select-tag type="list" v-model="form.isQuery" dictCode="yn" placeholder="请选择是否搜索" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<p class="tag-info">其它模块展示</p> <p class="tag-info">其它模块展示</p>
<a-divider dashed /> <a-divider dashed />
<a-col :span="24"> <a-col :span="24">
<a-form-item label="法规清单展示" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="法规清单展示" prop="isShowLawsList">
<j-dict-select-tag type="list" v-decorator="['isShowLawsList', validatorRules.isShowLawsList]" :trigger-change="true" dictCode="yn" placeholder="请选择法规清单是否展示" /> <j-dict-select-tag type="list" v-model="form.isShowLawsList" dictCode="yn" placeholder="请选择法规清单是否展示" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="搜索中心展示" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-model-item label="搜索中心展示" prop="isShowSearch">
<j-dict-select-tag type="list" v-decorator="['isShowSearch', validatorRules.isShowSearch]" :trigger-change="true" dictCode="yn" placeholder="请选择搜索中心是否展示" /> <j-dict-select-tag type="list" v-model="form.isShowSearch" dictCode="yn" placeholder="请选择搜索中心是否展示" />
</a-form-item> </a-form-model-item>
</a-col> </a-col>
<!-- <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">--> <!-- <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">-->
<!-- <a-button @click="submitForm">提 交</a-button>--> <!-- <a-button @click="submitForm">提 交</a-button>-->
<!-- </a-col>--> <!-- </a-col>-->
</a-row> </a-row>
</a-form-model>
</a-form> </a-form>
</j-form-container> </div>
</a-spin> <!-- </j-form-container>-->
<!-- </a-spin>-->
</template> </template>
<script> <script>
@@ -119,11 +130,24 @@
isTagContent:{ isTagContent:{
type: Boolean, type: Boolean,
default: false, default: false,
},
drawerVisible:{
type: Boolean,
default: false,
},
editData:{
type: Object,
},
editId:{
type:String
},
submitEdit:{
type:String
} }
}, },
data () { data () {
return { return {
form: this.$form.createForm(this), form: {},
model: {}, model: {},
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
@@ -135,72 +159,47 @@
}, },
confirmLoading: false, confirmLoading: false,
validatorRules: { validatorRules: {
isModel: { isModel: [
rules: [ { required: true, message: '请输入所属模块!',trigger: 'change'},
{ required: true, message: '请输入所属模块!'}, ],
] dbFieldTxt: [
}, { required: true, message: '请输入属性名称!',trigger: 'blur'},
dbFieldTxt: { ],
rules: [ dbFieldName: [
{ required: true, message: '请输入属性名称!'}, { required: true, message: '请输入英文名称!',trigger: 'blur'},
] ],
}, fieldShowType: [
dbFieldName: { { required: true, message: '请输入属性类型!',trigger: 'change'},
rules: [ ],
{ required: true, message: '请输入英文名称!'}, dictName: [
] // { required: true, message: '请输入选项内容!',trigger: 'change'},
}, ],
fieldShowType: { dbLength: [
rules: [ { required: true, message: '请输入字段长度!',trigger: 'blur'},
{ required: true, message: '请输入属性类型!'}, ],
] orderNum: [
}, { required: true, message: '请输入展示顺序!',trigger: 'blur'},
dictName: { ],
rules: [ fieldMustInput: [
// { required: true, message: '请输入选项内容!'}, { required: true, message: '请输入字段是否必填!',trigger: 'change'},
] ],
}, isShowForm: [
dbLength: { { required: true, message: '请选择是否显示文档库列表',trigger: 'change'},
rules: [ ],
{ required: true, message: '请输入字段长度!'}, showArea: [
] // { required: true, message: '请输入展示区域!',trigger: 'change'},
}, ],
orderNum: { isQuery: [
rules: [ { required: true, message: '请输入是否查询条件',trigger: 'change'},
{ required: true, message: '请输入展示顺序!'}, ],
] isShowLawsList: [
}, { required: true, message: '请选择法规清单是否展示!',trigger: 'change'},
fieldMustInput: { ],
rules: [ isShowSearch: [
{ required: true, message: '请输入字段是否必填!'}, { required: true, message: '请选择搜索中心是否展示!',trigger: 'change'},
] ],
},
isShowForm: {
rules: [
{ required: true, message: '请选择是否显示文档库列表'},
]
},
showArea: {
rules: [
// { required: true, message: '请输入展示区域!'},
]
},
isQuery: {
rules: [
{ required: true, message: '请输入是否查询条件0否 1是!'},
]
},
isShowLawsList: {
rules: [
{ required: true, message: '请选择法规清单是否展示!'},
]
},
isShowSearch: {
rules: [
{ required: true, message: '请选择搜索中心是否展示!'},
]
},
}, },
addVisible:false,
url: { url: {
add: "tag/onlCgformTag/add", add: "tag/onlCgformTag/add",
edit: "tag/onlCgformTag/edit", edit: "tag/onlCgformTag/edit",
@@ -208,7 +207,28 @@
} }
} }
}, },
watch:{
// 'form.fieldShowType'(val){
// console.log('valDb',val)
// console.log(val==3)
// if(val==3||val==4||val==9||val==10){
// this.isTagContent=true
// console.log('isTag',this.isTagContent)
// }else{
// this.isTagContent=false
// console.log('isTag',this.isTagContent)
//
// }
//
// },
// 'form.dbLength'(val){
// console.log('val')
// }
},
computed: { computed: {
changeType(val){
console.log('changtType',val)
},
formDisabled(){ formDisabled(){
if(this.formBpm===true){ if(this.formBpm===true){
if(this.formData.disabled===false){ if(this.formData.disabled===false){
@@ -231,16 +251,22 @@
//如果是流程中表单,则需要加载流程表单data //如果是流程中表单,则需要加载流程表单data
this.showFlowData(); this.showFlowData();
}, },
mounted() {
console.log('edit3333',this.editData)
this.form={...this.editData}
// console.log('drawerVisible',this.drawerVisible)
},
methods: { methods: {
add () { add () {
this.edit({}); this.edit({});
}, },
edit (record) { edit (record) {
this.form.resetFields(); this.form.resetFields();
this.model = Object.assign({}, record); this.model = Object.assign({}, record);
this.visible = true; this.visible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'isModel','dbFieldTxt','dbFieldName','fieldShowType','dictName','dbLength','orderNum','fieldMustInput','isShowForm','showArea','isQuery','isShowLawsList','isShowSearch')) // this.form.setFieldsValue(pick(this.model,'isModel','dbFieldTxt','dbFieldName','fieldShowType','dictName','dbLength','orderNum','fieldMustInput','isShowForm','showArea','isQuery','isShowLawsList','isShowSearch'))
}) })
}, },
//渲染流程表单数据 //渲染流程表单数据
@@ -255,32 +281,38 @@
} }
}, },
submitForm () { submitForm () {
const that = this; // const that = this;
// 触发表单验证 // 触发表单验证
this.form.validateFields((err, values) => { // console.log(this.$refs.tagform)
if (!err) { this.$refs.tagEditForm.validate((valid)=>{
that.confirmLoading = true; // console.log('valid',valid)
if (valid) {
this.confirmLoading = true;
let httpurl = ''; let httpurl = '';
let method = ''; let method = '';
if(!this.model.id){ console.log('this.editId',this.editId)
if(this.submitEdit=='add'){
httpurl+=this.url.add; httpurl+=this.url.add;
method = 'post'; method = 'post';
}else{ this.form.id=''
}else if(this.submitEdit=='edit'){
httpurl+=this.url.edit; httpurl+=this.url.edit;
method = 'put'; method = 'put';
this.form.id=this.editId
} }
let formData = Object.assign(this.model, values);
console.log("表单提交数据",formData) // let formData = Object.assign(this.editId, this.form);
httpAction(httpurl,formData,method).then((res)=>{ // console.log("表单提交数据",this.form)
httpAction(httpurl,this.form,method).then((res)=>{
if(res.success){ if(res.success){
that.$message.success(res.message); this.$message.success(res.message);
that.$emit('ok',false); this.$emit('ok',false);
}else{ }else{
that.$message.warning(res.message); this.$message.warning(res.message);
} }
}).finally(() => { }).finally(() => {
that.confirmLoading = false; this.confirmLoading = false;
}) })
} }
@@ -303,6 +335,11 @@
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.form-tag{
.tag-content{
margin-bottom: 30px;
}
}
.tag-info{ .tag-info{
margin-left: 30px; margin-left: 30px;
} }
@@ -0,0 +1,220 @@
<template>
<div class="dic-list">
<div class="dic-list-content">
<div class="dic-list-header">
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-model-item label="名称">
<a-input v-model="form.tagName" placeholder="请输入名称" />
</a-form-model-item>
</a-form-model>
<div class="form-btn">
<a-button class="form-btn-search" type="primary" @click="search">查询</a-button>
<a-button class="form-btn-reset" @click="reset">重置</a-button>
</div>
</div>
<div class="dic-list-module">
<a-button type="primary" class="dic-list-add" @click="dicAdd">{{$t('add')}}</a-button>
</div>
<div class="dic-list-table">
<list-table v-if="dictVal=='list'" :tableData="tableData" @editDict="editDict"></list-table>
<tree-table v-if="dictVal=='tree'" :tabletreeData="tabletreeData" @editDict="editTreeDict"></tree-table>
</div>
<a-modal class="dict-module" v-model="newVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="newVisible">
<a-form-model
v-if="newVisible"
class="dic-form-module"
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item label="名称" prop="name">
<a-input v-model="form.name" placeholder="请输入名称" />
</a-form-model-item>
<a-form-model-item label="英文名称" prop="enName">
<a-input v-model="form.enName" placeholder="请输入英文名称" />
</a-form-model-item>
<a-form-model-item label="父级名称" prop="parentName" v-if="parentVisible">
<a-tree-select
v-model="parentName"
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:tree-data="treeData"
placeholder="请选择父级名称"
tree-default-expand-all
>
<span v-if="key === '0-0-1'" slot="title" slot-scope="{ key, value }">
Child Node1 {{ value }}
</span>
</a-tree-select>
</a-form-model-item>
<a-form-model-item label="描述" prop="describe">
<a-input v-model="form.describe" placeholder="请输入描述" />
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</div>
</template>
<script>
import listTable from './listTable'
import treeTable from './treeTable'
export default {
name: 'dicList',
components:{
listTable,
treeTable
},
props:{
dictVal:String,
},
data(){
return{
labelCol: { span: 4 },
wrapperCol: { span: 18 },
form:{},
newVisible:false,
rules:{
name:[
{ required: true, message: '请输入展示区域', trigger: 'blur' },
{ min:1, max: 30, message: '长度在 1 - 30字符', trigger: 'blur' },
],
enName:[
{ min:1, max: 100, message: '长度在 1 - 100字符', trigger: 'blur' },
],
describe:[
{ min:1, max: 300, message: '长度在 1 - 300字符', trigger: 'blur' },
]
},
tableData:[
{
key: '1',
name: '适用地区',
enName:'aaaaa',
describe:'单选',
},
{
key: '2',
name: '类别',
enName:'bbbb',
describe:'单选',
},
],
tabletreeData:[],
parentName:undefined,
treeData:[
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
value: '0-0-1',
key: '0-0-1',
scopedSlots: {
// custom title
title: 'title',
},
},
{
title: 'Child Node2',
value: '0-0-2',
key: '0-0-2',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
},
],
parentVisible:false,
}
},
watch: {
parentName(value) {
console.log(value);
},
},
mounted() {
console.log(this.dictVal)
},
methods:{
//搜索
search(){
},
//重置
reset(){
},
//新增
dicAdd(){
this.newVisible=true;
if(this.dictVal=='list'){
this.parentVisible=false
}else if(this.dictVal='tree'){
this.parentVisible=true
}
},
//保存
hideModal(){
},
//取消
cancelModel(){
this.newVisible=false;
},
//列表编辑
editDict(val){
this.newVisible=val
this.parentVisible=false
},
//树状编辑
editTreeDict(val){
this.newVisible=val
this.parentVisible=true
}
}
}
</script>
<style lang="less" scoped>
.dic-list{
.dic-list-content{
.dic-list-header{
display: flex;
justify-content: space-between;
.form-btn{
.form-btn-search{
margin-right: 10px;
}
}
}
.dic-list-module{
margin-bottom: 20px;
}
}
}
.dict-module{
.ant-modal-footer{
align:center;
}
}
</style>
<style lang="less">
.dict-module{
.ant-modal-footer{
text-align:center;
}
}
</style>
@@ -0,0 +1,90 @@
<template>
<div class="list-table">
<a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="tag-con-table">
<template slot="action" slot-scope="text, record">
<a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a>
<a-popconfirm
v-if="tableData.length"
title="Sure to delete?"
@confirm="() => onDelete(record)"
>
<a class="action-delete" href="javascript:;">删除</a>
</a-popconfirm>
</template>
</a-table>
</div>
</template>
<script>
export default {
name: 'listTable',
props:{
tableData:Array,
},
data(){
return{
selectedRowKeys:[],
columns: [
{
title: '名称',
dataIndex: 'name',
key: 'name',
align: "center",
width: 100,
},
{
title: '英文名称',
align: "center",
width: 100,
dataIndex: 'enName',
},
{
title: '描述',
align: "center",
width: 100,
dataIndex: 'describe',
},
{
title: this.$t('operation'),
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
align: "center",
width: 170
}
],
}
},
mounted() {
},
methods:{
//编辑
actionEdit(val){
this.$emit('editDict',true)
},
//删除
onDelete(val){
},
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
}
}
</script>
<style lang="less" scoped>
.list-table{
.tag-con-table{
.action-edit{
margin-right: 5px;
}
.action-delete{
color:red;
}
}
}
</style>
@@ -1,6 +1,6 @@
<template> <template>
<div class="new-tag-drawer"> <div class="new-tag-drawer">
<onl-cgform-tag-form ref="realForm" @ok="submitCallback" :isTagContent="isTagContent" :disabled="disableSubmit" normal> </onl-cgform-tag-form> <onl-cgform-tag-form ref="realForm" @ok="submitCallback" :isTagContent="isTagContent" :editData="editData" :editId=editId :submitEdit="submitEdit" :disabled="disableSubmit" normal> </onl-cgform-tag-form>
<div class="drawer-footer"> <div class="drawer-footer">
<a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0;">保存</a-button> <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0;">保存</a-button>
@@ -28,7 +28,10 @@
}, },
props:{ props:{
drawerVisible:Boolean, drawerVisible:Boolean,
isTagContent:Boolean isTagContent:Boolean,
editData:Object,
editId:String,
submitEdit:String
}, },
mounted() { mounted() {
this.visible=this.drawerVisible this.visible=this.drawerVisible
@@ -0,0 +1,255 @@
<template>
<div class="tree-table">
<div class="tree-table-content">
<a-table
bordered
class="tree-table-con"
:columns="columns"
:data-source="tabData"
:row-selection="{selectedRowKeys: selectedRowKeys, onSelectAll: onSelectAll, onSelect: onSelect}"
>
<template slot="action" slot-scope="text, record">
<a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a>
<a-popconfirm
v-if="tabData.length"
title="Sure to delete?"
@confirm="() => onDelete(record)"
>
<a class="action-delete" href="javascript:;">删除</a>
</a-popconfirm>
</template>
</a-table>
</div>
</div>
</template>
<script>
export default {
name: 'treeTable',
props:{
},
data(){
return{
columns: [
{
title: '名称',
dataIndex: 'name',
key: 'name',
align: "center",
},
{
title: '英文名称',
dataIndex: 'enName',
key: 'enName',
width: '12%',
align: "center",
},
{
title: '描述',
dataIndex: 'describe',
width: '30%',
key: 'describe',
align: "center",
},
{
title: this.$t('operation'),
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
align: "center",
width: 170
}
],
tabData:[
{
key: 1,
name: 'John Brown sr.',
enName: 'ddddd',
describe: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
enName: 'oouuu',
describe: 'New York No. 2 Lake Park',
},
{
key: 12,
name: 'John Brown jr.',
enName: 'John Brown',
describe: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Brown',
enName: 'mmmmm',
describe: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
enName: 'lllll',
describe: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
enName: 'yyjjg',
describe: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr.',
enName: 'uioo',
describe: 'London No. 3 Lake Park',
},
{
key: 1312,
name: 'Jimmy Green sr.',
enName: 'jhkj',
describe: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: 2,
name: 'Joe Black',
enName: 'trttt',
describe: 'Sidney No. 1 Lake Park',
},
],
selectedRowKeys:[]
}
},
mounted() {
},
methods:{
//删除
onDelete(val){
},
//编辑
actionEdit(val){
this.$emit('editDict',true)
},
onSelectAll(selected) {
if (selected) {
const tabData = this.tabData;
const arr = [];
setVal(tabData, arr);
this.selectedRowKeys = arr;
} else {
this.selectedRowKeys = [];
}
function setVal(list, arr) {
list.forEach(v => {
arr.push(v.key);
if (v.children) {
setVal(v.children, arr);
}
});
}
},
onSelect(record, selected) {
const set = new Set(this.selectedRowKeys);
const tabData = this.tabData;
const key = record.key;
if (selected) {
set.add(key);
record.children && setChildCheck(record.children);
setParentCheck(key);
} else {
set.delete(key);
record.children && setChildUncheck(record.children);
setParentUncheck(key);
}
this.selectedRowKeys = Array.from(set);
// 设置父级选择
function setParentCheck(key) {
let parent = getParent(key);
if (parent) {
set.add(parent.key);
setParentCheck(parent.key);
}
}
// 设置父级取消,如果父级的子集有选择,则不取消
function setParentUncheck(key) {
let childHasCheck = false,
parent = getParent(key);
if (parent) {
let childlist = parent.children;
childlist.forEach(function(v) {
if (set.has(v.key)) childHasCheck = true;
});
if (!childHasCheck) {
set.delete(parent.key);
setParentUncheck(parent.key);
}
}
}
// 获取当前对象的父级
function getParent(key) {
for (let i = 0; i < tabData.length; i++) {
if (tabData[i].key === key) {
return null;
}
}
return _getParent(tabData);
function _getParent(list) {
let childlist,
isExist = false;
for (let i = 0; i < list.length; i++) {
if ((childlist = list[i].children)) {
childlist.forEach(function(v) {
if (v.key === key) isExist = true;
});
if (isExist) {
return list[i];
}
if (_getParent(childlist)) {
return _getParent(childlist);
}
}
}
}
}
// 设置child全选
function setChildCheck(list) {
list.forEach(function(v) {
set.add(v.key);
v.children && setChildCheck(v.children);
});
}
// 设置child取消
function setChildUncheck(list) {
list.forEach(function(v) {
set.delete(v.key);
v.children && setChildUncheck(v.children);
});
}
}
}
}
</script>
<style lang="less" scoped>
.tree-table{
.tree-table-content{
.tree-table-con{
.action-edit{
margin-right: 10px;
}
.action-delete{
color: red;
}
}
}
}
</style>
@@ -16,7 +16,14 @@
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a @click="editVisible(record.id)">编辑</a> <a @click="editVisible(record.id)">编辑</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a class="table-del">删除</a> <a-popconfirm
v-if="tableData.length"
title="Sure to delete?"
@confirm="() => deleteVisible(record.id)"
>
<a class="table-del" href="javascript:;">删除</a>
</a-popconfirm>
<!-- <a class="table-del" @click="deleteVisible(record.id)">删除</a>-->
</span> </span>
</a-table> </a-table>
</div> </div>
@@ -49,7 +56,10 @@
}, },
editVisible(id){ editVisible(id){
this.$emit('visibleEd',true,id) this.$emit('visibleEd',true,id,'编辑标签项')
},
deleteVisible(id){
this.$emit('visibleDelete',id)
} }
} }
} }
@@ -23,7 +23,6 @@
<a-modal class="show-content" v-model="contentVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="contentVisible"> <a-modal class="show-content" v-model="contentVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="contentVisible">
<a-form-model <a-form-model
class="tag-content" class="tag-content"
ref="ruleForm" ref="ruleForm"
:model="form" :model="form"
:rules="rules" :rules="rules"
@@ -57,20 +56,40 @@
</a-form-model> </a-form-model>
</a-modal> </a-modal>
<a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"> <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="tag-con-table">
<template slot="name" slot-scope="text, record">
<editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" /> <template slot="action" slot-scope="text, record">
</template> <a-popover placement="right" v-model="typeVisible[record.key]" trigger="click">
<template slot="operation" slot-scope="text, record"> <template slot="content" class="type-popover-content">
<div class="type-popover">
<p class="type type-input" @click="handleDicPop(record,'list')">下拉选择</p>
<p class="type type-select" @click="handleDicPop(record,'tree')">树状结构</p>
</div>
</template>
<a class="action-dict" href="javascript:;">字典配置</a>
</a-popover>
<a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a>
<a-popconfirm <a-popconfirm
v-if="dataSource.length" v-if="tableData.length"
title="Sure to delete?" title="Sure to delete?"
@confirm="() => onDelete(record.key)" @confirm="() => onDelete(record)"
> >
<a href="javascript:;">Delete</a> <a class="action-delete" href="javascript:;">删除</a>
</a-popconfirm> </a-popconfirm>
</template> </template>
</a-table> </a-table>
<a-drawer
class="dict-drawer"
title="字典列表"
placement="right"
:closable="true"
:visible="dicVisible"
:after-visible-change="afterDicVisibleChange"
@close="onDicClose"
width="1000px"
>
<dic-list :dictVal="dictVal" v-if="dicVisible"></dic-list>
</a-drawer>
<!-- <tab-table :tableData="tableData" :columns="columns"></tab-table>--> <!-- <tab-table :tableData="tableData" :columns="columns"></tab-table>-->
</div> </div>
@@ -78,10 +97,12 @@
<script> <script>
import tabTable from './tabTable' import tabTable from './tabTable'
import dicList from '../dialog/dicList'
export default { export default {
name: 'tagContent', name: 'tagContent',
components:{ components:{
tabTable tabTable,
dicList
}, },
data(){ data(){
return{ return{
@@ -132,8 +153,8 @@
width: 170 width: 170
} }
], ],
labelCol: { span: 4 }, labelCol: { span:4 },
wrapperCol: { span: 14 }, wrapperCol: { span: 18 },
form:{}, form:{},
rules:{ rules:{
tagName:[{ required: true, message: '请输入标签名称', trigger: 'change' }, tagName:[{ required: true, message: '请输入标签名称', trigger: 'change' },
@@ -142,7 +163,11 @@
{ required: true, message: '请选择标签类型', trigger: 'blur' }, { required: true, message: '请选择标签类型', trigger: 'blur' },
], ],
} },
typeVisible:{},
dicVisible:false,
dictVal:'',
} }
}, },
computed:{ computed:{
@@ -162,10 +187,10 @@
this.contentVisible=true this.contentVisible=true
}, },
hideModal(){ hideModal(){
console.log('form',this.form) // console.log('form',this.form)
this.$refs.ruleForm.validate((valide)=>{ this.$refs.ruleForm.validate((valid)=>{
// console.log('valide',valide) // console.log('valide',valide)
if(valide){ if(valid){
this.contentVisible=false this.contentVisible=false
} }
@@ -178,17 +203,75 @@
onCellChange(){ onCellChange(){
}, },
onDelete(){ //删除
onDelete(val){
console.log('delval',val)
}, },
onSelectChange(selectedRowKeys) { onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys); console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys; this.selectedRowKeys = selectedRowKeys;
}, },
//编辑
actionEdit(val){
this.contentVisible=true
},
//字典配置
handleDicPop(record,val){
this.dictVal=val
if(val=='list'){
this.typeVisible[record.key]=false
this.dicVisible=true
}else if(val == 'tree'){
this.typeVisible[record.key]=false
this.dicVisible=true
}
},
afterDicVisibleChange(val) {
console.log('visible', val);
},
//字典列表关闭
onDicClose() {
this.dicVisible = false;
},
} }
} }
</script> </script>
<style scoped> <style lang="less" scoped>
.tag-content{
.tag-con-table{
.action-dict,.action-edit{
margin-right: 10px;
}
.action-delete{
color:red;
}
}
}
.type-popover{
p{
margin:5px 0;
}
p:hover{
cursor: pointer;
color:#0c8fcf;
}
}
.dict-drawer{
.ant-drawer-content-wrapper{
width: 100%;
}
}
</style>
<style lang="less">
.show-content{
.ant-modal-footer{
text-align: center;
}
}
</style> </style>
@@ -38,7 +38,7 @@
<a-button type="primary" @click="handleShow">展示区域管理</a-button> <a-button type="primary" @click="handleShow">展示区域管理</a-button>
</div> </div>
<a-drawer class="show-drawer" :title="titleTag" placement="right" width="1000px" @close="close" :visible="drawerVisible" :after-visible-change="afterVisibleChange" > <a-drawer class="show-drawer" :title="titleTag" placement="right" width="1000px" @close="close" :visible="drawerVisible" :after-visible-change="afterVisibleChange" >
<new-drawer v-if="drawerVisible" :isTagContent="isTagContent" :editData="editData" @closeTag="closeTag"></new-drawer> <new-drawer v-if="drawerVisible&&editFlag" :drawerVisible="drawerVisible" :isTagContent="isTagContent" :editData="editData" :editId="editId" :submitEdit="submitEdit" @closeTag="closeTag" ></new-drawer>
</a-drawer> </a-drawer>
<a-modal class="show-area" v-model="areaVisible" title="展示区域管理" :footer="null" @cancel="hideModal"> <a-modal class="show-area" v-model="areaVisible" title="展示区域管理" :footer="null" @cancel="hideModal">
<area-manage v-if="areaVisible" @diaHide="diaHide" :areaTable="areaTable" @submitOk="submitOk" @deleteOk="deleteOk" @updateOk="updateOk"></area-manage> <area-manage v-if="areaVisible" @diaHide="diaHide" :areaTable="areaTable" @submitOk="submitOk" @deleteOk="deleteOk" @updateOk="updateOk"></area-manage>
@@ -46,7 +46,7 @@
<div class="tag-doc-tab"> <div class="tag-doc-tab">
<a-tabs default-active-key="1" @change="callbackTab"> <a-tabs default-active-key="1" @change="callbackTab">
<a-tab-pane key="1" tab="文档库"> <a-tab-pane key="1" tab="文档库">
<tabTable :tableData="tableData" :columns="taglabColumns" @visibleEd="visibleEd"></tabTable> <tabTable :tableData="tableData" :columns="taglabColumns" @visibleEd="visibleEd" @visibleDelete="visibleDelete"></tabTable>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="文档拆分" force-render> <a-tab-pane key="2" tab="文档拆分" force-render>
<tabTable :tableData="tableData" :columns="tagSplit"></tabTable> <tabTable :tableData="tableData" :columns="tagSplit"></tabTable>
@@ -57,7 +57,7 @@
</template> </template>
<script> <script>
import { putAction,postAction,getAction } from '@/api/manage' import { putAction,postAction,getAction,deleteAction } from '@/api/manage'
import JInput from '@/components/jero/JInput' import JInput from '@/components/jero/JInput'
import tabTable from './tabTable' import tabTable from './tabTable'
import areaManage from '../dialog/areaManage' import areaManage from '../dialog/areaManage'
@@ -81,7 +81,8 @@
titleTag:'新增标签项', titleTag:'新增标签项',
typeVisible:false, typeVisible:false,
isTagContent:false, isTagContent:false,
editData:[], //编辑的数据 editData:{}, //编辑的数据
editFlag:true,
areas:[ areas:[
{ {
value: 1, value: 1,
@@ -115,18 +116,16 @@
], ],
taglabColumns: [ taglabColumns: [
{ {
dataIndex: 'dbFieldName', title: '中文名称',
key: 'dbFieldName',
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'dbFieldName' },
align: "center", align: "center",
width: 100, width: 100,
dataIndex: 'dbFieldTxt',
}, },
{ {
title: '英文名称', title: '英文名称',
align: "center", align: "center",
width: 100, width: 100,
dataIndex: 'dbFieldEnName', dataIndex: 'dbFieldName',
}, },
{ {
title: '属性类型', title: '属性类型',
@@ -138,7 +137,7 @@
title: '字段长度', title: '字段长度',
align: "center", align: "center",
width: 80, width: 80,
dataIndex: 'fieldLength' dataIndex: 'dbLength'
}, },
{ {
title: '展示顺序', title: '展示顺序',
@@ -198,7 +197,9 @@
areaVisible:false, areaVisible:false,
areaTable:[], areaTable:[],
drawerVisible:false, drawerVisible:false,
value:1 value:1,
editId:'',
submitEdit:'add'
} }
}, },
mounted() { mounted() {
@@ -213,6 +214,7 @@
}, },
handleAdd(){ handleAdd(){
this.drawerVisible=true this.drawerVisible=true
}, },
//区域管理列表数据 //区域管理列表数据
@@ -270,33 +272,66 @@
this.handleShow() this.handleShow()
}, },
//编辑 //编辑
visibleEd(val,id){ visibleEd(val,id,title){
this.editFlag=false
this.drawerVisible=val this.drawerVisible=val
this.titleTag=title
this.editId=id
this.submitEdit='edit'
let params={ let params={
id:id id:id
} }
getAction(`Field/onlCgformField/queryById`,params).then(res=>{ getAction(`tag/onlCgformTag/queryById`,params).then(res=>{
if(res.success){ if(res.success){
this.editData=res.result this.editData=res.result
this.editFlag=true
}
})
},
//删除
visibleDelete(id){
let params={
id:id
}
// deleteAction(that.url.delete, {depId: this.currentDeptId, userId: id}).then((res) => {
// if (res.success) {
//
// }
// })
deleteAction(`tag/onlCgformTag/delete`,params).then(res=>{
if(res.success){
this.$message('删除成功')
} }
}) })
}, },
//新增关闭 //新增关闭
closeTag(val){ closeTag(val){
this.drawerVisible=val this.drawerVisible=val
this.loadData(1)
}, },
afterVisibleChange(val){ afterVisibleChange(val){
// console.log('val',val) // console.log('val',val)
}, },
handleAddPop(val){ handleAddPop(val){
this.drawerVisible=true this.drawerVisible=true
this.titleTag='新增标签项'
this.submitEdit='add'
if(val=='input'){ if(val=='input'){
this.typeVisible=false this.typeVisible=false
this.isTagContent=false this.isTagContent=false
// this.getFormCon()
} else if(val='select'){ } else if(val='select'){
this.typeVisible=false this.typeVisible=false
this.isTagContent=true this.isTagContent=true
} }
},
//获取表单内容
getFormCon(){
getAction(`tag/onlCgformTag/list`, { }).then(res=>{
if(res.success){
}
})
} }
} }
} }