aizuda-web-vue3/src/views/approve/launch/index.vue

<template>
	<div class="flex-column-page-wrap pageWrap">
		<!-- 快捷入口 -->
		<el-row :gutter="10" style="margin-bottom: 10px">
			<el-col :span="6">
				<div class="left-item-box box">
					<div class="launch-todo" @click="jumpOtherPage('待审批')">
						<el-row :gutter="5">
							<el-col :span="12" class="mt-icon">
								<LeIcon icon-class="icon-processInfo-lingdang" />
							</el-col>
							<el-col :span="12">
								<div class="flex flex-v">
									<div class="mt-title">待审批的</div>
									<div class="mt-value">{{ countNum }}</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
			<el-col :span="18">
				<div class="right-item-box box">
					<el-row>
						<el-col :span="6">
							<div class="app-task" @click="jumpOtherPage('我的申请')">
								<LeIcon class="app-task-icon" icon-class="icon-processInfo-tuiguangzhong" />
								<div class="app-task-title">我申请的</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="app-task" @click="jumpOtherPage('我收到的')">
								<!--									<div class="app-task-icon">
									<img style="width: 30px; height: 30px" src="@/assets/icons/processInfo/horn.svg" />
								</div>-->
								<LeIcon class="app-task-icon" icon-class="icon-processInfo-horn" />

								<div class="app-task-title">我收到的</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="app-task" @click="jumpOtherPage('认领任务')">
								<LeIcon class="app-task-icon" icon-class="icon-processInfo-lingqu" />

								<div class="app-task-title">认领任务</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="app-task" @click="jumpOtherPage('已审批')">
								<LeIcon class="app-task-icon" icon-class="icon-processInfo-wanjie" />

								<div class="app-task-title">已审批的</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>

		<!-- 审批列表 -->
		<el-card class="box-card" shadow="never">
			<el-collapse v-model="activeNames" @change="handleChange">
				<el-collapse-item v-for="item in startList" :key="item.categoryId" :title="item.categoryName" :name="item.categoryName">
					<template #title>
						<div class="common_title">
							{{ item.categoryName }}
						</div>
					</template>
					<div class="task-item">
						<div v-for="process in item.processList" :key="process.processId" style="padding: 4px">
							<div class="card-in" @click="testEv(process)">
								<LeIcon class="flow-icon" :icon-class="`${flowIconPrefix}${process.processIcon}`" />
								<!--									<div class="flow-icon">
									<img :src="getAssetsFile(process.processIcon + '.svg')" />
								</div>-->
								<div class="space space-vertical">
									<div class="space-item">
										<div class="first-edit" :title="process.processName">
											<span>{{ process.processName }}</span>
										</div>
									</div>
									<!--										<div class="space-item">
										<div>{{ process.createTime }}</div>
									</div>-->
									<div class="space-item" :title="process.processKey">
										<div>{{ process.processKey }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-collapse-item>
			</el-collapse>
		</el-card>
		<ItemDrawer v-if="drawerVisible" v-model="drawerVisible" :record="record" />
	</div>
</template>

<script setup name="flow_modal">
import router from '@/router'
import { ref, onMounted } from 'vue'
import ItemDrawer from './ItemDrawer.vue'
const input = ref('')
const activeNames = ref(['1'])
import model from '@/api/flow/process'
import { countTaskApi } from '@/api/flow/processTask'
import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
const startList = ref([])
const drawerVisible = ref(false)
const record = ref({})
const countNum = ref(0)
const handleChange = val => {
	console.log(val)
}

// 列表
const listEv = async () => {
	const res = await model.launchProcessListApi()
	startList.value = res || []
	activeNames.value = startList.value.map(v => v.categoryName)
}

// 我的待办数量
const getCountTask = async () => {
	const count = await countTaskApi()
	countNum.value = count
}

// 跳转页面
const jumpOtherPage = item => {
	const obj = {
		待审批: '/approve/pending-approval',
		我的申请: '/approve/my-application',
		我收到的: '/approve/my-received',
		认领任务: '/approve/pending-claim',
		已审批: '/approve/approved'
	}
	router.push(obj[item])
}

const testEv = process => {
	record.value = process
	drawerVisible.value = true
}
onMounted(() => {
	listEv()
	getCountTask()
})
</script>

<style scoped lang="scss">
.pageWrap {
	//height: 100%;
	//overflow-x: scroll;
	background: var(--el-bg-color-page);
	.box {
		padding: 15px;
		background: var(--el-bg-color);
	}
}
.card-in {
	//height: 100px;
	border-radius: 8px;
	padding: 8px;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	border: 1px solid #d9d9d9;
	background: var(--component-background);
	cursor: pointer;
	> div:nth-child(1) {
		vertical-align: middle;
	}
	> div:nth-child(2) {
		flex: 0 1 100%;
		margin-left: 12px;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 1.4;
		.first-edit {
			font-size: 14px;
			font-weight: 500;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
		}
		> div {
			cursor: default;
			width: 100%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 12px;
		}
	}
	.flow-icon {
		font-size: 50px;
		flex-shrink: 0;
	}
	.space {
		display: inline-flex;
	}
	.space-vertical {
		flex-direction: column;
	}
	&:hover {
		border: 1px solid var(--el-color-primary);
		box-shadow: 0 0 4px #ddd;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}
}

.mt-icon {
	text-align: center;
	line-height: 80px;
	font-size: 42px;
	color: var(--el-color-primary);
}
.launch-todo {
	cursor: pointer;
	border-radius: 4px;
	&:hover {
		background-color: #f5f4f3;
	}
	.mt-title {
		font-size: 18px;
		padding: 10px 0 0;
	}
	.mt-value {
		font-size: 32px;
		font-weight: 700;
	}
}
.app-task {
	cursor: pointer;
	border-radius: 10px;
	text-align: center;
	padding-bottom: 6px;
	//padding: 0 0 6px;
	&:hover {
		background-color: #f5f4f3;
	}
	&-icon {
		font-size: 32px;
		color: var(--el-color-primary);
		margin: 11px 0 10px;
	}
	&-title {
		font-size: 16px;
	}
}

.task-item {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
</style>