481 lines
13 KiB
Vue
481 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-person-select :chooseUserList="item.candidateList" v-if="item.candidateApproverType==1" :instance="instance" customRightText url="/user/page"
|
||
headerTitle="人员列表" dialogTitle="选择" :isMultiple="true" @selectPerson="e => changeCharge(e, index)">
|
||
<template v-slot:option="{ item }">
|
||
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||
<span>{{ item.phone }}</span>
|
||
</template>
|
||
</ai-person-select>
|
||
</div>
|
||
</el-step>
|
||
</el-steps>
|
||
</template>
|
||
</ai-card>
|
||
<ai-dialog :title="titleType" class="editStyle" :visible.sync="isAddStep" width="575px" height="380px"
|
||
:close-on-click-modal="false" @onConfirm="saveAddProgress">
|
||
<el-form size="small" :model="nodeObj" label-width="100px" ref="addForm" :rules="addRules">
|
||
<el-form-item label="审批步骤" prop="nodeName">
|
||
<el-input v-model="nodeObj.nodeName" placeholder="如：部门主管审批（限10个字）" :maxLength="10" clearable/>
|
||
</el-form-item>
|
||
<el-form-item label="审批方式" prop="nodeType">
|
||
<el-radio-group v-model="nodeObj.nodeType" @change="nodeObj.areaFilter='',nodeObj.annexEnable='',nodeObj.pictureEnable=''">
|
||
<el-radio v-for="op in approvalWays" :key="op.value" :label="op.value">
|
||
<span v-text="op.label"/>
|
||
<el-popover placement="top-start" width="200" trigger="click" :content="op.tips">
|
||
<el-button type="text" slot="reference" icon="el-icon-warning" class="color-666"/>
|
||
</el-popover>
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<template v-if="nodeObj.nodeType==2">
|
||
<el-form-item label="数据权限" prop="areaFilter">
|
||
<el-radio-group v-model="nodeObj.areaFilter">
|
||
<el-radio v-for="op in dict.getDict('processNodeAreaFilter')" :key="op.dictValue" :label="op.dictValue">
|
||
<span v-text="op.dictName"/>
|
||
<el-popover placement="top-start" width="200" trigger="click" :content="dict.getLabel('processNodeAreaFilterTips',op.dictValue)">
|
||
<el-button type="text" slot="reference" icon="el-icon-warning" class="color-666"/>
|
||
</el-popover>
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="附件图片">
|
||
<el-checkbox v-model="nodeObj.annexEnable" true-label="1" false-label="0">附件</el-checkbox>
|
||
<el-checkbox v-model="nodeObj.pictureEnable" true-label="1" false-label="0">图片</el-checkbox>
|
||
</el-form-item>
|
||
</template>
|
||
</el-form>
|
||
</ai-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: [],
|
||
},
|
||
approvalWays: [
|
||
{value: 2, label: '或签', tips: '或签是指该节点指定多名负责人审批时，其中任何一人完成审批即可。适合一个事项只需要某个岗位任何一人审批即可的业务场景。'},
|
||
{value: 3, label: '抄送', tips: '抄送是指一个事项审批完成后，抄送给需要知晓的单位或个人，被抄送的对象可以查阅该事项内容，无需审批。适合一个事项无需对方审批，但审批完成后需要通知对方知晓的业务场景。'},
|
||
],
|
||
isAddStep: false,
|
||
isSelectImg: false,
|
||
isSelectUnit: false,
|
||
isSelectPerson: false,
|
||
nodeObj: {},
|
||
indexType: '',
|
||
titleType: '',
|
||
bomIndex: '',
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
addRules() {
|
||
return {
|
||
nodeName: [
|
||
{required: true, message: '请输入审批节点名称', trigger: 'change'}
|
||
],
|
||
nodeType: [{required: true, message: '请选择审批方式', trigger: 'change'}],
|
||
areaFilter: [{required: true, message: '请选择数据权限'}],
|
||
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)
|
||
}).catch(() => 0)
|
||
},
|
||
changeCharge(e, i) {
|
||
this.$set(this.form.processNodeList[i], 'candidateList', e.map(v => {
|
||
return {
|
||
...v,
|
||
candidate: v.id
|
||
}
|
||
}))
|
||
},
|
||
/**
|
||
* 添加流程
|
||
*/
|
||
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;
|
||
this.nodeObj = this.$copy(item)
|
||
} else {
|
||
this.titleType = '添加审批步骤';
|
||
this.init();
|
||
}
|
||
},
|
||
// 确定添加审批步骤
|
||
saveAddProgress() {
|
||
this.$refs.addForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.nodeObj.scopeCandidates == '0') this.nodeObj.candidateList = [];
|
||
if (this.indexType == 1) {
|
||
this.form.processNodeList.push(this.$copy(this.nodeObj));
|
||
} else {
|
||
this.form.processNodeList.splice(this.bomIndex, 1, this.$copy(this.nodeObj));
|
||
}
|
||
this.$refs.addForm.resetFields();
|
||
this.isAddStep = false;
|
||
}
|
||
})
|
||
},
|
||
init() {
|
||
this.nodeObj = {
|
||
candidateApproverType: '1',
|
||
candidateList: [],
|
||
nodeIndex: '',
|
||
nodeName: '',
|
||
nodeType: '',
|
||
scopeCandidates: '1',
|
||
annexEnable: null,
|
||
pictureEnable: null,
|
||
areaFilter: null
|
||
};
|
||
this.$refs.addForm?.resetFields();
|
||
},
|
||
},
|
||
created() {
|
||
this.dict.load("processNodeAreaFilter", 'processNodeAreaFilterTips')
|
||
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;
|
||
}
|
||
}
|
||
|
||
.color-666 {
|
||
color: #666;
|
||
}
|
||
|
||
.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: 14px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-step__icon.is-text {
|
||
border: 2px solid #2266FF;
|
||
background: #2266FF;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
::v-deep .el-step__line {
|
||
background-color: #D0D4DC;
|
||
}
|
||
}
|
||
</style>
|