详情页规则样式

@@ -6,17 +6,30 @@
       label-width="200px"
       size="small"
       :disabled="disable"
+      :rules="rules"
     >
-      <el-form-item label="航班号">
+      <el-form-item label="航班号" prop="purposeOfFlightNo">
         <el-input
           v-model="form.purposeOfFlightNo"
           style="width: 30%"
         ></el-input>
       </el-form-item>
 
+      <el-form-item style="width: 40%">
+        <el-alert
+          title="提示：站点之间用回车符分隔"
+          type="warning"
+          show-icon
+          size="small"
+          :closable="false"
+          style="height: 30px"
+        >
+        </el-alert>
+      </el-form-item>
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="站点包含">
+            <!-- <el-alert title="提示：站点之间用回车符分隔" type="info" show-icon size="small" :closable="false" style="height:30px; margin-buttom"> </el-alert> -->
             <el-input
               type="textarea"
               v-model="form.location"
@@ -37,6 +50,17 @@
         </el-col>
       </el-row>
 
+      <el-form-item style="width: 40%">
+        <el-alert
+          title="提示：URSA之间用分号分隔，例：F2;F3;P_"
+          type="warning"
+          show-icon
+          size="small"
+          :closable="false"
+          style="height: 30px"
+        >
+        </el-alert>
+      </el-form-item>
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="URSA包含">
@@ -86,6 +110,7 @@
             :precision="0"
             :controls="false"
             style="width: 100%"
+            :min="form.minNumOfPieces + 1"
           ></el-input-number>
         </el-col>
       </el-form-item>
@@ -104,6 +129,7 @@
             style="width: 100%"
           ></el-input-number>
         </el-col>
+        <el-col :span="1" style="text-align: center"><span>Kg</span></el-col>
         <el-col style="text-align: center" :span="1">-</el-col>
         <el-col :span="3">
           <!-- <el-input v-model="form.maxWeight"></el-input> -->
@@ -116,25 +142,27 @@
             :precision="2"
             :controls="false"
             style="width: 100%"
+            :min="form.minWeight + 0.01"
           ></el-input-number>
         </el-col>
+        <el-col :span="1" style="text-align: center"><span>Kg</span></el-col>
       </el-form-item>
 
       <el-form-item label="申报类别">
-        <el-card shadow="never" style="width:70%">
-        <el-checkbox-group v-model="form.typeOfGoods">
-          <el-checkbox
-            v-for="item in cargoType"
-            :key="item.id"
-            :label="item.chineseName"
-            :name="item.chineseName"
-          ></el-checkbox>
-        </el-checkbox-group>
+        <el-card shadow="never" style="width: 70%">
+          <el-checkbox-group v-model="form.typeOfGoods">
+            <el-checkbox
+              v-for="item in cargoType"
+              :key="item.id"
+              :label="item.chineseName"
+              :name="item.chineseName"
+            ></el-checkbox>
+          </el-checkbox-group>
         </el-card>
       </el-form-item>
 
       <el-form-item label="货物类型">
-        <el-card shadow="never" style="width:70%">
+        <el-card shadow="never" style="width: 70%">
           <el-checkbox-group v-model="form.declarationCategory">
             <el-checkbox
               v-for="item in cargoStatus"
@@ -147,28 +175,28 @@
       </el-form-item>
 
       <el-form-item label="Service Code">
-        <el-card shadow="never" style="width:70%">
-        <el-checkbox-group v-model="form.serviceCode">
-          <el-checkbox
-            v-for="item in serviceCode"
-            :key="item.id"
-            :label="item.englishName"
-            :name="item.englishName"
-          ></el-checkbox>
-        </el-checkbox-group>
+        <el-card shadow="never" style="width: 70%">
+          <el-checkbox-group v-model="form.serviceCode">
+            <el-checkbox
+              v-for="item in serviceCode"
+              :key="item.id"
+              :label="item.englishName"
+              :name="item.englishName"
+            ></el-checkbox>
+          </el-checkbox-group>
         </el-card>
       </el-form-item>
 
       <el-form-item label="Sub Category">
-        <el-card shadow="never" style="width:70%">
-        <el-checkbox-group v-model="form.subCategory">
-          <el-checkbox
-            v-for="item in subCategory"
-            :key="item.id"
-            :label="item.englishName"
-            :name="item.englishName"
-          ></el-checkbox>
-        </el-checkbox-group>
+        <el-card shadow="never" style="width: 70%">
+          <el-checkbox-group v-model="form.subCategory">
+            <el-checkbox
+              v-for="item in subCategory"
+              :key="item.id"
+              :label="item.englishName"
+              :name="item.englishName"
+            ></el-checkbox>
+          </el-checkbox-group>
         </el-card>
       </el-form-item>
     </el-form>
@@ -177,7 +205,7 @@
         type="primary"
         size="small"
         v-if="$route.params.handle != 'detail'"
-        @click="submit"
+        @click="submit('form')"
         :loading="btnLoading"
       >
         <span v-if="$route.params.handle === 'add'">添加</span>
@@ -204,6 +232,11 @@ export default {
         serviceCode: [],
         subCategory: [],
       },
+      rules: {
+        purposeOfFlightNo: [
+          { required: true, message: "请输入航班号", trigger: "blur" },
+        ],
+      },
       typeOfGoods: [],
       declarationCategory: [],
       formServiceCode: [],
@@ -218,7 +251,13 @@ export default {
     };
   },
   methods: {
-    submit() {
+    submit(form) {
+      this.$refs[form].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+      });
+
       this.btnLoading = true;
       let handle = this.$route.params.handle;
       if (handle === "update") {
@@ -338,10 +377,10 @@ export default {
   color: #303133;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
-    border-color: #303133;
+  border-color: #303133;
 }
-.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
-  border-color: #606266
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+  border-color: #606266;
 }
 </style>