入仓表单验证补充

src/views/ecw/order/warehousing/components/editDialog.vue

@@ -7,6 +7,7 @@
     >
       <el-tabs v-model="activeName" type="card" @tab-click="handleTabs">
         <el-tab-pane :label="edit ? '货物修改' : '货物入仓'" name="first">
+          <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
             <el-descriptions border :column="2">
               <el-descriptions-item>
                 <template slot="label"><span style="color: red">*</span> 中文品名</template>
@@ -19,12 +20,13 @@
               <el-descriptions-item label="品牌">
                 <template slot="label"><span style="color: red">*</span> 品牌</template>
                 <span v-if="false">{{ form.brand ? brand : '无' }}</span>
+                <el-form-item required label="" prop="brand" label-width="0">
                   <el-select
-                v-else v-model="form.brand"
+                    v-model="form1.brand"
                     placeholder="可修改"
                     filterable
                     @change="handleBrandChange"
-                allow-create>
+                    clearable>
                     <el-option
                       v-for="item in brandList"
                       :key="item.id"
@@ -32,6 +34,7 @@
                       :value="item.id">
                     </el-option>
                   </el-select>
+                </el-form-item>
               </el-descriptions-item>
               <el-descriptions-item label="是否备案">
                 <template slot="label"><span style="color: red">*</span> 是否备案</template>
@@ -53,8 +56,7 @@
                 <span v-else>{{ warehousing.weight }}</span>Kg
               </el-descriptions-item>
             </el-descriptions>
-          <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px">
-            <el-form-item label="材质">
+            <el-form-item label="材质" style="margin-top: 20px">
               <dict-selector :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.material"></dict-selector>
             </el-form-item>
             <el-form-item label="入仓时间" v-if="!edit">
@@ -173,23 +175,29 @@
         </el-tab-pane>
 
         <el-tab-pane label="添加新品名" name="second" v-if="!edit">
+          <el-form ref="form1" :model="form1" :rules="formRules" label-width="80px">
             <el-descriptions border :column="2">
               <el-descriptions-item>
                 <template slot="label"><span style="color: red">*</span> 中文品名</template>
+                <el-form-item required label="" prop="prodId" label-width="0">
                   <product-selector v-model="form1.prodId" @change="onProductChange"/>
+                </el-form-item>
               </el-descriptions-item>
               <el-descriptions-item>
                 <template slot="label"><span style="color: red">*</span> 英文品名</template>
+                <el-form-item required label="" prop="prodId" label-width="0">
                   <product-selector lang="En" v-model="form1.prodId" @change="onProductChange"/>
+                </el-form-item>
               </el-descriptions-item>
               <el-descriptions-item label="品牌">
                 <template slot="label"><span style="color: red">*</span> 品牌</template>
+                <el-form-item required label="" prop="brand" label-width="0">
                   <el-select
                     v-model="form1.brand"
                     placeholder="可修改"
                     filterable
                     @change="handleBrandChange"
-                allow-create>
+                    clearable>
                     <el-option
                       v-for="item in brandList"
                       :key="item.id"
@@ -197,6 +205,7 @@
                       :value="item.id">
                     </el-option>
                   </el-select>
+                </el-form-item>
               </el-descriptions-item>
               <el-descriptions-item label="是否备案">
                 <template slot="label"><span style="color: red">*</span> 是否备案</template>
@@ -208,8 +217,7 @@
               </el-descriptions-item>
               <el-descriptions-item label="填单参数">非填单货物</el-descriptions-item>
             </el-descriptions>
-          <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px">
-            <el-form-item label="材质">
+            <el-form-item label="材质" style="margin-top: 20px">
               <dict-selector :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form1.material"></dict-selector>
             </el-form-item>
             <el-form-item label="入仓时间">
