SPDM/src/views/task/execution/components/runDetailPage/runPagecomponent/runDataPage.vue

<!-- 节点输入文件 -->
<!-- 节点输出文件 -->

<template>
  <div class="node-file-page">
    <div class="table-box">
      <BaseTable
        showIndex
        ref="baseTableRef"
        tableName="RUN_RESULT_FILE_TABLE"
        :api="queryRunDirFun"
        :params="{
          fileId: fileId,
          // uuid:nodeInfo.uuid
        }"
        :row-config="{
          height: '34',
        }"
        :show-checkbox="true"
        :action-list="actionList"
        :full-height="true"
        :show-setting="false"
      >
        <template #leftOptions v-if="!readonly">
          <el-button type="" @click="asyncFileFun">归档</el-button>

          <el-button class="ml10" type="primary" @click="openUploadFileFun">上传</el-button>

          <!-- <el-upload v-if="false" :show-file-list="false" :before-upload="beforeUploadFun">
            <el-button class="ml10" type="primary">上传</el-button>
          </el-upload> -->

          <el-button type="primary" class="ml10" @click="downLoadFileFun">下载</el-button>
          <el-button type="danger" @click="deleteFileFun">删除</el-button>
        </template>
        <template #leftOptions v-else>
          <el-button type="primary" @click="downLoadFileFun">下载</el-button>
        </template>
        <template #fileSize="{ row }">
          <span>{{ formatFileSize(row.fileSize) }}</span>
        </template>
      </BaseTable>
    </div>
    <!-- <div class="operate-box">
      <el-upload :show-file-list="false" multiple :before-upload="beforeUploadFun">
        <el-button>上传</el-button>
      </el-upload>
      <el-button type="primary" class="ml10" @click="downLoadFileFun">下载</el-button>
      <el-button type="danger" @click="deleteFileFun">删除</el-button>
    </div> -->

    <FilePreview v-model="previewVisible" :fileId="currentRow?.id" />
    <Dialog
      v-model="showSyncFileTypeSelectFlag"
      diaTitle="文件归档"
      :width="'20%'"
      :height="'30%'"
      :confirm-closable="false"
    >
      <div class="form-content">
        <el-form :model="formData">
          <el-form-item label="文件类型">
            <el-select v-model="formData.fileType">
              <el-option
                v-for="item in fileTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="cancalFun">取消</el-button>
        <el-button @click="submitFun" type="primary">确定</el-button>
      </template>
    </Dialog>

    <Dialog
      v-model="showUploadFileVisible"
      diaTitle="文件上传"
      :width="'25%'"
      :height="'40%'"
      :confirm-closable="false"
    >
      <div class="form-content">
        <el-form :model="formData">
          <TableForm
            ref="tableFormRef"
            :tableName="'TASK_DETAIL_UPLOAD_FILE'"
            :itemNum="3"
            v-model:data="formData"
          />
        </el-form>
      </div>
      <template #footer>
        <el-button @click="cancalFun">取消</el-button>
        <el-button @click="submitFun2" type="primary">确定</el-button>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watch } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { queryRunDirApi, syncKeyResultToTaskApi, uploadRunFilesApi } from '@/api/project/run';
import { downloadFileById, downloadFileByStream, fileUploadAllocationTypeFun } from '@/utils/file';
import FilePreview from '@/components/common/filePreview/index.vue';
import { formatFileSize } from '@/utils/file';
import emitter from '@/utils/eventBus';
import { dataDelFileApi } from '@/api/data/data';
import { ElMessage } from 'element-plus';
import Dialog from '@/components/common/dialog/index.vue';
import { useDict } from '@/utils/useDict';
import { FILE_TYPE } from '@/utils/enum/file';
import TableForm from '@/components/common/table/tableForm.vue';

const props = defineProps({
  nodeInfo: {
    type: Object,
    default: () => {},
  },
  runInfo: {
    type: Object,
    default: () => {},
  },
  fileId: {
    type: String,
    default: '',
  },
  readonly: {
    type: Boolean,
    default: false,
  },
});
const baseTableRef = ref();
const tableFormRef = ref();
const showSyncFileTypeSelectFlag = ref(false);
const showUploadFileVisible = ref(false);
const formData = reactive<any>({
  fileType: '',
  fileTypeDictValue: [FILE_TYPE.CALCULATION_FILE],
  files: [],
  disciplineDictValue: '',
});
const { ALL_FILE_TYPE }: any = useDict('ALL_FILE_TYPE');
const fileTypeList = ref<any>(ALL_FILE_TYPE.value['A']);
const beforeUploadFun = async (file: any) => {
  if (!props.fileId) {
    return;
  }

  const list = [file];

  const sourceFiles = [
    {
      fileName: file.name,
      size: file.size,
      fileType: fileUploadAllocationTypeFun(file.name),
    },
  ];

  const param = {
    sourceFiles,
    uploadTaskId: new Date().getTime(),
    dirId: props.fileId,
  };

  const res: any = await uploadRunFilesApi(param);
  if (res && res.code === 200) {
    res.data.forEach((item: any, index: any) => {
      item.isSaveLocal = 'Y';
      emitter.emit('ADD_UPLOAD_FILE', {
        file: list[index],
        data: {
          // 接口返回的文件目录信息，包括配置信息
          ...item,
          isApprove: 0, // 0否 1是
          taskType: 4, // 4交付物
        },
      });
    });
  }

  if (res.code === 200) {
    reloadFun();
  }
};

