From 6b6f455249c09eadc81562fb3b222169eb11270f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BC=BA?= <1206709430@qq.com>
Date: Wed, 12 May 2021 00:59:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=8A=9F=E8=83=BD(=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85):=20=E5=B0=81=E8=A3=85?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8=E9=80=89=E6=8B=A9=E5=99=A8=E3=80=81=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dvadmin-ui/src/components/DeptTree/index.vue  | 55 ++++++++++++++++++
 dvadmin-ui/src/components/UsersTree/index.vue | 56 +++++++++++++++++++
 dvadmin-ui/src/main.js                        |  4 ++
 3 files changed, 115 insertions(+)
 create mode 100644 dvadmin-ui/src/components/DeptTree/index.vue
 create mode 100644 dvadmin-ui/src/components/UsersTree/index.vue

diff --git a/dvadmin-ui/src/components/DeptTree/index.vue b/dvadmin-ui/src/components/DeptTree/index.vue
new file mode 100644
index 0000000..4c4c465
--- /dev/null
+++ b/dvadmin-ui/src/components/DeptTree/index.vue
@@ -0,0 +1,55 @@
+<!-- 部门选择器 -->
+<template>
+  <div>
+    <treeselect v-model="dept_value" :options="deptOptions" :multiple="multiple" :show-count="true"
+                :placeholder="placeholder" :disable-branch-nodes="disable_branch_nodes"/>
+  </div>
+</template>
+
+<script>
+  import Treeselect from '@riophae/vue-treeselect'
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import {treeselect} from '@/api/vadmin/permission/dept'
+
+  export default {
+    name: "DeptTree",
+    props: {
+      /* 选择器的内容 */
+      value: {type: Number | Array,},
+      /* 用于显示选项 */
+      placeholder: {type: String, default: "请选择归属部门",},
+      /* 是否多选 */
+      multiple: {type: Boolean, default: false,},
+      /* 是否只能选末级 */
+      disable_branch_nodes: {type: Boolean, default: false,},
+    },
+    components: {Treeselect},
+    data() {
+      return {
+        deptOptions: [],
+        dept_value: this.value
+      }
+    },
+    watch: {
+      dept_value(newValue) {
+        this.$emit('update:value', newValue)
+      }
+    },
+    created() {
+      this.getTreeselect()
+    },
+    methods: {
+      /** 查询部门下拉树结构 */
+      getTreeselect() {
+        treeselect().then(response => {
+          this.deptOptions = this.handleTree(response.data, 'id')
+        })
+      },
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/dvadmin-ui/src/components/UsersTree/index.vue b/dvadmin-ui/src/components/UsersTree/index.vue
new file mode 100644
index 0000000..faaf109
--- /dev/null
+++ b/dvadmin-ui/src/components/UsersTree/index.vue
@@ -0,0 +1,56 @@
+<!-- 用户选择器 -->
+<template>
+  <div>
+    <treeselect v-model="users_value" :options="usersOptions" :multiple="multiple" :show-count="true"
+                :placeholder="placeholder" :disable-branch-nodes="disable_branch_nodes"/>
+  </div>
+</template>
+
+<script>
+  import Treeselect from '@riophae/vue-treeselect'
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import {listUser} from '@/api/vadmin/permission/user'
+
+  export default {
+    name: "DeptTree",
+    props: {
+      /* 选择器的内容 */
+      value: {type: Number | Array,},
+      /* 用于显示选项 */
+      placeholder: {type: String, default: "请选择用户",},
+      /* 是否多选 */
+      multiple: {type: Boolean, default: false,},
+      /* 是否只能选末级 */
+      disable_branch_nodes: {type: Boolean, default: false,},
+    },
+    components: {Treeselect},
+    data() {
+      return {
+        usersOptions: [],
+        users_value: this.value
+      }
+    },
+    watch: {
+      dept_value(newValue) {
+        this.$emit('update:value', newValue)
+      }
+    },
+    created() {
+      this.getTreeselect()
+    },
+    methods: {
+      /** 查询所有用户信息 **/
+      getTreeselect() {
+        listUser({pageNum: "all", _fields: "id,name"}).then(response => {
+          response.data.map(val => { val["label"] = val['name'] })
+          this.usersOptions = this.handleTree(response.data, 'id')
+        })
+      },
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/dvadmin-ui/src/main.js b/dvadmin-ui/src/main.js
index e589237..0716514 100755
--- a/dvadmin-ui/src/main.js
+++ b/dvadmin-ui/src/main.js
@@ -30,6 +30,8 @@ import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
 import SmallDialog from '@/components/SmallDialog';
+import DeptTree from '@/components/DeptTree';
+import UsersTree from '@/components/UsersTree';
 import CommonIcon from '@/components/CommonIcon';
 import CommonStaticTable from '@/components/CommonStaticTable';
 import {getCrontabData, getIntervalData} from "./utils/validate"; // 通用图标组件
@@ -67,6 +69,8 @@ Vue.prototype.msgInfo = function (msg) {
 }
 // 自定义组件
 Vue.component('small-dialog', SmallDialog);
+Vue.component('dept-tree', DeptTree);
+Vue.component('users-tree', UsersTree);
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)