增加一个选择机构的组件

2025-12-11 20:06:44 +08:00 · 2022-09-06 09:43:03 +08:00
parent aa7bedac1d
commit f1199cfd01
1 changed files with 121 additions and 0 deletions
--- a/src/components/System/chooseOrg.vue
+++ b/src/components/System/chooseOrg.vue
@@ -0,0 +1,121 @@
+<template>
+  <!--机构树-->
+  <div>
+     <el-dialog title="先择组织机构" :visible.sync="dlgShow" :before-close="handleClose" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
+     <div>
+        <el-input placeholder="" v-model="orgName">
+          <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+     </div>
+      <div style="overflow-y: auto;height: 400px;">
+        <el-tree
+          ref="treeRef"
+          node-key="id"
+          :lazy="true"
+          :props="departProps"
+          :load="loadNode"
+          @node-click="handleDepartNodeClick"
+          :expand-on-click-node="false"
+          :render-content="renderContent"
+          :default-expanded-keys="['-1']">
+        </el-tree>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dlgShow = false">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import usergroupApi from "@/api/modules/usergroup";
+  import orgApi from "@/api/system/organiza";
+  export default{
+    props:{
+
+    },
+    data(){
+      return {
+        dlgShow:false,
+        orgName:'',
+        chooseOrg:{},
+        departData:[],
+        departProps: {
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    methods:{
+      handleClose(){
+        this.dlgShow=false
+      },
+      renderContent(h, { node, data, store }) {
+          let checked=data.id==this.chooseOrg.id;
+          if(checked){
+            return (<span class="custom-tree-node">
+            <span>{node.label}</span>
+            <span class="el-icon-check"></span>
+            </span>);
+          }else{
+            return (<span class="custom-tree-node"> <span>{node.label}</span></span>);
+          }
+
+      },
+      loadNode(node, resolve) {
+        var parentId = null;
+        if (node.level === 0) {
+          resolve([{name:'组织机构树',id:'-1'}]);
+        }else{
+          if(node.level === 1){
+              parentId = '-1';
+          }else{
+              parentId = node.data.id;
+          }
+          usergroupApi.userOrgs(parentId).then(res =>{
+              if (res.status == 200) {
+                if(res.result != null && res.result.length > 0){
+                  resolve(res.result);
+                }else{
+                  resolve([]);
+                }
+              }else{
+                this.$message.error('查询用户的机构失败');
+              }
+          });
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      handleDepartNodeClick(data){
+        this.chooseOrg.id = data.id;
+        this.chooseOrg.name=data.name;
+        this.chooseOrg.kid=data.kid;
+      },
+      confirm(){
+        if(!this.chooseOrg.id){
+          this.$message.error('请选择一个机构');
+          return;
+        }
+        //this.dlgShow=false;
+        this.$emit('confirm',this.chooseOrg);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+ /* .is-current{
+    background-color: #ffff7f;
+  } */
+   .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
+</style>