feat: 自定义 aside collapsed 样式

src/styles/project_normal.scss

@@ -72,4 +72,66 @@ body {
 	flex: 1; /*这里设置为占比1，填充满剩余空间*/
 	height: 100%;
 	overflow: hidden;
+}*/
+// 带触发器(collapsed) 的 外壳样式
+.aside-wrap {
+	--bezier: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	position: relative;
+	z-index: 1;
+	margin-right: 28px;
+	transition: all var(--bezier);
+	&--collapsed {
+		// todo
+	}
+	// 触发器
+	.trigger-bar {
+		cursor: pointer;
+		height: 72px;
+		width: 28px;
+		position: absolute;
+		top: calc(50% - 28px);
+		right: -28px;
+		.bar__top,
+		.bar__bottom {
+			position: absolute;
+			width: 4px;
+			border-radius: 2px;
+			height: 38px;
+			left: 12px;
+			/*	transition:
+				background-color .3s var(--n-bezier),
+				transform .3s var(--n-bezier);*/
+			//transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+			//transition: background-color var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+			transition: background-color var(--bezier), transform var(--bezier);
+			background-color: var(--el-color-info-light-5);
+		}
+		.bar__bottom {
+			position: absolute;
+			top: 34px;
+		}
+
+		&:hover {
+			.bar__top,
+			.bar__bottom {
+				background-color: var(--el-color-info-light-3);
+			}
+			.bar__top {
+				transform: rotate(12deg) scale(1.15) translateY(-2px);
+			}
+			.bar__bottom {
+				transform: rotate(-12deg) scale(1.15) translateY(2px);
+			}
+		}
+		&.trigger-bar--collapsed {
+			&:hover {
+				.bar__top {
+					transform: rotate(-12deg) scale(1.15) translateY(-2px);
+				}
+				.bar__bottom {
+					transform: rotate(12deg) scale(1.15) translateY(2px);
+				}
+			}
+		}
+	}
 }

src/views/approve/components/approvalIndex.vue

@@ -1,12 +1,8 @@
 <template>
 	<div class="flex-column-page-wrap flex-wrap pageWrap">
-		<div class="warp-left">
-			<ApprovedItem :current-task-type="currentTaskType" />
-		</div>
+		<ApprovedItem :current-task-type="currentTaskType" />
 
-		<div class="warp-right">
-			<ApprovedContent :current-task-type="currentTaskType" />
-		</div>
+		<ApprovedContent :current-task-type="currentTaskType" />
 	</div>
 </template>
 

src/views/approve/components/approvedItem.vue

@@ -1,121 +1,127 @@
 <template>
 	<!-- 左侧列表 -->
-	<div class="flow-content">
-		<!-- 搜索条件 -->
-		<div class="search-box">
-			<div class="search-segment" style="flex: 1 1 0%">
-				<el-input v-model="searchParams.processName" placeholder="流程名称">
-					<template #append>
-						<el-button icon="Search" @click.stop="initList" />
-					</template>
-				</el-input>
-			</div>
-			<div class="search-segment">
-				<el-tooltip effect="dark" content="重置" placement="top">
-					<el-button icon="Refresh" @click.stop="resetSearch('external')" />
-				</el-tooltip>
-			</div>
-			<div class="search-segment">
-				<EditPopover :visible="searchMoreVisible" placement="right" :width="320" :show-footer="false">
-					<template #reference>
-						<el-button icon="Filter" @click="searchMoreVisible = true" />
-					</template>
-					<div class="title">高级筛选</div>
-					<el-scrollbar max-height="400px">
-						<!-- 创建人 -->
-						<el-input v-model="searchParams.createBy" style="width: 240px; margin-bottom: 10px" placeholder="请输入创建人名称" clearable />
-						<!-- 流程状态 -->
-						<el-select v-model="searchParams.instanceState" placeholder="流程状态" style="margin-bottom: 10px; width: 240px" clearable>
-							<el-option v-for="item in instanceStateOps" :key="item.value" :label="item.label" :value="item.value" />
-						</el-select>
-						<el-date-picker
-							v-model="searchParams.beginTime"
-							style="width: 240px; margin-bottom: 10px"
-							type="date"
-							format="YYYY-MM-DD"
-							value-format="YYYY-MM-DD"
-							placeholder="开始时间"
-							:disabled-date="disabledDateStart"
-						/>
-						<el-date-picker
-							v-model="searchParams.endTime"
-							style="width: 240px; margin-bottom: 10px"
-							type="date"
-							format="YYYY-MM-DD"
-							value-format="YYYY-MM-DD"
-							placeholder="结束时间"
-							:disabled-date="disabledDateEnd"
-						/>
-					</el-scrollbar>
-					<div class="footer">
-						<el-button plain @click="searchReset">重置</el-button>
-						<el-button type="primary" plain @click="searchSubmit">检索</el-button>
-					</div>
-				</EditPopover>
-			</div>
+	<div :class="['warp-left aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
+		<div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
+			<div class="bar__top"></div>
+			<div class="bar__bottom"></div>
 		</div>
