ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/pageFlow/flowStep.vue

<!--
@ 作者: 秦东
@ 时间: 2026-01-27 16:11:23
@ 备注: 
-->
<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 squareUrlOne from "@/assets/images/1.png"
import squareUrlTwo from "@/assets/images/2.png"

const activeStep = ref(1)
const state = reactive({
	circleUrl:squareUrlTwo,
  	squareUrl: squareUrlOne,
  	sizeList: ['small', '', 'large'] as const,
})
const { circleUrl, squareUrl, sizeList } = toRefs(state)
const openOrClose = ref(false)
const openclosebox = ref(false)
const ifSendFlow = 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<any>({
	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)
	if(val.customNode == "beginnode"){
		val.runscope = val.runscope!=0?val.runscope:1
		return true
	}
	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
			// }
			if(val.runscope != 0){
				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)
}

/**
@ 作者: 秦东
@ 时间: 2026-01-29 16:37:56
@ 功能: 判断审批节点样式
*/
const judgeNodeClass = (val:number,stepVal:number):string => {
    console.log("判断审批节点样式",val,stepVal)
    switch(val){
        case 1:
            if(props.currentProgress == stepVal){
                return "in-progress"
            }else{
                return 'completed'
            }
        case 2:
            return 'pending'
        case 3:
            // return 'in-progress'
            if(props.currentProgress == stepVal){
                return "in-progress"
            }else{
                return 'in-executor'
            }
        default:
            if(props.currentProgress == stepVal){
                return "in-progress"
            }else{
                return 'completed'
            }
            
    }
    return 'completed'
}


</script>
<template >
    <el-card  shadow="always">
        <template #header>
          <div class="card-header">
            <div class="svgBox"><SvgIcon icon-class="liuChengBiaoDan" size="25" /></div>
            审批流程
          </div>
        </template>
        <el-scrollbar  :class="ifSendFlow?'flowBody':'flowBodyNofoot'">

            <div class="approval-steps">
                <div v-for="item in flowList" :key="item.step" :class="['step', judgeNodeClass(item.type,item.step)]">
                    <div class="step-icon">
                        <SvgIcon v-if="item.type==0" icon-class="faqiren" size="25" />
                        <SvgIcon v-if="item.type==1" icon-class="spr" size="25" />
                        <SvgIcon v-if="item.type==2" icon-class="csr" size="25" />
                        <SvgIcon v-if="item.type==3" icon-class="zxr" size="25" />
                        <!--SvgIcon v-else icon-class="shenpi" size="25" /-->
                    </div>
                    <div class="step-content">
                        <h3 class="step-title">{{item.nodeName}}</h3>
                        <div v-for="items in item.operator" :key="items.id" class="flowLogBox">

                            <div >
                                <el-avatar  v-if="items.icon!=''" shape="square" fit="cover" :src="items.icon" style="width: 40px;"  class="avatarBox" />
								<el-avatar v-else-if="items.iconbase64!=''" shape="square" fit="cover" :src="items.iconbase64" style="width: 40px;" class="avatarBox" />
								<el-avatar v-else shape="square" fit="cover" :src="squareUrl" style="width: 40px;" class="avatarBox" />
                            </div>
                            <div>
                                <div>
                                    <el-text size="small">{{ items.departmentname }}</el-text>
										<el-text size="small"><span v-if="items.departmentname"> - </span>{{ items.postname }}</el-text>
										<el-text size="small"><span v-if="items.departmentname||items.postname"> - </span>{{ items.name }}</el-text>
                                </div>
                                <div v-for="(logItem,logIndex) in items.log" :key="logIndex" >
                                    <div v-if="logItem.state==2" class="step-info">
                                        <el-text v-if="logItem.cause" type="success" size="small">{{logItem.cause}}</el-text>
                                        <el-text v-else type="success" size="small" >已同意</el-text>
                                    </div>
                                    <div v-if="logItem.state==3" class="step-info">
                                        <el-text v-if="logItem.cause" type="danger" size="small">{{logItem.cause}}</el-text>
                                        <el-text v-else type="danger" size="small" >已驳回</el-text>
                                    </div>
                                    <div v-else class="step-info">
                                        <el-text v-if="logItem.cause"  size="small">{{logItem.cause}}</el-text>
                                        <el-text v-else  size="small" >未操作</el-text>
                                    </div>
                                    <div  class="step-time">{{ logItem.time }}</div>
                                </div>

                            </div>

                        </div>
                        
                        <div v-if="judgeAddUser(item)" class="addUser" @click="addPeople(item)">
							<svg-icon icon-class="addxuxian" size="50" />
						</div>

                    </div>
                </div>
               
            </div>

        </el-scrollbar>
        <!-- <template #footer>
          <div class="bootemWorkFlow">
            <el-input type="textarea" :rows="2" style="width: 100%" placeholder="请输入审批意见"></el-input>
            <div class="bootemWorkFlowBut">
              <el-button class="btn approve-btn"><SvgIcon icon-class="kxdg" size="" style="margin-right: 5px" />通过审批</el-button>
              <el-button class="btn reject-btn"><SvgIcon icon-class="cwkx" size="" style="margin-right: 5px"  />驳回申请</el-button>
            </div>
          </div>
        </template> -->
    </el-card>

    <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" />

