feat: 历史版本，签出 开发【表格待优化，签出待联调】

src/api/flow/process.ts

@@ -14,7 +14,9 @@ const api = {
 	processListNodeMap: '/v1/process/list-node-map', // 根据 id 获取节点 map 列表
 	processNodeModel: '/v1/process/node-model', // 根据 id 获取模型
 	processLaunch: '/v1/process/launch', // 发起流程
-	childProcessTop10: '/v1/process/list-child-top10' // 查询满足条件的前10条子流程列表
+	childProcessTop10: '/v1/process/list-child-top10', // 查询满足条件的前10条子流程列表
+	pageHistoryList: '/v1/process/page-history', // 历史分页列表
+	checkoutHistory: '/v1/process/checkout' // 根据Id签出历史流程
 }
 
 function progressCreateApi(data: any): AxiosPromise {
@@ -103,6 +105,31 @@ function processDetailApi(id: any): AxiosPromise {
 	})
 }
 
+// pageHistoryList: '/v1/process/page-history', // 历史分页列表
+	// checkoutHistory: '/v1/process/checkout' // 根据Id签出历史流程
+	//{
+//   "page": 0,
+//   "pageSize": 0,
+//   "data": {
+//     "processId": 0,
+//     "processName": "string"
+//   }
+// }
+function pageHistoryListApi(data: any): AxiosPromise {
+	return request({
+		url: api.pageHistoryList,
+		method: 'post',
+		data
+	})
+}
+
+function checkoutHistoryApi(id: any): AxiosPromise {
+	return request({
+		url: `${api.checkoutHistory}?id=${id}`,
+		method: 'post'
+	})
+}
+
 export default {
 	progressCreateApi,
 	progressDeleteApi,
@@ -115,5 +142,7 @@ export default {
 	processDetailApi,
 	launchProcessListApi,
 	releaseProcessApi,
-	childProcessTop10Api
+	childProcessTop10Api,
+	pageHistoryListApi,
+	checkoutHistoryApi
 }

src/views/flow/group/components/historyProcessList.vue

@@ -0,0 +1,165 @@
+<template>
+	<el-dialog v-model="visibleDialog" class="le-dialog" title="历史版本" width="700" destroy-on-close :close-on-click-modal="false">
+		<!--  LeTable 组件使用  -->
+		<LeTable
+			ref="tableRef"
+			v-model:searchParams="tableOpts.searchParams"
+			v-bind="tableOpts"
+			v-model:curRow="tableOpts.curRow"
+			: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">
+					<el-icon class="ibt0" @click="checkoutHistoryEv(scope.row)">
+						<Edit />
+					</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'])
+
+// 关闭弹窗
+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: 80,
+		slots: {
+			default: 'processIconSlot'
+		}
+	},
+	{
+		prop: 'processName',
+		label: '流程名称',
+		minWidth: 60
+	},
+	{
+		prop: 'processVersion',
+		label: '流程版本',
+		minWidth: 100,
+		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,
+			defaultExpandAll: true
+		},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+// 签出按钮操作
+const checkoutHistoryEv = async row => {
+	try {
+		await process.checkoutHistoryApi(row.processId)
+		ElMessage({ message: '签出成功', type: 'success' })
+		closeDialog()
+	} catch (e) {
+		ElMessage({ message: '签出失败', type: 'error' })
+	}
+}
+
+// 弹窗显隐
+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></style>

src/views/flow/group/components/listGroup.vue

@@ -81,6 +81,11 @@
 									<div class="group_itemSeeable">{{ element.processKey }}</div>
 									<div class="group_itemOperations">
 										<el-space wrap>
+											<el-tooltip effect="dark" content="版本控制" placement="top">
+												<el-icon :size="16" @click="historyEv(element)"><Download /></el-icon>
+											</el-tooltip>
+										</el-space>
+										<el-space wrap style="margin-left: 10px">
 											<el-tooltip effect="dark" content="编辑" placement="top">
 												<el-icon :size="16" @click="updateEv(element)"><EditPen /></el-icon>
 											</el-tooltip>
@@ -117,6 +122,9 @@
 				</div>
 			</template>
 		</draggable>
+
+		<!-- 历史流程签出 -->
+		<history-process-list v-if="visibleHistory" ref="historyDialog" v-model="visibleHistory" :process-id="currentProcessId"></history-process-list>
 	</div>
 </template>
 
@@ -130,8 +138,12 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import process from '@/api/flow/process'
 import router from '@/router'
 import { debounce, flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
+import HistoryProcessList from './historyProcessList.vue'
+
 const categoryList = ref<any[]>([])
 const hideAddInput = ref(true)
+const visibleHistory = ref(false)
+const currentProcessId = ref('')
 const listGroupName = ref('')
 const dragOptions = {
 	animation: 200,
@@ -283,6 +295,12 @@ const updateEv = async (element: any) => {
 	router.push(`${jumpRouterUrl}?id=${element.processId}`)
 }
 
+// 打开当前流程的历史版本
+const historyEv = (element: any) => {
+	currentProcessId.value = element.processId
+	visibleHistory.value = !visibleHistory.value
+}
+
 // keep-alive缓存树，防止创建完流程过后，回到当前窗口未刷新
 onActivated(() => {
 	flowGroupListAll()