场景管理增加校验

src/views/system-config/scene-manage/WorkshopDrawer.vue

@@ -70,10 +70,10 @@
       </el-form>
       <div style="position: absolute; left: 108px; bottom: 67px">
         <el-button v-if="!props.detail.companyId" @click="resetDraw">重置</el-button>
-        <el-button v-if="!props.detail.companyId" type="primary" @click="addNewType">
+        <el-button v-if="!props.detail.companyId" type="primary" @click="addNewType(ruleFormRef)">
           提交
         </el-button>
-        <el-button v-if="props.detail.companyId" type="primary" @click="editedSub">
+        <el-button v-if="props.detail.companyId" type="primary" @click="editedSub(ruleFormRef)">
           提交
         </el-button>
       </div>
@@ -143,7 +143,7 @@
   });
   const rules = reactive<FormRules>({
     name: [
-      { required: true, message: '', trigger: 'blur' },
+      { required: true, message: '车间名称不能为空', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
     ],
     seniorScene: [
@@ -151,17 +151,11 @@
       { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
     ],
     code: [
-      { required: true, message: '', trigger: 'blur' },
-      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
-    ],
-    tagWorkshop: [
-      { required: true, message: '', trigger: 'blur' },
-      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
-    ],
-    templateWorkshop: [
-      { required: true, message: '', trigger: 'blur' },
+      { required: true, message: '车间代码不能为空', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
     ],
+    tagWorkshop: [{ required: true, message: '请选择场景标签', trigger: 'blur' }],
+    templateWorkshop: [{ required: true, message: '请选择车间模板', trigger: 'blur' }],
   });
 
   //编辑时需要传入子组件的数据
@@ -181,91 +175,100 @@
   //添加新车间的提交
   const addNewType = (formEl: FormInstance | undefined) => {
     if (!formEl) return;
+    formEl.validate((valid) => {
+      if (!valid) {
+        return;
+      }
+      const newAddData = {
+        code: ruleForm.code,
+        companyId: props.detail.id,
+        sceneLabelId: ruleForm.tagWorkshop!,
+        isDeleted: 0,
+        name: ruleForm.name,
+        status: Number(ruleForm.addEnable),
+        serial: 0,
+      };
 
-    const newAddData = {
-      code: ruleForm.code,
-      companyId: props.detail.id,
-      sceneLabelId: ruleForm.tagWorkshop!,
-      isDeleted: 0,
-      name: ruleForm.name,
-      status: Number(ruleForm.addEnable),
-      serial: 0,
-    };
-
-    if (props.allCodes.includes(ruleForm.code)) {
-      ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'error',
-      })
-        .then(() => {
-          console.log('场景代码重复，请重新填写');
-        })
-        .catch(() => {
-          console.log('取消删除物件');
-        });
-    } else {
-      addWorkshop(newAddData)
-        .then((res) => {
-          const newWorkshopModule = {
-            workshopId: res,
-            isDeleted: 0,
-            workshopModuleId: ruleForm.templateWorkshop!,
-          };
-          return addWorkshopModuleLabel(newWorkshopModule);
-        })
-        .catch((err) => {
-          console.log(err);
-        })
-        .finally(() => {
-          emit('onOk');
-        });
-    }
-  };
-
-  //编辑公司时的提交
-  const editedSub = (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    if (props.allCodes.includes(ruleForm.code)) {
-      if (props.detail.code !== ruleForm.code) {
+      if (props.allCodes.includes(ruleForm.code)) {
         ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
           confirmButtonText: '确认',
           cancelButtonText: '取消',
           type: 'error',
         })
           .then(() => {
-            console.log('代码重复');
+            console.log('场景代码重复，请重新填写');
           })
           .catch(() => {
             console.log('取消删除物件');
           });
+      } else {
+        addWorkshop(newAddData)
+          .then((res) => {
+            const newWorkshopModule = {
+              workshopId: res,
+              isDeleted: 0,
+              workshopModuleId: ruleForm.templateWorkshop!,
+            };
+            return addWorkshopModuleLabel(newWorkshopModule);
+          })
+          .catch((err) => {
+            console.log(err);
+          })
+          .finally(() => {
+            emit('onOk');
+          });
+      }
+    });
+  };
+
+  //编辑公司时的提交
+  const editedSub = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate((valid) => {
+      if (!valid) {
         return;
       }
-    }
+      if (props.allCodes.includes(ruleForm.code)) {
+        if (props.detail.code !== ruleForm.code) {
+          ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'error',
+          })
+            .then(() => {
+              console.log('代码重复');
+            })
+            .catch(() => {
+              console.log('取消删除物件');
+            });
+          return;
+        }
+      }
 
-    const editNewWorkshopData = {
-      code: ruleForm.code,
-      sceneLabelId: ruleForm.tagWorkshop!,
-      name: ruleForm.name,
-      status: Number(ruleForm.addEnable),
-      id: props.detail.id,
-    };
+      const editNewWorkshopData = {
+        code: ruleForm.code,
+        sceneLabelId: ruleForm.tagWorkshop!,
+        name: ruleForm.name,
+        status: Number(ruleForm.addEnable),
+        id: props.detail.id,
+      };
 
