perf: 优化 流程创建创建 pc/手机

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

@@ -157,7 +157,7 @@ defineExpose({
 <template>
 	<div class="base-info">
 		<div class="base-info-panel" style="position: relative">
-			<el-form ref="formRef" :model="flowInfo" :rules="rules" label-position="top">
+			<el-form class="base-info-form" ref="formRef" :model="flowInfo" :rules="rules" label-position="top">
 				<el-form-item label="图标" prop="flowInfo.processIcon">
 					<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${flowInfo.processIcon}`" style="margin-right: 8px" />
 
@@ -242,19 +242,27 @@ defineExpose({
 
 .base-info {
 	margin: 0 auto;
-	padding: 24px 0;
+	padding: 12px;
 	height: 100%;
 	text-align: center;
 	overflow-y: auto;
 	background-color: var(--el-color-info-light-9);
 	position: relative;
 	&-panel {
-		display: inline-block;
-		width: 1128px;
-		padding: 24px 288px;
+		//display: inline-block;
+		//width: 1128px;
+		//padding: 24px 288px;
+		//max-width: 1128px;
+		padding: 24px;
 		background-color: var(--el-bg-color);
 		text-align: left;
 	}
+	&-form {
+		width: 100%;
+		max-width: 560px;
+		margin-left: auto;
+		margin-right: auto;
+	}
 }
 
 .icon-selector__dialog__content {

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

@@ -17,65 +17,62 @@ defineExpose({
 	<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 v-model="flowInfo.processSetting.allowRevocation" label="允许撤销审批中的申请" />
-							<p class="revoke-setting-sub-text mtb10">第一个审批节点通过后，提交人仍可撤销申请（配置前已发起的申请不生效）</p>
-						</div>
-						<template v-if="false">
-							<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>
-						</template>
+				<div class="_1zQ9x381ImhBju8yBmxOez">提交人权限</div>
+				<div class="_2j8sMpwI4XNYcuEeV6f56-">
+					<div class="other-setting-checkbox-item">
+						<el-checkbox v-model="flowInfo.processSetting.allowRevocation" label="允许撤销审批中的申请" />
+						<p class="revoke-setting-sub-text mtb10">第一个审批节点通过后，提交人仍可撤销申请（配置前已发起的申请不生效）</p>
 					</div>
-				</div>
-
-				<div v-if="false" class="GS0bhCVCInEfL1rl9MMNr">
-					<div class="_1zQ9x381ImhBju8yBmxOez">审批人设置</div>
-					<div class="_2j8sMpwI4XNYcuEeV6f56-">
+					<template v-if="false">
 						<div class="other-setting-checkbox-item">
-							<el-checkbox label="允许审批人批量处理" />
-							<p class="revoke-setting-sub-text mtb10">勾选后，审批人在处理此流程的任务时，可一次批量处理多个任务</p>
+							<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">若审批人浏览单据小于3秒或通过快捷审批处理，系统会在审批记录中进行标记</p>
+							<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">可在审批bot的消息卡片、移动端列表卡片上进行快捷操作，无需进入具体详情页操作</p>
+							<el-checkbox label="允许代他人提交" />
+							<p class="revoke-setting-sub-text mtb10">代提人和实际提交人都需在该审批的发起范围内，提交后将共享审批单后续状态</p>
 						</div>
+					</template>
+				</div>
+			</div>
+			<div v-if="false" class="other-settings-setting-item">
+				<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 v-if="false" 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 v-if="false" class="other-settings-setting-item">
+				<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 v-if="false" 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 v-if="false" class="other-settings-setting-item">
+				<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>
@@ -85,8 +82,8 @@ defineExpose({
 
 <style scoped lang="scss">
 .other-settings-wrapper {
-	margin: 0px auto;
-	padding: 24px 0px;
+	margin: 0 auto;
+	padding: 12px;
 	text-align: center;
 	overflow-y: auto;
 	height: 100%;
@@ -94,21 +91,22 @@ defineExpose({
 }
 
 .other-settings-panel {
-	width: 1128px;
+	//width: 1128px;
+	//max-width: 1128px;
 	background-color: var(--el-bg-color);
-	padding: 32px 0px;
+	padding: 24px;
 	text-align: left;
 }
 
-.GS0bhCVCInEfL1rl9MMNr ._2j8sMpwI4XNYcuEeV6f56- {
+.other-settings-setting-item ._2j8sMpwI4XNYcuEeV6f56- {
 	width: calc(100% - 110px);
 	flex-shrink: 0;
 	flex-grow: 0;
 	margin-left: 16px;
 }
-.GS0bhCVCInEfL1rl9MMNr {
+.other-settings-setting-item {
 	display: flex;
-	width: 823px;
+	//width: 823px;
 	._1zQ9x381ImhBju8yBmxOez {
 		width: 94px;
 		//color: rgb(31, 35, 41);
@@ -123,7 +121,7 @@ defineExpose({
 .other-settings-panel {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
+	//align-items: center;
 }
 
 .revoke-setting-sub-text {

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

@@ -70,3 +70,15 @@ defineExpose({
 		<er-form-editor ref="EReditorRef" :is-show-i18n="false" :fileUploadURI="uploadFileApi" @listener="handleListener" />
 	</div>
 </template>
+<style lang="scss" scoped>
+.form-design-wrap {
+	//background: var(--el-bg-color-page);
+	padding: 12px;
+	:deep(.Everright-formEditor-Main) {
+		background-color: var(--el-bg-color);
+		//overflow-x: auto;
+		overflow: auto;
+		//height: 100%;
+	}
+}
+</style>

src/views/flow/create/index.vue

@@ -1,27 +1,32 @@
 <template>
-	<div class="create-approval">
+	<div class="column-page-wrap create-approval">
 		<div class="create-approval-header flex flex_align-center">
-			<div v-if="false" class="create-approval-header-back">
-				<el-icon :size="18">
+			<div class="create-approval-header-back" @click="router.push('/flow/group')">
+				<el-icon :size="20">
 					<ArrowLeft />
 				</el-icon>
 			</div>
 			<div class="create-approval-header-left-zh">
-				<div class="create-approval-header-name">{{ processName }}</div>
+				<div class="create-approval-header-name">
+					<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${processIcon}`" style="margin-right: 8px" />
+					<le-text :value="processName"></le-text>
+				</div>
 				<div v-if="false" class="create-approval-header-time">最近保存：6 分钟前</div>
 			</div>
-			<div class="create-approval-header-tab-list">
-				<div
-					v-for="(item, idx) in componentsArr"
-					:key="idx"
-					class="create-approval-header-tab-item"
-					:class="[item.value === activeTab ? 'active' : '']"
-					@click="activeComponent(idx)"
-				>
-					<span class="create-approval-header-tab-counter">{{ idx + 1 }}</span>
-					<span>{{ item.label }}</span>
+			<el-scrollbar class="scrollbar">
+				<div class="create-approval-header-tab-list">
+					<div
+						v-for="(item, idx) in componentsArr"
+						:key="idx"
+						class="create-approval-header-tab-item"
+						:class="[item.value === activeTab ? 'active' : '']"
+						@click="activeComponent(idx)"
+					>
+						<span class="create-approval-header-tab-counter">{{ idx + 1 }}</span>
+						<span>{{ item.label }}</span>
+					</div>
 				</div>
-			</div>
+			</el-scrollbar>
 			<div class="create-approval-header-right">
 				<el-button v-show="!isView" type="primary" @click="submitHandler">发布</el-button>
 			</div>
@@ -44,6 +49,7 @@ import { useRoute, useRouter } from 'vue-router'
 import process from '@/api/flow/process'
 import useStore from '@/store'
 import { ElMessage } from 'element-plus'
+import { flowIconPrefix } from '@/utils'
 const { tagsView } = useStore()
 const router = useRouter()
 const route = useRoute()
@@ -218,45 +224,75 @@ getCurrentProcessDetailEv()
 
 <style scoped lang="scss">
 .create-approval {
-	height: 100%;
-	min-width: 1200px;
-	min-height: 600px;
-	overflow: auto;
-
+	//height: 100%;
+	//min-width: 1200px;
+	//min-height: 600px;
+	//overflow: auto;
+	.scrollbar {
+		//height: 64px;
+		//padding: 0 12px;
+		margin: 0 6px;
+		//background-color: var(--el-bg-color);
+		//box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06);
+		//height: 100%;
+		//background-color: var(--el-color-info-light-9);
+		:deep(.el-scrollbar__bar) {
+			&.is-horizontal {
+				height: 2px;
+			}
+		}
+	}
 	&-header {
 		justify-content: flex-start;
 		height: 64px;
 		//z-index: 12;
 		position: relative;
 		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06);
-		padding-left: 16px;
-		padding-right: 20px;
-
+		background-color: var(--el-bg-color);
+		padding-right: 12px;
+		//padding-right: 20px;
 		&-back {
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;
-			height: 100%;
-			margin-right: 15px;
+			//height: 100%;
+			margin-left: 4px;
+			margin-right: 4px;
+			padding: 8px;
+			cursor: pointer;
+			&:hover {
+				color: var(--el-color-primary);
+			}
 		}
 
 		&-left-zh {
-			width: calc(50% - 316.5px);
-			min-width: 248px;
+			//width: calc(50% - 316.5px);
+			width: 20%;
+			min-width: 100px;
 		}
 
 		&-name {
 			font-weight: 500;
-			font-size: 16px;
-			white-space: nowrap;
-			cursor: pointer;
-			width: -webkit-fit-content;
-			width: -moz-fit-content;
-			width: fit-content;
-			max-width: 100%;
-			height: 24px;
-			overflow: hidden;
-			text-overflow: ellipsis;
+			font-size: 14px;
+			//white-space: nowrap;
+			//cursor: pointer;
+			//width: -webkit-fit-content;
+			//width: -moz-fit-content;
+			//width: fit-content;
+			//max-width: 100%;
+			//height: 24px;
+			//overflow: hidden;
+			//text-overflow: ellipsis;
+			display: flex;
+			align-items: center;
+			.icon-shower {
+				width: 24px;
+				font-size: 24px;
+				//height: 48px;
+				border-radius: 50%;
+				overflow: hidden;
+				flex-shrink: 0;
+			}
 		}
 
 		&-time {
@@ -271,18 +307,19 @@ getCurrentProcessDetailEv()
 		}
 
 		&-tab-list {
-			margin-left: 10px;
-			flex-shrink: 0;
+			//margin: 0 6px;
+			//flex-shrink: 0;
 			display: flex;
 			justify-content: center;
+			width: max-content;
 		}
 
 		&-tab-item {
-			font-family: PingFang SC, Microsoft YaHei;
+			flex-shrink: 0;
 			font-size: 18px;
-			line-height: 28px;
+			line-height: 26px;
 			color: #646a73;
-			margin-right: 42px;
+			margin-right: 18px;
 			padding: 18px 0;
 			border-bottom: 2px solid transparent;
 			cursor: pointer;
@@ -327,9 +364,27 @@ getCurrentProcessDetailEv()
 			width: fit-content;
 		}
 	}
-
 	&-main {
+		//flex: 1;
 		height: calc(100% - 64px);
+		overflow: auto;
+	}
+}
+// 手机端兼容
+.app-mobile {
+	.create-approval-header-tab {
+		&-item {
+			//background: #f00;
+			font-size: 14px;
+			margin-right: 6px;
+		}
+		&-counter {
+			width: 18px;
+			height: 18px;
+			line-height: 16px;
+			margin-right: 4px;
+			font-size: 13px;
+		}
 	}
 }
 </style>