aizuda-web-vue3/src/views/approve/components/approvedItem.vue

<template>
	<!-- 左侧列表 -->
	<div class="flow-content">
		<!-- 搜索条件 -->
		<div class="search-box">
			<div class="search-segment" style="flex: 1 1 0%">
				<el-input v-model="processName" placeholder="流程名称">
					<template #append>
						<el-button :icon="Search" @click="init" />
					</template>
				</el-input>
			</div>
			<div class="search-segment">
				<el-tooltip effect="dark" content="重置" placement="top">
					<el-button :icon="Refresh" @click="resetSearch('external')" />
				</el-tooltip>
			</div>
			<div class="search-segment">
				<el-popover placement="right" :width="320" trigger="click" popper-class="popover-search">
					<template #reference>
						<el-button :icon="Filter" />
					</template>
					<el-card>
						<template #header>高级筛选</template>
						<el-scrollbar max-height="400px">
							<!-- 发起人 -->
							<el-select v-if="currentTaskType !== 'myApplication'" v-model="value" placeholder="发起人" style="margin-bottom: 10px; width: 240px">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
							<!-- 流程分组 -->
							<el-select
								v-if="currentTaskType !== 'pendingApproval'"
								v-model="value1"
								placeholder="流程分组"
								style="margin-bottom: 10px; width: 240px"
							>
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
							<!-- 流程状态 -->
							<el-select v-model="value2" placeholder="流程状态" style="margin-bottom: 10px; width: 240px">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
							<!-- 最小/大提交时间 -->
							<el-date-picker
								v-model="value3"
								style="margin-bottom: 10px; width: 240px"
								type="daterange"
								start-placeholder="最小提交时间"
								end-placeholder="最大提交时间"
								:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
							/>
							<!-- 最小/大完成时间 -->
							<el-date-picker
								v-if="currentTaskType !== 'pendingApproval'"
								v-model="value4"
								style="width: 240px"
								type="daterange"
								start-placeholder="最小完成时间"
								end-placeholder="最大完成时间"
								:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
							/>
						</el-scrollbar>
						<template #footer>
							<el-button plain>重置</el-button>
							<el-button type="primary" plain>检索</el-button>
						</template>
					</el-card>
				</el-popover>
			</div>
		</div>
		<!-- 内容值 -->
		<div v-infinite-scroll="load" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
			<div
				v-for="i in satelliteList"
				:key="i.instanceId"
				class="item-box"
				:class="[i.instanceId === taskProcessInfo.currentTaskRow.instanceId ? 'item-box-choosed' : '']"
				@click="getTaskDetail(i)"
			>
				<div class="flow-card-box flow-card-box-hoverable">
					<!--头部-->
					<div class="header">
						<el-text tag="b">{{ i.processName }}</el-text>
						<el-tag v-if="currentTaskType === 'pendingApproval'">待审批</el-tag>
						<template v-else>
							<el-tag v-if="i.instanceState === 0">审批中</el-tag>
							<el-tag v-if="i.instanceState === 1" type="success">审批通过</el-tag>
							<el-tag v-if="i.instanceState === 2" type="danger">审批拒绝</el-tag>
							<el-tag v-if="i.instanceState === 3">撤销审批</el-tag>
							<el-tag v-if="i.instanceState === 4" type="danger">超时结束</el-tag>
							<el-tag v-if="i.instanceState === 5" type="danger">强制终止</el-tag>
						</template>
					</div>
					<!--操作类容-->
					<div class="summary-list"></div>
					<!--底部-->
					<div class="footer">
						<!-- 头像 -->
						<div class="initiator">
							<FlowNodeAvatar :name="'等待后台补充用户'" />
						</div>
						<!-- 时间 -->
						<div class="begin-time">提交于 {{ i.createTime }}</div>
					</div>
				</div>
			</div>
			<p v-if="false">加载中...</p>
			<p v-if="noMore">没有更多了</p>
		</div>
	</div>
</template>

<script setup>
import useTaskProcessStore from '@/store/modules/taskProcess'
import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
import { Search, Filter, Refresh } from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import {
	processTaskPagePendingApprovalApi,
	processTaskPageMyApplicationApi,
	processTaskPagePendingClaimApi,
	processTaskPageApprovedApi,
	processTaskPageMyReceivedApi
} from '@/api/flow/processTask'

const props = defineProps({
	/**
	 * pendingApproval 待审批
	 * myApplication 我的申请
	 * myReceived 我收到的
	 * pendingClaim 认领任务
	 * approved 已审批
	 */
	currentTaskType: {
		type: String,
		default: ''
	}
})

/***
 * 待审批：发起人 流程分组 最小提交时间 最大提交时间
 * 我的申请：流程分组 流程状态 最小提交时间 最大提交时间 最小完成时间 最大完成时间
 * 我收到的：发起人 流程分组 流程状态 最小提交时间 最大提交时间 最小完成时间 最大完成时间
 * 已审批：发起人 流程分组 流程状态 最小提交时间 最大提交时间 最小完成时间 最大完成时间
 */
