codelist.vue

<template>
    <div class="codelist">
        <span v-if="ifEmpty">{{emptytext}}</span>
        <template v-if="!ifEmpty">
          <template v-for="(item, index) in items">
              <div class="codelist-item" :key="index" :style="{ color: item.color, borderColor: item.color }">
                    <i v-if="item.iconcls" :class="item.iconcls"></i>
                    <img v-if="item.icon" :src="getIcon(item.icon)" />
                    <span :class="item.class">
                        {{ item.text }}
                    </span>
                    <span v-if="index != items.length-1">{{ textSeparator }}</span>
               </div>
          </template>
        </template>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
import CodeListService from "@/codelist/codelist-service";
import { Environment } from '@/environments/environment';

@Component({})
export default class CodeList extends Vue {
    /**
     * 代码表服务对象
     *
     * @type {CodeListService}
     * @memberof CodeList
     */  
    public codeListService:CodeListService = new CodeListService();

    /**
     * 代码表标识
     *
     * @type {string}
     * @memberof CodeList
     */
    @Prop() public tag!: string;

    /**
     * 代码表类型
     *
     * @type {string}
     * @memberof CodeList
     */
    @Prop() public codelistType?: string;

    /**
     * 当前值
     * @type {any}
     * @memberof CodeList
     * 
     */
    @Prop() public value?: string;

    /**
     * 获取或模式
     * @type {boolean}
     * @memberof CodeList
     */
    @Prop({default:"STR"}) public renderMode?: string;

    /**
     * 文本分隔符
     * @type {boolean}
     * @memberof CodeList
     */
    @Prop({default:'、'}) public textSeparator?: string;

    /**
     * 值分隔符
     * @type {boolean}
     * @memberof CodeList
     */
    @Prop({default:','}) public valueSeparator?: string;

    /**
     * 传入表单数据
     *
     * @type {*}
     * @memberof CodeList
     */
    @Prop() public data?: any;

    /**
     * 局部上下文导航参数
     * 
     * @type {any}
     * @memberof CodeList
     */
    @Prop() public localContext!:any;

    /**
     * 局部导航参数
     * 
     * @type {any}
     * @memberof CodeList
     */
    @Prop() public localParam!:any;

    /**
     * 视图上下文
     *
     * @type {*}
     * @memberof CodeList
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof CodeList
     */
    @Prop() public viewparams!: any;

    /**
     * 是否为空
     *
     * @memberof CodeList
     */
    public ifEmpty:boolean = false;

    /**
     * 显示数据集合
     *
     * @type {any[]}
     * @memberof CodeList
     */
    public items: any[] = [];

    /**
     * vue  生命周期
     *
     * @memberof CodeList
     */
    public created() {
        this.dataHandle();
    }

    /**
     * 空值文本
     * @type {string}
     * @memberof CodeList
     */
    public emptytext: string = '';

    /**
     * 数据值变化
     *
     * @param {*} newval
     * @param {*} val
     * @returns
     * @memberof CodeList
     */
    @Watch('value')
    public onValueChange(newVal: any, oldVal: any) {
        this.dataHandle();
    }

    /**
     * 监听表单数据变化
     * 
     * @memberof CodeList
     */
    @Watch('data',{immediate:true,deep:true})
    onDataChange(newVal: any, oldVal: any) {
        if(newVal){
            this.dataHandle();
        }
    }

