feat: 创建流程 扩展配置 100%

src/views/flow/create/components/ExtendSet.vue

@@ -17,7 +17,58 @@ defineProps({
 					<div class="_1zQ9x381ImhBju8yBmxOez">提交人权限</div>
 					<div class="_2j8sMpwI4XNYcuEeV6f56-">
 						<div class="other-setting-checkbox-item">
-							<el-checkbox label="允许撤销审批中的申请" size="large" />
+							<el-checkbox label="允许撤销审批中的申请" size="medium" />
+							<p class="revoke-setting-sub-text mtb10">第一个审批节点通过后，提交人仍可撤销申请（配置前已发起的申请不生效）</p>
+						</div>
+						<div class="other-setting-checkbox-item">
+							<el-checkbox label="允许撤销31天内通过的审批" size="medium" />
+							<p class="revoke-setting-sub-text mtb10">员工可申请撤销已通过的审批（配置前已通过的审批不可撤销）</p>
+						</div>
+						<div class="other-setting-checkbox-item">
+							<el-checkbox label="允许修改31天内通过的审批" size="medium" />
+							<p class="revoke-setting-sub-text mtb10">提交人可申请修改已通过的审批，用于销假等场景（仅可修改一次，配置前已发起的审批不可修改）</p>
+						</div>
+						<div class="other-setting-checkbox-item">
+							<el-checkbox label="允许代他人提交" size="medium" />
+							<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="允许审批人批量处理" size="medium" />
+							<p class="revoke-setting-sub-text mtb10">勾选后，审批人在处理此流程的任务时，可一次批量处理多个任务</p>
+						</div>
+						<div class="other-setting-checkbox-item">
+							<el-checkbox label="开启秒批提示" size="medium" />
+							<p class="revoke-setting-sub-text mtb10">若审批人浏览单据小于3秒或通过快捷审批处理，系统会在审批记录中进行标记</p>
+						</div>
+						<div class="other-setting-checkbox-item">
+							<el-checkbox label="可在审批卡片上进行快捷审批" size="medium" />
+							<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="仅可转发给审批相关人员" size="medium" />
+							<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="该流程数据不纳入效率统计" size="medium" />
+							<p class="revoke-setting-sub-text mtb10">在效率诊断（包括团队、个人、管理员看板）中排除该流程的审批耗时数据</p>
 						</div>
 					</div>
 				</div>
@@ -68,4 +119,26 @@ defineProps({
 	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>

src/views/flow/create/index.vue

@@ -148,14 +148,15 @@ const currentComponent = computed(() => {
 			cursor: pointer;
 
 			&.active {
-				border-bottom-color: #3370ff;
-				color: #3370ff;
+				// var(--el-color-primary);
+				border-bottom-color: var(--el-color-primary);
+				color: var(--el-color-primary);
 				font-weight: 500;
 
 				.create-approval-header-tab-counter {
-					border-color: #3370ff;
-					background-color: #3370ff;
-					color: #fff;
+					border-color: var(--el-color-primary);
+					background-color: var(--el-color-primary);
+					color: var(--el-color-white);
 					font-weight: 400;
 				}
 			}