const options = [
	{
		value: 'Option1',
		label: 'Option1'
	},
	{
		value: 'Option2',
		label: 'Option2'
	},
	{
		value: 'Option3',
		label: 'Option3'
	},
	{
		value: 'Option4',
		label: 'Option4'
	},
	{
		value: 'Option5',
		label: 'Option5'
	}
]
const value = ref(null)
const value1 = ref(null)
const value2 = ref(null)
const value3 = ref(null)
const value4 = ref(null)

// store值
const taskProcessInfo = useTaskProcessStore()
const processName = ref('') // 流程名称
// 下拉滚动属性值 start
const loading = ref(false) // loading
const totalNumber = ref(0) // 总条数
const totalPages = ref(0) // 总页数
// 当前页码数和每页条数
const condition = reactive({
	page: 1,
	pageSize: 10
})
const satelliteList = ref([]) // 列表数据
// 下拉滚动属性值 end

// 初始化
const init = () => {
	loading.value = false
	condition.page = 1
	satelliteList.value = []
	totalNumber.value = 0
	totalPages.value = 0
	taskProcessInfo.refresh = false
	load()
}

// 分页获取数据
const load = () => {
	if (loading.value) return false
	loading.value = true
	getPagedSatellites()
}

// 获取分页数据
const getPagedSatellites = async () => {
	try {
		let responseData = {}
		const { currentTaskType } = props
		const params = {
			...condition,
			data: {
				processName: processName.value
			}
		}
		if (currentTaskType === 'pendingApproval') {
			responseData = await processTaskPagePendingApprovalApi(params)
		} else if (currentTaskType === 'myApplication') {
			responseData = await processTaskPageMyApplicationApi(params)
		} else if (currentTaskType === 'myReceived') {
			responseData = await processTaskPageMyReceivedApi(params)
		} else if (currentTaskType === 'pendingClaim') {
			responseData = await processTaskPagePendingClaimApi(params)
		} else if (currentTaskType === 'approved') {
			responseData = await processTaskPageApprovedApi(params)
		}
		const { records, total, pages } = responseData
		records.forEach(item => {
			satelliteList.value.push(item)
		})
		totalNumber.value = total
		totalPages.value = pages
		loading.value = false
		if (condition.page > totalPages.value) {
			console.log('没有更多数据了')
			return
		}
		condition.page++
	} catch (e) {
		console.log(e)
	}
}

// 点击当前实例的具体
const getTaskDetail = item => {
	taskProcessInfo.setCurrentTaskRow(item)
}

/**
 * 重置搜索
 * @param type external：重置输入框
 * clear: 重置内部的值
 */
const resetSearch = type => {
	if (type === 'external') {
		processName.value = ''
		init()
	}
}

onMounted(() => {
	taskProcessInfo.setCurrentTaskRow({})
})

/**
 * 监听同级子组件通知
 * 1、监听refresh的值变化，进行刷新
 */
watch(
	() => taskProcessInfo.refresh,
	(nValue, oValue) => {
		if (nValue) {
			init()
		}
	},
	{ immediate: true }
)

const noMore = computed(() => satelliteList.value.length > totalNumber.value)

const disabledInfinite = computed(() => noMore.value)
</script>

<style scoped lang="scss">
.flow-content {
	width: 330px;
	min-width: 330px;
	height: 100%;
	overflow: hidden;
	background: var(--el-bg-color);
	border-radius: 6px;

	// 搜搜条件
	.search-box {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 12px;

		.search-segment + .search-segment {
			margin-left: 4px;
		}
		//> .el-button {
		//	padding: 0;
		//	width: 32px;
		//	background-color: var(--el-fill-color-light);
		//}
	}

	.flow-list-box {
		background-color: #fff;
		padding: 0 12px;
		height: calc(100vh - 192px);
		overflow: hidden auto;
		scroll-snap-type: y mandatory;
		will-change: scroll-position;
		.item-box {
			margin-bottom: 12px;
			&.item-box-choosed {
				.flow-card-box {
					border-color: var(--el-color-primary);
				}
			}
		}
		.flow-card-box {
			-webkit-user-select: none;
			user-select: none;
			border-radius: 6px;
			overflow: hidden;
			border: 1px solid #e9ebef;
			padding: 10px 12px;
			cursor: pointer;
			transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);

			&.flow-card-box-hoverable {
				&:hover {
					box-shadow: 4px 4px 12px rgb(229, 230, 235);
				}
			}

			// 头部
			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			// 操作类容
			.summary-list {
				margin-top: 10px;
			}

			// 底部
			.footer {
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 13px;
				.begin-time {
					color: var(--el-text-color-regular);
				}
			}
		}
	}
}
</style>