<template>
|
<el-container>
|
<el-header style="background: white">
|
<layout-header v-model="activeSelect" @publish="publishProcess" @preview="preview"></layout-header>
|
</el-header>
|
<div class="layout-body">
|
<process-design ref="processDesign" v-show="activeSelect === 'processDesign'"/>
|
</div>
|
<flow-dialog :showFooter="false" v-model="validVisible" title="设置项检查">
|
<el-result :icon="validIcon" :title="errTitle" :subTitle="validResult.desc">
|
<i slot="icon" style="font-size: 30px" v-if="!validResult.finished" class="el-icon-loading"></i>
|
<div slot="subTitle" class="err-info" v-if="validResult.errs.length > 0">
|
<ellipsis hover-tip v-for="(err, i) in validResult.errs" :key="i + '_err'" :content="err">
|
<i slot="pre" class="el-icon-warning-outline"></i>
|
</ellipsis>
|
</div>
|
<template slot="extra">
|
<el-form :model="form" ref="form">
|
<el-form-item label="流程名称" prop="name" :rules="rules.name">
|
<el-input placeholder="请输入流程名称" size="small" clearable v-model="form.name"/>
|
</el-form-item>
|
|
|
<el-button type="primary" v-if="validResult.finished" size="medium" @click="doAfter">
|
{{ validResult.action }}
|
</el-button>
|
</el-form>
|
</template>
|
</el-result>
|
</flow-dialog>
|
</el-container>
|
|
</template>
|
|
<script>
|
import LayoutHeader from './LayoutHeader'
|
import {createFlow, getFlowDetail} from '@/api/design'
|
|
import ProcessDesign from '@/views/admin/layout/ProcessDesign'
|
|
export default {
|
name: "FormProcessDesign",
|
components: {LayoutHeader, ProcessDesign},
|
data() {
|
return {
|
form: {
|
name: ''
|
},
|
rules: {
|
name: [
|
{required: true, message: '请输入流程名称', trigger: 'blur'}
|
]
|
},
|
isNew: true,
|
validStep: 0,
|
timer: null,
|
activeSelect: 'processDesign',
|
validVisible: false,
|
validResult: {},
|
validOptions: [
|
{title: '审批流程', description: '', icon: '', status: ''},
|
// {title: '扩展设置', description: '', icon: '', status: ''}
|
],
|
validComponents: ['processDesign', 'proSetting'],
|
}
|
},
|
computed: {
|
setup() {
|
return this.$store.state.design
|
},
|
errTitle() {
|
if (this.validResult.finished && !this.validResult.success) {
|
return this.validResult.title + ` (${this.validResult.errs.length}项错误) 😥`
|
}
|
return this.validResult.title
|
},
|
validIcon() {
|
if (!this.validResult.finished) {
|
return 'el-icon-loading'
|
} else if (this.validResult.success) {
|
return 'success'
|
} else {
|
return 'warning'
|
}
|
}
|
},
|
created() {
|
|
this.showValiding()
|
let formId = this.$route.query.code
|
//判断传参，决定是新建还是加载原始数据
|
this.loadInitFrom()
|
if (this.$isNotEmpty(formId)) {
|
this.isNew = false
|
this.loadFormInfo(formId)
|
}
|
let group = this.$route.query.group
|
this.setup.groupId = this.$isNotEmpty(group) ? parseInt(group) : null
|
},
|
beforeDestroy() {
|
this.stopTimer()
|
},
|
mounted() {
|
|
|
},
|
methods: {
|
convertToTreeData(data, parent,index,parentId) {
|
//index从1开始 从index_no=1的节点开始往下一个个找
|
const tempJson = data.find(f =>
|
f.index_no === index
|
)
|
//解析子审批节点
|
parent.children = {
|
"id": tempJson.id,
|
"parentId": parentId,
|
"name": "审批人",
|
"type": "APPROVAL",
|
"children":{},//必须要 不然选中的值无法传递
|
"props":
|
{
|
"assignedType": "ASSIGN_USER",
|
"nobody": {
|
"handler": "TO_PASS",
|
"assignedUser": []
|
},
|
"refuse": {
|
"type": "TO_END",
|
"target": ""
|
},
|
"assignedUser": [{"id": tempJson.board_id||tempJson.rule_code, "name": tempJson.name,"type":tempJson.board_id!=null?"group":"staff"}],
|
"approvalGroup":tempJson.board_id!=null?{"id":tempJson.board_id,"name":tempJson.name}:"",
|
"staffGroup":tempJson.board_id!=null?"":{"id":tempJson.rule_code,"name":tempJson.name},
|
}
|
}
|
//如果传过来的审批节点数组大于当前索引 说明下面还有
|
if (data.length >index) {
|
let getChildren = this.convertToTreeData(data, parent.children, index+1,parent.children.id)
|
parent.children=getChildren
|
}
|
return parent;
|
},
|
loadFormInfo(formId) {
|
let param = {"id": formId}
|
|
//获取流程详情
|
getFlowDetail(param).then(rsp => {
|
let form = rsp.data.data;
|
form.logo = ""
|
form.formItems = []
|
form.process =this.convertToTreeData(form.steps, {
|
"id": form.id, "parentId": null,
|
"type": "ROOT",
|
"name": "发起人",
|
"desc": "任何人", "props": {
|
"assignedUser": [],
|
"formPerms": []
|
},
|
},1,form.id)
|
form.name=this.$Utils.decode(form.name);
|
this.form.name= form.name
|
form.templateName = form.name
|
form.groupId = null;
|
|
|
this.$store.commit('loadForm', form)
|
}).catch(err => {
|
this.$message.error(err)
|
})
|
},
|
loadInitFrom() {
|
this.$store.commit('loadForm', {
|
formId: null,
|
formName: "",
|
logo: {
|
icon: "el-icon-eleme",
|
background: "#1e90ff"
|
},
|
settings: {
|
commiter: [],
|
admin: [],
|
sign: false,
|
notify: {
|
types: ["APP"],
|
title: "消息通知标题"
|
}
|
},
|
groupId: undefined,
|
formItems: [],
|
process: {
|
id: "",
|
parentId: null,
|
type: "ROOT",
|
name: "发起人",
|
desc: "任何人",
|
props: {
|
assignedUser: [],
|
formPerms: []
|
},
|
children: {}
|
},
|
remark: "备注说明"
|
})
|
},
|
validateDesign() {
|
this.validVisible = true
|
this.validStep = 0
|
this.showValiding()
|
this.stopTimer()
|
this.timer = setInterval(() => {
|
this.validResult.errs = this.$refs[this.validComponents[this.validStep]].validate()
|
if (Array.isArray(this.validResult.errs) && this.validResult.errs.length === 0) {
|
this.validStep++;
|
if (this.validStep >= this.validOptions.length) {
|
this.stopTimer()
|
this.showValidFinish(true)
|
}
|
} else {
|
this.stopTimer()
|
this.validOptions[this.validStep].status = 'error'
|
this.showValidFinish(false, this.getDefaultValidErr())
|
}
|
}, 300)
|
},
|
getDefaultValidErr() {
|
switch (this.validStep) {
|
case 0:
|
return '请检查基础设置项';
|
case 1:
|
return '请检查审批表单相关设置'
|
case 2:
|
return '请检查审批流程，查看对应标注节点错误信息'
|
case 3:
|
return '请检查扩展设置'
|
default:
|
return '未知错误'
|
}
|
},
|
showValidFinish(success, err) {
|
this.validResult.success = success
|
this.validResult.finished = true
|
this.validResult.title = success ? '校验完成 😀' : '校验失败 '
|
this.validResult.desc = success ? '设置项校验成功，是否提交？' : err
|
this.validResult.action = success ? '提 交' : '去修改'
|
},
|
showValiding() {
|
this.validResult = {
|
errs: [],
|
finished: false,
|
success: false,
|
title: '检查中...',
|
action: '处理',
|
desc: '正在检查设置项'
|
}
|
this.validStep = 0
|
this.validOptions.forEach(op => {
|
op.status = ''
|
op.icon = ''
|
op.description = ''
|
})
|
},
|
doAfter() {
|
|
if (this.validResult.success) {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.doPublish()
|
}
|
})
|
|
}
|
else {
|
this.validVisible = false
|
}
|
},
|
stopTimer() {
|
if (this.timer) {
|
clearInterval(this.timer)
|
}
|
},
|
preview() {
|
this.validateDesign()
|
},
|
publishProcess() {
|
this.validateDesign()
|
},
|
//审批流树形结构转换为json
|
dataTree(data, index, parentId) {
|
let result = [];//存放结果
|
let names = [];//存放审批人
|
let ruleCode = [];//架构组
|
data.props.assignedUser.forEach(org => names.push(org.name));
|
let ids = []
|
data.props.assignedUser.forEach(org => ids.push(org.id));
|
// 修改的时候 根据选中类型是架构还是审批组 渲染数据
|
if(data.props.assignedUser[0].type==='staff'){
|
ids = [];
|
data.props.assignedUser.forEach(org => ruleCode.push(org.id));
|
}else{
|
//判断选中的数据类型是架构还是审批组 如果是架构 将审批组清空 board_id置为空
|
if (data.props.staffGroup!=undefined&& Object.keys(data.props.staffGroup).length!==0) {
|
ids = [];
|
data.props.assignedUser.forEach(org => ruleCode.push(org.id));
|
}
|
}
|
|
//插入流程数组项
|
result.push(
|
{
|
name: String(names).replaceAll(',', '、'),
|
id: data.id||'',
|
parent_id: parentId||'',
|
index_no: index,
|
board_id: ids.length > 0 ? String(ids).replaceAll(',', '、') : null,
|
rule_code: ruleCode.length > 0 ? String(ruleCode).replaceAll(',', '、') : null
|
}
|
) // 只取当前节点的信息，不包括 children
|
//如果下面还有子项 继续往下读数据
|
if (data.children!==undefined&&Object.keys(data.children).length !== 0) {
|
let getChildren = this.dataTree(data.children, index + 1, parentId)
|
result = result.concat(getChildren)
|
}
|
|
return result
|
},
|
doPublish() {
|
this.$confirm('确认发布后流程立即生效，是否继续?', '提示', {
|
confirmButtonText: '发布',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let processNew = JSON.parse(JSON.stringify(this.setup.process));
|
//判断条件分支
|
let data = {};
|
data.name = this.form.name;
|
data.id = processNew.id||''
|
let i = 1;
|
//转数据结构
|
data.steps = this.dataTree(processNew.children, i, processNew.id);
|
let template = {data}
|
createFlow(template).then(rsp => {
|
this.$message.success("创建流程成功")
|
this.$router.push("/formsPanel")
|
}).catch(err => {
|
this.$message.error(err)
|
})
|
})
|
},
|
conditionRecursion(process) {
|
if (null != process && undefined != process) {
|
if (null != process.branchs && undefined != process.branchs) {
|
process.branchs.map((item, i) => {
|
if (i == process.branchs.length - 1) {
|
item.typeElse = true;
|
} else {
|
item.typeElse = false;
|
}
|
if (null != item.children && undefined != item.children) {
|
this.conditionRecursion(item.children)
|
} else {
|
return item;
|
}
|
});
|
}
|
this.conditionRecursion(process.children)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
.layout-body {
|
min-width: 980px;
|
}
|
|
/deep/ .el-step {
|
.is-success {
|
color: #2a99ff;
|
border-color: #2a99ff;
|
}
|
}
|
|
.err-info {
|
max-height: 180px;
|
overflow-y: auto;
|
|
& > div {
|
padding: 5px;
|
margin: 2px 0;
|
width: 220px;
|
text-align: left;
|
border-radius: 3px;
|
background: rgb(242 242 242);
|
}
|
|
i {
|
margin: 0 5px;
|
}
|
}
|
|
::-webkit-scrollbar {
|
width: 2px;
|
height: 2px;
|
background-color: white;
|
}
|
|
::-webkit-scrollbar-thumb {
|
border-radius: 16px;
|
background-color: #e8e8e8;
|
}
|
|
</style>
|
