Ver Fonte

feat: 退回联调 100%,审批状态不同按钮显示控制 100%

luoyali há 1 ano atrás
pai
commit
f6b4aec76e

+ 0 - 1
src/components/Flow/FlowStatusStamp.vue

@@ -29,7 +29,6 @@ const style = computed(() => {
 	img {
 		overflow: hidden;
 		background-color: transparent;
-		z-index: 999;
 	}
 }
 </style>

+ 18 - 0
src/styles/project_normal.scss

@@ -52,3 +52,21 @@ body {
 ::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(0,0,0,0.1);box-shadow:0 0 0 #fff inset,0 0 0 #fff inset,0 0 0 rgba(255,255,255,0.9) inset,0 0 0 rgba(255,255,255,0.9) inset}
 ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.4)}
 ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.6)}
+
+// 审批公用样式
+.flex-column-page-wrap.flex-wrap {
+	flex-direction: row;
+	background-color: #f2f3f5;
+	padding: 10px 10px 0 10px;
+}
+
+.warp-left {
+	width: 330px; /*固定宽度*/
+	overflow: auto; /*超出部分滚动*/
+	background-color: var(--el-bg-color);
+	margin-right: 10px;
+}
+
+.warp-right {
+	flex: 1; /*这里设置为占比1,填充满剩余空间*/
+}

