CodeLabel.vue

<template>
  <span
    :id="id"
    v-bind="$attrs"
    v-on="$listeners"
    v-html="label"
  >  
  </span>
</template>

<script>
import { getCodetable } from "~/service/business/codeTable"

export default {
  props: {
    value: {
      type: [String, Array, Number],
      default: undefined,
    },
    id: {
      type: String,
      default: undefined,
    },
    code: {
      type: Array,
      default: function () {
        return [];
      },
    },
    dbCode: {
      type: String,
      default: undefined,
    },
  },
  data(){
    return {
      dbCodeList:[],
    }
  },
  watch:{
    //动态从服务器上渲染码表
    dbCode(){
      if(!this.dbCode){
        this.dbCodeList=[]
        return 
      }
      getDBCode()
    }
  },
  computed: {
    
    mode() {
      return this.$store.state.Status.mode;
    },
    isDisable: {
      get() {
        return this.mode === "display" || this.disabled;
      },
    },
    highlight() {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1;
    },
    attrs() {
      if (this.mode === "display" || this.disabled) {
        let { placeholder, ...rest } = this.$attrs;
        rest = { placeholder: " ", ...rest };
        return rest;
      }
      return this.$attrs;
    },
    combinCodes(){
      //取dbcode，和 setvalues的合集
      if(!this.dbCodeList || this.dbCodeList.length == 0){
        return []
      }
      return this.dbCodeList.filter(item=>{
        if(this.code && this.code.length){
          return this.code.findIndex(item2=>item.value == item2.value)>-1
        }
        return true
      })
    },
    label(){
      if(!this.value){
        return ""
      }
      if(this.dbCode && this.dbCodeList && this.dbCodeList.length>0){
        let em = this.combinCodes.find(item=>item.value == this.value)
        if(em){
          return em.label
        }else{
          return this.value
        }
      }
      if(this.code && this.code.length){
        let em = this.code.find(item=>item.value == this.value)
        if(em){
          return em.label
        }else{
          return this.value
        }
      }
      return this.value
    }
  },
  methods: {
    handleClick: function (e) {
      let ev = new Event("click", { bubbles: true });
      let node = e.target;
      if (node.parentElement) {
        node.parentElement.dispatchEvent(ev);
      }
    },
    getDBCode(){
      let args = {tbl:this.dbCode,lang:this.$store.state.I18n.lang.toUpperCase()}
      if(args.lang == "ZH"){
        args.lang = "CN";
      }
      getCodetable(args).then(rtnmsg=>{
        if(rtnmsg.respCode==SUCCESS){
          this.dbCodeList=rtnmsg.data
        }
      })
    }
  },
  mounted(){
    if(this.dbCode){
      this.getDBCode()
    }
  }
};
</script>

<style>
/* .el-select.highlight .el-input .el-input__inner {
  border-color: red;
} */
</style>