-    editWorkshop(editNewWorkshopData)
-      .then(() => {
-        const editWorkshopModule = {
-          isDeleted: 0,
-          workshopId: props.detail.id,
-          workshopModuleId: ruleForm.templateWorkshop!,
-        };
-        return editWorkshopModuleLabel(editWorkshopModule);
-      })
-      .catch((err) => {
-        console.log(err);
-      })
-      .finally(() => {
-        emit('onOk');
-      });
+      editWorkshop(editNewWorkshopData)
+        .then(() => {
+          const editWorkshopModule = {
+            isDeleted: 0,
+            workshopId: props.detail.id,
+            workshopModuleId: ruleForm.templateWorkshop!,
+          };
+          return editWorkshopModuleLabel(editWorkshopModule);
+        })
+        .catch((err) => {
+          console.log(err);
+        })
+        .finally(() => {
+          emit('onOk');
+        });
+    });
   };
 
   //重置编辑框

src/views/system-config/scene-manage/WorkspaceDrawer.vue

@@ -42,10 +42,10 @@
       </el-form>
       <div style="position: absolute; left: 108px; bottom: 67px">
         <el-button v-if="!props.detail.principal" @click="resetDraw">重置</el-button>
-        <el-button v-if="!props.detail.principal" type="primary" @click="addNewType">
+        <el-button v-if="!props.detail.principal" type="primary" @click="addNewType(ruleFormRef)">
           提交
         </el-button>
-        <el-button v-if="props.detail.principal" type="primary" @click="editedSub">
+        <el-button v-if="props.detail.principal" type="primary" @click="editedSub(ruleFormRef)">
           提交
         </el-button>
       </div>
@@ -102,7 +102,7 @@
   });
   const rules = reactive<FormRules>({
     name: [
-      { required: true, message: '', trigger: 'blur' },
+      { required: true, message: '工位名称不能为空', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
     ],
     seniorScene: [
@@ -110,11 +110,11 @@
       { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
     ],
     code: [
-      { required: true, message: '', trigger: 'blur' },
+      { required: true, message: '工位代码不能为空', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
     ],
     principal: [
-      { required: true, message: '', trigger: 'blur' },
+      { required: true, message: '负责人不能为空', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
     ],
   });
@@ -135,81 +135,91 @@
   const addNewType = (formEl: FormInstance | undefined) => {
     if (!formEl) return;
 
-    if (props.allCodes.indexOf(ruleForm.code) > -1) {
-      ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'error',
-      })
-        .then(() => {
-          console.log('场景代码重复，请重新填写');
-        })
-        .catch(() => {
-          console.log('取消删除物件');
-        });
-    } else {
-      const newAddData = {
-        code: ruleForm.code,
-        workshopId: props.detail.id,
-        isDeleted: 0,
-        name: ruleForm.name,
-        principal: ruleForm.principal,
-        status: Number(ruleForm.addEnable),
-        serial: 0,
-      };
-      addWorkspace(newAddData)
-        .catch((err) => {
-          console.log(err);
-        })
-        .catch((err) => {
-          console.log(err);
-        })
-        .finally(() => {
-          emit('onOk');
-        });
-    }
-  };
-
-  //编辑公司时的提交
-  const editedSub = (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-
-    if (props.allCodes.indexOf(ruleForm.code) > -1) {
-      if (props.detail.code !== ruleForm.code) {
+    formEl.validate((valid) => {
+      if (!valid) {
+        return;
+      }
+      if (props.allCodes.indexOf(ruleForm.code) > -1) {
         ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
           confirmButtonText: '确认',
           cancelButtonText: '取消',
           type: 'error',
         })
           .then(() => {
-            console.log('代码重复');
+            console.log('场景代码重复，请重新填写');
           })
           .catch(() => {
             console.log('取消删除物件');
           });
+      } else {
+        const newAddData = {
+          code: ruleForm.code,
+          workshopId: props.detail.id,
+          isDeleted: 0,
+          name: ruleForm.name,
+          principal: ruleForm.principal,
+          status: Number(ruleForm.addEnable),
+          serial: 0,
+        };
+        addWorkspace(newAddData)
+          .catch((err) => {
+            console.log(err);
+          })
+          .catch((err) => {
+            console.log(err);
+          })
+          .finally(() => {
+            emit('onOk');
+          });
+      }
+    });
+  };
+
+  //编辑公司时的提交
+  const editedSub = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+
+    formEl.validate((valid) => {
+      if (!valid) {
         return;
       }
-    }
+      if (props.allCodes.indexOf(ruleForm.code) > -1) {
+        if (props.detail.code !== ruleForm.code) {
+          ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'error',
+          })
+            .then(() => {
+              console.log('代码重复');
+            })
+            .catch(() => {
+              console.log('取消删除物件');
+            });
+          return;
+        }
+      }
 
-    const editNewWorkspaceData = {
-      code: ruleForm.code,
-      name: ruleForm.name,
-      status: Number(ruleForm.addEnable),
-      id: props.detail.id,
-      principal: ruleForm.principal,
-    };
+      const editNewWorkspaceData = {
+        code: ruleForm.code,
+        name: ruleForm.name,
+        status: Number(ruleForm.addEnable),
+        id: props.detail.id,
+        principal: ruleForm.principal,
+      };
 
-    //编辑车间并上传
-    editWorkspace(editNewWorkspaceData)
-      .catch((err) => {
-        console.log(err);
-      })
-      .catch((err) => {
-        console.log(err);
-      })
-      .finally(() => {
-        emit('onOk');
-      });
+      //编辑车间并上传
+      editWorkspace(editNewWorkspaceData)
+        .catch((err) => {
+          console.log(err);
+        })
+        .catch((err) => {
+          console.log(err);
+        })
+        .finally(() => {
+          emit('onOk');
+        });
+    });
   };
 
   //重置编辑框