|
@@ -0,0 +1,161 @@
|
|
|
+<template>
|
|
|
+ <div class="tree-panel">
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ :data="deplist"
|
|
|
+ node-key="itemclassid"
|
|
|
+ :current-node-key="currentKey"
|
|
|
+ highlight-current
|
|
|
+ default-expand-all
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="handleClick">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span class="icon_btn">
|
|
|
+ <slot name="add" :data="data"></slot>
|
|
|
+ <slot name="edit" :data="data"></slot>
|
|
|
+ <slot name="del" :data="data"></slot>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ deplist:[],
|
|
|
+ departmentid:0,
|
|
|
+ currentKey:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async department (callback) {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": "20220922110403",
|
|
|
+ "version":1,
|
|
|
+ "content": {
|
|
|
+ "sa_brandid":0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res);
|
|
|
+
|
|
|
+ // // 数据格式转换成elementui-tree所需的格式
|
|
|
+ res.data = res.data.map(item => {
|
|
|
+ item.ttemclass.forEach(item2 => {
|
|
|
+ item2.sa_brandid = item.sa_brandid
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ brandname:item.brandname,
|
|
|
+ rowindex:item.rowindex,
|
|
|
+ sa_brandid:item.sa_brandid,
|
|
|
+ subdep:item.ttemclass
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.editId(res.data)
|
|
|
+ this.deplist = this.createMenu(res.data)
|
|
|
+ callback && callback()
|
|
|
+ },
|
|
|
+ editId(array) {
|
|
|
+ function _editId(id,data) {
|
|
|
+ data.sa_brandid = id
|
|
|
+ if(data.subdep && data.subdep.length > 0) {
|
|
|
+ data.subdep.forEach(item => {
|
|
|
+ _editId(id,item)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ array.forEach(item => {
|
|
|
+ _editId(item.sa_brandid,item)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ createMenu (array) {
|
|
|
+ var that = this
|
|
|
+ let arr = []
|
|
|
+ function convertToElementTree(node) {
|
|
|
+ // 新节点
|
|
|
+ var elNode = {
|
|
|
+ label: node["brandname"] || node['itemclassname'],
|
|
|
+ parentid:node['parentid'],
|
|
|
+ value:node['itemclassid'],
|
|
|
+ sa_brandid:node['sa_brandid'],
|
|
|
+ changeby:node["changeby"],
|
|
|
+ changedate:node['changedate'],
|
|
|
+ createby:node['createby'],
|
|
|
+ createdate:node['createdate'],
|
|
|
+ itemclassfullname:node['itemclassfullname'],
|
|
|
+ itemclassfullnum:node["itemclassfullnum"],
|
|
|
+ itemclassid:node['itemclassid'],
|
|
|
+ itemclassname:node['itemclassname'],
|
|
|
+ itemclassnum:node['itemclassnum'],
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+
|
|
|
+ if (node.subdep && node.subdep.length > 0) {
|
|
|
+ // 如果存在子节点
|
|
|
+ for (var index = 0; index < node.subdep.length; index++) {
|
|
|
+ // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
|
|
|
+ elNode.children.push(convertToElementTree(node.subdep[index]));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return elNode;
|
|
|
+ }
|
|
|
+ array.forEach((element) => {
|
|
|
+ arr.push(convertToElementTree(element))
|
|
|
+ });
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ handleClick (row,node,VueComponent) {
|
|
|
+ this.$emit('onClick',node)
|
|
|
+ },
|
|
|
+ setCurrentKey (id) {
|
|
|
+ this.currentKey = id
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['treeRef'].setCurrentKey(this.currentKey)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.department(()=>{
|
|
|
+ this.$emit('onClick',{data:this.deplist[0].children[0]})
|
|
|
+ this.setCurrentKey(this.deplist[0].children[0].itemclassid)
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.tree-panel .el-tree {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.tree-panel{
|
|
|
+ padding: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ width:100%;
|
|
|
+ background: #FAFAFA;
|
|
|
+}
|
|
|
+.icon_btn {
|
|
|
+ display: flex;
|
|
|
+ width: 100px;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+</style>
|