baseSelect.vue

<template>
  <div style=" width:auto; display:inline-block !important; display:inline;">
    <a-select :style="{width: width + 'px'}" v-model="selected" @change="selectChange" :key="0">
      <a-select-option v-for="item in selectArray" :key="item.key" :value="item.key" select>{{ item.title }}</a-select-option>
    </a-select>
  </div>
</template>
<script>
// 用法 <base-select  v-model="formData.projClass"  :type="1" :isAll="true" />
import { getType } from '@/views/utils/auth'
export default {
  name: "baseSelect",
  data () {
    return {
      selectArray: [],
      selected: '',
      defaultValue: {
        title: "--请选择" + this.title + "--",
        key: "",
        description: "",
        selected: true,
        disabled: true,
      }
    };
  },
  props: {
    value: {
      type: undefined,
      default () {
        return null
      }
    },
    type: {
      type: Number,
      default () {
        return 4
      },
    },
    isAll: {
      type: Boolean,
      default () {
        return false
      },
    },
    width: {
      type: Number,
      default () {
        return 180
      }
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
  },
  created () {
    this.initiData();
  },
  methods: {
    initiData () {
      switch (this.type) {
        case 1:
          this.getProjStateList()
          break;
        case 2:
          this.getTaskStateList()
          break;
        case 3:
          this.getCheckStateList()
          break;
        case 6:
          this.getUnitType()
          break;
        case 7:
          this.getReportYearList()
          break;
        case 8:
          this.getYearList()
          break;
        case 10:
          this.getBatchSelectItem()
          break;
        case 11:
          this.getApplyMoneySelect()
          break;
        case 12:
          this.getIsSelect()
          break;
        case 13:
          this.getAuditTypeSelect()
          break;
        case 14:
          this.getAuditMethodSelect()
          break;
        case 15:
          this.getAuditResultSelect()
          break;
        case 16:
          this.getSexSelect()
          break;
      }
    },
    getIsSelect () {
      let arr = []
      arr.push({ title: '是', key: '1' })
      arr.push({ title: '否', key: '0' })
      this.selectArray = arr
      this.loadValue()
    },
    getSexSelect () {
      let arr = []
      arr.push({ title: '男', key: '男' })
      arr.push({ title: '女', key: '女' })
      this.selectArray = arr
      this.loadValue()
    },
    getAuditTypeSelect () {
      let arr = []
      arr.push({ title: '项目审核', key: '1' })
      arr.push({ title: '任务书审核', key: '2' })
      arr.push({ title: '中期考核审核', key: '3' })
      arr.push({ title: '结题审核', key: '4' })
      arr.push({ title: '论文审核', key: '5' })
      this.selectArray = arr
      this.loadValue()
    },
    getAuditMethodSelect () {
      let arr = []
      arr.push({ title: '审核', key: '1' })
      arr.push({ title: '终审', key: '5' })
      this.selectArray = arr
      this.loadValue()
    },
    getAuditResultSelect () {
      let arr = []
      arr.push({ title: '待审核', key: '1' })
      arr.push({ title: '审核通过', key: '10' })
      arr.push({ title: '审核不通过', key: '20' })
      arr.push({ title: '返回修改', key: '30' })
      this.selectArray = arr
      this.loadValue()
    },
    getApplyMoneySelect () {
      let arr = []
      arr.push({ title: '1', key: 1 + '' })
      arr.push({ title: '2', key: 2 + '' })
      this.selectArray = arr
      this.loadValue()
    },
    getReportYearList () {
      this.$api.batch.getCurrentReportYearList({ projType: getType() }).then(({ data = {} }) => {
        if (data) {
          this.selectArray = data.list
          this.selected = data.value + ''
          this.loadValue()
        }
      }).catch(() => { });
    },
    getYearList () {
      var date = new Date;
      var now = date.getFullYear();
      let arr = []
      for (let i = now + 1; i > now - 9; i--) {
        arr.push({ title: i + '年', key: i + '' })
      }
      this.selectArray = arr
      this.loadValue()
    },
    getBatchSelectItem () {
      let arr = []
      for (let i = 1; i < 6; i++) {
        arr.push({ title: '第' + i + '批', key: i + '' })
      }
      this.selectArray = arr
      this.loadValue()
    },
    getProjStateList () {
      this.$api.base.getProjStateList({}).then(({ data = {} }) => {
        if (data) {
          this.selectArray = data
          this.loadValue()
        }
      }).catch(() => { })
    },
    getTaskStateList () {
      this.$api.base.getTaskStateList({}).then(({ data = {} }) => {
        if (data) {
          this.selectArray = data
          this.loadValue()
        }
      }).catch(() => { })
    },
    getCheckStateList () {
      this.$api.base.getCheckStateList({}).then(({ data = {} }) => {
        if (data) {
          this.selectArray = data
          this.loadValue()
        }
      }).catch(() => { })
    },
    getUnitType () {
      this.$api.unit.getUnitTypes().then(({ data = {} }) => {
        if (data) {
          this.selectArray = data
          this.loadValue()
        }
      }).catch(() => { })
    },
    selectChange (value) {
      this.$emit("input", value);
      var newArr = this.selectArray.filter(x => x.key == value);
      if (value && !!newArr && newArr.length > 0) {
        var text = !!value ? newArr[0].title : ''
        this.$emit('changeTitle', text)
      }
      this.$emit("change");
    },
    loadValue () {
      if (this.isAll) {
        this.selectArray.unshift(this.defaultValue)
      }
      if (!!!this.selected) {
        if (!!this.value) {
          this.selected = this.value + ''
        } else {
          if (this.selectArray.length > 0)
            this.selected = this.selectArray[0].key
          else
            this.selected = ''
        }
      }
      this.$emit("input", this.selected)
    }
  },
  watch: {
    value: {
      handler (value) {
        if (!!!value)
          this.selected = ''
        else
          this.selected = value + ''
        this.$emit("input", this.selected)
      },
    },
  }
};
</script>