fix(process):快速连续点击分段器时数据更新错误

components/ygoa/processList.vue

@@ -36,41 +36,67 @@
 								</template>
 								<view class="process_contant">
 									<uni-row>
-										<uni-col :xs="8" :sm="7">流程类型:</uni-col>
-										<uni-col :xs="15" :sm="16" style="color: blue;">{{ process.typeName || '无'
-										}}</uni-col>
-									</uni-row>
-									<uni-row>
-										<uni-col :xs="8" :sm="7">创建时间:</uni-col>
-										<uni-col :xs="15" :sm="16">{{ process.createdate }}</uni-col>
+										<uni-col :xs="19" :sm="19">
+											<view v-if="process.tmodelName == undefined">
+												<uni-row>
+													<uni-col :xs="8" :sm="7">流程类型:</uni-col>
+													<uni-col :xs="16" :sm="17">{{ process.typeName || '无'
+														}}</uni-col>
+												</uni-row>
+												<uni-row>
+													<uni-col :xs="8" :sm="7">创建时间:</uni-col>
+													<uni-col :xs="16" :sm="17">{{ process.createdate }}</uni-col>
+												</uni-row>
+											</view>
+											<view v-else @click.stop.prevent="handleCollapseChange(process, index)">
+												<uni-row>
+													<uni-col :xs="8" :sm="7">当前流程:</uni-col>
+													<uni-col :xs="16" :sm="17">
+														<text style="color: #79abff; text-decoration: underline;">{{
+															process.tmodelName }}</text>
+													</uni-col>
+												</uni-row>
+												<uni-row>
+													<uni-col :xs="8" :sm="7">创建时间:</uni-col>
+													<uni-col :xs="16" :sm="17">{{ process.createdate }}</uni-col>
+												</uni-row>
+											</view>
+										</uni-col>
+										<!-- <uni-col :xs="5" :sm="5">
+											<uni-row>
+												<button type="warn" size="mini">撤回</button>
+											</uni-row>
+										</uni-col> -->
 									</uni-row>
 								</view>
 							</uni-card>
 						</uni-col>
 					</uni-row>
 				</uni-card>
-				<uni-collapse :accordion="true" @change="handleCollapseChange($event, process, index)">
-					<uni-collapse-item :border="false">
+				<uni-collapse v-if="process.flowStepItem != undefined">
+					<uni-collapse-item :border="false" :show-arrow="false" :open="process.flowStepItem.show">
 						<template v-slot:title>
-							<view class="flow_step_section">
+							<!-- <view class="flow_step_section">
 								<uni-section title="当前流程" type="line" titleFontSize="0.8rem"></uni-section>
-							</view>
+							</view> -->
 						</template>
-						<view class="flow_step_container" v-if="process.flowStepItem != undefined">
-							<up-steps class="up_step_view" :current="process.flowStepItem.stepActive" activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
-								<view v-for="(step, index) in process.flowStepItem.options">
-									<up-steps-item :contentClass="'redcontent'" v-if="step.state == 3" :title="step.title + ' 退回'"
-										:desc="step.desc" :key="index" error></up-steps-item>
-									<up-steps-item :contentClass="'redcontent'" v-else-if="step.state == 0" :title="step.title + ' 撤销'"
-										:desc="step.desc" :key="index" error></up-steps-item>
-									<up-steps-item v-else-if="index == process.flowStepItem.stepActive" :title="step.title" :desc="step.desc" :key="index">
+						<view class="flow_step_container">
+							<up-steps class="up_step_view" :current="process.flowStepItem.stepActive"
+								activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
+								<view v-for="(step, index) in process.flowStepItem.options" :key="index">
+									<up-steps-item :contentClass="'redcontent'" v-if="step.state == 3"
+										:title="step.title + ' 退回'" :desc="step.desc" error></up-steps-item>
+									<up-steps-item :contentClass="'redcontent'" v-else-if="step.state == 0"
+										:title="step.title + ' 撤销'" :desc="step.desc" error></up-steps-item>
+									<up-steps-item v-else-if="index == process.flowStepItem.stepActive"
+										:title="step.title" :desc="step.desc">
 										<template #icon>
 											<view class="active_step_circle">
 												<text class="active_step_text">{{ index + 1 }}</text>
 											</view>
 										</template>
 									</up-steps-item>
-									<up-steps-item v-else :title="step.title" :desc="step.desc" :key="index"></up-steps-item>
+									<up-steps-item v-else :title="step.title" :desc="step.desc"></up-steps-item>
 								</view>
 							</up-steps>
 						</view>
@@ -86,7 +112,7 @@ import { ref } from 'vue';
 import { getProcessFlow } from '@/api/process'
 import { useUserStore } from '@/store/user.js'
 const userStore = useUserStore()
