coys

src/components/orgTreeSelect/index.vue

@@ -1,95 +1,110 @@
 <template>
-    <!--  弹出框  -->
-    <el-popover
-      placement="bottom-start"
-      :disabled="disabled"
-      v-model="visible">
-      <!--  选中的值  -->
-      <div  slot="reference" class="tags-box">
-        <i v-if="sNodeList.length > 0 && !disabled" class="el-icon-circle-close close-icon" @click="clear"></i>
-        <el-tag type="success" v-for="v in sNodeList" :key="v.id">{{v.name}}</el-tag>
-      </div>
+  <!--  弹出框  -->
+  <el-popover placement="bottom-start" :disabled="disabled" v-model="visible">
+    <!--  选中的值  -->
+    <div slot="reference" class="tags-box">
+      <i
+        v-if="sNodeList.length > 0 && !disabled"
+        class="el-icon-circle-close close-icon"
+        @click="clear"
+      ></i>
+      <el-tag type="success" v-for="v in sNodeList" :key="v.id">{{
+        v.name
+      }}</el-tag>
+    </div>
 
-      <!--  文本框    -->
-      <el-input style="width: 100%;margin-bottom: 20px;" v-model="queryForm.value" placeholder="请输入过滤值" clearable></el-input>
-      <!--  下拉框   -->
-      <el-row :gutter="20" type="flex" align="middle">
-        <el-col :span="14" :xs="24">
-          <el-select  v-model="queryForm.type" placeholder="请选择过滤机构类型" clearable>
-            <el-option
-              v-for="dict in dict.type.sys_org_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="`${dict.value}`"
-            ></el-option>
-          </el-select>
-        </el-col>
-        <el-col :span="10" :xs="24" >
-          <el-checkbox v-model="checked">按过滤机构类型勾选</el-checkbox>
-        </el-col>
-      </el-row>
-      <!--  机构树   -->
-      <div class="tree-box">
-        <el-tree
-          ref="tree"
-          :data='orgTree'
-          :props="props"
-          node-key="id"
-          show-checkbox
-          check-strictly
-          :expand-on-click-node="false"
-          :default-checked-keys="nodes"
-          @node-click="handleNodeClick"
-          @check="onCheck"
-          :filter-node-method="filterNode">
-        </el-tree>
-      </div>
+    <!--  文本框    -->
+    <el-input
+      style="width: 100%; margin-bottom: 20px"
+      v-model="queryForm.value"
+      @input="serchTreeHandler"
+      placeholder="请输入过滤值"
+      clearable
+    ></el-input>
+    <!--  下拉框   -->
+    <el-row :gutter="20" type="flex" align="middle">
+      <el-col :span="14" :xs="24">
+        <el-select
+          v-model="queryForm.type"
+          placeholder="请选择过滤机构类型"
+          clearable
+          @change="serchTreeHandler"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_org_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="`${dict.value}`"
+          ></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="10" :xs="24">
+        <el-checkbox v-model="checked">按过滤机构类型勾选</el-checkbox>
+      </el-col>
+    </el-row>
+    <!--  机构树   -->
+    <div class="tree-box">
+      <el-tree
+        ref="tree"
+        :data="orgTree"
+        :props="defaultProps"
+        node-key="id"
+        show-checkbox
+        check-strictly
+        :expand-on-click-node="false"
+        :default-checked-keys="nodes"
+        @node-click="handleNodeClick"
+        @check="onCheck"
+        :filter-node-method="filterNode"
+      >
+      </el-tree>
+    </div>
   </el-popover>
 </template>
 
 <script>
