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="6" :sm="4">
					<view @click="openPopup" class="popup_button_container">
						<text class="ygoa_icon icon-filter"></text>
						<text class="button_text">{{ candidates[searchItem] }}</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="18" :sm="20">
						<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="18" :sm="20">
						<view class="datetime_picker_container">
							<uni-datetime-picker type="daterange" @change="datetimePickerChange" @clear="cancelSearch"
								:border="false" />
						</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">
				<uni-list>
					<uni-list-item @click="clickSearchItem(index)" v-for="(item, index) in candidates" :key="index"
						clickable :title="item">
					</uni-list-item>
				</uni-list>
			</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 candidates = ref(['发起者', '类型', '时间'])
	// 搜索栏选中项
	const searchItem = ref(0)
	// 搜索项弹出层
	const searchItemPopup = ref(null)
	// 打开搜索项弹出层
	function openPopup() {
		searchItemPopup.value.open()
	}
	// 关闭搜索项弹出层
	function closePopup() {
		searchItemPopup.value.close()
	}
	// 选中搜索项
	function clickSearchItem(item) {
		searchItem.value = item
		if (item == 1 && pickerItems.value.length == 1) initPickerItems()
		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)
	// 获取流程宫格数据
	function initPickerItems() {
		const staffId = userStore.user.useId
		const unitId = userStore.user.unitId
		getProcessList(staffId, unitId).then(res => {
			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 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;
		}
		processListRef.value.onClickItem() // 调用子组件刷新数据
	}
	// 取消搜索
	function cancelSearch() {
		queryParams.value = {}
		processListRef.value.onClickItem() // 调用子组件刷新数据
	}

	// 分段器选项
	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 }) {
		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>
	// @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;
			}
		}

		::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;
			}
		}
	}
</style>