SelectCur.vue

<template>
	<el-select :id="id" v-model="model" :style="{'border-bottom': isShowRed ? `1px solid ${isShowRed}` : ''}" v-bind="$attrs" filterable v-bind:disabled="isDisable" :clearable="clearable" v-on="$listeners" :placeholder="placeholderEnable" @change="handleChange" @keyup.delete.native="deleteValue">
		<slot>
			<template>
				<el-option v-for="item in dbCodeList" :key="item.value" :label="formatShowLableForCur(item)" :value="item.value" >
			</el-option>
			</template>
		</slot>
	</el-select>
</template>

<script>
import { getSelectList } from "~/service/business/codeTable";
import commonDepend from "~/mixin/commonDepend.js";
import markSetShowRed from "~/components/business/componentMixins/markSetShowRed.js";

export default {
  inject: {
    root: {
      default: () => null
    }
  },

  mixins: [commonDepend, markSetShowRed],
  props: {
    value: {
      type: [String, Array, Number],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: undefined
    },
    // 静态显示codeTable中的字段
    code: {
      type: Array,
      default: function() {
        return [];
      }
    },
    // 动态获取下拉列表数据的关键字
    dbCode: {
      type: String,
      default: undefined
    },
    //是否从缓存中读取，false每次调接口
    isCache: {
      type: Boolean,
      default: true
    },
    // 此对象为markset或者modifySet所在的对象，如果传了此对象可以标记当前对象下的字段为红色下划线
    markSetData: {
      type: Object,
      default: () => null
    },
    customModifykey: {
      type: String,
      default: null
    },
    // 总下拉列表数据中过滤出以下数组key
    filterKey: {
      type: Array,
      default: () => []
    },
    // 码表语言类型-可选值：英文（en）-默认;中文（cn）；
    uil: {
      type: String,
      default: "EN"
    },
    placeholder: {
      type: String,
      default: null
		},
		// 总下拉列表数据中排除以下数组key
      expKey:{
        type: Array,
        default: () => []
      },
    // 排序方式--值有两种：COD和SRT
    sort: {
      type: String,
      default: "COD"
    },
    //下拉框是否跟随页面滚动
    isFixed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dbCodeList: [],
    };
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      }
    },
    mode() {
      return this.$store.state.Status.mode;
    },
    isDisable() {
      return this.mode === "display" || this.disabled;
    },
    placeholderEnable() {
      return this.isDisable ? "" : this.placeholder;
    },
    highlight() {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1;
    }
  },
  watch: {
    dbCode: {
      handler(newVal) {
        this.init();
      }
    },
    filterKey: {
      handler(newVal) {
        this.init();
      }
		},
		expKey: {
      handler(newVal) {
        this.init()
      }
    },
    disabled(newVal) {
      if (newVal) {
        this.resetValidate()
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.dbCode) {
        let localCodes = localStorage.getItem("localCodes");
        let codesData = {};
        if (localCodes) {
          codesData = JSON.parse(localCodes);
        }
        let lang = this.root && this.root.lang ? this.root.lang : this.uil;
        // 判断缓存中是否存在此码表，存在去缓存，不存在重新拉取接口
        if (codesData[`${this.dbCode}_${lang}_${this.sort}`] && this.isCache) {
          let curList = codesData[`${this.dbCode}_${lang}_${this.sort}`];
					this.dbCodeList = this.filterList(curList);
					this.formatDbCodeListForCur()
        } else {
          this.getDBCode();
        }
      } else {
				this.dbCodeList = this.filterList(this.code);
				this.formatDbCodeListForCur()
      }
		},
		formatDbCodeListForCur(){
				let list =[]
				this.dbCodeList.map((item)=>{
					list.push({
						label:item.label,
						value:item.value+"1"
					})
				})
				this.dbCodeList = list
		},
    //键盘按delete键清空内容
    deleteValue() {
      this.model = "";
		},
		formatShowLableForCur(item){
				let value = item.value
        return value.substr(0,value.length-1) + " " + item.label;
		},
    // 筛查数据
    filterList(list) {
      if (this.filterKey.length) {
        return list.filter(item => {
          return this.filterKey.includes(item.value);
        });
			}
			if(this.expKey.length){
          return list.filter((item) => {
            return !this.expKey.includes(item.value)
          })
        }
      return list;
    },
    handleChange(val) {
      if (!this.customModifykey) {
        // 添加isModify属性
        this.changeModify();
			}
			this.$emit('input', val.substr(0,val.length-1))
    },
    getDBCode() {
      let lang = this.root && this.root.lang ? this.root.lang : this.uil;
      let args = {
        codeType: this.dbCode.toUpperCase(),
        uil: lang,
        sort: this.sort
      };
      getSelectList(args).then(rtnmsg => {
        if (rtnmsg.respCode == SUCCESS) {
          let curList = rtnmsg.data.map(item => ({
            value: item.codeValue,
            label: item.codeName
          }));
					this.dbCodeList = this.filterList(curList);
					this.formatDbCodeListForCur()
          if (this.isCache) {
            let dataOld = localStorage.getItem("localCodes")
              ? JSON.parse(localStorage.getItem("localCodes"))
              : {};
            let localNewData = JSON.stringify({
              ...dataOld,
              [`${this.dbCode}_${lang}_${this.sort}`]: curList
            });
            localStorage.setItem("localCodes", localNewData);
          } else {
            let dataOld = localStorage.getItem("localCodes")
              ? JSON.parse(localStorage.getItem("localCodes"))
              : {};
            let localNewData = JSON.stringify({
              ...dataOld,
              [`${this.dbCode}_${lang}_${this.sort}`]: null
            });
          }
        }
      });
    }
  }
};
</script>

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