新功能(前端组件封装): 封装部门选择器、用户选择器

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>

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>

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)