-import {deptTreeSelect} from "@/api/system/public";
+import { deptTreeSelect } from "@/api/system/public";
 
 export default {
-  dicts:['sys_org_type'],
+  dicts: ["sys_org_type"],
   props: {
     defaultNode: {
       type: Array,
-      required: false
+      required: false,
     },
-    disabled:{
+    disabled: {
       type: Boolean,
-      default:false,
-      required: false
-    }
+      default: false,
+      required: false,
+    },
   },
-  data (){
+  data() {
     return {
       //清除图标
-      showClearable:false,
+      showClearable: false,
       //弹窗显示
-      visible:false,
+      visible: false,
       //结构树
-      orgTree:null,
+      orgTree: null,
       //自定义字段
-      props: {
-        label: 'name',
+      defaultProps: {
+        label: "name",
       },
       //过滤条件
-      queryForm:{
-        value:null,
-        type:null,
+      queryForm: {
+        value: null,
+        type: null,
       },
       //受否全选
-      checked:false,
+      checked: false,
       //默认展示的node
       //defaultNode:[],
       //已选中的node
-      sNodeList:[],
-      nodes:[],
-    }
+      sNodeList: [],
+      nodes: [],
+    };
   },
-  mounted(){
+  mounted() {
     this.getDeptTree();
   },
   watch: {
@@ -102,129 +117,118 @@ export default {
         });
       },
     },
-    queryForm:{
-      deep:true,
-      handler(n,o) {
-        this.$refs.tree.filter(n);
-      },
-    },
+    // queryForm: {
+    //   deep: true,
+    //   handler(n, o) {
+       
+    //     if(!n.value&&!n.type){
+    //       this.$refs.tree.filter({});
+    //     }else{
+
+    //       this.$refs.tree.filter(n);
+    //     }
+    //   },
+    // },
   },
   // computed: {
   //   defaultNode:
   //   //pv: sync("value"),
   // },
-  model:{
-    prop: 'defaultNode',
-    event: 'change'
+  model: {
+    prop: "defaultNode",
+    event: "change",
   },
-  methods:{
-    clear(){
+  methods: {
+    clear() {
       this.sNodeList = [];
       this.$refs.tree.setCheckedKeys([]);
       this.$refs.tree.setCurrentKey(null);
       this.$emit("selectNode", JSON.stringify(this.sNodeList));
     },
+    //筛选条件变化
+    serchTreeHandler(){
+      this.$refs.tree.filter(this.queryForm)
+    },
     /** 查询机构树 */
     getDeptTree() {
-      deptTreeSelect().then(response => {
+      deptTreeSelect().then((response) => {
         this.orgTree = response.data;
       });
     },
     filterNode(value,data,node){
+      
       if (this.queryForm.value && this.queryForm.type) {
-        return data.name.indexOf(this.queryForm.value) >= 0 && data.type == this.queryForm.type;
+        return data.name.indexOf(this.queryForm.value) !== -1 && data.type == this.queryForm.type;
       }
       if (this.queryForm.value) {
-        return data.name.indexOf(this.queryForm.value) >= 0;
+        return data.name.indexOf(this.queryForm.value) !== -1;
       }
       if (this.queryForm.type) {
         return data.type == this.queryForm.type;
       }
       return true
     },
-    handleNodeClick(){
-
-    },
+    
+    handleNodeClick() {},
     onCheck(data, checked, tree) {
-        if (this.queryForm.type && this.checked) {
-          let subOrgIds = [];
-          let currentCheckedIndex = checked.checkedKeys.findIndex(
-            (x) => {
-              x == data.id
-            }
-          );
-          checked.checkedKeys.splice(currentCheckedIndex, 1);
-          let checkValue = currentCheckedIndex > -1;
-          this.getSubOrgIdsByOrgType(data, this.queryForm.type, subOrgIds);
-          console.log(subOrgIds,checkValue,'subOrgIds')
-          if (!checkValue) {
-            subOrgIds.forEach((x) => checked.checkedKeys.push(x.id));
-          } else {
-            subOrgIds.forEach((x) => {
-              let index = checked.checkedKeys.findIndex((y) => x.id == y);
-              if (index > -1) {
-                checked.checkedKeys.splice(index, 1);
-              }
-            });
-          }
-          console.log(checked,'checked')
-          this.$refs.tree.setCheckedKeys(checked.checkedKeys);
-      }
+      
       this.sNodeList = this.$refs.tree.getCheckedNodes();
       this.$emit("selectNode", JSON.stringify(this.sNodeList));
     },
     getSubOrgIdsByOrgType(topOrg, orgType, orgIdList) {
-        if (!topOrg) return;
-        if (topOrg.type == orgType) {orgIdList.push(topOrg)};
-        if (topOrg.children && topOrg.children.length > 0) {
-          topOrg.children.forEach((item) => {
-            this.getSubOrgIdsByOrgType(item, orgType, orgIdList);
-          });
-        }
+      if (!topOrg) return;
+      if (topOrg.type == orgType) {
+        orgIdList.push(topOrg);
+      }
+      if (topOrg.children && topOrg.children.length > 0) {
+        topOrg.children.forEach((item) => {
+          this.getSubOrgIdsByOrgType(item, orgType, orgIdList);
+        });
+      }
     },
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .tags-box{
-    background-color: #fff;
-    border-radius: 4px;
-    border: 1px solid #DCDFE6;
-    color: #606266;
-    outline: 0;
-    padding: 0 15px 0 5px;
-    width: 100%;
-    min-height: 40px;
-    max-height: 40px;
-    position: relative;
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-    >span{
-      margin: 5px 10px;
-    }
-    &:hover{
-      .close-icon{
-        display: block;
-        color: #666;
-      }
-    }
-    .close-icon{
-      position: absolute;
-      top:30%;
-      right: 5px;
-      display: none;
-      cursor: pointer;
+.tags-box {
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  outline: 0;
+  padding: 0 15px 0 5px;
+  width: 100%;
+  min-height: 40px;
+  max-height: 40px;
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  > span {
+    margin: 5px 10px;
+  }
+  &:hover {
+    .close-icon {
+      display: block;
+      color: #666;
     }
   }
-  .tree-box{
-    margin-top: 20px;
-    max-height: 300px;
-    overflow: auto;
-    border-radius: 4px;
-    border: 1px solid #DCDFE6;
+  .close-icon {
+    position: absolute;
+    top: 30%;
+    right: 5px;
+    display: none;
+    cursor: pointer;
   }
+}
+.tree-box {
+  margin-top: 20px;
+  max-height: 300px;
+  overflow: auto;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+}
 </style>

src/views/system/menu/index.vue

@@ -102,11 +102,17 @@
           />
         </template>
       </el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
+      <el-table-column prop="icon" v-if="activeName==1" label="图标" align="center" width="100">
         <template slot-scope="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
+      <el-table-column prop="icon" v-if="activeName==0" label="图标" align="center" width="100">
+        <template slot-scope="scope">
+          <img :src="scope.row.icon" alt="">
+         
+        </template>
+      </el-table-column>
       <el-table-column
         prop="orderNum"
         label="排序"