标签管理

This commit is contained in:
caoyang
2022-03-22 16:44:51 +08:00
parent 6d1b518d3c
commit bcacdc9af9
4 changed files with 179 additions and 26 deletions
@@ -3,7 +3,7 @@
<div class="split-add-form-wrapper">
<a-drawer
class="split-table-drawer"
:title="title"
:title="formTitle"
placement="right"
:visible="visible"
:after-visible-change="afterVisibleChange"
@@ -324,7 +324,8 @@
}
},
props:{
addVisible:Boolean
addVisible:Boolean,
formTitle:String,
},
watch:{
selected(val){
@@ -1,6 +1,6 @@
<template>
<div class="split-detail">
<a-card :bordered="false">
<div class="split-detail" @click="clearMenu">
<a-card :bordered="false" >
<div class="split-detail-wrap">
<div class="split-detail-left">
<div class="split-detail-left-tree">
@@ -12,6 +12,8 @@
:defaultExpandAll="true"
:tree-data="gData"
@expand="onExpand"
@rightClick="rightClick"
@select="onSelect"
>
<template slot="title" slot-scope="{ title }">
<span v-if="title.indexOf(searchValue) > -1">
@@ -20,6 +22,17 @@
<span v-else>{{ title }}</span>
</template>
</a-tree>
<div :style="tmpStyle" v-if="NodeTreeItem">
<div class="menu-item" @click="orgAdd">
新增节点
</div>
<div class="menu-item" @click="orgEdit">
修改节点
</div>
<div class="menu-item menu-bottom" @click="orgDelete" v-if="NodeTreeItem">
删除节点
</div>
</div>
</div>
</div>
<div class="split-detail-right">
@@ -98,7 +111,7 @@
</a-table>
<div class="page" v-if="tableData.length > 0">
<a-pagination
:show-total="total => ` ${total} `"
:show-total= "total => $t('total')+` ${total} `+ $t('strip')"
show-quick-jumper
show-size-changer
:current="queryParams.pageNo"
@@ -111,6 +124,7 @@
</div>
</div>
</div>
<!-- 条款详情-->
<a-modal
:title="$t('clauseContent')"
:visible="contentVisible"
@@ -120,7 +134,32 @@
>
<p>{{contentValue}}</p>
</a-modal>
<split-addF-form v-if="addVisible" :addVisible="addVisible" @closeVisible="closeVisible"></split-addF-form>
<!-- 添加节点-->
<a-modal
:title="menuTitle"
:visible="menuRightVisible"
:confirm-loading="confirmLoading"
@cancel="handleCancelMenuRight"
@ok="hideModalMenuRight"
>
<a-form-model
v-if="menuRightVisible"
class="split-click-right-form"
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item :label="$t('clauseNo')" prop="clauseNo">
<a-input v-model="form.clauseNo" :placeholder="$t('PleaseEnter')+$t('clauseNo')" />
</a-form-model-item>
<a-form-model-item :label="$t('clauseName')" prop="clauseName">
<a-input v-model="form.clauseName" :placeholder="$t('PleaseEnter')+$t('clauseName')" />
</a-form-model-item>
</a-form-model>
</a-modal>
<split-add-form v-if="addVisible" :addVisible="addVisible" :formTitle="formTitle" @closeVisible="closeVisible"></split-add-form>
<upload ref="uploadSplit" @uploadSuccess="uploadSuccess"></upload>
</div>
</a-card>
@@ -139,6 +178,8 @@
},
data() {
return {
labelCol: { span: 6 },
wrapperCol: { span: 16 },
contentVisible:false, //条款内容弹框显示
queryParams:{
pageNo:1,
@@ -236,7 +277,22 @@
attId:'',
data:[],
confirmLoading:false,
NodeTreeItem:null, //右键菜单
tmpStyle:'', //右键菜单位置
menuTitle:this.$t('add'),
formTitle:'',
menuRightVisible:false,
form:{},
rules: {
clauseNo: [
{ required: true, message: this.$t('PleaseEnter')+this.$t('clauseNo'), trigger: 'blur' },
{ min: 1, max: 20, message: this.$t('cantExeed') + '20' + this.$t('characters'), trigger: 'blur' },
],
clauseName: [
{ required: true, message: this.$t('PleaseEnter')+this.$t('clauseName'), trigger: 'blur' },
{ min: 1, max: 20, message: this.$t('cantExeed') + '20' + this.$t('characters'), trigger: 'blur' },
],
}
}
},
mounted() {
@@ -301,16 +357,97 @@
//获取左侧目录数据
loadMenuData(){
let params={
}
// this.loading=true
getAction(`sys/category/getSysCategoryTree`, params).then(res => {
this.loading=true
getAction(`split/sarFileSplitMenu/getSplitMenusByInfoId`, params).then(res => {
if (res.success) {
this.data = [...res.result]
this.gData = [...this.data]
this.data = this.toTree(res.result)
this.gData= [...this.data]
}
}).finally(()=>{
this.loading=false
})
},
//将数据拼成树形结构
toTree(config) {
// 删除 所有 children,以防止多次调用
config.forEach(function(item) {
delete item.children;
});
// 将数据存储为 以 id 为 KEY 的 map 索引数据列
let map = {};
config.forEach((item) => {
item.label = item.name;
item.key=item.id;
item.title=item.name+(item.itemName?' '+item.itemName:'')
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;
},
//鼠标右键
rightClick({event,node}){
// console.log('eee',event,node)
const x =
event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
const y = event.currentTarget.offsetTop;
this.NodeTreeItem = {
pageX: x,
pageY: y,
id: node._props.dataRef.id,
title: node._props.dataRef.title,
pid: node._props.dataRef.pid || null
};
this.tmpStyle = {
position: 'absolute',
maxHeight: 40,
textAlign: 'center',
left: `${x + 10 - 0}px`,
top: `${y + 6 - 0}px`,
background:`#FFFFFF`,
zIndex:`2`
};
},
// 用于点击空白处隐藏增删改菜单
clearMenu () {
this.NodeTreeItem = null;
},
//选择树节点
onSelect(selectedKeys){
console.log('sele',selectedKeys)
},
//树形新增
orgAdd(){
this.menuRightVisible=true
},
//树形修改
orgEdit(){
},
//树形删除
orgDelete(){
},
handleCancelMenuRight(){
this.menuRightVisible=false
},
//增加条款确定
hideModalMenuRight(){
this.menuRightVisible=false
},
//获取列表数据
loadData(){
let params={
@@ -360,6 +497,7 @@
},
//新增
handleAddManage(){
this.formTitle=this.$t('add')
this.addVisible=true
},
closeVisible(val){
@@ -422,6 +560,7 @@
},
//编辑
onEdit(val){
this.formTitle=this.$t('edit')
this.addVisible=true
},
//删除
@@ -556,6 +695,19 @@
min-width: 260px;
padding-right: 20px;
border-right: 1px solid #666666;
.menu-item{
padding: 2px 8px;
border: 1px solid #000000;
border-bottom: none;
cursor: pointer;
}
.menu-bottom{
border-bottom: 1px solid #000000;
}
.menu-item:hover{
background: #00B3BE;
color: #ffffff;
}
}
.split-detail-right{
padding-left: 20px;
@@ -4,7 +4,7 @@
<div class="dic-list-header">
<a-form :model="queryParams" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item :label="$t('name')+':'">
<j-input v-model="queryParams.itemText" :placeholder="$t('enterName')" />
<a-input v-model="queryParams.itemText" :placeholder="$t('enterName')" />
</a-form-item>
</a-form>
<div class="form-btn">
@@ -23,8 +23,8 @@
</div>
</div>
<div class="dic-list-table">
<list-table v-if="dictVal=='list'&&dataFlag" :tableData="tableData" @editDict="editDict" @deleteDict="deleteDict" :total="total" @selected="selectedKeys" @ok="ok"></list-table>
<tree-table v-if="dictVal=='tree'&&dataFlag" :tabletreeData="tabletreeData" :record="record" @editDict="editTreeDict" @selectedKeys="selectedKeys" @ok="ok" :total="total"></tree-table>
<list-table v-if="dictVal=='list'&&dataFlag" :tableData="tableData" @editDict="editDict" @deleteDict="deleteDict" :total="total" :queryParams="queryParams" @selected="selectedKeys" @ok="ok"></list-table>
<tree-table v-if="dictVal=='tree'&&dataFlag" :tabletreeData="tabletreeData" :record="record" :queryParams="queryParams" @editDict="editTreeDict" @selectedKeys="selectedKeys" @ok="ok" :total="total"></tree-table>
</div>
<a-modal class="dict-module" v-model="newVisible" :title="title" :ok-text="$t('preservation')" :cancel-text="$t('cancel')" @ok="hideModal" @cancel="cancelModel" v-if="newVisible">
<a-form-model
@@ -183,8 +183,7 @@
sysDictId:this.record.id,
isTagDict:1
}).then(res=>{
let parentNode=[]
this.tabletreeDataSource=[...res.result]
this.tabletreeDataSource=[...res.result.records]
this.total=res.result.total
let data = this.toTree(this.tabletreeDataSource)
this.tabletreeData=data
@@ -437,9 +436,11 @@
getAction(`sys/category/logicDeleteBatch`, params).then(res => {
if(res.success){
this.queryParams.pageNo=1
this.loadData()
if(this.selectedIds.length==this.tableData.length&&this.queryParams.pageNo!=1){
this.queryParams.pageNo=this.queryParams.pageNo-1
}
this.$message.success(this.$t('OperationSuccessful'))
this.loadData()
}else{
this.$message.warning(this.$t('operationFailed'))
}
@@ -39,16 +39,12 @@
props:{
tabletreeData:Array,
record:Object,
total:String
total:String,
queryParams:Object
},
data(){
return{
loading:false,
total:0,
queryParams:{
pageNo:1,
pageSize:10
}, //搜索条件
loading:false, //搜索条件
columns: [
{
title: this.$t('name'),
@@ -137,6 +133,9 @@
getAction(`sys/category/logicDelete`, { id: val.id }).then((res) => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'));
if(this.tabData&&this.tabData.length==1){
this.queryParams.pageNo=1
}
this.$emit('ok',this.queryParams)
}else{
this.$message.warning(this.$t('operationFailed'));