income_payments_enterprise_terminal/src/views/dataDownload/DataDownload.vue

<template>
  <div class="main-box">
    <a-card :bordered="false">
      <!--查询区域begin-->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="8" :md="8" :sm="24">
              <a-form-item label="文件名称">
                <a-input placeholder="请输入文件名称" v-model="queryParam.fileName" :maxLength="50"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button class="reset-button" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--查询区域end-->

      <!--    操作按钮区域-->
      <div class="table-operator">
        <a-button type="primary" @click="batchDownloadFile">批量下载</a-button>
      </div>
      <!--    操作按钮区域-end-->

      <!--    table表格区域-->
      <div>
        <a-table
          ref="table"
          bordered
          rowKey="fileId"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap main-table">

          <!--        项目名称-->
          <template slot="projectName" slot-scope="text, record">
            <j-ellipsis :value="text" :length="18" class="primary-color"
                        @click="openDetailModal(record)"></j-ellipsis>
          </template>

          <template slot="text" slot-scope="text">
            <j-ellipsis :value="text" :length="20"></j-ellipsis>
          </template>

          <span slot="action" class="action-span-cell" slot-scope="text, record">
            <a @click="downloadFile(record)">下载</a>
          </span>
        </a-table>
      </div>
    </a-card>
  </div>
</template>
<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import { downloadFile, downloadFileByA } from '@api/manage'
import { batchDownloadFile } from '@api/incomePaymentsApi'

export default {
  name: 'DataDownload',
  mixins: [JeroListMixin],
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 100,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        }, {
          title: '文件名称',
          align: 'center',
          dataIndex: 'fileName',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '文件类型',
          align: 'center',
          width: 160,
          dataIndex: 'fileType',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '文件来源',
          align: 'center',
          width: 280,
          dataIndex: 'fileCome',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '上传时间',
          align: 'center',
          width: 160,
          dataIndex: 'uploadTime',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 160,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/project/payWorkingGroupDistributionRecord/listForFile',
        exportXlsUrl: '/project/payWorkingGroupDistributionRecord/zipFile'
      }
    }
  },
  methods: {
    /**
     * 下载文件
     * @param record
     */
    downloadFile(record) {
      console.log(record.fileId, record.fileName)
      downloadFile(`sys/common/download/${ record.fileId }`, record.fileName)
    },
    /**
     * 批量下载
     */
    batchDownloadFile() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warn('请至少选择一个文件')
        return
      }
      let fileName = ''
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      // 获取文件名称
      let firstFile = this.dataSource.filter(tt => tt.fileId === this.selectedRowKeys[0])
      fileName = `${firstFile[0].fileName}等${this.selectedRowKeys.length}个文件`
      let param = this.getQueryParams()
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['ids'] = this.selectedRowKeys.join(',')
      }
      console.log('导出参数', param)
      downloadFile(this.url.exportXlsUrl, fileName + '.zip', param)
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';

.project-name {
  cursor: pointer;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  color: #069f99;
  //overflow: hidden;
  //word-break: keep-all;
  //text-overflow: ellipsis;
}
</style>