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

<!--
@ 作者: 秦东
@ 时间: 2023-10-11 09:54:58
@ 备注: 审批人设置
-->
<script lang='ts' setup>
import $func from '@/utils/workflow/index'
import { setTypes, selectModes, selectRanges } from '@/utils/workflow/const'
import { useStore } from '@/store/workflow/index' 
import { getAllParentNode,judgeOptionalNode } from '@/api/workflowapi/index'

import PositionDialog from '@/components/workflow/dialog/positionDialog.vue'
import FormWord from '@/components/workflow/dialog/formWord.vue'
import MatrixPage from '@/components/workflow/dialog/matrix.vue'

let props = defineProps({
	nodeConfig:{
		type: Object,
        default: () => ({}),
	},
    directormaxlevel: {
        type: Number,
        default: 4
    },
	isFormFlow:{
		type:Boolean,
		default:true
	},
	customerFormKey:{
		type:String,
		default:""
	},
});
const isExecutor = ref(false)
const nodeTitle = ref<string>("审批人设置")
const nodeOptional = ref<any[]>() //审批线已经存在得节点
const nodeAllVerify = ref<any[]>()
let approverConfig = ref<any>({})
let approverVisible = ref(false)
let approverRoleVisible = ref(false)
let appPosistonVisible = ref(false)
let appFormTableVisible = ref(false)
let checkedRoleList = ref<any[]>([])	//角色列表
let checkedPostList = ref<any[]>([])		//岗位列表
let checkedFormList = ref<any[]>([])		//字段列表
let checkedList = ref<any[]>([])
let store = useStore()
let { setApproverConfig, setApprover } = store
let approverConfig1 = computed(():any=> store.approverConfig1)
let approverDrawer = computed(():any=> store.approverDrawer)
let visible = computed({
    get(){
        return approverDrawer.value
    },
    set(){
        closeDrawer()
    }
}) 
const matrixIsShow = ref(false)

watch(visible,(val:any)=>{
	// if(val)
})

watch(approverConfig1, (val:any)=>{
	// console.log("directormaxlevel",visible.value)\
	matrixIsShow.value = false
    approverConfig.value = val.value
	if(val.type == 3){
		nodeTitle.value = "执行人设置"
	}else{
		nodeTitle.value = "审批人设置"
	}
	isExecutor.value = false
	
	if(visible.value){
		judgeOptionalNode(props.nodeConfig)
		.then((data:any)=>{
			if(data.code == 0){
				let sendData = {
					id:val.value.fromNode,
					allcont:data.data.allcont
				}
				getAllParentNode(sendData)
					.then((data:any)=>{
						if(data.code == 0){
							nodeOptional.value = data.data.allcont
							if(data.data.allcont && data.data.allcont.length > 0){
								data.data.allcont.forEach(item => {
									if(item.type  == 3){
										isExecutor.value = true
										return
									}
								});
							}
						}
					})
			}
		})
	}
	if(val.value.settype == 9){
		matrixIsShow.value = true
	}
})
let changeRange = ()=> {
    approverConfig.value.nodeUserList = [];
}

//权限矩阵
const matrixList = ref<any[]>()
const matrixCont = ref<any>()
const matrixFieldList = ref<any[]>()

