front / ningxia-credit-web · Files

<template>
  <div>
    <el-dialog :title="props.title" v-model="state.openDialog" width="800px" append-to-body destroy-on-close @close="handleClose(false)">

      <el-row :gutter="30">
        <el-col :span="6" class="mb20">
          <el-image :src="getImage('hw.png','/report')" style="width: 80%"></el-image>
        </el-col>
        <el-col :span="18" style="display: flex; flex-direction: column; justify-content: center">
          <el-row class="mb20">
            <el-col :span="14" class="ent_name">{{state.curReportInfo.enterpriseName}}</el-col>
            <el-col :span="10">交付时间：{{state.curReportInfo.deliveryTime}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="14" class="file_addr">
              <div v-for="item in getFileName(state.curReportInfo.pdfUrl)">
                {{item}}
              </div>
            </el-col>
            <el-col :span="10">
              <div><el-button type="primary" size="small" icon="Download" v-if="state.curReportInfo.pdfUrl" @click="handleDownload(state.curReportInfo.pdfUrl)">下载pdf</el-button></div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <div class="mb20">
        <el-icon size="18px" style="vertical-align: middle" class="mr5">
          <Document />
        </el-icon>
        <span>历史报告</span>
      </div>
      <el-table :data="state.tableList" style="width: 100%" border v-loading="state.isLoading" class="own_table mb20" :row-class-name="rowClassName">
        <el-table-column v-for="(table, index) in state.tableColumns" :key="'table'+index" :label="table.label" :prop="table.prop" :min-width="table.width">
          <template #default="scope">
            <div v-if="table.prop === 'fileList'">
<!--              <div v-for="(item, index) in getFileName(scope.row.firstUrl)" :key="'item'+index">
                {{item}}
              </div>-->
              <div v-for="(item, index) in getFileName(scope.row.pdfUrl)" :key="'item'+index">
                {{item}}
              </div>
            </div>
            <div v-else>
              {{scope.row[table.prop]}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
<!--            <div><el-button type="primary" size="small" icon="Download" v-if="scope.row.firstUrl" @click="handleDownload(scope.row.firstUrl)" :loading="state['cancel'+scope.row.index]">下载doc</el-button></div>-->
            <div><el-button type="primary" size="small" icon="Download" v-if="scope.row.pdfUrl" @click="handleDownload(scope.row.pdfUrl)" :loading="state['cancel'+scope.row.index]">下载pdf</el-button></div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="state.total > 0"
          :total="state.total"
          :page.sync="state.queryParams.pageNum"
          :limit.sync="state.queryParams.pageSize"
          @pagination="({page, limit})=>getHistoryReport(page, limit)"
      />

      <template #footer v-if="props.isShowFooter">
        <span class="dialog-footer">
          <el-button @click="handleClose(false)">取消</el-button>
          <el-button type="primary" :loading="state.isSubmit" @click="handleSubmit">确定</el-button>
        </span>
      </template>

    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import * as api from '../../interface/api.ts'
import getImage from "../../assets/getImage.ts";
import {Document, Download} from "@element-plus/icons-vue";
import axios from "axios";
import {downloadFileGet} from "../../utils/request.ts";

let orderForm = ref<FormInstance>()
const emit = defineEmits(["handleClose"]);

let props = defineProps({
  title: {
    default: "",
    type: String
  },
  open: {
    default: false,
    type: Boolean
  },
  openName: {
    type: String,
    required: true,
    default: ""
  },
  isShowFooter: {
    default: true,
    type: Boolean
  },
  enterpriseName: {
    type: String,
    default: ""
  }
})

let state = reactive({
  openDialog: false,
  queryParams: {
    enterPriseName: "",
    pageNum: 1,
    pageSize: 10
  },
  isSubmit: false,
  tableList: [],
  curReportInfo: {},
  isLoading: false,
  total: 0,
  tableColumns: [
    {
      label: "序号",
      prop: "index"
    }, {
      label: "附件",
      prop: "fileList"
    }, {
      label: "下单日期",
      prop: "createTime"
    }, {
      label: "交付日期",
      prop: "deliveryTime"
    }
  ]
})

let handleClose = (isRefresh: boolean) => {
  emit('handleClose', props.openName, false, isRefresh)
}
let handleSubmit = () => {
}

let reset = () => {
  state.tableList = []
  state.curReportInfo = {
    pdfUrl: "",
    createTime: "-",
    deliveryTime: "-",
    enterpriseName: "-"
  }
}

let rowClassName = ({row={}, rowIndex = -1}) => {
  row.index = rowIndex + 1
}

let handleDownload = (pdfUrl: string) => {
  // downloadFileGet(`/web/report/reportDownload?reportId=${row.id}&ename=${row.enterpriseName}`)
  if (pdfUrl && JSON.parse(pdfUrl).length > 0) {
    JSON.parse(pdfUrl).forEach((item: any, index: number)=> {
      axios({
        method: 'post',
        url: "/api/web/worldBox/downloadScoreCard",
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        data: {
          // cardScoreInfo: JSON.stringify({cardScoreUrl: item.fileAttachments})
          cardScoreUrl: item.fileAttachments
        },
        responseType: 'blob'
      }).then((res: any)=> {
        let blob = new Blob([res.data])
        console.log(blob)
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = item.fileName+"."+item.fileExtension
        document.body.appendChild(downloadElement)
        downloadElement.click()
      })
    })
  }
}

let getHistoryReport = (page = state.queryParams.pageNum, limit = state.queryParams.pageSize) => {
  state.isLoading = true
  state.queryParams.enterPriseName = props.enterpriseName
  state.tableList = []
  state.queryParams.pageNum = page
  state.queryParams.pageSize = limit
  api.getInfoList(state.queryParams, "/web/worldBox/getHistoryReport").then((res: any)=> {
    if (res.data && res.data.rows.length >= 1) {
      state.curReportInfo = res.data.rows[0]
      state.tableList = res.data.rows
    }
    state.total = res.data.total
  }).finally(()=> {
    state.isLoading = false
  })
}

let getFileName = (pdfUrl: any) => {
  if (pdfUrl && JSON.parse(pdfUrl).length > 0) {
    let fileList = [] as any
    JSON.parse(pdfUrl).forEach((item: any, index: number)=> {
      fileList.push(`${item.fileName}.${item.fileExtension}`)
    })
    return fileList
  } else  {
    return []
  }
}

watchEffect(()=> {
  state.openDialog = props.open
  if (state.openDialog) {
    reset()
    getHistoryReport()
  }
})
</script>

<style scoped>
.ent_name {
  font-size: 24px;
}
.file_addr {
  line-height: 30px;
}
</style>