[feat] [组件] 选择部门的组件

src/views/business/comps/select/SelectDept.vue

@@ -0,0 +1,64 @@
+<!-- 选择部门 -->
+<template>
+  <treeselect v-model="selected" :options="list" :show-count="true" :disabled="readonly" :placeholder="$t('form.placeholderSelect')" @select="handleChange" />
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect"
+import { deptTreeSelect } from "@/api/system/user"
+export default {
+  name: "SelectDept",
+  components: {Treeselect},
+  props: {
+    value: {
+      type: [Number, String , Array],
+      default: null,
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(v) {
+        this.selected = v ? parseInt(v) : null
+      }
+    },
+  },
+  data() {
+    return {
+      selected: null,
+      list: [],
+    };
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.list = []
+      deptTreeSelect().then(response => {
+        this.list = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+      })
+    },
+    // 过滤禁用的部门
+    filterDisabledDept(deptList) {
+      return deptList.filter(dept => {
+        if (dept.disabled) {
+          return false
+        }
+        if (dept.children && dept.children.length) {
+          dept.children = this.filterDisabledDept(dept.children)
+        }
+        return true
+      })
+    },
+    handleChange(val) {
+      alert(val?val.label : '')
+      this.$emit('input', val?val.id : '')
+    },
+  }
+};
+</script>