SelectValueToLabel.vue

<template>
  <span>{{currentLabel}}</span>
</template>

<script>
  import commonDepend from "~/mixin/commonDepend.js";
	import {mapActions} from 'vuex'
  export default {
    inject: {
      root: {
        default: () => null
      }
    },

    mixins: [commonDepend],
    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
      },
      // 下拉列表显示label和value，eg：value-label
      isShowKeyAndLabel: {
        type: Boolean,
        default: false
      },
      // 下拉列表显示value，eg：value
      isShowKey: {
        type: Boolean,
        default: false
      },
      // 此对象为markset或者modifySet所在的对象，如果传了此对象可以标记当前对象下的字段为红色下划线
      markSetData: {
        type: Object,
        default: () => null
      },
      customModifykey: {
        type: String,
        default: null
      },
      // 总下拉列表数据中过滤出以下数组key
      filterKey: {
        type: Array,
        default: () => []
			},
			// 总下拉列表数据中排除以下数组key
      expKey:{
        type: Array,
        default: () => []
      },
      // 码表语言类型-可选值：英文（en）-默认;中文（cn）；
      uil: {
        type: String,
        default: 'EN'
      },
      placeholder:{
        type: String,
        default: null
      },
      // 排序方式--值有两种：COD和SRT
      sort: {
        type: String,
        default: 'COD'
      }
    },
    data() {
      return {
        dbCodeList: [],
				timer: {}
      };
    },
    computed: {
      model: {
        get() {
          return this.value;
        },
        set(newVal) {
          this.$emit("input", newVal);
        }
      },
      mode() {
        return this.$store.state.Status.mode;
      },
      currentLabel () {
        let label = ''
        let labelAndValue = ''
        this.dbCodeList.map((item) => {
          if (item.value === this.value) {
            label = item.label
            labelAndValue = item.value + ' - ' + item.label
          }
        })
        if (this.isShowKeyAndLabel) {
          return labelAndValue || this.value
        }
        return label || this.value
      }
    },
    watch: {
      dbCode: {
        handler(newVal) {
          this.init()
        }
      },
      filterKey: {
        handler(newVal) {
          this.init()
        }
			},
			expKey: {
        handler(newVal) {
          this.init()
        }
      },
    },
    mounted() {
      this.init();
    },
    methods: {
			...mapActions([
				'getDbCodeData'
			]),
      init() {
        if (this.dbCode) {
					let dbCode = this.dbCode.toUpperCase()
          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)
          } else {
						this.getDBCode();
						this.timer[`${dbCode}_${lang}_${this.sort}`] = setInterval(() => {
							this.callback()
						}, 300)
          }
        } else {
          this.dbCodeList = this.filterList(this.code)
        }
			},
			callback() {
				let localCodes = localStorage.getItem("localCodes");
				let codesData = {};
				if (localCodes) {
					codesData = JSON.parse(localCodes);
				}
				let lang = this.tempUil ? this.tempUil : (this.root && this.root.lang ? this.root.lang : this.uil)
				// 判断缓存中是否存在此码表，存在去缓存，不存在重新拉取接口
				let dbCode = this.dbCode.toUpperCase()
				if (codesData[`${dbCode}_${lang}_${this.sort}`] && this.isCache) {
					let curList = codesData[`${dbCode}_${lang}_${this.sort}`];
					this.dbCodeList = this.filterList(curList)
					if (this.timer[`${dbCode}_${lang}_${this.sort}`]) {
						clearInterval(this.timer[`${dbCode}_${lang}_${this.sort}`])
						this.timer[`${dbCode}_${lang}_${this.sort}`] = null
					}
				}
			},
      formatShowLabel(item) {
        if (this.isShowKey) {
          return item.value
        }
        if (this.isShowKeyAndLabel) {
          return item.value + ' - ' + item.label
        }
        return 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() {
        if (!this.customModifykey) {
          // 添加isModify属性
          this.changeModify()
        }
      },
      getDBCode() {
        let lang = this.root && this.root.lang ? this.root.lang : this.uil
        let args = {
          codeType: this.dbCode.toUpperCase(),
          uil: lang,
          sort: this.sort,
				};
				this.getDbCodeData({
					args,
					isCache: this.isCache
				})
      }
    }
  };
</script>

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