hxgksystemapp/src/views/taskplatform/taskmanagement/runFlowStep.vue

<!--
@ 作者: 秦东
@ 时间: 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(["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
		})
		.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) =>{
	flowMaps.value.forEach((item:any) =>{
		if(item.step == zhiXingStep){
			item.operator = val
		}
	})
}
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>
														<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>