483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
<template>
|
||
<div class="process-approval">
|
||
<ai-card title="流程设置">
|
||
<template #right>
|
||
<span class="iconfont iconAdd rightBtn"></span>
|
||
<span class="rightBtn" style="margin-left: 8px;" @click="addAppStep(1)">添加审批步骤</span>
|
||
</template>
|
||
<template #content>
|
||
<el-steps direction="vertical">
|
||
<el-step v-for="(item,index) in form.processNodeList" :key="index">
|
||
<div slot="title" class="step_title">
|
||
<p>{{ item.nodeName }}（{{ dict.getLabel('nodeType', item.nodeType) }}）</p>
|
||
<div class="peraoBtn">
|
||
<el-button type="text" :disabled="index==0" class="iconfont iconMoveUp"
|
||
@click="form.processNodeList[index] = form.processNodeList.splice(index-1, 1,form.processNodeList[index])[0]">
|
||
上移
|
||
</el-button>
|
||
<el-button type="text" :disabled="index==(form.processNodeList.length-1)" class="iconfont iconMoveDown"
|
||
@click="form.processNodeList[index] = form.processNodeList.splice(index+1, 1,form.processNodeList[index])[0]">
|
||
下移
|
||
</el-button>
|
||
<el-button type="text" class="iconfont iconEdit" @click="addAppStep(2,item,index)">
|
||
编辑
|
||
</el-button>
|
||
<el-button type="text" class="iconfont iconDelete" @click="deleteInfo(index)">
|
||
删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div slot="description" class="step_desc">
|
||
<div class="desc_style">
|
||
<p>
|
||
选人方式：<span>{{ dict.getLabel('candidateApproverType', item.candidateApproverType) }}</span>
|
||
</p>
|
||
</div>
|
||
<div class="desc_person" v-if="item.scopeCandidates==1||item.candidateApproverType==1">
|
||
<p class="desc_p">指定人员：</p>
|
||
<div class="desc_div">
|
||
<el-tag type="info" closable v-for="(value,i) in item.candidateList" :key="i"
|
||
@close="item.candidateList.splice(i,1)">
|
||
{{ value.name }}
|
||
</el-tag>
|
||
<el-button v-if="item.candidateList.length>0" type="text" @click="item.candidateList=[]">清空
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<ai-wechat-selecter slot="append" :instance="instance" :props="{id:'wxUserId',label:'name'}"
|
||
v-model="item.candidateList" v-if="item.candidateApproverType==1">
|
||
<el-button size="mini" type="primary">选择指定人员</el-button>
|
||
</ai-wechat-selecter>
|
||
</div>
|
||
</el-step>
|
||
</el-steps>
|
||
</template>
|
||
</ai-card>
|
||
<el-dialog :title="titleType" class="editStyle" :visible.sync="isAddStep" width="575px" height="380px"
|
||
:close-on-click-modal="false">
|
||
<el-form :model="nodeObj" label-width="120px" ref="addForm" :rules="addRules">
|
||
<el-form-item label="审批步骤名称：" prop="nodeName">
|
||
<el-input size="small" v-model="nodeObj.nodeName" placeholder="如：部门主管审批（限10个字）" :maxLength="10"
|
||
clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="审批方式：" prop="nodeType">
|
||
<el-radio-group v-model="nodeObj.nodeType">
|
||
<section style="position: relative;top: 10px;margin-bottom: 30px;">
|
||
<el-radio :label="2">或签
|
||
<el-popover
|
||
placement="top-start"
|
||
width="200"
|
||
trigger="click"
|
||
content="或签是指该节点指定多名负责人审批时，其中任何一人完成审批即可。适合一个事项只需要某个岗位任何一人审批即可的业务场景。">
|
||
<el-button class="el-icon-warning" slot="reference"
|
||
style="padding:0;height:14px;border:0;"></el-button>
|
||
</el-popover>
|
||
</el-radio>
|
||
<el-radio :label="3">抄送
|
||
<el-popover
|
||
placement="top-start"
|
||
width="200"
|
||
trigger="click"
|
||
content="抄送是指一个事项审批完成后，抄送给需要知晓的单位或个人，被抄送的对象可以查阅该事项内容，无需审批。适合一个事项无需对方审批，但审批完成后需要通知对方知晓的业务场景。">
|
||
<el-button class="el-icon-warning" slot="reference"
|
||
style="padding:0;height:14px;border:0;"></el-button>
|
||
</el-popover>
|
||
</el-radio>
|
||
</section>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" style="text-align: center;">
|
||
<el-button style="width: 92px;" size="small" @click="isAddStep = false">取消</el-button>
|
||
<el-button style="width: 92px;" size="small" type="primary" @click="saveAddProgress('addForm')">确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "processApproval",
|
||
inject: ['config'],
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
approvalSteps: String
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
processNodeList: [],
|
||
},
|
||
areaId: "",
|
||
isAddStep: false,
|
||
isSelectImg: false,
|
||
isSelectUnit: false,
|
||
isSelectPerson: false,
|
||
nodeObj: {
|
||
candidateApproverType: '1',
|
||
candidateList: [],
|
||
nodeIndex: '',
|
||
nodeName: '',
|
||
nodeType: '',
|
||
scopeCandidates: ''
|
||
},
|
||
indexType: '',
|
||
titleType: '',
|
||
bomIndex: '',
|
||
}
|
||
},
|
||
computed: {
|
||
addRules() {
|
||
return {
|
||
nodeName: [
|
||
{required: true, message: '请输入审批节点名称', trigger: 'change'}
|
||
],
|
||
nodeType: [
|
||
{required: true, message: '请选择审批方式', trigger: 'change'}
|
||
],
|
||
candidateApproverType: [
|
||
{required: true, message: '请选择选人方式', trigger: 'change'}
|
||
],
|
||
scopeCandidates: [
|
||
{required: true, message: '请选择选人范围', trigger: 'change'}
|
||
]
|
||
}
|
||
},
|
||
...mapState(['user'])
|
||
},
|
||
methods: {
|
||
handleProcessApproval() {
|
||
return Promise.resolve(this.form)
|
||
},
|
||
/**
|
||
*删除
|
||
* */
|
||
deleteInfo(index) {
|
||
this.$confirm("是否删除").then(() => {
|
||
this.form.processNodeList.splice(index, 1)
|
||
})
|
||
},
|
||
/**
|
||
* 添加流程
|
||
* @param index
|
||
* @param item
|
||
* @param i
|
||
*/
|
||
addAppStep(index, item, i) {
|
||
this.isAddStep = true;
|
||
this.bomIndex = i;
|
||
this.indexType = index;
|
||
if (index == 2) {
|
||
this.titleType = '编辑审批步骤';
|
||
item.nodeType = item.nodeType * 1;
|
||
item.candidateApproverType = item.candidateApproverType * 1;
|
||
item.scopeCandidates = item.scopeCandidates * 1;
|
||
this.nodeObj = JSON.parse(JSON.stringify(item));
|
||
} else {
|
||
this.titleType = '添加审批步骤';
|
||
if (this.form.processNodeList.length > 0) {
|
||
this.init();
|
||
}
|
||
}
|
||
},
|
||
// 确定添加审批步骤
|
||
saveAddProgress(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
if (this.nodeObj.scopeCandidates == 0) this.nodeObj.candidateList = [];
|
||
if (this.indexType == 1) {
|
||
this.form.processNodeList.push(JSON.parse(JSON.stringify(this.nodeObj)));
|
||
} else {
|
||
this.form.processNodeList.splice(this.bomIndex, 1, JSON.parse(JSON.stringify(this.nodeObj)));
|
||
}
|
||
this.$refs[formName].resetFields();
|
||
this.isAddStep = false;
|
||
}
|
||
})
|
||
},
|
||
init() {
|
||
this.nodeObj = {
|
||
candidateApproverType: '1',
|
||
candidateList: [],
|
||
nodeIndex: '',
|
||
nodeName: '',
|
||
nodeType: '',
|
||
scopeCandidates: ''
|
||
};
|
||
this.$refs['addForm'].resetFields();
|
||
},
|
||
},
|
||
created() {
|
||
this.areaId = this.user.info.areaId.substring(0, 6) + '000000'
|
||
if (this.config.detailObj?.id) {
|
||
|
||
Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.process-approval {
|
||
.rightBtn {
|
||
font-size: 14px;
|
||
color: #5088FF;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.step_title {
|
||
font-weight: 700;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
display: flex;
|
||
padding: 0 8px;
|
||
justify-content: space-between;
|
||
color: #333;
|
||
|
||
p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
div {
|
||
span {
|
||
margin-left: 16px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.step_desc {
|
||
font-size: 14px;
|
||
padding: 8px;
|
||
color: #999;
|
||
margin-bottom: 20px;
|
||
|
||
.desc_style {
|
||
display: flex;
|
||
margin-bottom: 16px;
|
||
|
||
p {
|
||
margin-right: 80px;
|
||
}
|
||
|
||
span {
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.desc_person {
|
||
display: flex;
|
||
margin-bottom: 12px;
|
||
|
||
.desc_p {
|
||
position: relative;
|
||
top: 4px;
|
||
width: 70px;
|
||
}
|
||
|
||
.desc_div {
|
||
flex: 1;
|
||
}
|
||
|
||
.el-tag {
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.add_btn {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
background: #F3F6F9;
|
||
width: 100%;
|
||
text-align: center;
|
||
|
||
.el-button {
|
||
width: 92px;
|
||
}
|
||
}
|
||
|
||
.select_per {
|
||
width: 640px;
|
||
height: 400px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: auto;
|
||
|
||
.add_item {
|
||
width: 310px;
|
||
height: 400px;
|
||
background: rgba(252, 252, 252, 1);
|
||
border-radius: 2px;
|
||
border: 1px solid rgba(208, 212, 220, 1);
|
||
position: relative;
|
||
overflow: auto;
|
||
|
||
.add_top {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: rgba(245, 245, 245, 1);
|
||
border-bottom: 1px solid rgba(208, 212, 220, 1);
|
||
padding: 0 8px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tree_list {
|
||
width: 100%;
|
||
height: 360px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.add_buttom {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
font-size: 12px;
|
||
width: 310px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
z-index: 10000;
|
||
background: rgba(245, 246, 247, 1);
|
||
color: rgba(51, 51, 51, 1);
|
||
box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add_tag {
|
||
width: 310px;
|
||
height: 360px;
|
||
overflow-y: auto;
|
||
|
||
.el-tag {
|
||
margin: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
margin-right: 16px;
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.icon_style {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.icon:hover {
|
||
border-color: #5088FF;
|
||
}
|
||
|
||
.icon_color {
|
||
border-color: #5088FF;
|
||
}
|
||
}
|
||
|
||
.dia_per_content {
|
||
width: 640px;
|
||
height: 400px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: auto;
|
||
|
||
.add_item {
|
||
width: 310px;
|
||
height: 400px;
|
||
background: rgba(252, 252, 252, 1);
|
||
border-radius: 2px;
|
||
border: 1px solid rgba(208, 212, 220, 1);
|
||
position: relative;
|
||
overflow: auto;
|
||
|
||
.add_top {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: rgba(245, 245, 245, 1);
|
||
border-bottom: 1px solid rgba(208, 212, 220, 1);
|
||
padding: 0 8px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tree_list {
|
||
width: 100%;
|
||
height: 360px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.add_buttom {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
font-size: 12px;
|
||
width: 310px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
z-index: 10000;
|
||
background: rgba(245, 246, 247, 1);
|
||
color: rgba(51, 51, 51, 1);
|
||
box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add_tag {
|
||
width: 310px;
|
||
height: 360px;
|
||
overflow-y: auto;
|
||
|
||
.el-tag {
|
||
margin: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.peraoBtn {
|
||
.el-button--text {
|
||
color: #333;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-step__icon.is-text {
|
||
border: 2px solid #2266FF;
|
||
background: #2266FF;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
::v-deep .el-step__line {
|
||
background-color: #D0D4DC;
|
||
}
|
||
}
|
||
</style>
|