const changeType = (val:any)=> {
	matrixIsShow.value = false
    approverConfig.value.nodeUserList = [];
    approverConfig.value.examineMode = 1;
    approverConfig.value.noHanderAction = 2;
    if (val == 2) {
        approverConfig.value.directorLevel = 1;
    } else if (val == 4) {
        approverConfig.value.selectMode = 1;
        approverConfig.value.selectRange = 1;
    } else if (val == 7) {
        approverConfig.value.examineEndDirectorLevel = 1
    }else if (val == 9){
		matrixIsShow.value = true
	}
	
}
const addApprover = ()=> {
    approverVisible.value = true;
    checkedList.value = approverConfig.value.nodeUserList
}
const addRoleApprover = ()=> {
    approverRoleVisible.value = true;
    checkedRoleList.value = approverConfig.value.nodeUserList
}
const addApproverPost = ()=> {
	appPosistonVisible.value = true;
    checkedPostList.value = approverConfig.value.nodeUserList
}
const surePostApprover = (data:any)=> {
	appPosistonVisible.value = false;
    approverConfig.value.nodeUserList = data;
}
const sureApprover = (data:any)=> {
    approverConfig.value.nodeUserList = data;
    approverVisible.value = false;
}
const sureRoleApprover = (data:any)=> {
    approverConfig.value.nodeUserList = data;
    approverRoleVisible.value = false;
}
const saveApprover = ()=> {
    approverConfig.value.error = !$func.setApproverStr(approverConfig.value)
    setApproverConfig({
        value: approverConfig.value,
        flag: true,
        id: approverConfig1.value.id
    })
    closeDrawer()
}
const closeDrawer = ()=> {
    setApprover(false)
	isExecutor.value = false
}
//判断审批设置是否显示
const isShowRatify = (id:number)=>{
	if(id == 8){
		return props.isFormFlow
	}else{
		return true
	}
}

