hxgksystemapp/src/components/workflow/drwer/conditionDrawer.vue

<!--
@ 作者: 秦东
@ 时间: 2023-10-11 11:05:45
@ 备注: 条件设置
-->
<script lang='ts' setup>
import $func from '@/utils/workflow/index'
import { useStore } from '@/store/workflow/index' 
import { optTypes, opt1s,flowFactor } from '@/utils/workflow/const'
import { flowFactorCont } from '@/api/workflowapi/types'
import { getConditions } from '@/api/workflowapi/index'

import { gainNodeFactor } from '@/api/displayboardapi/indexapi'

let props = defineProps({
	isFormFlow:{
		type:Boolean,
		default:true
	},
	customerFormKey:{
		type:String,
		default:""
	},
});

let copyerVisible = ref(false)
const flowFactorList = ref<any[]>([]);

let conditionVisible = ref(false)
let conditionsConfig = ref({
    conditionNodes: [],
})
let conditionConfig = ref({})
let PriorityLevel = ref('')
let conditions = ref([])
let conditionList = ref([])
let checkedList = ref([])
let conditionRoleVisible = ref(false)

let store = useStore()
let { setCondition, setConditionsConfig } = store
let tableId = computed(()=> store.tableId)
let conditionsConfig1 = computed(()=> store.conditionsConfig1)
let conditionDrawer = computed(()=> store.conditionDrawer)
let visible = computed({
    get() {
        return conditionDrawer.value
    },
    set() {
        closeDrawer()
    }
})
watch(conditionsConfig1, (val:any) => {
    conditionsConfig.value = val.value;
    PriorityLevel.value = val.priorityLevel
    conditionConfig.value = val.priorityLevel
        ? conditionsConfig.value.conditionNodes[val.priorityLevel - 1]
        : { nodeUserList: [], conditionList: [] }
		if(conditionConfig.value.conditionList){
			// tableList.value = conditionsConfig.conditionList
			tableList.value = conditionConfig.value.conditionList
		}
	
})

watch(visible,(val:any)=>{
	if(val){
		if(flowFactor.length>0){
			flowFactor.forEach(ites=>{
				flowFactorList.value.push({
					id:ites.id,
					name:ites.name,
					keyid:ites.keyid,
					type:ites.type,
					isok:ites.isok,
					isCheckbox:ites.isCheckbox,
					options:ites.options
				})
			})
		}
		if(props.isFormFlow){
			let sendData ={
				id:props.customerFormKey,
				types:2
			}
			gainNodeFactor(sendData)
				.then(({data}) =>{
					// console.log("......>",data)
					if(data.length > 0){
						data.forEach(item=>{
							flowFactorList.value.push({
								id:flowFactorList.value.length+1,
								name:item.name,
								keyid:item.id,
								type:3,
								isok:false,
								isCheckbox:item.isCheckbox,
								options:item.options
							})
						})
					}
				})
		}
		
	}else{
		flowFactorList.value = []
	}
})


const closeDrawer = (val?:any) => {
	initFactor()
    setCondition(false)
	
}

const isDelField = ref(false)
const tableList = ref<any[]>([])
const maxFactor = ref(false)

