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

<!--
@ 作者: 秦东
@ 时间: 2023-11-17 16:43:55
@ 备注: 工作流步进图
-->
<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"

const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})

const { circleUrl, squareUrl, sizeList } = toRefs(state)
const openOrClose = ref(false)
const openclosebox = ref(false)
const props = defineProps({
	flowMap: {
		type: Array,
		default: () => []
	},
	nodeKey:{
		type:String,
		default:""
	},
	currentProgress:{
		type:Number,
		default:0
	}
	,
	nextStep:{
		type:Number,
		default:0
	}
})
const presetPersonnel = ref<any>([]);    //预设选择人
const selectedPeople = ref<any>([]);    //已选择人
const flowMaps = ref<any[]>();
const emits = defineEmits(["update:flowMap"]);
const flowList =   computed({
	get: () => props.flowMap,
	set: (val) => {
		emits("update:flowMap", val);
	},
});
watch(()=>props.flowMap,(val:any)=>{
	
	emits("update:flowMap", val);
})
onMounted(()=>{

})
//判断是否有增加人员按钮
const judgeAddUser = (val:any):boolean =>{
	console.log("val----->",val)
	switch(val.runtype){
		case 1:
			val.runscope = val.runscope!=0?val.runscope:1
			return true
			break;
		case 3:
			if(val.customNode == props.nodeKey){
				val.runscope = val.runscope!=0?val.runscope:1
				return true
			}
			break;
		case 4:
			if(val.runscope==1){
				val.runscope = val.runscope!=0?val.runscope:1
				return true
			}
			break;
		default:
			if(!val.operator){
				val.runscope = val.runscope!=0?val.runscope:1
				return true
			}else if(val.operator.length < 1){
				val.runscope = val.runscope!=0?val.runscope:1
				return true
			}
			return false
	}
	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
	}
	
	console.log("PresetPersonnel.value--------1-------->",val)
	// console.log("PresetPersonnel.value--------2-------->",val.pendpers)
	// console.log("PresetPersonnel.value--------3-------->",val.operator)
	// console.log("PresetPersonnel.value--------4-------->",selectedPeople.value)
}
//更新节点操作人
const updateNode = (val:any) =>{
	console.log("P更新节点操作人",zhiXingStep,val)
	flowList.value.forEach((item:any) =>{
		if(item.step == zhiXingStep){
			console.log("P更新节点操作人---1-->",item.step , zhiXingStep)
			item.operator = val
		}
	})
	console.log("P更新节点操作人--2--->",flowList)
}
</script>
<template>
	<div> 
		<el-steps direction="vertical" :active="props.currentProgress">
			<el-step v-for="item in flowList" :key="item.step">
				<template #title>
					{{ item.nodeName }}
				</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="judgeAddUser(item)" class="addUser" @click="addPeople(item)">
										<svg-icon icon-class="addxuxian" size="50" />
									</div>
									
								</td>
								<td></td>
							</tr>
						</table>
				</template>
			</el-step>
		</el-steps>
		<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>
.logLi{
	color:#999999;
}
.addUser{
	display:block;
	cursor:pointer;
}
</style>