@@ -358,7 +366,6 @@ import {DICT_TYPE, getDictDataLabel} from "@/utils/dict"
 import { orderWarehouseIn, orderWarehouseInUpdateApply } from '@/api/ecw/order'
 import { getFeeTypeByOrderProduct, getProductBrankPage } from '@/api/ecw/productBrank'
 import WorkFlow from "@/components/WorkFlow"
-import elSelect from '@/components/render/slots/el-select'
 import ProductSelector from "@/components/ProductSelector"
 
 export default {
@@ -420,6 +427,10 @@ export default {
       getDictDataLabel,
       opened: false,
       brandList: [],
+      formRules: {
+        prodId: [{required: true, message: this.$t("请选择品名"), trigger: "change"}],
+        brand: [{required: true, message: this.$t("请选择品牌"), trigger: "change"}],
+      },
       form: {
         "brand": "",
         // "brandType": 0,
@@ -430,7 +441,7 @@ export default {
         // "orderNo": "",
         "orderWarehouseInItemDoList": [],
         "prodAttrIds": "",
-        "prodId": 0,
+        "prodId": '',
         // "prodTitleEn": "",
         // "prodTitleZh": "",
         // "prodType": 0,
@@ -457,7 +468,7 @@ export default {
         "orderNo": "",
         "orderWarehouseInItemDoList": [],
         "prodAttrIds": "",
-        "prodId": 0,
+        "prodId": '',
         "prodTitleEn": "",
         "prodTitleZh": "",
         "prodType": 0,
@@ -487,7 +498,7 @@ export default {
     opened(val) {
       if (val) {
         this.form.material = this.warehousing.material
-        this.form.brand = this.warehousing.brand.toString()
+        this.form.brand = this.warehousing.brand?.toString() || ''
         this.handleBrandChange(this.form.brand)
       } else {
         this.$emit('update:visible', false)
@@ -527,7 +538,7 @@ export default {
     handleVolume(index, val){
       const {boxGauge1, boxGauge2, boxGauge3} = (val === 1 ? this.tableData1 : this.tableData)[index]
       if (boxGauge1 && boxGauge2 && boxGauge3) {
-        (val === 1 ? this.tableData1 : this.tableData)[index].volume = ((boxGauge1 * boxGauge2 * boxGauge3) / 1000000).toFixed(2)
+        (val === 1 ? this.tableData1 : this.tableData)[index].volume = ((boxGauge1 * boxGauge2 * boxGauge3) / 1000000)?.toFixed(2) || ''
       } else {
         (val === 1 ? this.tableData1 : this.tableData)[index].volume = 0
       }
@@ -544,8 +555,9 @@ export default {
       ]
       if (this.activeName !== "first"){
         // 添加非填单货物
-        this.$refs['tableForm1'].validate(valid => {
-          if (!valid) {
+        this.$refs['form1'].validate(valid => {
+          this.$refs['tableForm1'].validate(valid1 => {
+            if (!valid || !valid1) {
               return
             }
             return orderWarehouseIn({
@@ -569,9 +581,11 @@ export default {
               }
             })
           })
+        })
       } else {
-        this.$refs['tableForm'].validate(valid => {
-          if (!valid) {
+        this.$refs['form'].validate(valid => {
+          this.$refs['tableForm'].validate(valid1 => {
+            if (!valid || !valid1) {
               return
             }
             if (this.edit) {
@@ -583,8 +597,8 @@ export default {
                 orderItemId: this.warehousing.orderItemId,
                 orderNo: this.warehousing.orderNo,
                 num: this.warehousing.num,
-              volume: this.warehousing.volume.toFixed(2),
-              weight: this.warehousing.weight.toFixed(2),
+                volume: this.warehousing.volume?.toFixed(2) || '',
+                weight: this.warehousing.weight?.toFixed(2) || '',
                 prodId: this.warehousing.prodId,
                 "orderWarehouseInUpdateItemDoList": this.tableData.map(e => {
                   return {
@@ -620,6 +634,8 @@ export default {
               })
             }
           })
+        })
+
       }
     },
     handleClose() {