待审批详情接口对接

src/api/flow/processTask.ts

@@ -7,7 +7,8 @@ const api = {
 	pagePendingApproval: '/v1/process-task/page-pending-approval',
 	pageMyReceived: '/v1/process-task/page-my-received',
 	pageMyApplication: '/v1/process-task/page-my-application',
-	pageApproved: '/v1/process-task/page-approved'
+	pageApproved: '/v1/process-task/page-approved',
+	listHisTask: '/v1/process-task/list-his-task'
 }
 
 // 待认领任务分页列表
@@ -55,7 +56,15 @@ export function processTaskPageApprovedApi(data: any): AxiosPromise {
 	})
 }
 
+export function processTaskListHisTaskApi(instanceId: string): AxiosPromise {
+	return request({
+		url: `${api.listHisTask}/${instanceId}`,
+		method: 'post'
+	})
+}
+
 export default {
 	processTaskPageMyApplicationApi,
-	processTaskPageApprovedApi
+	processTaskPageApprovedApi,
+	processTaskListHisTaskApi
 }

src/assets/icons/active.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1264"><path d="M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0z m306.048 622.165h-380.7v-10.31h-3.826V231.153h64.725v326.3h319.815v64.711z"></path></svg>

src/assets/icons/approval.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2771"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#52C41A" p-id="2772"></path><path d="M436.443429 611.766857L691.2 286.208l86.454857 67.584-332.288 424.594286-228.717714-235.154286L295.350857 466.651429z" fill="#FFF" p-id="2773"></path></svg>

src/assets/icons/collapse.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-menu-unfold" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter"><path d="M6 11h36M22 24h20M6 37h36M8 20.882 12.819 24 8 27.118v-6.236Z"></path></svg>

src/assets/icons/copy.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3463"><path d="M382.293 692.497a37.956 37.956 0 0 1-32.29 7.373v0.205l-278.118-84.31a39.39 39.39 0 0 1-5.803-73.113l862.14-420.045a39.39 39.39 0 0 1 55.432 45.056L823.228 800.358a39.39 39.39 0 0 1-49.63 27.99l-295.595-89.566a15.428 15.428 0 0 1-12.083-14.814c0-4.437 1.98-8.397 5.12-11.196l356.762-401.135-445.44 380.792h-0.069z m98.031 93.867l54 17.886a15.428 15.428 0 0 1 7.986 23.142l-53.93 81.92a15.428 15.428 0 0 1-28.33-8.533v-99.806a15.428 15.428 0 0 1 20.274-14.61z"></path></svg>

src/assets/icons/jump.svg

@@ -0,0 +1,7 @@
+<svg t="1705565834649" class="icon" viewBox="0 0 1024 1024" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" p-id="45480" xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="16" height="16">
+	<path
+		d="M747.121778 537.742222c-1.137778 2.56-2.986667 4.693333-4.636445 6.912-1.080889 1.507556-1.706667 3.214222-3.043555 4.522667l-214.300445 214.328889a35.612444 35.612444 0 0 1-50.517333 0 35.811556 35.811556 0 0 1 0-50.574222l153.315556-153.315556H285.582222a35.697778 35.697778 0 1 1 0-71.395556h342.385778l-153.315556-153.372444a35.726222 35.726222 0 0 1 50.517334-50.517333l214.300444 214.328889c1.28 1.194667 1.792 2.844444 2.816 4.238222 1.763556 2.332444 3.669333 4.494222 4.835556 7.253333 1.792 4.323556 2.844444 9.016889 2.844444 13.767111 0 4.807111-1.052444 9.500444-2.844444 13.824zM512 0C229.688889 0 0 229.688889 0 512.028444 0 794.311111 229.688889 1024 512.028444 1024 794.311111 1024 1024 794.311111 1024 512.028444 1024 229.688889 794.311111 0 512.028444 0z"
+		p-id="45481"></path>
+</svg>

