工作流列表页增加版本信息++

This commit is contained in:
zhuangdashia 2025-06-19 14:25:48 +08:00
parent e0e608e329
commit 55c9130d18
4 changed files with 206 additions and 7 deletions

View File

@ -57,6 +57,7 @@
"@sa/hooks": "workspace:*",
"@sa/materials": "workspace:*",
"@sa/utils": "workspace:*",
"@vicons/fluent": "^0.13.0",
"@vueuse/core": "12.5.0",
"clipboard": "2.0.11",
"dayjs": "1.11.13",

View File

@ -41,6 +41,9 @@ importers:
'@sa/utils':
specifier: workspace:*
version: link:packages/utils
'@vicons/fluent':
specifier: ^0.13.0
version: 0.13.0
'@vueuse/core':
specifier: 12.5.0
version: 12.5.0(typescript@5.7.3)
@ -1639,6 +1642,9 @@ packages:
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
'@vicons/fluent@0.13.0':
resolution: {integrity: sha512-bYGZsOE3qzvm3Cm43e7tybgGlr5ZUpYqtRZq0g0Tfupe8jIzLolpvQLNUt1zS8Mgt6goTbUk5YH7Fkv16jkykg==}
'@vitejs/plugin-vue-jsx@4.1.1':
resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
engines: {node: ^18.0.0 || >=20.0.0}
@ -6350,6 +6356,8 @@ snapshots:
- supports-color
- vue
'@vicons/fluent@0.13.0': {}
'@vitejs/plugin-vue-jsx@4.1.1(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(sass@1.84.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
dependencies:
'@babel/core': 7.26.0

View File

@ -158,3 +158,10 @@ export function fetchWorkflowHistoryDetail(id: string, version: string) {
method: 'get'
});
}
export function fetchDeleteWorkflowHistory(id: string ,version: string) {
return request({
url: `/workflow/history/del/${id}?version=${version}`,
method: 'get'
});
}

View File

