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 v-for="(process, index) in list" :key="index">
				<uni-card @click="handleToDetail(process)" :isFull="true" padding="10px 0">
					<uni-row>
						<uni-col :xs="3" :sm="2">
							<view class="icon_container">
								<text style="font-size: calc(40px + 0.5 * (1rem - 16px));" 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 uni-ellipsis">
												<text>{{ process.insName }}</text>
											</view>
										</uni-col>
										<uni-col v-else>
											<view class="process_title uni-ellipsis">
												<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="process.isCancel == '1'?18:24" :sm="process.isCancel == '1'?19:24">
											<view v-if="process.tmodelName == undefined">
												<uni-row>
													<uni-col :xs="8" :sm="7">流程类型:</uni-col>
													<uni-col :xs="16" :sm="17">{{ process.typeName || '无'
														}}</uni-col>
												</uni-row>
												<uni-row>
													<uni-col :xs="8" :sm="7">创建时间:</uni-col>
													<uni-col :xs="16" :sm="17">{{ process.createdate }}</uni-col>
												</uni-row>
											</view>
											<view v-else @click.stop.prevent="handleCollapseChange(process, index)">
												<uni-row>
													<uni-col :xs="8" :sm="7">当前流程:</uni-col>
													<uni-col :xs="16" :sm="17">
														<text style="color: #79abff; text-decoration: underline;">{{
															process.tmodelName }}</text>
													</uni-col>
												</uni-row>
												<uni-row>
													<uni-col :xs="8" :sm="7">创建时间:</uni-col>
													<uni-col :xs="16" :sm="17">{{ process.createdate }}</uni-col>
												</uni-row>
											</view>
										</uni-col>
										<uni-col :xs="6" :sm="5" v-if="process.isCancel == '1'">
											<uni-row>
												<view class="button_container">
													<button type="warn" size="mini"
														@click.stop.prevent="handleToCancel(process)">撤回</button>
												</view>
											</uni-row>
										</uni-col>
									</uni-row>
								</view>
							</uni-card>
						</uni-col>
					</uni-row>
				</uni-card>
				<uni-collapse v-if="process.flowStepItem != undefined">
					<uni-collapse-item :border="false" :show-arrow="false" :open="process.flowStepItem.show">
						<template v-slot:title>
							<!-- <view class="flow_step_section">
								<uni-section title="当前流程" type="line" titleFontSize="0.8rem"></uni-section>
							</view> -->
						</template>
						<view class="flow_step_container">
							<up-steps class="up_step_view" :current="process.flowStepItem.stepActive"
								activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
								<view v-for="(step, index) in process.flowStepItem.options" :key="index">
									<up-steps-item :contentClass="'redcontent'" v-if="step.state == '3'"
										:title="step.title + ' 退回'" :desc="step.desc" error></up-steps-item>
									<up-steps-item :contentClass="'redcontent'" v-else-if="step.state == '0'"
										:title="step.title + ' 撤销'" :desc="step.desc" error></up-steps-item>
									<up-steps-item v-else-if="step.state == '8' || step.state == '9'"
										:title="step.title + ' 回收'" :desc="step.desc" error></up-steps-item>
									<up-steps-item v-else-if="index == process.flowStepItem.stepActive"
										:title="step.title" :desc="step.desc">
										<template #icon>
											<view class="active_step_circle">
												<text class="active_step_text">{{ index + 1 }}</text>
											</view>
										</template>
									</up-steps-item>
									<up-steps-item v-else :title="step.title" :desc="step.desc"></up-steps-item>
								</view>
							</up-steps>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</z-paging>
	</view>
</template>

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

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

const paging = ref(null)
// 加载完成 更新数据
const list = ref([])
const totalPage = ref(0)

function handleCollapseChange(process, index) {
	// console.log('handleCollapseChange', process);
	if (list.value[index].flowStepItem == undefined) {
		getProcessFlow(userStore.user.useId, process).then(({ returnParams }) => {
			const flowStepItem = {
				options: [],
				stepActive: -1,
				show: true
			}
			flowStepItem.options = returnParams.list.map((item, index) => {
				const { tmodelName, name, createdate, finishdate, remark, state } = item
				if (state == 1) {
					flowStepItem.stepActive = index
				}
				const title = tmodelName + (name == '' ? '' : ' ( ' + name + ' )')
				const desc = (finishdate == '' ? '\n' : '办理时间: ' + finishdate)
				return {
					title,
					desc,
					state
				}
			})
			if (flowStepItem.stepActive === -1) flowStepItem.stepActive = returnParams.list.length
			list.value[index]['flowStepItem'] = flowStepItem
		})
		return
	}
	list.value[index].flowStepItem.show = !list.value[index].flowStepItem.show
}

function complete(dataList, total, pageNo) {
	totalPage.value = Math.ceil(total / props.pSize)
	if (pageNo <= totalPage.value) {
		list.value.push(...dataList);
	}
	// 第一页直接加载数据
	if (pageNo === 1) {
		list.value = dataList
		paging.value.complete(dataList)
		return
	}
	// 防止重复获取最后一次信息
	if (props.pSize * pageNo < total) {
		paging.value.complete(dataList)
	} else {
		paging.value.complete([])
	}
}
// 点击分段器
function onClickItem() {
	// 重新加载数据 pageNo恢复为默认值
	list.value = []
	paging.value.reload()
}
// 刷新
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)
}
function handleToCancel(process) {
	emits('clickCancel', process)
}
defineExpose({
	onClickItem,
});
</script>

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

.flow_step_section {
	.uni-section .uni-section-header {
		padding: 5px 10px;
	}
}

.flow_step_container {
	min-height: 100px;

	.up_step_view {
		::v-deep .u-steps {
			.u-steps-item {
				padding-bottom: 11px;

				.redcontent {
					.u-text__value--content {
						color: #ff4500;
					}
				}

				.active_step_circle {
					width: 20px;
					height: 20px;
					box-sizing: border-box;
					flex-shrink: 0;
					border-radius: 100px;
					border-width: 1px;
					border-color: #A78BFA;
					background-color: #A78BFA;
					border-style: solid;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					transition: background-color .3s;

					.active_step_text {
						color: #fff;
						font-size: 0.6875rem;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						text-align: center;
						line-height: 0.6875rem;
					}
				}
			}

			.u-steps-item view:last-of-type {
				margin-top: 0 !important;

				.u-text__value--content {
					font-size: 1rem !important;
				}

				.u-text__value--main {
					font-size: 1rem !important;
				}
			}
		}
	}

}

.content {

	.icon_container {
		margin: 45% 0;
	}

	.process_title {
		// TODO 长度限制15字
		line-height: 1.5rem;
		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>