安全检查、履职内容库管理机构树优化

src/views/resumption/ruleManager/index.vue

@@ -16,32 +16,7 @@
           :showLowerCheck="false"
           :renderContent="renderContent"
         >
-          
         </org-tree>
-
-        <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText">
-        </el-input>
-        <el-tree
-          class="filter-tree"
-          :data="treedata"
-          
-          highlight-current
-          
-         
-          ref="tree"
-        >
-          <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span :title="data.label" class="show-ellipsis" v-if="data.isRule==0">{{
-              data.label
-            }}</span>
-            <span v-else style="display: flex;">
-              <i class="el-icon-s-management" style="color:#008CD6;padding-top:3px;"></i>
-              <span :title="data.label" class="show-ellipsis" >{{
-              data.label
-            }}</span>
-            </span>
-          </span>
-        </el-tree> -->
       </el-col>
       <el-col :span="20" :xs="24">
         <el-form
@@ -301,7 +276,7 @@ export default {
 
   async created() {
     // this.OID = this.loginUser.org.id;
-    await this.gettreelist();
+    // await this.gettreelist();
     // await this.getList()
     // await this.getassetlist();
   },
@@ -339,12 +314,12 @@ export default {
       this.expandAll = false;
       this.loading = false;
     },
-    async gettreelist() {
-      await treeData().then((v) => {
-        this.treedata = v.data;
-        this.topItemKeys = v.data.map((d) => d.id);
-      });
-    },
+    // async gettreelist() {
+    //   await treeData().then((v) => {
+    //     this.treedata = v.data;
+    //     this.topItemKeys = v.data.map((d) => d.id);
+    //   });
+    // },
     handleSizeChange(val) {
       this.pagesize = val;
       this.getList();

src/views/safetycheck/ruleManager/index.vue

@@ -3,32 +3,20 @@
   <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="4" :xs="24">
-        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
-        </el-input>
-        <el-tree
-          class="filter-tree"
-          :data="treedata"
-          node-key="id"
-          highlight-current
+        <org-tree
+          v-model="queryParams.orgId"
+          @click="clicktreenode"
+          :customRequest="treeData"
+          searchPlaceHolder="输入关键字进行过滤"
           :expand-on-click-node="true"
+          node-key="id"
           :default-expanded-keys="topItemKeys"
-          :filter-node-method="filterNode"
           accordion
-          @node-click="clicktreenode"
-          ref="tree"
+          :defaultProps="defaultProps"
+          :showLowerCheck="false"
+          :renderContent="renderContent"
         >
-          <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span :title="data.label" class="show-ellipsis" v-if="data.isRule==0">{{
-              data.label
-            }}</span>
-            <span v-else style="display: flex;">
-              <i class="el-icon-s-management" style="color:#008CD6;padding-top:3px;"></i>
-              <span :title="data.label" class="show-ellipsis" >{{
-              data.label
-            }}</span>
-            </span>
-          </span>
-        </el-tree>
+        </org-tree>
       </el-col>
       <el-col :span="20" :xs="24">
         <el-form
@@ -129,6 +117,7 @@
           :default-expand-all="expandAll"
           v-if="fresh"
           style="width: 100%"
+          v-loading="loading"
         >
           <el-table-column type="expand">
             <template slot-scope="props">
@@ -219,7 +208,7 @@ import { mapGetters, mapMutations } from "vuex";
 import { page, treeData, del } from "@/api/safetycheck/ruleManager.js";
 import DialogEdit from "./dialog.editItem.vue";
 import SelectPoint from './dialog.select.point.vue';
-
+import OrgTree from "@/components/orgTree";
 export default {
   name: "safetycheckRuleManager",
   props: [],
@@ -245,8 +234,12 @@ export default {
       //   value: "",
       // },
       treedata: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
       tableData: [],
-
+      loading: false,
       total: 0,
       topItemKeys: [],
       // defaultProps: {
@@ -264,7 +257,7 @@ export default {
     };
   },
 
-  components: { DialogEdit,SelectPoint },
+  components: { DialogEdit,SelectPoint,OrgTree },
 
   computed: {
     ...mapGetters(["orgId"])
@@ -280,7 +273,7 @@ export default {
 
   async created() {
     // this.OID = this.loginUser.org.id;
-    await this.gettreelist();
+    // await this.gettreelist();
     // await this.getList()
     // await this.getassetlist();
   },
@@ -291,6 +284,7 @@ export default {
 
   methods: {
     ...mapMutations([]),
+    treeData,
     dakai() {
       this.expandAll = !this.expandAll;
       this.fresh = false;
@@ -312,17 +306,14 @@ export default {
         this.$message.warning("请先选择一个检查内容库定义");
         return;
       }
+      this.loading = true;
       const data = await page(this.queryParams);
       this.tableData = data.rows;
       this.total =Number.parseInt(data.total);
       this.expandAll = false;
+      this.loading = false;
     },
-    async gettreelist() {
-      await treeData().then((v) => {
-        this.treedata = v.data;
-        this.topItemKeys = v.data.map((d) => d.id);
-      });
-    },
+    
     handleSizeChange(val) {
       this.pagesize = val;
       this.getList();
@@ -352,6 +343,29 @@ export default {
       this.$message.info("删除成功");
       this.getList();
     },
+    renderContent(h, { node, data, store }) {
+      if (data.isRule == 0) {
+        return (
+          <span class="custom-tree-node">
+            <span class="show-ellipsis">
+              {data.label}
+            </span>
+          </span>
+        );
+      } else {
+        return (
+          <span class="custom-tree-node">
+            <span style="display: flex">
+              <i
+                class="el-icon-s-management"
+                style="color: #008cd6; padding-top: 3px"
+              ></i>
+              <span class="show-ellipsis">{data.label}</span>
+            </span>
+          </span>
+        );
+      }
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("search");