扩展orgtree;履职内容库管理使用统一的树

src/components/orgTree/index.vue

@@ -3,15 +3,18 @@
     <div class="head-container">
       <el-input
         v-model="deptName"
-        placeholder="请输入机构名称"
+        :placeholder="searchPlaceHolder"
         clearable
         size="small"
         prefix-icon="el-icon-search"
-        style="margin-bottom: 20px"/>
+        style="margin-bottom: 20px"
+      />
     </div>
     <div class="tree-container">
-      <div style="margin-bottom: 10px;">
-        <el-checkbox v-model="checkSub" @change="changeCheckBox">是否关联下级机构</el-checkbox>
+      <div style="margin-bottom: 10px" v-show="showLowerCheck">
+        <el-checkbox v-model="checkSub" @change="changeCheckBox"
+          >关联下级</el-checkbox
+        >
       </div>
       <el-tree
         :data="treeList"
@@ -24,49 +27,57 @@
         :default-expanded-keys="defaultKeys"
         :default-checked-keys="defaultKeys"
         @node-click="handleNodeClick"
-      />
+        v-bind="$attrs"
+      >    
+    </el-tree>
     </div>
   </div>
 </template>
 
 <script>
 import tableListMixins from "@/mixins/tableList";
-import {deptTreeSelect,handsheDeptTreeSelect} from "@/api/system/public";
+import { deptTreeSelect, handsheDeptTreeSelect } from "@/api/system/public";
 
 export default {
   name: "orgTree",
-  mixins:[tableListMixins],
-  data(){
+  mixins: [tableListMixins],
+  data() {
     return {
       //过滤信息
-      deptName:'',
+      deptName: "",
       //是否关联下级
       checked: false,
       // 机构树列表
       treeList: [],
       //默认选中节点
-      defaultKeys:[],
-      //自定义取值
-      defaultProps: {
-        children: "children",
-        label: "name"
-      },
-      checkSub:false,
-      defaultKey:null,
-    }
+      defaultKeys: [],
+      checkSub: false,
+      defaultKey: null,
+    };
   },
-  props:{
-    hangsheTree:{
-      type:Boolean,
-      default:false,
+  props: {
+    hangsheTree: {
+      type: Boolean,
+      default: false,
     },
-    defaultProps:{
-      type:Object,
-      default:{
+    defaultProps: {
+      type: Object,
+      default: {
         children: "children",
-        label: "name"
+        label: "name",
       },
-    }
+    },
+    customRequest: {
+      type: Function,
+    },
+    showLowerCheck: {
+      type: Boolean,
+      default: true,
+    },
+    searchPlaceHolder: {
+      type: String,
+      default: "请输入机构名称",
+    },
   },
   watch: {
     // 根据名称筛选机构树
@@ -74,31 +85,34 @@ export default {
       this.$refs.tree.filter(val);
     },
     defaultProps(val) {
-      this.defaultProps={...val};
-    }
+      this.defaultProps = { ...val };
+    },
   },
   created() {
     this.getDeptTree();
   },
-  methods:{
+  methods: {
     /** 下穿状态改变*/
-    changeCheckBox(state){
-      this.$emit('checkChange',state);
+    changeCheckBox(state) {
+      this.$emit("checkChange", state);
     },
     /** 查询机构下拉树结构 */
     getDeptTree() {
-      let method=deptTreeSelect;
-      if(this.hangsheTree){
-        method=handsheDeptTreeSelect
+      let method = deptTreeSelect;
+      if (this.hangsheTree) {
+        method = handsheDeptTreeSelect;
       }
-      method().then(response => {
+      if (this.customRequest) {
+        method = this.customRequest;
+      }
+      method().then((response) => {
         this.treeList = response.data;
         this.defaultKeys.push(response.data[0].id);
-        this.$emit('defaultKey',response.data[0].id);
+        this.$emit("defaultKey", response.data[0].id);
         this.defaultKey = response.data[0].id;
         setTimeout(() => {
-          this.$refs.tree.setCurrentKey(response.data[0].id)
-        }, 100);        
+          this.$refs.tree.setCurrentKey(response.data[0].id);
+        }, 100);
       });
     },
     // 筛选节点
@@ -107,18 +121,18 @@ export default {
       return data.name.indexOf(value) !== -1;
     },
     // 节点单击事件
-    handleNodeClick(data) {
-      this.$emit('click',data);
+    handleNodeClick(data, node) {
+      this.$emit("click", data, node);
     },
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
-  .el-tree-ex {
-    overflow: auto;
-    ::v-deep .is-current > .el-tree-node__content {
-      background-color: #d1e0f1 !important;
-    }   
+<style lang="scss" scoped>
+.el-tree-ex {
+  overflow: auto;
+  ::v-deep .is-current > .el-tree-node__content {
+    background-color: #d1e0f1 !important;
   }
+}
 </style>

src/views/resumption/ruleManager/index.vue

@@ -3,18 +3,31 @@
   <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="4" :xs="24">
-        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+        <org-tree
+          v-model="queryParams.orgId"
+          @click="clicktreenode"
+          :customRequest="treeData"
+          searchPlaceHolder="输入关键字进行过滤"
+          :expand-on-click-node="true"
+          node-key="id"
+          :default-expanded-keys="topItemKeys"
+          accordion
+          :defaultProps="defaultProps"
+          :showLowerCheck="false"
+          :renderContent="renderContent"
+        >
+          
+        </org-tree>
+
+        <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText">
         </el-input>
         <el-tree
           class="filter-tree"
           :data="treedata"
-          node-key="id"
+          
           highlight-current
-          :expand-on-click-node="true"
-          :default-expanded-keys="topItemKeys"
-          :filter-node-method="filterNode"
-          accordion
-          @node-click="clicktreenode"
+          
+         
           ref="tree"
         >
           <span class="custom-tree-node" slot-scope="{ node, data }">
@@ -28,7 +41,7 @@
             }}</span>
             </span>
           </span>
-        </el-tree>
+        </el-tree> -->
       </el-col>
       <el-col :span="20" :xs="24">
         <el-form
@@ -129,6 +142,7 @@
           :default-expand-all="expandAll"
           v-if="fresh"
           style="width: 100%"
+          v-loading="loading"
         >
           <el-table-column type="expand">
             <template slot-scope="props">
@@ -173,7 +187,11 @@
             v-if="columns[2].visible"
           >
           </el-table-column>
-          <el-table-column label="操作" width="140">
+          <el-table-column
+            label="操作"
+            width="140"
+            v-if="rule && rule.orgId == orgId"
+          >
             <template slot-scope="scope">
               <el-button
                 type="text"
@@ -182,13 +200,20 @@
                 @click="onEditItem(scope.row.id)"
                 v-hasPermi="['resumption:ruleManager:edit']"
                 >编辑</el-button
-              > 
-                    
+              >
+
               <el-popconfirm
                 title="将删除履职项及其下所有履职内容,确定删除？"
                 @confirm="deldata(scope.row.id)"
               >
-                <el-button type="text" size="small" slot="reference" icon="el-icon-delete" v-hasPermi="['resumption:ruleManager:remove']">删除</el-button>
+                <el-button
+                  type="text"
+                  size="small"
+                  slot="reference"
+                  icon="el-icon-delete"
+                  v-hasPermi="['resumption:ruleManager:remove']"
+                  >删除</el-button
+                >
               </el-popconfirm>
             </template>
           </el-table-column>
@@ -212,6 +237,7 @@
 </template>
 
 <script>
+import OrgTree from "@/components/orgTree";
 import { mapGetters, mapMutations } from "vuex";
 import { page, treeData, del } from "@/api/resumption/ruleManager.js";
 import DialogEdit from "./dialog.editItem.vue";
@@ -242,13 +268,13 @@ export default {
       // },
       treedata: [],
       tableData: [],
-
+      loading: false,
       total: 0,
       topItemKeys: [],
-      // defaultProps: {
-      //   children: "children",
-      //   label: "label",
-      // },
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
       columns: [
         { key: 0, label: `序号`, visible: true },
         { key: 1, label: `履职项`, visible: true },
@@ -256,14 +282,14 @@ export default {
         { key: 3, label: `履职内容`, visible: true },
         { key: 4, label: `履职区域`, visible: true },
       ],
-      currentOrgId:null,
+      currentOrgId: null,
     };
   },
 
-  components: { DialogEdit },
+  components: { DialogEdit, OrgTree },
 
   computed: {
-    ...mapGetters(["orgId"])
+    ...mapGetters(["orgId"]),
     // ...mapState(["org", "loginUser"]),
   },
 
@@ -271,7 +297,6 @@ export default {
     filterText(val) {
       this.$refs.tree.filter(val);
     },
-    
   },
 
   async created() {
@@ -281,12 +306,11 @@ export default {
     // await this.getassetlist();
   },
 
-  mounted() {
-
-  },
+  mounted() {},
 
   methods: {
     ...mapMutations([]),
+    treeData,
     dakai() {
       this.expandAll = !this.expandAll;
       this.fresh = false;
@@ -308,10 +332,12 @@ 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.total = Number.parseInt(data.total);
       this.expandAll = false;
+      this.loading = false;
     },
     async gettreelist() {
       await treeData().then((v) => {
@@ -327,7 +353,7 @@ export default {
       this.currentPage = val;
       this.getList();
     },
-    clicktreenode(data,node) {
+    clicktreenode(data, node) {
       if (!data.isRule) {
         return;
       }
@@ -337,12 +363,36 @@ export default {
       this.$nextTick(() => {
         this.fresh = true;
       });
-
+      this.tableData = [];
       this.queryParams.ruleId = data.id;
       this.rule = data;
-      this.rule.orgId=node.parent.data.id
+      this.rule.orgId = node.parent.data.id;
       this.refresh();
     },
+
+    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>
+        );
+      }
+    },
     async deldata(val) {
       await del(val);
       this.$message.info("删除成功");
@@ -365,12 +415,12 @@ export default {
     onEditItem(itemId) {
       this.$refs.dialogEdit.show(itemId);
     },
-    onSelect(){
+    onSelect() {
       this.$refs.DialogSelect.show();
     },
-    onSuccess(){
+    onSuccess() {
       this.refresh();
-    }
+    },
   },
 };
 </script>

src/views/safetycheck/ruleManager/index.vue

@@ -173,14 +173,14 @@
             v-if="columns[2].visible"
           >
           </el-table-column>
-          <el-table-column label="操作" width="140">
+          <el-table-column label="操作" width="140" v-if="rule && rule.orgId == orgId">
             <template slot-scope="scope">
               <el-button
                 type="text"
                 size="small"
                 icon="el-icon-edit"
                 @click="onEditItem(scope.row.id)"
-                v-hasPermi="['resumption:ruleManager:edit']"
+                v-hasPermi="['resumption:ruleManager:edit']"                
                 >编辑</el-button
               > 
                     
@@ -341,7 +341,7 @@ export default {
       this.$nextTick(() => {
         this.fresh = true;
       });
-
+      this.tableData=[]
       this.queryParams.ruleId = data.id;
       this.rule = data;
       this.rule.orgId=node.parent.data.id