-const iconDict = ref({
+const iconDict = {
 	'外协结算申请': 'icon-outsourcing',
 	'用车申请': 'icon-apply-car',
 	'出差申请': 'icon-apply-business',
@@ -96,7 +122,7 @@ const iconDict = ref({
 	'请假申请': 'icon-apply-leave',
 	'采购申请': 'icon-apply-purchase',
 	'合同会签': 'icon-apply-sign-contract'
-})
+}
 
 const props = defineProps({
 	contentHeight: { type: String, default: '85vh' },
@@ -115,31 +141,34 @@ const paging = ref(null)
 const list = ref([])
 const totalPage = ref(0)
 
-function handleCollapseChange(event, process, index) {
-	if (event) {
+function handleCollapseChange(process, index) {
+	// console.log('handleCollapseChange', process);
+	if (list.value[index].flowStepItem == undefined) {
 		getProcessFlow(userStore.user.useId, process).then(({ returnParams }) => {
-		const flowStepItem = {
-			options: [],
-			stepActive: -1
-		}
-		flowStepItem.options = returnParams.list.map((item, index) => {
-			const { tmodelName, name, createdate, finishdate, remark, state } = item
-			if (state == 1) {
-				flowStepItem.stepActive = index
+			const flowStepItem = {
+				options: [],
+				stepActive: -1,
+				show: true
 			}
-			const title = tmodelName + (name == '' ? '' : ' ( ' + name + ' )')
-			const desc = (finishdate == '' ? '\n' : '办理时间: ' + finishdate)
-			return {
-				title,
-				desc,
-				state
-			}
-		})
-		if (flowStepItem.stepActive === -1) flowStepItem.stepActive = returnParams.list.length
-		list.value[index]['flowStepItem'] = flowStepItem
+			flowStepItem.options = returnParams.list.map((item, index) => {
+				const { tmodelName, name, createdate, finishdate, remark, state } = item
+				if (state == 1) {
+					flowStepItem.stepActive = index
+				}
+				const title = tmodelName + (name == '' ? '' : ' ( ' + name + ' )')
+				const desc = (finishdate == '' ? '\n' : '办理时间: ' + finishdate)
+				return {
+					title,
+					desc,
+					state
+				}
+			})
+			if (flowStepItem.stepActive === -1) flowStepItem.stepActive = returnParams.list.length
+			list.value[index]['flowStepItem'] = flowStepItem
 		})
-	} else {
+		return
 	}
+	list.value[index].flowStepItem.show = !list.value[index].flowStepItem.show
 }
 
 function complete(dataList, total, pageNo) {
@@ -210,22 +239,25 @@ defineExpose({
 @import url("@/static/font/ygoa/iconfont.css");
 
 .flow_step_section {
-	 .uni-section .uni-section-header {
+	.uni-section .uni-section-header {
 		padding: 5px 10px;
 	}
 }
 
 .flow_step_container {
 	min-height: 100px;
+
 	.up_step_view {
 		::v-deep .u-steps {
 			.u-steps-item {
 				padding-bottom: 11px;
+
 				.redcontent {
 					.u-text__value--content {
 						color: #ff4500;
 					}
 				}
+
 				.active_step_circle {
 					width: 20px;
 					height: 20px;
@@ -241,7 +273,7 @@ defineExpose({
 					align-items: center;
 					justify-content: center;
 					transition: background-color .3s;
-		
+
 					.active_step_text {
 						color: #fff;
 						font-size: 11px;
@@ -254,23 +286,23 @@ defineExpose({
 					}
 				}
 			}
-		
+
 			.u-steps-item view:last-of-type {
 				margin-top: 0 !important;
-		
+
 				.u-text__value--content {
 					font-size: 16px !important;
 				}
-		
+
 				.u-text__value--main {
 					font-size: 16px !important;
 				}
 			}
 		}
 	}
-	
+
 }
-	
+
 .content {
 
 	.icon_container {

pages/process/index.vue

@@ -65,7 +65,7 @@ const userStore = useUserStore();
 // 分段器选项
 const items = reactive(['我的', '待办', '在办', '办结'])
 // 分段器选项
-const current = ref(0)
+const current = ref(1)
 // 子组件
 const processListRef = ref(null)
 
@@ -111,7 +111,9 @@ function searchOnBlur(e) {
 }
 
 // 获取待办列表数据
+const point = ref(0)
 function getProcessData({ pageNo, pSize }, callback) {
+	const flag = point.value = new Date().getTime()
 	const params = {
 		staffId: userStore.user.useId,
 		page: pageNo,
@@ -127,7 +129,10 @@ function getProcessData({ pageNo, pSize }, callback) {
 	]
 	requestMap[current.value](params).then(({ returnParams }) => {
 		// processes.value = returnParams.list
-		callback(returnParams.list, returnParams.total, pageNo)
+		// 只加载最新数据 防止快速连续点击分段器造成数据错乱
+		if (flag == point.value) {
+			callback(returnParams.list, returnParams.total, pageNo)
+		}
 	})
 }
 // 分页获取待办列表数据
@@ -170,6 +175,8 @@ function handleToProcessDetail({ username, insId, tinsId, insName, control }) {
 	}
 
 	::v-deep .flow_step_container {
+		min-height: 60px;
+		margin: 10px 15px;
 		.u-steps {
 			.u-steps-item {
 				padding-bottom: 11px;