解决场景管理编辑表单提交不校验的问题

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

@@ -86,7 +86,9 @@
       <div style="position: absolute; left: 108px; bottom: 67px">
         <el-button v-if="!props.comEdit" @click="resetDrawCom">重置</el-button>
         <el-button type="primary" v-if="!props.comEdit" @click="newCompanyAdd"> 提交 </el-button>
-        <el-button type="primary" v-if="props.comEdit" @click="editedSub"> 提交 </el-button>
+        <el-button type="primary" v-if="props.comEdit" @click="editedSub(ruleFormRef)">
+          提交
+        </el-button>
       </div>
     </el-drawer></div
   >
@@ -293,51 +295,57 @@
   //编辑公司时的提交
   const editedSub = (formEl: FormInstance | undefined) => {
     if (!formEl) 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('取消删除物件');
-          });
+    formEl.validate((valid) => {
+      if (!valid) {
         return;
       }
-    }
 
-    ruleForm.selectItems = ruleForm.selectItems!.filter((item) => {
-      return item.tag && item.template;
-    });
+      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 editNewCom = {
-      id: props.detail.id,
-      name: ruleForm.name,
-      code: ruleForm.code,
-      status: Number(ruleForm.addEnable),
-    };
-    // 编辑上传
-    editCompany(editNewCom)
-      .then(() => {
-        //保存公司-场景标签-场景模板关系
-        const editModuleLabel = ruleForm.selectItems!.map((item) => {
-          return {
-            companyId: props.detail.id,
-            isDeleted: 0,
-            sceneLabelId: Number(item.tag), //item.tag
-            sceneModuleId: Number(item.template), ///item.template
-          };
-        });
-        return editCompanyModuleLabel(editModuleLabel);
-      })
-      .finally(() => {
-        emit('onOk');
+      ruleForm.selectItems = ruleForm.selectItems!.filter((item) => {
+        return item.tag && item.template;
       });
+
+      //新增的数据
+      const editNewCom = {
+        id: props.detail.id,
+        name: ruleForm.name,
+        code: ruleForm.code,
+        status: Number(ruleForm.addEnable),
+      };
+      // 编辑上传
+      editCompany(editNewCom)
+        .then(() => {
+          //保存公司-场景标签-场景模板关系
+          const editModuleLabel = ruleForm.selectItems!.map((item) => {
+            return {
+              companyId: props.detail.id,
+              isDeleted: 0,
+              sceneLabelId: Number(item.tag), //item.tag
+              sceneModuleId: Number(item.template), ///item.template
+            };
+          });
+          return editCompanyModuleLabel(editModuleLabel);
+        })
+        .finally(() => {
+          emit('onOk');
+        });
+    });
   };
 
   //重置编辑框