equipment/src/views/statistics/filing.vue

<template>
  <div class="app-container">
    <Sticky style="margin-bottom: 10px;">
      <div class="sub-navbar">
        <el-button type="success" icon="el-icon-download" size="medium" @click="exportFilingReport">
          导出
        </el-button>
      </div>
    </Sticky>
    <el-form>
      <el-form-item label="审批日期">
        <el-date-picker v-model="listQuery.startDate" placeholder="选择年" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
        <el-date-picker v-model="listQuery.endDate" placeholder="选择月" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleFilter">
          查询
        </el-button>
        <el-button type="info" icon="el-icon-close" @click="clearQuery">
          清空条件
        </el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
      <el-table v-adaptive="{bottomOffset: 50}" height="0" :data="exportData">
        <el-table-column type="index" label="序号" align="center" width="60px" />
        <el-table-column prop="baogaobianhao" label="报告编号" align="center" width="150px" />
        <el-table-column prop="jianyanleibie" label="检验类别" align="center" width="120px" />
        <el-table-column prop="shebeizhonglei" label="设备种类" align="center" width="150px" />
        <el-table-column prop="shiyongdanwei" label="使用单位" align="center" />
        <el-table-column prop="zhucedaima" label="注册代码" align="center" width="180px" />
        <el-table-column prop="shiyongdengjibianhao" label="使用登记证编号" align="center" width="150px" />
        <el-table-column prop="jianyanrenyuan" label="检验人员" align="center" width="150px" />
        <el-table-column prop="jianyanriqi" label="检验日期" align="center" width="120px" />
        <el-table-column prop="xiacijianyanriqi" label="下次检验日期" align="center" width="120px" />
      </el-table>
      <el-pagination
        :current-page="listQuery.pageNum"
        :page-size="listQuery.pageRow"
        :total="totalCount"
        :page-sizes="[10, 20, 40, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import { getStaticsList, exportFilingFn } from '@/api/common'
export default {
  name: 'FilingReport',
  components: { Sticky },
  data() {
    return {
      exportData: [], // 归档报告
      totalCount: 1, // 分页组件--数据总条数
      listQuery: {
        pageNum: 1,
        pageRow: 10
      }
    }
  },
  created() {
    this.$set(this.listQuery, 'startDate', this.formatter.dateFormat('YYYY-MM-dd', new Date()))
    this.$set(this.listQuery, 'endDate', this.formatter.dateFormat('YYYY-MM-dd', new Date()))
  },
  methods: {
    /**
     *  归档报告
     */
    handleFilter() {
      getStaticsList(this.listQuery).then((data) => {
        this.exportData = data.filingReports
        this.totalCount = data.totalCount
      })
    },
    clearQuery() {
      this.$set(this, 'listQuery', {
        pageNum: 1,
        pageRow: 10
      })
    },
    /**
     * 导出量化表
     */
    exportFilingReport() {
      const listQuery = this.common.deepCopy(this.listQuery)
      delete listQuery.pageNum
      delete listQuery.pageRow
      exportFilingFn(listQuery).then((data) => {
        const exportData = data.filingReports
        import('@/vendor/Export2Excel').then(excel => {
          const header = ['报告编号', '检验类别', '设备种类', '使用单位', '注册代码', '使用登记证编号', '检验人员', '检验日期', '下次检验日期']
          const filterVal = [
            'baogaobianhao',
            'jianyanleibie',
            'shebeizhonglei',
            'shiyongdanwei',
            'zhucedaima',
            'shiyongdengjibianhao',
            'jianyanrenyuan',
            'jianyanriqi',
            'xiacijianyanriqi'
          ]
          const data = this.formatJson(filterVal, exportData)
          const filename = '归档统计表'
          const sheetname = '归档统计表'
          excel.export_json_to_excel({
            header,
            data,
            filename,
            sheetname
          })
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    },
    handleSizeChange(val) {
      // 改变每页数量
      this.listQuery.pageNum = 1
      this.listQuery.pageRow = val
      this.handleFilter()
    },
    handleCurrentChange(val) {
      // 改变页码
      this.listQuery.pageNum = val
      this.handleFilter()
    }
  }
}
</script>

<style scoped>

</style>