aizuda-web-vue3/src/views/flow/instance/index.vue

<template>
	<div class="pageWrap">
		<div class="content-warp 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>
					<el-button type="primary">定位</el-button>
					<el-button type="primary">激活</el-button>
					<el-button type="primary">挂起</el-button>
					<el-button type="danger">作废</el-button>
				</template>

				<template #identificationSlot="scope">
					<el-dropdown>
						<span class="el-dropdown-link">
							{{ scope.row.name }}
							<el-icon class="el-icon--right">
								<ArrowDown />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="test1Ev">审批流</el-dropdown-item>
								<el-dropdown-item @click="test2Ev">详情</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>

				<template #statusSlot="scope">
					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
					<status-indicator v-else pulse type="danger"></status-indicator>
				</template>
			</LeTable>
		</div>

		<instance-detail v-if="detailVisibile" v-model="detailVisibile"></instance-detail>
	</div>
</template>
<script lang="tsx" setup name="flow_instance">
import app from '@/api/system/app'
import { nextTick, ref } from 'vue'
import { useTablePage } from '@/hooks/useTablePage'
import StatusIndicator from '@/components/StatusIndicator'
import { ArrowDown } from '@element-plus/icons-vue'
import InstanceDetail from './instance-detail.vue'

const detailVisibile = ref(false)
// 表格搜索条件
const forms = ref([
	{
		prop: 'keyword',
		label: '审批标题：',
		itemType: 'input',
		placeholder: '请输入审批标题'
	},
	{
		prop: 'keyword',
		label: '单据名称：',
		itemType: 'input',
		placeholder: '请输入单据名称'
	},
	{
		prop: 'keyword',
		label: '类型：',
		itemType: 'input',
		placeholder: '请输入类型'
	}
])

// table列表数据请求
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	try {
		const { records: list, total } = await app.appPageApi(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: 'name',
		label: '审批标题',
		minWidth: 150,

		showOverflowTooltip: true,
		slots: {
			default: 'identificationSlot'
		}
	},
	{
		prop: 'name1',
		label: '单据名称',
		minWidth: 100
	},
	{
		prop: 'secretKey',
		label: '类型',
		minWidth: 100
	},
	{
		prop: 'sort',
		label: '子类型',
		minWidth: 80
	},
	{
		prop: 'sort1',
		label: '机构',
		minWidth: 80
	},
	{
		prop: 'sort2',
		label: '岗位',
		minWidth: 80
	},
	{
		prop: 'sort3',
		label: '提交人',
		minWidth: 80
	},
	{
		prop: 'sort4',
		label: '代理人',
		minWidth: 80
	},
	{
		prop: 'sort5',
		label: '发起时间',
		minWidth: 80
	},
	{
		prop: 'sort6',
		label: '完成时间',
		minWidth: 80
	},
	{
		prop: 'status',
		label: '流程状态',
		minWidth: 50,
		slots: {
			default: 'statusSlot'
		}
	},
	{
		prop: 'sort7',
		label: '流程版本',
		minWidth: 80
	}
]

const test1Ev = () => {
	detailVisibile.value = true
}

const test2Ev = () => {}

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

nextTick(() => {
	queryList()
})
</script>
<style scoped lang="scss">
.pageWrap {
	flex: 1;
	display: flex;
	height: 100%;
	//background: #fff;
}
.content-warp {
	flex: 1;
	//width: calc(100% - 250px);
	width: calc(100% - 210px);
}
// 单独自己写的
/*: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>