<template>
|
<div>
|
<el-form label-position="top" label-width="90px">
|
<el-form-item label="⚙ 选择审批组或审批架构" prop="text" class="user-type">
|
<el-select @change="selected(this,'group')" value-key="id" style="width: 80%;" size="small"
|
v-model="nodeProps.approvalGroup" placeholder="请选择审批组">
|
<el-option v-for="approvals in approvalGroups" :label="approvals.name" :value="approvals"
|
:key="approvals.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="⚙ 选择审批组或审批架构" prop="text" class="user-type">
|
<el-select @change="selected(this,'staff')" value-key="id" style="width: 80%;" size="small"
|
v-model="nodeProps.staffGroup" placeholder="请选择审批架构">
|
<el-option v-for="staffApprovals in staffGroups" :label="staffApprovals.name" :value="staffApprovals"
|
:key="staffApprovals.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-divider></el-divider>
|
<el-form-item label="参数名">
|
<el-input style="width: 80%;" placeholder="参数名" v-model="nodeProps.params" size="small" clearable/>
|
</el-form-item>
|
<el-divider></el-divider>
|
<el-form-item label="触发事件">
|
<div>
|
<el-button type="primary" size="mini" icon="el-icon-plus" style="margin: 0 15px 15px 0" round
|
@click="addConditionGroup">
|
添加审批触发事件
|
</el-button>
|
</div>
|
<div style="width: 100%" v-for="(group, index) in selectedNode.props.groups" :key="index + '_g'" class="group">
|
<div class="group-header">
|
<span class="group-name">触发事件{{ index + 1 }}</span>
|
<i class="el-icon-delete" @click="delGroup(index)"></i>
|
</div>
|
<el-row :gutter="10">
|
<el-col :span="12">
|
<el-select @change="selected(this)" size="small" v-model="group.action" placeholder="请选择审批组">
|
<el-option v-for="actionItem in actions" :label="actionItem.label" :value="actionItem"
|
:key="actionItem.value"></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="12">
|
<el-input placeholder="排序" v-model="group.sort" size="small" clearable></el-input>
|
</el-col>
|
<el-col :span="4">
|
<span>java方法:</span>
|
</el-col>
|
<el-col :span="20">
|
<el-input placeholder="java方法" v-model="group.method" size="small" clearable></el-input>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form-item>
|
<el-form-item label="🙅 如果办理被驳回 👇">
|
<el-radio-group @input="setValue" v-model="nodeProps.refuse.type">
|
<el-radio label="TO_END">直接结束流程</el-radio>
|
<el-radio label="TO_BEFORE">驳回到上级办理节点</el-radio>
|
<el-radio label="TO_NODE">驳回到指定节点</el-radio>
|
</el-radio-group>
|
<div v-if="nodeProps.refuse.type === 'TO_NODE'">
|
<span>指定节点:</span>
|
<el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转节点" size="small"
|
v-model="nodeProps.refuse.target">
|
<el-option v-for="(node, i) in nodeOptions" :key="i" :label="node.name" :value="node.id"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
</el-form>
|
<org-picker :title="pickerTitle" multiple :type="orgPickerType" ref="orgPicker" :selected="orgPickerSelected"
|
@ok="selected"/>
|
</div>
|
</template>
|
<script>
|
import OrgPicker from "@/components/common/OrgPicker";
|
import {getDict, getEntitySet} from "@/api/design";
|
export default {
|
name: "ApprovalNodeConfig",
|
components: {OrgPicker},
|
props: {
|
config: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
showOrgSelect: false,
|
orgPickerSelected: [],
|
orgPickerType: 'user',
|
groupNames: ['1', '2', '3', '4', '6', 'F', 'G', 'H', 'I', 'J'],
|
approvalGroups: [
|
],
|
staffGroups: [],
|
actions: [
|
{"value": 'before', "label": '审批前'},
|
{"value": 'after', "label": '审批后'},
|
],
|
approvalTypes: [
|
{name: '指定人员', type: 'ASSIGN_USER'},
|
{name: '发起人自选', type: 'SELF_SELECT'},
|
{name: '连续多级主管', type: 'LEADER_TOP'},
|
{name: '主管', type: 'LEADER'},
|
{name: '角色', type: 'ROLE'},
|
{name: '发起人自己', type: 'SELF'},
|
{name: '表单内联系人', type: 'FORM_USER'}
|
]
|
}
|
},
|
computed: {
|
nodeOptions() {
|
let values = []
|
const excType = ['ROOT', 'EMPTY', "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"]
|
this.$store.state.nodeMap.forEach((v) => {
|
if (excType.indexOf(v.type) === -1) {
|
values.push({id: v.id, name: v.name})
|
}
|
})
|
return values
|
},
|
selectedNode() {
|
return this.$store.state.selectedNode
|
},
|
nodeProps() {
|
|
return this.$store.state.selectedNode.props
|
},
|
select() {
|
console.log("this.config--select", this.config)
|
return this.config.assignedUser
|
},
|
|
pickerTitle() {
|
switch (this.orgPickerType) {
|
case 'user':
|
return '请选择人员';
|
case 'role':
|
return '请选择系统角色';
|
default:
|
return null;
|
}
|
},
|
},
|
mounted() {
|
this.getApprovalGroup();
|
this.getStaffGroup();
|
},
|
methods: {
|
getApprovalGroup() {
|
let template = {"dataname": "sys_state_board", "attachMeta": true}
|
getEntitySet(template).then(rsp => {
|
this.approvalGroups = rsp.data.data.entityset
|
}).catch(err => this.$message.error('获取审批流程异常'))
|
},
|
getStaffGroup() {
|
let template = {"code": "position_sales"}
|
getDict(template).then(rsp => {
|
this.staffGroups = this.$Utils.decode(rsp.data.data.dictionary.items)
|
this.staffGroups.forEach(item => item.name = item.value);
|
this.staffGroups.forEach(item => item.id = item.code);
|
}).catch(err => this.$message.error('获取审批流程异常'))
|
},
|
//如果切换选箱不是指定节点 那就把之前选择的指定节点信息 给清除掉 避免提交上去
|
setValue() {
|
if (this.nodeProps.refuse.type !== 'TO_NODE') {
|
this.nodeProps.refuse.target = '';
|
|
}
|
},
|
delGroup(index) {
|
this.selectedNode.props.groups.splice(index, 1)
|
},
|
addConditionGroup() {
|
console.log("this.config", this.config)
|
this.config.groups.push({
|
})
|
},
|
selected(select, type) {
|
console.log("输出选中select", this.nodeProps)
|
this.nodeProps.assignedUser = []
|
|
if (type === 'group') {
|
this.nodeProps.staffGroup = {}
|
this.nodeProps.assignedUser.push({
|
"id": this.nodeProps.approvalGroup.id,
|
"name": this.nodeProps.approvalGroup.name,
|
"type": "group"
|
})
|
} else {
|
this.nodeProps.approvalGroup = {}
|
this.nodeProps.assignedUser.push(
|
{
|
"id": this.nodeProps.staffGroup.code,
|
"name": this.nodeProps.staffGroup.value,
|
"type": "staff"
|
}
|
)
|
}
|
console.log("assignedUser", this.config)
|
console.log("this.config.props", this.config)
|
this.orgPickerSelected.length = 0
|
},
|
removeOrgItem(index) {
|
this.select.splice(index, 1)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.el-row {
|
margin-bottom: 20px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.user-type {
|
/deep/ .el-radio {
|
width: 110px;
|
margin-top: 10px;
|
margin-bottom: 20px;
|
}
|
}
|
|
/deep/ .line-mode {
|
.el-radio {
|
width: 150px;
|
margin: 5px;
|
}
|
}
|
|
/deep/ .el-form-item__label {
|
line-height: 25px;
|
}
|
|
/deep/ .approve-mode {
|
.el-radio {
|
float: left;
|
width: 100%;
|
display: block;
|
margin-top: 15px;
|
}
|
}
|
|
/deep/ .approve-end {
|
position: relative;
|
|
.el-radio-group {
|
width: 160px;
|
}
|
|
.el-radio {
|
margin-bottom: 5px;
|
width: 100%;
|
}
|
|
.approve-end-leave {
|
position: absolute;
|
bottom: -5px;
|
left: 150px;
|
}
|
}
|
|
/deep/ .el-divider--horizontal {
|
margin: 10px 0;
|
}
|
|
</style>
|
