shuhi-ui/src/views/data/books/components/book-export-log.vue

<!-- 编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="1160"
    v-model="visible"
    title="导出记录"
    @open="handleOpen"
  >
    <common-table
      ref="pageRef"
      :pageConfig="pageConfig"
      :columns="columns"
      :tools="false"
    >
      <template #toolbar>
        <ProDatePicker
          start-placeholder="申请时间（开始时间）"
          end-placeholder="申请时间（结束时间）"
          v-model="searchData"
        />
        <el-button type="primary" @click="reload" class="ml-4">查询</el-button>
        <el-button type="info" @click="handleReset">重置</el-button>
      </template>

      <template #action="{ row }">
        <el-button
          type="primary"
          link
          :disabled="row.exportStatus != 3 || row.cleanStatus == 1"
          @click="handleDownload(row)"
          class="ml-4"
          >[下载]</el-button
        >
        <el-button
          type="danger"
          link
          @click="handleReset"
          :disabled="row.exportStatus == 1"
          >[删除]</el-button
        >
      </template>
    </common-table>
    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, nextTick } from 'vue';
  import request from '@/utils/request';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import ProDatePicker from '@/components/CommonPage/ProDatePicker.vue';
  import { download, toFormData, checkDownloadRes } from '@/utils/common';

  const searchData = ref({ createTimeStart: '', createTimeEnd: '' });

  const pageRef = ref(null);
  function reload() {
    console.log('reload', searchData.value);
    pageRef.value?.reload(searchData.value);
  }
  function handleReset() {
    searchData.value.createTimeStart = '';
    searchData.value.createTimeEnd = '';
    reload();
  }

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });

  /** 关闭弹窗 */
  const handleCancel = () => {
    visible.value = false;
  };

  /** 弹窗打开事件 */
  const handleOpen = () => {
    visible.value = true;
  };

  let statusKeys = ['', '处理中', '失败', '成功'];
  // cleanStatus 文件清理状态 0未清理 1已清理
  /** 表格列配置 */
  const columns = ref([
    { label: '申请时间', prop: 'createTime', align: 'center', width: 180 },
    { label: '条数', prop: 'dataCount', align: 'center', width: 90 },
    { label: '操作员', prop: 'createName', align: 'center' },
    {
      label: '处理状态',
      prop: 'exportStatus',
      align: 'center',
      formatter: (row) => statusKeys[row.exportStatus],
      width: 90
    },
    {
      label: '上次下载时间',
      prop: 'downloadTime',
      align: 'center',
      width: 180
    },
    { label: '下载次数', prop: 'downloadNum', align: 'center', width: 90 },
    {
      columnKey: 'action',
      label: '操作',
      width: 150,
      align: 'center',
      slot: 'action'
    }
  ]);

  const pageConfig = reactive({
    pageUrl: '/common/exportrecord/pagelist',
    fileName: '操作记录',
    cacheKey: 'data-operation-log',
    params: { logType: 1 }
  });

  async function handleDownload(row) {
    const res = await request({
      url: '/common/exportrecord/downLoadFile?id=' + row.id,
      method: 'get',
      responseType: 'blob'
    });
    await checkDownloadRes(res);
    download(res.data, row.fileName);
  }

  defineExpose({
    handleOpen
  });
</script>