thoth-frontend-test/src/components/select/selectCascader.vue

<template>
  <el-select
    v-model="selectValue"
    :multiple="multiple"
    filterable
    remote
    :size="size"
    clearable
    collapse-tags
    :style="itemStyles"
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    @change="changeCascader"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      {{ item.deptPath }}
    </el-option>
  </el-select>
</template>

<script>
/**
 * 提炼自月报的团队选择器
 * 使用前，需要在组件渲染前，配合 vuex 中的获取部门数据的 actions 的方法来使页面自动获取数据
 * 在 created 或者 mounted 中 放入下面这句函数即可
 * 示例：获取部门数据
 * this.$store.dispatch('monthlyReportEdit/setSelectEnum')
 * 模版中的用法
 *  <!-- 团队选择 -->
 *  <selectCascader
 *  v-else-if="type === 'cascader'"
 *  v-model="val"
 *  :size="size"
 *  :placeholder="placeholder"
 *  :style="itemStyles"
 *  @change="(e) => $emit('onChange', e)"
 *  />
 */
export default {
  name: 'SelectCascader',
  props: {
    multiple: {
      type: Boolean,
      required: false,
      default: () => true
    },
    value: {
      type: [Array, String, Number],
      required: false,
      default: () => []
    },
    itemStyles: {
      type: Object,
      default: () => ({ width: '100%' }),
      required: false
    },
    size: {
      type: String,
      required: false,
      default: 'small'
    },
    placeholder: {
      type: String,
      required: false,
      default: '请选择'
    }
  },
  data() {
    return {
      selectValue: this.value,
      options: []
    }
  },
  computed: {
    selectEnum() {
      return this.$store.state.monthlyReportEdit.selectEnum
    }
  },
  watch: {
    value() {
      this.init()
    },
    selectEnum() {
      this.init()
    }
  },
  mounted() {
    // this.selectValue = this.value
    this.init()
  },
  methods: {
    init() {
      if (this.value && this.value.length) {
        this.options = []
        this.selectValue = this.value.map(elm => {
          this.find(elm, 'value')
          return `${elm}`
        })
        this.$forceUpdate()
      }
    },
    find(id, key = 'value') {
      const run = (arr) => {
        for (let i = 0; i < arr.length; i++) {
          const elm = arr[i]
          if (key === 'value' && `${elm[key]}` === `${id}`) {
            if (this.isHave(`${id}`) < 0) {
              this.$set(this.options, this.options.length, elm)
            }
          }
          const reg = new RegExp(id, 'i')
          if (key === 'label' && reg.test(`${elm[key]}`)) {
            if (this.isHave(`${id}`) < 0 && elm.valid) {
              this.$set(this.options, this.options.length, elm)
            }
          }
          if (elm.children) {
            run(elm.children)
          }
        }
      }
      run(this.selectEnum)
    },
    isHave(id) {
      // console.log(id)
      let itemIndex = -1
      for (let index = 0; index < this.options.length; index++) {
        const element = this.options[index]
        // console.log(element)
        if (`${element.value}` === `${id}`) {
          itemIndex = index
        }
      }
      return itemIndex
    },
    async remoteMethod(query) { // 获取部门option
      if (query !== '') {
        this.options = []
        this.find(query, 'label')
      }
    },
    changeCascader(value) {
      this.$emit('input', value)
      console.log(141, value)
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped lang="less"></style>