jsm-mall-front/src/views/auxiliaryFittings/statement/worker-purchase-category-sum/index.vue

<template>
  <div class="app-container">
    <div class="screen-container">
      <div class="top clearfix">
        <div class="title fl">条件筛选</div>
        <div class="fr">
          <el-button size="mini" type="primary" @click="handleWorkerPurchaseCategorySumExport"
            >导出月度师傅采购类别</el-button
          >
        </div>
      </div>
      <el-form ref="screenForm" :model="screenForm" label-width="90px" size="mini" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item
              label="月份"
              prop="yearMonth"
              :rules="[{ required: true, message: '请输入月份', trigger: 'blur' }]"
            >
              <el-date-picker v-model="screenForm.yearMonth" type="month" placeholder="选择月" value-format="yyyy-MM" />
            </el-form-item>
          </el-col>
          <el-col :span="24" class="tr">
            <el-form-item label="">
              <el-button size="mini" type="primary" @click="submitScreenForm">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl" />
        <div class="fr" />
      </div>
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          size="mini"
          border
          header-cell-class-name="headerRowColor"
          highlight-current-row
        >
          <el-table-column align="center" label="年月" prop="yearMonth" width="200px" />
          <el-table-column align="center" label="工单网点编号" prop="websitId" width="200px" />
          <el-table-column align="center" label="工单网点名称" prop="websitName" width="300px" />
          <el-table-column align="center" label="工单师傅编号" prop="workerId" width="200px" />
          <el-table-column align="center" label="工单师傅名称" prop="workerName" width="120px" />
          <el-table-column align="center" label="铜管(公斤)" prop="tgQty" width="110px" />
          <el-table-column align="center" label="铜管总价" prop="tgVal" />
          <el-table-column align="center" label="保温棉(条)" prop="bwmQty" width="110px" />
          <el-table-column align="center" label="保温棉总价" prop="bwmVal" width="110px" />
          <el-table-column align="center" label="电缆(米)" prop="dlQty" />
          <el-table-column align="center" label="电缆总价" prop="dlVal" />
          <el-table-column align="center" label="支架(付)" prop="zjQty" />
          <el-table-column align="center" label="支架总价" prop="zjVal" />
          <el-table-column align="center" label="冷媒(罐)" prop="lmQty" />
          <el-table-column align="center" label="冷媒总价" prop="lmVal" />
          <el-table-column align="center" label="五金" prop="wjQty" />
          <el-table-column align="center" label="五金总价" prop="wjVal" />
          <el-table-column align="center" label="其它" prop="jtQty" />
          <el-table-column align="center" label="其它总价" prop="jtVal" />
          <el-table-column align="center" label="开关" prop="kgQty" />
          <el-table-column align="center" label="开关总价" prop="kgVal" />
          <el-table-column align="center" label="包扎带" prop="bzdQty" />
          <el-table-column align="center" label="包扎带总价" prop="bzdVal" />
          <el-table-column align="center" label="总采购金额" prop="purchaseTotalVal" width="120px" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadFiles } from '@/utils/util'
import { getWorkerPurchaseCategorySum } from '@/api/material-system/report'

export default {
  name: 'WorkerPurchaseCategorySum',
  data() {
    return {
      listLoading: false,
      dataList: [], // 列表
      shopList: [], // 网点列表
      screenForm: {
        // 筛选表单数据
        yearMonth: '' // 年月
      }
    }
  },
  methods: {
    // 查询列表
    getList() {
      this.$refs.screenForm.validate(valid => {
        if (valid) {
          this.listLoading = true
          const params = {
            month: this.screenForm.yearMonth // 年月
          }
          getWorkerPurchaseCategorySum(params).then(res => {
            if (res.data) {
              res.data.forEach(obj => {
                obj.purchaseTotalVal = parseFloat(
                  obj.tgVal + obj.bwmVal + obj.dlVal + obj.zjVal + obj.lmVal + obj.wjVal + obj.jtVal
                ).toFixed(4)
              })
              this.dataList = res.data
            }
            this.listLoading = false
            console.log(res)
          })
        }
      })
    },
    // 提交筛选表单
    submitScreenForm() {
      this.getList()
    },
    handleWorkerPurchaseCategorySumExport() {
      this.$refs.screenForm.validate(valid => {
        if (valid) {
          const screenData = {
            month: this.screenForm.yearMonth // 年月
          }
          downloadFiles('websit/report/export/worker-purchase-category-sum', screenData)
        }
      })
    }
  }
}
</script>

<style scoped></style>