aiccs/src/views/comprehensive/abnDetails.vue

<template>
  <div class="main-content m20">
    <div class="content-body">
      <div style="margin-top: 10px;margin-left: 30px">
        <el-button type="primary" @click="$router.back()"> 返回 </el-button>
      </div>
      <div style="margin-top: 10px;margin-left: 30px;font-size: 20px">
        {{ describe }}
        <el-button style="margin-left: 888px" size="mini" type="primary" v-loading="exportLoading" @click="exportFile">导出Excel</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
        style="width: 95%;padding: 0;margin:0 auto;margin-top: 10px"
      >
        <el-table-column prop="index" label="序号" min-width="50" align="center"/>
        <el-table-column prop="uniscid" label="统一社会信用代码/注册号" min-width="120" align="left"/>
        <el-table-column prop="entname" :show-overflow-tooltip="true" label="主体名称" min-width="130" align="left"/>
        <el-table-column prop="lerep" :show-overflow-tooltip="true" label="法定代表人" min-width="130" align="left"/>
        <el-table-column prop="dom" :show-overflow-tooltip="true" label="经营地址" min-width="130" align="left"/>
        <el-table-column prop="regOrgCn" :show-overflow-tooltip="true" label="登记机关" min-width="100" align="left"/>
        <el-table-column prop="supOrgCn" :show-overflow-tooltip="true" label="属地机关机关" min-width="100" align="left"/>
        <el-table-column prop="source" :show-overflow-tooltip="true" label="线索来源" min-width="100" align="left"/>
        <el-table-column prop="reason" :show-overflow-tooltip="true" label="原因" min-width="120" align="left"/>
      </el-table>
      <div class="page-box">
        <el-pagination
          :disabled="loading"
          :page-size="pageParam.pageSize"
          :total="pageParam.total"
          :current-page.sync="pageParam.curPage"
          :page-sizes="[10, 20, 30, 40,50,100,200]"
          layout="slot,total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChange"
          @current-change="pageIndexChange"
        >
          <span>
            第 {{ pageParam.curPage }} 页 /
            共 {{
              (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1) / pageParam.pageSize) : 1)
            }} 页
          </span>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getEntListByStatistics, exportEntListByStatistics } from '@/api/comprehensive'
export default {
  data() {
    return {
      describe: '广州市场监督管理局-经营异常主体信息',
      tableData: [],
      pageParam: {
        customParamMap: {
          searchDate: null,
          content: '',
          orgName: ''
        },
        curPage: 1,
        total: 0,
        pageSize: 10
      },
      loading: false,
      exportLoading: false,
      type: ''
    }
  },
  mounted() {
    this.pageParam.customParamMap.searchDate = this.$route.query.searchDate
    this.pageParam.customParamMap.content = this.$route.query.content
    this.pageParam.customParamMap.orgName = this.$route.query.orgName
    this.loadPage()
  },
  methods: {
    exportFile() {
      if (this.pageParam.total === 0) {
        this.$message({
          message: '未查询到数据，无法导出！',
          type: 'warning'
        })
        return
      }
      this.exportLoading = true
      exportEntListByStatistics(this.pageParam).then(res => {
        const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '经营异常主体信息列表.xlsx')
        link.click()
      }).finally(() => {
        this.exportLoading = false
      })
    },
    download(data, fileName) {
      if (!data) {
        return
      }
      const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' }))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)
      link.click()
    },
    dateFormat(row) {
      if (this.$util.isEmpty(row.createTime)) return ''
      return this.$util.formatDate.format(new Date(Date.parse(row.createTime)), 'yyyy-MM-dd')
    },
    loadPage() {
      const data = Object.assign({}, this.pageParam)
      this.loading = true
      getEntListByStatistics(data).then(res => {
        this.exportQueryData = data
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          each.uscc = each.uniScId || each.regno
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    remPageSizeChange(pageSize) {
      this.remPageParam.pageSize = pageSize
      this.loadPage()
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    }
  }
}
</script>
<style lang="scss" scoped>
  .main-content {
    background: #fff;
    padding: 10px;
    .page-box{
      margin:10PX;
      .el-pagination{
        text-align: right;
      }
    }
    .content-body{
      background:white;
      margin-bottom: 100px;
    }
  }
</style>