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

src/views/enterpriseStandardLibrary/standard/EnterpriseStandardList.vue

@@ -3,81 +3,44 @@
     <div class="page-left-box">
       <!--      $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
       <a-input-search v-model="treeInput" :placeholder="$t('pleaseEnterTreeSystem')"
-                      @change="handleTreeChange" />
+                      @search="handleTreeSearch" />
+      <!--:expanded-keys="expandedKeys"-->
+      <!--:auto-expand-parent="autoExpandParent"-->
+      <!--@expand="treeExpand"-->
       <a-tree
+        v-if="treeData.length > 0"
         :show-line="true"
         :show-icon="true"
         :tree-data="treeData"
         :selectedKeys="currentTreeNode"
-        :expanded-keys="expandedKeys"
+        :default-expand-all="defaultExpandAll"
-        :auto-expand-parent="autoExpandParent"
-        @expand="treeExpand"
         @select="treeSelect">
         <a-icon type="folder" slot="folder" class="tree-icon" />
 
-        <template #customNoOperation="{title, key}">
+        <template #custom="record">
-          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
+          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.key)" @mouseleave="handleTreeMouseout(record.key)">
             <a-tooltip>
               <template #title>
-                {{ title }}
+                {{ record.title }}
               </template>
-              <span v-if="title.indexOf(treeInput) > -1" class="tree-node-custom-title">
+              <span v-if="record.title.indexOf(treeInput) > -1" class="tree-node-custom-title">
-                {{ title.substr(0, title.indexOf(treeInput)) }}
+                {{ record.title.substr(0, record.title.indexOf(treeInput)) }}
                 <span style="color: #f50">{{ treeInput }}</span>
-                {{ title.substr(title.indexOf(treeInput) + treeInput.length) }}
+                {{ record.title.substr(record.title.indexOf(treeInput) + treeInput.length) }}
               </span>
-              <span v-else class="tree-node-custom-title">{{ title }}</span>
+              <span v-else class="tree-node-custom-title">{{ record.title }}</span>
             </a-tooltip>
-          </div>
+            <template v-if="record.key === mouseInNodeKey">
-        </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 icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd(record)"></a-button>
               <!--              编辑-->
-              <a-button class="tree-operate-node-btn" @click="handleTreeEdit">
+              <a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
-                <i class="iconfont icon-bianji" style="color: #D52C26"></i>
+                        class="tree-operate-node-btn" @click="handleTreeEdit(record)">
-              </a-button>
-            </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" @click="handleTreeDelete">
+              <a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
+                        class="tree-operate-node-btn" @click="handleTreeDelete(record.id)">
                 <i class="iconfont icon-shanchu_" style="color: #D52C26"></i>
               </a-button>
             </template>
@@ -132,11 +95,11 @@
               <a-menu slot="overlay">
                 <a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
                   <a @click="operationClick(operation,record)">
-                    <!--                      编辑图标-->
+                    <!--  编辑图标  -->
                     <i class="iconfont icon-bianji operate-btn-icon" v-if="operation.text === $t('edit')" />
-                    <!--                      分享图标-->
+                    <!--  分享图标  -->
                     <i class="iconfont icon-fangxingfenxiang operate-btn-icon" v-if="operation.text === $t('share')" />
-                    <!--                      删除图标-->
+                    <!--  删除图标  -->
                     <i class="iconfont icon-shanchu_ operate-btn-icon" v-if="operation.text === $t('delete')" />
                     {{ operation.text }}
                   </a>
@@ -170,6 +133,7 @@
 
 <script>
 import '@assets/less/common.less'
+import { StandardSystemTreeNodeType } from '@/enums/commonEnums'
 import JTable from '@/components/jero/JTable'
 // 搜索组件
 import Search from '@/components/customField/Search'
