场景管理编辑表单debug

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

@@ -29,48 +29,50 @@
         <el-form-item label="公司代码" prop="code">
           <el-input v-model="ruleForm.code" style="width: 200px" />
         </el-form-item>
-        <el-form-item label="标签&模板" prop="sceneCode">
-          <div style="width: 200px; height: 30px"></div>
-          <div
-            v-for="(item, index) in ruleForm.selectItems"
-            :key="index"
-            style="margin-bottom: 16px; display: flex"
-          >
-            <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
-              <el-option
-                v-for="item1 in props.sceneList"
-                :key="item1.id"
-                :label="item1.name"
-                :value="item1.id"
-              />
-            </el-select>
-            <img
-              src="@/assets/icons/link.png"
-              alt=""
-              style="width: 16px; margin-left: 2px; margin-right: 2px" />
-            <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
-              <el-option
-                v-for="item2 in props.templateList"
-                :key="item2.id"
-                :label="item2.name"
-                :value="item2.id"
-              />
-            </el-select>
-            <img
-              src="@/assets/icons/close.png"
-              @click="deleScene(index)"
-              alt=""
-              style="
-                width: 13px;
-                height: 13px;
-                margin-top: 10px;
-                margin-left: 3px;
-                cursor: pointer;
-              "
-          /></div>
-          <div style="width: 200px">
-            <el-icon size="28px" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
-          ></div>
+        <el-form-item label="标签&模板" required>
+          <div style="display: flex; flex-direction: column; align-items: flex-start">
+            <div
+              v-for="(item, index) in ruleForm.selectItems"
+              :key="index"
+              style="margin-bottom: 16px; display: flex"
+            >
+              <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
+                <el-option
+                  v-for="item1 in props.sceneList"
+                  :key="item1.id"
+                  :label="item1.name"
+                  :value="item1.id"
+                />
+              </el-select>
+              <img
+                src="@/assets/icons/link.png"
+                alt=""
+                style="width: 16px; margin-left: 2px; margin-right: 2px" />
+              <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
+                <el-option
+                  v-for="item2 in props.templateList"
+                  :key="item2.id"
+                  :label="item2.name"
+                  :value="item2.id"
+                />
+              </el-select>
+              <img
+                src="@/assets/icons/close.png"
+                @click="deleScene(index)"
+                alt=""
+                style="
+                  width: 13px;
+                  height: 13px;
+                  margin-top: 10px;
+                  margin-left: 3px;
+                  cursor: pointer;
+                "
+            /></div>
+            <div style="width: 200px">
+              <el-icon size="28px" @click="addChange" style="cursor: pointer"
+                ><CirclePlus /></el-icon
+            ></div>
+          </div>
         </el-form-item>
         <el-form-item label="状态">
           <el-switch
@@ -165,16 +167,13 @@
   });
   const rules = reactive<FormRules>({
     name: [
-      { required: true, message: '', trigger: 'blur' },
-      { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
-    ],
-    seniorScene: [
-      { required: true, message: '', trigger: 'blur' },
-      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+      { required: true, message: '公司名称不能为空', trigger: 'blur' },
+      { min: 1, max: 100, message: '长度在1-100之间', trigger: 'blur' },
     ],
+
     code: [
-      { required: true, message: '', trigger: 'blur' },
-      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+      { required: true, message: '公司代码不能为空', trigger: 'blur' },
+      { min: 1, max: 100, message: '长度在1-100之间', trigger: 'blur' },
     ],
   });
 
@@ -220,57 +219,75 @@
     }
   };
   //添加新公司的提交
-  const newCompanyAdd = (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    if (props.allCodes.indexOf(ruleForm.code) > -1) {
-      ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'error',
-      })
-        .then(() => {
-          // ruleFormCom.code = '';
-          console.log('场景代码重复，请重新填写');
-        })
-        .catch(() => {
-          console.log('取消删除物件');
+  const newCompanyAdd = () => {
+    if (!ruleFormRef.value) return;
+    ruleFormRef.value.validate((valid) => {
+      if (!valid) {
+        return;
+      }
+
+      const selectTags = ruleForm.selectItems?.filter((item) => {
+        return item.tag && item.template;
+      });
+
+      if (!selectTags?.[0]) {
+        ElMessage({
+          message: '请选择标签和模板',
+          type: 'error',
         });
-    } else {
-      const newComData = {
-        name: ruleForm.name,
-        code: ruleForm.code,
-        status: Number(ruleForm.addEnable),
-        isDeleted: 0,
-        parentId: 0,
-        serial: 0,
-      };
-      //提交数据并重置关闭el-draw
-      addCompany(newComData)
-        .then((res) => {
-          //选出不为空字符串的数据
-          ruleForm.selectItems = ruleForm.selectItems!.filter((item) => {
-            return item.tag && item.template;
-          });
-          //将selectItems加工成保存公司-模板的数据类型
-          const newModuleLabel = ruleForm.selectItems!.map((item) => {
-            return {
-              companyId: res,
-              isDeleted: 0,
-              sceneLabelId: Number(item.tag), //item.tag
-              sceneModuleId: Number(item.template), ///item.template
-            };
-          });
+        return;
+      }
 
-          //保存公司-场景标签-场景模板关系
-          return addCompanyModuleLabel(newModuleLabel);
-        })
-        .catch((err) => {
-          console.log(err);
+      if (props.allCodes.indexOf(ruleForm.code) > -1) {
+        ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'error',
         })
-        .finally(() => {
-          emit('onOk');
-        });
-    }
+          .then(() => {
+            // ruleFormCom.code = '';
+            console.log('场景代码重复，请重新填写');
+          })
+          .catch(() => {
+            console.log('取消删除物件');
+          });
+      } else {
+        const newComData = {
+          name: ruleForm.name,
+          code: ruleForm.code,
+          status: Number(ruleForm.addEnable),
+          isDeleted: 0,
+          parentId: 0,
+          serial: 0,
+        };
+        //提交数据并重置关闭el-draw
+        addCompany(newComData)
+          .then((res) => {
+            //选出不为空字符串的数据
+            ruleForm.selectItems = ruleForm.selectItems!.filter((item) => {
+              return item.tag && item.template;
+            });
+            //将selectItems加工成保存公司-模板的数据类型
+            const newModuleLabel = ruleForm.selectItems!.map((item) => {
+              return {
+                companyId: res,
+                isDeleted: 0,
+                sceneLabelId: Number(item.tag), //item.tag
+                sceneModuleId: Number(item.template), ///item.template
+              };
+            });
+
+            //保存公司-场景标签-场景模板关系
+            return addCompanyModuleLabel(newModuleLabel);
+          })
+          .catch((err) => {
+            console.log(err);
+          })
+          .finally(() => {
+            emit('onOk');
+          });
+      }
+    });
   };
 
   //编辑公司时的提交

src/views/system-config/scene-manage/use-method.tsx

@@ -17,7 +17,7 @@ export const colomns = [
     render: ({ row, column }) => {
       console.log('record row', row);
       console.log('record', column);
-      if (!row.parent && row.labelList[0]?.id) {
+      if (!row.parent && row.labelList?.[0]?.id) {
         return (
           <a
             href={`/skyeyev3pc/#/company?companyId=${row.id}&labelId=${row.labelList[0]?.id}`}