</template>
<style  lang='scss' scoped>
.card-header{
  font-size: 1.4rem;
  font-weight: 700;
  color: #0020C2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.flowBody{
  padding: 10px 15px;
  height: calc(100vh - 225px);
}
.flowBodyNofoot{
  padding: 10px 15px;
  height: calc(100vh - 105px);
}
.svgBox{
  background: linear-gradient(135deg, #0020C2, #4d6cff);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.bootemWorkFlow{
  width: 100%;
  text-align: center;
  .bootemWorkFlowBut{
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
}

.btn {
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 32, 194, 0.15);
}
.approve-btn {
  background: linear-gradient(135deg, #00cc66, #33dd88);
  color: white;
}
.reject-btn {
  background: linear-gradient(135deg, #ff3366, #ff5588);
  color: white;
}
.approval-steps {
    flex: 1;
}




        .step {
            display: flex;
            margin-bottom: 25px;
            position: relative;
            margin-left: 7px;
            margin-top: 7px;
        }
        
        .step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 20px;
            top: 40px;
            width: 2px;
            height: calc(100% + 5px);
            background: linear-gradient(to bottom, rgba(0, 32, 194, 0.2), rgba(0, 32, 194, 0.05));
        }
        
        .step-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
            z-index: 1;
            flex-shrink: 0;
            
        }
        
        .step.completed .step-icon {
            background: linear-gradient(135deg, #0020C2, #4d6cff);
            color: white;
        }
        
        .step.in-progress .step-icon {
            background: linear-gradient(135deg, #ffcc00, #ffdd55);
            color: #333;
            animation: pulse 2s infinite;
        }

        .step.in-executor .step-icon {
            background: linear-gradient(135deg, #67C23A, #95f764);
            color: #fff;
        }
        
        .step.pending .step-icon {
            background: #f0f4ff;
            color: #a0a6c9;
        }
        
        .step-content {
            flex: 1;
        }
        
        .step-title {
            font-weight: 600;
            margin-bottom: 5px;
            color: #0020C2;
        }
        
        .step.completed .step-title {
            color: #4d6cff;
        }
        
        .step.in-progress .step-title {
            color: #ff9900;
        }
        .step.in-executor .step-title {
            color: #67C23A;
        }
        
        .step.pending .step-title {
            color: #a0a6c9;
        }
        
        .step-info {
            font-size: 0.9rem;
            color: #666;
            margin-top: 0px;
        }
        
        .step-time {
            font-size: 0.8rem;
            color: #888;
            margin-bottom: 4px;
        }
         /* 响应式设计 */
        @media (max-width: 1200px) {
            .container {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                height: auto;
                gap: 15px;
            }
            
            .card {
                min-height: 400px;
            }
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(255, 204, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); }
        }
.flowLogBox{
    display: grid;
    grid-template-columns: 45px 1fr;
}
.addUser{
	display:block;
	cursor:pointer;
}
.avatarBox{
    border: 1px solid rgba(255, 255, 255, 0.5);
}
</style>