Skip to content

Commit cde60f4

Browse files
gphpergphper
committed
refactor:fix add key
1 parent 7fdb8a6 commit cde60f4

File tree

6 files changed

+439
-259
lines changed

6 files changed

+439
-259
lines changed

‎web/src/components/MenuTree.vue‎

Lines changed: 119 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,44 @@
11
<template>
22

3-
<el-tree-v2
3+
<div>
4+
5+
<el-tree-v2
46
:data="datas"
57
node-key="id"
68
default-expand-all
79
:expand-on-click-node="false"
810
>
9-
<template #default="{ node, data }">
10-
<span :title="node.label" class="showname">
11-
<i v-if="data.children && data.children.length > 0" class="iconfont icon-folder-close icon-style"></i>
12-
<i v-else-if="data.id != 'nextpagegrmtag'" class="iconfont icon-key icon-style"></i>
13-
&nbsp;{{ node.label }}
14-
</span>
15-
<span v-if="data.children && data.children.length > 0" style="margin-left:20%;width: 15px;">
16-
<el-button text @click.stop="append(data)" type="success">添加</el-button>
17-
<el-button text @click.stop="removeData(data.id,data.sk,data.db,1,node, data)" type="danger">删除</el-button>
18-
</span>
19-
<span v-else-if="data.id != 'nextpagegrmtag'" style="margin-left:20%;width: 15px;">
20-
<el-button text @click.stop="removeData(data.id,data.sk,data.db,0,node,data)" type="danger">删除</el-button>
21-
<el-button text @click.stop="detail(node.label,data.id,data.sk,data.db,node)" type="primary">查看</el-button>
22-
</span>
23-
<span v-else>
24-
<el-button @click="loadMore()">加载更多</el-button>
25-
</span>
26-
</template>
27-
</el-tree-v2>
11+
<template #default="{ node, data }">
12+
<span :title="node.label" class="showname">
13+
<i v-if="data.children && data.children.length > 0" class="iconfont icon-folder-close icon-style"></i>
14+
<i v-else-if="data.id != 'nextpagegrmtag'" class="iconfont icon-key icon-style"></i>
15+
&nbsp;{{ node.label }}
16+
</span>
17+
<span v-if="data.children && data.children.length > 0" style="margin-left:20%;width: 15px;">
18+
<el-button text @click.stop="appendData(data)" type="success">添加</el-button>
19+
<el-button text @click.stop="removeData(data.id,data.sk,data.db,1,node, data)" type="danger">删除</el-button>
20+
</span>
21+
<span v-else-if="data.id != 'nextpagegrmtag'" style="margin-left:20%;width: 15px;">
22+
<el-button text @click.stop="removeData(data.id,data.sk,data.db,0,node,data)" type="danger">删除</el-button>
23+
<el-button text @click.stop="detail(node.label,data.id,data.sk,data.db,node)" type="primary">查看</el-button>
24+
</span>
25+
<span v-else>
26+
<el-button @click="loadMore()">加载更多</el-button>
27+
</span>
28+
</template>
29+
</el-tree-v2>
30+
31+
<!-- 添加字段 -->
32+
<TreeDataForm :sk="sk" :db="db" :prefix="prefix" :data="treeData" :show="show" @reset="reset" @append="append"></TreeDataForm>
33+
34+
</div>
35+
2836
</template>
2937

