SPDM/src/components/taskDetail/resultImage.vue

<template>
  <div class="task-performance-page">
    <div class="task-img-box">
      <BaseTable
        tableName="TASK_IMAGE_FILE"
        ref="baseTableRef"
        :api="getSimulationTaskFilesApi"
        :params="apiParam"
        :show-checkbox="true"
        :actionList="actionList"
        :full-height="true"
      >
        <template v-if="showLeftOptions" #leftOptions>
          <!-- <el-form :model="filterForm" inline>
            <el-form-item label="列数：">
              <el-input-number
                v-model="filterForm.lineNum"
                :min="1"
                :max="5"
                @change="handleChangeLineFun"
              />
            </el-form-item>
            <el-form-item v-if="showLeftOptions">
              <el-upload :show-file-list="false" :accept="accept" :before-upload="beforeUploadFun">
                <el-button>上传文件</el-button>
              </el-upload>
              <el-button type="primary" class="ml12" @click="downLoadFun">下载文件</el-button>
            </el-form-item>
          </el-form> -->
          <el-upload
            :show-file-list="false"
            :accept="accept"
            multiple
            :before-upload="beforeUploadFun"
          >
            <el-button>上传文件</el-button>
          </el-upload>
          <el-button type="primary" class="ml12" @click="downLoadFun">下载文件</el-button>
        </template>
        <template #type="{ row }">
          <span>{{ getfileType(row) }}</span>
        </template>
        <template #fileSize="{ row }">
          <span>{{ row.formatFileSize }}</span>
        </template>
      </BaseTable>
    </div>

    <FilePreview v-model="previewVisible" :fileId="currentRow?.id" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { batchAddFileInfoApi } from '@/api/data/data';
import { queryTaskRunApi } from '@/api/project/run';
import { NODE_TYPE } from '@/utils/enum/node';
import { FILE_TYPE } from '@/utils/enum/file';
import {
  downloadFileById,
  downloadFileByStream,
  getFileUploadAcceptFun,
  queryFileIdByNodeIdFun,
} from '@/utils/file';
import BaseTable from '@/components/common/table/baseTable.vue';
import FilePreview from '@/components/common/filePreview/index.vue';
import emitter from '@/utils/eventBus';
import { dataOverViewDeleteSimulationNodeFilesApi } from '@/api/data/dataOverView';
import { getSimulationTaskFilesApi } from '@/api/data/dataAnalysis';

const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
  showLeftOptions: {
    type: Boolean,
    default: true,
  },
});
const baseTableRef = ref();

const exampleList = ref<any>([]);
const nodeFIleId = ref<any>('');
const accept = ref<any>('');

const queryTaskRunFun = async (id: any) => {
  const res: any = await queryTaskRunApi({ taskId: id });
  if (res && res.code === 200) {
    const list = res.data.map((item: any) => {
      return {
        ...item,
        name: item.runName,
        type: NODE_TYPE.RUN,
      };
    });
    return list;
  } else {
    return [];
  }
};

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);
    },
  },
  {
    title: '预览',
    type: 'primary',
    click: (row: any) => {
      previewFileFun(row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '删除后不可恢复，确认删除吗？',
    click: (row: any) => {
      deleteFun(row);
    },
    hide: () => {
      return !props.showLeftOptions;
    },
  },
]);

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 getfileType = (data: any) => {
  const fileType = data.originalName.split('.').pop();
  return fileType;
};

const apiParam = ref<any>({});

watch(
  () => props.taskId,
  async (newVal) => {
    const task = [
      {
        name: '当前任务',
        id: newVal,
        uuid: newVal,
        type: NODE_TYPE.TASK,
      },
    ];
    apiParam.value = {
      uuid: newVal,
      fileBizType: FILE_TYPE.PNG_FILE,
      fileName: '',
      startTime: '',
      endTime: '',
      level: NODE_TYPE.TASK,
    };
    const runList = await queryTaskRunFun(newVal);
    exampleList.value = task.concat(runList);
  },
  {
    immediate: true,
  }
);

const beforeUploadFun = (file: any) => {
  const { name, size } = file;

  const sourceFiles = [
    {
      fileName: name,
      size: size,
      raw: file,
      fileType: FILE_TYPE.PNG_FILE,
    },
  ];

  const params = {
    sourceFiles,
    uploadTaskId: new Date().getTime(),
    dirId: nodeFIleId.value,
    projectId: null,
    type: 0,
  };

  batchAddFileInfoApi(params).then((res: any) => {
    if (res.code === 200) {
      baseTableRef.value.resetFun();

      res.data.forEach((item: any) => {
        emitter.emit('ADD_UPLOAD_FILE', {
          file: file,
          data: {
            ...item,
            isApprove: 0,
            taskType: 1,
          },
        });
      });
    }
  });

  return false;
};

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);
    }
  }
};

onMounted(async () => {
  accept.value = await getFileUploadAcceptFun('PNG_FILE_FORMAT');
  nodeFIleId.value = await queryFileIdByNodeIdFun(props.taskId);
});
</script>

<style lang="scss" scoped>
.task-performance-page {
  width: 100%;
  height: 100%;
  // height: 450px;

  .task-img-box {
    width: 100%;
    height: 100%;

    .img-item {
      margin-right: 10px;
      margin-bottom: 10px;
      min-height: 100px;

      .task-img {
        width: 100%;
        border: 1px solid #ddd;
        cursor: pointer;
      }

      .check {
        border: 1px solid var(--el-color-primary);
      }
    }
  }
}

.ml12 {
  margin-left: 12px;
}
</style>