@@ -199,12 +163,14 @@ export default {
   mixins: [ConfigurableTableMixin],
   data () {
     return {
+      StandardSystemTreeNodeType,
       flag: '3',
       treeInput: '', // 左侧树搜索框内容
       treeData: [], // 左侧树数据
       treeDataList: [], // 左侧树的数组结构，用于搜索
       expandedKeys: [],
       autoExpandParent: true,
+      defaultExpandAll: false, // 左侧树默认展开所有
       currentTreeNode: null, // 当前选中的树节点
       mouseInNodeKey: null, // 鼠标悬浮的节点key值
       operationList: [
@@ -255,13 +221,13 @@ export default {
       getTreeList(params).then(res => {
         if (res.success) {
           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 = []
         }
+      }).finally(() => {
+        this.$nextTick(() => {
+          this.defaultExpandAll = true
+        })
       })
     },
     // 处理左侧树数据结构
@@ -274,35 +240,25 @@ export default {
         return item
       })
     },
-    // 获取左侧树的数组结构（非树结构）
+    // 左侧树搜索
-    generateList (data) {
+    handleTreeSearch () {
-      for (let i = 0; i < data.length; i++) {
+      this.treeData = []
-        const node = data[i]
+      this.initTreeData({ nodeName: this.treeInput })
-        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) {
+    // handleTreeChange (e) {
-      const value = e.target.value
+    //   const value = e.target.value
-      const expandedKeys = this.treeDataList
+    //   const expandedKeys = this.treeDataList
-        .map(item => {
+    //     .map(item => {
-          if (item.title.indexOf(value) > -1) {
+    //       if (item.title.indexOf(value) > -1) {
-            return item.parentId
+    //         return item.parentId
-          }
+    //       }
-          return null
+    //       return null
-        })
+    //     })
-        .filter((item, i, self) => item && self.indexOf(item) === i)
+    //     .filter((item, i, self) => item && self.indexOf(item) === i)
-      this.expandedKeys = expandedKeys
+    //   this.expandedKeys = expandedKeys
-      this.autoExpandParent = true
+    //   this.autoExpandParent = true
-    },
+    // },
     // 左侧树点击展开
     treeExpand (expandedKeys) {
       this.expandedKeys = expandedKeys
@@ -315,20 +271,20 @@ export default {
       this.loadData()
     },
     // 左侧树点击新增
-    handleTreeAdd () {
+    handleTreeAdd (record) {
       this.$refs.treeNodeModal.title = this.$t('newlyAdded')
-      const nodeObj = this.getNodeByKey(this.mouseInNodeKey)
+      this.$refs.treeNodeModal.add(record)
-      this.$refs.treeNodeModal.add(nodeObj)
     },
     // 左侧树点击编辑
-    handleTreeEdit (name) {
+    handleTreeEdit (record) {
+      console.log(record)
       this.$refs.treeNodeModal.title = this.$t('edit')
-      this.$refs.treeNodeModal.edit(this.mouseInNodeKey, name)
+      this.$refs.treeNodeModal.edit(record)
     },
     // 左侧树点击删除
-    handleTreeDelete () {
+    handleTreeDelete (id) {
       const param = {}
-      param.id = this.mouseInNodeKey
+      param.id = id
       this.$confirm({
         title: this.$t('confirmDeletion'),
         content: this.$t('confirmDeleteNodes'),

src/views/enterpriseStandardLibrary/standard/modules/TreeNodeModal.vue

@@ -58,15 +58,16 @@ export default {
   },
   methods: {
     add (nodeObj) {
+      console.log(nodeObj)
       this.visible = true
       this.form.resetFields()
-      this.model = Object.assign({}, nodeObj)
+      this.model.key = nodeObj.id
+      this.model.nodeCode = nodeObj.nodeCode
     },
-    edit (nodeKey, nodeName) {
+    edit (record) {
       this.visible = true
       this.form.resetFields()
-      this.model.id = nodeKey
+      this.model = Object.assign({}, record)
-      this.model.nodeName = nodeName
       this.$nextTick(() => {
         this.form.setFieldsValue(pick(this.model, 'nodeName'))
       })