jsm-mall-front/src/views/auxiliaryFittings/statement/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="handlePurchaseCategorySumExport"
            >导出月度网点采购类别</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="websitId">
              <el-select v-model="screenForm.websitId" filterable placeholder="网点" size="small">
                <el-option label="全部" value="" />
                <el-option v-for="(item, index) in shopList" :key="index" :label="item.name" :value="item.websitId" />
              </el-select>
            </el-form-item>
          </el-col>
          <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" />
          <el-table-column align="center" label="网点编号" prop="websitId" />
          <el-table-column align="center" label="网点名称" prop="shopName" width="220px" />
          <el-table-column align="center" label="工单网点编号" prop="websiteNumber" width="120px" />
          <el-table-column align="center" label="采购">
            <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" width="110px" />
            <el-table-column align="center" label="包扎带总价" prop="bzdVal" width="110px" />
            <el-table-column align="center" label="总采购金额" prop="purchaseTotalVal" width="120px" />
          </el-table-column>
          <el-table-column align="center" label="上月库存金额" prop="lastMonthVal" width="120px" />
          <el-table-column align="center" label="当月损溢数量" prop="totalLostQty" width="120px" />
          <el-table-column align="center" label="当月损溢金额" prop="totalLostVal" width="120px" />
          <el-table-column align="center" label="调拨">
            <el-table-column align="center" label="铜管(公斤)" width="110px">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.tgQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="铜管总价">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.tgVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="保温棉(条)" width="110px">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.bwmQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="保温棉总价" width="110px">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.bwmVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="电缆(米)">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.dlQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="电缆总价">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.dlVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="支架(付)">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.zjQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="支架总价">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.zjVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="冷媒(罐)">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.lmQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="冷媒总价">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.lmVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="五金">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.wjQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="五金总价">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.wjVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="其它">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.jtQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="其它总价">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.jtVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="开关">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.kgQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="开关总价">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.kgVal }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="包扎带" width="110px">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.bzdQty }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="包扎带总价" width="110px">
              <template slot-scope="{ row }">
                {{ row.transferItemDetail.bzdVal }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadFiles } from '@/utils/util'
import { getPurchaseCategorySum } from '@/api/material-system/report'
import { getWebsit } from '@/api/customerManagement.js'
export default {
  name: 'PurchaseCategorySum',
  data() {
    return {
      listLoading: false,
      dataList: [], // 列表
      shopList: [], // 网点列表
      screenForm: {
        // 筛选表单数据
        websitId: '', // 门店编号
        yearMonth: '' // 年月
      }
    }
  },
  created() {
    getWebsit({ status: true }).then(res => {
      this.shopList = res.data
      if (this.shopList && this.shopList.length === 1) {
        this.screenForm.websitId = this.shopList[0].websitId
      }
    })
  },
  methods: {
    // 查询列表
    getList() {
      this.$refs.screenForm.validate(valid => {
        if (valid) {
          this.listLoading = true
          const params = {
            websitId: this.screenForm.websitId, // 门店编号
            month: this.screenForm.yearMonth // 年月
          }
          getPurchaseCategorySum(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
          })
        }
      })
    },
    // 提交筛选表单
    submitScreenForm() {
      this.getList()
    },
    handlePurchaseCategorySumExport() {
      this.$refs.screenForm.validate(valid => {
        if (valid) {
          const screenData = {
            websitId: this.screenForm.websitId, // 门店编号
            month: this.screenForm.yearMonth // 年月
          }
          downloadFiles('websit/report/export/purchase-category-sum', screenData)
        }
      })
    }
  }
}
</script>

<style scoped></style>