ygoa_miniapp/pages/process/index.vue

<template>
	<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">{{ searchItem }}</text>
					</view>
				</uni-col>
				<uni-col :xs="18" :sm="20">
					<view class="search_bar">
						<uni-search-bar placeholder="搜索栏" @confirm="search" @cancel="searchCancel" @blur="searchOnBlur">
							<template v-slot:searchIcon>
								<uni-icons type="search" size="30"></uni-icons>
							</template>
							<template v-slot:clearIcon>
								<uni-icons type="clear" size="30"></uni-icons>
							</template>
						</uni-search-bar>
					</view>
				</uni-col>
			</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" :list="processes" @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(item)" 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 { reactive, ref } from 'vue';
import $tab from '@/plugins/tab.js'
import { getUserProcess, getUserProcessed, getUserProcessing, getUserAllProcess } from '@/api/process';
import { useUserStore } from '@/store/user';
const userStore = useUserStore();
// 分段器选项
const items = reactive(['我的', '待办', '在办', '办结'])
// 分段器选项
const current = ref(0)
// 子组件
const processListRef = ref(null)

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

// 搜索项
const candidates = ref(['全局', '类型', '创建时间'])
// 搜索栏选中项
const searchItem = ref('全局')
// 搜索项弹出层
const searchItemPopup = ref(null)
// 打开搜索项弹出层
function openPopup() { 
	searchItemPopup.value.open()
}
// 关闭搜索项弹出层
function closePopup() { 
	searchItemPopup.value.close()
}
// 选中搜索项
function clickSearchItem(item) { 
	searchItem.value = item
	closePopup()
}
// 搜索
function search(e) { 
	// console.log('search', e)
}
// 取消搜索
function searchCancel() { 
	return
}
// 搜索栏失去焦点
function searchOnBlur(e) { 
	// console.log('searchOnBlur', e);
}

// 获取待办列表数据
function getProcessData({ pageNo, pSize }, callback) {
	const params = {
		staffId: userStore.user.useId,
		page: pageNo,
		pageNum: pSize,
		modelId: "",
		control: 1
	}
	const requestMap = [
		getUserAllProcess, // 我的
		getUserProcess, // 待办
		getUserProcessing, // 在办
		getUserProcessed // 办结
	]
	requestMap[current.value](params).then(({ returnParams }) => {
		processes.value = returnParams.list
		callback(returnParams.list, returnParams.total, pageNo)
	})
}
// 分页获取待办列表数据
function getProcessPage({ pageNo, pSize }, callback) {
	const params = {
		staffId: userStore.user.useId,
		page: pageNo,
		pageNum: pSize,
		modelId: "",
		control: 1
	}
	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({ insId, insName }) {
	$tab.navigateTo('/pages/process/detail/index?insId=' + insId + '&insName=' + insName)
}
</script>

<style lang="scss" scoped>
@import url("@/static/font/ygoa/iconfont.css");

.search_container {
	.popup_button_container {
		display: flex;
		justify-content: center;
		margin-left: 5px;
		height: 36px;
		line-height: 36px;
		width: 100%;
		padding-top: 10px;
		background-color: #f5f5f5;
		text-align: center;
		font-size: 16px;
		color: #333;
		.button_text {
			width: 64px;
			margin-left: 4px;
		}
	}

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

.segmented_control_container {}
</style>