aizuda-web-vue3/src/components/scWorkflow/nodes/approver.vue

<template>
	<div class="node-wrap">
		<div class="node-wrap-box" :class="[disabled ? 'node-wrap-box--disabled' : '', `node-wrap-box--${nodeConfig.local_status}`]">
			<div class="title" style="background: var(--el-color-warning)">
				<el-icon class="icon"><user-filled /></el-icon>
				<span v-show="!isEditTitle" class="title_label" @click="editTitle('box_nodeTitle')"
					>{{ nodeConfig.nodeName }}<el-icon v-if="!disabled" class="edit-icon"><edit /></el-icon
				></span>
				<el-input
					v-show="isEditTitle"
					ref="box_nodeTitle"
					v-model="nodeConfig.nodeName"
					clearable
					size="small"
					@blur="saveTitle"
					@keyup.enter="saveTitle"
				></el-input>
				<el-icon v-if="!disabled" class="close" @click.stop="delNode()"><close /></el-icon>
			</div>
			<div class="content" @click="show">
				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
				<span v-else class="placeholder">请选择</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode" :disabled="disabled"></add-node>
		<el-drawer v-model="drawer" title="审批人设置" destroy-on-close append-to-body :size="600" class="aDrawer">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label v-show="!isEditTitle" @click="editTitle('nodeTitle')"
						>{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon
					></label>
					<el-input
						v-show="isEditTitle"
						ref="nodeTitle"
						v-model="form.nodeName"
						clearable
						@blur="saveNodeTitle"
						@keyup.enter="saveNodeTitle"
					></el-input>
				</div>
			</template>
			<el-container>
				<el-main>
					<el-form label-position="top" class="aForm">
						<el-form-item label="审批类型" style="margin-bottom: 8px">
							<el-radio-group v-model="form.typeOfApprover">
								<el-radio v-for="v of approveTypeOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
					<!-- 人工审批 -->
					<div v-show="form.typeOfApprover === '1'">
						<div class="self-radio-group">
							<el-radio-group v-model="radio1">
								<el-radio-button v-for="v of approveType_1_options" :key="v.value" :label="v.value">{{ v.label }}</el-radio-button>
							</el-radio-group>
						</div>
						<!-- 设置审批人 -->
						<el-form v-show="radio1 === '1'" label-position="top" class="aForm">
							<el-form-item label="">
								<div class="item-wrap approver" style="width: 100%">
									<div class="approver-list">
										<div class="approver-wrapper">
											<div class="header">
												<span>审批人员类型</span>
											</div>
											<div class="main-content">
												<el-radio-group v-model="form.setType" class="main-content-radio">
													<el-radio v-for="v of setTypeOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio>
												</el-radio-group>
											</div>
										</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item v-if="form.setType === 1" label="选择成员">
								<el-button type="primary" icon="plus" round @click="selectHandle(1, form.nodeAssigneeList)">选择人员</el-button>
								<div class="tags-list">
									<el-tag v-for="(user, index) in form.nodeAssigneeList" :key="user.id" closable @close="delUser(index)">{{ user.name }}</el-tag>
								</div>
							</el-form-item>

							<el-form-item v-if="form.setType === 2" label="指定主管">
								<div>发起人的第 <el-input-number v-model="form.examineLevel" :min="1" :max="20" /> 级主管</div>
							</el-form-item>

							<el-form-item v-if="form.setType === 3" label="选择角色">
								<el-button type="primary" icon="plus" round @click="selectHandle(3, form.nodeAssigneeList)">选择角色</el-button>
								<div class="tags-list">
									<el-tag v-for="(role, index) in form.nodeAssigneeList" :key="role.id" type="info" closable @close="delRole(index)">{{
										role.name
									}}</el-tag>
								</div>
							</el-form-item>

							<el-form-item v-if="form.setType === 4" label="发起人自选">
								<el-radio-group v-model="form.selectMode">
									<el-radio v-for="v of selectModeOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio>
								</el-radio-group>
							</el-form-item>

							<el-form-item v-if="form.setType === 6" label="连续主管审批终点">
								<el-radio-group v-model="form.directorMode">
									<el-radio v-for="v of directorModeOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio>
								</el-radio-group>
								<div v-if="form.directorMode === 1" style="margin-top: 4px">
									直到发起人的第 <el-input-number v-model="form.examineLevel" :min="1" :max="20" /> 级主管
								</div>
							</el-form-item>
							<el-divider></el-divider>
							<el-form-item label="">
								<el-checkbox v-model="form.termAuto" label="超时自动审批"></el-checkbox>

								<el-checkbox v-model="form.remind" label="审批提醒"></el-checkbox>
							</el-form-item>
							<template v-if="form.termAuto">
								<el-form-item label="审批期限（为 0 则不生效）"> <el-input-number v-model="form.term" :min="0" /> 小时 </el-form-item>
								<el-form-item label="审批期限超时后执行">
									<el-radio-group v-model="form.termMode">
										<el-radio :label="0">自动通过</el-radio>
										<el-radio :label="1">自动拒绝</el-radio>
									</el-radio-group>
								</el-form-item>
							</template>
							<el-divider></el-divider>
							<el-form-item label="多人审批时审批方式">
								<el-radio-group v-model="form.examineMode">
									<el-radio v-for="v of examineModeOptions" :key="v.value" style="width: 100%" :label="v.value">{{ v.label }}</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-divider></el-divider>
							<el-form-item label="审批人与提交人为同一人时">
								<el-radio-group v-model="form.approveSelf">
									<el-radio v-for="v of approveSelfOptions" :key="v.value" style="width: 40%" :label="v.value">{{ v.label }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-form>

						<!-- 表单设置 -->
						<div v-show="radio1 === '2'">
							<el-table ref="multipleTableRef" :data="form.extendConfig.formConfig" style="width: 100%">
								<el-table-column property="label" label="表单字段" align="center" />
								<el-table-column align="center">
									<template #header>操作权限</template>
									<template #default="scope">
										<el-radio-group v-model="scope.row.opera">
											<el-radio label="0" size="small">只读</el-radio>
											<el-radio label="1" size="small">编辑</el-radio>
											<el-radio label="2" size="small">隐藏</el-radio>
										</el-radio-group>
									</template>
								</el-table-column>
							</el-table>
						</div>

						<!-- 操作权限 -->
						<el-form v-show="radio1 === '3'" label-position="top" class="aForm">
							<el-form-item label="" style="margin-bottom: 28px">
								<div style="display: flex; flex-direction: column">
									<el-checkbox v-model="form.allowTransfer" label="允许转交" />
									<el-checkbox v-model="form.allowAppendNode" label="允许加签/减签" />
									<el-checkbox v-model="form.allowRollback" label="允许回退" />
								</div>
							</el-form-item>

							<el-form-item label="提示: ">
								<div><el-text type="primary">*</el-text>&nbsp;若审批人设置为连续多级上级、连续多级部门负责人时，允许的加签 / 减签不能生效。</div>
								<div><el-text type="primary">*</el-text>&nbsp;若多人审批方式为依次审批时，允许的加签 / 减签不能生效。</div>
							</el-form-item>
						</el-form>
					</div>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer = false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
import addNode from './addNode'
// import { Plus } from '@element-plus/icons-vue'
import { mapState } from 'pinia' //引入映射函数
import useFlowStore from '@/store/modules/flow'
import {
	approveTypeOptions,
	approveType_1_options,
	setTypeOptions,
	selectModeOptions,
	approveSelfOptions,
	directorModeOptions,
	examineModeOptions,
	setTypeOptions_config
} from './config'
import { ElMessage } from 'element-plus'
export default {
	components: {
		addNode
	},
	inject: ['select'],
	props: {
		modelValue: { type: Object, default: () => {} },
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			nodeConfig: {},
			drawer: false,
			isEditTitle: false,
			form: {},
			radio1: '1',
			approveTypeOptions,
			approveType_1_options,
			setTypeOptions,
			selectModeOptions,
			examineModeOptions,
			directorModeOptions,
			approveSelfOptions
		}
	},
	computed: {
		/*Plus() {
			return Plus
		},*/
		...mapState(useFlowStore, ['processForm']) //映射函数，取出processForm
	},
	watch: {
		modelValue() {
			this.nodeConfig = this.modelValue
		},
		'form.setType': {
			handler(type, oldType) {
				// console.error(type, 'type, oldType', oldType)
				if ([1, 3].includes(oldType)) {
					// 上次setType 为 选择成员 or 角色时 对 nodeAssigneeList 重置
					this.form.nodeAssigneeList = []
				}
			}
		}
	},
	mounted() {
		this.nodeConfig = this.modelValue
	},
	methods: {
		show() {
			if (this.disabled) return
			this.form = JSON.parse(JSON.stringify(this.nodeConfig))
			const { formStructure } = JSON.parse(this.processForm)
			const formConfig = this.form.extendConfig?.formConfig || []
			const operateTable = (formStructure?.fields || []).map(item => {
				let opera = '1'
				formConfig.map(i => {
					if (item.id === i.id) {
						opera = i.opera
					}
				})
				return { label: item.label, id: item.id, opera: opera }
			})
			this.$log('这里打印出表单设计中的值===', JSON.stringify(operateTable))
			this.form.extendConfig = { formConfig: operateTable }
			this.drawer = true
		},
		editTitle(refName) {
			if (this.disabled) return
			this.isEditTitle = true
			this.$nextTick(() => {
				this.$refs[refName]?.focus()
			})
		},
		saveTitle() {
			// 只能是 汉字字母数字
			// const reg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
			const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/
			// form.nodeName
			if (!this.nodeConfig.nodeName) {
				return ElMessage.warning('审批人标题不能为空')
			}
			if (!reg.test(this.nodeConfig.nodeName)) {
				return ElMessage.warning('审批人标题只能是数字字母汉字')
			}
			this.isEditTitle = false
		},
		saveNodeTitle() {
			// const reg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
			const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/
			// form.nodeName
			if (!this.form.nodeName) {
				return ElMessage.warning('审批人标题不能为空')
			}
			if (!reg.test(this.form.nodeName)) {
				return ElMessage.warning('审批人标题只能是数字字母汉字')
			}
			this.isEditTitle = false
		},
		emit(data) {
			this.$emit('update:modelValue', data)
		},
		save() {
			const _form = this.form
			if (_form.setType === 1) {
				// 选择成员
				if (!_form.nodeAssigneeList || !_form.nodeAssigneeList.length) return this.$message.warning('请选择成员')
			} else if (_form.setType === 3) {
				// 选择角色
				if (!_form.nodeAssigneeList || !_form.nodeAssigneeList.length) return this.$message.warning('请选择角色')
			}

			this.emit(_form)
			this.drawer = false
		},
		delNode() {
			this.emit(this.nodeConfig.childNode)
		},
		delUser(index) {
			this.form.nodeAssigneeList.splice(index, 1)
		},
		delRole(index) {
			this.form.nodeAssigneeList.splice(index, 1)
		},
		selectHandle(type, data) {
			// type: 1人员, 3角色
			this.select(type, data)
		},
		toText(nodeConfig) {
			const type = nodeConfig.setType
			if (type === 1) {
				if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
					return nodeConfig.nodeAssigneeList.map(item => item.name).join('、')
				} else {
					return false
				}
			} else if (type === 2) {
				return nodeConfig.examineLevel === 1 ? '直接主管' : `发起人的第${nodeConfig.examineLevel}级主管`
			} else if (type === 3) {
				if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
					return '角色-' + nodeConfig.nodeAssigneeList.map(item => item.name).join('、')
				} else {
					return false
				}
			} else {
				const label = setTypeOptions_config[type] || '-'
				return label
			} /*else if (type === 4) {
				return '发起人自选'
			} else if (type === 5) {
				return '发起人自己'
			} else if (type === 6) {
				return '连续多级主管'
			}*/
		}
	}
}
</script>

<style lang="scss">
// 审批类型
.self-radio-group {
	margin-bottom: 8px;
	.el-radio-group {
		//padding: 1.5px;
		width: 100%;
		line-height: 30px;
		background-color: var(--el-fill-color-darker);
		border-radius: var(--el-border-radius-small);
		.el-radio-button {
			flex: 1;
		}
		.el-radio-button__inner {
			width: 100%;
		}
	}
}

// 审批人员类型
.approver-wrapper {
	border: 1px solid #e4e5e7;
	border-radius: 6px;
	overflow: hidden;
	.header {
		padding: 0 16px;
		background: #f5f6f7;
		height: 36px;
		line-height: 36px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		span {
			color: #1f2329;
			font-weight: 600;
		}
	}
	.main-content-radio {
		padding: 10px 16px;
		width: 100%;

		&.el-radio-group {
			display: flex;
			flex-wrap: wrap;
			.el-radio {
				width: 33.33%;
				margin-right: 0px;
			}
		}
	}
}

// 表单表头样式
.aForm {
	&.el-form {
		.el-form-item {
			.el-form-item__label {
				color: #1f2329;
				font-weight: 600;
			}
		}
	}
}

.tags-list {
	.el-tag {
		margin-right: 10px;
	}
}
</style>