增加验证

src/views/calc/calcSpec/index.vue

@@ -81,7 +81,10 @@
           <el-input v-model="form.deviceId" disabled />
         </el-form-item>
         <el-form-item label="织造米数" prop="length">
-          <el-input v-model="form.length" placeholder="请输入织造米数" />
+          <el-input-number v-model="form.length" placeholder="请输入织造米数" style="width: 180px"/>
+        </el-form-item>
+        <el-form-item label="密度" prop="density">
+          <el-input-number v-model="form.density" placeholder="请输入密度" style="width: 180px"/>
         </el-form-item>
         <el-form-item label="规格" prop="spec">
           <el-input v-model="form.spec" disabled/>
@@ -92,9 +95,6 @@
         <el-form-item label="米克重" prop="mick">
           <el-input v-model="form.mick" disabled />
         </el-form-item>
-        <el-form-item label="密度" prop="density">
-          <el-input v-model="form.density" disabled />
-        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -139,7 +139,36 @@ const data = reactive({
     price: null,
     remark: null
   },
-  rules: {}
+  rules: {
+    density: [
+      { required: true, message: "密度不能为空", trigger: "blur" },
+      { type: "number", message: "密度必须为数字值", trigger: "blur" },
+      {
+        validator: (rule, value, callback) => {
+          if (value <= 0) {
+            callback(new Error('密度必须大于0'));
+          } else {
+            callback();
+          }
+        },
+        trigger: "blur"
+      }
+    ],
+    length: [
+      { required: true, message: "织造米数不能为空", trigger: "blur" },
+      { type: "number", message: "织造米数必须为数字值", trigger: "blur" },
+      {
+        validator: (rule, value, callback) => {
+          if (value <= 0) {
+            callback(new Error('织造米数必须大于0'));
+          } else {
+            callback();
+          }
+        },
+        trigger: "blur"
+      }
+    ]
+  }
 });
 
 const {queryParams, form, rules} = toRefs(data);