新增单选项自定义插件

app_Web/src/components/app-radio-button/app-radio-button.vue

+<template>
+  <el-radio-group class="app-radio-button" v-model="value">                 
+    <el-radio-button v-for="(_item,index) in items" :key = "index" :label="_item.value" :disabled="isDisabled || _item.disabled">
+        <span>{{Object.is(codelistType,'STATIC') ? $t('codelist.'+tag+'.'+_item.value) : _item.text}}</span>
+    </el-radio-button>
+  </el-radio-group>
+</template>
+<script lang = 'ts'>
+import { Component, Vue, Prop, Model,Watch } from 'vue-property-decorator';
+import CodeListService from "@/codelist/codelist-service";
+
+@Component({})
+export default class AppRadioButton extends Vue {
+    /**
+     * 代码表服务对象
+     *
+     * @type {CodeListService}
+     * @memberof AppRadioButton
+     */  
+    public codeListService:CodeListService = new CodeListService({ $store: this.$store });
+
+    /**
+     * 双向绑定值
+     *
+     * @type {*}
+     * @memberof AppRadioButton
+     */
+    @Model('change') item?: any;
+
+    /**
+     * 获取值
+     *
+     * @memberof AppRadioButton
+     */
+    get value() {
+        return this.item;
+    }
+
+    /**
+     * 设置值
+     *
+     * @memberof AppRadioButton
+     */
+    set value(val: any) {
+        this.$emit('change', val);
+    }
+
+    /**
+     * 代码表标识
+     *
+     * @type {string}
+     * @memberof AppRadioButton
+     */
+    @Prop() public tag?: string;
+
+    /**
+     * 代码表类型
+     *
+     * @type {string}
+     * @memberof AppRadioButton
+     */
+    @Prop() public codelistType?: string;
+
+    /**
+     * 传入表单数据
+     *
+     * @type {*}
+     * @memberof AppRadioButton
+     */
+    @Prop() public data?: any;
+
+    /**
+     * 监听表单数据变化
+     * 
+     * @memberof AppRadioButton
+     */
+    @Watch('data',{immediate:true,deep:true})
+    onDataChange(newVal: any, oldVal: any) {
+      if(newVal){
+          if(this.tag && this.codelistType == 'DYNAMIC'){
+              // 公共参数处理
+              let data: any = {};
+              this.handlePublicParams(data);
+              // 参数处理
+              let _context = data.context;
+              let _param = data.param;
+              console.log("app-radio-group")
+              this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
+                  this.items = res;
+              }).catch((error:any)=>{
+                  console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+              })
+          }
+      }
+    }
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppRadioButton
+     */
+    @Prop() public disabled?: boolean;
+
+    /**
+     * 局部上下文导航参数
+     * 
+     * @type {any}
+     * @memberof AppRadioButton
+     */
+    @Prop() public localContext!:any;
+
+    /**
+     * 局部导航参数
+     * 
+     * @type {any}
+     * @memberof AppRadioButton
+     */
+    @Prop() public localParam!:any;
+
+    /**
+     * 视图上下文
+     *
+     * @type {*}
+     * @memberof AppRadioButton
+     */
+    @Prop() public context!: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof AppRadioButton
+     */
+    @Prop() public viewparams!: any;
+
+    /**
+     * 属性名称
+     *
+     * @type {string}
+     * @memberof AppRadioButton
+     */
+    @Prop() name?: string;
+
+    /**
+     * 是否禁用
+     *
+     * @readonly
+     * @memberof AppRadioButton
+     */
+    get isDisabled() {
+        if (this.disabled) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * 代码表
+     *
+     * @type {any[]}
+     * @memberof AppRadioButton
+     */
+    public items: any[] = [];
+
+    /**
+     * 公共参数处理
+     *
+     * @param {*} arg
+     * @returns
+     * @memberof AppRadioButton
+     */
+    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);
+        }
+    }
+
+    /**
+     * vue  生命周期
+     *
+     * @memberof AppRadioButton
+     */
+    public created() {
+        
+        if(this.tag && this.codelistType == 'STATIC'){
+            this.items  = this.$store.getters.getCodeListItems(this.tag);
+        }else if(this.tag && 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.items = res;
+            }).catch((error:any)=>{
+                console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+            })
+        }
+    }
+}
+</script>
+<style lang="less">
+.app-radio-button {
+    overflow: auto;
+    .el-radio-button__inner{
+        padding: 10px 14px;
+    }
+}
+</style>
\ No newline at end of file

app_Web/src/user-register.ts

 import AppListItemlayoutpanel from  './components/app-list-itemlayoutpanel/app-list-itemlayoutpanel.vue';
 import AppDataCard from  './components/app-data-card/app-data-card.vue';
 import AppCalendarItemlayoutpanel from  './components/app-calendar-itemlayoutpanel/app-calendar-itemlayoutpanel.vue';
+import AppRadioButton from  './components/app-radio-button/app-radio-button.vue';
+
 export const UserComponent = {
 
     install(v: any, opt: any) {
         v.component('app-list-itemlayoutpanel', AppListItemlayoutpanel);
         v.component('app-data-card', AppDataCard);
         v.component('app-calendar-itemlayoutpanel', AppCalendarItemlayoutpanel);
+        v.component('app-radio-button', AppRadioButton);
     }
 };
\ No newline at end of file