perf: approvedItem 业务组件优化

src/views/approve/components/approvedItem.vue

@@ -4,7 +4,7 @@
 		<!-- 搜索条件 -->
 		<div class="search-box">
 			<div class="search-segment" style="flex: 1 1 0%">
-				<el-input v-model="processName" placeholder="流程名称">
+				<el-input v-model="searchParams.processName" placeholder="流程名称">
 					<template #append>
 						<el-button icon="Search" @click.stop="initList" />
 					</template>
@@ -23,13 +23,13 @@
 					<div class="title">高级筛选</div>
 					<el-scrollbar max-height="400px">
 						<!-- 创建人 -->
-						<el-input v-model="createBy" style="width: 240px; margin-bottom: 10px" placeholder="请输入创建人名称" clearable />
+						<el-input v-model="searchParams.createBy" style="width: 240px; margin-bottom: 10px" placeholder="请输入创建人名称" clearable />
 						<!-- 流程状态 -->
-						<el-select v-model="instanceState" placeholder="流程状态" style="margin-bottom: 10px; width: 240px" clearable>
+						<el-select v-model="searchParams.instanceState" placeholder="流程状态" style="margin-bottom: 10px; width: 240px" clearable>
 							<el-option v-for="item in instanceStateOps" :key="item.value" :label="item.label" :value="item.value" />
 						</el-select>
 						<el-date-picker
-							v-model="beginTime"
+							v-model="searchParams.beginTime"
 							style="width: 240px; margin-bottom: 10px"
 							type="date"
 							format="YYYY-MM-DD"
@@ -38,7 +38,7 @@
 							:disabled-date="disabledDateStart"
 						/>
 						<el-date-picker
-							v-model="endTime"
+							v-model="searchParams.endTime"
 							style="width: 240px; margin-bottom: 10px"
 							type="date"
 							format="YYYY-MM-DD"
@@ -57,7 +57,7 @@
 		<!-- 内容值 -->
 		<div v-infinite-scroll="loadList" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
 			<div
-				v-for="i in satelliteList"
+				v-for="i in listData.list"
 				:key="i.instanceId"
 				class="item-box"
 				:class="[i.instanceId === taskProcessInfo.currentTaskRow.instanceId ? 'item-box-choosed' : '']"
@@ -112,8 +112,8 @@
 					</div>
 				</div>
 			</div>
-			<p v-if="false">加载中...</p>
-			<p v-if="noMore">没有更多了</p>
+			<div v-if="loading" class="flow-bottom-txt">加载中...</div>
+			<div v-if="noMore" class="flow-bottom-txt no-more">没有更多了</div>
 		</div>
 	</div>
 </template>
@@ -179,34 +179,55 @@ const instanceStateOps = [
 		label: '强制终止'
 	}
 ]
-const createId = ref(null) // 发起人
-const createBy = ref(null) // 创建人
-const instanceState = ref(null) // 流程状态
-const beginTime = ref(null) // 开始时间
-const endTime = ref(null) // 结束时间
+// const processName = ref('') // 流程名称
+// const createId = ref(null) // 发起人
+// const createBy = ref(null) // 创建人
+// const instanceState = ref(null) // 流程状态
+// const beginTime = ref(null) // 开始时间
+// const endTime = ref(null) // 结束时间
 const searchMoreVisible = ref(false)
 
 // store值
 const taskProcessInfo = useTaskProcessStore()
-const processName = ref('') // 流程名称
 // 下拉滚动属性值 start
 const loading = ref(false) // loading
-const totalNumber = ref(0) // 总条数
-const totalPages = ref(0) // 总页数
+// const totalNumber = ref(0) // 总条数
+// const totalPages = ref(0) // 总页数
 // 当前页码数和每页条数
 const condition = reactive({
 	page: 1,
 	pageSize: 10
 })
-const satelliteList = ref([]) // 列表数据
+const _searchInit = {
+	// 流程名称
+	processName: undefined,
+	// 发起人
+	createId: undefined,
+	// 创建人
+	createBy: undefined,
+	// 流程状态
+	instanceState: undefined,
+	// 开始时间
+	beginTime: undefined,
+	// 结束时间
+	endTime: undefined
+}
+const searchParams = reactive({ ..._searchInit })
+const listData = ref({
+	list: [],
+	total: 0,
+	page: 0
+})
+const list = ref([]) // 列表数据
 // 下拉滚动属性值 end
 
 // 搜索条件更多重置
 const searchReset = () => {
-	createBy.value = undefined
-	instanceState.value = undefined
-	beginTime.value = undefined
-	endTime.value = undefined
+	// createBy.value = undefined
+	// instanceState.value = undefined
+	// beginTime.value = undefined
+	// endTime.value = undefined
+	Object.assign(searchParams, { ..._searchInit })
 	// searchMoreVisible.value = false
 }
 