const tiaoJianAry = ref<any>()
//选择变化
const pickFactor = (val:any) => {
	let tableKeyAry = new Array
	tableList.value.forEach(item=>{
		tableKeyAry.push(item.factorid)
	})
	let filefName = 0
	let types = 0
	let options = new Array
	let isCheckbox = false
	flowFactorList.value.forEach(item=>{
		if(item.keyid == val){
			filefName=item.name
			item.isok=true
			types = item.type
			options = item.options
			isCheckbox = item.isCheckbox
		}else{
			if(tableKeyAry.length>0){
				if(tableKeyAry.includes(item.keyid)){
					item.isok=true
				}else{
					item.isok=false
				}
			}
		}
	})
	tableList.value.forEach(item=>{
		if(item.factorid == val){
			item.type = types
			item.options = options
			item.isCheckbox = isCheckbox
			item.name=filefName
		}
	})
	// console.log("tableList--->",tableList.value,val,types);
}
//添加条件
const addFactorCondition = () => {
	let currLent = tableList.value.length
	let tableKeyAry = new Array
	if(currLent > 0){
		tableList.value.forEach(item=>{
			tableKeyAry.push(item.factorid)
		})
	}
	if(currLent < flowFactorList.value.length){
		tableList.value.push({id:currLent+1,name:"",factorid:"",type:0,isok:false,isCheckbox:true,options:[],answers:[],customFields:[]})
		if(currLent+1 >= flowFactorList.value.length){
			maxFactor.value = true
		}else{
			maxFactor.value = false
		}
	}else{
		maxFactor.value = true
	}
	if(tableList.value.length > 1){
		isDelField.value = true
	}else{
		isDelField.value = false
	}
	
	if(tableKeyAry.length>0){
		flowFactorList.value.forEach(item=>{
			if(tableKeyAry.includes(item.keyid)){
				item.isok=true
			}else{
				item.isok=false
			}
		})
	}
}
const initFactor = () => {
	maxFactor.value = false
	if(tableList.value.length>0){
		tableList.value = []
	}
	if(flowFactorList.value.length>0){
		flowFactorList.value = []
	}
}
//删除条件
const delTiaoJian = (val:any) => {
	let currLent = tableList.value.length
	if(currLent>0){
		let guoduTable = []
		tableList.value.forEach(item=>{
			if(item.factorid != val.factorid){
				guoduTable.push(item)
			}
		})
		tableList.value = guoduTable
	}
	flowFactorList.value.forEach(item=>{
			if(item.keyid == val.factorid){
				item.isok=false
			}
		})
	
	if(currLent < flowFactorList.value.length){
			maxFactor.value = false
	}
	if(tableList.value.length > 1){
		isDelField.value = true
	}else{
		isDelField.value = false
	}
}
const saveCondition = () => {
	let isError = false
    if(tableList.value.length>0){
		for (var i = 0; i < tableList.value.length; i++) {
			var {name,type,options,nodeUserList,answers,isCheckbox,customFields} = tableList.value[i]
			console.log("conditionConfig.conditionList--1->",name);
			console.log("conditionConfig.conditionList--2->",type);
			console.log("conditionConfig.conditionList--3->",options);
			console.log("conditionConfig.conditionList--4->",nodeUserList);
			console.log("conditionConfig.conditionList--5->",answers);
			console.log("conditionConfig.conditionList--6->",isCheckbox);
			console.log("conditionConfig.conditionList--7->",customFields);
			switch(type){
				case 1:
					if(nodeUserList){
						if(nodeUserList.length <= 0){
							isError = true
						}
					}else{
						isError = true
					}
					
					break;
				case 2:
					if(customFields.length <= 0){
						isError = true
					}else{
						customFields.forEach((item:any)=>{
							if(item.wordfield == "" || item.wordfield == null){
								isError = true
							}
						})
					}
					break;
				case 3:
					if(answers.length > 0){
						if(!Array.isArray(answers)){
							tableList.value[i].answers=[answers]
						}
					}else{
						isError = true
					}
					break;
				default:
					isError = true
			}
		}
	}
	if(isError){
		ElNotification({
			title: '温馨提示！',
			message: '判断条件未赋值！',
			type: 'error',
		})
	}else{
		conditionConfig.value.conditionList = tableList.value
		// console.log("conditionConfig.conditionList--1->",conditionConfig.value);
		// console.log("conditionConfig.conditionList--2->",conditionConfig.value.conditionList);
		// console.log("conditionConfig.conditionList--3->",conditionsConfig1);
		var a = conditionsConfig.value.conditionNodes.splice(PriorityLevel.value - 1, 1)//截取旧下标
		conditionsConfig.value.conditionNodes.splice(conditionConfig.value.priorityLevel - 1, 0, a[0])//填充新下标
		conditionsConfig.value.conditionNodes.map((item, index) => {
			item.priorityLevel = index + 1
		});
		for (var i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
			conditionsConfig.value.conditionNodes[i].error = $func.conditionStr(conditionsConfig.value, i) == "请设置条件" && i != conditionsConfig.value.conditionNodes.length - 1
		}
		setConditionsConfig({
			value: conditionsConfig.value,
			flag: true,
			id: conditionsConfig1.value.id
		})
		closeDrawer()
	}
}
//选择成员或角色
const addOrEditUser = (val:any) => {
	copyerVisible.value = true;
	checkedList.value = val
}
//保存选中得数据
const sureCopyer = (data) => {
	// console.log("保存选中人",data)
    // copyerConfig.value.nodeUserList = data;
    copyerVisible.value = false;
	if(tableList.value.length > 0){
		tableList.value.forEach(item=>{
			if(item.factorid == "applicant" && item.type == 1){
				item.nodeUserList = data
			}
		})
	}
}
//添加自定义条件
const addCustomFields = () =>{
	if(tableList.value.length > 0){
		tableList.value.forEach(item=>{
			if(item.factorid == "customFields" && item.type == 2){
				item.customFields.push({
					wordfield:"",
					optType:"1",
					leftval:""
				})
			}
		})
	}
	console.log("添加自定义条件",tableList)
}
//自定义字段改变选项
const myoptChhange = (val:any) =>{
	console.log("添加自定义条件",val)
}
//删除自定义字段条件
const delCuresTiaoJian = (val:any,old:any) => {
	if(old.length>0){
		old.splice(val,1)
	}
}
</script>
<template>
	<el-drawer v-model="visible" :append-to-body="true" title="条件设置" class="condition_copyer" :show-close="false" :size="550" :before-close="saveCondition"> 
		<template #header="{ titleId, titleClass }">
            <h3 :id="titleId" :class="titleClass">条件设置</h3>
            <select v-model="conditionConfig.priorityLevel" class="priority_level">
                <option v-for="item in conditionsConfig.conditionNodes.length" :key="item" :value="item">优先级{{item}}</option>
            </select>
        </template>
		<div class="demo-drawer__content">
			<div class="condition_content drawer_content">
				<p class="tip">当审批单同时满足以下条件时进入此流程</p>
				
				<el-row  v-for="itemw in tableList" :key="itemw.id" :gutter="10" class="condition_row">
					<el-col :span="7">
						<div class="left_right_cont">
							<el-select v-model="itemw.factorid" placeholder="请选择" class="selectInfo" @change="pickFactor">
								<el-option
									v-for="item in flowFactorList"
									:key="item.keyid"
									:label="item.name"
									:value="item.keyid"
									:disabled="item.isok"
									>
								</el-option>
							</el-select>
							<span>为</span>
						</div>
					</el-col>
					<el-col :span="16">
						<template v-if="itemw.type==1">
							<el-button type="primary" style="margin-bottom:0px" @click="addOrEditUser(itemw.nodeUserList)">添加/修改成员</el-button>
							<p  class="selected_list">
							<el-tag v-for="(item_us,index_us) in itemw.nodeUserList" :key="index_us" closable type="info" effect="plain" class="tag_us"  @close="$func.removeEle(itemw.nodeUserList,item_us,'targetId')">{{item_us.name}}</el-tag>
							</p>
							
						</template>
						<template v-if="itemw.type==2">
							<el-row v-for="(itemCustomFields,index) in itemw.customFields" :key="index"  style="margin-bottom:10px" :gutter="5">
								<el-col  :span="7">
									<el-input v-model="itemCustomFields.wordfield" placeholder="判断关键字"></el-input>
								</el-col>
								<el-col :span="itemCustomFields.optType != 6?7:16">
									<el-select v-model="itemCustomFields.optType"  class="selectInfo" style="width:100%">
										<el-option
											v-for="itemSel in optTypes"
											:key="itemSel.value"
											:label="itemSel.label"
											:value="itemSel.value"
										>
										</el-option>   
									</el-select>
								</el-col>
								<el-col v-if="itemCustomFields.optType != 6" :span="9">
									<el-input v-model="itemCustomFields.leftval" type="text" placeholder="请输入" />
								</el-col>
								<el-col  :span="1">
									<el-icon  color="#E6A23C" size="20px"  class="delIcon" @click="delCuresTiaoJian(index,itemw.customFields)"><CircleClose /></el-icon>
								</el-col>
								<el-col v-if="itemCustomFields.optType == 6" :span="24">
									<el-row  :gutter="5"  style="margin-top:10px">
										<el-col :span="5">
											<el-input v-model="itemCustomFields.leftval" type="text" placeholder="请输入" />
										</el-col>
										<el-col :span="5">
											<el-select v-model="itemCustomFields.leftoptType">
												<el-option
													v-for="itemSel in opt1s"
													:key="itemSel.value"
													:label="itemSel.label"
													:value="itemSel.value"
												/>
											</el-select>
										</el-col>
										<el-col :span="4" class="cuiZhi_junZhong">
											<span>{{ itemCustomFields.wordfield }}</span>
										</el-col>
										<el-col :span="5">
											<el-select v-model="itemCustomFields.rightoptType">
												<el-option
													v-for="itemSel in opt1s"
													:key="itemSel.value"
													:label="itemSel.label"
													:value="itemSel.value"
												/>
											</el-select>
										</el-col>
										<el-col :span="5">
											<el-input v-model="itemCustomFields.rightval" type="text" placeholder="请输入" />
										</el-col>
									</el-row>
								</el-col>
							</el-row>
							<el-button type="warning" style="margin-top:0px" @click="addCustomFields">添加条件</el-button>
						</template>
						<template v-if="itemw.type==3">
							<el-radio-group v-if="!itemw.isCheckbox" v-model="itemw.answers">
								<el-radio v-for="optVal in itemw.options" :key="optVal.value" :label="optVal.value">{{optVal.label}}</el-radio>
							</el-radio-group>
							<el-checkbox-group v-if="itemw.isCheckbox" v-model="itemw.answers">
								<el-checkbox v-for="optVal in itemw.options" :key="optVal.value" :label="optVal.value">{{ optVal.label }}</el-checkbox>
							</el-checkbox-group>
						</template>
					</el-col>
					<el-col :span="1"><el-icon  color="#FF0000" size="20px"  class="delIcon" @click="delTiaoJian(itemw)"><CircleClose /></el-icon></el-col>
				</el-row>
				

				<el-button :disabled="maxFactor" type="primary" @click="addFactorCondition" >添加条件</el-button>
			</div>
			
			<div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveCondition">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
		</div>

		<employees-role-dialog 
            v-model:visible="copyerVisible"
            :data="checkedList"
			:is-department="true"
            @change="sureCopyer"
        />


	</el-drawer>
