feat: 视频转图片前端优化

src/api/modules/demo/video2image.ts

@@ -85,6 +85,14 @@ export const startVideo2imageApi = (id: string | number) => {
   return http.get('/demo/video2image/start/' + id)
 }
 
+/**
+ * @name 终止视频转图片
+ * @returns returns
+ */
+export const stopVideo2imageApi = (id: string | number) => {
+  return http.get('/demo/video2image/stop/' + id)
+}
+
 /**
  * @name 下载压缩包
  * @returns returns

src/views/demo/video2image/index.vue

@@ -12,8 +12,8 @@
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
         <el-button type="primary" v-auth="['demo:video2image:add']" icon="CirclePlus" @click="openDialog(1, '新增')"> 新增 </el-button>
-        <el-button type="primary" v-auth="['demo:video2image:import']" icon="Upload" plain @click="batchAdd" v-if="false"> 导入 </el-button>
-        <el-button type="primary" v-auth="['demo:video2image:export']" icon="Download" plain @click="downloadFile" v-if="false"> 导出 </el-button>
+        <!-- <el-button type="primary" v-auth="['demo:video2image:import']" icon="Upload" plain @click="batchAdd" v-if="false"> 导入 </el-button>
+        <el-button type="primary" v-auth="['demo:video2image:export']" icon="Download" plain @click="downloadFile" v-if="false"> 导出 </el-button> -->
         <el-button
           type="danger"
           v-auth="['demo:video2image:remove']"
@@ -33,10 +33,15 @@
           icon="View"
           v-auth="['demo:video2image:start']"
           @click="startVideo2image(scope.row)"
-          v-if="scope.row.status !== '2'"
+          v-if="scope.row.status == '0' || scope.row.status == '3'"
         >
-          图片提取
+          开始
         </el-button>
+        <el-popconfirm title="确定终止此任务吗?" @confirm="stopVideo2image(scope.row)" v-if="scope.row.status == '1'">
+          <template #reference>
+            <el-button type="primary" link icon="Delete"> 终止 </el-button>
+          </template>
+        </el-popconfirm>
         <el-button
           type="primary"
           link
@@ -45,10 +50,10 @@
           @click="dowloadVideo2image(scope.row)"
           v-if="scope.row.status == '2'"
         >
-          下载图片
+          下载
         </el-button>
-        <el-button type="primary" link icon="View" v-auth="['demo:video2image:query']" @click="openDialog(3, '查看', scope.row)"> 查看 </el-button>
-        <el-button type="primary" link icon="EditPen" v-auth="['demo:video2image:edit']" @click="openDialog(2, '编辑', scope.row)"> 编辑 </el-button>
+        <!-- <el-button type="primary" link icon="View" v-auth="['demo:video2image:query']" @click="openDialog(3, '查看', scope.row)"> 查看 </el-button>
+        <el-button type="primary" link icon="EditPen" v-auth="['demo:video2image:edit']" @click="openDialog(2, '编辑', scope.row)"> 编辑 </el-button> -->
         <el-button type="primary" link icon="Delete" v-auth="['demo:video2image:remove']" @click="deleteVideo2image(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
@@ -81,13 +86,26 @@ import {
 const startVideo2image = async (params: any) => {
   const res = await startVideo2imageApi(params.id)
   if (res.code === 200) {
-    ElMessage.success('开始视频转图片已经开始，请等待完成！')
+    ElMessage.success('任务已开始，请等待完成！')
   } else {
-    ElMessage.error('开始视频转图片开始失败，请检查！')
+    ElMessage.error('任务开始失败，请检查！')
   }
   proTable.value?.getTableList()
 }
 
+const stopVideo2image = async (params: any) => {
+  const res = await ElMessageBox.confirm('是否确认中止该任务？')
+  if (res) {
+    const res = await stopVideo2imageApi(params.id)
+    if (res.code === 200) {
+      ElMessage.success('终止任务成功！')
+    } else {
+      ElMessage.error('终止任务失败，请检查！')
+    }
+    proTable.value?.getTableList()
+  }
+}
+
 const dowloadVideo2image = async (params: any) => {
   await useDownload(downloadVideo2imageApi, params.name, params.id, true, '.zip')
 }
@@ -179,31 +197,27 @@ const statusEnums: EnumProps[] = [
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
-  { prop: 'id', label: '主键ID' },
+  { prop: 'id', label: '主键ID', width: 180 },
   {
     prop: 'name',
-    label: '视频名称',
+    label: '任务名称',
     search: {
       el: 'input'
     },
-    width: 120
+    width: 150
   },
   {
     prop: 'status',
     label: '任务状态',
     search: {
-      el: 'input'
+      el: 'select'
     },
-    width: 120,
     tag: true,
     enum: statusEnums
   },
   {
     prop: 'outPath',
-    label: '切割好的图片的保存路径',
-    search: {
-      el: 'input'
-    },
+    label: '输出路径',
     width: 120
   },
   {
@@ -213,7 +227,7 @@ const columns = reactive<ColumnProps<any>[]>([
       el: 'date-picker',
       props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
     },
-    width: 120
+    width: 180
   },
   {
     prop: 'endTime',
@@ -222,22 +236,16 @@ const columns = reactive<ColumnProps<any>[]>([
       el: 'date-picker',
       props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
     },
-    width: 120
+    width: 180
   },
   {
     prop: 'costSecond',
     label: '耗时',
-    search: {
-      el: 'input'
-    },
     width: 120
   },
   {
     prop: 'log',
     label: '日志',
-    search: {
-      el: 'input'
-    },
     width: 120
   },
   {
@@ -250,15 +258,12 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   {
     prop: 'path',
-    label: '视频本身保存路径',
-    search: {
-      el: 'input'
-    },
-    width: 120
+    label: '视频路径',
+    width: 150
   },
   {
     prop: 'fps',
-    label: '切割帧率，默认1',
+    label: '切割帧率',
     search: {
       el: 'input'
     },
@@ -271,11 +276,11 @@ let itemsOptions: ProForm.ItemsOptions[] = []
 const setItemsOptions = () => {
   itemsOptions = [
     {
-      label: '视频名称',
+      label: '任务名称',
       prop: 'name',
-      rules: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
+      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入视频名称'
+        placeholder: '请输入任务名称'
       }
     },
     {