SPDM/src/views/data/analysis/components/modelFileResult.vue

<template>
  <div class="model-file-page">
    <BaseTable
      v-if="showTableContent"
      ref="modelTableRef"
      :head="tableColumns"
      :tableName="checkTableName"
      hidePagination
    >
      <template v-for="item in tableColumns" :key="item.key" #[item.key]="{ row }">
        <div v-if="row.attributes != '操作'">
          <img
            v-if="row.attributes === '文件名称'"
            :src="fileUploadAllocationIconFun(row[item.key])"
            class="img"
          />
          <span>{{ row[item.key] || '--' }}</span>
        </div>
        <div v-else>
          <span v-if="item.key === 'attributes'">{{ row[item.key] }}</span>
          <div v-else>
            <el-button type="primary" link @click="reviewFun(item)">预览</el-button>
            <el-button type="primary" link @click="downLoadFun(item)">下载</el-button>
            <!-- <el-button type="primary" link @click="compareFun(item)">对比</el-button> -->
          </div>
        </div>
      </template>
    </BaseTable>
    <FilePreview v-model="previewVisible" :fileId="fileId"></FilePreview>
    <!-- <compareTextFile v-if="compareVisible" @close="compareVisible = false"></compareTextFile> -->
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { objectTypeArrayRemovesDuplicates } from '@/utils/common';
import FilePreview from '@/components/common/filePreview/index.vue';
import { downloadFileByStream, fileUploadAllocationIconFun } from '@/utils/file';
// import compareTextFile from './compareTextFile.vue';

const props = defineProps({
  checkTaskInfo: {
    type: Array,
    default: () => [],
  },
  checkTableName: {
    type: String,
    default: '',
  },
  cloumnWidth: {
    type: String,
    default: '',
  },
});
const modelTableRef = ref();
const showTableContent = ref(false);

const tableColumns = ref<any>([]);

const tableData = ref<any>([]);
const previewVisible = ref(false);
const fileId = ref<any>('');
const modelAttribute = ref<any>([
  {
    name: '文件名称',
    value: 'originalName',
  },
  {
    name: '所属项目',
    value: 'ownProjectName',
  },
  {
    name: '所属阶段',
    value: 'ownPhaseName',
  },
  // {
  //   name: '所属机台',
  //   value: 'ownMachineName',
  // },
  // {
  //   name: '所属工位',
  //   value: 'ownWorkspaceName',
  // },
  {
    name: '所属工况',
    value: 'owntaskName',
  },
  {
    name: '所属算例',
    value: 'ownRunName',
  },
  {
    name: '文件大小',
    value: 'formatFileSize',
  },
  {
    name: '日期',
    value: 'createTime',
  },
  {
    name: '操作',
    value: 'operate',
  },
]);

const getTableColumnFun = (data: any) => {
  const titles = data.map((item: any) => {
    const name =
      item.taskName && item.runName ? item.taskName + '_' + item.runName : item.originalName;
    const value = item.taskId && item.uuid ? item.taskId + '_' + item.uuid : item.id;
    const obj = {
      name,
      value,
    };
    return obj;
  });

  const list: any = data || [];

  showTableContent.value = false;
  tableData.value = [];
  tableColumns.value = [];
  const defaultColumns = [
    {
      title: '属性',
      key: 'attributes',
      isShow: true,
    },
  ];
  let modelcolumns: any = [];

  for (let i = 0; i < titles.length; i++) {
    for (let j = 0; j < list.length; j++) {
      const names =
        list[j].taskName && list[j].runName
          ? list[j].taskName + '_' + list[j].runName
          : list[j].originalName;
      if (titles[i].name === names) {
        const obj: any = {
          title: titles[i].name,
          key: titles[i].value,
          isShow: true,
        };
        modelcolumns.push(obj);
      }
    }
  }
  modelcolumns = objectTypeArrayRemovesDuplicates(modelcolumns, 2);

  tableColumns.value = defaultColumns.concat(modelcolumns);

  if (props.cloumnWidth) {
    for (let i = 0; i < tableColumns.value.length; i++) {
      tableColumns.value[i].width = props.cloumnWidth;
    }
  }

  for (let i = 0; i < modelAttribute.value.length; i++) {
    for (let j = 0; j < list.length; j++) {
      const values =
        list[j].taskId && list[j].uuid ? list[j].taskId + '_' + list[j].uuid : list[j].id;
      modelAttribute.value[i][values] = list[j][modelAttribute.value[i].value];
    }
  }

  for (let i = 0; i < modelAttribute.value.length; i++) {
    const obj: any = {};
    for (let j = 0; j < tableColumns.value.length; j++) {
      if (tableColumns.value[j].key === 'attributes') {
        obj[tableColumns.value[j].key] = modelAttribute.value[i].name;
      } else {
        obj[tableColumns.value[j].key] = modelAttribute.value[i][tableColumns.value[j].key];
      }
    }

    tableData.value.push(obj);
  }

  showTableContent.value = true;

  nextTick(() => {
    modelTableRef.value.setDataFun(tableData.value);
  });
};

// 预览文件
const reviewFun = (column: any) => {
  fileId.value = column.key;
  previewVisible.value = true;
};

const downLoadFun = (column: any) => {
  fileId.value = column.key;
  downloadFileByStream(fileId.value);
};

const compareVisible = ref(false);
const compareFile = ref<any>({});
// 对比文件
const compareFun = (data: any) => {
  compareFile.value = data;
  compareVisible.value = true;
};

watch(
  () => props.checkTaskInfo,
  (newVal) => {
    if (newVal) {
      getTableColumnFun(newVal);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.model-file-page {
  width: 100%;
  height: 100%;
}

.img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  transform: translateY(3px);
}
</style>