修改组织树状态

src/components/organization/index.vue

@@ -6,17 +6,53 @@
         <p>{{ title }}</p>
         <template>
           <div v-show="vice" class="column">
-            <div v-for="(item, index) in colType" :key="index" :class="active == index ? 'column_childs' : 'column_child'" @click="upStart(index)">
+            <div
+              v-for="(item, index) in colType"
+              :key="index"
+              :class="active == index ? 'column_childs' : 'column_child'"
+              @click="upStart(index)"
+            >
               {{ item.name }}
             </div>
           </div>
         </template>
       </div>
+      <div v-if="vice" class="stateContent flex-wrap">
+        <div class="state1">
+          <span class="icon"></span>
+          <span>集团内</span>
+        </div>
+        <div class="state2">
+          <span class="icon"></span>
+          <span>集团外</span>
+        </div>
+      </div>
       <div class="paren_content">
         <div v-show="active == 0" class="dptBox">
           <el-scrollbar style="height: 100%">
-            <el-tree ref="tree" :data="data" :check-strictly="true" :default-expanded-keys="defaultExpandedKeys" show-checkbox :props="defaultProps" :default-checked-keys="checkedKeys" :node-key="nodeKey" highlight-current @node-click="nodeClick" @check-change="currentChange">
-              <span slot-scope="{ data }" :title="data[defaultProps.label]" class="org-data-tree-node">
+            <el-tree
+              ref="tree"
+              :data="data"
+              :check-strictly="true"
+              :default-expanded-keys="defaultExpandedKeys"
+              show-checkbox
+              :props="defaultProps"
+              :default-checked-keys="checkedKeys"
+              :node-key="nodeKey"
+              highlight-current
+              @node-click="nodeClick"
+              @check-change="currentChange"
+            >
+              <span
+                slot-scope="{ data }"
+                :title="data[defaultProps.label]"
+                class="org-data-tree-node"
+              >
+                <span
+                  v-if="vice"
+                  :class="data.organType == 0 ? 'icon2' : 'icon1'"
+                  class="org-data-tree-node-icon"
+                ></span>
                 {{ data[defaultProps.label] }}
               </span>
             </el-tree>
@@ -27,8 +63,28 @@
         </div> -->
         <div v-show="active == 1" class="dptBox duoBox">
           <el-scrollbar style="height: 100%">
-            <el-tree ref="treeDuo" :data="data" show-checkbox :check-strictly="checkStrictly" :default-expanded-keys="defaultExpandedKeys" :props="defaultProps" :default-checked-keys="checkedKeysDuo" :node-key="nodeKey" highlight-current @check-change="currentChangeDuo">
-              <span slot-scope="{ data }" :title="data[defaultProps.label]" class="org-data-tree-node">
+            <el-tree
+              ref="treeDuo"
+              :data="data"
+              show-checkbox
+              :check-strictly="checkStrictly"
+              :default-expanded-keys="defaultExpandedKeys"
+              :props="defaultProps"
+              :default-checked-keys="checkedKeysDuo"
+              :node-key="nodeKey"
+              highlight-current
+              @check-change="currentChangeDuo"
+            >
+              <span
+                slot-scope="{ data }"
+                :title="data[defaultProps.label]"
+                class="org-data-tree-node"
+              >
+                <span
+                  v-if="vice"
+                  :class="data.organType == 0 ? 'icon2' : 'icon1'"
+                  class="org-data-tree-node-icon"
+                ></span>
                 {{ data[defaultProps.label] }}
               </span>
             </el-tree>
