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

<!-- 选择部门 -->
<template>
  <treeselect v-model="selected" :options="list" :show-count="true" :disabled="readonly" :multiple="multiple" :placeholder="$t('form.placeholderSelect')" @input="handleChange" />
</template>

<script>
import Treeselect from "@riophae/vue-treeselect"
import { deptTreeSelect } from "@/api/system/user"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: "SelectDept",
  components: {Treeselect},
  props: {
    value: {
      type: [Number, String , Array],
      default: null,
    },
    readonly: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        if (!this.multiple) {
          this.selected = v ? parseInt(v) : null
        } else {
          if (v) {
            //默认传的,分割的字符串，有传数组再改造
            debugger
            let arr = (v+'').split(',')
            let s = []
            _.forEach(arr, a => {
              s.push(parseInt(a))
            })
            this.selected = s
          } else {
            this.selected = []
          }
        }
      }
    },
  },
  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) {
      this.$emit('input', this.multiple ? (val && val.length > 0 ? val.join(',') : '') : (val || ''))
      this.$emit('change', this.multiple ? (val && val.length > 0 ? val.join(',') : '') : (val || ''))
    },
  }
};
</script>