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

package.json

@@ -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",

pnpm-lock.yaml

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

src/service/api/workflow.ts

@@ -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'
+  });
+}

src/views/workflow/task/index.vue

@@ -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) {
+async function  showVer(id: string){
-//   router.push({ path: '/workflow/batch', state: { workflowId: id } });
+  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>