146 lines
4.8 KiB
Vue
146 lines
4.8 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<!-- 这个地方显示表单的标题 -->
|
||
<span>{{ processName }}</span>
|
||
</div>
|
||
<!-- 这里定义栅格布局组件 -->
|
||
<el-col :span="18" :offset="3">
|
||
<div class="form-conf" v-if="formOpen">
|
||
<!-- parser是一个自定义的组件，:form-conf="formData" 将 formData 对象作为属性传递给 parser 组件 -->
|
||
<!-- 推测是通过getData获取数据, formData是表单的结构数据 -->
|
||
<!-- formData是这个组件初始化的时候从后端接口得到的表单外观结构 -->
|
||
<!-- formData是纯数据，getData是解析formData,这个函数默认是data作为参数 -->
|
||
<parser :key="new Date().getTime()" :form-conf="formData" @submit="submit" ref="parser" @getData="getData"/>
|
||
</div>
|
||
</el-col>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getProcessForm, startProcess } from '@/api/workflow/process'
|
||
import Parser from '@/utils/generator/parser'
|
||
import { getApplication} from "@/api/scientific/application";
|
||
export default {
|
||
name: 'WorkStart',
|
||
components: {
|
||
Parser
|
||
},
|
||
data() {
|
||
return {
|
||
definitionId: null,
|
||
deployId: null,
|
||
procInsId: null,
|
||
// 项目信息主表的Id,用于获取项目的各种信息
|
||
projectId: null,
|
||
formOpen: false,
|
||
formData: {},
|
||
projectData: {},
|
||
processName: null,
|
||
}
|
||
},
|
||
created() {
|
||
this.initData();
|
||
},
|
||
methods: {
|
||
initData() {
|
||
// 发起地址请求的时候可以获得这个数据的信息
|
||
this.deployId = this.$route.params && this.$route.params.deployId;
|
||
this.definitionId = this.$route.query && this.$route.query.definitionId;
|
||
this.procInsId = this.$route.query && this.$route.query.procInsId;
|
||
// 从地址的传递参数获取项目的Id信息
|
||
this.projectId = this.$route.query && this.$route.query.projectId;
|
||
// 如果能够从路由获得流程名字就赋值，否则就默认名字
|
||
if(this.$route.query && this.$route.query.processName) {
|
||
this.processName = this.$route.query && this.$route.query.processName;
|
||
}
|
||
else {
|
||
this.processName = "更新流程";
|
||
}
|
||
console.log(this.projectId)
|
||
getApplication(this.projectId).then(response => {
|
||
this.projectData = response.data;
|
||
this.processName = this.projectData.projectName + "-项目立项";
|
||
});
|
||
// 获取流程的动态表单
|
||
getProcessForm({
|
||
definitionId: this.definitionId,
|
||
deployId: this.deployId,
|
||
procInsId: this.procInsId
|
||
}).then(res => {
|
||
if (res.data) {
|
||
// 赋值到表单
|
||
this.formData = res.data;
|
||
this.formOpen = true;
|
||
this.formData.fields.forEach(field => {
|
||
if (field.__vModel__ === "projectName") {
|
||
field.__config__.defaultValue = this.projectData.projectName;
|
||
field.readonly = true;
|
||
}
|
||
if (field.__vModel__ === "oldBudget") {
|
||
field.__config__.defaultValue = this.projectData.projectBudget + "万";
|
||
field.readonly = true;
|
||
}
|
||
if (field.__vModel__ === "directorName") {
|
||
field.__config__.defaultValue = this.projectData.projectLeader;
|
||
field.readonly = true;
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
},
|
||
/** 接收子组件传的值 */
|
||
getData(data) {
|
||
if (data) {
|
||
console.log("get data");
|
||
const variables = [];
|
||
data.fields.forEach(item => {
|
||
let variableData = {};
|
||
// 直接获得标签信息
|
||
variableData.label = item.__config__.label
|
||
// 表单值为多个选项时
|
||
if (item.__config__.defaultValue instanceof Array) {
|
||
const array = [];
|
||
item.__config__.defaultValue.forEach(val => {
|
||
array.push(val)
|
||
})
|
||
variableData.val = array;
|
||
} else {
|
||
// 如果是单个信息,直接得到defaultValue
|
||
variableData.val = item.__config__.defaultValue
|
||
}
|
||
variables.push(variableData)
|
||
})
|
||
this.variables = variables;
|
||
}
|
||
},
|
||
submit(data) {
|
||
if (data && this.definitionId) {
|
||
// 启动流程并将表单数据加入流程变量
|
||
data.valData.projectId = this.projectId;
|
||
console.log("submit");
|
||
console.log(data.valData);
|
||
|
||
startProcess(this.definitionId, JSON.stringify(data.valData)).then(res => {
|
||
this.$modal.msgSuccess(res.msg);
|
||
this.$tab.closeOpenPage({
|
||
path: '/work/own'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.form-conf {
|
||
margin: 15px auto;
|
||
width: 80%;
|
||
padding: 15px;
|
||
}
|
||
</style>
|