feat: 审批列表UI调整

src/components/FormConfig/hooks/useForm.tsx

@@ -11,7 +11,7 @@ import { LeFormItem, ObjectOpts, SlotOption } from '@/components/FormConfig/form
 import { get_formSlots, getOptions, renderOption } from '@/components/FormConfig/utils.ts'
 // import { LeTableOptions, LeTableProps } from '@/components/Table'
 // import { SearchFormProps } from '@/components/SearchForm'
-// import { FormConfigProps } from '../index.vue'
+// import { FormConfigProps } from '../index1.vue'
 import { useI18n } from 'vue-i18n'
 import { OptionItemProps } from '@/components/Select/select.types.ts'
 export type FormType = 'FormConfig' | 'SearchForm'

src/layout/index.vue

@@ -7,7 +7,7 @@
 import { computed, type Component } from 'vue'
 import { LayoutType } from '@/store/interface'
 import useStore from '@/store'
-// import RightPanel from '@/components/RightPanel/index.vue'
+// import RightPanel from '@/components/RightPanel/index1.vue'
 import LayoutLeft from './LayoutLeft/index.vue'
 import LayoutLeftMix from './LayoutLeftMix/index.vue'
 import LayoutTop from './LayoutTop/index.vue'

src/router/index.ts

@@ -404,7 +404,7 @@ export const constantRoutes: AppRouteRecordRaw[] = [
 			},
 			{
 				path: 'componentCommunication',
-				component: () => import('@/views/test/componentCommunication/index.vue'),
+				component: () => import('@/views/test/componentCommunication/index1.vue'),
 				name: 'componentCommunication',
 				meta: { title: '组件通信方式' }
 			}
