数字类型表单验证

src/modules/channels/index.vue

@@ -8,7 +8,13 @@
     .base_block {
         width: 30%;
     }
-
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+    }
+    input[type="number"]{
+        -moz-appearance: textfield;
+    }
 </style>
 <template>
     <div>
@@ -88,14 +94,14 @@
                                           :disabled="!isEdit"/>
                             </el-form-item>
                             <el-form-item class="base_block" label="渠道号" prop="channelId" label-width="40%">
-                                <el-input class="el_input_box" v-model="channel.baseConfDetail.channelId"
+                                <el-input type='number' class="el_input_box" v-model.number="channel.baseConfDetail.channelId"
                                           :disabled="!isEdit"/>
                             </el-form-item>
                             <el-form-item class="base_block" label="channel_code" prop="channelCode" label-width="40%">
                                 <el-input class="el_input_box" v-model="channel.baseConfDetail.channelCode"
                                           :disabled="!isEdit"/>
                             </el-form-item>
-                            <el-form-item class="base_block" label="产品id" prop="productId" label-width="40%">
+                            <el-form-item class="base_block" label="产品id" label-width="40%">
                                 <el-input class="el_input_box" v-model="channel.baseConfDetail.productId"
                                           :disabled="!isEdit"/>
                             </el-form-item>
@@ -128,7 +134,7 @@
                         <el-form :model="checkedItemsResultVO" ref="checkedItemsForm" :rules="checkedItemsRules"
                                  :inline="true" size="medium">
                             <el-form-item style="width:25%" label="校验节点" prop="point" label-width="30%">
-                                <el-select v-model="checkedItemsResultVO.point" placeholder="请选择" clearable
+                                <el-select v-model.number="checkedItemsResultVO.point" placeholder="请选择" clearable
                                            class="filter-item" style="width:100px" @change="checkedItemsSelected">
                                     <el-option v-for="item in staticData.importCheckPointInit" :key="item.value"
                                                :label="item.name" :value="item.value"/>
@@ -291,15 +297,14 @@
                 },
                 baseConfRules: {
                     channelName: [{required: true, message: '请输入渠道名称', trigger: 'blur'}],
-                    channelId: [{required: true, message: '请输入渠道id', trigger: 'blur'}],
+                    channelId: [{type:'number', required: true, message: '请输入渠道号', trigger: 'blur'}],
                     channelCode: [{required: true, message: '请输入渠道code', trigger: 'blur'}],
-                    productId: [{required: true, message: '请输入产品id', trigger: 'blur'}],
                     aesKey: [{required: true, message: '请输入aesKey', trigger: 'blur'}],
                     md5Key: [{required: true, message: '请输入md5Key', trigger: 'blur'}],
                     isStandardChannel: [{required: true, message: '请输入是否标准API', trigger: 'blur'}],
                 },
                 checkedItemsRules: {
-                    point: [{required: true, message: '请选择节点', trigger: 'change'}],
+                    point: [{type:'number', required: true, message: '请选择节点', trigger: 'change'}],
                 },
                 channels: [],
                 staticData: {
@@ -311,6 +316,7 @@
                 channel: {
                     baseConfDetail: {},
                     importCheckInfo: {
+                        channelId:'',
                         checkedItemsResult: [],//UI选择后的结果，或者编辑页面加载时 用户的数据
                     },
                     applyPrivilege: {
@@ -323,7 +329,7 @@
                 page: 1,
                 isCreate: false,
                 isEdit: true,
-                checkedItemsResultVO: {point: '', value: ''},
+                checkedItemsResultVO: {point: '', value: []},
                 activeName: 'queryPage',
             }
         },
@@ -459,6 +465,7 @@
                 this.$refs['checkedItemsForm'].validate(valid => {
                     if (valid) {
                         if (this.isCreate) {
+                            // 新增
                             if (!this.channel.baseConfDetail.channelId) {
                                 this.$notify({
                                     title: '失败',
@@ -472,8 +479,10 @@
                             }
                         }
                         // 保存进件项配置
+                        // 如果
                         if (this.checkedItemsResultVO) {
-                            if (this.channel.importCheckInfo.checkedItemsResult) {
+                            if (this.channel.importCheckInfo.checkedItemsResult.length > 0) {
+                                // 说明用户至少有一项
                                 for (let index in this.channel.importCheckInfo.checkedItemsResult) {
                                     let item = this.channel.importCheckInfo.checkedItemsResult[index]
                                     if (item.point === this.checkedItemsResultVO.point) {
@@ -481,10 +490,17 @@
                                     }
                                 }
                             } else {
+                                // 说明用户一项都没有 或者是新增
                                 this.channel.importCheckInfo.checkedItemsResult.point = this.checkedItemsResultVO.point
                                 this.channel.importCheckInfo.checkedItemsResult.checkedItems = this.checkedItemsResultVO.value
+                                console.log(this.channel.importCheckInfo.checkedItemsResult)
+                                // console.log(this.channel.importCheckInfo.checkedItems)
                             }
                         }
+                        // console.log(this.channel.importCheckInfo.checkedItemsResult)
+                        // console.log(this.channel.importCheckInfo.checkedItemsResult.point)
+                        // console.log(this.channel.importCheckInfo.checkedItemsResult.checkedItems)
+                        console.log(this.channel.importCheckInfo)
                         saveApplyCheckConf(this.channel.importCheckInfo).then(rep => {
                             this.$notify({
                                 title: '成功',