You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
7.4 KiB
254 lines
7.4 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-11-24 13:18:02
|
|
@ 备注: 流程执行
|
|
-->
|
|
<script lang='ts' setup>
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
import OrgUserPage from "@/views/public/orguser/orguser.vue"
|
|
import OrgAllUserPage from "@/views/public/orguser/orgalluser.vue"
|
|
|
|
// import { nodeFlow,conditionInfo,nodelPeoples } from '@/api/taskapi/types'
|
|
import { gainRunTaskFlow,submitApprovalResults } from '@/api/DesignForm/requestapi'
|
|
//引入图标
|
|
import squareUrlOne from "@/assets/images/1.png"
|
|
import squareUrlTwo from "@/assets/images/2.png"
|
|
|
|
const state = reactive({
|
|
circleUrl:squareUrlTwo,
|
|
squareUrl: squareUrlOne,
|
|
sizeList: ['small', '', 'large'] as const,
|
|
})
|
|
const { circleUrl, squareUrl, sizeList } = toRefs(state)
|
|
|
|
const props = defineProps({
|
|
flowKey:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
currentProgress:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(["update:flowary","updatelist"]);
|
|
|
|
const flowLoading = ref(false)
|
|
const openOrClose = ref(false) //开启指定人员选择
|
|
const openclosebox = ref(false) //开启全部人员选择
|
|
const presetPersonnel = ref<any>([]); //预设选择人
|
|
const selectedPeople = ref<any>([]); //已选择人
|
|
const flowOpinion = ref(false) //是否可以写评论
|
|
const currentStep = ref<number>(props.currentProgress)
|
|
|
|
const flowMaps = ref<any[]>();
|
|
|
|
//获取任务流程
|
|
const gainRunFlowTask = () =>{
|
|
flowLoading.value = true
|
|
let sendInfo = {
|
|
id:props.flowKey
|
|
}
|
|
gainRunTaskFlow(sendInfo)
|
|
.then((data:any) =>{
|
|
console.log("获取流程----->",data)
|
|
flowMaps.value = data.data.flowList
|
|
flowOpinion.value = data.data.operational
|
|
currentStep.value = data.data.current_step
|
|
emits("update:flowary", data.data.flowList);
|
|
})
|
|
.finally(()=>{
|
|
flowLoading.value = false
|
|
})
|
|
}
|
|
//组件渲染之前
|
|
onBeforeMount(()=>{
|
|
gainRunFlowTask();
|
|
})
|
|
//组件渲染完毕
|
|
onMounted(()=>{
|
|
|
|
})
|
|
//判断是否可以添加人员
|
|
const judgeAddUser = (val:any):boolean =>{
|
|
console.log("获取流程----1111->",val.judgelist)
|
|
if(val.judgelist){
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
let zhiXingStep = 1;
|
|
//添加操作人
|
|
const addPeople = (val:any) =>{
|
|
zhiXingStep = val.step
|
|
presetPersonnel.value = val.pendpers
|
|
selectedPeople.value = val.operator
|
|
if(val.runscope == 1){
|
|
openclosebox.value = true
|
|
}else{
|
|
openOrClose.value = true
|
|
}
|
|
}
|
|
//更新节点操作人
|
|
const updateNode = (val:any) =>{
|
|
<<<<<<< HEAD
|
|
if(flowMaps.value && flowMaps.value.length > 0){
|
|
=======
|
|
if(flowMaps.value&& flowMaps.value.length > 0){
|
|
>>>>>>> v3
|
|
flowMaps.value.forEach((item:any) =>{
|
|
if(item.step == zhiXingStep){
|
|
item.operator = val
|
|
}
|
|
})
|
|
}
|
|
<<<<<<< HEAD
|
|
|
|
=======
|
|
>>>>>>> v3
|
|
}
|
|
const sendFlowInfo = ref<string>() //审批意见
|
|
//提交审批
|
|
const yesOrNo = (val:string,agreeOrRefuse:number) =>{
|
|
console.log("提交审批----1111->",val,agreeOrRefuse,sendFlowInfo.value)
|
|
let sendInfo = {
|
|
id:props.flowKey,
|
|
agreeOrRefuse:agreeOrRefuse,
|
|
suggest:sendFlowInfo.value,
|
|
flowlist:flowMaps.value
|
|
}
|
|
submitApprovalResults(sendInfo)
|
|
.then((data:any)=>{
|
|
|
|
// console.log("提交审批----22222->",data)
|
|
ElMessage({
|
|
message: '处理完成！',
|
|
type: 'success'
|
|
})
|
|
|
|
})
|
|
.finally(()=>{
|
|
gainRunFlowTask();
|
|
emits("updatelist");
|
|
})
|
|
|
|
}
|
|
defineExpose({gainRunFlowTask})
|
|
</script>
|
|
<template>
|
|
<div class="drawerFormBox boxRight">
|
|
<div class="flowBox">
|
|
<el-affix :offset="20" style="width:100%">
|
|
<el-text size="large">审批流程</el-text>
|
|
</el-affix>
|
|
|
|
<el-steps v-loading="flowLoading" element-loading-text="Loading..." direction="vertical" :active="currentStep">
|
|
<el-step v-for="item in flowMaps" :key="item.step">
|
|
<template #title>
|
|
{{ item.nodeName }}<span v-if="item.examinemode==1"> ● 依次审批</span><span v-if="item.examinemode==2"> ● 会签</span><span v-if="item.examinemode==3"> ● 或签</span>
|
|
</template>
|
|
<template #description>
|
|
<table>
|
|
<tr v-for="items in item.operator" :key="items.id">
|
|
<td valign="top" align="center" width="50">
|
|
<el-avatar v-if="items.iconbase64==''&&items.icon!=''" shape="square" fit="cover" :src="items.icon" />
|
|
<el-avatar v-else-if="items.iconbase64!=''" shape="square" fit="cover" :src="items.iconbase64" />
|
|
<el-avatar v-else shape="square" fit="cover" :src="squareUrl" />
|
|
</td>
|
|
<td valign="top" align="left">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-text>{{ items.departmentname }}</el-text>
|
|
<el-text><span v-if="items.departmentname"> - </span>{{ items.postname }}</el-text>
|
|
<el-text><span v-if="items.departmentname||items.postname"> - </span>{{ items.name }}</el-text>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<ul>
|
|
<li v-for="(logItem,logIndex) in items.log" :key="logIndex" class="logLi">
|
|
<el-text v-if="logItem.state==2" type="success">
|
|
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已同意</span>
|
|
</el-text>
|
|
<el-text v-else-if="logItem.state==3" type="danger">
|
|
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已驳回</span>
|
|
</el-text>
|
|
<el-text v-else-if="logItem.state==4" type="primary">
|
|
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已查看</span>
|
|
</el-text>
|
|
<el-text v-else>
|
|
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>未操作</span>
|
|
</el-text> · {{ logItem.time }}
|
|
</li>
|
|
</ul>
|
|
</el-col>
|
|
</el-row>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div v-if="item.judgelist" class="addUser" @click="addPeople(item)">
|
|
<svg-icon icon-class="addxuxian" size="50" />
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
</el-step>
|
|
</el-steps>
|
|
</div>
|
|
<el-affix v-if="flowOpinion" position="bottom" :offset="0">
|
|
<div class="approvalBoard">
|
|
<el-text size="large" class="appBoardTitle">审批意见</el-text>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-input
|
|
v-model="sendFlowInfo"
|
|
:autosize="{ minRows: 2, maxRows: 6 }"
|
|
type="textarea"
|
|
placeholder="请输入审批意见"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4"></el-col>
|
|
<el-col :span="8" class="juzhong"><el-button type="primary" style="width:100%" @click="yesOrNo(props.flowKey,1)">同意</el-button></el-col>
|
|
<el-col :span="8" class="juzhong"><el-button type="danger" style="width:100%" @click="yesOrNo(props.flowKey,2)">驳回</el-button></el-col>
|
|
<el-col :span="4"></el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-affix>
|
|
|
|
|
|
<OrgUserPage v-if="openOrClose" v-model:openclose="openOrClose" :preset-personnel="presetPersonnel" :selected-people="selectedPeople" @update-node="updateNode" />
|
|
<OrgAllUserPage v-if="openclosebox" v-model:openclosebox="openclosebox" :selected-people="selectedPeople" @update-node="updateNode" />
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.drawerFormBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.boxRight{
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
border-left: 1px solid #EEEEEE;
|
|
}
|
|
.flowBox{
|
|
width: 100%;
|
|
padding: 0 5px 0 10px;
|
|
}
|
|
.approvalBoard{
|
|
padding: 5px 10px;
|
|
background-color: #FFFFFF;
|
|
border-top: 1px solid #EEEEEE;
|
|
.juzhong{
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
}
|
|
.appBoardTitle{
|
|
padding: 5px 0 10px 0;
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|
|
|