feat: 新版待审批UI，左侧列表点击联动右侧数据

src/store/index.ts

@@ -4,6 +4,7 @@ import usePermissionStore from './modules/permission'
 import useSettingStore from './modules/settings'
 import useTagsViewStore from './modules/tagsView'
 import useFlowStore from './modules/flow'
+import useTaskProcessStore from './modules/taskProcess'
 
 const useStore = () => ({
 	app: useAppStore(),
@@ -11,7 +12,8 @@ const useStore = () => ({
 	permission: usePermissionStore(),
 	setting: useSettingStore(),
 	tagsView: useTagsViewStore(),
-	flow: useFlowStore()
+	flow: useFlowStore(),
+	taskProcess: useTaskProcessStore()
 })
 
 export default useStore

src/store/modules/taskProcess.ts

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+// 审核条目
+export const useTaskProcessStore = defineStore({
+	id: 'taskProcess',
+	state: () => {
+		return {
+			storeInfoName: '',
+			currentTaskRow: {},
+			refresh: false // 刷新 false=>不刷新 true=>刷新
+		}
+	},
+	getters: {},
+	actions: {
+		initState(title: string) {
+			this.storeInfoName = title || '审批流程'
+		},
+		setCurrentTaskRow(row: any) {
+			this.currentTaskRow = row
+		}
+	},
+	persist: true
+})
+
+export default useTaskProcessStore

src/views/approve/components/approvedContent.vue

@@ -2,12 +2,12 @@
 	<div class="flow-detail-content">
 		<div class="flow-detail-container">
 			<!-- 值为空 -->
-			<div v-if="!visibleDialog" class="flow-empty-detail-box">
+			<div v-if="!currentTaskRow.taskId" class="flow-empty-detail-box">
 				<el-empty description="暂无数据" />
 			</div>
 
 			<!-- 值不为空 -->
-			<template v-if="visibleDialog">
+			<template v-if="currentTaskRow.taskId">
 				<!-- 1、头部信息 -->
 				<div class="flow-status-stamp">
 					<div class="flow-stamp-container">
@@ -16,7 +16,7 @@
 				</div>
 
 				<div class="flow-header-box">
-					<div class="flow-no">编号：1759387444983226369</div>
+					<div class="flow-no">编号：{{ currentTaskRow.taskId }}</div>
 					<div class="action-area">
 						<div class="action-item"></div>
 					</div>
@@ -26,12 +26,12 @@
 					<!--头部-->
 					<div class="header-box">
 						<div class="summary-info">
-							<div class="title">{{ taskObj.processName }}</div>
+							<div class="title">{{ currentTaskRow.processName }}</div>
 							<FlowStatusTag :status="0" />
 						</div>
 						<div class="initiator-info">
 							<FlowNodeAvatar id="1" />
-							<div class="begin-time">{{ taskObj.createTime }} 提交</div>
+							<div class="begin-time">{{ currentTaskRow.createTime }} 提交</div>
 						</div>
 					</div>
 					<div class="area-divider"></div>
@@ -124,7 +124,8 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, nextTick } from 'vue'
+import useTaskProcessStore from '@/store/modules/taskProcess'
+import { computed, ref, onMounted, nextTick, watch } from 'vue'
 import FlowStatusStamp from '@/components/Flow/FlowStatusStamp.vue'
 import FlowStatusTag from '@/components/Flow/FlowStatusTag.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
@@ -139,18 +140,11 @@ import DeliverToReviewDialog from './deliverToReviewDialog'
 import LoseSignDialog from './loseSignDialog'
 import RollbackDialog from './rollbackDialog'
 import viewForm from '@/utils/form'
+import { storeToRefs } from 'pinia'
 
-const props = defineProps({
-	modelValue: {
-		type: Boolean,
-		default: false
-	},
-	taskObj: {
-		type: Object,
-		default: () => ({})
-	}
-})
-const emit = defineEmits(['update:modelValue', 'successFn'])
+// store值
+const taskProcessInfo = useTaskProcessStore()
+const { currentTaskRow } = storeToRefs(taskProcessInfo)
 
 // 各种操作弹窗显示隐藏 start
 const reviewVisible = ref(false)
@@ -163,18 +157,10 @@ const rollbackVisible = ref(false)
 const activeData = ref([])
 const currentDialog = ref(null)
 
-const visibleDialog = computed({
-	get() {
-		return props.modelValue
-	},
-	set(val) {
-		emit('update:modelValue', val)
-	}
-})
-
 const taskId = computed(() => {
-	return props.taskObj.taskId || ''
+	return currentTaskRow.value.taskId || ''
 })
+
 const FormCreate = viewForm.$form()
 const validateForm = ref({
 	api: {},
@@ -187,8 +173,8 @@ const validateForm = ref({
 
 // 关闭按钮
 const closeDrawer = () => {
-	emit('successFn')
-	emit('update:modelValue', false)
+	taskProcessInfo.refresh = true
+	taskProcessInfo.setCurrentTaskRow({})
 }
 
 const handleCancel = () => {
@@ -236,9 +222,11 @@ const openComment = (type, item) => {
 	}
 }
 
-nextTick(() => {
-	if(!visibleDialog.value) return
-	const cur = props.taskObj || {}
+/**
+ * 获取taskId对应的详情
+ */
+const getTaskDetail = () => {
+	const cur = urrentTaskRow.value || {}
 	processApprovalInfoApi(cur.taskId).then(data => {
 		// console.log(JSON.stringify(data))
 		activeData.value = data
@@ -294,7 +282,23 @@ nextTick(() => {
 		.finally(() => {
 			validateForm.value.loading = false
 		})
-})
+}
+
+/**
+ * 监听同级子组件的taskId的值变化
+ * 1、监听taskId的值变化，如果值有变化，则重新获取审批详情
+ * 2、如果taskId没有值，则不请求接口，暂时暂无数据img
+ */
+watch(
+	() => currentTaskRow.value.taskId,
+	(nValue, oValue) => {
+		if (!nValue) return
+		nextTick(() => {
+			getTaskDetail()
+		})
+	},
+	{ immediate: true }
+)
 </script>
 
 <style scoped lang="scss">

src/views/approve/components/approvedItem.vue

@@ -21,7 +21,13 @@
 		</div>
 		<!-- 内容值 -->
 		<div v-infinite-scroll="load" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
-			<div v-for="i in satelliteList" :key="i.taskId" class="item-box" :class="[i === 2 ? 'item-box-choosed' : '']">
+			<div
+				v-for="i in satelliteList"
+				:key="i.taskId"
+				class="item-box"
+				:class="[i.taskId === taskProcessInfo.currentTaskRow.taskId ? 'item-box-choosed' : '']"
+				@click="getTaskDetail(i)"
+			>
 				<div class="flow-card-box flow-card-box-hoverable">
 					<!--头部-->
 					<div class="header">
@@ -48,11 +54,15 @@
 </template>
 
 <script setup>
+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 } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { processTaskPagePendingApprovalApi } from '@/api/flow/processTask'
 
+// store值
+const taskProcessInfo = useTaskProcessStore()
+
 const satelliteList = ref([])
 const input3 = ref('')
 const loading = ref(false)
@@ -70,6 +80,8 @@ const init = () => {
 	satelliteList.value = []
 	totalNumber.value = 0
 	totalPages.value = 0
+	taskProcessInfo.refresh = false
+	taskProcessInfo.setCurrentTaskRow({})
 }
 
 // 分页获取数据
@@ -95,10 +107,29 @@ const getPagedSatellites = async () => {
 	}
 }
 
+// 点击当前实例的具体
+const getTaskDetail = item => {
+	taskProcessInfo.setCurrentTaskRow(item)
+}
+
 onMounted(() => {
 	init()
 })
 
+/**
+ * 监听同级子组件通知
+ * 1、监听refresh的值变化，进行刷新
+ */
+watch(
+	() => taskProcessInfo.refresh,
+	(nValue, oValue) => {
+		if (nValue) {
+			init()
+		}
+	},
+	{ immediate: true }
+)
+
 const noMore = computed(() => satelliteList.value.length > totalNumber.value)
 
 const disabledInfinite = computed(() => loading.value || noMore.value)