</template>
<style lang="less">
.condition_copyer {
    .priority_level {
        position: absolute;
        top: 11px;
        right: 30px;
        width: 100px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        font-size: 12px;
    }

    .condition_content {
        padding: 20px 20px 0;
		.condition_row{
			margin-bottom:15px;
			.left_right_cont{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.selectInfo{
					margin-right:5px;
				}
			}
		}
        p.tip {
            margin: 20px 0;
            width: 510px;
            text-indent: 17px;
            line-height: 45px;
            background: rgba(241, 249, 255, 1);
            border: 1px solid rgba(64, 163, 247, 1);
            color: #46a6fe;
            font-size: 14px;
        }

        ul {
            max-height: 500px;
            overflow-y: scroll;
            margin-bottom: 20px;

            li {
                &>span {
                    float: left;
                    margin-right: 8px;
                    width: 70px;
                    line-height: 32px;
                    text-align: right;
                }

                &>div {
                    display: inline-block;
                    width: 370px;

                    &>p:not(:last-child) {
                        margin-bottom: 10px;
                    }
                }

                &:not(:last-child)>div>p {
                    margin-bottom: 20px;
                }

                &>a {
                    float: right;
                    margin-right: 10px;
                    margin-top: 7px;
                }

                select,
                input {
                    width: 100%;
                    height: 32px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 4px;
                    border: 1px solid rgba(217, 217, 217, 1);
                }

                select+input {
                    width: 260px;
                }

                select {
                    margin-right: 10px;
                    width: 100px;
                }

                p.selected_list {
                    padding-left: 10px;
                    border-radius: 4px;
                    min-height: 32px;
                    border: 1px solid rgba(217, 217, 217, 1);
                    word-break: break-word;
                }

                p.check_box {
                    line-height: 32px;
                }
            }
        }

        .el-button {
            margin-bottom: 20px;
        }
    }
}

.condition_list {
    .el-dialog__body {
        padding: 16px 26px;
    }

    p {
        color: #666666;
        margin-bottom: 10px;

        &>.check_box {
            margin-bottom: 0;
            line-height: 36px;
        }
    }
}
.delIcon{
	margin-top:6px;
}
.selected_list{
	margin: 0;

	span{
		margin:5px 5px 4px 0px;
	}
}
.cuiZhi_junZhong {
	text-align:center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	overflow:hidden;
}
</style>