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

<template>
	<div class="pageWrap flex-column-page-wrap">
		<div class="flex-column-page-wrap">
			<!-- 公用搜索组件 -->
			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>

			<!--  LeTable 组件使用  -->
			<LeTable
				ref="tableRef"
				v-model:searchParams="tableOpts.searchParams"
				v-bind="tableOpts"
				v-model:curRow="tableOpts.curRow"
				v-model:checked-options="checkedColumns"
				:columns="activeColumns"
			>
				<template #toolLeft>
					<el-button type="primary">操作我申请的</el-button>
				</template>

				<template #currentNodeSlot="scope">
					<div v-if="scope.row.currentNode === 'complete'">-</div>
					<div v-else>{{ scope.row.currentNode }}</div>
				</template>

				<template #instanceStateSlot="scope">
					<el-tag v-if="scope.row.instanceState === 0" size="small" effect="plain">审批中</el-tag>
					<el-tag v-if="scope.row.instanceState === 1" size="small" type="info" effect="plain">审批通过</el-tag>
					<el-tag v-if="scope.row.instanceState === 2" size="small" type="warning" effect="plain">审批拒绝</el-tag>
					<el-tag v-if="scope.row.instanceState === 3" size="small" type="warning" effect="plain">撤销审批</el-tag>
					<el-tag v-if="scope.row.instanceState === 4" size="small" type="warning" effect="plain">超时结束</el-tag>
					<el-tag v-if="scope.row.instanceState === 5" size="small" type="warning" effect="plain">强制终止</el-tag>
				</template>

				<template #durationSlot="scope">
					<div>{{ format_milliseconds(scope.row.duration) }}</div>
				</template>

				<template #actionSlot="scope">
					<el-tooltip content="查看" placement="bottom" effect="light">
						<el-icon class="ibt0" @click="openDetail(scope.row)">
							<View />
						</el-icon>
					</el-tooltip>
				</template>
			</LeTable>
		</div>

		<message-detail v-if="visibleDetail" v-model="visibleDetail" :message-id="currentId" @closed="visibleDetail = false"> </message-detail>
	</div>
</template>
<script lang="tsx" setup>
import { processTaskPageMyApplicationApi } from '@/api/flow/processTask'
import { nextTick, ref, watch } from 'vue'
import { useTablePage } from '@/hooks/useTablePage'
import { format_milliseconds } from '@/utils'
import MessageDetail from './detail.vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
const currentId = ref(null)

// 表格搜索条件
const forms = ref([
	{
		prop: 'processName',
		label: '流程名称：',
		itemType: 'input',
		placeholder: '请输入流程名称'
	},
	{
		prop: 'createBy',
		label: '发布人：',
		itemType: 'input',
		placeholder: '请输入发布人'
	}
])

// table列表数据请求
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	try {
		const { records: list, total } = await processTaskPageMyApplicationApi(searchParams)
		tableOpts.total = total
		tableOpts.list = list
	} catch {
		console.log('获取列表数据失败')
		tableOpts.total = 0
		tableOpts.list = []
		options.loading = false // 更改加载中的 loading值
	} finally {
		options.loading = false
	}
}

// table 参数
const columns = [
	{
		prop: 'processName',
		label: '流程名称',
		minWidth: 80
	},
	{
		prop: 'currentNode',
		label: '当前所在节点',
		minWidth: 80,
		slots: {
			default: 'currentNodeSlot'
		}
	},
	{
		prop: 'instanceState',
		label: '流程状态',
		minWidth: 100,
		slots: {
			default: 'instanceStateSlot'
		}
	},
	{
		prop: 'createBy',
		label: '发起人',
		minWidth: 100
	},
	{
		prop: 'createTime',
		label: '发起时间',
		minWidth: 126
	},
	{
		prop: 'endTime',
		label: '结束时间',
		minWidth: 126
	},
	{
		prop: 'duration',
		label: '处理耗时',
		minWidth: 100,
		slots: {
			default: 'durationSlot'
		}
	},
	{
		prop: 'expireTime',
		label: '期望完成时间',
		minWidth: 126
	},
	{
		prop: 'action',
		label: '操作',
		width: 100,
		fixed: 'right',
		slots: {
			default: 'actionSlot'
		}
	}
]

const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
	{
		options: {
			showIndex: false
		},
		// 需要展示的列
		columns,
		// 控制列配置
		columnsConfig: {
			columns
		}
	},
	{
		queryList,
		fetchImmediate: false
	}
)

const openDetail = (row: any) => {
	currentId.value = row.id
	visibleDetail.value = true
}

nextTick(() => {
	queryList()
})

watch(
	() => route.query,
	(newPath, oldPath) => {
		if (JSON.stringify(newPath) !== '{}') {
			nextTick(() => {
				openDetail(newPath)
			})
		}
	},
	{ immediate: true }
)
</script>
<style scoped lang="scss">
.pageWrap {
	flex: 1;
	display: flex;
	height: 100%;
	min-height: 0;
	//background-color: #fafafa;
	background-color: var(--el-fill-color-lighter);
	//background: #fff;
}
// 单独自己写的
/*:deep(.box-card) {
	height: 100%;
	.el-card__body {
		padding: 0;
	}
}*/

// 应用的树结构样式
:deep(.menu-tree) {
	.el-tree-node__content {
		height: 36px;
	}
	.el-tree-node__content .el-tree-node__label .icon {
		margin-right: 5px;
	}
}

.nopadding {
	padding: 0px;
}
</style>