[update] 联调企标左侧体系树

src/views/enterpriseStandardLibrary/standard/EnterpriseStandardList.vue

@@ -9,29 +9,76 @@
         :show-icon="true"
         :tree-data="treeData"
         :selectedKeys="currentTreeNode"
-        :replaceFields="{children: 'subset', title: 'name', key: 'id'}"
         :expanded-keys="expandedKeys"
         :auto-expand-parent="autoExpandParent"
         @expand="treeExpand"
         @select="treeSelect">
         <a-icon type="folder" slot="folder" class="tree-icon" />
 
-        <template #custom="{name, id}">
-          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)">
+        <template #customNoOperation="{title, key}">
+          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
             <a-tooltip>
               <template #title>
-                {{ name }}
+                {{ title }}
               </template>
-              <span class="tree-node-custom-title">{{ name }}</span>
+              <span v-if="title.indexOf(treeInput) > -1" class="tree-node-custom-title">
+                {{ title.substr(0, title.indexOf(treeInput)) }}
+                <span style="color: #f50">{{ treeInput }}</span>
+                {{ title.substr(title.indexOf(treeInput) + treeInput.length) }}
+              </span>
+              <span v-else class="tree-node-custom-title">{{ title }}</span>
             </a-tooltip>
-            <template v-if="id === mouseInNodeKey">
-              <a-button icon="plus" class="tree-operate-node-btn">
+          </div>
+        </template>
+
+        <!--   没有删除  -->
+        <template #customNoDelete="{title, key}">
+          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
+            <a-tooltip>
+              <template #title>
+                {{ title }}
+              </template>
+              <span v-if="title.indexOf(treeInput) > -1" class="tree-node-custom-title">
+                {{ title.substr(0, title.indexOf(treeInput)) }}
+                <span style="color: #f50">{{ treeInput }}</span>
+                {{ title.substr(title.indexOf(treeInput) + treeInput.length) }}
+              </span>
+              <span v-else class="tree-node-custom-title">{{ title }}</span>
+            </a-tooltip>
+            <template v-if="key === mouseInNodeKey">
+              <!--              新增-->
+              <a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd"></a-button>
+              <!--              编辑-->
+              <a-button class="tree-operate-node-btn" @click="handleTreeEdit">
+                <i class="iconfont icon-bianji" style="color: #D52C26"></i>
               </a-button>
-              <a-button class="tree-operate-node-btn">
-                <i class="iconfont icon-bianji" />
+            </template>
+          </div>
+        </template>
+
+        <template #custom="{title, key}">
+          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
+            <a-tooltip>
+              <template #title>
+                {{ title }}
+              </template>
+              <span v-if="title.indexOf(treeInput) > -1" class="tree-node-custom-title">
+                {{ title.substr(0, title.indexOf(treeInput)) }}
+                <span style="color: #f50">{{ treeInput }}</span>
+                {{ title.substr(title.indexOf(treeInput) + treeInput.length) }}
+              </span>
+              <span v-else class="tree-node-custom-title">{{ title }}</span>
+            </a-tooltip>
+            <template v-if="key === mouseInNodeKey">
+              <!--              新增-->
+              <a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd"></a-button>
+              <!--              编辑-->
+              <a-button class="tree-operate-node-btn" @click="handleTreeEdit(title)">
+                <i class="iconfont icon-bianji" style="color: #D52C26"></i>
               </a-button>
-              <a-button class="tree-operate-node-btn">
-                <i class="iconfont icon-shanchu_" />
+              <!--              删除-->
+              <a-button class="tree-operate-node-btn" @click="handleTreeDelete">
+                <i class="iconfont icon-shanchu_" style="color: #D52C26"></i>
               </a-button>
             </template>
           </div>
@@ -112,8 +159,12 @@
     </div>
     <!--  新增、编辑弹框  -->
     <enterprise-standard-modal ref="modalForm" @ok="modalFormOk"></enterprise-standard-modal>
+    <!--  标准选择弹框  -->
     <standard-selection-modal ref="standardSelectionModal" @change="allocationStandardChange"></standard-selection-modal>
+    <!--  临时权限设置  -->
     <temporary-permission-set ref="temporaryPermissionSet" @ok="modalFormOk"></temporary-permission-set>
+    <!--  左侧树节点的新增和编辑  -->
+    <tree-node-modal ref="treeNodeModal" @ok="treeNodeModalOk"></tree-node-modal>
   </a-card>
 </template>
 
