元素提交检测

src/views/manager/wbsinfo/edit.vue

@@ -86,15 +86,15 @@
       </div>
     </div>
 
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :rules="rules" width="50%" append-to-body>
-      <el-form ref="nodeDetail" :model="nodeDetail" label-width="110px">
-        <el-form-item label="节点名称">
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" append-to-body>
+      <el-form ref="nodeDetail" :model="nodeDetail" :rules="rules" label-width="110px">
+        <el-form-item label="节点名称" prop="deptName">
           <el-input v-model="nodeDetail.deptName"></el-input>
         </el-form-item>
         <el-form-item label="上级节点">
           <el-input v-model="nodeDetail.parentName" disabled></el-input>
         </el-form-item>
-        <el-form-item label="节点类型">
+        <el-form-item label="节点类型" prop="deptCategory">
           <el-select v-model="nodeDetail.deptCategory" placeholder="请选择" class="w-100p">
             <el-option v-for="item in deptCategorylist" :key="item.id" :label="item.dictValue"  :value="item.dictKey"></el-option>
           </el-select>
@@ -131,21 +131,21 @@
       </span>
     </el-dialog>
 
-    <el-dialog title="创建新的元素表" :visible.sync="eleVisible" :rules="eleRules" width="80%" append-to-body>
-      <el-form ref="eleDialog" :model="eleForm" label-width="110px">
-        <el-form-item label="表名">
+    <el-dialog title="创建新的元素表" :visible.sync="eleVisible" width="80%" append-to-body>
+      <el-form ref="eleDialog" :model="eleForm" :rules="eleRules" label-width="110px">
+        <el-form-item label="表名" prop="deptName">
           <el-input v-model="eleForm.deptName"></el-input>
         </el-form-item>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="表类型">
+            <el-form-item label="表类型" prop="tableType">
               <el-select v-model="eleForm.tableType" placeholder="请选择" class="w-100p">
                 <el-option v-for="item in tableTypelist" :key="item.id" :label="item.dictValue"  :value="item.dictKey"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="所属方">
+            <el-form-item label="所属方" prop="tableOwner">
               <el-select v-model="eleForm.tableOwner" placeholder="请选择" class="w-100p">
                 <el-option v-for="item in ownerTypeList" :key="item.id" :label="item.dictValue"  :value="item.dictKey"></el-option>
               </el-select>
@@ -342,7 +342,17 @@
         eleForm:{
           elementList:[],
         },
-        eleRules:{},
+        eleRules:{
+          deptName: [
+            { required: true, message: '请输入表名称', trigger: 'blur' },
+          ],
+          tableType:[
+            { required: true, message: '请选择表类型', trigger: 'change' }
+          ],
+          tableOwner:[
+            { required: true, message: '请选择所属方', trigger: 'change' }
+          ],
+        },
 
         importVisible:false,
         tempList:[],
@@ -500,24 +510,31 @@
         list.splice(index,1);
       },
       saveFormAndElementHandle(){
-        this.eleForm.wbsId = this.id;
-        this.eleForm.tenantId = this.userInfo.tenant_id;
-        this.eleForm.deptCategory = -1;
-        this.eleForm.type = 2;//	'1'节点 '2'表单
-        this.eleForm.parentId = this.nodeDetail.id;
-        this.eleForm.elementList.forEach((element)=>{
-          element.eAllowDeviation = (element.allow?element.allow:'') + (element.deviation?element.deviation:'');
-        })
-        saveFormAndElement(this.eleForm).then(()=>{
-          //console.log(res)
-          this.updateTreeNewNode();
-          this.updateNodeTable();
-          this.eleVisible = false;
-          this.$message({
-            type: "success",
-            message: "新增成功!"
-          });
-        })
+        this.$refs['eleDialog'].validate((valid) => {
+          if (valid) {
+            this.eleForm.wbsId = this.id;
+            this.eleForm.tenantId = this.userInfo.tenant_id;
+            this.eleForm.deptCategory = -1;
+            this.eleForm.type = 2;//	'1'节点 '2'表单
+            this.eleForm.parentId = this.nodeDetail.id;
+            this.eleForm.elementList.forEach((element)=>{
+              element.eAllowDeviation = (element.allow?element.allow:'') + (element.deviation?element.deviation:'');
+            })
+            saveFormAndElement(this.eleForm).then(()=>{
+              //console.log(res)
+              this.updateTreeNewNode();
+              this.updateNodeTable();
+              this.eleVisible = false;
+              this.$message({
+                type: "success",
+                message: "新增成功!"
+              });
+            })
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
       },
 
       updateTreeNewNode(){
@@ -563,6 +580,7 @@
         }).then(() => {
           removeTableById(row.id).then(()=>{
             this.formData.splice(index,1);
+            this.updateTreeNewNode();
             this.$message({
               type: "success",
               message: "删除成功!"