aizuda-web-vue3/src/views/flow/group/components/historyProcessList.vue

<template>
	<el-dialog v-model="visibleDialog" class="le-dialog" title="历史版本" width="860" destroy-on-close :close-on-click-modal="false">
		<!--  LeTable 组件使用  -->
		<LeTable
			v-model:searchParams="tableOpts.searchParams"
			v-bind="tableOpts"
			v-model:curRow="tableOpts.curRow"
			class="local_table"
			:columns="activeColumns"
		>
			<template #processIconSlot="scope">
				<LeIcon class="group_itemIcon" :icon-class="`${flowIconPrefix}${scope.row.processIcon}`" />
			</template>

			<template #processVersionSlot="scope">
				<el-tag round>V{{ scope.row.processVersion }}</el-tag>
			</template>

			<template #actionSlot="scope">
				<el-tooltip content="签出" placement="bottom" effect="light">
					<span>
						<el-popconfirm title="确定签出 ?" @confirm="checkoutHistoryEv(scope.row)">
							<template #reference>
								<el-icon class="ibt0"><Cherry /></el-icon>
							</template>
						</el-popconfirm>
					</span>
				</el-tooltip>
				<el-divider direction="vertical"></el-divider>
				<el-tooltip content="预览" placement="bottom" effect="light">
					<el-icon class="ibt0">
						<View />
					</el-icon>
				</el-tooltip>
			</template>
		</LeTable>
	</el-dialog>
</template>

<script setup>
import { computed, watch } from 'vue'
import process from '@/api/flow/process'
import { useTablePage } from '@/hooks/useTablePage'
import { flowIconPrefix } from '@/utils/index'
import { ElMessage } from 'element-plus'
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	processId: {
		type: String,
		default: undefined
	}
})

// 同步值
const $myEmit = defineEmits(['update:modelValue', 'successFn'])

// 关闭弹窗
const closeDialog = () => {
	$myEmit('update:modelValue', false)
}

// 获取历史版本 table
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	try {
		const { records: list, total } = await process.pageHistoryListApi({ ...searchParams, data: { processId: props.processId } })
		tableOpts.total = total
		tableOpts.list = list
	} catch {
		tableOpts.total = 0
		tableOpts.list = []
		options.loading = false // 更改加载中的 loading值
	} finally {
		options.loading = false
	}
}

// table 参数
const columns = [
	{
		prop: 'processIcon',
		label: '图标',
		minWidth: 20,
		slots: {
			default: 'processIconSlot'
		}
	},
	{
		prop: 'processName',
		label: '流程名称',
		minWidth: 100
	},
	{
		prop: 'processVersion',
		label: '流程版本',
		minWidth: 30,
		slots: {
			default: 'processVersionSlot'
		}
	},
	{
		prop: 'remark',
		label: '备注',
		minWidth: 100
	},
	{
		prop: 'action',
		label: '操作',
		width: 100,
		fixed: 'right',
		slots: {
			default: 'actionSlot'
		}
	}
]

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

// 签出按钮操作
const checkoutHistoryEv = async row => {
	try {
		await process.checkoutHistoryApi(row.id)
		ElMessage({ message: '签出成功', type: 'success' })
		closeDialog()
		$myEmit('successFn')
	} catch (e) {}
}

// 弹窗显隐
const visibleDialog = computed({
	get() {
		return props.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})

watch(
	() => visibleDialog.value,
	val => {
		console.log(val)
		if (val) {
			queryList()
		}
	},
	{
		immediate: true
	}
)
</script>

<style lang="scss" scoped>
.local_table {
	padding: 0;
	:deep(.tableBody) {
		.toolBarWrap {
			display: none;
		}
	}
}
</style>