月报：节点树 添加图标

src/views/monthlyReport/childrenPage/setReport/components/nodeTreeSet.vue

@@ -1,209 +1,252 @@
-<template>
-  <div class="nodeTree">
-    <div class="sreach-header">
-      <el-input v-model="filterText" class="node-input" suffix-icon="el-icon-search" placeholder="输入关键字进行过滤" @blur="expandAll = true, getOdinTree(filterText)" />
-      <el-button class="teamDeleteText" type="text" @click="() => append('add')">添加根节点</el-button>
-    </div>
-    <el-tree v-if="tree" ref="tree" v-loading="loading" class="filter-tree" :data="treeNodeData" :props="defaultProps" :default-expand-all="expandAll" :expand-on-click-node="false" :filter-node-method="filterNode">
-      <span slot-scope="{ node, data }" class="custom-tree-node">
-        <span>
-          {{ node.label }}
-          <el-tag v-for="item in data.deptSetting" :key="item.id" closable type="info" size="small" style="margin-left: 20px;" @close="handleClose(item, data, 'tag')">{{ item.value }}</el-tag>
-        </span>
-      <span>
-          <el-button class="teamDeleteText" type="text" @click="() => append(data)">设置</el-button>
-        </span>
-      </span>
-    </el-tree>
-    <normal-dialog :show-dialog="showTreeNodeDialog" :title="typeVal === 'add' ? '添加根节点' : '设置'" :width="'35%'" @confirm="createOdinDeptRel" @cancel="showTreeNodeDialog = false, $set(setTeam, 'value', [])">
-      <el-form :model="setTeam" label-width="65px">
-        <el-form-item v-if="typeVal === 'add'" label="根节点">
-          <el-select v-model="setTeam.odinIds" multiple filterable remote style="width: 100%" reserve-keyword placeholder="请选择">
-            <el-option v-for="item in treeOption" :key="item.odinId" :label="item.odinNs" :value="item.odinId" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-else label="团队">
-          <el-select v-model="setTeam.value" filterable remote style="width: 100%" reserve-keyword placeholder="请选择" :remote-method="remoteMethod">
-            <el-option v-for="item in options" :key="item.deptCode" :label="item.deptName" :value="item.deptCode">
-              {{ item.deptLevel }} {{ item.deptName }}
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </normal-dialog>
-    <!-- 删除 -->
-    <normal-dialog :show-dialog="deleteTeamBizDialog" :title="'删除'" :width="'35%'" @confirm="deleteDeptBizRel()" @cancel="deleteTeamBizDialog = false">
-      <div class="teamDeleteText">
-        是否清除节点 <span style="font-weight: 600;">{{ deleteData.data.name }}</span> 的设置信息？
-      </div>
-    </normal-dialog>
-  </div>
-</template>
-
-<script>
-import normalDialog from '@/components/dialog/normalDialog'
-import { getDeptByKeyWord, createOdinDeptRel, deleteOdinBizRel, getOdinTree, getOdinNodeByParentId, addShowOdinNode } from '@/api/qualityMonthlyReport'
-export default {
-  components: { normalDialog },
-  data() {
-    return {
-      deleteTeamBizDialog: false, // 删除
-      showTreeNodeDialog: false, // 节点树设置
-      filterText: '',
-      typeVal: 'add',
-      expandAll: false,
-      setTeam: {
-        value: ''
-      },
-      loading: false,
-      options: [], // 团队option
-      nodeData: {}, // 点击设置的节点
-      dataList: [],
-      deleteData: {
-        data: {},
-        node: {}
-      },
-      tree: true,
-      treeNodeData: [],
-      treeOption: [],
-      defaultProps: {
-        value: 'id',
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val)
-    }
-  },
-  created() {
-    this.getOdinTree(null)
-    this.getOdinNodeByParentId(138396)
-  },
-  methods: {
-    getOdinTree(e) {
-      this.treeNodeData = []
-      this.loading = true
-      getOdinTree(e).then(res => { // 获取节点树list
-        if (res.code === 200) {
-          setTimeout(() => {
-            this.loading = false
-            this.treeNodeData = res.data
-          }, 1000)
-        }
-      })
-    },
-    getOdinNodeByParentId(e) {
-      getOdinNodeByParentId(e).then(res => {
-        if (res.code === 200) this.treeOption = res.data
-      })
-    },
-    async remoteMethod(query) { // 获取部门option
-      if (query !== '') {
-        const res = await getDeptByKeyWord(query)
-        if (res.code === 200) {
-          this.options = res.data
-          this.dataList = [...res.data]
-        }
-      }
-    },
-    async deleteDeptBizRel() {
-      const res = await deleteOdinBizRel({ odinId: this.deleteData.data.id, deptId: this.deleteData.node.id })
-      if (res.code === 200) {
-        this.getOdinTree(null)
-        this.deleteTeamBizDialog = false
-        this.$message({ type: 'success', message: '已删除' })
-        window.log({ c: 'report_setting', d: 'report_setting_delSector' })
-      }
-    },
-    handleClose(node, data) { // 点击删除的数据
-      this.deleteTeamBizDialog = true
-      this.deleteData = { data: data, node: node }
-    },
-    async createOdinDeptRel(val) {
-      if (this.typeVal === 'add') {
-        addShowOdinNode({ odinIds: this.setTeam.odinIds }).then(res => {
-          if (res.code === 200) {
-            this.getOdinTree(null)
-            window.log({ c: 'report_setting', d: 'report_setting_addRootNode' })
-          }
-        })
-        return
-      }
-      const list = []
-      this.dataList.map(item => {
-        if (item.deptCode === this.setTeam.value) {
-          list.push({ deptId: item.deptCode, deptName: item.deptName })
-        }
-      })
-      const obj = { ...this.nodeData, depts: list, odinNsName: this.typeVal.ns }
-      const res = await createOdinDeptRel(obj)
-      if (res.code === 200) {
-        this.$set(this.setTeam, 'value', '')
-        this.getOdinTree(null)
-        this.$message({ type: 'success', message: '添加成功' })
-        this.showTreeNodeDialog = false
-        window.log({ c: 'report_setting', d: 'report_setting_addSector' })
-      }
-    },
-    filterNode(value, data) { // 筛选
-      if (!value) return true
-      return data.name.indexOf(value) !== -1
-    },
-    append(val) { // 设置
-      this.setTeam = {}
-      this.typeVal = val
-      this.showTreeNodeDialog = true
-      if (val === 'add') return
-      this.nodeData = { odinId: val.id, odinNs: val.name, odinNsName: val.ns }
-    }
-  }
-}
-</script>
-
-<style lang='less' scoped>
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-    line-height: 40px;
-  }
-
-  .nodeTree {
-    width: 500px;
-
-    /deep/label {
-      font-weight: 400;
-    }
-
-    .node-input {
-      margin: 20px 20px 20px 0;
-    }
-
-    .sreach-header {
-      margin-top: -5px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .filter-tree {
-      /deep/.el-tree-node {
-        margin-top: 10px;
-        color: #444444;
-        font-weight: 400;
-      }
-    }
-
-    .teamDeleteText {
-      text-align: center;
-      font-weight: 400;
-    }
-  }
-
-</style>
+<template>
+  <div class="nodeTree">
+    <div class="sreach-header">
+      <el-input v-model="filterText" class="node-input" suffix-icon="el-icon-search" placeholder="输入关键字进行过滤" @blur="expandAll = true, getOdinTree(filterText)" />
+      <el-button class="teamDeleteText" type="text" @click="() => append('add')">添加根节点</el-button>
+    </div>
+    <el-tree v-if="tree" ref="tree" v-loading="loading" class="filter-tree" :data="treeNodeData" :props="defaultProps" :default-expand-all="expandAll" :expand-on-click-node="false" :filter-node-method="filterNode">
+      <span slot-scope="{ node, data }" class="custom-tree-node">
+        <span>
+          <span v-if="node.label === 'offline'" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADV0lEQVRYhe2WS24dRRSGv1PVj7KbG+M4dgBBbHwZIcSEBcCIQVaABGIBrIEFMGYJzFhBxIwsgFEGMCC+cbBlC4MVK9fu6kdVMbgP3+uujh0JiQH+paOWqk6d89epU3813OIW/zHk6sAf33zd67xRJbTixwOVFU+NfWtozXHM70BbcQq0h41ac1S4+dzw+x+WfNVrEm4GKisAhtYc/yn2l5jTu86EJgk3CphcHbBpfOF745RcJ0v+W8F80hf4g3JlEkiDqV2n0r0Eiirum+v4lvaMlV1rerc79rXc8f2F7hCo0q7TTtWf4O6FeuVBnqz6/skYgZ3KcBqq5cGeAu5nVloN4bySdZV3SB5qK1kDNrKpGaLc10KKDkI5rfrY1+K9X6JxqO2P2sGwNCGWHKDM4H6T9WfvI7CIdTLyoPlL1YyMlb+pngFUKV/UCeynVkrXCCAnVL86Pyn5KLMP3yx7e+/mBKbwW5ggk9jvt763qz8EZD+1slOZR8BviVJhaE1YL4X1CKFODwBBK8UaGWsOEEi1BqCohTMTWLuIZz9b8ZxR8c44QTThHvl87kUePgUeX13TqcB+amWU2YexBJvkQTs4zBu0W54b5RbtBe2FVd0Vk93a/Bx0N2aHQNEIg1oexQgAZJ6fMg+Zh5V28j0qHEGYWx/un3cZdAjkXsi9jPuCvO3M51UCM2sE8ubSdq0Je5mN0iikK2YdAqe5Z6b3V3E+6Xa27eTabZST5VU6sczJE5hUJobSt/XVsU4TBoEQAiLdTeSiab2XRKl5cmDeD5vkHwFsthmnUonxqhJQJ8Z9qzwP7nj15bUEWh14umpl/phMUblWFt+DgZoIjK4aOSocw4X3IFEq3CWH6ZE/aNLvAA7T7tF0jsA0gmmEg2TZue8xOl51bF+krxZ84KWvxUZEsUOg1pfWeBcAfl/pl7R7pSJR+lrJe5F7skhvdAgsXqfnq40C2D2Paz1AEdWyZewZK42G5iY6oPyyjTIrVfA9fQ0Hec2R7vmJmGLxml5LIIajok33jP3YunZJ/y5c0zgFVgdGC3f/WNnHo6z8ai+38jzSeIu4vn6XeNLnP2vBl74eD1T2xpbLP9tP7I2Cvu5PaRSpE1InXOgwmI1tV+bfCH2L/wH+ATe7U3gDKO+UAAAAAElFTkSuQmCC);background-size: 18px;margin-right: 2px;background-repeat: no-repeat;background-size: 21px 21px;vertical-align: middle;width: 21px;height: 21px;display: inline-block;position: relative;left: -1px" /><span v-else style="border-radius: 50%;display: inline-block;padding: 2px 4px;line-height: 1;font-size: 12px;color: #fff;position: relative;margin-right: 5px;top: 0px;" :style="{backgroundColor: setOdinColor(data.category ? data.category[0] : 'p')}">{{ data.category ? data.category[0].toUpperCase() : 'P' }}</span>{{ node.label }}
+          <el-tag v-for="item in data.deptSetting" :key="item.id" closable type="info" size="small" style="margin-left: 20px;" @close="handleClose(item, data, 'tag')">
+            <el-tooltip class="item" effect="dark" :content="find(item.id).deptPath" placement="top"><span>{{ item.value }}</span></el-tooltip></el-tag>
+        </span>
+      <span>
+          <el-button class="teamDeleteText" type="text" @click="() => append(data)">设置</el-button>
+        </span>
+      </span>
+    </el-tree>
+    <normal-dialog :show-dialog="showTreeNodeDialog" :title="typeVal === 'add' ? '添加根节点' : '设置'" :width="'35%'" @confirm="createOdinDeptRel" @cancel="showTreeNodeDialog = false, $set(setTeam, 'value', [])">
+      <el-form :model="setTeam" label-width="65px">
+        <el-form-item v-if="typeVal === 'add'" label="根节点">
+          <el-select v-model="setTeam.odinIds" multiple filterable remote style="width: 100%" reserve-keyword placeholder="请选择">
+            <el-option v-for="item in treeOption" :key="item.odinId" :label="item.odinNs" :value="item.odinId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-else label="团队">
+          <Cascader ref="Cascader" v-model="setTeam.value" :multiple="false" />
+          <!--          <el-select v-model="setTeam.value" filterable remote style="width: 100%" reserve-keyword placeholder="请选择" :remote-method="remoteMethod">-->
+          <!--            <el-option v-for="item in options" :key="item.deptCode" :label="item.deptName" :value="item.deptCode">-->
+          <!--              {{ item.deptLevel }} {{ item.deptName }}-->
+          <!--            </el-option>-->
+          <!--          </el-select>-->
+        </el-form-item>
+      </el-form>
+    </normal-dialog>
+    <!-- 删除 -->
+    <normal-dialog :show-dialog="deleteTeamBizDialog" :title="'删除'" :width="'35%'" @confirm="deleteDeptBizRel()" @cancel="deleteTeamBizDialog = false">
+      <div class="teamDeleteText">
+        是否清除节点 <span style="font-weight: 600;">{{ deleteData.data.name }}</span> 的设置信息？
+      </div>
+    </normal-dialog>
+  </div>
+</template>
+
+<script>
+import normalDialog from '@/components/dialog/normalDialog'
+import Cascader from '@/views/monthlyReport/childrenPage/editReport/components/Cascader'
+import { getDeptByKeyWord, createOdinDeptRel, deleteOdinBizRel, getOdinTree, getOdinNodeByParentId, addShowOdinNode } from '@/api/qualityMonthlyReport'
+export default {
+  components: { normalDialog, Cascader },
+  data() {
+    return {
+      deleteTeamBizDialog: false, // 删除
+      showTreeNodeDialog: false, // 节点树设置
+      filterText: '',
+      typeVal: 'add',
+      expandAll: false,
+      setTeam: {
+        value: []
+      },
+      loading: false,
+      options: [], // 团队option
+      nodeData: {}, // 点击设置的节点
+      dataList: [],
+      deleteData: {
+        data: {},
+        node: {}
+      },
+      tree: true,
+      treeNodeData: [],
+      treeOption: [],
+      defaultProps: {
+        value: 'id',
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  computed: {
+    selectEnum() {
+      return this.$store.state.monthlyReportEdit.selectEnum
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getOdinTree(null)
+    this.getOdinNodeByParentId(138396)
+    // 获取部门数据
+    this.$store.dispatch('monthlyReportEdit/setSelectEnum')
+  },
+  methods: {
+    getOdinTree(e) {
+      this.treeNodeData = []
+      this.loading = true
+      getOdinTree(e).then(res => { // 获取节点树list
+        if (res.code === 200) {
+          setTimeout(() => {
+            this.loading = false
+            this.treeNodeData = res.data
+          }, 1000)
+        }
+      })
+    },
+    getOdinNodeByParentId(e) {
+      getOdinNodeByParentId(e).then(res => {
+        if (res.code === 200) this.treeOption = res.data
+      })
+    },
+    async remoteMethod(query) { // 获取部门option
+      if (query !== '') {
+        const res = await getDeptByKeyWord(query)
+        if (res.code === 200) {
+          this.options = res.data
+          this.dataList = [...res.data]
+        }
+      }
+    },
+    async deleteDeptBizRel() {
+      const res = await deleteOdinBizRel({ odinId: this.deleteData.data.id, deptId: this.deleteData.node.id })
+      if (res.code === 200) {
+        this.getOdinTree(null)
+        this.deleteTeamBizDialog = false
+        this.$message({ type: 'success', message: '已删除' })
+        window.log({ c: 'report_setting', d: 'report_setting_delSector' })
+      }
+    },
+    handleClose(node, data) { // 点击删除的数据
+      this.deleteTeamBizDialog = true
+      this.deleteData = { data: data, node: node }
+    },
+    async createOdinDeptRel(val) {
+      if (this.typeVal === 'add') {
+        addShowOdinNode({ odinIds: this.setTeam.odinIds }).then(res => {
+          if (res.code === 200) {
+            this.getOdinTree(null)
+            window.log({ c: 'report_setting', d: 'report_setting_addRootNode' })
+          }
+        })
+        return
+      }
+      const list = []
+      this.dataList.map(item => {
+        if (item.deptCode === this.setTeam.value) {
+          list.push({ deptId: item.deptCode, deptName: item.deptName })
+        }
+      })
+      const setTeam = this.find(this.setTeam.value)
+      list.push({ deptId: setTeam.value, deptName: setTeam.label })
+      // find()
+      const obj = { ...this.nodeData, depts: list, odinNsName: this.typeVal.ns }
+      const res = await createOdinDeptRel(obj)
+      if (res.code === 200) {
+        this.$set(this.setTeam, 'value', '')
+        this.getOdinTree(null)
+        this.$message({ type: 'success', message: '添加成功' })
+        this.showTreeNodeDialog = false
+        window.log({ c: 'report_setting', d: 'report_setting_addSector' })
+      }
+    },
+    filterNode(value, data) { // 筛选
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    append(val) { // 设置
+      this.setTeam = {}
+      setTimeout(() => {
+        this.$refs.Cascader.selectValue = ''
+      })
+      this.typeVal = val
+      this.showTreeNodeDialog = true
+      if (val === 'add') return
+      this.nodeData = { odinId: val.id, odinNs: val.name, odinNsName: val.ns }
+      this.$forceUpdate()
+    },
+    // 设置odin节点前置图标颜色
+    setOdinColor(keyword) {
+      if (keyword === 'p') return '#8CBDDD'
+      if (keyword === 'g') return '#AB91E5'
+      if (keyword === 's') return 'rgba(14,180,0,0.65)'
+      if (keyword === 'c') return '#E09D6C'
+      return ''
+    },
+    // 查找对应的部门数据
+    find(id) {
+      let name = ''
+      const run = (arr) => {
+        for (let i = 0; i < arr.length; i++) {
+          const elm = arr[i]
+          if (`${elm.value}` === `${id}`) {
+            name = elm
+            return
+          }
+          if (elm.children) {
+            run(elm.children)
+          }
+        }
+      }
+      run(this.selectEnum)
+      return name
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  line-height: 40px;
+}
+
+.nodeTree {
+  width: 500px;
+
+  >>>label {
+    font-weight: 400;
+  }
+
+  .node-input {
+    margin: 20px 20px 20px 0;
+  }
+
+  .sreach-header {
+    margin-top: -5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .filter-tree {
+    >>>.el-tree-node {
+      margin-top: 10px;
+      color: #444444;
+      font-weight: 400;
+    }
+  }
+
+  .teamDeleteText {
+    text-align: center;
+    font-weight: 400;
+  }
+}
+
+</style>