展示区域列表

This commit is contained in:
caoyang
2022-03-03 10:32:48 +08:00
parent 1b495af5fb
commit 265cb484fc
6 changed files with 164 additions and 119 deletions
@@ -25,8 +25,8 @@
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="英文名称" prop="dbFieldName">
<a-input v-model="form.dbFieldName" placeholder="请输入英文名称" :maxLength="120" ></a-input>
<a-form-model-item label="英文名称" prop="dbFieldEnName">
<a-input v-model="form.dbFieldEnName" placeholder="请输入英文名称" :maxLength="120" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
@@ -173,16 +173,28 @@
sort:[
{ required: true, message: '请输入排序号', trigger: 'change' },
]
}
},
areaTable:[]
}
},
props:{
areaTable:Array
// areaTable:Array
},
mounted() {
this.loadData()
},
methods:{
loadData(){
let params={
...this.queryParams
}
getAction(`tag/onlCgformArea/page`,params).then(res=>{
if(res.success){
this.areaTable=res.result.records
this.total=res.result.total
}
})
},
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
@@ -202,7 +214,7 @@
putAction(`tag/onlCgformArea/edit`,this.form).then((res)=>{
if(res.success){
this.$message.success(res.result);
this.$emit('updateOk',res.result)
this.loadData()
this.form={
isModel:'',
showArea:'',
@@ -216,7 +228,7 @@
postAction(`/tag/onlCgformArea/add`,this.form).then(res=>{
if(res.success){
this.$message.success( res.result,);
this.$emit('submitOk',res.result)
this.loadData()
this.form={
isModel:'',
showArea:'',
@@ -243,10 +255,8 @@
deleteArea(val){
deleteAction(`tag/onlCgformArea/delete`, {id: val}).then((res) => {
if(res.success){
this.$notification.success({
message: res.result,
});
this.$emit('deleteOk',res.result)
this.$message.success(res.result);
this.loadData()
}
})
@@ -262,19 +272,18 @@
this.form={...res.result}
// this.$emit('updateOk',res.result)
}
})
},
//点击页数
onChangePage(page,pageSize){
this.queryParams.pageNo = page
this.$emit('Ok')
this.loadData()
},
//一页显示条数
SizeChange(page,pageSize){
this.queryParams.pageSize = pageSize
this.$emit('Ok')
this.loadData()
},
//正则替换小数点
limitNumber(value) {
@@ -17,7 +17,7 @@
</div>
<div class="dic-list-table">
<list-table v-if="dictVal=='list'&&dataFlag" :tableData="tableData" @editDict="editDict" @deleteDict="deleteDict" :total="total"></list-table>
<tree-table v-if="dictVal=='tree'" :tabletreeData="tabletreeData" @editDict="editTreeDict" :total="total"></tree-table>
<tree-table v-if="dictVal=='tree'&&dataFlag" :tabletreeData="tabletreeData" :record="record" @editDict="editTreeDict" :total="total"></tree-table>
</div>
<a-modal class="dict-module" v-model="newVisible" :title="titleDict" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="newVisible">
<a-form-model
@@ -30,25 +30,30 @@
:wrapper-col="wrapperCol"
>
<a-form-model-item label="名称" prop="itemText">
<a-input v-model="form.itemText" placeholder="请输入名称" />
<a-form-model-item label="名称" prop="name">
<a-input v-model="form.name" placeholder="请输入名称" />
</a-form-model-item>
<a-form-model-item label="英文名称" prop="itemValue">
<a-input v-model="form.itemValue" placeholder="请输入英文名称" />
<a-form-model-item label="英文名称" prop="enName">
<a-input v-model="form.enName" placeholder="请输入英文名称" />
</a-form-model-item>
<a-form-model-item label="父级名称" prop="dictCode" v-if="parentVisible">
<a-tree-select
v-model="dictCode"
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 label="父级名称" prop="pid" v-if="parentVisible">
<a-select v-model="form.pid" @change="handleChange" placeholder="请选择" >
<a-select-option :value="item.id" v-for="(item, index) in tabletreeData" :key="item.id">
{{item.name}}
</a-select-option>
</a-select>
<!-- <a-tree-select-->
<!-- v-model="pid"-->
<!-- 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="description">
<a-input v-model="form.description" placeholder="请输入描述" />
@@ -87,11 +92,11 @@
form:{},
newVisible:false,
rules:{
itemText:[
name:[
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min:1, max: 30, message: '长度在 1 - 30字符', trigger: 'blur' },
],
itemValue:[
enName:[
{ required: true, message: '请输入英文名称', trigger: 'blur' },
{ min:1, max: 100, message: '长度在 1 - 100字符', trigger: 'blur' },
],
@@ -161,14 +166,7 @@
methods:{
//获取父级列表
getParents(){
let params={
sysDictId:this.record.id
}
getAction(`sys/dict/loadDictItem`,params).then(res=>{
if(res.success){
}
})
},
//获取列表数据
loadData(){
@@ -188,15 +186,49 @@
})
}else if(this.dictVal=='tree'){
getAction(`sys/category/rootList`,{
sysDictId:this.record.id,
getAction(`sys/category/queryBySysDictId`,{
id:this.record.id,
isTagDict:1
}).then(res=>{
let parentNode=[]
this.tabletreeData=[...res.result]
let data = this.toTree(this.tabletreeData)
this.tabletreeData=data
this.dataFlag=true
})
}
},
//将数据拼成树形结构
toTree(config) {
// 删除 所有 children,以防止多次调用
config.forEach(function(item) {
delete item.children;
});
// 将数据存储为 以 id 为 KEY 的 map 索引数据列
let map = {};
config.forEach((item) => {
// 树 的label
item.label = item.name;
item.key=item.id;
map[item.id] = item;
});
let val = [];
config.forEach((item) => {
// 以当前遍历项,的pid,去map对象中找到索引的id
let parent = map[item.pid];
// 如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
if (parent) {
(parent.children || (parent.children = [])).push(item);
} else {
//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
val.push(item);
}
});
return val;
},
//搜索
search(){
this.loadData()
@@ -248,6 +280,25 @@
}
})
}
}else if(this.dictVal=='tree'){
let params = {
...this.form,
sysDictId: this.record.id
}
if (this.isEdit) {
}else{
//新增
postAction(`sys/category/add`, params).then(res => {
if (res.success) {
this.$message.success(res.message)
this.loadData()
this.newVisible = false
} else {
this.$message.warning(res.message)
}
})
}
}
},
//取消
@@ -5,13 +5,15 @@
class="tree-table-con"
:columns="columns"
:data-source="tabData"
:pagination="false"
:loading="loading"
: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?"
title="确定删除?"
@confirm="() => onDelete(record)"
>
<a class="action-delete" href="javascript:;">删除</a>
@@ -23,13 +25,16 @@
</template>
<script>
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
export default {
name: 'treeTable',
props:{
tabletreeData:Array,
record:Object
},
data(){
return{
loading:false,
columns: [
{
title: '名称',
@@ -59,77 +64,57 @@
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',
},
],
tabData:[],
selectedRowKeys:[]
}
},
mounted() {
// this.loadData()
this.tabData=this.tabletreeData
},
methods:{
loadData(){
this.loading=true
getAction(`sys/category/queryBySysDictId`,{
id:this.record.id,
isTagDict:1
}).then(res=>{
let treeData = [...res.result]
let data = this.toTree(treeData)
this.tabData=data
this.loading=false
console.log('treedata',data)
// this.dataFlag=true
})
},
//将数据拼成树形结构
toTree(config) {
// 删除 所有 children,以防止多次调用
config.forEach(function(item) {
delete item.children;
});
// 将数据存储为 以 id 为 KEY 的 map 索引数据列
let map = {};
config.forEach((item) => {
// 树 的label
item.label = item.name;
item.key=item.id;
map[item.id] = item;
});
let val = [];
config.forEach((item) => {
// 以当前遍历项,的pid,去map对象中找到索引的id
let parent = map[item.pid];
// 如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
if (parent) {
(parent.children || (parent.children = [])).push(item);
} else {
//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
val.push(item);
}
});
return val;
},
//删除
onDelete(val){
@@ -297,7 +297,7 @@
this.dictVal='list'
this.dicVisible=true
}else if(record.attributeType=='2'){
}else{
// this.typeVisible[record.id]=false
this.dictVal='tree'
this.dicVisible=true
@@ -47,7 +47,7 @@
<new-drawer v-if="drawerVisible&&editFlag" :drawerVisible="drawerVisible" :isTagContent="isTagContent" :editData="editData" :editId="editId" :submitEdit="submitEdit" @closeTag="closeTag" ></new-drawer>
</a-drawer>
<a-modal class="show-area" v-model="areaVisible" :title="$t('ExhibitionAreaManagement')" :footer="null" @cancel="hideModal">
<area-manage v-if="areaVisible" @diaHide="diaHide" :total="areaTotal" :areaTable="areaTable" @submitOk="submitOk" @deleteOk="deleteOk" @updateOk="updateOk"></area-manage>
<area-manage v-if="areaVisible" @diaHide="diaHide" @submitOk="submitOk" @deleteOk="deleteOk" @updateOk="updateOk"></area-manage>
</a-modal>
<div class="tag-doc-tab">
<a-spin :spinning="spinning" tip="Loading...">
@@ -238,12 +238,12 @@
//区域管理列表数据
handleShow(){
this.areaVisible=true
getAction(`/tag/onlCgformArea/list`,{}).then(res=>{
if(res.success){
this.areaTable=res.result
this.areaTotal=res.total
}
})
// getAction(`tag/onlCgformArea/page`,{}).then(res=>{
// if(res.success){
// this.areaTable=res.result
// this.areaTotal=res.total
// }
// })
},
//标签项管理文档库初始数据
loadData(val){