标签项列表修改

This commit is contained in:
caoyang
2022-02-18 09:32:07 +08:00
parent 12eeb7e8a7
commit c898d3eb4f
6 changed files with 259 additions and 124 deletions
@@ -16,7 +16,7 @@
<a-button type="primary" class="dic-list-add" @click="dicAdd">{{$t('add')}}</a-button> <a-button type="primary" class="dic-list-add" @click="dicAdd">{{$t('add')}}</a-button>
</div> </div>
<div class="dic-list-table"> <div class="dic-list-table">
<list-table v-if="dictVal=='list'" :tableData="tableData" @editDict="editDict"></list-table> <list-table v-if="dictVal=='list'" :tableData="tableData" @editDict="editDict" @deleteDict="deleteDict"></list-table>
<tree-table v-if="dictVal=='tree'" :tabletreeData="tabletreeData" @editDict="editTreeDict"></tree-table> <tree-table v-if="dictVal=='tree'" :tabletreeData="tabletreeData" @editDict="editTreeDict"></tree-table>
</div> </div>
<a-modal class="dict-module" v-model="newVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="newVisible"> <a-modal class="dict-module" v-model="newVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="newVisible">
@@ -30,8 +30,8 @@
:wrapper-col="wrapperCol" :wrapper-col="wrapperCol"
> >
<a-form-model-item label="名称" prop="name"> <a-form-model-item label="名称" prop="itemText">
<a-input v-model="form.name" placeholder="请输入名称" /> <a-input v-model="form.itemText" placeholder="请输入名称" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="英文名称" prop="enName"> <a-form-model-item label="英文名称" prop="enName">
<a-input v-model="form.enName" placeholder="请输入英文名称" /> <a-input v-model="form.enName" placeholder="请输入英文名称" />
@@ -50,8 +50,8 @@
</span> </span>
</a-tree-select> </a-tree-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="描述" prop="describe"> <a-form-model-item label="描述" prop="description">
<a-input v-model="form.describe" placeholder="请输入描述" /> <a-input v-model="form.description" placeholder="请输入描述" />
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
@@ -61,6 +61,8 @@
</template> </template>
<script> <script>
import { getAction, postAction, deleteAction } from '@/api/manage'
import listTable from './listTable' import listTable from './listTable'
import treeTable from './treeTable' import treeTable from './treeTable'
export default { export default {
@@ -71,7 +73,7 @@
}, },
props:{ props:{
dictVal:String, dictVal:String,
record:Object
}, },
data(){ data(){
return{ return{
@@ -80,14 +82,14 @@
form:{}, form:{},
newVisible:false, newVisible:false,
rules:{ rules:{
name:[ itemText:[
{ required: true, message: '请输入展示区域', trigger: 'blur' }, { required: true, message: '请输入展示区域', trigger: 'blur' },
{ min:1, max: 30, message: '长度在 1 - 30字符', trigger: 'blur' }, { min:1, max: 30, message: '长度在 1 - 30字符', trigger: 'blur' },
], ],
enName:[ enName:[
{ min:1, max: 100, message: '长度在 1 - 100字符', trigger: 'blur' }, { min:1, max: 100, message: '长度在 1 - 100字符', trigger: 'blur' },
], ],
describe:[ description:[
{ min:1, max: 300, message: '长度在 1 - 300字符', trigger: 'blur' }, { min:1, max: 300, message: '长度在 1 - 300字符', trigger: 'blur' },
] ]
}, },
@@ -144,9 +146,22 @@
}, },
}, },
mounted() { mounted() {
console.log(this.dictVal) // this.loadData()
}, },
methods:{ methods:{
//获取列表数据
loadData(){
let params={
dictId:this.record.id
}
getAction(`sys/dictItem/page`,params).then(res=>{
if(res.success){
if(this.dictVal=='list'){
this.tableData=[...res.result.records]
}
}
})
},
//搜索 //搜索
search(){ search(){
@@ -174,7 +189,8 @@
this.newVisible=false; this.newVisible=false;
}, },
//列表编辑 //列表编辑
editDict(val){ editDict(rec,val){
this.form={...rec}
this.newVisible=val this.newVisible=val
this.parentVisible=false this.parentVisible=false
}, },
@@ -182,6 +198,17 @@
editTreeDict(val){ editTreeDict(val){
this.newVisible=val this.newVisible=val
this.parentVisible=true this.parentVisible=true
},
//列表删除
deleteDict(val){
let params={
id:val
}
deleteAction(`sys/dictItem/delete`,params).then(res=>{
if(res.success){
this.loadData()
}
})
} }
} }
} }
@@ -1,6 +1,6 @@
<template> <template>
<div class="list-table"> <div class="list-table">
<a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="tag-con-table"> <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" class="tag-con-table">
<template slot="action" slot-scope="text, record"> <template slot="action" slot-scope="text, record">
<a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a> <a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a>
@@ -13,6 +13,17 @@
</a-popconfirm> </a-popconfirm>
</template> </template>
</a-table> </a-table>
<div class="page" v-if="tableData.length > 0">
<a-pagination
:show-total="total => ` ${total} `"
show-quick-jumper
show-size-changer
:page-size.sync="queryParams.pageSize"
:total="total"
@change="onChangePage"
@showSizeChange="SizeChange"
/>
</div>
</div> </div>
</template> </template>
@@ -20,17 +31,23 @@
export default { export default {
name: 'listTable', name: 'listTable',
props:{ props:{
tableData:Array, // tableData:Array,
}, },
data(){ data(){
return{ return{
tableData:[],
selectedRowKeys:[], selectedRowKeys:[],
total:0,
queryParams:{
pageNo:1,
pageSize:10
}, //搜索条件
columns: [ columns: [
{ {
title: '名称', title: '名称',
dataIndex: 'name', dataIndex: 'itemText',
key: 'name', key: 'itemText',
align: "center", align: "center",
width: 100, width: 100,
}, },
@@ -44,7 +61,7 @@
title: '描述', title: '描述',
align: "center", align: "center",
width: 100, width: 100,
dataIndex: 'describe', dataIndex: 'description',
}, },
{ {
title: this.$t('operation'), title: this.$t('operation'),
@@ -57,21 +74,43 @@
} }
}, },
mounted() { mounted() {
this.loadData()
}, },
methods:{ methods:{
//获取列表数据
loadData(){
let params={
...this.queryParams,
dictId:this.record.id
}
getAction(`sys/dictItem/page`,params).then(res=>{
if(res.success){
this.tableData=[...res.result.records]
}
})
},
//编辑 //编辑
actionEdit(val){ actionEdit(val){
this.$emit('editDict',true) this.$emit('editDict',val,true)
}, },
//删除 //删除
onDelete(val){ onDelete(val){
this.$emit('deleteDict',val.id,true)
}, },
onSelectChange(selectedRowKeys) { onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys); console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys; this.selectedRowKeys = selectedRowKeys;
}, },
//点击页数
onChangePage(page,pageSize){
this.queryParams.pageNo = page
this.loadData()
},
//一页显示条数
SizeChange(page,pageSize){
this.queryParams.pageSize = pageSize
this.loadData()
},
} }
} }
</script> </script>
@@ -86,5 +125,8 @@
color:red; color:red;
} }
} }
.page{
margin-top: 20px;
}
} }
</style> </style>
@@ -14,10 +14,10 @@
<a slot="name" slot-scope="text">{{ text }}</a> <a slot="name" slot-scope="text">{{ text }}</a>
<span slot="customTitle">属性名称</span> <span slot="customTitle">属性名称</span>
<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)" v-if="record.isReadOnly==0">编辑</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-popconfirm <a-popconfirm
v-if="tableData.length" v-if="tableData.length&&record.isReadOnly==0"
title="Sure to delete?" title="Sure to delete?"
@confirm="() => deleteVisible(record.id)" @confirm="() => deleteVisible(record.id)"
> >
@@ -1,11 +1,12 @@
<template> <template>
<div class="tag-content"> <div class="tag-content">
<a-card>
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="6" :sm="12"> <a-col :md="6" :sm="12">
<a-form-item :label="'标签项名称'"> <a-form-item :label="'标签项名称'">
<j-input :placeholder="'请输入标签名称'" v-model="queryParam.tagName"></j-input> <j-input :placeholder="'请输入标签名称'" v-model="queryParams.dictName"></j-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="6" :sm="8"> <a-col :md="6" :sm="8">
@@ -20,7 +21,7 @@
<div class="table-operator" style="border-top: 5px"> <div class="table-operator" style="border-top: 5px">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
</div> </div>
<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" :visible="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"
@@ -29,37 +30,29 @@
:label-col="labelCol" :label-col="labelCol"
:wrapper-col="wrapperCol" :wrapper-col="wrapperCol"
> >
<a-form-model-item ref="tagName" label="标签名称" prop="tagName"> <a-form-model-item ref="tagName" label="标签名称" prop="dictName">
<a-input <a-input
v-model="form.tagName" v-model="form.dictName"
@blur=" placeholder="请输入标签名称"
() => {
$refs.tagName.onFieldBlur();
}
"
/> />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="标签类型" prop="tagType"> <a-form-model-item label="标签类型" prop="fieldShowType">
<j-dict-select-tag type="list" v-model="form.tagType" dictCode="attribute_type" placeholder="请选择标签类型" /> <j-dict-select-tag type="list" v-model="form.fieldShowType" dictCode="field_show_type" placeholder="请选择标签类型" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item ref="describe" label="描述" prop="describe"> <a-form-model-item ref="describe" label="描述" prop="description">
<a-input <a-input
v-model="form.describe" v-model="form.description"
@blur=" placeholder="请输入描述"
() => {
$refs.describe.onFieldBlur();
}
"
/> />
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</a-modal> </a-modal>
<a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="tag-con-table"> <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" class="tag-con-table">
<template slot="action" slot-scope="text, record"> <template slot="action" slot-scope="text, record">
<a-popover placement="right" v-model="typeVisible[record.key]" trigger="click"> <a-popover placement="right" v-model="typeVisible[record.id]" trigger="click">
<template slot="content" class="type-popover-content"> <template slot="content" class="type-popover-content">
<div class="type-popover"> <div class="type-popover">
<p class="type type-input" @click="handleDicPop(record,'list')">下拉选择</p> <p class="type type-input" @click="handleDicPop(record,'list')">下拉选择</p>
@@ -78,36 +71,52 @@
</a-popconfirm> </a-popconfirm>
</template> </template>
</a-table> </a-table>
<div class="page" v-if="tableData.length > 0">
<a-pagination
:show-total="total => ` ${total} `"
show-quick-jumper
show-size-changer
:page-size.sync="queryParams.pageSize"
:total="total"
@change="onChangePage"
@showSizeChange="SizeChange"
/>
</div>
<a-drawer <a-drawer
class="dict-drawer" class="dict-drawer"
title="字典列表" title="字典列表"
placement="right" placement="right"
:closable="true" :closable="true"
:visible="dicVisible" :visible="dicVisible"
v-if="dicVisible"
:after-visible-change="afterDicVisibleChange" :after-visible-change="afterDicVisibleChange"
@close="onDicClose" @close="onDicClose"
width="1000px" width="1000px"
> >
<dic-list :dictVal="dictVal" v-if="dicVisible"></dic-list> <dic-list :dictVal="dictVal" :record="record" v-if="dicVisible"></dic-list>
</a-drawer> </a-drawer>
<!-- <tab-table :tableData="tableData" :columns="columns"></tab-table>--> <!-- <tab-table :tableData="tableData" :columns="columns"></tab-table>-->
</a-card>
</div> </div>
</template> </template>
<script> <script>
import tabTable from './tabTable' import { getAction, postAction, deleteAction } from '@/api/manage'
// import tabTable from './tabTable'
import dicList from '../dialog/dicList' import dicList from '../dialog/dicList'
export default { export default {
name: 'tagContent', name: 'tagContent',
components:{ components:{
tabTable, // tabTable,
dicList dicList
}, },
data(){ data(){
return{ return{
queryParam:{ total:0,
tagName:'', queryParams:{
pageNo:1,
pageSize:10
}, },
selectedRowKeys: [], selectedRowKeys: [],
contentVisible:false, contentVisible:false,
@@ -128,8 +137,8 @@
columns: [ columns: [
{ {
title: '标签名称', title: '标签名称',
dataIndex: 'tagName', dataIndex: 'dictName',
key: 'tagName', key: 'dictName',
align: "center", align: "center",
width: 100, width: 100,
}, },
@@ -137,13 +146,13 @@
title: '标签类型', title: '标签类型',
align: "center", align: "center",
width: 100, width: 100,
dataIndex: 'tagType', dataIndex: 'fieldShowType',
}, },
{ {
title: '描述', title: '描述',
align: "center", align: "center",
width: 100, width: 100,
dataIndex: 'describe', dataIndex: 'description',
}, },
{ {
title: this.$t('operation'), title: this.$t('operation'),
@@ -157,9 +166,9 @@
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
form:{}, form:{},
rules:{ rules:{
tagName:[{ required: true, message: '请输入标签名称', trigger: 'change' }, dictName:[{ required: true, message: '请输入标签名称', trigger: 'change' },
{ min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' }], { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' }],
tagType:[ fieldShowType:[
{ required: true, message: '请选择标签类型', trigger: 'blur' }, { required: true, message: '请选择标签类型', trigger: 'blur' },
], ],
@@ -167,31 +176,63 @@
typeVisible:{}, typeVisible:{},
dicVisible:false, dicVisible:false,
dictVal:'', dictVal:'',
record: { }
} }
}, },
computed:{ computed:{
}, },
mounted() { mounted() {
this.loadData();
}, },
methods:{ methods:{
//获取列表数据
loadData(param){
let params={
...this.queryParams,
is_tag_dict:1,
}
getAction(`sys/dict/page`,params).then(res=>{
if(res.success){
this.total=res.result.total
this.tableData=[...res.result.records]
}
})
},
//查询
searchQuery(){ searchQuery(){
this.loadData()
}, },
searchReset(){ searchReset(){
this.queryParams={
pageNo:1,
pageSize: 10
}
this.loadData()
}, },
handleAdd(){ handleAdd(){
this.contentVisible=true this.contentVisible=true
this.form={}
}, },
hideModal(){ hideModal(){
// console.log('form',this.form) // console.log('form',this.form)
let params={
...this.form,
is_tag_dict: 1,
is_read_only:1
}
this.$refs.ruleForm.validate((valid)=>{ this.$refs.ruleForm.validate((valid)=>{
// console.log('valide',valide) // console.log('valide',valide)
if(valid){ if(valid){
postAction(`sys/dict/add`,params).then(res=>{
if(res.success){
this.loadData()
this.contentVisible=false this.contentVisible=false
this.form={}
}
})
} }
}) })
@@ -199,13 +240,21 @@
}, },
cancelModel(){ cancelModel(){
this.contentVisible=false this.contentVisible=false
this.form={}
}, },
onCellChange(){ onCellChange(){
}, },
//删除 //删除
onDelete(val){ onDelete(val){
console.log('delval',val) let param={
id:val.id
}
deleteAction(`sys/dict/delete`,param).then(res=>{
if(res.success){
}
})
}, },
onSelectChange(selectedRowKeys) { onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys); console.log('selectedRowKeys changed: ', selectedRowKeys);
@@ -213,18 +262,20 @@
}, },
//编辑 //编辑
actionEdit(val){ actionEdit(val){
this.form={...val}
this.contentVisible=true this.contentVisible=true
}, },
//字典配置 //字典配置
handleDicPop(record,val){ handleDicPop(record,val){
this.record=record
this.dictVal=val this.dictVal=val
if(val=='list'){ if(val=='list'){
this.typeVisible[record.key]=false this.typeVisible[record.id]=false
this.dicVisible=true this.dicVisible=true
}else if(val == 'tree'){ }else if(val == 'tree'){
this.typeVisible[record.key]=false this.typeVisible[record.id]=false
this.dicVisible=true this.dicVisible=true
} }
@@ -236,6 +287,16 @@
onDicClose() { onDicClose() {
this.dicVisible = false; this.dicVisible = false;
}, },
//点击页数
onChangePage(page,pageSize){
this.queryParams.pageNo = page
this.loadData()
},
//一页显示条数
SizeChange(page,pageSize){
this.queryParams.pageSize = pageSize
this.loadData()
},
} }
} }
</script> </script>
@@ -251,6 +312,10 @@
} }
} }
.page{
margin-top: 20px;
}
} }
.type-popover{ .type-popover{
p{ p{
@@ -300,6 +300,7 @@
// }) // })
deleteAction(`tag/onlCgformTag/delete`,params).then(res=>{ deleteAction(`tag/onlCgformTag/delete`,params).then(res=>{
if(res.success){ if(res.success){
this.loadData(1)
this.$message('删除成功') this.$message('删除成功')
} }
}) })