SPDM/src/components/taskDetail/videoFile.vue

<template>
  <div class="task-performance-page">
    <DragUploader :disabled="!canUpdate" @beforeUpload="beforeUploadFun">
      <FileTable
        tableName="TASK_REPORT"
        :api="getSimulationTaskFileApi"
        :params="apiParam"
        ref="baseTableRef"
        :showCheckbox="showCheckbox"
        :actionList="actionList"
        :defaultActions="canUpdate && showLeftOptions ? ['rename', 'refresh'] : ['refresh']"
      >
        <template v-if="showLeftOptions" #leftOptions>
          <AddFile
            :accept="accept"
            ref="AddFileRef"
            :api="batchAddFileInfoForTaskApi"
            :fileType="FILE_TYPE.VIDEO_FILE"
            tableName="TASK_DETAIL_UPLOAD_FILE"
            callbackFlag="TASK_REPORT_UPLOAD_FINISHED"
            multiple
            :discipline="taskData?.discipline"
            :data="{
              dirId: nodeFIleId,
              projectId: null,
              uuid: taskId,
            }"
            @finished="uploadFinishedFun"
          >
            <el-button v-if="canUpdate">上传文件</el-button>
          </AddFile>
          <el-button class="ml12" type="primary" @click="downLoadFun">下载文件</el-button>
        </template>
        <template #type="{ row }">
          <span>{{ getfileType(row) }}</span>
        </template>
        <template #fileSize="{ row }">
          <span>{{ formatFileSize(row.fileSize) }}</span>
        </template>
      </FileTable>
    </DragUploader>
    <FilePreview v-model="previewVisible" :fileId="currentRow?.id" :noAuth="noAuth" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import FileTable from '@/components/common/fileTable/index.vue';
import { batchAddFileInfoForTaskApi } from '@/api/project/run';
import {
  downloadFileById,
  downloadFileByStream,
  formatFileSize,
  getFileUploadAcceptFun,
  queryFileIdByNodeIdFun,
} from '@/utils/file';
import FilePreview from '@/components/common/filePreview/index.vue';
import AddFile from '@/components/common/addFile/index.vue';
import { FILE_TYPE } from '@/utils/enum/file';
import { dataOverViewDeleteSimulationNodeFilesApi } from '@/api/data/dataOverView';
import { getSimulationTaskFileApi } from '@/api/data/dataAnalysis';
import { NODE_TYPE } from '@/utils/enum/node';
import DragUploader from '@/components/common/dragUploader/index.vue';

const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
  showFilter: {
    type: Boolean,
    default: true,
  },
  showLeftOptions: {
    type: Boolean,
    default: true,
  },
  taskData: {
    type: Object,
    default: () => ({}),
  },
  // 是否可以更新
  canUpdate: {
    type: Boolean,
    default: true,
  },
  showCheckbox: {
    type: Boolean,
    default: true,
  },
  noAuth: {
    type: Boolean,
    default: false,
  },
});
const baseTableRef = ref();
const currentId = ref<any>(props.taskId);
const taskRunList = ref<any>([]);
const nodeFIleId = ref<any>('');
const accept = ref<any>('');
// const env = import.meta.env;

// 获取任务下指标信息
const getTaskRunInfoFun = async () => {
  taskRunList.value = [
    {
      name: '当前任务',
      id: props.taskId,
    },
  ];
  currentId.value = taskRunList.value[0].id;
};

const getfileType = (data: any) => {
  const fileType = data.originalName.split('.').pop();
  return fileType;
};

const currentRow = ref();
const previewVisible = ref(false);
const previewFileFun = (row: any) => {
  currentRow.value = row;
  previewVisible.value = true;
};

const actionList = ref([
  {
    title: '下载',
    type: 'primary',
    click: (row: any) => {
      downloadFileById(row.id, props.noAuth);
    },
  },
  {
    title: '预览',
    type: 'primary',
    click: (row: any) => {
      previewFileFun(row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '删除后不可恢复，确认删除吗？',
    click: (row: any) => {
      deleteFun(row);
    },
    hide: () => {
      return !props.showLeftOptions || !props.canUpdate;
    },
  },
]);

const deleteFun = async (row: any) => {
  const param = {
    deleteId: row.id,
    dataType: 2,
  };

  try {
    const res: any = await dataOverViewDeleteSimulationNodeFilesApi(param);
    if (res && res.code === 200) {
      baseTableRef.value.resetFun();
    }
  } catch {}
};

const uploadFinishedFun = (data: any) => {
  if (data.callbackFlag === 'TASK_REPORT_UPLOAD_FINISHED') {
    baseTableRef.value.resetFun();
  }
};

const downLoadFun = async () => {
  const data: any = baseTableRef.value.tableRef.getCheckboxRecords() || [];
  if (data.length) {
    for (let i = 0; i < data.length; i++) {
      downloadFileByStream(data[i].id, props.noAuth);
    }
  }
};

const apiParam = ref<any>({});
watch(
  () => props.taskId,
  (newVal) => {
    if (newVal) {
      apiParam.value = {
        uuid: currentId,
        fileBizType: FILE_TYPE.VIDEO_FILE,
        fileName: '',
        startTime: '',
        endTime: '',
        level: NODE_TYPE.TASK,
        tagReq: {
          taskId: newVal,
          taskName: null,
        },
        fileTypeDictClass: 'ALL_FILE_TYPE',
        dictTags: ['fileTypeDictClass', 'fileTypeDictValue'],
        fileTypeDictValue: FILE_TYPE.VIDEO_FILE,
      };
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
const AddFileRef = ref<any>();
const beforeUploadFun = (file: any) => {
  AddFileRef.value.addFileFun(file);
};

onMounted(async () => {
  getTaskRunInfoFun();

  accept.value = await getFileUploadAcceptFun('VIDEO_FILE_FORMAT');
  nodeFIleId.value = await queryFileIdByNodeIdFun(props.taskId);
});
</script>

<style lang="scss" scoped>
.task-performance-page {
  width: 100%;
  height: 100%;
  .ml12 {
    margin-left: 12px;
  }
}
</style>