src/assets/icons/reject.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6361"><path d="M875.086452 153.730058C676.053818-45.302575 353.260522-45.302575 154.128323 153.730058s-199.032634 521.825929 0 720.958129 521.825929 199.032634 720.958129 0 199.032634-521.825929 0-720.958129zM725.836868 725.438604c-9.757478 9.757478-25.488922 9.757478-35.246399 0L514.557604 549.405739 338.624306 725.438604c-9.757478 9.757478-25.488922 9.757478-35.2464 0s-9.757478-25.488922 0-35.2464l176.032865-176.032864-176.032865-175.933299c-9.757478-9.757478-9.757478-25.488922 0-35.246399 9.757478-9.757478 25.488922-9.757478 35.2464 0l176.032864 176.032865 176.032865-176.032865c9.757478-9.757478 25.488922-9.757478 35.246399 0 9.757478 9.757478 9.757478 25.488922 0 35.246399L549.804004 514.15934 725.836868 690.192204c9.657912 9.757478 9.657912 25.488922 0 35.2464z" fill="#F56C6C"></path></svg>

src/assets/icons/transfer.svg

@@ -0,0 +1,22 @@
+<svg t="1705566936860" class="icon" viewBox="0 0 1024 1024" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" p-id="47175" xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="16" height="16">
+	<path
+		d="M512 102.4c-226.304 0-409.6 183.296-409.6 409.6s183.296 409.6 409.6 409.6 409.6-183.296 409.6-409.6-183.296-409.6-409.6-409.6z"
+		p-id="47176"></path>
+	<path
+		d="M699.392 450.048h-230.4c-20.992 0-38.4-17.408-38.4-38.4s17.408-38.4 38.4-38.4h230.4c20.992 0 38.4 17.408 38.4 38.4s-17.408 38.4-38.4 38.4z"
+		fill="#FFFFFF" p-id="47177"></path>
+	<path
+		d="M672.256 438.784L581.632 348.16c-14.848-14.848-14.848-39.424 0-54.272 14.848-14.848 39.424-14.848 54.272 0l90.624 90.624c14.848 14.848 14.848 39.424 0 54.272-15.36 14.848-39.424 14.848-54.272 0z"
+		fill="#FFFFFF" p-id="47178"></path>
+	<path
+		d="M581.632 475.136l90.624-90.624c14.848-14.848 39.424-14.848 54.272 0 14.848 14.848 14.848 39.424 0 54.272l-90.624 90.624c-14.848 14.848-39.424 14.848-54.272 0-14.848-15.36-14.848-39.424 0-54.272zM388.096 730.112l-90.624-90.624c-14.848-14.848-14.848-39.424 0-54.272 14.848-14.848 39.424-14.848 54.272 0L442.368 675.84c14.848 14.848 14.848 39.424 0 54.272-14.848 14.848-39.424 14.848-54.272 0z"
+		fill="#FFFFFF" p-id="47179"></path>
+	<path
+		d="M297.472 585.216l90.624-90.624c14.848-14.848 39.424-14.848 54.272 0 14.848 14.848 14.848 39.424 0 54.272l-90.624 90.624c-14.848 14.848-39.424 14.848-54.272 0-14.848-14.848-14.848-38.912 0-54.272z"
+		fill="#FFFFFF" p-id="47180"></path>
+	<path
+		d="M555.008 650.752h-230.4c-20.992 0-38.4-17.408-38.4-38.4s17.408-38.4 38.4-38.4h230.4c20.992 0 38.4 17.408 38.4 38.4s-17.408 38.4-38.4 38.4z"
+		fill="#FFFFFF" p-id="47181"></path>
+</svg>

