<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>