Commit c988ee90 authored by 刘殿昕's avatar 刘殿昕

流程图+表单验证

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