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

2023-09-12 15:04:43 +08:00
parent be61531ee1
commit 7b56d2e753
5 changed files with 245 additions and 31 deletions
@@ -1,4 +1,4 @@
-import { getAction } from './manage'
+import { getAction, postAction } from './manage'

 // 获取表格头部数据
 const getEnterpriseStandardTableHeader = (params) => getAction('/laws/standard/enterprise/getCommonHeader', params)
@@ -13,7 +13,9 @@ const allocationStandard = (params) => getAction('', params)
 // 移出标准
 const shiftStandard = (params) => getAction('', params)
 // 获取左侧树列表
-const getTreeList = (params) => getAction('', params)
+const getTreeList = (params) => getAction('/laws/standard/lawsTreeNode/enterprise', params)
+// 左侧树删除
+const deleteTreeNode = (params) => postAction('/laws/standard/lawsTreeNode/enterprise/delete', params)
 // 发起变更
 const initChange = (params) => getAction('', params)
 // 临时权限设置
@@ -46,6 +48,7 @@ export {
  allocationStandard,
  shiftStandard,
  getTreeList,
+  deleteTreeNode,
  initChange,
  temporaryPermissionSet,
  collectStandard,
@@ -17,7 +17,8 @@ module.exports = {
    evaluate: '企标评价',
    updateRecord: '更新记录',
    submitQuestion: '提交问题',
-    standardResolutionSheet: '标准分解单'
+    standardResolutionSheet: '标准分解单',
+    nodeName: '节点名称'
  },
  // 评审会记录
  reviewMeeting: {
@@ -17,7 +17,8 @@ module.exports = {
    evaluate: '企标评价',
    updateRecord: '更新记录',
    submitQuestion: '提交问题',
-    standardResolutionSheet: '标准分解单'
+    standardResolutionSheet: '标准分解单',
+    nodeName: '节点名称'
  },
  // 评审会记录
  reviewMeeting: {
@@ -108,6 +109,6 @@ module.exports = {
    oldEnterpriseStandardNum: '原企标编号',
    newEnterpriseStandardNum: '新企标编号',
    oldEnterpriseStandardName: '原企标名称',
-    newEnterpriseStandardName: '新企标名称',
+    newEnterpriseStandardName: '新企标名称'
  }
 }
@@ -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;
@@ -0,0 +1,119 @@
+<template>
+  <a-modal
+    :title="title"
+    :maskClosable="true"
+    :width="500"
+    :closable="true"
+    @cancel="handleCancel"
+    @ok="handleOk"
+    :visible="visible">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('enterpriseStandardLibrary.standard.nodeName')">
+          <a-input :placeholder="$t('pleaseEnter') + $t('enterpriseStandardLibrary.standard.nodeName')"
+                   :maxLength="50"
+                   v-decorator.trim="[ 'nodeName', validatorRules.nodeName ]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { postAction } from '@/api/manage'
+
+export default {
+  name: 'TreeNodeModal',
+  data () {
+    return {
+      title: '',
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      validatorRules: {
+        nodeName: {
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('enterpriseStandardLibrary.standard.title') }
+          ],
+          validateTrigger: 'blur'
+        }
+      },
+      url: {
+        edit: '/laws/standard/lawsTreeNode/enterprise/edit',
+        add: '/laws/standard/lawsTreeNode/enterprise/add'
+      }
+    }
+  },
+  methods: {
+    add (nodeObj) {
+      this.visible = true
+      this.form.resetFields()
+      this.model = Object.assign({}, nodeObj)
+    },
+    edit (nodeKey, nodeName) {
+      this.visible = true
+      this.form.resetFields()
+      this.model.id = nodeKey
+      this.model.nodeName = nodeName
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'nodeName'))
+      })
+    },
+    close () {
+      this.visible = false
+      this.model = {}
+    },
+    handleCancel () {
+      this.close()
+    },
+    handleOk () {
+      if (this.confirmLoading) return
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          const param = Object.assign({}, values)
+          if (!this.model.id) {
+            param.parentId = this.model.key
+            param.parentCode = this.model.nodeCode
+          } else {
+            param.id = this.model.id
+          }
+          let url = ''
+          if (this.model.id) {
+            url = this.url.edit
+          } else {
+            url = this.url.add
+          }
+          postAction(url, param).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>