-		<!-- 内容值 -->
-		<div v-infinite-scroll="loadList" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
-			<div
-				v-for="i in listData.list"
-				:key="i.instanceId"
-				class="item-box"
-				:class="[i.instanceId === taskProcessInfo.currentTaskRow.instanceId ? 'item-box-choosed' : '']"
-				@click="getTaskDetail(i)"
-			>
-				<div class="flow-card-box flow-card-box-hoverable">
-					<!--头部-->
-					<div class="header">
-						<le-text class="flex-1" tag="b" :value="i.processName" />
-						<div class="ml-1">
-							<el-text v-if="['pendingApproval', 'pendingClaim'].indexOf(props.currentTaskType) !== -1" class="mr-0.5">{{
-								i.performType == 2 ? '会签' : i.performType == 3 ? '或签' : i.performType == 4 ? '票签' : ''
-							}}</el-text>
-
-							<el-tag v-if="i.processType === 'child'" type="warning" class="mr-0.5">子流程</el-tag>
-							<el-tag v-else-if="i.processType === 'business'" type="warning" class="mr-0.5">业务流程</el-tag>
-							<el-tag v-if="currentTaskType === 'pendingApproval'">待审批</el-tag>
-							<template v-else>
-								<el-tag v-if="i.instanceState === 0">审批中</el-tag>
-								<el-tag v-if="i.instanceState === 1" type="success">审批通过</el-tag>
-								<el-tag v-if="i.instanceState === 2" type="danger">审批拒绝</el-tag>
-								<el-tag v-if="i.instanceState === 3" type="warning">撤销审批</el-tag>
-								<el-tag v-if="i.instanceState === 4" type="danger">超时结束</el-tag>
-								<el-tag v-if="i.instanceState === 5" type="danger">强制终止</el-tag>
-							</template>
+		<div class="flow-content">
+			<!-- 搜索条件 -->
+			<div class="search-box">
+				<div class="search-segment" style="flex: 1 1 0%">
+					<el-input v-model="searchParams.processName" placeholder="流程名称">
+						<template #append>
+							<el-button icon="Search" @click.stop="initList" />
+						</template>
+					</el-input>
+				</div>
+				<div class="search-segment">
+					<el-tooltip effect="dark" content="重置" placement="top">
+						<el-button icon="Refresh" @click.stop="resetSearch('external')" />
+					</el-tooltip>
+				</div>
+				<div class="search-segment">
+					<EditPopover :visible="searchMoreVisible" placement="right" :width="320" :show-footer="false">
+						<template #reference>
+							<el-button icon="Filter" @click="searchMoreVisible = true" />
+						</template>
+						<div class="title">高级筛选</div>
+						<el-scrollbar max-height="400px">
+							<!-- 创建人 -->
+							<el-input v-model="searchParams.createBy" style="width: 240px; margin-bottom: 10px" placeholder="请输入创建人名称" clearable />
+							<!-- 流程状态 -->
+							<el-select v-model="searchParams.instanceState" placeholder="流程状态" style="margin-bottom: 10px; width: 240px" clearable>
+								<el-option v-for="item in instanceStateOps" :key="item.value" :label="item.label" :value="item.value" />
+							</el-select>
+							<el-date-picker
+								v-model="searchParams.beginTime"
+								style="width: 240px; margin-bottom: 10px"
+								type="date"
+								format="YYYY-MM-DD"
+								value-format="YYYY-MM-DD"
+								placeholder="开始时间"
+								:disabled-date="disabledDateStart"
+							/>
+							<el-date-picker
+								v-model="searchParams.endTime"
+								style="width: 240px; margin-bottom: 10px"
+								type="date"
+								format="YYYY-MM-DD"
+								value-format="YYYY-MM-DD"
+								placeholder="结束时间"
+								:disabled-date="disabledDateEnd"
+							/>
+						</el-scrollbar>
+						<div class="footer">
+							<el-button plain @click="searchReset">重置</el-button>
+							<el-button type="primary" plain @click="searchSubmit">检索</el-button>
 						</div>