+ 0 - 187
src/views/approve/await/index.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-	<div class="content-container">
-		<section class="flow-approve-box">
-			<!-- 需要抽成组件 -->
-			<div class="flow-content">
-				<!-- 搜索框 -->
-				<div class="search-box">
-					<div class="search-segment" style="flex: 1 1 0%"></div>
-					<div class="search-segment"></div>
-					<div class="search-segment"></div>
-				</div>
-
-				<!-- 列表值 -->
-				<div class="flow-list-box">
-					<div class="item-box">
-						<div class="flow-card-box flow-card-box-hoverable">
-							<div class="header">
-								<span class="typography name">请假</span>
-								<div class="status"><el-button type="success" plain size="small">审核中</el-button></div>
-							</div>
-							<div class="summary-list">
-								<div class="summary-item">
-									<div class="label">假期类型:</div>
-									<div class="value">事假</div>
-								</div>
-								<div class="summary-item">
-									<div class="label">假期时间:</div>
-									<div class="value">2023</div>
-								</div>
-							</div>
-							<div class="footer">
-								<div class="initiator">
-									<div class="avatar" style="height: 28px; border-radius: 14px; padding: 4px">
-										<div class="icon" style="width: 20px; height: 20px; font-size: 10px"></div>
-										<div class="name" style="font-size: 11px">123</div>
-									</div>
-								</div>
-								<div class="begin-time">提交时间:1233-34-56</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="flow-detail-content"></div>
-		</section>
-	</div>
-</template>
-
-<style scoped lang="scss">
-.content-container {
-	height: calc(100% - 45px);
-	.flow-approve-box {
-		width: 100%;
-		height: calc(100vh - 105px);
-		overflow: hidden;
-		padding: 0 12px;
-		display: flex;
-		gap: 12px;
-
-		.flow-content {
-			width: 330px;
-			min-width: 330px;
-			height: 100%;
-			overflow: hidden;
-			//background: #fff;
-			border-radius: 6px;
-			background: #0d84ff;
-			.search-box {
-				display: flex;
-				align-items: center;
-				height: 56px;
-				padding: 0 12px;
-				.search-segment {
-					margin-left: 4px;
-				}
-			}
-		}
-
-		// 列表
-		.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);
-			.header {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				.typography {
-					//color: var(--color-text-1); todo
-					line-height: 1.5715;
-					white-space: normal;
-					overflow-wrap: anywhere;
-				}
-				.name {
-					font-size: 15px;
-				}
-			}
-
-			.summary-list {
-				margin-top: 10px;
-				.summary-item {
-					display: flex;
-					min-height: 20px;
-					.label {
-						color: #9ba5b3;
-						overflow: hidden;
-						white-space: nowrap;
-						flex-shrink: 0;
-					}
-					.value {
-						color: #232730;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-			}
-
-			.footer {
-				margin-top: 10px;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				font-size: 13px;
-				.avatar {
-					background: #f2f4f5;
-					display: flex;
-					align-items: center;
-					width: fit-content;
-					.icon {
-						overflow: hidden;
-						flex-shrink: 0;
-						border-radius: 50%;
-					}
-					.name {
-						-webkit-user-select: none;
-						user-select: none;
-						font-family: PingFangSC-Regular, PingFang SC;
-						color: #34383e;
-						margin: 0 4px;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-						max-width: 64px;
-					}
-				}
-				.initiator {
-					display: flex;
-					align-items: center;
-				}
-				.begin-time {
-					//color: #9ba5b3; todo
-				}
-			}
-		}
-
-		.flow-detail-content {
-			height: 100%;
-			overflow: hidden;
-			//background: #fff;
-			border-radius: 6px;
-			flex: auto;
-			background: #0934ff;
-		}
-	}
-}
-</style>

+ 30 - 0
src/views/approve/components/approvalIndex.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="flex-column-page-wrap flex-wrap">
+		<div class="warp-left">
+			<ApprovedItem :current-task-type="currentTaskType" />
+		</div>
+
+		<div class="warp-right">
+			<ApprovedContent :current-task-type="currentTaskType" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import ApprovedItem from '../components/approvedItem.vue'
+import ApprovedContent from '../components/approvedContent.vue'
+
+const props = defineProps({
+	/**
+	 * pendingApproval 待审批
+	 * myApplication 我的申请
+	 * myReceived 我收到的
+	 * pendingClaim 认领任务
+	 * approved 已审批
+	 */
+	currentTaskType: {
+		type: String,
+		default: ''
+	}
+})
+</script>

+ 7 - 6
src/views/approve/components/approvedContent.vue

@@ -68,11 +68,11 @@
 
 				<!-- 3、底部操作按钮 -->
 				<!--
-        1、已审批的任务不显示操作按钮
-        2、我的申请显示撤回按钮
-        3、认领任务显示认领按钮
-        4、我收到的任务显示评论
-        -->
+            1、已审批的任务不显示操作按钮
+            2、我的申请显示撤回按钮
+            3、认领任务显示认领按钮
+            4、我收到的任务显示评论
+            -->
 				<div class="flow-actions">
 					<el-button :icon="ChatLineSquare" @click="openComment('reviewVisible')">评论</el-button>
 					<template v-if="currentTaskType !== 'myReceived' || currentTaskType !== 'approved'">
@@ -384,6 +384,7 @@ watch(
 		position: absolute;
 		right: 30px;
 		top: 30px;
+		z-index: 999;
 	}
 
 	// 头部
@@ -448,7 +449,7 @@ watch(
 		.area-divider {
 			border-bottom: 1px solid rgba(229, 230, 235, 1);
 			margin: 20px 0;
-			position: relative;
+			//position: relative;
 		}
 	}
 

+ 46 - 3
src/views/approve/components/approvedItem.vue

@@ -32,7 +32,17 @@
 					<!--头部-->
 					<div class="header">
 						<el-text tag="b">{{ i.processName }}</el-text>
-						<el-tag>待审核</el-tag>
+						<el-tag v-if="currentTaskType === 'pendingApproval'">待审批</el-tag>
+						<template v-else>
+							<el-tag>
+								<template v-if="i.instanceState === 0">审批中</template>
+								<template v-if="i.instanceState === 1">审批通过</template>
+								<template v-if="i.instanceState === 2">审批拒绝</template>
+								<template v-if="i.instanceState === 3">撤销审批</template>
+								<template v-if="i.instanceState === 4">超时结束</template>
+								<template v-if="i.instanceState === 5">强制终止</template>
+							</el-tag>
+						</template>
 					</div>
 					<!--操作类容-->
 					<div class="summary-list"></div>
@@ -58,7 +68,27 @@ import useTaskProcessStore from '@/store/modules/taskProcess'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 import { Search, Filter, Refresh } from '@element-plus/icons-vue'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { processTaskPagePendingApprovalApi } from '@/api/flow/processTask'
+import {
+	processTaskPagePendingApprovalApi,
+	processTaskPageMyApplicationApi,
+	processTaskPagePendingClaimApi,
+	processTaskPageApprovedApi,
+	processTaskPageMyReceivedApi
+} from '@/api/flow/processTask'
+
+const props = defineProps({
+	/**
+	 * pendingApproval 待审批
+	 * myApplication 我的申请
+	 * myReceived 我收到的
+	 * pendingClaim 认领任务
+	 * approved 已审批
+	 */
+	currentTaskType: {
+		type: String,
+		default: ''
+	}
+})
 
 // store值
 const taskProcessInfo = useTaskProcessStore()
@@ -98,7 +128,20 @@ const load = () => {
 // 获取分页数据
 const getPagedSatellites = async () => {
 	try {
-		const { records, total, pages } = await processTaskPagePendingApprovalApi(condition)
+		let responseData = {}
+		const { currentTaskType } = props
+		if (currentTaskType === 'pendingApproval') {
+			responseData = await processTaskPagePendingApprovalApi(condition)
+		} else if (currentTaskType === 'myApplication') {
+			responseData = await processTaskPageMyApplicationApi(condition)
+		} else if (currentTaskType === 'myReceived') {
+			responseData = await processTaskPageMyReceivedApi(condition)
+		} else if (currentTaskType === 'pendingClaim') {
+			responseData = await processTaskPagePendingClaimApi(condition)
+		} else if (currentTaskType === 'approved') {
+			responseData = await processTaskPageApprovedApi(condition)
+		}
+		const { records, total, pages } = responseData
 		records.forEach(item => {
 			satelliteList.value.push(item)
 		})

+ 229 - 0
src/views/approve/myApplication/index-old.vue

@@ -0,0 +1,229 @@
+<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 #currentNodeSlot="scope">
+					<div v-if="scope.row.currentNode === 'complete'">-</div>
+					<div v-else>{{ scope.row.currentNode }}</div>
+				</template>
+
+				<template #instanceStateSlot="scope">
+					<el-tag v-if="scope.row.instanceState === 0" size="small" effect="plain">审批中</el-tag>
+					<el-tag v-if="scope.row.instanceState === 1" size="small" type="info" effect="plain">审批通过</el-tag>
+					<el-tag v-if="scope.row.instanceState === 2" size="small" type="warning" effect="plain">审批拒绝</el-tag>
+					<el-tag v-if="scope.row.instanceState === 3" size="small" type="warning" effect="plain">撤销审批</el-tag>
+					<el-tag v-if="scope.row.instanceState === 4" size="small" type="warning" effect="plain">超时结束</el-tag>
+					<el-tag v-if="scope.row.instanceState === 5" size="small" type="warning" effect="plain">强制终止</el-tag>
+				</template>
+
+				<template #durationSlot="scope">
+					<div>{{ format_milliseconds(scope.row.duration) }}</div>
+				</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 { processTaskPageMyApplicationApi } from '@/api/flow/processTask'
+import { nextTick, ref, watch } from 'vue'
+import { useTablePage } from '@/hooks/useTablePage'
+import { format_milliseconds } from '@/utils'
+import MessageDetail from './detail.vue'
+import { useRoute } from 'vue-router'
+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 processTaskPageMyApplicationApi(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: 80
+	},
+	{
+		prop: 'currentNode',
+		label: '当前所在节点',
+		minWidth: 80,
+		slots: {
+			default: 'currentNodeSlot'
+		}
+	},
+	{
+		prop: 'instanceState',
+		label: '流程状态',
+		minWidth: 100,
+		slots: {
+			default: 'instanceStateSlot'
+		}
+	},
+	{
+		prop: 'createBy',
+		label: '发起人',
+		minWidth: 100
+	},
+	{
+		prop: 'createTime',
+		label: '发起时间',
+		minWidth: 126
+	},
+	{
+		prop: 'endTime',
+		label: '结束时间',
+		minWidth: 126
+	},
+	{
+		prop: 'duration',
+		label: '处理耗时',
+		minWidth: 100,
+		slots: {
+			default: 'durationSlot'
+		}
+	},
+	{
+		prop: 'expireTime',
+		label: '期望完成时间',
+		minWidth: 126
+	},
+	{
+		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>

+ 12 - 225
src/views/approve/myApplication/index.vue

@@ -1,229 +1,16 @@
 <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 #currentNodeSlot="scope">
-					<div v-if="scope.row.currentNode === 'complete'">-</div>
-					<div v-else>{{ scope.row.currentNode }}</div>
-				</template>
-
-				<template #instanceStateSlot="scope">
-					<el-tag v-if="scope.row.instanceState === 0" size="small" effect="plain">审批中</el-tag>
-					<el-tag v-if="scope.row.instanceState === 1" size="small" type="info" effect="plain">审批通过</el-tag>
-					<el-tag v-if="scope.row.instanceState === 2" size="small" type="warning" effect="plain">审批拒绝</el-tag>
-					<el-tag v-if="scope.row.instanceState === 3" size="small" type="warning" effect="plain">撤销审批</el-tag>
-					<el-tag v-if="scope.row.instanceState === 4" size="small" type="warning" effect="plain">超时结束</el-tag>
-					<el-tag v-if="scope.row.instanceState === 5" size="small" type="warning" effect="plain">强制终止</el-tag>
-				</template>
-
-				<template #durationSlot="scope">
-					<div>{{ format_milliseconds(scope.row.duration) }}</div>
-				</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>
+	<ApprovalIndex ref="myApplication" :current-task-type="taskType"></ApprovalIndex>
 </template>
-<script lang="tsx" setup>
-import { processTaskPageMyApplicationApi } from '@/api/flow/processTask'
-import { nextTick, ref, watch } from 'vue'
-import { useTablePage } from '@/hooks/useTablePage'
-import { format_milliseconds } from '@/utils'
-import MessageDetail from './detail.vue'
-import { useRoute } from 'vue-router'
-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 processTaskPageMyApplicationApi(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: 80
-	},
-	{
-		prop: 'currentNode',
-		label: '当前所在节点',
-		minWidth: 80,
-		slots: {
-			default: 'currentNodeSlot'
-		}
-	},
-	{
-		prop: 'instanceState',
-		label: '流程状态',
-		minWidth: 100,
-		slots: {
-			default: 'instanceStateSlot'
-		}
-	},
-	{
-		prop: 'createBy',
-		label: '发起人',
-		minWidth: 100
-	},
-	{
-		prop: 'createTime',
-		label: '发起时间',
-		minWidth: 126
-	},
-	{
-		prop: 'endTime',
-		label: '结束时间',
-		minWidth: 126
-	},
-	{
-		prop: 'duration',
-		label: '处理耗时',
-		minWidth: 100,
-		slots: {
-			default: 'durationSlot'
-		}
-	},
-	{
-		prop: 'expireTime',
-		label: '期望完成时间',
-		minWidth: 126
-	},
-	{
-		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 ApprovalIndex from '../components/approvalIndex.vue'
+import { ref } from 'vue'
+/**
+ * pendingApproval 待审批
+ * myApplication 我的申请
+ * myReceived 我收到的
+ * pendingClaim 认领任务
+ * approved 已审批
+ */
+const taskType = ref('myApplication')
 </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>

+ 2 - 32
src/views/approve/pendingApproval/index.vue

@@ -1,20 +1,10 @@
 <template>
-	<div class="flex-column-page-wrap flex-wrap">
-		<div class="warp-left">
-			<ApprovedItem />
-		</div>
-
-		<div class="warp-right">
-			<ApprovedContent :current-task-type="taskType" />
-		</div>
-	</div>
+	<ApprovalIndex ref="pendingApproval" :current-task-type="taskType"></ApprovalIndex>
 </template>
 
 <script setup>
-import ApprovedItem from '../components/approvedItem.vue'
-import ApprovedContent from '../components/approvedContent.vue'
+import ApprovalIndex from '../components/approvalIndex.vue'
 import { ref } from 'vue'
-
 /**
  * pendingApproval 待审批
  * myApplication 我的申请
@@ -24,23 +14,3 @@ import { ref } from 'vue'
  */
 const taskType = ref('pendingApproval')
 </script>
-
-<style scoped lang="scss">
-.flex-column-page-wrap.flex-wrap {
-	flex-direction: row;
-	background-color: #f2f3f5;
-	padding: 10px 10px 0 10px;
-}
-
-.warp-left {
-	width: 330px; /*固定宽度*/
-	overflow: auto; /*超出部分滚动*/
-	background-color: var(--el-bg-color);
-	margin-right: 10px;
-}
-
-.warp-right {
-	flex: 1; /*这里设置为占比1,填充满剩余空间*/
-	//border: 1px solid #ff4400;
-}
-</style>