|
|
@@ -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>
|
luoyali