feat: 审批管理 页面调整

src/views/flow/group/components/listGroup.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="list_group_container">
 		<div v-if="!hideAddInput" class="group_list">
-			<div class="group_header flex flex-pack-justify flex-align-center">
+			<div class="group_header flex flex-pack-justify items-center">
 				<div class="group_header_title">
 					<span>
 						<el-input v-model="listGroupName" v-autoFocus placeholder="请输入流程组名称" @blur="addFlowGroup" />
@@ -18,7 +18,7 @@
 		>
 			<template #item="{ element: item, index }">
 				<div class="group_list">
-					<div class="group_header flex flex-pack-justify flex-align-center px-4">
+					<div class="group_header flex flex-pack-justify items-center px-4">
 						<div class="group_header_title">
 							<span>
 								<template v-if="!item.editor">
@@ -63,12 +63,11 @@
 							<template #item="{ element }">
 								<li class="group_item">
 									<el-row :gutter="5">
-										<el-col :span="5">
-											<div class="flex flex-align-center">
-												<LeIcon class="group_itemIcon" :icon-class="`${flowIconPrefix}${element.processIcon}`" />
-
+										<el-col :span="5" :xs="7">
+											<div class="flex items-center h-[42px]">
+												<LeIcon class="group_itemIcon text-[2rem]" :icon-class="`${flowIconPrefix}${element.processIcon}`" />
 												<div class="truncate pr-2">
-													<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
+													<div class="group_itemNameWrapper flex items-center">
 														<div class="group_itemName">
 															<span :title="element.processName">{{ element.processName }}</span>
 														</div>
@@ -79,19 +78,19 @@
 												</div>
 											</div>
 										</el-col>
-										<el-col :span="15">
-											<div class="flex flex-align-center" style="height: 42px">
+										<el-col :span="15" :xs="9">
+											<div class="flex items-center" style="height: 42px">
 												<div class="flex-1">
-													<el-tag round>V{{ element.processVersion }}</el-tag>
-													<el-tag v-if="element.processType === 'child'" type="warning" round class="ml-1">子流程</el-tag>
-													<el-tag v-if="element.processType === 'business'" type="success" round class="ml-1">业务流程</el-tag>
-													<el-tag v-if="element.processState === 0" type="danger" round class="ml-1">已停用</el-tag>
+													<el-tag size="small" round>V{{ element.processVersion }}</el-tag>
+													<el-tag v-if="element.processType === 'child'" type="warning" round class="ml-1"  size="small">子流程</el-tag>
+													<el-tag v-if="element.processType === 'business'" type="success" round class="ml-1"  size="small">业务流程</el-tag>
+													<el-tag v-if="element.processState === 0" type="danger" round class="ml-1"  size="small">已停用</el-tag>
 												</div>
-												<div class="flex-1">{{ element.processKey }}</div>
+												<div class="flex-1 max-m:hidden">{{ element.processKey }}</div>
 											</div>
 										</el-col>
-										<el-col :span="4">
-											<div class="group_itemOperations flex flex-pack-end flex-align-center pr-1" style="height: 42px">
+										<el-col :span="4" :xs="8">
+											<div class="group_itemOperations flex flex-pack-end items-center pr-1" style="height: 42px">
 												<el-tooltip effect="dark" content="版本控制" placement="top">
 													<LeIcon
 														v-if="element.processVersion > 1"
@@ -434,11 +433,11 @@ defineExpose({
 			.group_itemIcon {
 				flex-shrink: 0;
 				margin-right: 8px;
-				height: 42px;
-				width: 42px;
+				//height: 42px;
+				//width: 42px;
 				border-radius: 50%;
 				overflow: hidden;
-				font-size: 42px;
+				//font-size: 42px;
 				/*img {
 					width: 100%;
 					height: 100%;
@@ -450,6 +449,9 @@ defineExpose({
 			}
 			.group_itemOperations {
 				cursor: pointer;
+				.le-icon {
+					flex-shrink: 0;
+				}
 			}
 			.group_itemIntro {
 				font-size: 14px;

src/views/flow/group/index.vue

@@ -1,9 +1,16 @@
 <template>
 	<el-container class="flex-column-page-wrap group-container">
 		<div class="ApprovalList">
-			<el-header class="flex flex-align-center" style="padding: 0">
-				<el-input v-model="keyword" style="width: 200px" placeholder="搜索" clearable @blur="searchProcess" @clear="searchProcess" />
-				<div style="margin-left: auto; flex-shrink: 0">
+			<header class="flex flex-wrap mb-[10px]">
+				<el-input
+					v-model="keyword"
+					class="w-[300px] max-m:w-full mt-[10px] mr-auto"
+					placeholder="搜索"
+					clearable
+					@blur="searchProcess"
+					@clear="searchProcess"
+				/>
+				<div class="actions flex-1 max-m:w-full flex flex-wrap justify-end gap-x-[8px] gap-y-[10px]">
 					<template v-if="!sortFlag">
 						<el-button @click="addNewGroupEv">新建分组</el-button>
 						<el-button @click="changeComponent">分组排序</el-button>
@@ -20,7 +27,7 @@
 					</el-tooltip>
 					<el-button :type="sortFlag ? 'info' : 'primary'" icon="Plus" :disabled="sortFlag" @click="createProcessEv('index')">创建审批</el-button>
 				</div>
-			</el-header>
+			</header>
 			<el-alert title="长按流程或分组可拖拽排序" type="warning" show-icon />
 			<div class="mt-4">
 				<component :is="typeComponentMap[pageType]" ref="dyncComponent"></component>
@@ -88,5 +95,13 @@ const createProcessEv = url => {
 	padding: 0 10px;
 	//width: 98%;
 	//min-width: 900px;
+	.actions {
+		margin-top: 10px;
+		.el-button {
+			& + .el-button {
+				margin-left: 0;
+			}
+		}
+	}
 }
 </style>