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="onClickItem" styleType="text"
				activeColor="#409eff"></uni-segmented-control>
		</view>
		<view class="process_list">
			<process-list :processes="processes"></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 { onMounted, reactive, ref } from 'vue';
	// 分段器选项
	const items = reactive(['我的', '待办', '在办', '办结'])
	// 待办列表
	let processes = reactive([])
	// 分段器选项
	const current = ref(-1)

	// 搜索项
	const candidates = ref(['全局', '请假日期', '天数'])
	// 搜索栏选中项
	const searchItem = ref('全局')
	onMounted(() => {
		onClickItem({ currentIndex: 0 })
	})
	// 搜索项弹出层
	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 onClickItem({ currentIndex }) { // 点击分段器选项
		current.value = currentIndex
		switch (currentIndex) {
			case 0: // 我的
			case 1: // 待办
			case 2: // 在办
				processes = [
					{
						id: 1,
						title: '账户1 的请假申请',
						user: '账户1',
						createTime: '2024/10/10',
						startTime: '2024/10/10',
						endTime: '2024/10/12',
						totalTime: '2',
						description: '请假说明请假说明请假说明请假说明请假说明',
						type: 'icon-apply-leave',
						step: 0
					},
					{
						id: 1,
						title: '账户2 的请假申请',
						user: '账户2',
						createTime: '2024/10/10',
						startTime: '2024/10/10',
						endTime: '2024/10/12',
						totalTime: '2',
						description: '请假说明请假说明',
						type: 'icon-apply-leave',
						step: 0
					},
					{
						id: 2,
						title: '账户2 的加班申请',
						user: '账户2',
						createTime: '2024/10/10',
						startTime: '2024/10/10 17/30/00',
						endTime: '2024/10/10 18/30/00',
						totalTime: '1',
						description: '加班说明加班说明',
						type: 'icon-apply-overtime',
						step: 0
					}
				]
				break;
			// case 1:
			// 	processes = []
			// 	break;
			// case 2:
			// 	processes = []
			// 	break;
			case 3: // 办结
				processes = []
				break;
		}
	}
</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>