@@ -429,28 +429,28 @@ export const local_permissionsMenuList: Array<AppRouteRecordRaw> = [
 		children: [
 			{
 				path: 'user',
-				// component: () => import('@/views/setting/user/index.vue'),
+				// component: () => import('@/views/setting/user/index1.vue'),
 				component: 'setting/user/index',
 				name: 'user',
 				meta: { title: '用户管理', icon: 'icon-logo' } // 本地icon
 			},
 			{
 				path: 'role',
-				// component: () => import('@/views/setting/role/index.vue'),
+				// component: () => import('@/views/setting/role/index1.vue'),
 				component: 'setting/role/index',
 				name: 'role',
 				meta: { title: '角色管理', icon: 'le-amazon' } // le-iconfont
 			},
 			{
 				path: 'post',
-				// component: () => import('@/views/setting/post/index.vue'),
+				// component: () => import('@/views/setting/post/index1.vue'),
 				component: 'setting/post/index',
 				name: 'post',
 				meta: { title: '岗位管理', icon: '' }
 			},
 			{
 				path: 'app',
-				// component: () => import('@/views/setting/app/index.vue'),
+				// component: () => import('@/views/setting/app/index1.vue'),
 				component: 'setting/app/index',
 				name: 'app',
 				meta: { title: '应用管理', icon: '' }
@@ -458,28 +458,28 @@ export const local_permissionsMenuList: Array<AppRouteRecordRaw> = [
 
 			{
 				path: 'department',
-				// component: () => import('@/views/setting/department/index.vue'),
+				// component: () => import('@/views/setting/department/index1.vue'),
 				component: 'setting/department/index',
 				name: 'department',
 				meta: { title: '部门管理', icon: '' }
 			},
 			{
 				path: 'region',
-				// component: () => import('@/views/setting/region/index.vue'),
+				// component: () => import('@/views/setting/region/index1.vue'),
 				component: 'setting/region/index',
 				name: 'region',
 				meta: { title: '行政区域', icon: '' }
 			},
 			{
 				path: 'configure',
-				// component: () => import('@/views/setting/configure/index.vue'),
+				// component: () => import('@/views/setting/configure/index1.vue'),
 				component: 'setting/configure/index',
 				name: 'configure',
 				meta: { title: '扩展配置', icon: '' }
 			},
 			{
 				path: 'dict',
-				// component: () => import('@/views/setting/dict/index.vue'),
+				// component: () => import('@/views/setting/dict/index1.vue'),
 				component: 'setting/dict/index',
 				name: 'dict',
 				meta: { title: '字典管理', icon: '' }
@@ -510,42 +510,42 @@ export const local_permissionsMenuList: Array<AppRouteRecordRaw> = [
 			},
 			{
 				path: 'group',
-				// component: () => import('@/views/flow/group/index.vue'),
+				// component: () => import('@/views/flow/group/index1.vue'),
 				component: 'flow/group/index',
 				name: 'flow_group',
 				meta: { title: '流程组 - ui调整', icon: '' }
 			},
 			{
 				path: 'form',
-				// component: () => import('@/views/flow/form/index.vue'),
+				// component: () => import('@/views/flow/form/index1.vue'),
 				component: 'flow/form/index',
 				name: 'flow_form',
 				meta: { title: '流程表单', icon: '' }
 			},
 			{
 				path: 'create',
-				// component: () => import('@/views/flow/create/index.vue'),
+				// component: () => import('@/views/flow/create/index1.vue'),
 				component: 'flow/create/index',
 				name: 'flow_create',
 				meta: { title: '创建流程', icon: '' }
 			},
 			{
 				path: 'task',
-				// component: () => import('@/views/flow/task/index.vue'),
+				// component: () => import('@/views/flow/task/index1.vue'),
 				component: 'flow/task/index',
 				name: 'flow_task',
 				meta: { title: '流程任务', icon: '' }
 			},
 			{
 				path: 'instance',
-				// component: () => import('@/views/flow/instance/index.vue'),
+				// component: () => import('@/views/flow/instance/index1.vue'),
 				component: 'flow/instance/index',
 				name: 'flow_instance',
 				meta: { title: '流程实例', icon: '' }
 			},
 			{
 				path: 'modal',
-				// component: () => import('@/views/flow/modal/index.vue'),
+				// component: () => import('@/views/flow/modal/index1.vue'),
 				component: 'flow/modal/index',
 				name: 'flow_modal',
 				meta: { title: '流程模型', icon: '' }

src/router/test_routes.ts

@@ -35,42 +35,42 @@ const routers = [
 			},
 			{
 				path: 'group',
-				// component: () => import('@/views/flow/group/index.vue'),
+				// component: () => import('@/views/flow/group/index1.vue'),
 				component: 'flow/group/index',
 				name: 'flow_group',
 				meta: { title: '流程组 - ui调整', icon: '' }
 			},
 			{
 				path: 'form',
-				// component: () => import('@/views/flow/form/index.vue'),
+				// component: () => import('@/views/flow/form/index1.vue'),
 				component: 'flow/form/index',
 				name: 'flow_form',
 				meta: { title: '流程表单', icon: '' }
 			},
 			{
 				path: 'create',
-				// component: () => import('@/views/flow/create/index.vue'),
+				// component: () => import('@/views/flow/create/index1.vue'),
 				component: 'flow/create/index',
 				name: 'flow_create',
 				meta: { title: '创建流程', icon: '' }
 			},
 			{
 				path: 'task',
-				// component: () => import('@/views/flow/task/index.vue'),
+				// component: () => import('@/views/flow/task/index1.vue'),
 				component: 'flow/task/index',
 				name: 'flow_task',
 				meta: { title: '流程任务', icon: '' }
 			},
 			{
 				path: 'instance',
-				// component: () => import('@/views/flow/instance/index.vue'),
+				// component: () => import('@/views/flow/instance/index1.vue'),
 				component: 'flow/instance/index',
 				name: 'flow_instance',
 				meta: { title: '流程实例', icon: '' }
 			},
 			{
 				path: 'modal',
-				// component: () => import('@/views/flow/modal/index.vue'),
+				// component: () => import('@/views/flow/modal/index1.vue'),
 				component: 'flow/modal/index',
 				name: 'flow_modal',
 				meta: { title: '流程模型', icon: '' }

src/store/modules/permission.ts

@@ -139,7 +139,7 @@ const usePermissionStore = defineStore({
 				{
 					path: 'dashboard',
 					// path: HOME_URL,
-					component: () => import('@/views/dashboard/index.vue'),
+					component: () => import('@/views/dashboard/index1.vue'),
 					name: 'dashboard',
 					meta: { title: 'dashboard', icon: 'icon-homepage', affix: true }
 				}

src/views/approve/components/approvedContent.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+	name: "approvedContent.vue"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/approve/components/approvedItem.vue

@@ -0,0 +1,51 @@
+<template>
+	<!-- 左侧列表 -->
+	<div class="flow-content">
+		<!-- 搜索条件 -->
+		<!-- 内容值 -->
+		<div class="flow-list-box">
+			<div class="item-box">
+				<div class="flow-card-box flow-card-box-hoverable"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ApprovedItem'
+}
+</script>
+
+<style scoped lang="scss">
+.flow-content {
+	width: 330px;
+	min-width: 330px;
+	height: 100%;
+	overflow: hidden;
+	background: var(--el-bg-color);
+	border-radius: 6px;
+
+	.flow-list-box {
+		background-color: #fff;
+		padding: 0 12px;
+		height: calc(100vh - 161px);
+		overflow: hidden auto;
+		scroll-snap-type: y mandatory;
+		will-change: scroll-position;
+		.item-box {
+			margin-bottom: 12px;
+		}
+		.flow-card-box {
+			-webkit-user-select: none;
+			user-select: none;
+			border-radius: 6px;
+			overflow: hidden;
+			border: 1px solid #e9ebef;
+			padding: 10px 12px;
+			cursor: pointer;
+			transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
+		}
+	}
+}
+</style>

src/views/approve/pendingClaim/index.vue

@@ -1,209 +1,36 @@
 <template>
-	<div class="pageWrap flex-column-page-wrap">
-		<div class="flex-column-page-wrap">
-			<!-- 公用搜索组件 -->
-			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
-
-			<!--  LeTable 组件使用  -->
-			<LeTable
-				ref="tableRef"
-				v-model:searchParams="tableOpts.searchParams"
-				v-bind="tableOpts"
-				v-model:curRow="tableOpts.curRow"
-				v-model:checked-options="checkedColumns"
-				:columns="activeColumns"
-			>
-				<template #toolLeft>
-					<el-button type="primary">操作认领任务</el-button>
-				</template>
-
-				<template #taskTypeSlot="scope">
-					<el-tag v-if="scope.row.taskType === 0" effect="plain">主办</el-tag>
-					<el-tag v-if="scope.row.taskType === 1" type="success" effect="plain">转办</el-tag>
-					<el-tag v-if="scope.row.taskType === 2" type="info" effect="plain">委派</el-tag>
-					<el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 1" type="info" effect="plain">会签</el-tag>
-					<el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 2" type="warning" effect="plain">或签</el-tag>
-					<el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 2" type="danger" effect="plain">票签</el-tag>
-				</template>
-
-				<template #actionSlot="scope">
-					<el-tooltip content="查看" placement="bottom" effect="light">
-						<el-icon class="ibt0" @click="openDetail(scope.row)">
-							<View />
-						</el-icon>
-					</el-tooltip>
-				</template>
-			</LeTable>
+	<div class="flex-column-page-wrap flex-wrap">
+		<div class="warp-left">
+			<ApprovedItem />
 		</div>
 
-		<message-detail v-if="visibleDetail" v-model="visibleDetail" :message-id="currentId" @closed="visibleDetail = false"> </message-detail>
+		<div class="warp-right">
+			<ApprovedContent />
+		</div>
 	</div>
 </template>
-<script lang="tsx" setup>
-import { processTaskPagePendingClaimApi } from '@/api/flow/processTask'
-import { nextTick, ref, watch } from 'vue'
-import { useTablePage } from '@/hooks/useTablePage'
-import MessageDetail from './detail.vue'
-import { useRoute } from 'vue-router'
-import InstanceDetail from "@/views/flow/instance/instance-detail.vue";
-const route = useRoute()
-
-const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
-const currentId = ref(null)
-
-// 表格搜索条件
-const forms = ref([
-	{
-		prop: 'processName',
-		label: '流程名称：',
-		itemType: 'input',
-		placeholder: '请输入流程名称'
-	},
-	{
-		prop: 'createBy',
-		label: '发布人：',
-		itemType: 'input',
-		placeholder: '请输入发布人'
-	}
-])
-
-// table列表数据请求
-const queryList = async () => {
-	const { options, searchParams } = tableOpts
-	options.loading = true
-	try {
-		const { records: list, total } = await processTaskPagePendingClaimApi(searchParams)
-		tableOpts.total = total
-		tableOpts.list = list
-	} catch {
-		console.log('获取列表数据失败')
-		tableOpts.total = 0
-		tableOpts.list = []
-		options.loading = false // 更改加载中的 loading值
-	} finally {
-		options.loading = false
-	}
-}
-
-// table 参数
-const columns = [
-	{
-		prop: 'processName',
-		label: '流程名称',
-		minWidth: 150
-	},
-	{
-		prop: 'launchBy',
-		label: '发起人',
-		minWidth: 100
-	},
-	{
-		prop: 'launchTime',
-		label: '发起时间',
-		minWidth: 150
-	},
-	{
-		prop: 'taskName',
-		label: '当前任务名称',
-		minWidth: 150
-	},
-	{
-		prop: 'taskType',
-		label: '任务类型',
-		minWidth: 100,
-		slots: {
-			default: 'taskTypeSlot'
-		}
-	},
-	{
-		prop: 'expireTime',
-		label: '期望任务完成时间',
-		minWidth: 150
-	},
-	{
-		prop: 'createTime',
-		label: '任务开始时间',
-		minWidth: 150
-	},
-	{
-		prop: 'action',
-		label: '操作',
-		width: 100,
-		fixed: 'right',
-		slots: {
-			default: 'actionSlot'
-		}
-	}
-]
 
-const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
-	{
-		options: {
-			showIndex: false
-		},
-		// 需要展示的列
-		columns,
-		// 控制列配置
-		columnsConfig: {
-			columns
-		}
-	},
-	{
-		queryList,
-		fetchImmediate: false
-	}
-)
-
-const openDetail = (row: any) => {
-	currentId.value = row.id
-	visibleDetail.value = true
-}
-
-nextTick(() => {
-	queryList()
-})
-
-watch(
-	() => route.query,
-	(newPath, oldPath) => {
-		if (JSON.stringify(newPath) !== '{}') {
-			nextTick(() => {
-				openDetail(newPath)
-			})
-		}
-	},
-	{ immediate: true }
-)
+<script setup>
+import ApprovedItem from '../components/approvedItem.vue'
+import ApprovedContent from '../components/approvedContent.vue'
 </script>
+
 <style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background-color: #fafafa;
-	background-color: var(--el-fill-color-lighter);
-	//background: #fff;
+.flex-column-page-wrap.flex-wrap {
+	flex-direction: row;
+	background-color: #f2f3f5;
+	padding: 10px 10px 0 10px;
 }
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
 
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
+.warp-left {
+	width: 330px; /*固定宽度*/
+	overflow: auto; /*超出部分滚动*/
+	background-color: var(--el-bg-color);
+	margin-right: 10px;
 }
 
-.nopadding {
-	padding: 0px;
+.warp-right {
+	flex: 1; /*这里设置为占比1，填充满剩余空间*/
+	border: 1px solid #ff4400;
 }
 </style>

src/views/approve/pendingClaim/index1.vue

@@ -0,0 +1,209 @@
+<template>
+	<div class="pageWrap flex-column-page-wrap">
+		<div class="flex-column-page-wrap">
+			<!-- 公用搜索组件 -->
+			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
+
+			<!--  LeTable 组件使用  -->
+			<LeTable
+				ref="tableRef"
+				v-model:searchParams="tableOpts.searchParams"
+				v-bind="tableOpts"
+				v-model:curRow="tableOpts.curRow"
+				v-model:checked-options="checkedColumns"
+				:columns="activeColumns"
+			>
+				<template #toolLeft>
+					<el-button type="primary">操作认领任务</el-button>
+				</template>
+
+				<template #taskTypeSlot="scope">
+					<el-tag v-if="scope.row.taskType === 0" effect="plain">主办</el-tag>
+					<el-tag v-if="scope.row.taskType === 1" type="success" effect="plain">转办</el-tag>
+					<el-tag v-if="scope.row.taskType === 2" type="info" effect="plain">委派</el-tag>
+					<el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 1" type="info" effect="plain">会签</el-tag>
+					<el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 2" type="warning" effect="plain">或签</el-tag>
+					<el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 2" type="danger" effect="plain">票签</el-tag>
+				</template>
+
+				<template #actionSlot="scope">
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
+				</template>
+			</LeTable>
+		</div>
+
+		<message-detail v-if="visibleDetail" v-model="visibleDetail" :message-id="currentId" @closed="visibleDetail = false"> </message-detail>
+	</div>
+</template>
+<script lang="tsx" setup>
+import { processTaskPagePendingClaimApi } from '@/api/flow/processTask'
+import { nextTick, ref, watch } from 'vue'
+import { useTablePage } from '@/hooks/useTablePage'
+import MessageDetail from './detail.vue'
+import { useRoute } from 'vue-router'
+import InstanceDetail from "@/views/flow/instance/instance-detail.vue";
+const route = useRoute()
+
+const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
+const currentId = ref(null)
+
+// 表格搜索条件
+const forms = ref([
+	{
+		prop: 'processName',
+		label: '流程名称：',
+		itemType: 'input',
+		placeholder: '请输入流程名称'
+	},
+	{
+		prop: 'createBy',
+		label: '发布人：',
+		itemType: 'input',
+		placeholder: '请输入发布人'
+	}
+])
+
+// table列表数据请求
+const queryList = async () => {
+	const { options, searchParams } = tableOpts
+	options.loading = true
+	try {
+		const { records: list, total } = await processTaskPagePendingClaimApi(searchParams)
+		tableOpts.total = total
+		tableOpts.list = list
+	} catch {
+		console.log('获取列表数据失败')
+		tableOpts.total = 0
+		tableOpts.list = []
+		options.loading = false // 更改加载中的 loading值
+	} finally {
+		options.loading = false
+	}
+}
+
+// table 参数
+const columns = [
+	{
+		prop: 'processName',
+		label: '流程名称',
+		minWidth: 150
+	},
+	{
+		prop: 'launchBy',
+		label: '发起人',
+		minWidth: 100
+	},
+	{
+		prop: 'launchTime',
+		label: '发起时间',
+		minWidth: 150
+	},
+	{
+		prop: 'taskName',
+		label: '当前任务名称',
+		minWidth: 150
+	},
+	{
+		prop: 'taskType',
+		label: '任务类型',
+		minWidth: 100,
+		slots: {
+			default: 'taskTypeSlot'
+		}
+	},
+	{
+		prop: 'expireTime',
+		label: '期望任务完成时间',
+		minWidth: 150
+	},
+	{
+		prop: 'createTime',
+		label: '任务开始时间',
+		minWidth: 150
+	},
+	{
+		prop: 'action',
+		label: '操作',
+		width: 100,
+		fixed: 'right',
+		slots: {
+			default: 'actionSlot'
+		}
+	}
+]
+
+const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
+	{
+		options: {
+			showIndex: false
+		},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+const openDetail = (row: any) => {
+	currentId.value = row.id
+	visibleDetail.value = true
+}
+
+nextTick(() => {
+	queryList()
+})
+
+watch(
+	() => route.query,
+	(newPath, oldPath) => {
+		if (JSON.stringify(newPath) !== '{}') {
+			nextTick(() => {
+				openDetail(newPath)
+			})
+		}
+	},
+	{ immediate: true }
+)
+</script>
+<style scoped lang="scss">
+.pageWrap {
+	flex: 1;
+	display: flex;
+	height: 100%;
+	min-height: 0;
+	//background-color: #fafafa;
+	background-color: var(--el-fill-color-lighter);
+	//background: #fff;
+}
+// 单独自己写的
+/*:deep(.box-card) {
+	height: 100%;
+	.el-card__body {
+		padding: 0;
+	}
+}*/
+
+// 应用的树结构样式
+:deep(.menu-tree) {
+	.el-tree-node__content {
+		height: 36px;
+	}
+	.el-tree-node__content .el-tree-node__label .icon {
+		margin-right: 5px;
+	}
+}
+
+.nopadding {
+	padding: 0px;
+}
+</style>