目录代码整合
This commit is contained in:
aixianling
@@ -0,0 +1,482 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user