ygoa_miniapp/components/ygoa/processList.vue

<template>
	<view class="content" :style="`height: ${contentHeight}`">
		<z-paging :fixed="false" @query="queryData" :value="list" :default-page-size="pSize" :default-page-no="pageNo"
			ref="paging">
			<view @click="handleToDetail(process)" v-for="(process, index) in list" :key="index">
				<uni-card :isFull="true" padding="10px 0">
					<uni-row>
						<uni-col :xs="3" :sm="2">
							<view class="icon_container">
								<text style="
	font-size: 2.5rem;" class="ygoa-icon" :class="iconDict[process.modelName]"></text>
							</view>
						</uni-col>
						<uni-col :xs="21" :sm="22">

							<uni-card padding="0" :isFull="true" :border="false" :is-shadow="false">
								<template v-slot:title>
									<uni-row>
										<uni-col :xs="19" :sm="22" v-if="current !== 0">
											<view class="process_title">
												<text>{{ process.insName }}</text>
											</view>
										</uni-col>
										<uni-col v-else>
											<view class="process_title">
												<text>{{ process.insName }}</text>
											</view>
										</uni-col>
										<uni-col :xs="5" :sm="2" v-if="current !== 0">
											<view class="process_status">
												<uni-tag v-if="current === 1" text="审批中" type="success"></uni-tag>
												<uni-tag v-else-if="current === 2" text="审批中" type="success"></uni-tag>
												<uni-tag v-else-if="current === 3" text="已办结" type="primary"></uni-tag>
											</view>
										</uni-col>
									</uni-row>
								</template>
								<view class="process_contant">
									<uni-row>
										<uni-col :xs="8" :sm="7">流程类型:</uni-col>
										<uni-col :xs="15" :sm="16" style="color: blue;">{{ process.typeName || '无'
											}}</uni-col>
									</uni-row>
									<uni-row>
										<uni-col :xs="8" :sm="7">创建时间:</uni-col>
										<uni-col :xs="15" :sm="16">{{ process.createdate }}</uni-col>
									</uni-row>
								</view>
							</uni-card>
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const iconDict = ref({
	'外协结算申请': 'icon-outsourcing',
	'用车申请': 'icon-apply-car',
	'出差申请': 'icon-apply-business',
	'外出申请': 'icon-apply-out',
	'费用报销申请': 'icon-apply-expense',
	'加班申请': 'icon-apply-overtime',
	'请假申请': 'icon-apply-leave',
	'采购申请': 'icon-apply-purchase',
	'合同会签': 'icon-apply-sign-contract'
})

const props = defineProps({
	contentHeight: { type: String, default: '85vh' },
	current: { type: Number, default: 0 }, // 消息类型
	list: { type: Array, required: true }, // 消息数据
	pSize: { type: Number, default: 10 }, // 分页大小
	pageNo: { type: Number, default: 1 }, // 默认页
})
const emits = defineEmits([
	'clickSegment', // 点击分段器
	'clickItem', // 点击内容项
	'scrollToBottom' // 到达底部
])

const paging = ref(null)
// 加载完成 更新数据
function complete(list, total, pageNo) {
	// 第一页直接加载数据
	if (pageNo === 1) {
		paging.value.complete(list)
		return
	}
	// 防止重复获取最后一次信息
	if (props.pSize * pageNo < total) {
		paging.value.complete(list)
	} else {
		paging.value.complete([])
	}
}
// 点击分段器
function onClickItem() {
	// 重新加载数据 pageNo恢复为默认值
	// console.log('onClickItem');
	paging.value.reload()
	// reloadData()
}
// 刷新
function queryData(pageNo, pSize, queryType) {
	switch (queryType) {
		case 0: // 下拉刷新
		case 1: // 初始加载
			reloadData()
			break
		case 3: // 上拉加载
			scrollQuery(pageNo, pSize)
			break
		default: // 默认刷新
			reloadData()
			break
	}
}
// 刷新数据
function reloadData() {
	const params = {
		pSize: props.pSize,
		pageNo: props.pageNo,
	}
	emits('clickSegment', params, complete)
}
// 上拉加载
function scrollQuery(pageNo, pSize) {
	const params = {
		pSize,
		pageNo,
	}
	emits('scrollToBottom', params, complete)
}

function handleToDetail(process) { // 跳转流程详情页
	emits('clickItem', process)
}
defineExpose({
	onClickItem,
});
</script>

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

.content {
	.icon_container {
		margin: 45% 0;
	}

	.process_title {
		// TODO 长度限制15字
		line-height: 1.5rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 500;
		font-size: 1.1rem;
		margin: 5px 0;
		color: #333;
	}
	.process_status {
		margin: 5px 0;
		height: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
	}

	.process_contant {
		color: #777;
	}
}
</style>