流程图+表单验证

src/pages/workbench/component-center/process-management/process-design/index.vue

@@ -7,44 +7,23 @@
       <el-breadcrumb-item>{{ $t("lang.new") }}</el-breadcrumb-item>
     </el-breadcrumb>
     <BlockRadius class="block_item">
-      <steps
-        :active-step="step"
-        :done="done"
-        :show-done="true"
-        done-title="保存成功"
-        done-sub-title="可返回流程管理列表查看该流程，并进行流程的部署和发布。"
-        class="apaas_steps"
-      >
-        <step
-          title="基本信息"
-          :step="0"
-          :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
-          class="apaas_step"
-        >
+      <steps :active-step="step" :done="done" :show-done="true" done-title="保存成功" done-sub-title="可返回流程管理列表查看该流程，并进行流程的部署和发布。" class="apaas_steps">
+        <step title="基本信息" :step="0" :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')" class="apaas_step">
           <div class="step_in">
             <el-form :model="basic_form" :rules="rules" ref="basicInformation" class="form_left">
-              <el-form-item>
+              <el-form-item prop="name">
                 <p class="formname">流程名称：</p>
                 <el-input v-model="basic_form.name" placeholder="请输入流程名称"></el-input>
               </el-form-item>
-              <el-form-item prop="preson">
+              <el-form-item prop="workplace">
                 <p class="formname">工作区域：</p>
-                <el-select
-                  v-model="basic_form.workplace"
-                  @change="changeWorkPlace"
-                  placeholder="请选择工作区域"
-                >
+                <el-select v-model="basic_form.workplace" @change="changeWorkPlace" placeholder="请选择工作区域">
                   <el-option v-for="item in workplace_list" :label="item" :value="item" :key="item"></el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item prop="phone">
+              <el-form-item prop="desc">
                 <p class="formname">流程描述：</p>
-                <el-input
-                  type="textarea"
-                  :autosize="{ minRows: 6, maxRows: 10}"
-                  v-model="basic_form.desc"
-                  placeholder="请输入流程描述"
-                ></el-input>
+                <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 10}" v-model="basic_form.desc" placeholder="请输入流程描述"></el-input>
               </el-form-item>
             </el-form>
             <div class="btn_footer">
@@ -53,12 +32,7 @@
             </div>
           </div>
         </step>
-        <step
-          title="流程设计"
-          :step="1"
-          :active-icon="require('@/assets/imgs/progress_ic_liucheng.png')"
-          class="apaas_step"
-        >
+        <step title="流程设计" :step="1" :active-icon="require('@/assets/imgs/progress_ic_liucheng.png')" class="apaas_step">
           <div class="step_in">
             <WorkFlow ref="workFlow" class="work_flow" />
             <div class="btn_footer">
@@ -70,13 +44,7 @@
             </div>
           </div>
         </step>
-        <step
-          title
-          step-title="完成"
-          :step="2"
-          :active-icon="require('@/assets/imgs/progress_ic_wancheng.png')"
-          class="apaas_step"
-        ></step>
+        <step title step-title="完成" :step="2" :active-icon="require('@/assets/imgs/progress_ic_wancheng.png')" class="apaas_step"></step>
 
         <template slot="action">
           <el-button type="primary" @click="backToList">返回列表</el-button>
@@ -97,7 +65,7 @@ export default {
     WorkFlow,
     BlockRadius,
     Steps,
-    Step,
+    Step
   },
   data: () => {
     return {
@@ -106,29 +74,29 @@ export default {
       basic_form: {
         name: "",
         workplace: "",
-        desc: "",
+        desc: ""
       },
       rules: {
         name: [
           { required: true, message: "请输入流程名称", trigger: "blur" },
-          { max: 16, message: "不能超过16个字符", trigger: "blur" },
+          { max: 16, message: "不能超过16个字符", trigger: "blur" }
         ],
         workplace: [
-          { required: true, message: "请选择工作区域", trigger: "blur" },
+          { required: true, message: "请选择工作区域", trigger: "blur" }
         ],
         desc: [
           { required: true, message: "请输入流程描述", trigger: "blur" },
-          { max: 400, message: "不能超过400个字符", trigger: "blur" },
-        ],
+          { max: 400, message: "不能超过400个字符", trigger: "blur" }
+        ]
       },
-      workplace_list: [],
+      workplace_list: []
     };
   },
   methods: {
     verification() {
       let self = this;
       let data = JSON.parse(JSON.stringify(self.$refs.workFlow.getData()));
-      console.log(JSON.stringify(data))
+      console.log(JSON.stringify(data));
       let start_num = 0;
       let end_num = 0;
       let start_id = "";
@@ -139,8 +107,8 @@ export default {
       let out_edge = 0;
       let datas = { ...data.obj };
       console.log(data);
-      datas.nodeList.forEach((item) => {
-        let da = data.params.find((nodep) => {
+      datas.nodeList.forEach(item => {
+        let da = data.params.find(nodep => {
           return nodep.id == item.meta.id;
         });
         item.meta = da;
@@ -153,14 +121,14 @@ export default {
           end_id = item.id;
         }
         if (
-          datas.linkList.findIndex((el) => {
+          datas.linkList.findIndex(el => {
             return el.startId == item.id;
           }) == -1 &&
           item.id != end_id
         ) {
           in_edge++;
         } else if (
-          datas.linkList.findIndex((el) => {
+          datas.linkList.findIndex(el => {
             return el.endId == item.id;
           }) == -1 &&
           item.id != start_id
@@ -168,7 +136,7 @@ export default {
           out_edge++;
         }
       });
-      datas.linkList.forEach((item) => {
+      datas.linkList.forEach(item => {
         if (start_id == item.endId) {
           start_before++;
         }
@@ -179,22 +147,22 @@ export default {
       if (start_num != 1 || end_num != 1) {
         this.$message({
           message: "开始节点与结束节点均应有且只有一个",
-          type: "warning",
+          type: "warning"
         });
       } else if (start_before != 0) {
         this.$message({
           message: "开始节点前面不应连接其它节点",
-          type: "warning",
+          type: "warning"
         });
       } else if (end_after != 0) {
         this.$message({
           message: "结束节点后面不应连接其它节点",
-          type: "warning",
+          type: "warning"
         });
       } else if (in_edge != 0 || out_edge != 0) {
         this.$message({
           message: "请保证每个节点都被连接",
-          type: "warning",
+          type: "warning"
         });
       }
       console.log(datas);
@@ -207,15 +175,21 @@ export default {
       this.$router.go(-1);
     },
     next() {
-      this.step++;
+      this.$refs["basicInformation"].validate(valid => {
+        if (valid) {
+          console.log("sss")
+          this.step++;
+        } else {
+        }
+      });
     },
     back() {
       this.step--;
     },
     complete() {
       this.verification();
-    },
-  },
+    }
+  }
 };
 </script>