@ -1,9 +1,16 @@
<script setup lang="tsx">
import { NButton, NDropdown, NPopconfirm, NTag } from 'naive-ui';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import {ref, h} from 'vue';
import { useBoolean } from '@sa/hooks';
import { fetchBatchDeleteWorkflow, fetchGetWorkflowPageList, fetchUpdateWorkflowStatus } from '@/service/api';
import {
fetchBatchDeleteWorkflow,
fetchDeleteWorkflowHistory,
fetchGetWorkflowPageList,
fetchUpdateWorkflowStatus, fetchWorkflowHistory
} from '@/service/api';
import index from "@/views/namespace/index.vue";
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
@ -15,7 +22,9 @@ import { downloadFetch } from '@/utils/download';
import { useRouterPush } from '@/hooks/common/router';
import WorkflowSearch from './modules/workflow-search.vue';
import WorkflowTriggerModal from './modules/workflow-trigger-modal.vue';
// import { DeleteTwotone } from '@vicons'
import Delete24Regular from '@vicons/fluent/Delete24Regular'
import BookSearch20Regular from '@vicons/fluent/BookSearch20Regular'
const { hasAuth } = useAuth();
const router = useRouter();
@ -24,7 +33,90 @@ const { routerPushByKey } = useRouterPush();
const triggerData = ref<Api.Workflow.Workflow | null>();
const { bool: triggerVisible, setTrue: openTriggerModal } = useBoolean(false);
const showModal = ref(false);
const bodyStyle = ref({
width: '900px'
});
const verData = ref();
const rowClassName = (row:any) => {
console.log(row);
return row.version === 0 ? 'current-version-row' : ''
}
const pagination= ref(
{
pageSize: 5
}
)
const verColumns = ref([
{
key: 'id',
title: $t('common.index'),
align: 'center',
width: 120
},
{
key: 'version',
title: '版本',
align: 'center',
width: 120,
// render: (row) => `v${row.version}`
render(row:any,index:any) {
return h('div', {
class: index === 0 ? 'brush-mark' : '',
style: { display: 'inline-block' }
}, `v${row.version}`)
}
},
{
key: 'workflowName',
title: '描述',
align: 'center',
width: 120
},
{
key: 'createDt',
title: '创建时间',
align: 'center',
width: 120
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
fixed: 'right',
width: 200,
render: (row:any, { index:any }) => {
console.log(index)
return (
<div class="flex-center gap-8px">
<NButton text type="warning" ghost size="small" onClick={() => detail(row.id!)}>
<n-icon size="26" color="#0e7a0d">
<BookSearch20Regular />
</n-icon>
</NButton>
<n-divider vertical />
<div class="flex-center">
<NPopconfirm onPositiveClick={() => handleDeleteVer(row.id,row.version)} >
{{
default: () => $t('common.confirmDelete'),
trigger: () => (
<NButton quaternary type="error" size="small" disabled={!row || index === undefined}>
<n-icon size="26" color="#0e7a0d">
<Delete24Regular />
</n-icon>
</NButton>
)
}}
</NPopconfirm>
</div>
</div>
);
}
}
]);
const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
apiFn: fetchGetWorkflowPageList,
apiParams: {
@ -170,6 +262,16 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
</NPopconfirm>
</div>
)
},
{
type: 'divider',
key: 'd2'
},
{
// type:'render',
label: '版本',
key: 'version',
click: () => showVer(row.id!)
}
];
@ -228,6 +330,16 @@ async function handleDelete(id: string) {
onDeleted();
}
async function handleDeleteVer(id: string,version:string){
// request
const { error } = await fetchDeleteWorkflowHistory(id,version);
if (!error){
const { data, error } = await fetchWorkflowHistory(id);
verData.value = data
} return;
}
function edit(id: string) {
router.push({ path: '/workflow/form/edit', query: { id } });
}
@ -244,9 +356,25 @@ function copy(id: string) {
router.push({ path: '/workflow/form/copy', query: { id } });
}
// function batch(id: string) {
// router.push({ path: '/workflow/batch', state: { workflowId: id } });
// }
async function showVer(id: string){
console.log(id);
showModal.value = true;
console.log(showModal.value)
const { data, error } = await fetchWorkflowHistory(id);
if (!error) {
verData.value = data
console.log("verData"+verData.value)
} else {
window.$message?.error('获取工作流历史版本失败');
}
//
}
function dispVer(){
// showModal.value = false;
}
async function execute(row: Api.Workflow.Workflow) {
triggerData.value = row;
@ -326,9 +454,64 @@ function goToBatch(workflowId: string) {
:pagination="mobilePagination"
class="sm:h-full"
/>
<n-modal
v-model:show="showModal"
class="custom-card"
preset="card"
title="版本信息"
size="huge"
:bordered="false"
:style="bodyStyle"
>
<template #header-extra>
</template>
<n-data-table
size="small"
:columns="verColumns"
:data="verData"
:row-props:any="rowClassName"
:pagination="pagination"
/>
<template #footer>
<!-- <n-flex justify="end">-->
<!-- <n-button strong secondary round type="info" :on-click="dispVer()">-->
<!-- 关闭-->
<!-- </n-button>-->
<!-- </n-flex>-->
</template>
</n-modal>
</NCard>
<WorkflowTriggerModal v-model:visible="triggerVisible" :row-data="triggerData" />
</div>
</template>
<style scoped></style>
<style scoped>
:deep(.brush-mark) {
position: relative;
z-index: 1;
padding: 0 2px;
}
:deep(.brush-mark::after) {
content: '';
position: absolute;
left: -27px;
bottom: 2px;
width: 80px ;
height: 24px;
background: linear-gradient(
90deg,
rgba(255, 165, 0, 0.2),
rgba(255, 165, 0, 0.5) 50%,
rgba(255, 165, 0, 0.2)
);
z-index: -1;
transform: rotate(-1deg) skewX(-10deg);
border-radius: 3px;
}
:deep(.current-version-row td) {
background-color: #fff8e6;
font-weight: 500;
}
</style>