@@ -131,7 +182,8 @@ import {
   shiftStandard,
   initChange,
   collectStandard,
-  shareStandard
+  shareStandard,
+  deleteTreeNode
 } from '@api/enterpriseStandardLibraryApi'
 // 添加、编辑弹框
 import EnterpriseStandardModal from './modules/EnterpriseStandardModal'
@@ -139,10 +191,11 @@ import EnterpriseStandardModal from './modules/EnterpriseStandardModal'
 import StandardSelectionModal from '@/components/selection/StandardSelectionModal'
 // 临时权限设置
 import TemporaryPermissionSet from './modules/TemporaryPermissionSet'
+import TreeNodeModal from './modules/TreeNodeModal'
 
 export default {
   name: 'EnterpriseStandardList',
-  components: { TemporaryPermissionSet, StandardSelectionModal, EnterpriseStandardModal, JTable, Search },
+  components: { TreeNodeModal, TemporaryPermissionSet, StandardSelectionModal, EnterpriseStandardModal, JTable, Search },
   mixins: [ConfigurableTableMixin],
   data () {
     return {
@@ -193,6 +246,9 @@ export default {
       showAction: true // 是否显示操作列
     }
   },
+  mounted () {
+    this.initTreeData()
+  },
   methods: {
     // 获取左侧树数据
     initTreeData (params) {
@@ -201,6 +257,7 @@ export default {
           this.treeData = this.dealTreeData(res.result)
           // this.treeData = res.result
           this.treeData[0].scopedSlots = { title: 'customNoDelete' }
+          this.treeData[1].scopedSlots = { title: 'customNoOperation' }
           this.generateList(this.treeData)
         } else {
           this.treeData = []
@@ -211,8 +268,8 @@ export default {
     dealTreeData (treeData) {
       return treeData.map(item => {
         item.scopedSlots = { title: 'custom' }
-        if (item.subset && item.subset.length > 0) {
-          item.subset = this.dealTreeData(item.subset)
+        if (item.children && item.children.length > 0) {
+          item.children = this.dealTreeData(item.children)
         }
         return item
       })
@@ -221,20 +278,24 @@ export default {
     generateList (data) {
       for (let i = 0; i < data.length; i++) {
         const node = data[i]
-        const id = node.id
-        this.treeDataList.push({ id, name: node.name, pid: node.pid })
-        if (node.subset) {
-          this.generateList(node.subset)
+        const key = node.key
+        this.treeDataList.push({ key, title: node.title, parentId: node.parentId, nodeCode: node.nodeCode })
+        if (node.children) {
+          this.generateList(node.children)
         }
       }
     },
+    // 根据key获取左侧树节点对象
+    getNodeByKey (key) {
+      return this.treeDataList.find(item => item.key === key)
+    },
     // 左侧树搜索框改变
     handleTreeChange (e) {
       const value = e.target.value
       const expandedKeys = this.treeDataList
         .map(item => {
-          if (item.name.indexOf(value) > -1) {
-            return item.pid
+          if (item.title.indexOf(value) > -1) {
+            return item.parentId
           }
           return null
         })
@@ -253,6 +314,40 @@ export default {
       this.queryParam.workingGroupId = selectedKeys[0]
       this.loadData()
     },
+    // 左侧树点击新增
+    handleTreeAdd () {
+      this.$refs.treeNodeModal.title = this.$t('newlyAdded')
+      const nodeObj = this.getNodeByKey(this.mouseInNodeKey)
+      this.$refs.treeNodeModal.add(nodeObj)
+    },
+    // 左侧树点击编辑
+    handleTreeEdit (name) {
+      this.$refs.treeNodeModal.title = this.$t('edit')
+      this.$refs.treeNodeModal.edit(this.mouseInNodeKey, name)
+    },
+    // 左侧树点击删除
+    handleTreeDelete () {
+      const param = {}
+      param.id = this.mouseInNodeKey
+      this.$confirm({
+        title: this.$t('confirmDeletion'),
+        content: this.$t('confirmDeleteNodes'),
+        onOk: () => {
+          deleteTreeNode(param).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.initTreeData()
+            } else {
+              this.$message.warning(res.message)
+            }
+          })
+        }
+      })
+    },
+    // 左侧树节点新增或编辑完成
+    treeNodeModalOk () {
+      this.initTreeData()
+    },
     // 左侧树鼠标移入某一目录
     handleTreeMouseover (key) {
       this.mouseInNodeKey = key
@@ -395,11 +490,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-/deep/ .ant-tree li span.ant-tree-iconEle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 
 .tree-icon {
   line-height: 24px;