const queryRunDirFun = async (param: any) => {
  if (param.fileId) {
    const res: any = await queryRunDirApi(param);
    return res;
  } else {
    return {};
  }
};

const downLoadFileFun = async () => {
  const checkData: any = baseTableRef.value.tableRef.getCheckboxRecords();

  if (checkData?.length) {
    for (let i = 0; i < checkData.length; i++) {
      downloadFileByStream(checkData[i].id);
    }
  } else {
    ElMessage.warning('请选择文件后再下载');
  }
};

const reloadFun = async () => {
  if (baseTableRef.value) {
    await baseTableRef.value.resetFun();
  }
};

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

const deleteFileFun = async () => {
  const checkData: any = baseTableRef.value.tableRef.getCheckboxRecords();

  if (checkData?.length) {
    for (let i = 0; i < checkData.length; i++) {
      await dataDelFileApi({ delFileId: checkData[i].id });
    }

    reloadFun();
  } else {
    ElMessage.warning('请选择文件后再删除');
  }
};

const actionList = ref([
  {
    title: '下载',
    type: 'primary',
    click: (row: any) => {
      downloadFileById(row.id);
    },
  },
  {
    title: '预览',
    type: 'primary',
    click: (row: any) => {
      previewFileFun(row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    hide: () => {
      return props.readonly;
    },
    click: async (row: any) => {
      const res: any = await dataDelFileApi({ delFileId: row.id });
      if (res && res.code === 200) {
        ElMessage.success('删除成功');
        reloadFun();
      }
    },
  },
]);

// 归档算例下文件到工况下
const syncFiles = ref<any>([]);
const asyncFileFun = () => {
  syncFiles.value = baseTableRef.value.tableRef.getCheckboxRecords() || [];
  formData.fileType = '';
  if (syncFiles.value?.length) {
    showSyncFileTypeSelectFlag.value = true;
  } else {
    ElMessage.warning('请选择文件进行归档');
  }
};

const cancalFun = () => {
  showSyncFileTypeSelectFlag.value = false;
  showUploadFileVisible.value = false;
};

const openUploadFileFun = () => {
  console.log(props.runInfo, 'runInfo');

  showUploadFileVisible.value = true;
  formData.fileTypeDictValue = [FILE_TYPE.CALCULATION_FILE];
  formData.files = [];
  formData.disciplineDictValue = '';

  nextTick(() => {
    tableFormRef.value.resetFun();
  });
};

const submitFun = async () => {
  if (!formData.fileType) {
    ElMessage.warning('请选择归档文件类型');
    return;
  }

  const fileIds = syncFiles.value.map((item: any) => {
    return item.id;
  });
  const param = {
    fileIds,
    fileType: formData.fileType,
    runId: props.nodeInfo.runId,
  };

  try {
    const res: any = await syncKeyResultToTaskApi(param);
    if (res && res.code == 200) {
      ElMessage.success('归档成功');
      showSyncFileTypeSelectFlag.value = false;
    }
  } catch {}
};

const submitFun2 = async () => {
  const valid = await tableFormRef.value.validateFun();

  if (valid) {
    const fromData: any = tableFormRef.value.getFormDataFun();

    console.log(fromData, 'fromData');

    const list = fromData.files.map((item: any) => {
      return item.raw;
    });
    const sourceFiles = list.map((item: any) => {
      return {
        fileName: item.name,
        size: item.size,
        fileType: fileUploadAllocationTypeFun(item.name),
      };
    });

    const param = {
      sourceFiles,
      uploadTaskId: new Date().getTime(),
      dirId: props.fileId,
      fileTypeDictValue:
        fromData.fileTypeDictValue instanceof Array
          ? fromData.fileTypeDictValue.join(',')
          : fromData.fileTypeDictValue,
      disciplineDictValue: fromData.disciplineDictValue,
      fileTypeDictClass: 'ALL_FILE_TYPE',
      disciplineTypeDictClass: 'DISCIPLINE_TYPE',
      dictTags: [
        'fileTypeDictClass',
        'fileTypeDictValue',
        'disciplineTypeDictClass',
        'disciplineDictValue',
      ],
      tagReq: props.runInfo?.tagReq || {},
    };

    const res: any = await uploadRunFilesApi(param);
    if (res && res.code === 200) {
      res.data.forEach((item: any, index: any) => {
        item.isSaveLocal = 'Y';
        emitter.emit('ADD_UPLOAD_FILE', {
          file: list[index],
          data: {
            // 接口返回的文件目录信息，包括配置信息
            ...item,
            isApprove: 0, // 0否 1是
            taskType: 4, // 4交付物
          },
        });
      });
    }

    if (res.code === 200) {
      reloadFun();
      showUploadFileVisible.value = false;
    }
  }
};

watch(
  () => props.nodeInfo,
  (newVal) => {
    if (newVal) {
      console.log(newVal, 'newVal');
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.node-file-page {
  width: 100%;
  height: 100%;
  padding: 10px;

  .table-box {
    width: 100%;
    height: 100%;

    // height: calc(100% - 50px);
  }

  .operate-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .ml10 {
    margin-left: 10px;
  }
}
</style>