ygoa_miniapp/pages/process/index.vue

<template>
	<page-meta root-font-size="system" />
	<view class="index_container">
		<view class="search_container">
			<uni-row>
				<uni-col :xs="3" :sm="2">
					<view @click="openPopup" class="popup_button_container">
						<text class="ygoa_icon icon-filter"></text>
						<!-- <text class="button_text">筛选</text> -->
					</view>
				</uni-col>
				<view class="search_bar">
					<!-- 输入框搜索 -->
					<uni-col v-if="0 == searchItem" :xs="17" :sm="19">
						<uni-search-bar @confirm="searchBarConfirm" @cancel="cancelSearch" @blur="searchBarOnBlur"
							clearButton="none" placeholder="搜索栏">
							<template v-slot:searchIcon>
								<uni-icons type="search" size="calc(30px + .5*(1rem - 16px))"></uni-icons>
							</template>
						</uni-search-bar>
					</uni-col>
					<!-- 类型 下拉框搜索 -->
					<uni-col v-else-if="1 == searchItem" :xs="16" :sm="18">
						<picker class="picker_container" @change="bindPickerChange" :value="pickerItem"
							:range="pickerItems" range-key="modelName">
							<view class="uni-input input_text">
								{{ pickerItems[pickerItem].modelName }}
							</view>
						</picker>
						<view @click="search(pickerItems[pickerItem].modelId)" class="picker_button_container">
							<uni-icons type="search" size="calc(30px + .5*(1rem - 16px))"></uni-icons>
							<text class="button_text">搜索</text>
						</view>
					</uni-col>
					<!-- 时间范围搜索 -->
					<uni-col v-else-if="2 == searchItem" :xs="16" :sm="18">
						<view class="datetime_picker_container">
							<uni-datetime-picker type="daterange" @change="datetimePickerChange" @clear="cancelSearch"
								:border="false" />
						</view>
					</uni-col>
					<!-- 清空筛选按钮 -->
					<uni-col :xs="2" :sm="2">
						<view @click="cancelSearch" class="clear_button_container">
							<uni-icons type="clear" size="calc(24px + .5*(1rem - 16px))" color="#999"></uni-icons>
						</view>
					</uni-col>
				</view>
			</uni-row>
		</view>
		<view class="segmented_control_container">
			<uni-segmented-control :current="current" :values="items" @clickItem="clickSegmentItem" styleType="text"
				activeColor="#409eff"></uni-segmented-control>
		</view>
		<view class="process_list">
			<process-list ref="processListRef" @clickCancel="handleToCancelProcess" @clickSegment="getProcessData"
				@clickItem="handleToProcessDetail" @scrollToBottom="getProcessPage" :current="current" :pSize="5"
				:pageNo="1"></process-list>
		</view>
		<view class="popup_container">
			<uni-popup ref="searchItemPopup" type="bottom">
				<!-- 弹窗标题 -->
				<!-- <view class="popup-title">流程类型分类</view> -->
				<!-- 流程分类列表 -->
				<uni-section title="流程类型" type="line" class="uni-section">
					<uni-collapse :accordion="true">
						<uni-list class="flow-category-list">
							<!-- 一级分类：流程类型（遍历ftypeList） -->
							<uni-collapse-item 
								class="flow-type-group" 
								:open="false" 
								:show-animation="true"
								v-for="(type, typeIdx) in flowList.ftypeList" 
								:key="typeIdx"
								:title="type.typeName"
							>
								<template v-slot:title>
									<view class="group-header">
										<!-- 流程类型图标（可自定义） -->
										<uni-icons type="list" size="24rpx" class="group-icon" />
										<!-- 流程类型名称 -->
										<text class="group-name">{{ type.typeName }}</text>
										<!-- 流程类型下的总数量角标 -->
										<!-- <view class="badge" v-if="getTypeItemCount(type.typeId) > 0">
											{{ getTypeItemCount(type.typeId) }}
										</view> -->
										<uni-badge :text="getTypeItemCount(type.typeId)" v-if="getTypeItemCount(type.typeId) > 0"></uni-badge>
									</view>
								</template>
								<view v-for="(item, index) in flowList.fList" :index="index" :key="item.modelId">
									<!-- <uni-list-item @click="searchByModelId(item)"  v-if="type.typeId === item.typeId.typeId"
										clickable  class=""> -->
										<view 
										    @click="searchByModelId(item)"  
										    v-if="type.typeId === item.typeId.typeId"
										    style="padding: 16rpx 60rpx; background: #fff; border-bottom: 1px solid #f5f5f7;"
										    class="flow-item-sub"
										  >
											<view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
												<text class="sub-item-title">{{ item.modelName }}</text>
												<uni-badge :text="getModelItemCount(item.modelId)" v-if="getModelItemCount(item.modelId) > 0"></uni-badge>
											</view>
											<!-- <view class="sub-item-title"> -->
												<!-- <text>{{ item.modelName }}</text> -->
												<!-- 单个流程项角标（根据modelId统计待办数量） -->
												<!-- <view class="badge small-badge" v-if="getModelItemCount(item.modelId) > 0">
													{{ getModelItemCount(item.modelId) }}
												</view> -->
											<!-- </view> -->
										</view>
									<!-- </uni-list-item> -->
							</view>
							</uni-collapse-item>
						</uni-list>
					</uni-collapse>
				</uni-section>
				<!-- <uni-section title="发起人" type="line" @click="clickSearchItem('createUser')"></uni-section>
				<uni-section title="时间" type="line" @click="clickSearchItem('createTime')"></uni-section> -->
			</uni-popup>
		</view>
	</view>