    /**
     * 数据处理
     *
     * @memberof CodeList
     */
    private dataHandle(){
      let _this = this;
      // 空值判断
      if(Object.is(this.$util.typeOf(this.value), 'undefined') || Object.is(this.$util.typeOf(this.value), 'null')){
          this.ifEmpty = true;
          return;
      }
      this.ifEmpty = false;
      // 动态代码表处理
      if (Object.is(this.codelistType, "DYNAMIC")) {
          // 公共参数处理
          let data: any = {};
          this.handlePublicParams(data);
          // 参数处理
          let _context = data.context;
          let _param = data.param;
          this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
              _this.setItems(res, _this);
          }).catch((error: any) => {
              console.log(`----${_this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
          });
      // 静态处理
      } else if(Object.is(this.codelistType, "STATIC")){
          const codelist = this.$store.getters.getCodeList(this.tag);
          if (codelist) {
              this.emptytext = codelist.emptytextLanRes ? this.$t(codelist.emptytextLanRes, codelist.emptytext) : codelist.emptytext;
              _this.setItems(codelist.items, _this);
          }
      }
    }

    /**
     * 解析代码表和vlaue，设置items
     *
     * @private
     * @param {any[]} items 代码表数据
     * @param {*} value
     * @returns {*}
     * @memberof CodeList
     */
    private setItems(items: any[], _this: any){
        if (items) {
            let result:any = [];
            if(Object.is(_this.renderMode,"NUM")){
                items.map((_item: any, index: number)=>{
                    const nValue = parseInt((_this.value as any), 10);
                    const codevalue = _item.value;
                    if((parseInt(codevalue, 10) & nValue) > 0){
                        result.push(_item);
                    } 
                });
            } else {
                let values: any[] = Object.is(_this.$util.typeOf(_this.value), 'number') ? [_this.value] : [...(_this.value as any).split(_this.valueSeparator)];
                values.map((value:any ,index: number)=>{
                    const item = _this.getItem(items, value); 
                    if(item){
                      result.push(item);
                    } 
                });
            }
            // 设置items
            if(result.length != 0){
                _this.items = result;
            }else{
                _this.items = [{text:_this.value}];
            }
        }
    }

    /**
     * 获取代码项
     *
     * @private
     * @param {any[]} items
     * @param {*} value
     * @returns {*}
     * @memberof CodeList
     */
    private getItem(items: any[], value: any): any {
        let result: any = {};
        const arr: Array<any> = items.filter(item => {return item.value == value});
        if (arr.length !== 1) {
            return undefined;
        }
        result = { ...arr[0] };
        if(Object.is(this.codelistType,'STATIC')){
            let item = JSON.parse(JSON.stringify(result));
            if (item.textLanRes) {
                value.text = this.$t(item.textLanRes, item.text);
            }
            return item;
        }else{
            return result;
        }
    }

    /**
     * 公共参数处理
     *
     * @param {*} arg
     * @returns
     * @memberof CodeList
     */
    public handlePublicParams(arg: any) {
        // 合并表单参数
        arg.param = this.viewparams ? JSON.parse(JSON.stringify(this.viewparams)) : {};
        arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
        // 附加参数处理
        if (this.localContext && Object.keys(this.localContext).length >0) {
            let _context = this.$util.computedNavData(this.data,arg.context,arg.param,this.localContext);
            Object.assign(arg.context,_context);
        }
        if (this.localParam && Object.keys(this.localParam).length >0) {
            let _param = this.$util.computedNavData(this.data,arg.param,arg.param,this.localParam);
            Object.assign(arg.param,_param);
        }
    }

    /**
     * 获取图片路径
     *
     * @param {*} arg
     * @returns
     * @memberof CodeList
     */
    public getIcon(arg:any){
       if(!arg){
           return;
        }
       if(Object.prototype.toString.call(arg)=="[object String]"){
           try {
               let targetData:any = JSON.parse(arg);
               if(Object.prototype.toString.call(targetData) == "[object Array]"){
                    if(targetData && targetData.length >0){
                        let fileId:string = targetData[0] && targetData[0].id;
                        return Environment.BaseUrl + Environment.ExportFile + fileId;
                    }
                }else if(Object.prototype.toString.call(targetData) === '[object Object]'){
                        let fileId:string = targetData && targetData.id;
                        return Environment.BaseUrl + Environment.ExportFile + fileId;
                }
           } catch (error) {
               return arg;
           }
       }else if(Object.prototype.toString.call(arg) == "[object Array]"){
           if(arg && arg.length >0){
               let fileId:string = arg[0] && arg[0].id;
               return Environment.BaseUrl + Environment.ExportFile + fileId;
           }
       }else if(Object.prototype.toString.call(arg) === '[object Object]'){
            let fileId:string = arg && arg.id;
            return Environment.BaseUrl + Environment.ExportFile + fileId;
       }else{
            return arg;
       }
    }

}
</script>

<style lang='scss'>
@import "./codelist.scss";
</style>