@@ -214,41 +235,48 @@ const searchReset = () => {
 const searchSubmit = () => {
 	condition.page = 1
 	searchMoreVisible.value = false
-	getPagedSatellites('clear')
+	getPagedSatellites(true)
 }
 
 // 初始化
 const initList = () => {
 	loading.value = false
 	condition.page = 1
-	satelliteList.value = []
-	totalNumber.value = 0
-	totalPages.value = 0
+	// list.value = []
+	// totalNumber.value = 0
+	// totalPages.value = 0
+	listData.value = {
+		list: [],
+		total: 0,
+		page: 0
+	}
 	taskProcessInfo.refresh = false
 	loadList()
 }
 
 // 分页获取数据
 const loadList = () => {
-	if (loading.value) return false
-	loading.value = true
+	// if (loading.value) return false
+	// loading.value = true
 	getPagedSatellites()
 }
 
 // 获取分页数据
-const getPagedSatellites = async (from) => {
+const getPagedSatellites = async isInit => {
+	loading.value = true
 	try {
 		let responseData = {}
 		const { currentTaskType } = props
 		const params = {
 			...condition,
-			data: {
+			data: searchParams
+			/*data: {
 				processName: processName.value,
 				createBy: createBy.value,
 				instanceState: instanceState.value,
 				beginTime: beginTime.value,
 				endTime: endTime.value
-			}
+			}*/
 		}
 		if (currentTaskType === 'pendingApproval') {
 			responseData = await processTaskPagePendingApprovalApi(params)
@@ -271,22 +299,26 @@ const getPagedSatellites = async (from) => {
 			item.currentNode = flag2 ? item.taskName : item.currentNode // 当前节点
 			item.createTime = flag2 ? item.launchTime : item.createTime // 创建时间
 			item.createBy = flag2 ? item.launchBy : item.createBy // 创建人
-			if (from !== 'clear') {
-				satelliteList.value.push(item)
+			if (!isInit) {
+				listData.value.list.push(item)
+				// list.value.push(item)
 			}
 		})
 
-		if (from === 'clear') {
-			satelliteList.value = records
+		if (isInit) {
+			listData.value.list = records
+			// list.value = records
 		}
-		totalNumber.value = total
-		totalPages.value = pages
+		// totalNumber.value = total
+		// totalPages.value = pages
+		listData.value.total = total
+		// listData.value.page = pages
 		loading.value = false
-		if (condition.page > totalPages.value) {
+		if (condition.page > pages) {
 			console.log('没有更多数据了')
 			return
 		}
-		if (from !== 'clear') {
+		if (!isInit) {
 			condition.page++
 		}
 	} catch (e) {
@@ -301,14 +333,14 @@ const getTaskDetail = item => {
 
 // 开始时间的禁用
 const disabledDateStart = time => {
-	if (!endTime.value) return false
-	return time.getTime() >= new Date(endTime.value).getTime()
+	if (!searchParams.endTime) return false
+	return +time >= +new Date(`${searchParams.endTime} 23:59:59`)
 }
 
 // 结束时间的禁用
 const disabledDateEnd = time => {
-	if (!beginTime.value) return false
-	return time.getTime() <= new Date(beginTime.value).getTime()
+	if (!searchParams.beginTime) return false
+	return +time <= +new Date(`${searchParams.beginTime} 00:00:00`)
 }
 
 /**
@@ -318,12 +350,14 @@ const disabledDateEnd = time => {
  */
 const resetSearch = type => {
 	if (type === 'external') {
-		processName.value = ''
+		// processName.value = ''
+		searchParams.processName = undefined
 		initList()
 	}
 }
 
 onMounted(() => {
+	taskProcessInfo.refresh = true
 	taskProcessInfo.setCurrentTaskRow({})
 })
 
@@ -341,9 +375,12 @@ watch(
 	{ immediate: true }
 )
 
-const noMore = computed(() => satelliteList.value.length > totalNumber.value)
+const noMore = computed(() => {
+	const _data = listData.value
+	return _data.list.length >= _data.total
+})
 
-const disabledInfinite = computed(() => noMore.value)
+const disabledInfinite = computed(() => loading.value || noMore.value)
 </script>
 
 <style scoped lang="scss">
@@ -444,5 +481,15 @@ const disabledInfinite = computed(() => noMore.value)
 			}
 		}
 	}
+	.flow-bottom-txt {
+		color: var(--el-color-primary);
+		background: var(--el-color-primary-light-9);
+		padding: 6px;
+		margin-bottom: 6px;
+		&.no-more {
+			color: var(--el-color-warning);
+			background: var(--el-color-warning-light-9);
+		}
+	}
 }
 </style>