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

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listVideoStableApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['demo:videoStable:add']" icon="CirclePlus" @click="openDialog(1, '视频去抖动新增')"> 新增 </el-button>
        <el-button type="primary" v-auth="['demo:videoStable:import']" icon="Upload" plain @click="batchAdd"> 导入</el-button>
        <el-button type="primary" v-auth="['demo:videoStable:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button>
        <el-button
          type="danger"
          v-auth="['demo:videoStable:remove']"
          icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link icon="View" @click="startVideoStable(scope.row)" v-if="scope.row.status !== '2'"> 开始去抖动 </el-button>
        <el-button type="primary" link icon="View" @click="compareVideoStable(scope.row)" v-if="scope.row.status == '2'"> 图片对比 </el-button>
        <el-button type="primary" link icon="View" v-auth="['demo:videoStable:query']" @click="openDialog(3, '视频去抖动查看', scope.row)">
          查看
        </el-button>
        <el-button type="primary" link icon="EditPen" v-auth="['demo:videoStable:edit']" @click="openDialog(2, '视频去抖动编辑', scope.row)">
          编辑
        </el-button>
        <el-button type="primary" link icon="Delete" v-auth="['demo:videoStable:remove']" @click="deleteVideoStable(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="VideoStable">
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 } from '@/components/ProTable/interface'
import {
  listVideoStableApi,
  delVideoStableApi,
  addVideoStableApi,
  updateVideoStableApi,
  importTemplateApi,
  importVideoStableDataApi,
  exportVideoStableApi,
  getVideoStableApi,
  startVideoStableApi
} from '@/api/modules/demo/videoStable'

const startVideoStable = async (params: any) => {
  const res = await startVideoStableApi(params.id)
  if (res.code === 200) {
    ElMessage.success('开始去抖动成功')
    proTable.value?.getTableList()
  } else {
    ElMessage.error('开始去抖动失败')
  }
}
const compareVideoStable = (params: any) => {}

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

// 删除视频去抖动信息
const deleteVideoStable = async (params: any) => {
  await useHandleData(delVideoStableApi, params.id, '删除【' + params.id + '】视频去抖动')
  proTable.value?.getTableList()
}

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

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

// 批量添加视频去抖动
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '视频去抖动',
    tempApi: importTemplateApi,
    importApi: importVideoStableDataApi,
    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 getVideoStableApi(row?.id || null)
  }
  // 重置表单
  setItemsOptions()
  const params = {
    title,
    width: 580,
    isEdit: type !== 3,
    itemsOptions: itemsOptions,
    model: type == 1 ? {} : res.data,
    api: type == 1 ? addVideoStableApi : updateVideoStableApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

// 表格配置项
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: '任务状态 0未开始 1进行中 2已结束',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'inPath',
    label: '输入图片集路径',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    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: '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: 'inPath',
      rules: [{ required: true, message: '输入图片集路径不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容'
      }
    },
    {
      label: '输出路径',
      prop: 'outPath',
      rules: [{ required: true, message: '去抖动的图片集路径不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容'
      }
    },
    {
      label: '备注',
      prop: 'remarks',
      rules: [
        {
          required: false,
          message: '备注不能为空',
          trigger: 'blur'
        }
      ],
      compOptions: {
        placeholder: '请输入备注'
      }
    },
    {
      label: 'block_size',
      prop: 'block_size',
      rules: [{ required: true, message: 'block_size不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 50
      }
    },
    {
      label: 'radius',
      prop: 'radius',
      rules: [{ required: true, message: 'radius不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容',
        value: 500
      }
    },
    {
      label: 'buffer_size',
      prop: 'buffer_size',
      rules: [{ required: true, message: 'buffer_size不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容',
        value: 200
      }
    },
    {
      label: 'cornerquality',
      prop: 'cornerquality',
      rules: [{ required: true, message: 'cornerquality不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容',
        value: 0.2
      }
    },
    {
      label: 'cornerminDistance',
      prop: 'cornerminDistance',
      rules: [{ required: true, message: 'cornerminDistance不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容',
        value: 5
      }
    },
    {
      label: 'lklevel',
      prop: 'lklevel',
      rules: [{ required: true, message: 'lklevel不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容',
        value: 3
      }
    },
    {
      label: 'lkwinSiz',
      prop: 'lkwinSiz',
      rules: [{ required: true, message: 'lkwinSiz不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'block_size',
        clearable: true,
        placeholder: '请输入内容',
        value: 15
      }
    }
  ]
}
</script>