ylst-pc/src/views/DataAnalyse/diagram/components/DiagramTableFile.vue

<template>
  <div class="table-container">
    <AiInsightResult
      v-if="data.question_conclusion"
      :result="data.question_conclusion"
    />
    <a-table
      :align="'center'"
      :columns="columns"
      :dataSource="tableSource"
      :scroll="{ x: 300, y: 455 }"
      rowKey="title"
      :pagination="finalPagination"
      class="ant-table-striped"
      :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      @change="handleChange"
    >
      <template #title="{ text }">
        <div class="diagram-filename" v-html="text"></div>
      </template>

      <template #operation="{ record }">
        <a-button
          size="small"
          type="text"
          primary
          @click="openPreviewModal(record)"
          :disabled="record.type !== 'png' && record.type !== 'jpg' && record.type !== 'jpeg' && record.type !== 'gif'"
          >预览</a-button
        >
        <a-divider type="vertical" />
        <a-button size="small" type="text" primary @click="handleDownload(record)">下载</a-button>
      </template>
    </a-table>
    <ImagePreview v-model:visible="previewVisible" :preview-info="previewInfo" :whole-data="tableSource" />
  </div>
</template>

<script>
import { defineComponent, ref, watch, inject, computed } from 'vue';
import { getFileExtension } from '@/utils/file';
import { cloneDeep } from 'lodash';
import { downloadFile } from '@/views/DataAnalyse/composables/downloadFile';
import AiInsightResult from '@/views/DataAnalyse/diagram/components/AiInsightResult';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { downloadAllFile, downloadFileSheet, getDiagramAnalysis } from '@/api/data-analyse';
import { convertQueryToString } from '@/utils/httpFormat';

import { addDownloadCenter } from '@/api/download.js';

import ImagePreview from './ImagePreview';

export default defineComponent({
  props: {
    data: {
      type: Object,
      required: true
    },
    sn: {
      type: String,
      default: ''
    }
  },
  components: { ImagePreview, AiInsightResult },
  setup(props) {
    const store = useStore();
    const route = useRoute();
    console.log('route', route);
    const querySn = computed(() => route.query.sn);
    const tableInstance = inject('tableInstance');

    const permission = inject('permission');
    const searchParams = inject('searchParams');

    console.log('searchParams', searchParams);

    const tableSource = ref([]);
    const columns = ref([
      {
        title: '样本编码',
        key: 'index',
        dataIndex: 'index',
        width: 100
        // align: "center",
      },
      {
        title: () => (
          <span>
            附件
            <i class="iconfont icon-xiazai" style="color: #70b936; cursor: pointer" onClick={handleClick}></i>
          </span>
        ),
        key: 'title',
        dataIndex: 'title',
        slots: { customRender: 'title' }
        // align: "center",
      },
      {
        title: '操作',
        key: 'operation',
        dataIndex: 'operation',
        slots: { customRender: 'operation' },
        width: 160
        // align: "center",
      }
    ]);

    const pagination = ref({
      size: 'small',
      total: props.data.count,
      current: 1,
      pageSize: 10,
      hideOnSinglePage: true,
      showLessItems: true
    });
    const finalPagination = computed(() => {
      return {
        ...pagination.value,
        total: props.data.count
      };
    });
    async function handleClick() {
      const sn = props.sn;
      const question_index = props.data.question_index;
      const tableSearchInfo = searchParams.value;
      delete tableSearchInfo.type; //文件下载没有type类型，去掉
      console.log(tableSearchInfo);

      let data = { download_type: '3', question_index, ...tableSearchInfo };

      addDownloadCenter(sn, data).then((res) => {
        store.dispatch('downloadCenter/changeCenterUrl', route.path);
        store.dispatch('downloadCenter/changeCenterShow', true);
      });
      // const { data } = await downloadAllFile(
      //   sn,
      //   question_index,
      //   searchParams.value
      // );
      // const {title,url} = data.url;
      // const subdata = {
      //   fileURL:url,
      //   fileName:title
      // }
      // store.dispatch('common/fileDown',subdata)
    }

    const previewVisible = ref(false);
    const previewInfo = ref({
      type: null
    });

    //预览
    function openPreviewModal(row) {
      previewInfo.value = cloneDeep(row);
      previewVisible.value = true;
    }
    // 下载文件
    function handleDownload(record) {
      console.log('record', record);
      downloadFileSheet(querySn.value, record.answer, props.data.question_index).then((res) => {
        const { title, url } = res.data.url;
        const subdata = {
          fileURL: url,
          fileName: title
        };
        store.dispatch('common/fileDown', subdata);
      });
    }
    function getData() {
      let params = {
        ...searchParams.value,
        question_index: props.data.question_index,
        blank_page: pagination.value.current,
        blank_per_page: 10
      };
      // params = convertQueryToString(params);
      console.log('params', params);
      getDiagramAnalysis(props.sn, params).then((res) => {
        const data = res.data?.[0] ?? {};
        tableInstance.value.data = data.option;
        tableSource.value = data.option.map((item) => {
          return {
            ...item,
            type: getFileExtension(item.data[0].url)
          };
        });
      });
    }
    function handleChange(page, filters, sorter) {
      pagination.value.current = page.current;
      getData();
    }

    watch(
      () => props.data,
      (data) => {
        tableInstance.value.data = data.option;
        tableInstance.value.columns = data.head;
        tableSource.value = data.option.map((item) => {
          return {
            ...item,
            type: getFileExtension(item.data[0].url)
          };
        });
      },
      {
        immediate: true
      }
    );
    return {
      tableSource,
      columns,
      previewInfo,
      previewVisible,
      openPreviewModal,
      handleDownload,
      pagination,
      finalPagination,
      handleChange
    };
  }
});
</script>

<style lang="scss">
.diagram-filename {
  display: flex;
  align-items: center;
  img {
    display: block;
    width: 40px;
    height: 40px;
  }
}
</style>
<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background: #f6fbf2;
}
</style>