src/components/Flow/FlowStatusStamp.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="flow-stamp-container">
-		<img v-if="status == STATUS.APPROVED" :style="style" src="@/assets/images/flw03.svg" />
-		<img v-else-if="status == STATUS.REJECTED" :style="style" src="@/assets/images/flw04.svg" />
-		<img v-else-if="status == STATUS.UNDERWAY" :style="style" src="@/assets/images/flw01.svg" />
-		<img v-else-if="status == STATUS.CANCELLED" :style="style" src="@/assets/images/flw02.svg" />
+		<img v-if="status == FlowStatusEnum.APPROVED" :style="style" src="@/assets/images/flw03.svg" />
+		<img v-else-if="status == FlowStatusEnum.REJECTED" :style="style" src="@/assets/images/flw04.svg" />
+		<img v-else-if="status == FlowStatusEnum.UNDERWAY" :style="style" src="@/assets/images/flw01.svg" />
+		<img v-else-if="status == FlowStatusEnum.CANCELLED" :style="style" src="@/assets/images/flw02.svg" />
 	</div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { STATUS } from './enums'
+import { FlowStatusEnum } from './enums'
 
 const props = defineProps({
 	status: { type: Number, default: 0 },

src/components/Flow/FlowStatusTag.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="status">
-		<el-tag v-if="status == STATUS.APPROVED" :size="16" type="success">已通过</el-tag>
-		<el-tag v-else-if="status == STATUS.REJECTED" :size="16" type="danger">不通过</el-tag>
-		<el-tag v-else-if="status == STATUS.UNDERWAY" :size="16">审批中</el-tag>
-		<el-tag v-else-if="status == STATUS.CANCELLED" :size="16" type="warning">已撤销</el-tag>
+		<el-tag v-if="status == FlowStatusEnum.APPROVED" type="success">已通过</el-tag>
+		<el-tag v-else-if="status == FlowStatusEnum.REJECTED" type="danger">不通过</el-tag>
+		<el-tag v-else-if="status == FlowStatusEnum.UNDERWAY">审批中</el-tag>
+		<el-tag v-else-if="status == FlowStatusEnum.CANCELLED" type="warning">已撤销</el-tag>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { STATUS } from './enums'
+import { FlowStatusEnum } from './enums'
 
 defineProps({
 	status: { type: Number, default: 0 }

src/components/Flow/FlowTypeDot.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="assignee-container">
+		<!-- 类型 -->
+		<template v-if="type === TaskTypeEnum.TRANSFER">
+			<el-avatar :size="36" color="#FF9900" style="background-color: #ff9900">
+				<svg-icon color="#FF9900" icon-class="transfer" class-name="svg-icon" />
+			</el-avatar>
+		</template>
+		<template v-else>
+			<flow-node-avatar :size="36" :show-name="false" />
+		</template>
+
+		<!-- 状态 -->
+		<div class="badge">
+			<template v-if="status === TaskStatusEnum.ACTIVE">
+				<svg-icon color="#2A5EFF" icon-class="active" />
+			</template>
+			<template v-else-if="status === TaskStatusEnum.JUMP">
+				<svg-icon color="#FF9900" icon-class="jump" />
+			</template>
+			<template v-else-if="status === TaskStatusEnum.COMPLETE">
+				<svg-icon icon-class="approval" />
+			</template>
+			<template v-else-if="status === TaskStatusEnum.REJECT">
+				<svg-icon icon-class="reject" />
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '../SvgIcon/index.vue'
+import FlowNodeAvatar from './FlowNodeAvatar.vue'
+import { TaskTypeEnum, TaskStatusEnum } from './enums'
+
+defineProps({
+	status: { type: Number, default: 0 },
+	type: { type: Number, default: 0 }
+})
+</script>
+
+<style lang="scss" scoped>
+.assignee-container {
+	position: relative;
+	top: -5px;
+	left: -13px;
+
+	.badge {
+		$BadgeSize: 18px;
+		$BadgeOffset: -4px;
+		position: absolute;
+		width: $BadgeSize;
+		height: $BadgeSize;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		bottom: $BadgeOffset;
+		right: $BadgeOffset;
+		z-index: 999;
+		border: 2px solid #fff;
+		background-color: #fff;
+		border-radius: 50%;
+		overflow: hidden;
+	}
+
+	.svg-icon {
+		font-size: 36px;
+	}
+}
+</style>

src/components/Flow/enums.ts

@@ -1,5 +1,5 @@
 /** 流程状态 */
-export const enum STATUS {
+export const enum FlowStatusEnum {
 	/** 审批中 */
 	UNDERWAY,
 	/** 已通过 */
@@ -9,3 +9,41 @@ export const enum STATUS {
 	/** 已撤销 */
 	CANCELLED
 }
+
+/** 任务类型 */
+export const enum TaskTypeEnum {
+	/** 主办 */
+	MAJOR,
+	/** 转办 */
+	TRANSFER,
+	/** 委派 */
+	DELEGATE,
+	/** 会签 */
+	COUNTERSIGN,
+	/** 抄送 */
+	CC,
+	/** 调用外部流程任务 */
+	CALL_PROCESS,
+	/** 定时器任务 */
+	TIMER,
+	/** 触发器任务 */
+	TRIGGE
+}
+
+/** 任务状态 */
+export const enum TaskStatusEnum {
+	/** 活动 */
+	ACTIVE,
+	/** 跳转 */
+	JUMP,
+	/** 完成 */
+	COMPLETE,
+	/** 拒绝 */
+	REJECT,
+	/** 撤销审批 */
+	REVOKE,
+	/** 超时 */
+	TIMEOUT,
+	/** 终止 */
+	TERMINATE
+}

src/components/SvgIcon/index.vue

@@ -1,40 +1,53 @@
 <template>
-	<svg aria-hidden="true" class="svg-icon">
-		<use :xlink:href="symbolId" :fill="color" />
+	<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" />
+	<svg v-else :class="svgClass" aria-hidden="true">
+		<use v-if="color" :xlink:href="iconName" :fill="color" />
+		<use v-else :xlink:href="iconName" />
 	</svg>
 </template>
 
-<script setup lang="ts" name="SvgIcon">
+<script setup>
 import { computed } from 'vue'
 
 const props = defineProps({
-	prefix: {
-		type: String,
-		default: 'icon'
-	},
-	iconClass: {
-		type: String,
-		required: false
-	},
-	color: {
-		type: String,
-		default: ''
-	}
+	iconClass: { type: String, required: true },
+	className: { type: String, default: '' },
+	color: { type: String, default: '#333' }
+})
+
+const isExternal = computed(() => {
+	let isExternal = /^(https?:|mailto:|tel:)/.test(props.iconClass)
+	return isExternal
+})
+
+const iconName = computed(() => {
+	return `#icon-${props.iconClass}`
+})
+
+const svgClass = computed(() => {
+	return props.className ? `svg-icon ${props.className}` : 'svg-icon'
 })
 
-const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
+const styleExternalIcon = computed(() => {
+	return {
+		mask: `url(${props.iconClass}) no-repeat 50% 50%`
+		// "-webkit-mask": `url(${props.iconClass}) no-repeat 50% 50%`,
+	}
+})
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .svg-icon {
 	width: 1em;
 	height: 1em;
 	vertical-align: -0.15em;
-	overflow: hidden;
 	fill: currentColor;
+	overflow: hidden;
+}
 
-	&:focus {
-		outline: unset;
-	}
+.svg-external-icon {
+	background-color: currentColor;
+	mask-size: cover !important;
+	display: inline-block;
 }
 </style>

src/utils/datetime.ts

@@ -0,0 +1,62 @@
+/**
+ * 时间格式化
+ *
+ * @param time 时间
+ * @param fmt 格式
+ * @returns 格式化后的时间
+ */
+const formatTimestamp = (timestamp: number, fmt = 'yyyy-MM-dd HH:mm:ss'): string => {
+	if (!timestamp) {
+		return ''
+	}
+	const time = new Date(timestamp)
+	const dict: { [key: string]: any } = {
+		yyyy: time.getFullYear(),
+		M: time.getMonth() + 1,
+		d: time.getDate(),
+		H: time.getHours(),
+		m: time.getMinutes(),
+		s: time.getSeconds(),
+		w: time.getDay(),
+		MM: ('' + (time.getMonth() + 101)).substring(1),
+		dd: ('' + (time.getDate() + 100)).substring(1),
+		HH: ('' + (time.getHours() + 100)).substring(1),
+		mm: ('' + (time.getMinutes() + 100)).substring(1),
+		ss: ('' + (time.getSeconds() + 100)).substring(1),
+		SSS: ('' + (time.getMilliseconds() + 1000)).substring(1),
+		WW: getWeek(time.getDay())
+	}
+	return fmt.replace(/(yyyy|MM?|dd?|HH?|mm?|ss?|SSS?|WW?)/g, function () {
+		// eslint-disable-next-line prefer-rest-params
+		return dict[arguments[0]]
+	})
+}
+
+/**
+ * 获取大写周数
+ *
+ * @param week 一周中的第几天
+ * @returns 大写周数
+ */
+const getWeek = (week: number): string => {
+	switch (week) {
+		case 0:
+			return '日'
+		case 1:
+			return '一'
+		case 2:
+			return '二'
+		case 3:
+			return '三'
+		case 4:
+			return '四'
+		case 5:
+			return '五'
+		case 6:
+			return '六'
+		default:
+			return ''
+	}
+}
+
+export { formatTimestamp, getWeek }

src/views/approve/pendingApproval/detail.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<el-drawer v-model="visibleDialog" class="custom-adrawer" :direction="direction" size="900" @close="handleCancel">
+		<el-drawer v-model="visibleDialog" class="custom-adrawer" direction="rtl" size="900" @close="handleCancel">
 			<template #header>
 				<div class="flow-header-box">
 					<div class="flow-no">编号：12138</div>
@@ -35,46 +35,21 @@
 					<div class="area-divider"></div>
 
 					<!--审批流-->
-					<el-timeline style="margin-left: 10px">
-						<el-timeline-item timestamp="提交" placement="top" type="success" :icon="Check">
-							<!-- 审批完成 -->
-							<div class="timeline-box flex-1">
-								<div class="flex flex-align-center">
-									<div class="timeline-box-user flex-1">
-										<FlowNodeAvatar id="1" />
-										<div v-if="false" class="comment">
-											<div class="comment-content">同意</div>
-										</div>
-									</div>
-									<span class="timeline-box-date">2018-4-12 20:46:00</span>
-								</div>
-							</div>
-						</el-timeline-item>
+					<el-timeline style="margin-left: 50px">
+						<el-timeline-item v-for="active in activeData" :key="active.id" hollow :timestamp="active.taskName" placement="top">
+							<template #dot>
+								<FlowTypeDot :status="active.taskState" :type="active.taskType" />
+							</template>
 
-						<el-timeline-item timestamp="审批" placement="top" type="success" :icon="Check">
 							<div class="timeline-box flex-1">
 								<div class="flex flex-align-center">
 									<div class="timeline-box-user flex-1">
 										<FlowNodeAvatar id="1" />
 										<div class="comment">
-											<div class="comment-content">同意</div>
+											<div class="comment-content">{{ active.duration }}</div>
 										</div>
 									</div>
-									<span class="timeline-box-date">2018-4-12 20:46:12</span>
-								</div>
-							</div>
-						</el-timeline-item>
-
-						<el-timeline-item timestamp="抄送" placement="top" type="success" :icon="Check">
-							<div class="timeline-box flex-1">
-								<div class="flex flex-align-center">
-									<el-space wrap>
-										<FlowNodeAvatar id="1" />
-										<FlowNodeAvatar id="1" />
-										<FlowNodeAvatar id="1" />
-									</el-space>
-
-									<span class="timeline-box-date">2018-4-12 20:46:32</span>
+									<span class="timeline-box-date">{{ formatTimestamp(active.finishTime) }}</span>
 								</div>
 							</div>
 						</el-timeline-item>
@@ -128,34 +103,42 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import FlowStatusStamp from '@/components/Flow/FlowStatusStamp.vue'
 import FlowStatusTag from '@/components/Flow/FlowStatusTag.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
+import FlowTypeDot from '@/components/Flow/FlowTypeDot.vue'
 import { ChatLineSquare, Check, Close, Switch, DArrowLeft, Plus, Minus, More } from '@element-plus/icons-vue'
+import { processTaskListHisTaskApi } from '@/api/flow/processTask'
+import { formatTimestamp } from '@/utils/datetime'
 
-const direction = ref('rtl')
-const myProps = defineProps({
+const props = defineProps({
 	modelValue: {
 		type: Boolean,
 		default: false
 	},
-	userIds: {
-		type: Array,
-		default: () => []
+	messageId: {
+		type: String,
+		default: undefined
 	}
 })
 
-const visible = ref(false) // 弹窗显示隐藏
-const activeData = ref({})
+onMounted(() => {
+	processTaskListHisTaskApi(props.messageId).then(data => {
+		activeData.value = data
+	})
+})
+
+// 弹窗显示隐藏
+const visible = ref(false)
+const activeData = ref([])
 
-// 同步值
-const $myEmit = defineEmits(['update:modelValue', 'successFn'])
+const emit = defineEmits(['update:modelValue', 'successFn'])
 
 // 关闭按钮
 const closeDrawer = () => {
-	$myEmit('successFn')
-	$myEmit('update:modelValue', false)
+	emit('successFn')
+	emit('update:modelValue', false)
 }
 
 const handleCancel = () => {
@@ -164,10 +147,10 @@ const handleCancel = () => {
 
 const visibleDialog = computed({
 	get() {
-		return myProps.modelValue
+		return props.modelValue
 	},
 	set(val) {
-		$myEmit('update:modelValue', val)
+		emit('update:modelValue', val)
 	}
 })
 
@@ -201,16 +184,6 @@ const openComment = () => {
 </script>
 
 <style scoped lang="scss">
-::v-deep .el-drawer__header {
-	padding: 0px;
-	margin-bottom: 0 !important;
-}
-
-::v-deep .el-drawer__footer {
-	padding-top: 20px;
-	border-top: 1px solid rgba(229, 230, 235, 1);
-}
-
 .flow-detail-container {
 	height: 100%;
 }
@@ -237,6 +210,7 @@ const openComment = () => {
 	overflow: hidden;
 	overflow-y: auto;
 	padding: 0 20px;
+
 	.header-box {
 		display: flex;
 		flex-direction: column;
@@ -280,6 +254,8 @@ const openComment = () => {
 
 // 时间线样式
 .timeline-box {
+	padding-left: 8px;
+
 	&-user {
 		.name {
 			color: #1d2129;
@@ -302,7 +278,7 @@ const openComment = () => {
 	&-date {
 		margin-left: 10px;
 		left: 0;
-		padding-right: 16px;
+		padding-right: 32px;
 		text-align: right;
 		transform: translate(-100%);
 		position: absolute;
@@ -314,4 +290,18 @@ const openComment = () => {
 		line-height: 1.667;
 	}
 }
+
+:deep(.el-drawer__header) {
+	padding: 0px;
+	margin-bottom: 0 !important;
+}
+
+:deep(.el-drawer__footer) {
+	padding-top: 20px;
+	border-top: 1px solid rgba(229, 230, 235, 1);
+}
+
+:deep(.el-timeline .el-timeline-item__timestamp) {
+	padding-left: 8px;
+}
 </style>

src/views/approve/pendingApproval/index.vue

@@ -154,7 +154,7 @@ const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
 )
 
 const openDetail = (row: any) => {
-	currentId.value = row.id
+	currentId.value = row.instanceId
 	visibleDetail.value = true
 }