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

<template>
  <div class="table-container">
    <a-table
      :align="'center'"
      :columns="columns"
      :dataSource="tableSource"
      :scroll="{ x: 300, y: 400 }"
      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 { useStore } from "vuex";
import { useRoute } from 'vue-router';
import {
  downloadAllFile,
  downloadFileSheet,
  getDiagramAnalysis,
} from "@/api/data-analyse";
import { convertQueryToString } from "@/utils/httpFormat";


import ImagePreview from "./ImagePreview";

export default defineComponent({
  props: {
    data: {
      type: Object,
      required: true,
    },
    sn: {
      type: String,
      default: "",
    },
  },
  components: { ImagePreview },
  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");



    const tableSource = ref([]);
    const columns = ref([
      {
        title: "序号",
        key: "index",
        dataIndex: "index",
        width: 50,
        align: "center",
      },
      {
        title: () => (
          <span>
            附件
            <i
              class="iconfont icon-xiazai"
              style="color: #1C6FFF; 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 { 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>