ygoa_miniapp/pages/process/index.vue

<template>
	<view class="index_container">
		<view class="search_container">
			<uni-row>
				<uni-col :xs="6" :sm="4">
					<view class="popup_button_container">
						<button @click="openPopup" class="button">{{ searchItem }}</button>
					</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)
// 分段器点击事件 调用子组件刷新数据
function clickSegmentItem({ currentIndex }) {
	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);
}


// 待办列表
const processes = ref([])
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">
@import url("@/static/font/ygoa/iconfont.css");

.ygoa-icon {
	font-size: 3rem;
}

.search_container {
	.popup_button_container {
		width: 100%;
		padding-top: 10px;

		.button {
			font-size: 14px;
			font-weight: bold;
			color: #ffffff;
			background-color: #1aad19;
			height: 36px;
			width: 100%;
		}
	}

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

.segmented_control_container {}
</style>