@@ -45,198 +101,200 @@ export default {
   props: {
     title: {
       type: String,
-      default: ''
+      default: "",
     },
     vice: {
       type: Boolean,
-      default: false
+      default: false,
     },
     data: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     nodeKey: {
       type: String,
-      default: ''
+      default: "",
     },
     upNodeKey: {
       type: String,
-      default: ''
+      default: "",
     },
     defaultProps: {
       type: Object,
-      default: () => { }
+      default: () => {},
     },
     checkedKeys: {
       // 已选中
       type: Array,
-      default: () => []
+      default: () => [],
     },
     checkedKeysDuo: {
       // 已选中
       type: Array,
-      default: () => []
+      default: () => [],
     },
     lessData: {
       // 副岗
       type: Array,
-      default: () => []
+      default: () => [],
     },
     mainData: {
       // 主岗
       type: Array,
-      default: () => []
+      default: () => [],
     },
     radioCheck: {
       type: Number,
-      default: 0
+      default: 0,
     },
     checkBoxList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     orgList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     defaultMultiple: {
       type: Boolean,
-      default: false
+      default: false,
     },
     checkStrictly: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  data () {
+  data() {
     return {
       active: 0,
       colType: [
         {
-          name: '所属组织'
+          name: "所属组织",
         },
         {
-          name: '组织授权'
-        }
+          name: "组织授权",
+        },
       ],
       checkedDatas: [],
       checkedList: [], // 选中的列表
       defaultExpandedKeys: [-1],
-      getExpandedKeysStep: [false, false]
-    }
+      getExpandedKeysStep: [false, false],
+    };
   },
   watch: {
     checkedKeys: {
-      handler (val) {
-        this.checkedList = val
-        this.$refs.tree.setCheckedKeys(val)
-        this.getExpandedKeysStep.splice(0, 1, true)
+      handler(val) {
+        this.checkedList = val;
+        this.$refs.tree.setCheckedKeys(val);
+        this.getExpandedKeysStep.splice(0, 1, true);
       },
-      deep: true
+      deep: true,
     },
     checkedKeysDuo: {
-      handler (val) {
-        this.$refs.tree.setCheckedKeys(val)
+      handler(val) {
+        this.$refs.tree.setCheckedKeys(val);
       },
-      deep: true
+      deep: true,
     },
     orgList: {
-      handler () {
-        this.getExpandedKeysStep.splice(1, 1, true)
+      handler() {
+        this.getExpandedKeysStep.splice(1, 1, true);
       },
-      deep: true
+      deep: true,
     },
     getExpandedKeysStep: {
-      handler (val) {
-        if (val.every(v => v)) {
-          this.defaultExpandedKeys = [-1]
-          this.checkedKeys.forEach(key => {
+      handler(val) {
+        if (val.every((v) => v)) {
+          this.defaultExpandedKeys = [-1];
+          this.checkedKeys.forEach((key) => {
             if (key !== -1) {
-              const node = this.orgList.find(item => item[this.nodeKey] == key)
+              const node = this.orgList.find(
+                (item) => item[this.nodeKey] == key
+              );
               if (node) {
-                const upNodeKey = node[this.upNodeKey]
+                const upNodeKey = node[this.upNodeKey];
                 if (!this.defaultExpandedKeys.includes(upNodeKey)) {
-                  this.defaultExpandedKeys.push(upNodeKey)
+                  this.defaultExpandedKeys.push(upNodeKey);
                 }
               }
             }
-          })
+          });
         }
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
-  mounted () {
+  mounted() {
     if (this.data != null) {
-      this.data = this.formatData(this.data)
+      this.data = this.formatData(this.data);
     }
     if (this.defaultMultiple) {
-      this.active = 1
+      this.active = 1;
     }
   },
   methods: {
     // 点击选择
-    upStart (index) {
-      this.active = index
-      this.$emit('getTreeindex', index)
+    upStart(index) {
+      this.active = index;
+      this.$emit("getTreeindex", index);
     },
-    formatData (params) {
-      const data = params
-      data.forEach(item => {
-        if (Object.hasOwnProperty.call(item, 'children')) {
-          item.disabled = true
-          this.formatData(item.children)
+    formatData(params) {
+      const data = params;
+      data.forEach((item) => {
+        if (Object.hasOwnProperty.call(item, "children")) {
+          item.disabled = true;
+          this.formatData(item.children);
         }
-      })
-      return data
+      });
+      return data;
     },
-    currentChange (data, isChecked) {
-      const key = data[this.nodeKey]
-      this.$emit('getTreeData', this.$refs.tree.getCheckedNodes())
+    currentChange(data, isChecked) {
+      const key = data[this.nodeKey];
+      this.$emit("getTreeData", this.$refs.tree.getCheckedNodes());
       if (isChecked) {
-        const checked = [key]
-        this.$refs.tree.setCheckedKeys(checked)
+        const checked = [key];
+        this.$refs.tree.setCheckedKeys(checked);
       }
     },
-    currentChangeDuo () {
-      const arr = this.$refs.treeDuo.getCheckedNodes()
-      this.$emit('getTreeDataDuo', arr)
+    currentChangeDuo() {
+      const arr = this.$refs.treeDuo.getCheckedNodes();
+      this.$emit("getTreeDataDuo", arr);
     },
     // 选中后设置初始数据
-    setDataObj (arr) {
-      arr.forEach(item => {
+    setDataObj(arr) {
+      arr.forEach((item) => {
         if (!item.children) {
           item.children = {
             OrganId: item.OrganId,
-            ValidBegin: '',
-            ValidEnd: '',
-            Action: '',
-            QueryRow: '',
-            QueryCol: '',
-            NewCol: '',
-            EditRow: '',
-            EditCol: '',
-            DeleteRow: ''
-          }
+            ValidBegin: "",
+            ValidEnd: "",
+            Action: "",
+            QueryRow: "",
+            QueryCol: "",
+            NewCol: "",
+            EditRow: "",
+            EditCol: "",
+            DeleteRow: "",
+          };
         }
-      })
-      this.$emit('getTreeData', arr)
+      });
+      this.$emit("getTreeData", arr);
     },
-    nodeClick (data) {
-      this.$emit('getTreeDatas', data)
+    nodeClick(data) {
+      this.$emit("getTreeDatas", data);
     },
-    radioChange (val) {
-      this.$emit('radioChange', val)
+    radioChange(val) {
+      this.$emit("radioChange", val);
     },
     // 多选框
-    checkChange (arr) {
-      this.$emit('checkChange', arr)
+    checkChange(arr) {
+      this.$emit("checkChange", arr);
     },
-    checkClick (item) {
-      this.$emit('checkClick', item)
-    }
-  }
-}
+    checkClick(item) {
+      this.$emit("checkClick", item);
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -244,14 +302,52 @@ export default {
 .DBox {
   cursor: not-allowed;
 }
+.stateContent {
+  margin-bottom: 10px;
+  .icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 5px;
+    margin-right: 5px;
+  }
+  .state1 {
+    margin-right: 30px;
+    .icon {
+      background-color: #6f81bc;
+    }
+  }
+  .state2 {
+    .icon {
+      background-color: #de4799;
+    }
+  }
+}
 .dptBox {
   height: 100%;
+  .el-tree-node {
+    position: relative;
+  }
   .org-data-tree-node {
     font-size: 14px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    margin-left: 10px;
+    &-icon {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border-radius: 5px;
+      position: relative;
+      top: 2px;
+      margin: 0px 5px 0 10px;
+    }
+    .icon1 {
+      background-color: #6f81bc;
+    }
+    .icon2 {
+      background-color: #de4799;
+    }
   }
 }
 </style>