ygoa_miniapp/components/ygoa/processList.vue

<template>
	<view class="content">
		<view @click="handleToDetail(process)" v-for="(process,index) in processes" :key="index">
			<uni-card :isFull="true" padding="10px 0">
				<uni-row>
					<uni-col :xs="4" :sm="2">
						<view class="icon_container">
							<text class="ygoa-icon" :class="process.type"></text>
						</view>
					</uni-col>
					<uni-col :xs="20" :sm="22">

						<uni-card padding="0 10px 10px" :isFull="true" :border="false" :is-shadow="true">
							<template v-slot:title>
								<uni-row>
									<uni-col :xs="18" :sm="22">
										<view class="process_title">
											<text>{{ process.title }}</text>
										</view>
									</uni-col>
									<uni-col :xs="6" :sm="2">
										<uni-tag :text="process.step == 0?'审批中':''" :type="process.step == 0?'primary':''"></uni-tag>
									</uni-col>
								</uni-row>
							</template>
							<view class="process_contant">
								<uni-row>
									<uni-col :xs="8" :sm="7">{{ 'icon-apply-overtime'==process.type?'加班时间':'请假天数' }}:</uni-col>
									<uni-col :xs="15" :sm="16">{{ process.totalTime }}</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :xs="8" :sm="7">开始时间:</uni-col>
									<uni-col :xs="15" :sm="16">{{ process.startTime }}</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :xs="8" :sm="7">结束时间:</uni-col>
									<uni-col :xs="15" :sm="16">{{ process.endTime }}</uni-col>
								</uni-row>
							</view>
						</uni-card>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
</template>

<script setup lang="ts">
	import $tab from '@/plugins/tab.js'
	// TODO: 根据接口返回的数据动态生成process表单
	const props = defineProps(['processes'])
	function handleToDetail({ id, title }) { // 跳转流程详情页
		$tab.navigateTo('/pages/process/detail/index?id=' + id + '&title=' + title)
	}
</script>

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

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

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

		.process_title {
			font-weight: bold;
			font-size: 1.2rem;
			margin-top: 10px;
		}
	}
</style>