taais/src/views/demo/DataSeq/index.vue

<!-- 
  @Date: 2024-10-29
  @Author: ©WANGKANG
  @Email: 1686617586@qq.com
-->

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listDataSeqApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['demo:DataSeq:add']" icon="CirclePlus" @click="openDialog(1, '数据集新增')"> 新增 </el-button>
        <!-- <el-button type="primary" v-auth="['demo:DataSeq:import']" icon="Upload" plain @click="batchAdd"> 导入 </el-button>
        <el-button type="primary" v-auth="['demo:DataSeq:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button> -->
        <el-button
          type="danger"
          v-auth="['demo:DataSeq: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:DataSeq:query']" @click="openDialog(3, '数据管理查看', scope.row)">
          查看
        </el-button>
        <el-button type="primary" link icon="View" v-auth="['demo:DataSeq:query']" @click="preview(scope.row)"> 预览</el-button>
        <!-- <el-button type="primary" link icon="EditPen" v-auth="['demo:DataSeq:edit']" @click="openDialog(2, '数据管理编辑', scope.row)">
          编辑
        </el-button> -->
        <el-button type="primary" link icon="Delete" v-auth="['demo:DataSeq:remove']" @click="deleteDataSeq(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" />
    <!-- <ImportExcel ref="dialogRef" /> -->
    <PreviewImages ref="previewImagesRef" />
    <PreviewCompareImages ref="previewCompareImagesRef" />
  </div>
</template>

<script setup lang="tsx" name="DataSeq">
import { ref, reactive } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { ElMessageBox } 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 {
  listDataSeqApi,
  delDataSeqApi,
  addDataSeqApi,
  updateDataSeqApi,
  importTemplateApi,
  importDataSeqDataApi,
  exportDataSeqApi,
  getDataSeqApi,
  getAllImagesApi,
  getCOMPImagesApi
} from '@/api/modules/demo/DataSeq'
import { enumsSubSystem } from '../utils'
import PreviewImages from '@/views/demo/components/PreviewImages.vue'
import { SubSystem__ } from '@/views/demo/utils'
import PreviewCompareImages from '@/views/demo/components/PreviewCompareImages.vue'

const previewImagesRef = ref()
const previewCompareImagesRef = ref()

const preview = async row => {
  console.log('showImages')
  console.log(row)
  if (row.subsystem !== SubSystem__['可见光转红外']) {
    console.log('不可见光转红外')
    await previewImagesRef.value?.handleOpen(getAllImagesApi, row.inputOssId)
  } else {
    console.log('可见光转红外')
    let res = null
    try {
      res = await previewCompareImagesRef.value?.handleOpen(getCOMPImagesApi, row.inputOssId)
    } catch (error) {
      console.log(error)
      res = null
    }

    if (!res) {
      previewCompareImagesRef.value?.closeDialog()
      await previewImagesRef.value?.handleOpen(getAllImagesApi, row.inputOssId)
    }
  }
}

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

// 删除数据管理信息
const deleteDataSeq = async (params: any) => {
  await useHandleData(delDataSeqApi, params.id, '删除【' + params.id + '】数据管理')
  proTable.value?.getTableList()
}

// 批量删除数据管理信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delDataSeqApi, ids, '删除所选数据管理信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

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

// 批量添加数据管理
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '数据管理',
    tempApi: importTemplateApi,
    importApi: importDataSeqDataApi,
    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 getDataSeqApi(row?.id || null)
  }
  // 重置表单
  setItemsOptions()
  const params = {
    title,
    width: 580,
    isEdit: type !== 3,
    itemsOptions: itemsOptions,
    model: type == 1 ? {} : res.data,
    api: type == 1 ? addDataSeqApi : updateDataSeqApi,
    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'
    }
  },
  {
    prop: 'subsystem',
    label: '分系统',
    tag: true,
    enum: enumsSubSystem,
    search: {
      el: 'select'
    },
    width: 120
  },
  {
    prop: 'objectType',
    label: '目标类型',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'objectSubtype',
    label: '目标子类型',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'batchNum',
    label: '批次号',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'scene',
    label: '场景',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'dataSource',
    label: '数据源',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'gatherSpot',
    label: '采集地点',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'remarks',
    label: '备注',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'filePath',
    label: '文件路径',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'unzipPath',
    label: '解压路径',
    search: {
      el: 'input'
    }
  },
  { 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: 'subsystem',
      rules: [{ required: true, message: '分系统不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'select',
        enum: enumsSubSystem,
        placeholder: '请选择分系统'
      }
    },
    {
      label: '批次号',
      prop: 'batchNum',
      rules: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入批次号'
      }
    },
    {
      label: '上传文件',
      prop: 'inputOssId',
      rules: [{ required: true, message: '数据集文件不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'file-upload',
        fileSize: 4096,
        fileType: ['zip'],
        placeholder: '请上传数据集文件'
      }
    },
    // {
    //   label: '文件类型',
    //   prop: 'fileType',
    //   rules: [{ required: true, message: '文件类型不能为空', trigger: 'blur' }],
    //   compOptions: {
    //     placeholder: '请输入文件类型'
    //   }
    // },
    {
      label: '目标类型',
      prop: 'objectType',
      rules: [{ required: false, message: '目标类型不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入目标类型'
      }
    },
    {
      label: '目标子类型',
      prop: 'objectSubtype',
      rules: [{ required: false, message: '目标子类型不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入目标子类型'
      }
    },
    {
      label: '场景',
      prop: 'scene',
      rules: [{ required: false, message: '场景不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入场景'
      }
    },
    {
      label: '数据源',
      prop: 'dataSource',
      rules: [{ required: false, message: '数据源不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入数据源'
      }
    },
    {
      label: '采集时间',
      prop: 'gatherTime',
      rules: [{ required: false, message: '采集时间不能为空', trigger: 'change' }],
      compOptions: {
        elTagName: 'date-picker',
        type: 'date',
        placeholder: '请选择采集时间'
      }
    },
    {
      label: '采集地点',
      prop: 'gatherSpot',
      rules: [{ required: false, message: '采集地点不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入采集地点'
      }
    },
    // {
    //   label: '图片url',
    //   prop: 'url',
    //   rules: [{ required: true, message: '图片url不能为空', trigger: 'blur' }],
    //   compOptions: {
    //     placeholder: '请输入图片url'
    //   }
    // },
    // {
    //   label: '日志',
    //   prop: 'log',
    //   rules: [{ required: true, message: '日志不能为空', trigger: 'blur' }],
    //   compOptions: {
    //     type: 'textarea',
    //     clearable: true,
    //     placeholder: '请输入内容'
    //   }
    // },
    {
      label: '备注',
      prop: 'remarks',
      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入备注'
      }
    }
  ]
}
</script>

<style lang="scss" scoped></style>