table优化

src/views/final/comp/ListAction.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { type PropType, computed } from 'vue'
+
+const props = defineProps({
+  status: {
+    type: Number,
+    required: true,
+  },
+  trigger: {
+    type: Function as PropType<Function>,
+    default: () => { },
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+})
+
+const actionConfig = {
+  2: [{ label: '查看', key: 'view' }, { label: '通过', key: 'approval' }, { label: '不通过', key: 'reject' }],
+  3: [{ label: '查看', key: 'view' }],
+  5: [{ label: '查看', key: 'view' }],
+}
+
+const actions = computed(() => {
+  return actionConfig[props.status]
+})
+</script>
+
+<template>
+  <div :data-id="id">
+    <n-button
+      v-for="(action, index) in actions" :key="index" class="normal"
+      :class="{ gap: index !== 0, reject: index === 1 }" text @click="(trigger(action) as any)"
+    >
+      {{ action.label }}
+    </n-button>
+  </div>
+</template>
+
+<style scoped>
+.normal {
+  color: blue
+}
+
+.gap {
+  margin-left: 15px;
+}
+
+.reject {
+  color: red;
+}
+</style>

src/views/final/comp/StatusItem.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+const props = defineProps({
+  status: {
+    type: Number,
+    required: true,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="wrap">
+    <div
+      :class="{
+        'point-green': props.status === 3,
+        'point-orange': props.status === 2 || props.status === 1,
+        'point-red': props.status === 5,
+      }" class="point"
+    />{{ props.label }}
+  </div>
+</template>
+
+<style scoped lang="less">
+.wrap {
+  display: flex;
+  align-items: center;
+}
+
+.point{
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 8px;
+
+  &-green{
+    background: #02c984;
+  }
+
+  &-orange{
+    background: #fe9800;
+  }
+
+  &-red{
+    background: #FF4E4F;
+  }
+}
+</style>

src/views/final/comp/index.ts

@@ -3,9 +3,12 @@ import ImportExcelModal from './ImportExcelModal.vue'
 import RepeatModal from './RepeatModal.vue'
 import RepeatTaskTableModal from './RepeatTaskTableModal.vue'
 import Action from './Action.vue'
+import ListAction from './ListAction.vue'
+import StatusItem from './StatusItem.vue'
+
 import RejectModal from './RejectModal.vue'
 import CustomFilterModalVue from './CustomFilterModalVue.vue'
 import FilterModal from './FilterModal.vue'
 import NewFilterModal from './NewFilterModal.vue'
 
-export { CustomTabelModal, ImportExcelModal, RepeatModal, RepeatTaskTableModal, Action, RejectModal, CustomFilterModalVue, FilterModal, NewFilterModal }
+export { CustomTabelModal, ImportExcelModal, RepeatModal, RepeatTaskTableModal, Action, RejectModal, CustomFilterModalVue, FilterModal, NewFilterModal, ListAction, StatusItem }

src/views/final/content/Content.vue

@@ -18,8 +18,10 @@ import {
   Action,
   CustomTabelModal,
   ImportExcelModal,
+  ListAction,
   RepeatModal,
   RepeatTaskTableModal,
+  StatusItem,
 } from '../comp'
 import { getFinalList } from '@/api/final'
 import { audit } from '@/api/task/task'
@@ -47,7 +49,7 @@ const actionsColumns = {
   minWidth: 200,
   fixed: 'right',
   render(row) {
-    return h(Action, {
+    return h(ListAction, {
       id: row.id,
       status: row.states,
       trigger: (action) => {
@@ -227,7 +229,7 @@ async function formatColumns() {
       title: '审批状态',
       key: columnsRef.value[index].key,
       fixed: columnsRef.value[index].fixed || undefined,
-      width: 100,
+      width: 120,
       sorter: 'default',
       renderSorterIcon: ({ order }) => {
         if (order === false)
@@ -237,11 +239,15 @@ async function formatColumns() {
         if (order === 'descend')
           return h(SvgIcon, { name: 'sort-3' })
       },
-      render(row: any) {
+      render(row) {
         const item: any = izstatusList.value.find(
           (item: any) => item.value == row.states,
         )
-        return item ? item.label : ''
+        return h(StatusItem, {
+          id: row.id,
+          status: row.states,
+          label: item ? item.label : '',
+        })
       },
     }
   }
@@ -262,7 +268,7 @@ async function formatColumns() {
           return h(SvgIcon, { name: 'sort-3' })
       },
       render(row: any) {
-        return row.similarityscore ? `${row.similarityscore}%` : ''
+        return row.similarityscore ? `<span></span>${row.similarityscore}%` : ''
       },
     }
   }