</template>

<script setup lang="ts">
	import processList from '@/components/ygoa/processList.vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { reactive, ref, onMounted } from 'vue';
	import $tab from '@/plugins/tab.js'
	import $modal from '@/plugins/modal.js'
	import { getUserProcess, getUserProcessed, getUserProcessing, getUserAllProcess, getUserCopyProcess, cancelProcessFlow, getProcessList, getProcessFormInfo } from '@/api/process';
	import { useUserStore } from '@/store/user';

	onMounted(() => {
		uni.$on('ReloadProcessData', () => {
			new Promise((resolve, reject) => {
				processListRef.value.onClickItem()
			})
		})
	})
	onShow(() => {
		uni.$emit('showTabBarBadge')
	})
	const userStore = useUserStore()
	onLoad(({ insId, tinsId, insName, control }) => {
		if (insId) {
			const username = userStore.user.name
			getProcessFormInfo( userStore.user.useId, insId ).then(({ returnParams }) => {
				//流程流转的最后一步
				const lastChecker = returnParams.processCheckers[returnParams.processCheckers.length - 1]
				if (username == lastChecker.v_user && 0 !== lastChecker.n_state) {
					//流程流转到当前用户且流程未撤销
					tinsId = lastChecker.l_tins_id
				}
				handleToProcessDetail({ username, insId, tinsId, insName, control })
			})
		}
		const staffId = userStore.user.useId
		const unitId = userStore.user.unitId
		getProcessList(staffId, unitId).then(res => {
			flowList.value = res.returnParams // 设置flowList
			// 先加载完流程列表数据，再获取待办流程数量
			// 使用 setTimeout 确保流程列表先显示
			setTimeout(() => {
				getProcessCountsByType()
			}, 500) // 延迟500毫秒调用，确保流程列表数据先加载
		})
	})


	// 搜索项
	const candidates = ref(['发起者', '类型', '时间'])
	// 搜索栏选中项
	const searchItem = ref(0)
	// 搜索项弹出层
	const searchItemPopup = ref(null)
	// 待办流程数量按类型分组
	const processCountsByType = ref({})
	// 待办流程数量按模型分组
	const processCountsByModel = ref({})
	
	// 打开搜索项弹出层
	function openPopup() {
		searchItemPopup.value.open()
	}
	// 关闭搜索项弹出层
	function closePopup() {
		searchItemPopup.value.close()
	}
	// 选中搜索项
	function clickSearchItem(item) {
		debugger
		// searchItem.value = item
		// if (item == 1 && pickerItems.value.length == 1) initPickerItems()
		if(item == "createUser") {
			
		} else if(item == "createTime") {
			
		} else {
			search(item.modelId)
		}
		closePopup()
	}
	// 搜索参数
	const queryParams = ref({})
	// 输入框搜索栏
	function searchBarConfirm(e) {
		// console.log('searchBarConfirm: ', e);
	}
	// 输入框搜索栏失去焦点
	function searchBarOnBlur(queryParam) {
		search(queryParam.value)
	}
	// 取消输入框搜索
	// function searchBarCancel() {
	// 	cancelSearch()
	// }
	// 下拉框搜索
	const pickerItems = ref([{ modelId: '', modelName: '无' }])
	const pickerItem = ref(0)
	// 流程列表
	const flowList = ref({
		fList: [],
		ftypeList: [
			{
				typeName: ''
			}
		],
	})
	// 获取流程宫格数据
	function initPickerItems() {
		const staffId = userStore.user.useId
		const unitId = userStore.user.unitId
		getProcessList(staffId, unitId).then(res => {
			// flowList.value = res.returnParams // 设置flowList
			pickerItems.value = res.returnParams.fList.map(({ modelId, modelName }) => {
				return { modelId, modelName }
			})
			pickerItems.value.unshift({ modelId: '', modelName: '无' })
		})
	}
	// 搜索栏 下拉框选择项
	function bindPickerChange(e) {
		pickerItem.value = e.detail.value
		// console.log('bindPickerChange: ', e);
	}
	// 时间选择器搜索
	// const datetimePickerRange = ref([])
	function datetimePickerChange(event) {
		search(event)
	}
	
	// 搜索
	function searchByModelId(item) {
		queryParams.value = { 'modelId': item.modelId };
		processListRef.value.onClickItem() // 调用子组件刷新数据
		closePopup()
	}
	// 搜索
	function search(queryParam) {
		switch (searchItem.value) {
			case 0: queryParams.value = { 'name': queryParam }; break;
			case 1: queryParams.value = { 'modelId': queryParam }; break;
			case 2:
				queryParams.value = {
					'starttime': queryParam[0],
					'endtime': queryParam[1]
				};
				break;
		}
		// debugger
		// if(queryParam.value == "createUser") {
		// 	queryParams.value = { 'name': queryParam };
		// } else if(queryParam.value == "createTime") {
		// 	queryParams.value = {
		// 		'starttime': queryParam[0],
		// 		'endtime': queryParam[1]
		// 	};
		// } else {
		// 	queryParams.value = { 'modelId': queryParam };
		// }
		processListRef.value.onClickItem() // 调用子组件刷新数据
	}
	// 取消搜索
	function cancelSearch() {
		queryParams.value = {}
		processListRef.value.onClickItem() // 调用子组件刷新数据
	}
	
	// 获取待办流程数量并按类型分组
	function getProcessCountsByType() {
		const params = {
			staffId: userStore.user.useId,
			page: 1,
			pageNum: 9999, // 获取所有待办流程
			modelId: "",
			control: 1,
			queryParams: {}
		}
		
		getUserProcess(params).then(({ returnParams }) => {
			const processList2 = returnParams.list || []
			// 初始化计数器
			const countsByType = {}
			const countsByModel = {}
			// 遍历流程列表，按typeId和modelId统计数量
			processList2.forEach(process => {
				// 根据process.modelId与flowList.value.fList中的item.modelId进行匹配
				const matchingFlow = flowList.value.fList.find(f => f.modelId === process.modelId)
				if (matchingFlow && matchingFlow.typeId) {
					const typeId = matchingFlow.typeId.typeId
					// 按typeId统计
					countsByType[typeId] = (countsByType[typeId] || 0) + 1
					// 按modelId统计
					countsByModel[process.modelId] = (countsByModel[process.modelId] || 0) + 1
				}
			})
			// 更新响应式数据
			processCountsByType.value = countsByType
			processCountsByModel.value = countsByModel
		}).catch(error => {
			console.error('获取待办流程数量失败:', error)
		})
	}
	
	// 根据typeId获取待办数量
	function getTypeItemCount(typeId) {
		return processCountsByType.value[typeId] || 0
	}
	
	// 根据modelId获取待办数量
	function getModelItemCount(modelId) {
		return processCountsByModel.value[modelId] || 0
	}
	
	// 分段器选项
	const items = reactive(['我的', '抄送', '待办', '在办', '办结'])
	// 分段器选项
	const current = ref(items.findIndex(item => item == '待办'))
	// 子组件
	const processListRef = ref(null)

	// 待办列表
	// const processes = ref([])
	// 分段器点击事件 调用子组件刷新数据
	function clickSegmentItem({ currentIndex }) {
		// processes.value = [] // 清空列表数据
		current.value = currentIndex // 更新分段器状态
		processListRef.value.onClickItem() // 调用子组件刷新数据
	}


	// 获取待办列表数据
	const point = ref(0)
	const requestMap = [
		getUserAllProcess, // 我的
		getUserCopyProcess, // 抄送
		getUserProcess, // 待办
		getUserProcessing, // 在办
		getUserProcessed // 办结
	]
	function getProcessData({ pageNo, pSize }, callback) {
		const flag = point.value = new Date().getTime()
		const params = {
			staffId: userStore.user.useId,
			page: pageNo,
			pageNum: pSize,
			modelId: "",
			control: 1,
			queryParams: queryParams.value
		}
		requestMap[current.value](params).then(( { returnParams, Rows, Total } ) => {
			// 只加载最新数据 防止快速连续点击分段器造成数据错乱
			if (flag == point.value) {
				callback(
					current.value == 1 ? Rows : returnParams.list, 
					current.value == 1 ? Total : returnParams.total, 
					pageNo
				)
			}
		})
	}
	// 分页获取待办列表数据
	function getProcessPage({ pageNo, pSize }, callback) {
		const params = {
			staffId: userStore.user.useId,
			page: pageNo,
			pageNum: pSize,
			modelId: "",
			control: 1,
			queryParams: queryParams.value
		}
		requestMap[current.value](params).then(( { returnParams, Rows, Total } ) => {
			callback(
				current.value == 1 ? Rows : returnParams.list, 
				current.value == 1 ? Total : returnParams.total, 
				pageNo
			)
		})
	}
	// 跳转到流程详情页
	function handleToProcessDetail({ username, insId, tinsId, insName, control }) {
		debugger
		let url = '/pages/process/detail/index?insId=' + insId + '&insName=' + insName + '&control=' + control
		if (tinsId && current.value != 1) { // 排除抄送流程的tinsId
			url = url + '&tinsId=' + tinsId
		}
		// console.log('url', url)
		$tab.navigateTo(url)
	}
	function handleToCancelProcess(process) {
		uni.showModal({
			title: '确认撤回' + process.insName,
			editable: true,
			placeholderText: '请输入撤回备注',
			success: ({ confirm, content }) => {
				if (content == '') {
					$modal.msgError('撤回备注不能为空！')
					return
				}
				if (confirm) {
					cancelProcessFlow(userStore.user.useId, content, process)
						.then(({ returnMsg }) => {
							if (returnMsg.includes('success')) {
								$modal.msgSuccess('撤销成功')
								// 通知列表刷新数据
								processListRef.value.onClickItem() // 调用子组件刷新数据
							} else {
								$modal.msgError(returnMsg)
							}
						})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-badge {
		height: calc(1.5rem + 0px) !important;
		min-width: calc(1.5rem + 0px) !important;
		line-height: calc(1.375rem + 0px) !important;
		font-size: calc(1.125rem + 0px) !important;
	}
	// @import url("@/static/font/ygoa/iconfont.css");
	.search_container {
		padding: 10px 0;

		.popup_button_container {
			display: flex;
			justify-content: center;
			margin-left: 5px;
			height: 36px;
			line-height: 36px;
			width: 100%;
			background-color: #f5f5f5;
			text-align: center;
			font-size: calc(16px + .5*(1rem - 16px));
			color: #333;

			.ygoa_icon {
				font-size: calc(16px + .5*(1rem - 16px));
			}

			.button_text {
				font-size: calc(16px + .5*(1rem - 16px));
				width: 64px;
				margin-left: 4px;
			}
		}

		.clear_button_container {
			display: flex;
			justify-content: center;
			margin-left: 5px;
			height: 36px;
			line-height: 36px;
			width: 100%;
			background-color: #f5f5f5;
			text-align: center;
			color: #999;

			&:active {
				background-color: #e0e0e0;
			}
		}

		::v-deep .search_bar {
			.uni-searchbar {
				padding: 0;

				.uni-searchbar__box-search-input {
					font-size: calc(14px + .5*(1rem - 16px)) !important;
				}

				.uni-searchbar__cancel {
					font-size: calc(14px + .5*(1rem - 16px)) !important;
				}
			}

			.picker_container {
				display: inline-block;
				float: left;
				background-color: #f8f8f8;
				width: 70%;
				height: 36px;

				.input_text {
					display: flex;
					justify-content: center;
					text-align: center;
					background-color: #f8f8f8;
					border: 1px solid #e5e5e5;
					border-radius: 5px;
					width: 100%;
					height: 26px;
					color: #000;
					font-size: calc(14px + .5*(1rem - 16px)) !important;
					line-height: 26px;
					padding: 4px 8px 4px 0;
				}
			}

			.picker_button_container {
				display: inline-flex;
				justify-content: center;
				margin-left: 5px;
				height: 36px;
				line-height: 36px;
				background-color: #f5f5f5;
				text-align: center;
				font-size: calc(16px + .5*(1rem - 16px));
				width: 25%;

				.button_text {
					overflow: hidden;
					font-size: calc(16px + .5*(1rem - 16px));
					margin-left: 4px;
				}
			}

			.datetime_picker_container {
				.uni-date {
					.uni-date-editor {
						margin-right: 5px;

						.uni-date-x {
							background-color: #f8f8f8;
							color: #000;
							font-size: calc(14px + .5*(1rem - 16px));

							.uni-icons {
								font-size: calc(22px + .5*(1rem - 16px));
							}

							.uni-date__x-input {
								font-size: calc(14px + .5*(1rem - 16px));
							}
						}

						.uni-date__icon-clear {
							.uni-icons {
								font-size: calc(22px + .5*(1rem - 16px));
								// color: #c0c4cc;
							}
						}
					}
				}
			}
		}
	}

	::v-deep .segmented_control_container {
		.segmented-control__text {
			font-size: calc(14px + .5*(1rem - 16px));
		}
	}

	::v-deep .process_list {
		.process_contant {
			font-size: calc(14px + .5*(1rem - 16px));

			.button_container {
				button {
					font-size: calc(13px + .4*(1rem - 16px))
				}
			}
		}

		.zp-l-text-rpx {
			font-size: calc(30rpx + .5*(1rem - 16px));
		}

		.flow_step_section {
			.uni-section .uni-section-header {
				padding: 5px 10px;
			}
		}

		.flow_step_container {
			min-height: 60px;
			margin: 10px 15px;

			.u-steps {
				.u-steps-item {
					padding-bottom: 11px;

					.u-text__value--content {
						font-size: calc(13px + .5*(1rem - 16px)) !important;
					}

					.u-text__value--main {
						font-size: calc(13px + .5*(1rem - 16px)) !important;
						font-weight: 500 !important;
					}

					.u-text__value--tips {
						font-size: calc(12px + .5*(1rem - 16px)) !important;
					}

					.redcontent {
						.u-text__value--content {
							color: #ff4500;
						}
					}

					.active_step_circle {
						width: 20px;
						height: 20px;
						box-sizing: border-box;
						flex-shrink: 0;
						border-radius: 100px;
						border-width: 1px;
						border-color: #A78BFA;
						background-color: #A78BFA;
						border-style: solid;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						transition: background-color .3s;

						.active_step_text {
							color: #fff;
							font-size: 11px;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							text-align: center;
							line-height: 11px;
						}
					}
				}

				.u-steps-item view:last-of-type {
					margin-top: 0 !important;
				}
			}
		}
	}

	::v-deep .uni-calendar__content {
		margin: -20px;
		margin-top: 20px;

		.uni-calendar__header {
			.uni-calendar__header-text {
				font-size: calc(14px + .5*(1rem - 16px)) !important;
			}

			.uni-calendar__backtoday {
				padding: 2px 8px 2px 10px !important;
				font-size: calc(0.75rem + 0px) !important;
			}
		}

		.uni-calendar__box {
			.uni-calendar__weeks {
				.uni-calendar__weeks-day {
					.uni-calendar__weeks-day-text {
						font-size: calc(14px + .5*(1rem - 16px)) !important;
					}
				}

				.uni-calendar__weeks-item {
					.uni-calendar-item__weeks-box-item {
						.uni-calendar-item__weeks-box-circle {
							width: calc(8px + .5*(1rem - 16px)) !important;
							height: calc(8px + .5*(1rem - 16px)) !important;
							top: calc(5px - .25*(1rem - 16px)) !important;
							right: calc(5px - .25*(1rem - 16px)) !important;
						}

						.uni-calendar-item__weeks-box-text {
							font-size: calc(14px + .5*(1rem - 16px)) !important;
						}

						.uni-calendar-item__weeks-lunar-text {
							font-size: calc(12px + .5*(1rem - 16px)) !important;
						}
					}
				}
			}
		}

		.uni-date-changed {
			.uni-date-changed--time-date {
				font-size: calc(14px + 1*(1rem - 16px)) !important;
			}

			.uni-datetime-picker-text {
				font-size: calc(14px + 1*(1rem - 16px)) !important;
			}
		}
	}
	
	
	/* 弹窗整体样式 */
		.popup_container {
			// min-height: 1000rpx;
			::v-deep .uni-popup__content {
				border-radius: 16rpx 16rpx 0 0;
				background-color: #fff;
			}
		}
	
		/* 弹窗标题 */
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f5f5f7;
			color: #333;
		}
	/* 流程分类列表容器 */
		.flow-category-list {
			::v-deep .uni-list {
				background: #fff;
				border: none;
			}
		}
	
		/* 一级分类：流程类型组样式 */
		.flow-type-group {
			::v-deep .uni-collapse-item__content {
				padding: 0;
				border: none;
			}
	
			.group-header {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				width: 100%;
				box-sizing: border-box;
	
				.group-icon {
					margin-right: 16rpx;
					color: #666;
				}
	
				.group-name {
					font-size: 28rpx;
					flex: 1;
					color: #333;
				}
	
				.group-arrow {
					color: #999;
					margin-left: 10rpx;
				}
			}
		}
	
		/* 二级分类：流程项样式 */
		.flow-item-sub {
			::v-deep .uni-list-item__container {
				padding: 16rpx 60rpx; /* 缩进显示，区分一级分类 */
				border: none;
				// 点击时的高亮效果（可选）
				&:active {
					background-color: #F0F0F0; // 点击时加深一点，提升交互体验
				}
			}
	
			.sub-item-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #666;
				width: 100%;
				box-sizing: border-box;
			}
		}
	
		/* 通用角标样式 */
		.badge {
			min-width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			background-color: #ff4d4f;
			color: #fff;
			font-size: 22rpx;
			border-radius: 18rpx;
			padding: 0 8rpx;
			margin-right: 10rpx;
			display: inline-block !important;
		}
	
		/* 小角标（单个流程项使用，可选） */
		.small-badge {
			min-width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			font-size: 20rpx;
			display: inline-block !important;
		}
	::v-deep .uni-section {
		overflow-y: scroll;
		max-height: 1000rpx;
		min-height: 1000rpx;
		background-color: #fff;
	}

// 给 uni-list-item 加相对定位，约束 right 插槽
  ::v-deep .uni-list-item {
    position: relative !important; // 关键：约束绝对定位的 right 插槽
    width: 100% !important; // 确保列表项占满父容器
    box-sizing: border-box !important;
  }

  // 调整 uni-badge 样式，避免溢出
  ::v-deep .uni-badge {
    position: static !important; // 取消绝对定位，改为静态流布局
    margin-left: 10rpx !important; // 与文字保持间距
    display: inline-block !important;
	background-color: #ff4d4f !important;
  }
</style>