JY1.0/src/views/ManufacturingCenter/MonthEndHourAccounting/index.vue

<template>
  <div class="app-container">
    <el-card>
      <el-date-picker
        v-model="startTime"
        size="small"
        type="daterange"
        align="center"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        range-separator="～"
        style="width:250px;margin-left: 5px;margin-top: 10px;margin-bottom: 10px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"/>
      <el-button size="small" type="primary" icon="el-icon-search" style="margin-left: 5px" plain @click="searchTable">查询</el-button>
      <el-button size="small" type="primary" icon="el-icon-download" plain @click="exportExcel">导出</el-button>
    </el-card>
    <el-card>
      <el-table v-loading="loading" :data="tableData" size="mini" style="max-height: 720px" height="720px" border>
        <el-table-column align="center" label="姓名" width="70px">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="图号" width="150px">
          <template slot-scope="scope">
            {{ scope.row.零件图号_短 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="跟单号" width="120px">
          <template slot-scope="scope">
            {{ scope.row.跟单号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工序" width="50px">
          <template slot-scope="scope">
            {{ scope.row.工序顺序 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工序名称" width="80px">
          <template slot-scope="scope">
            {{ scope.row.工艺名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入准结(分)" width="100px">
          <template slot-scope="scope">
            {{ scope.row.修补准结工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="加工工时(分)" width="100px">
          <template slot-scope="scope">
            {{ scope.row.设备工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="合格件数" width="70px">
          <template slot-scope="scope">
            {{ scope.row.合格数 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="废品件数" width="70px">
          <template slot-scope="scope">
            {{ scope.row.不合格数 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" width="100px">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="加工日期" width="100px">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划准结(分)" width="100px">
          <template slot-scope="scope">
            {{ scope.row.准结定额工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划定额(分)" width="100px">
          <template slot-scope="scope">
            {{ scope.row.单件定额工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="项目名称" width="130px">
          <template slot-scope="scope">
            {{ scope.row.项目名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="机床图号" width="100px">
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="组号" width="70px">
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="设计者" width="70px">
          <template slot-scope="scope">
            {{ scope.row.设计者 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="材料" width="100px">
          <template slot-scope="scope">
            {{ scope.row.材料 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { searchTable } from '@/api/ManufacturingCenter/MonthEndHourAccounting'
export default {
  data() {
    return {
      tableData: [],
      startTime: '',
      loading: false
    }
  },
  methods: {
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.warning('请查询出要导出的数据')
        return
      }
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['日期', '姓名', '图号', '跟单号', '工序', '工序名', '录入准结(分)', '实际工时(分)', '合格件数', '废品件数', '备注', '计划准结(分)', '计划定额(分)', '项目名称', '机床图号', '组号', '设计', '材料']
        const filterVal = ['操作时间', '姓名', '零件图号_短', '跟单号', '工序顺序', '工艺名称', '修补准结工时', '设备工时', '合格数', '不合格数', '备注', '准结定额工时', '单件定额工时', '项目名称', '机床图号', '组号', '设计者', '材料']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '月工时核算表',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    searchTable() {
      if (this.startTime[0] && this.startTime[1]) {
        this.loading = true
        searchTable(this.startTime[0], this.startTime[1]).then(response => {
          this.tableData = response.data
          this.loading = false
        })
      } else {
        this.$message.warning('请选择时间段')
      }
    }
  }
}
</script>