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.
401 lines
15 KiB
401 lines
15 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-19 09:50:45
|
|
@ 备注: 流程和历史记录
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { gainRunFlowStart,gainRunTaskFlow,startRunFlow,runTaskFlow,afreshRunWorkflow } from '@/api/lowCode/taskapi/management'
|
|
import squareUrl from '@/assets/image/1.png'
|
|
const props = defineProps({
|
|
types:{
|
|
type:Number,
|
|
default:1,
|
|
},
|
|
logList:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appPageInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appFlowInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
stateForm:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
}
|
|
|
|
});
|
|
const types = computed({
|
|
get() {
|
|
return props.types
|
|
},
|
|
set(val: number) {
|
|
return val
|
|
}
|
|
});
|
|
const pageLog = computed({
|
|
get() {
|
|
if(props.logList&&props.logList.length>0){
|
|
return props.logList
|
|
}else{
|
|
return []
|
|
}
|
|
|
|
},
|
|
set(val: number) {
|
|
return val
|
|
}
|
|
});
|
|
|
|
//工作流相关
|
|
const flowLoading = ref(false) //loading
|
|
const flowMap = ref<any[]>([]); //工作流
|
|
const nextStep = ref<number>(0);
|
|
const currentProgress = ref<number>(1);
|
|
const nodeKey = ref<string>('');
|
|
const ruleForm = ref(); //表单
|
|
const flowOpinion = ref(false) //是否可以写评论
|
|
const sendFlowInfo = ref<string>() //审批意见
|
|
const flowAndLog = ref<number>(1); //1：啥都有;2:只有流程；3：只有历史记录；4：啥都没有
|
|
const activeName = ref<string>("log")
|
|
onBeforeMount(() => {
|
|
newAddPageData()
|
|
|
|
})
|
|
|
|
watch(()=>props.stateForm,(val)=>{
|
|
newAddPageData()
|
|
},{tree:true})
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-19 10:41:41
|
|
@ 功能: 新增时获取流程列表
|
|
*/
|
|
const newAddPageData = () => {
|
|
flowLoading.value = true
|
|
if(types.value == 1){
|
|
console.log("新增时获取流程列表3",props.stateForm)
|
|
console.log("新增时获取流程列表1",props.stateForm.flowIsTrue,props.stateForm.flowKey)
|
|
if(props.stateForm&&props.stateForm.flowIsTrue&&props.stateForm.flowKey){
|
|
|
|
gainRunFlowStart({id:props.stateForm.flowKey})
|
|
.then(({data})=>{
|
|
console.log("获取流程==1==>",data)
|
|
flowMap.value = data.flowList
|
|
nextStep.value = data.nextStep
|
|
currentProgress.value = data.Step
|
|
nodeKey.value = data.nodeKey
|
|
flowLoading.value = false;
|
|
if(data.flowList&&data.flowList.length > 0){
|
|
activeName.value = "flow"
|
|
}else{
|
|
activeName.value = "log"
|
|
}
|
|
})
|
|
}
|
|
|
|
}else{
|
|
console.log("获取流程==2=1=>",props.appPageInfo)
|
|
if(props.appPageInfo && props.appPageInfo.runFlowId && props.appPageInfo.runFlowId != "0" && props.appPageInfo.runFlowId != ""){
|
|
gainRunTaskFlow({id:props.appPageInfo.runFlowId})
|
|
.then(({data})=>{
|
|
console.log("获取流程==2==>",data)
|
|
flowMap.value = data.flowList
|
|
flowOpinion.value = data.operational
|
|
currentProgress.value = data.current_step
|
|
flowLoading.value = false;
|
|
if(data.flowList&&data.flowList.length > 0){
|
|
activeName.value = "flow"
|
|
}else{
|
|
activeName.value = "log"
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
const handleClick = () => {
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-20 13:28:04
|
|
@ 功能: 启动流程
|
|
*/
|
|
const runWorkFlow = (val:any) => {
|
|
// console.log("启动流程--------1---------->",val)
|
|
let sendInfo ={
|
|
id:val.uuid,
|
|
flowList:flowMap.value,
|
|
state:3
|
|
}
|
|
startRunFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
// console.log("流程提交成功--------1---------->",data)
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-21 16:26:52
|
|
@ 功能: 草稿箱建立流程
|
|
*/
|
|
const rundraftWorkFlow = (val:any) => {
|
|
// console.log("启动流程--------2---------->",val,val.data)
|
|
let sendInfo ={
|
|
id:val.data.uuid,
|
|
flowList:flowMap.value,
|
|
state:1
|
|
}
|
|
// console.log("流程提交成功--------3---------->",sendInfo)
|
|
startRunFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
// console.log("流程提交成功--------2---------->",data)
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-21 15:14:54
|
|
@ 功能: 重新发起流程
|
|
*/
|
|
const reapplyWorkFlow = (val:any) => {
|
|
// console.log("重新发起流程--------2---------->",val)
|
|
if(val.data.runFlowId != "0" && val.data.runFlowId != ""){
|
|
afreshRunWorkflow({ id: val.data.runFlowId })
|
|
.then((data:any)=>{
|
|
// console.log("流程提交成功--------1---------->",data)
|
|
})
|
|
}else{
|
|
|
|
}
|
|
|
|
}
|
|
const butLoad = ref(false)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-20 15:44:03
|
|
@ 功能: 提交审批
|
|
*/
|
|
const yesOrNo = (val:string,agreeOrRefuse:number) => {
|
|
butLoad.value = true;
|
|
let sendInfo = {
|
|
id:props.appPageInfo.runFlowIdStr,
|
|
agreeOrRefuse:agreeOrRefuse,
|
|
suggest:sendFlowInfo.value,
|
|
flowlist:flowMap.value
|
|
}
|
|
runTaskFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
|
|
// console.log("提交审批----22222->",data)
|
|
ElMessage({
|
|
message: '处理完成！',
|
|
type: 'success'
|
|
})
|
|
|
|
})
|
|
.finally(()=>{
|
|
butLoad.value = false;
|
|
newAddPageData();
|
|
|
|
})
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
runWorkFlow,
|
|
reapplyWorkFlow,
|
|
rundraftWorkFlow
|
|
})
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
<el-tab-pane v-if="flowMap&&flowMap.length > 0" label="审批流程" name="flow">
|
|
|
|
<el-steps direction="vertical" :active="currentProgress">
|
|
<el-step v-for="item in flowMap" :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>
|
|
<el-tooltip
|
|
v-if="item.helpTips!=''&&item.helpTips!='<p><br></p>'"
|
|
:content="item.helpTips"
|
|
raw-content
|
|
effect="light"
|
|
>
|
|
<i class="fa fa-question-circle-o"></i>
|
|
</el-tooltip>
|
|
</template>
|
|
<template #description>
|
|
<div class="logCards">
|
|
<table>
|
|
<tbody>
|
|
<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>
|
|
<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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</el-step>
|
|
</el-steps>
|
|
<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 v-loading="butLoad" type="primary" style="width:100%" @click="yesOrNo(props.flowKey,1)">同意</el-button></el-col>
|
|
<el-col :span="8" class="juzhong"><el-button v-loading="butLoad" 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>
|
|
</el-tab-pane>
|
|
<el-tab-pane v-if="pageLog&&pageLog.length > 0" label="修改记录" name="log">
|
|
|
|
<el-timeline>
|
|
<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
|
|
<el-card class="logCard">
|
|
<table cellspacing="0" >
|
|
<tbody>
|
|
<tr v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex">
|
|
<td class="biankuang" width="100" >{{mastItem.label}}：</td>
|
|
<td class="biankuang" >{{mastItem.value}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<el-tabs v-if="item.sunData" type="border-card" style="margin-top:20px;">
|
|
<el-tab-pane v-for="(sonItem,sonIndex) in item.sunData" :label="sonIndex" :key="sonIndex">
|
|
<el-card v-for="(sunItem,sunIndex) in sonItem" :key="sunIndex" class="logCard" style="margin-top:10px;">
|
|
<table cellspacing="0" >
|
|
<tbody>
|
|
<tr v-for="(mastSununItem,mastSunIndex) in sunItem" :key="mastSunIndex">
|
|
<td class="biankuang" width="100" >{{mastSununItem.label}}：</td>
|
|
<td class="biankuang" ><el-text v-if="mastSununItem.types=='index'">{{sunIndex+1}}</el-text><el-text v-else>{{mastSununItem.value}}</el-text></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</el-card>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<table v-if="item.explicate" style="margin-top:20px;">
|
|
<tbody>
|
|
<tr>
|
|
<td class="biankuang" width="100">修改说明：</td>
|
|
<td class="biankuang">{{item.explicate}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</el-card>
|
|
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.logCard{
|
|
table {
|
|
width: 100%;
|
|
margin: 0;
|
|
// border: 1px solid #EBEEF5;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
// border: 1px solid #EBEEF5;
|
|
text-align: left;
|
|
padding: 0.5em;
|
|
vertical-align: top;
|
|
}
|
|
:deep .el-tabs__content{
|
|
padding: 5px;
|
|
}
|
|
}
|
|
.logCards{
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.approvalBoard{
|
|
|
|
background-color: #FFFFFF;
|
|
border-top: 1px solid #EBEEF5;
|
|
.juzhong{
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
}
|
|
.appBoardTitle{
|
|
padding: 5px 0 10px 0;
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|