3038
<script>
3139
import { ref } from '@vue/reactivity'
3240
import { getKeys,delKeys } from '@/api/index.js'
41+
import TreeDataForm from '@/components/index/TreeDataForm.vue'
3342
import { useStore } from 'vuex'
3443
import { ShowHash, ShowList, ShowSet, ShowString,ShowZset,ShowStream } from '@/utils/show.js'
3544
import { getKeyType } from "@/api/index.js"
@@ -38,6 +47,9 @@ import { ElMessage } from 'element-plus';
3847
3948
export default {
4049
name:"MenuTree",
50+
components:{
51+
TreeDataForm
52+
},
4153
props:{
4254
index:{
4355
type:String
@@ -51,70 +63,92 @@ export default {
5163
},
5264
setup(props) {
5365
54-
let datas = ref([]);
55-
const store = useStore()
56-
let cursor = ref(0)
57-
let count = ref(0)
66+
// 表单
67+
let sk = ref('')
68+
let db = ref('')
69+
let prefix = ref('')
70+
let show = ref(false)
71+
let treeData = ref(null)
5872
59-
const append = (data) => {
60-
let newChild = { id: 30, label: 'testtest', children: [] }
61-
if (!data.children) {
62-
data.children = []
63-
}
64-
data.children.push(newChild)
65-
datas.value = [...datas.value]
66-
};
67-
68-
const remove = (node,data) => {
69-
let parent = node.parent
70-
if(!parent){
71-
parent = datas.value
72-
let index = parent.findIndex((d) => d.id === data.id)
73-
parent.splice(index, 1)
74-
}else{
75-
//只有一个层目录时
76-
while(parent.children.length == 1){
77-
if(!parent.parent){
78-
data = parent.data
79-
parent = datas.value
80-
break
81-
}
82-
data = parent.data
83-
parent = parent.parent
84-
}
85-
if(parent.isLeaf == undefined){
73+
let datas = ref([]);
74+
const store = useStore()
75+
let cursor = ref(0)
76+
let count = ref(0)
77+
78+
const appendData = (data) => {
79+
show.value = !show.value
80+
prefix.value = data.id
81+
sk.value = data.sk
82+
db.value = data.db
83+
treeData.value = data
84+
};
85+
86+
const append = (data,label) => {
87+
let newChild = { id: data.id+':'+label, sk:data.sk, db:data.db, label: label, children: [] }
88+
if (!data.children) {
89+
data.children = []
90+
}
91+
data.children.push(newChild)
92+
datas.value = [...datas.value]
93+
94+
document.getElementById("dbnum#"+data.db+'-'+data.sk).innerHTML = Number(document.getElementById("dbnum#"+data.db+'-'+data.sk).innerHTML) + 1
95+
}
96+
97+
const reset = () => {
98+
show.value = false
99+
}
100+
101+
const remove = (node,data) => {
102+
let parent = node.parent
103+
if(!parent){
104+
parent = datas.value
86105
let index = parent.findIndex((d) => d.id === data.id)
87106
parent.splice(index, 1)
88107
}else{
89-
let children = parent.data.children || parent.data
90-
let index = children.findIndex((d) => d.id === data.id)
91-
children.splice(index, 1)
108+
//只有一个层目录时
109+
while(parent.children.length == 1){
110+
if(!parent.parent){
111+
data = parent.data
112+
parent = datas.value
113+
break
114+
}
115+
data = parent.data
116+
parent = parent.parent
117+
}
118+
if(parent.isLeaf == undefined){
119+
let index = parent.findIndex((d) => d.id === data.id)
120+
parent.splice(index, 1)
121+
}else{
122+
let children = parent.data.children || parent.data
123+
let index = children.findIndex((d) => d.id === data.id)
124+
children.splice(index, 1)
125+
}
92126
}
93-
}
94-
datas.value = [...datas.value]
95-
}
127+
datas.value = [...datas.value]
128+
}
96129
97-
const removeData = (key,sk,db,single,node, data)=>{
98-
delKeys({
99-
id:key,
100-
sk:sk,
101-
db:db,
102-
single:single
103-
}).then((res)=>{
104-
if(res.data.status == 1){
105-
//删除成功
106-
ElMessage({
107-
message: "删除成功",
108-
type: 'success',
109-
})
110-
111-
remove(node,data)
112-
store.commit("delTagsItem",sk+db)
113-
}
114-
})
115-
};
130+
const removeData = (key,sk,db,single,node, data)=>{
131+
delKeys({
132+
id:key,
133+
sk:sk,
134+
db:db,
135+
single:single
136+
}).then((res)=>{
137+
if(res.data.status == 1){
138+
//删除成功
139+
ElMessage({
140+
message: "删除成功",
141+
type: 'success',
142+
})
143+
144+
remove(node,data)
145+
store.commit("delTagsItem",sk+db)
146+
}
147+
})
148+
};
149+
150+
const detail = (key,idk,sk,db,node)=>{
116151
117-
const detail = (key,idk,sk,db,node)=>{
118152
let unionid = sk+db
119153
let id = CryptoJS.MD5(unionid).toString();
120154
@@ -206,10 +240,17 @@ export default {
206240
document.getElementById("dbnum#"+props.index).innerHTML = count.value;
207241
})
208242
209-
243+
210244
211245
return {
246+
sk,
247+
db,
248+
show,
249+
prefix,
250+
treeData,
251+
reset,
212252
append,
253+
appendData,
213254
remove,
214255
removeData,
215256
detail,

0 commit comments

Comments
 (0)