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 } 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, cancelProcessFlow, getProcessList } 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();

// 搜索项
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(1)
// 子组件
const processListRef = ref(null)

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


// 获取待办列表数据
const point = ref(0)
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
	}
	const requestMap = [
		getUserAllProcess, // 我的
		getUserProcess, // 待办
		getUserProcessing, // 在办
		getUserProcessed // 办结
	]
	requestMap[current.value](params).then(({ returnParams }) => {
		// processes.value = returnParams.list
		// 只加载最新数据 防止快速连续点击分段器造成数据错乱
		if (flag == point.value) {
			callback(returnParams.list, returnParams.total, pageNo)
		}
	})
}
// 分页获取待办列表数据
function getProcessPage({ pageNo, pSize }, callback) {
	const params = {
		staffId: userStore.user.useId,
		page: pageNo,
		pageNum: pSize,
		modelId: "",
		control: 1,
		queryParams: queryParams.value
	}
	const requestMap = [
		getUserAllProcess, // 我的
		getUserProcess, // 待办
		getUserProcessing, // 在办
		getUserProcessed // 办结
	]
	requestMap[current.value](params).then(({ returnParams }) => {
		// processes.value.push(...returnParams.list)
		callback(returnParams.list, returnParams.total, pageNo)
	})
}
// 跳转到流程详情页
function handleToProcessDetail({ username, insId, tinsId, insName, control }) {
	let url = '/pages/process/detail/index?insId=' + insId + '&insName=' + insName + '&control=' + control
	if (tinsId) {
		url = url + '&tinsId=' + tinsId
	}
	$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>