月报：节点树 添加图标

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

@@ -1,209 +1,217 @@
-<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='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>
+<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="data.category" 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[0])}">{{ data.category[0].toUpperCase() }}</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 }
+    },
+    // 设置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 ''
+    }
+  }
+}
+</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>