//字段
const formTableField = ()=> {
	appFormTableVisible.value = true;
    checkedFormList.value = approverConfig.value.nodeUserList
}
const sureFormTableApprover = (data:any)=> {
    approverConfig.value.nodeUserList = data;
    appFormTableVisible.value = false;
}
//更新审批人设置
const updateMatrix = (val:any) =>{}
</script>
<template>
	
	<el-drawer v-model="visible" :append-to-body="true" :title="nodeTitle"  class="set_promoter" :show-close="false" :size="550" :before-close="saveApprover"> 

		<div class="demo-drawer__content">
			<!--审批人设置主体-->
			<div class="drawer_content">
				<div class="approver_content">
                    <el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType">
						<template v-for="({value, label}) in setTypes"  :key="value">
                        	<el-radio v-if="isShowRatify(value)" :label="value" style="width:auto">{{label}}=>{{value}}</el-radio>
						</template>
                    </el-radio-group>
                </div>
				<!--指定成员-->
				<div v-if="approverConfig.settype==1" class="approver_manager">
					<el-button  type="primary" @click="addApprover">添加/修改成员</el-button>
					<p  class="selected_list">
						<el-tag  v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
						<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
                    </p>
				</div>
				<!--主管-->
				<div v-if="approverConfig.settype==2" class="approver_manager">
                    <p>
						<el-row  :gutter="10">
							<el-col :span="6">
								<select v-model="approverConfig.attribute" style="width:100%">
									<option value="1">发起人</option>
									<option v-if="isExecutor" value="2">执行人</option>
								</select>
							</el-col>
							<el-col :span="18">
								<select v-model="approverConfig.directorLevel">
									<option v-for="item in props.directormaxlevel" :key="item" :value="item">{{item==1?'直接':'第'+item+'级'}}主管</option>
								</select>
							</el-col>
						</el-row>
                        
                    </p>
                    <p class="tip">找不到主管时，由上级主管代审批</p>
                </div>
				<!--行政岗位-->
                <div v-if="approverConfig.settype==3" class="approver_manager">
                    <p>指定行政岗位</p>
                    <el-row>
						<el-col :span="18">
							<el-button  type="primary" @click="addApproverPost">添加/修改行政岗位</el-button>
						</el-col>
						<el-col :span="6">
							<select v-model="approverConfig.attribute" style="width:100%">
								<option value="1">发起人</option>
								<option v-if="isExecutor" value="2">执行人</option>
							</select>
						</el-col>
					</el-row>
					<p  class="selected_list">
						<el-tag  v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
						<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
                    </p>
                </div>
				<!--发起人自选-->
                <div v-show="approverConfig.settype==4" class="approver_self_select">
                    <el-radio-group v-model="approverConfig.selectMode" style="width: 100%;">
                        <el-radio v-for="({value, label}) in selectModes" :key="value" :label="value">{{label}}</el-radio>
                    </el-radio-group>
                    <h3>选择范围</h3>
                    <el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange">
                        <el-radio v-for="({value, label}) in selectRanges" :key="value" :label="value" >{{label}}</el-radio>
                    </el-radio-group>
                    <template v-if="approverConfig.selectRange==2||approverConfig.selectRange==3">
                        <el-button v-if="approverConfig.selectRange==2" type="primary" @click="addApprover">添加/修改成员</el-button>
                        <el-button v-else type="primary" @click="addRoleApprover">添加/修改角色</el-button>
                        <p class="selected_list">
							<el-tag  v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
                            <el-tag v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
                        </p>
                    </template>
                </div>
				<!--发起人自己-->
                <div v-if="approverConfig.settype==5" class="approver_self">
                    <p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
                </div>
				<!--连续多级主管-->
                <div v-if="approverConfig.settype==6" class="approver_manager">
                    <p>审批终点</p>
                    <p style="padding-bottom:20px">
						<el-row  :gutter="10">
							<el-col :span="6">
								<select v-model="approverConfig.attribute" style="width:100%">
									<option value="1">发起人</option>
									<option v-if="isExecutor" value="2">执行人</option>
								</select>
							</el-col>
							<el-col :span="10">
								<select v-model="approverConfig.examineEndDirectorLevel">
									<option v-for="item in props.directormaxlevel" :key="item" :value="item">{{item==1?'直接':'第'+item+'级'}}主管</option>
								</select>
							</el-col>
						</el-row>

                    </p>
                </div>
				<!--指定审批节点为本节点设置审批人-->
                <div v-if="approverConfig.settype==7" class="approver_manager">
                    <p>可选节点列表</p>
                    <el-radio-group v-model="approverConfig.customNode" class="clear">
						<el-radio label="beginnode" >发起人</el-radio>
                        <el-radio v-for="item in nodeOptional"  :key="item.nodeNumber" :label="item.nodeNumber" class="nodeGroupRadio">{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio>
                        
                    </el-radio-group>
                </div>
				<!--根据关联表单设置指定审批字段-->
				<div v-if="approverConfig.settype==8" class="approver_manager">
                    <p>指定审批字段</p>
					<el-button  type="primary" @click="formTableField">添加/修改审批字段</el-button>
					<p  class="selected_list">
						<el-tag  v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
						<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
                    </p>
                </div>
				<!--权限矩阵-->
				<div v-if="approverConfig.settype==9" class="approver_manager">
					
					<MatrixPage
						v-model:isshow="matrixIsShow"
						@change="updateMatrix"
					/>
					
					<el-row :gutter="10">
						<el-col :span="12"><el-text class="mx-1" size="large">可用矩阵</el-text></el-col>
						<el-col :span="12"><el-text class="mx-1" size="large">矩阵选项</el-text></el-col>
					</el-row>
					<el-row :gutter="10">
						<el-col :span="12">
							<el-select v-model="matrixCont" filterable placeholder="Select" style="width:100%">
								<el-option
								v-for="item in matrixList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								/>
							</el-select>
							<el-pagination small layout="prev, pager, next" :total="50" />
						</el-col>
						<el-col :span="12">
							<el-select v-model="matrixCont" filterable placeholder="Select" style="width:100%">
								<el-option
								v-for="item in matrixFieldList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								/>
							</el-select>
						</el-col>
					</el-row>
					
					
				</div>
				<!--补充审批信息-->
                <div v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||approverConfig.settype==6||(approverConfig.settype==4&&approverConfig.selectMode==2)||approverConfig.settype==8||approverConfig.settype==9" class="approver_some">
                    <p>多人审批时采用的审批方式</p>
                    <el-radio-group v-model="approverConfig.examineMode" class="clear">
                        <el-radio :label="1">依次审批</el-radio>
                        <el-radio v-if="approverConfig.settype!=2" :label="2">会签(须所有审批人同意)</el-radio>
                        <el-radio v-if="approverConfig.settype!=2" :label="3">非会签(有一位审批人同意即可)</el-radio>
                    </el-radio-group>
                </div>
                <div v-if="approverConfig.settype==2||approverConfig.settype==6||approverConfig.settype==9" class="approver_some">
                    <p>审批人为空时</p>
                    <el-radio-group v-model="approverConfig.noHanderAction" class="clear">
                        <el-radio :label="1">自动审批通过/不允许发起</el-radio>
                        <br/>
                        <el-radio :label="2">转交给审核管理员</el-radio>
                    </el-radio-group>
                </div>

				<div class="approver_some">
                    <p>退回设置</p>
                    <el-radio-group v-model="approverConfig.sendBackNode" class="clear">
                        <el-radio label="beginnode" >发起人</el-radio>
                        <el-radio v-for="item in nodeOptional" :key="item.nodeNumber" :label="item.nodeNumber" >{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio>
                    </el-radio-group>
                </div>




			</div>
			<div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveApprover">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
			<!--选择成员-->
			<employees-dialog 
                v-model:visible="approverVisible"
                :data="checkedList"
                @change="sureApprover"
            />
			<!--选择角色-->
			<role-dialog 
                v-model:visible="approverRoleVisible"
                :data="checkedRoleList"
                @change="sureRoleApprover"
            />
			<!--选择岗位-->
			<PositionDialog 
                v-model:visible="appPosistonVisible"
                :data="checkedPostList"
                @change="surePostApprover"
            />
			<!--表单字段-->
			<FormWord
				v-model:visible="appFormTableVisible"
                :data="checkedFormList"
				:formid="props.customerFormKey"
				:formtype="1"
                @change="sureFormTableApprover"
			/>

		</div>
	</el-drawer>
</template>
<style  lang='scss' scoped>

.approver_some .el-radio-group {
  display: block;
}
.approver_manager .el-radio-group{
	display: block;
}

.approver_some .el-radio {
  display: block;
}
.set_promoter{
    .approver_content {
        padding-bottom: 10px;
        border-bottom: 0px solid #f2f2f2;
		.el-radio{
			width:auto;
		}
    }
	.approver_manager,.approver_self_select,.approver_some,.approver_self{
		border-top: 1px solid #f2f2f2;
	}
    .approver_self_select,
    .approver_content{
        .el-button{
            margin-bottom: 20px;
        }
    }
    .approver_content,
    .approver_some,
    .approver_self_select{
        .el-radio-group{
            display: unset;
        }
        .el-radio{
            width: 27%;
            margin-bottom: 20px;
            height: 16px;
        }
    }
    .approver_manager p {
        line-height: 32px;
    }
    .approver_manager select {
        width: 420px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
    }
    .approver_manager p.tip {
        margin: 10px 0 22px 0;
        font-size: 12px;
        line-height: 16px;
        color: #f8642d;
    }
    .approver_self {
        padding: 28px 20px;
    }
    .approver_self_select,
    .approver_manager,
    .approver_content,
    .approver_some {
        padding: 20px 20px 20px 20px;
    }
    .approver_manager p:first-of-type,
    .approver_some p {
        line-height: 19px;
        font-size: 14px;
        margin-bottom: 14px;
    }
    .approver_self_select h3 {
        margin: 5px 0 20px;
        font-size: 14px;
        font-weight: bold;
        line-height: 19px;
    }
}
.selected_list{
	margin: 0;
    line-height: 0;
	.tag_us{
		margin-right: 10px;
	}
	span{
		margin-top: 10px;
	}
	a{
		margin-top: 15px;
	}
}

</style>