tanghe-report/report-ui/src/components/codeSelect.vue

/*
* 使用方式 <code-select v-model="params.enableFlag" dictname="ENABLE_FLAG" @changed="handler" placeholder="启用状态" style="width: 120px;"/>
* 根据/data/basecode.js中字典值，生成下拉列表
* @property dictname ENABLE_FLAG
* @property placeholder
* @property style
*/

<template>
  <el-select :name="inputName" v-model="selectValue" :disabled="disabled" :placeholder="placeholder" :style="mystyle" clearable class="filter-item code-selected" @change="selectChange" @visible-change="drowShow">
    <el-option v-for="(item,index) in optionList" :key="index" :label="item[label]" :value="item[valWord]" />
  </el-select>
</template>

<script>
  import request from '@/api/axios'
  import { getStorageItem } from '@/utils/storage'
  export default {
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      //用localStrage中的basecode生成下拉
      dictname: {
        type: String,
        default: ''
      },
      //远程请求，生成下拉
      remoteurl: {
        type: String,
        default: ''
      },
      remoteParams: {
        type: Object,
        default: ()=>{}
      },
      inputName: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      mystyle: {
        type: String,
        default: 'width: 100px'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      label:{
        type: String,
        default: 'label'
      },
      valWord:{
        type: String,
        default: 'value'
      },
    },
    data () {
      return {
        selectValue: '',
        optionList: [],
        dictList: [],
      }
    },
    watch: {
      value:{
        handler(newValue, oldValue){
          if (typeof newValue === 'string') {
            this.selectValue = newValue
          } else {
            this.selectValue = this.parseString(newValue);
          }
        },
        immediate: true
      },
    },
    computed: {},
    created () {
      if (this.dictname !== '') {
        this.optionList = this.getListFromBaseCode()
      }
      if (this.remoteurl !== '') {
        this.getListFromAjax()
      }
    },
    mounted () {},
    methods: {
      getListFromBaseCode() {
        let basecode = getStorageItem('queryForCodeSelect')
        let list = []
        if (!basecode.hasOwnProperty(this.dictname)) {
          return []
        }
        this.dictList = basecode[this.dictname]
        for (let i = 0; i < this.dictList.length; i++) {
          var codeItem = this.dictList[i]
          list.push({ 'value': codeItem.value.toString(), 'label': codeItem.label })
        }
        return list

      },

      getListFromAjax() {
        //将url中的参数转换成json，提交
        var reqData = {};
        /*var params = this.remoteurl.slice(this.remoteurl.indexOf('?') + 1).split('&');
        for (var i = 0; i < params.length; i++) {
            var map = params[i].split('=');
            var key = map[0];
            var val = map[1];
            if(','.indexOf(val)>0 && val.split(',').length>1){
              val = val.split(',');
            }
            reqData[map[0]] = val;
        }*/
        if(this.remoteParams != null){
          reqData = this.remoteParams;
        }
        request({
          url: this.remoteurl,
          method: 'post',
          data: reqData
        }).then(response => {
          if (response.repCode == '0000') {
            this.optionList = response.repData
          }
        })
      },

      selectChange (val) {
        this.$emit('input', val)
        var list = this.optionList
        for (var i in list) {
          var item = list[i]
          if (item[this.valWord] === val) {
            this.$emit('changed', item)
            break
          }
        }
      },
      drowShow (val) {
        this.$emit('show', val)
        this.$emit('click', val)
      }
    }
  }
</script>

<!--<style rel="stylesheet/scss" lang="less" scoped>-->
<!--</style>-->