下拉列表框 -- 代码表类型和属性进行匹配，转换

src/components/dropdown-list-dynamic/dropdown-list-dynamic.vue

@@ -123,6 +123,12 @@ export default class DropDownListDynamic extends Vue {
      */
     @Prop() public placeholder?: string;
 
+    /**
+     * 属性类型
+     * @type {string}
+     * @memberof DropDownList
+     */
+    @Prop() public valueType?: string;
 
     /**
      * 计算属性(当前值)
@@ -199,9 +205,10 @@ export default class DropDownListDynamic extends Vue {
       if(this.tag && Object.is(this.codelistType,"STATIC")){
           const codelist = this.$store.getters.getCodeList(this.tag);
           if (codelist) {
-              this.items = [...JSON.parse(JSON.stringify(codelist.items))];
+              let items: Array<any> = [...JSON.parse(JSON.stringify(codelist.items))];
+              this.formatCodeList(items);
           } else {
-              console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+              console.log(`----${this.tag}----代码表不存在`);
           }
       }else if(this.tag && Object.is(this.codelistType,"DYNAMIC")){
           // 公共参数处理
@@ -211,9 +218,10 @@ export default class DropDownListDynamic extends Vue {
           let _context = data.context;
           let _param = data.param;
           this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
-              this.items = res;
+                let items: Array<any> = [...res];
+                this.formatCodeList(items);
           }).catch((error:any) => {
-              console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+              console.log(`----${this.tag}----代码表不存在`);
           });
       }
     }
@@ -234,14 +242,51 @@ export default class DropDownListDynamic extends Vue {
                 let _context = data.context;
                 let _param = data.param;
                 this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
-                    this.items = res;
+                    let items: Array<any> = [...res];
+                    this.formatCodeList(items);
                 }).catch((error:any) => {
-                    console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+                    console.log(`----${this.tag}----代码表不存在`);
                 });
             }
         }
     }
-
+    /**
+     * 代码表类型和属性匹配
+     * 
+     * @param {*} items
+     * @memberof DropDownList
+     */
+    public formatCodeList(items: Array<any>){
+        let matching: boolean = true;
+        this.items = [];
+        try{
+            if(this.valueType){
+                items.forEach((item: any)=>{
+                    const type = this.$util.typeOf(item.value);
+                    if(type != this.valueType){
+                        matching = false;
+                        if(type == 'number'){
+                            item.value = item.value.toString();
+                        }else{
+                            if(item.value.indexOf('.') == -1){
+                                item.value = parseInt(item.value);
+                            }else{
+                                item.value = parseFloat(item.value);
+                            }
+                        }
+                    }
+                    this.items.push(item);
+                });
+                if(!matching){
+                    console.warn(`代码表 ${ this.tag } 值类型和属性类型不匹配，已自动强制转换，请修正代码表值类型和属性类型匹配`);
+                }
+            }else{
+                this.items = items;
+            }
+        }catch(error){
+            console.warn('代码表值类型和属性类型不匹配，自动强制转换异常，请修正代码表值类型和属性类型匹配');
+        }
+    }
 }
 </script>
 

src/components/dropdown-list/dropdown-list.vue

@@ -8,7 +8,7 @@
         :filterable="filterable === true ? true : false"
         @on-open-change="onClick"
         :placeholder="$t('components.dropDownList.placeholder')">
-        <i-option v-for="(item, index) in items" :key="index" :value="item.value.toString()">{{($t('codelist.'+tag+'.'+item.value)!== ('codelist.'+tag+'.'+item.value))?$t('codelist.'+tag+'.'+item.value) : item.text}}</i-option>
+        <i-option v-for="(item, index) in items" :key="index" :value="item.value">{{($t('codelist.'+tag+'.'+item.value)!== ('codelist.'+tag+'.'+item.value))?$t('codelist.'+tag+'.'+item.value) : item.text}}</i-option>
     </i-select>
 </template>
 
@@ -116,7 +116,7 @@ export default class DropDownList extends Vue {
      * @memberof AppFormDRUIPart
      */
     @Prop() public viewparams!: any;
-    
+
     /**
      * 是否禁用
      * @type {any}
@@ -139,6 +139,12 @@ export default class DropDownList extends Vue {
      */
     @Prop() public placeholder?: string;
 
+    /**
+     * 属性类型
+     * @type {string}
+     * @memberof DropDownList
+     */
+    @Prop() public valueType?: string;
 
     /**
      * 计算属性(当前值)
@@ -157,7 +163,7 @@ export default class DropDownList extends Vue {
      * @memberof DropDownList
      */
     get currentVal() {
-        return this.itemValue ? this.itemValue.toString() : undefined;
+        return this.itemValue;
     }
 
     /**
@@ -199,9 +205,10 @@ export default class DropDownList extends Vue {
       if(this.tag && Object.is(this.codelistType,"STATIC")){
           const codelist = this.$store.getters.getCodeList(this.tag);
           if (codelist) {
-              this.items = [...JSON.parse(JSON.stringify(codelist.items))];
+              let items: Array<any> = [...JSON.parse(JSON.stringify(codelist.items))];
+              this.formatCodeList(items);
           } else {
-              console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+              console.log(`----${this.tag}----代码表不存在`);
           }
       }else if(this.tag && Object.is(this.codelistType,"DYNAMIC")){
           // 公共参数处理
@@ -211,9 +218,10 @@ export default class DropDownList extends Vue {
           let _context = data.context;
           let _param = data.param;
           this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
-              this.items = res;
+              let items: Array<any> = [...res];
+              this.formatCodeList(items);
           }).catch((error:any) => {
-              console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+              console.log(`----${this.tag}----代码表不存在`);
           });
       }
     }
@@ -234,14 +242,52 @@ export default class DropDownList extends Vue {
                 let _context = data.context;
                 let _param = data.param;
                 this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
-                    this.items = res;
+                    let items: Array<any> = [...res];
+                    this.formatCodeList(items);
                 }).catch((error:any) => {
-                    console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
+                    console.log(`----${this.tag}----代码表不存在`);
                 });
             }
         }
     }
 
+    /**
+     * 代码表类型和属性匹配
+     * 
+     * @param {*} items
+     * @memberof DropDownList
+     */
+    public formatCodeList(items: Array<any>){
+        let matching: boolean = true;
+        this.items = [];
+        try{
+            if(this.valueType){
+                items.forEach((item: any)=>{
+                    const type = this.$util.typeOf(item.value);
+                    if(type != this.valueType){
+                        matching = false;
+                        if(type == 'number'){
+                            item.value = item.value.toString();
+                        }else{
+                            if(item.value.indexOf('.') == -1){
+                                item.value = parseInt(item.value);
+                            }else{
+                                item.value = parseFloat(item.value);
+                            }
+                        }
+                    }
+                    this.items.push(item);
+                });
+                if(!matching){
+                    console.warn(`代码表 ${ this.tag } 值类型和属性类型不匹配，已自动强制转换，请修正代码表值类型和属性类型匹配`);
+                }
+            }else{
+                this.items = items;
+            }
+        }catch(error){
+            console.warn('代码表值类型和属性类型不匹配，自动强制转换异常，请修正代码表值类型和属性类型匹配');
+        }
+    }
 }
 </script>