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++) {
        let codeItem = this.dictList[i];
        list.push({ value: codeItem.value.toString(), label: codeItem.label });
      }
      return list;
    },

    getListFromAjax() {
      //将url中的参数转换成json，提交
      let reqData = {};
      /*let params = this.remoteurl.slice(this.remoteurl.indexOf('?') + 1).split('&');
        for (let i = 0; i < params.length; i++) {
            let map = params[i].split('=');
            let key = map[0];
            let 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);
      let list = this.optionList;
      for (let i in list) {
        let 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>-->