新增标签插件（颜色显示）

src/app-register.ts

@@ -105,6 +105,7 @@ import AppSortBar from './components/app-sort-bar/app-sort-bar.vue';
 import AppAfterTime from './components/app-after-time/app-after-time.vue';
 import AppInputIp from './components/app-input-ip/app-input-ip.vue';
 import Loadding  from  './directive/loadding/loadding';
+import AppColorSpan  from  './components/app-color-span/app-color-span.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -225,5 +226,7 @@ export const AppComponents = {
         v.component('app-after-time', AppAfterTime);
         v.component('app-input-ip', AppInputIp);
         v.directive('loading',Loadding);
+        v.component('app-color-span', AppColorSpan);
+
     },
 };
\ No newline at end of file

src/components/app-color-span/app-color-span.vue

+<template>
+    <div class="app-color-span">
+        <span v-if="color" :style="{ color:textColor }">{{ text ? text : '---' }}</span>
+        <template v-else>
+            <template v-if="dataValue && dataValue.length > 0">
+                <span v-for="(textItem,index) of dataValue" :key="index" class="text-color" :style="{ backgroundColor:textItem.color }">
+                {{ textItem.srfmajortext ? textItem.srfmajortext : '---'}}
+                </span>
+            </template>
+            <span v-else>---</span>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';
+import CodeListService from '@codelist/codelist-service';
+import { Subject, Subscription } from 'rxjs';
+@Component({
+})
+export default class AppColorSpan extends Vue {
+
+    /**
+     * 当前值
+     *
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    @Prop() public value: any;
+
+    /**
+     * 当前表单项名称
+     *
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    @Prop() public name?: any;
+
+    /**
+     * 代码表类型
+     *
+     * @type {string}
+     * @memberof AppColorSpan
+     */
+    @Prop() public codelistType?: string;
+
+    /**
+     * 传入表单数据
+     *
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    @Prop() public data?: any;
+
+    /**
+     * 局部上下文导航参数
+     *
+     * @type {any}
+     * @memberof AppColorSpan
+     */
+    @Prop() public localContext!: any;
+
+    /**
+     * 局部导航参数
+     *
+     * @type {any}
+     * @memberof AppColorSpan
+     */
+    @Prop() public localParam!: any;
+
+    /**
+     * 视图上下文
+     *
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    @Prop() public context!: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    @Prop() public viewparams!: any;
+
+
+    /**
+     * 颜色标识
+     * 
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    @Prop() color:any;
+
+
+    /**
+     * 颜色
+     * 
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+     public textColor:any;
+
+    /**
+     * 显示值
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    public text: any = '';
+
+    /**
+     * 数据数组
+     * 
+     * @type {*}
+     * @memberof AppColorSpan
+     */
+    public dataValue:Array<any> = [];
+
+    /**
+     * 监听value
+     * 
+     * @memberof AppColorSpan
+     */
+    @Watch('value')
+    public valueChange(newVal:any,oldVal:any){
+        if(newVal !== oldVal){
+            this.load();
+        }
+    }
+
+    /**
+     * 加载数据
+     * 
+     * @memberof AppColorSpan
+     */
+    public load(){
+        if(this.color){
+            this.text = this.value;
+            this.textColor = this.data[this.color];
+        }else{
+            this.dataValue = JSON.parse(this.value);
+        }
+    }
+
+    /**
+     * vue  生命周期
+     *
+     * @memberof AppColorSpan
+     */
+    public created() {
+        this.load();
+    }
+}
+</script>
+
+<style lang="less">
+    .text-color{
+        padding: 2px;
+        margin: 6px;
+        border-radius: 4px;
+    }
+</style>
\ No newline at end of file