feat: 前端修正一些细节

src/views/demo/video2image/index.vue

@@ -64,7 +64,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
 import FormDialog from '@/components/FormDialog/index.vue'
-import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import { ProTableInstance, ColumnProps, EnumProps } from '@/components/ProTable/interface'
 import {
   listVideo2imageApi,
   delVideo2imageApi,
@@ -148,6 +148,33 @@ const openDialog = async (type: number, title: string, row?: any) => {
   formDialogRef.value?.openDialog(params)
 }
 
+const statusEnums: EnumProps[] = [
+  {
+    label: '未开始',
+    value: '0',
+    disabled: false,
+    tagType: 'default'
+  },
+  {
+    label: '进行中',
+    value: '1',
+    disabled: false,
+    tagType: 'primary'
+  },
+  {
+    label: '已结束',
+    value: '2',
+    disabled: false,
+    tagType: 'success'
+  },
+  {
+    label: '失败',
+    value: '3',
+    disabled: false,
+    tagType: 'danger'
+  }
+]
+
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
@@ -166,7 +193,9 @@ const columns = reactive<ColumnProps<any>[]>([
     search: {
       el: 'input'
     },
-    width: 120
+    width: 120,
+    tag: true,
+    enum: statusEnums
   },
   {
     prop: 'outPath',

src/views/demo/videoStable/index.vue

@@ -53,7 +53,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
 import FormDialog from '@/components/FormDialog/index.vue'
-import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import { ProTableInstance, ColumnProps, EnumProps } from '@/components/ProTable/interface'
 import {
   listVideoStableApi,
   delVideoStableApi,
@@ -163,6 +163,32 @@ const openDialog = async (type: number, title: string, row?: any) => {
   }
   formDialogRef.value?.openDialog(params)
 }
+const statusEnums: EnumProps[] = [
+  {
+    label: '未开始',
+    value: '0',
+    disabled: false,
+    tagType: 'default'
+  },
+  {
+    label: '进行中',
+    value: '1',
+    disabled: false,
+    tagType: 'primary'
+  },
+  {
+    label: '已结束',
+    value: '2',
+    disabled: false,
+    tagType: 'success'
+  },
+  {
+    label: '失败',
+    value: '3',
+    disabled: false,
+    tagType: 'danger'
+  }
+]
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
@@ -178,11 +204,13 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   {
     prop: 'status',
-    label: '任务状态 0未开始 1进行中 2已结束',
+    label: '任务状态',
     search: {
       el: 'input'
     },
-    width: 120
+    width: 120,
+    tag: true,
+    enum: statusEnums
   },
   {
     prop: 'inPath',
@@ -205,7 +233,10 @@ const columns = reactive<ColumnProps<any>[]>([
     label: '开始时间',
     search: {
       el: 'date-picker',
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+      props: {
+        type: 'datetimerange',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
     },
     width: 120
   },
@@ -214,7 +245,10 @@ const columns = reactive<ColumnProps<any>[]>([
     label: '结束时间',
     search: {
       el: 'date-picker',
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+      props: {
+        type: 'datetimerange',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
     },
     width: 120
   },
@@ -242,7 +276,12 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 120
   },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+  {
+    prop: 'operation',
+    label: '操作',
+    width: 230,
+    fixed: 'right'
+  }
 ])
 // 表单配置项
 let itemsOptions: ProForm.ItemsOptions[] = []