-					</div>
-					<!--操作类容-->
-					<div class="summary-list">
-						<template v-if="['myReceived', 'myApplication', 'approved'].indexOf(currentTaskType) !== -1">
-							<div v-if="i.endTime" class="summary-item">
-								<div class="label">结束时间：</div>
-								<div class="value">{{ i.endTime }}</div>
-							</div>
-							<div v-if="i.duration" class="summary-item">
-								<div class="label">处理耗时：</div>
-								<div class="value">{{ millisecondsToMinutesAndSeconds(i.duration) }}</div>
+					</EditPopover>
+				</div>
+			</div>
+			<!-- 内容值 -->
+			<div v-infinite-scroll="loadList" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
+				<div
+					v-for="i in listData.list"
+					:key="i.instanceId"
+					class="item-box"
+					:class="[i.instanceId === taskProcessInfo.currentTaskRow.instanceId ? 'item-box-choosed' : '']"
+					@click="getTaskDetail(i)"
+				>
+					<div class="flow-card-box flow-card-box-hoverable">
+						<!--头部-->
+						<div class="header">
+							<le-text class="flex-1" tag="b" :value="i.processName" />
+							<div class="ml-1">
+								<el-text v-if="['pendingApproval', 'pendingClaim'].indexOf(props.currentTaskType) !== -1" class="mr-0.5">{{
+									i.performType == 2 ? '会签' : i.performType == 3 ? '或签' : i.performType == 4 ? '票签' : ''
+								}}</el-text>
+
+								<el-tag v-if="i.processType === 'child'" type="warning" class="mr-0.5">子流程</el-tag>
+								<el-tag v-else-if="i.processType === 'business'" type="warning" class="mr-0.5">业务流程</el-tag>
+								<el-tag v-if="currentTaskType === 'pendingApproval'">待审批</el-tag>
+								<template v-else>
+									<el-tag v-if="i.instanceState === 0">审批中</el-tag>
+									<el-tag v-if="i.instanceState === 1" type="success">审批通过</el-tag>
+									<el-tag v-if="i.instanceState === 2" type="danger">审批拒绝</el-tag>
+									<el-tag v-if="i.instanceState === 3" type="warning">撤销审批</el-tag>
+									<el-tag v-if="i.instanceState === 4" type="danger">超时结束</el-tag>
+									<el-tag v-if="i.instanceState === 5" type="danger">强制终止</el-tag>
+								</template>
 							</div>
-						</template>
+						</div>
+						<!--操作类容-->
+						<div class="summary-list">
+							<template v-if="['myReceived', 'myApplication', 'approved'].indexOf(currentTaskType) !== -1">
+								<div v-if="i.endTime" class="summary-item">
+									<div class="label">结束时间：</div>
+									<div class="value">{{ i.endTime }}</div>
+								</div>
+								<div v-if="i.duration" class="summary-item">
+									<div class="label">处理耗时：</div>
+									<div class="value">{{ millisecondsToMinutesAndSeconds(i.duration) }}</div>
+								</div>
+							</template>
 
-						<div v-if="i.currentNodeName !== 'complete' && i.endTime ==null" class="summary-item">
-							<div class="label">当前所在节点：</div>
-							<div class="value">{{ i.currentNodeName }}</div>
+							<div v-if="i.currentNodeName !== 'complete' && i.endTime == null" class="summary-item">
+								<div class="label">当前所在节点：</div>
+								<div class="value">{{ i.currentNodeName }}</div>
+							</div>
 						</div>
-					</div>
-					<!--底部-->
-					<div class="footer">
-						<!-- 头像 -->
-						<div class="initiator">
-							<FlowNodeAvatar :name="i.createBy" />
+						<!--底部-->
+						<div class="footer">
+							<!-- 头像 -->
+							<div class="initiator">
+								<FlowNodeAvatar :name="i.createBy" />
+							</div>
+							<!-- 时间 -->
+							<div class="begin-time">提交于 {{ i.createTime }}</div>
 						</div>
-						<!-- 时间 -->
-						<div class="begin-time">提交于 {{ i.createTime }}</div>
 					</div>
 				</div>
+				<div v-if="loading" class="flow-bottom-txt">加载中...</div>
+				<div v-if="noMore" class="flow-bottom-txt no-more">没有更多了</div>
 			</div>
-			<div v-if="loading" class="flow-bottom-txt">加载中...</div>
-			<div v-if="noMore" class="flow-bottom-txt no-more">没有更多了</div>
 		</div>
 	</div>
 </template>
@@ -188,7 +194,7 @@ const instanceStateOps = [
 // const beginTime = ref(null) // 开始时间
 // const endTime = ref(null) // 结束时间
 const searchMoreVisible = ref(false)
-
+const isCollapsed = ref(false)
 // store值
 const taskProcessInfo = useTaskProcessStore()
 // 下拉滚动属性值 start
@@ -494,4 +500,11 @@ const disabledInfinite = computed(() => loading.value || noMore.value)
 		}
 	}
 }
+.aside-wrap--collapsed {
+	margin-left: -10px;
+	.flow-content {
+		width: 0;
+		min-width: 0;
+	}
+}
 </style>