equipment/src/views/print/grant_list.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @keyup.enter.native="handleFilter"
          />
          <el-input v-model="listQuery.shiyongdanwei" placeholder="使用单位" clearable style="width: 240px" @keyup.enter.native="handleFilter" />
          <el-select v-model="listQuery.shebeizhongleidaima" placeholder="请选择设备种类" clearable style="width: 160px">
            <el-option v-for="item in sbzlList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="listQuery.jianyanleibie" placeholder="检验类别" clearable style="width:100px" value="" @change="handleFilter">
            <el-option value="定期检验" label="定期检验" />
            <el-option value="监督检验" label="监督检验" />
            <el-option value="制造监检" label="制造监检" />
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
          <el-button type="success" icon="el-icon-printer" @click="exportGrant">
            导出列表
          </el-button>
          &nbsp;
          <span style="color: #c26a3e">合计台数：<span style="color: #40c9c6">{{ sumTaishu }}</span> 台</span>
          &nbsp;
          <span style="color: #c26a3e">合计金额：<span style="color: #40c9c6">{{ sumJine }}</span> 元</span>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="list"
      :data="list"
      height="600"
      border
      fit
      highlight-current-row
      size="small"
      width="100%"
      @row-click="onRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column align="center" label="检验类别" prop="jianyanleibie" />
      <el-table-column align="center" label="报告编号" prop="baogaobianhao" />
      <el-table-column align="center" label="使用单位" prop="shiyongdanwei" width="400" />
      <!--el-table-column align="center" :formatter="formatter.getChineseName" label="检验员" prop="jianyanyuan" /-->
      <el-table-column align="center" label="发票号码" prop="lingqurenDianhua" />
      <el-table-column align="center" label="发放日期" prop="createTime" />
      <el-table-column align="center" label="台数" prop="taishu" />
    </el-table>
    <pagination v-show="total > 0" :total="total" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { parseTime, downloadFile } from '@/utils'
import YsjlApi from '@/api/ysjl'
export default {
  name: 'PrintYiFaFang',
  components: { Pagination },
  data() {
    return {
      dateRange: '',
      listQuery: {
        pageNum: 1, // 页码
        pageSize: 20, // 每页条数
        orderBy: 'create_time desc' // 排序字段
      },
      total: 0,
      list: [],
      flowUserList: [],
      dialogFormVisible: false,
      multipleSelection: [],
      multipleSelectionLink: [],
      dialogQueryVisible: false,
      sbzlList: [],
      jylbList: [],
      userList: [],
      sumTaishu: 0,
      sumJine: 0
    }
  },
  watch: {
    dateRange(newVal) {
      if (newVal && newVal.length > 0) {
        this.listQuery.startTime = this.dateRange[0]
        this.listQuery.endTime = this.dateRange[1]
      } else {
        this.listQuery.startTime = null
        this.listQuery.endTime = null
      }
    }
  },
  created() {
    this.getList()
    this.getSbzlList()
  },
  mounted() {
    const that = this
    this.common.$on('bggl-print-list', function() {
      that.handleFilter()
    })
  },
  methods: {
    handleFilter() {
      // 查询事件
      this.listQuery.pageNum = 1
      this.getList()
    },
    getList() {
      this.api({
        url: '/ysjlFafang/list',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.total = data.total
        this.sumTaishu = this.getSummaries('taishu', this.list)
        this.sumJine = this.getSummaries('hejijine', this.list)
      })
    },
    getSbzlList() {
      this.api({
        url: '/sedirectory/getList',
        method: 'get',
        params: {
          sbzl: undefined,
          level: '1'
        }
      }).then(data => {
        this.sbzlList = data
      })
    },
    getIndex($index) {
      // 表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageSize + $index + 1
    },
    onRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val
    },
    exportGrant() {
      // 导出发放列表
      YsjlApi.exportExcel(this.listQuery).then(data => {
        downloadFile(data, parseTime(new Date()) + '-' + '报告领取记录数据', 'xlsx')
      })
    },
    getSummaries(columns, data) {
      console.log(data)
      console.log(columns)
      const sums = []
      const values = data.map(item => Number(item[columns]))
      if (!values.every(value => isNaN(value))) {
        sums[0] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
      }
      return sums
    }
  }
}
</script>

<style scoped>
  .app-container {
    padding-bottom: 0px;
  }
</style>