aizuda-web-vue3/src/views/flow/create/components/ExtendSet.vue

<script setup name="ExtendSet">
defineProps({
	label: {
		type: String
	},
	name: {
		type: String
	}
})
const validate = () => {
  // 根据后续的业务需求 调整 validate 的功能
  return new Promise((resolve, reject) => {
    resolve()
  })
}
defineExpose({
  validate
})
</script>

<template>
	<div class="other-settings-wrapper">
		<div class="other-settings-panel">
			<div class="other-settings-setting-item">
				<div class="GS0bhCVCInEfL1rl9MMNr">
					<div class="_1zQ9x381ImhBju8yBmxOez">提交人权限</div>
					<div class="_2j8sMpwI4XNYcuEeV6f56-">
						<div class="other-setting-checkbox-item">
							<el-checkbox label="允许撤销审批中的申请" />
							<p class="revoke-setting-sub-text mtb10">第一个审批节点通过后，提交人仍可撤销申请（配置前已发起的申请不生效）</p>
						</div>
						<div class="other-setting-checkbox-item">
							<el-checkbox label="允许撤销31天内通过的审批" />
							<p class="revoke-setting-sub-text mtb10">员工可申请撤销已通过的审批（配置前已通过的审批不可撤销）</p>
						</div>
						<div class="other-setting-checkbox-item">
							<el-checkbox label="允许修改31天内通过的审批" />
							<p class="revoke-setting-sub-text mtb10">提交人可申请修改已通过的审批，用于销假等场景（仅可修改一次，配置前已发起的审批不可修改）</p>
						</div>
						<div class="other-setting-checkbox-item">
							<el-checkbox label="允许代他人提交" />
							<p class="revoke-setting-sub-text mtb10">代提人和实际提交人都需在该审批的发起范围内，提交后将共享审批单后续状态</p>
						</div>
					</div>
				</div>

				<div class="GS0bhCVCInEfL1rl9MMNr">
					<div class="_1zQ9x381ImhBju8yBmxOez">审批人设置</div>
					<div class="_2j8sMpwI4XNYcuEeV6f56-">
						<div class="other-setting-checkbox-item">
							<el-checkbox label="允许审批人批量处理" />
							<p class="revoke-setting-sub-text mtb10">勾选后，审批人在处理此流程的任务时，可一次批量处理多个任务</p>
						</div>
						<div class="other-setting-checkbox-item">
							<el-checkbox label="开启秒批提示" />
							<p class="revoke-setting-sub-text mtb10">若审批人浏览单据小于3秒或通过快捷审批处理，系统会在审批记录中进行标记</p>
						</div>
						<div class="other-setting-checkbox-item">
							<el-checkbox label="可在审批卡片上进行快捷审批" />
							<p class="revoke-setting-sub-text mtb10">可在审批bot的消息卡片、移动端列表卡片上进行快捷操作，无需进入具体详情页操作</p>
						</div>
					</div>
				</div>

				<div class="GS0bhCVCInEfL1rl9MMNr">
					<div class="_1zQ9x381ImhBju8yBmxOez">转发设置</div>
					<div class="_2j8sMpwI4XNYcuEeV6f56-">
						<div class="other-setting-checkbox-item">
							<el-checkbox label="仅可转发给审批相关人员" />
							<p class="revoke-setting-sub-text mtb10">审批单仅可被转发给申请人、审批人、抄送人，不能被转发给其他人</p>
						</div>
					</div>
				</div>

				<div class="GS0bhCVCInEfL1rl9MMNr">
					<div class="_1zQ9x381ImhBju8yBmxOez">效率统计</div>
					<div class="_2j8sMpwI4XNYcuEeV6f56-">
						<div class="other-setting-checkbox-item">
							<el-checkbox label="该流程数据不纳入效率统计" />
							<p class="revoke-setting-sub-text mtb10">在效率诊断（包括团队、个人、管理员看板）中排除该流程的审批耗时数据</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.other-settings-wrapper {
	margin: 0px auto;
	padding: 24px 0px;
	text-align: center;
	overflow-y: auto;
	height: 100%;
	background-color: var(--el-color-info-light-9);
}

.other-settings-panel {
	width: 1128px;
	background-color: var(--el-bg-color);
	padding: 32px 0px;
	text-align: left;
}

.GS0bhCVCInEfL1rl9MMNr ._2j8sMpwI4XNYcuEeV6f56- {
	width: calc(100% - 110px);
	flex-shrink: 0;
	flex-grow: 0;
	margin-left: 16px;
}
.GS0bhCVCInEfL1rl9MMNr {
	display: flex;
	width: 823px;
	._1zQ9x381ImhBju8yBmxOez {
		width: 94px;
		//color: rgb(31, 35, 41);
		font-size: 14px;
		font-weight: 550;
		line-height: 22px;
		flex-shrink: 0;
		flex-grow: 0;
	}
}
.other-settings-wrapper,
.other-settings-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.revoke-setting-sub-text {
	//color: #646a73;
	font-size: 14px;
	margin-top: 4px;
	line-height: 22px;
	margin-left: 24px;
	&.mtb10 {
		margin-bottom: 10px;
	}
}

:deep(.other-setting-checkbox-item) {
	.el-checkbox {
		height: var(--el-checkbox-height, 20px);
		&.is-checked {
			.el-checkbox__label {
				color: var(--el-color-info-light);
			}
		}
	}
}
</style>