taais-web/src/views/demo/video2image/index.vue

<!--
  @Datetime : 2024/8/30 17:42
  @Author   : WANGKANG
  @Email    : 1686617586@qq.com
  @Blog     :
  @File     : index.vue.vue
  @brief    : 视频转图片
-->
<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listVideo2imageApi">
      <!-- 表格 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="danger"
          v-auth="['demo:video2image:remove']"
          icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button
          type="primary"
          link
          icon="View"
          v-auth="['demo:video2image:start']"
          @click="startVideo2image(scope.row)"
          v-if="scope.row.status !== '2'"
        >
          图片提取
        </el-button>
        <el-button
          type="primary"
          link
          icon="View"
          v-auth="['demo:video2image:download']"
          @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="Delete" v-auth="['demo:video2image:remove']" @click="deleteVideo2image(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef"></FormDialog>
  </div>
</template>

<script setup lang="tsx" name="Video2image">
import { ref, reactive } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
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, EnumProps } from '@/components/ProTable/interface'
import {
  listVideo2imageApi,
  delVideo2imageApi,
  addVideo2imageApi,
  updateVideo2imageApi,
  importTemplateApi,
  importVideo2imageDataApi,
  exportVideo2imageApi,
  getVideo2imageApi,
  startVideo2imageApi,
  downloadVideo2imageApi
} from '@/api/modules/demo/video2image'

const startVideo2image = async (params: any) => {
  const res = await startVideo2imageApi(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')
}

// ProTable 实例
const proTable = ref<ProTableInstance>()

// 删除视频转图片信息
const deleteVideo2image = async (params: any) => {
  await useHandleData(delVideo2imageApi, params.id, '删除【' + params.id + '】视频转图片')
  proTable.value?.getTableList()
}

// 批量删除视频转图片信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delVideo2imageApi, ids, '删除所选视频转图片信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 导出视频转图片列表
const downloadFile = async () => {
  ElMessageBox.confirm('确认导出视频转图片数据?', '温馨提示', { type: 'warning' }).then(() =>
    useDownload(exportVideo2imageApi, '视频转图片列表', proTable.value?.searchParam)
  )
}

// 批量添加视频转图片
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '视频转图片',
    tempApi: importTemplateApi,
    importApi: importVideo2imageDataApi,
    getTableList: proTable.value?.getTableList
  }
  dialogRef.value?.acceptParams(params)
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  let res = { data: {} }
  if (row?.id) {
    res = await getVideo2imageApi(row?.id || null)
  }
  // 重置表单
  setItemsOptions()
  const params = {
    title,
    width: 580,
    isEdit: type !== 3,
    itemsOptions: itemsOptions,
    model: type == 1 ? {} : res.data,
    api: type == 1 ? addVideo2imageApi : updateVideo2imageApi,
    getTableList: proTable.value?.getTableList,
    showVideoUpload: type == 1 ? true : false
  }
  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 },
  { prop: 'id', label: '主键ID' },
  {
    prop: 'name',
    label: '视频名称',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'status',
    label: '任务状态',
    search: {
      el: 'input'
    },
    width: 120,
    tag: true,
    enum: statusEnums
  },
  {
    prop: 'outPath',
    label: '切割好的图片的保存路径',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'startTime',
    label: '开始时间',
    search: {
      el: 'date-picker',
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    },
    width: 120
  },
  {
    prop: 'endTime',
    label: '结束时间',
    search: {
      el: 'date-picker',
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    },
    width: 120
  },
  {
    prop: 'costSecond',
    label: '耗时',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'log',
    label: '日志',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'remarks',
    label: '备注',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'path',
    label: '视频本身保存路径',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'fps',
    label: '切割帧率，默认1',
    search: {
      el: 'input'
    },
    width: 120
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
// 表单配置项
let itemsOptions: ProForm.ItemsOptions[] = []
const setItemsOptions = () => {
  itemsOptions = [
    {
      label: '视频名称',
      prop: 'name',
      rules: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入视频名称'
      }
    },
    {
      label: '切割帧率',
      prop: 'fps',
      rules: [
        { required: true, message: '切割帧率不能为空', trigger: 'blur' }
        // {
        //   type: 'number',
        //   message: '切割帧率必须为数字',
        //   trigger: 'blur'
        // },
        // { min: 1, message: '切割帧率必须大于等于1', trigger: 'blur' },
        // { max: 60, message: '切割帧率必须小于等于60', trigger: 'blur' }
      ],
      compOptions: {
        type: 'number',
        placeholder: '请输入切割帧率，范围：1-60'
      }
    },
    {
      label: '上传视频',
      prop: 'inputOssId',
      rules: [{ required: false, message: '视频不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'file-upload',
        fileSize: 4096,
        fileType: ['mp4', 'avi', 'rmvb', 'mov', 'wmv', 'flv'],
        placeholder: '请上传视频文件'
      }
    },
    {
      label: '备注',
      prop: 'remarks',
      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入备注'
      }
    }
  ]
}
</script>

<style scoped></style>