添加orgtree组件

src/components/orgTree/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="head-container">
+      <el-input
+        v-model="deptName"
+        placeholder="请输入机构名称"
+        clearable
+        size="small"
+        prefix-icon="el-icon-search"
+        style="margin-bottom: 20px"/>
+    </div>
+    <div class="tree-container">
+      <div style="margin-bottom: 10px;">
+        <el-checkbox v-model="checkSub" @change="changeCheckBox">是否关联下级机构</el-checkbox>
+      </div>
+      <el-tree
+        :data="treeList"
+        :props="defaultProps"
+        :expand-on-click-node="false"
+        :filter-node-method="filterNode"
+        ref="tree"
+        node-key="id"
+        :default-expanded-keys="defaultKeys"
+        :default-checked-keys="defaultKeys"
+        @node-click="handleNodeClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import tableListMixins from "@/mixins/tableList";
+import {deptTreeSelect} from "@/api/system/public";
+
+export default {
+  name: "orgTree",
+  mixins:[tableListMixins],
+  data(){
+    return {
+      //过滤信息
+      deptName:'',
+      //是否关联下级
+      checked: false,
+      // 机构树列表
+      treeList: [],
+      //默认选中节点
+      defaultKeys:[],
+      //自定义取值
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      checkSub:false,
+      defaultKey:null,
+    }
+  },
+  watch: {
+    // 根据名称筛选机构树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getDeptTree();
+  },
+  methods:{
+    /** 下穿状态改变*/
+    changeCheckBox(state){
+      this.$emit('checkChange',state);
+    },
+    /** 查询机构下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.treeList = response.data;
+        this.defaultKeys.push(response.data[0].id);
+        this.$emit('defaultKey',response.data[0].id);
+        this.defaultKey = response.data[0].id;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.$emit('click',data);
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/user/index.vue

@@ -3,32 +3,7 @@
     <el-row :gutter="20">
       <!--机构数据-->
       <el-col :span="4" :xs="24">
-        <div class="head-container">
-          <el-input
-            v-model="deptName"
-            placeholder="请输入机构名称"
-            clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
-          />
-        </div>
-        <div class="tree-container">
-          <div style="margin-bottom: 10px;">
-            <el-checkbox v-model="queryParams.checkSub" @change="changeCheckBox">是否关联下级机构</el-checkbox>
-          </div>
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
-            :default-expanded-keys="defaultKeys"
-            :default-checked-keys="defaultKeys"
-            @node-click="handleNodeClick"
-          />
-        </div>
+        <org-tree v-model="queryParams.orgId" @defaultKey="getDefaultKey" @checkChange="checkChange" @click="clickTreeNode"></org-tree>
       </el-col>
       <!--用户数据-->
       <el-col :span="20" :xs="24">
@@ -231,13 +206,7 @@
           </el-col>
           <el-col :span="14">
             <el-form-item label="所属机构" prop="orgId">
-<!--              <el-cascader-->
-<!--                v-model="form.orgId"-->
-<!--                :options="deptOptions"-->
-<!--                :props="{checkStrictly: true, label:'name'}"-->
-<!--                placeholder="请选择归属机构">-->
-<!--              </el-cascader>-->
-              <treeselect
+              <tree-select
                 v-model="form.orgId"
                 :options="deptOptions"
                 :show-count="true"
@@ -371,16 +340,16 @@
 </template>
 
 <script>
+import OrgTree from '@/components/orgTree'
 import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
-import { deptTreeSelect } from "@/api/system/public";
 import { getToken } from "@/utils/auth";
-import Treeselect from "@riophae/vue-treeselect";
+import TreeSelect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "User",
   dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { Treeselect },
+  components: { OrgTree,TreeSelect },
   data() {
     return {
       // 遮罩层
@@ -399,8 +368,6 @@ export default {
       userList: null,
       // 弹出层标题
       title: "",
-      // 机构树选项
-      deptOptions: undefined,
       // 是否显示弹出层
       open: false,
       // 机构名称
@@ -415,12 +382,6 @@ export default {
       roleOptions: [],
       // 表单参数
       form: {},
-      //是否关联下级
-      checked: false,
-      defaultProps: {
-        children: "children",
-        label: "name"
-      },
       // 用户导入参数
       upload: {
         // 是否显示弹出层（用户导入）
@@ -485,22 +446,24 @@ export default {
         ]
       },
       //默认选中节点
-      defaultKeys:[]
+      defaultKeys:null,
+      deptOptions:[],
     };
   },
-  watch: {
-    // 根据名称筛选机构树
-    deptName(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
   created() {
-    this.getDeptTree();
     this.getConfigKey("sys.user.initPassword").then(response => {
       this.initPassword = response.msg;
     });
   },
+  mounted(){
+    console.log(this.queryParams,'aaaaaa')
+  },
   methods: {
+    // 节点单击事件
+    clickTreeNode(data) {
+      this.queryParams.orgId = data.id;
+      this.handleQuery();
+    },
     /** 分配角色操作 */
     handleExtend(row) {
       const userId = row.id;
@@ -517,11 +480,7 @@ export default {
         children: node.children
       }
     },
-    /** 下穿状态改变*/
-    changeCheckBox(){
-      this.getList();
-    },
-    /** 查询用户列表 */
+    /** 查询列表 */
     getList(id) {
       this.loading = true;
       listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
@@ -535,24 +494,13 @@ export default {
         this.loading = false;
       })
     },
-    /** 查询机构下拉树结构 */
-    getDeptTree() {
-      deptTreeSelect().then(response => {
-        this.deptOptions = response.data;
-        console.log( this.deptOptions,' this.deptOptions')
-        this.defaultKeys.push(response.data[0].id);
-        this.queryParams.orgId = response.data[0].id;
-        this.handleQuery();
-      });
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
+    getDefaultKey(key){
+      this.queryParams.orgId = key;
+      this.getList();
     },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.orgId = data.id;
+    //单选框状态改变
+    checkChange(state){
+      this.queryParams.checkSub = state;
       this.handleQuery();
     },
     // 用户状态修改