jsm-mall-front/src/views/auxiliaryFittings/statement/shop-sale-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 type="primary" size="mini" @click="isOpen = !isOpen"
            >{{ isOpen ? '收起' : '展开'
            }}<i class="el-icon--right" :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          /></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="7" :lg="7">
            <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.websitId})${item.name}`"
                  :value="item.websitId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="5" :lg="5">
            <el-form-item label="日期类型" prop="dateType">
              <el-select v-model="screenForm.dateType" filterable placeholder="日期类型" size="small">
                <el-option v-for="(item, index) in dateTypes" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="!screenForm.dateType" :xs="12" :sm="5" :lg="5">
            <el-form-item prop="month" label-width="60">
              <el-date-picker
                v-model="screenForm.month"
                type="month"
                placeholder="请选择月份"
                value-format="yyyy-MM"
                size="small"
                style="width: 150px"
              />
            </el-form-item>
          </el-col>
          <el-col v-else :xs="24" :sm="8" :lg="8">
            <el-form-item prop="dateTime">
              <el-date-picker
                v-model="screenForm.dateTime"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isOpen" :gutter="20" class="row-last">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="工程师手机" prop="workerMobile">
              <el-input v-model="screenForm.workerMobile" placeholder="工程师手机" size="small" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="工程师名称" prop="workerName">
              <el-input v-model="screenForm.workerName" placeholder="名称(模糊)" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="12" :sm="12" :lg="12" class="tl">
            <el-button size="mini" type="primary" @click="handleWorkerSaleSumExport">导出汇总工程师销售额</el-button>
            <el-button size="mini" type="primary" @click="handleWorkerSaleSumDetailExport"
              >导出汇总工程师销售明细</el-button
            >
            <el-button size="mini" type="primary" @click="handleSumSaleDetailExport">导出汇总销售明细</el-button>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="tr">
            <el-button size="mini" @click="resetScreenForm">清空</el-button>
            <el-button size="mini" type="primary" @click="submitScreenForm">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mymain-container">
      <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="网点信息">
            <el-table-column align="center" label="编号" prop="websitId" min-width="80" />
            <el-table-column align="center" label="名称" prop="websitName" min-width="160" />
          </el-table-column>
          <el-table-column align="center" label="工程师信息">
            <el-table-column align="center" label="手机" prop="workerMobile" min-width="120" />
            <el-table-column align="center" label="名称" prop="workerName" min-width="140" />
            <el-table-column align="center" label="归属" prop="websitName" min-width="160" />
          </el-table-column>
          <el-table-column align="center" label="销售金额">
            <el-table-column align="center" label="合计" prop="totalSaleValue" />
            <!-- <el-table-column align="center" label="微信" prop="wxSaleValue" /> -->
            <!--            <el-table-column align="center" label="支付宝" prop="aliSaleValue" />-->
            <el-table-column align="center" label="通联" prop="allinpaySaleValue" />
            <el-table-column align="center" label="现金" prop="cashSaleValue" />
          </el-table-column>
          <el-table-column align="center" label="支付次数">
            <!-- <el-table-column align="center" label="微信" prop="wx" /> -->
            <!--            <el-table-column align="center" label="支付宝" prop="ali" />-->
            <el-table-column align="center" label="通联" prop="allinpay" />
            <el-table-column align="center" label="现金" prop="cash" />
          </el-table-column>
          <!-- <el-table-column align="center" label="赊账单数" prop="account" /> -->
          <!-- <el-table-column align="center" label="赊账金额" prop="accountSaleValue" /> -->
          <el-table-column align="center" label="退货金额" prop="retValue" />
          <el-table-column fixed="right" align="center" label="">
            <template slot-scope="scope">
              <el-button type="text" @click="getDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog :title="'销售明细'" :visible.sync="dialogVisible" width="80%">
      <el-table :data="detailList" border highlight-current-row>
        <el-table-column align="center" label="单号" prop="salesId" min-width="190" />
        <el-table-column align="center" label="商品名称" prop="goodsName" min-width="160" />
        <el-table-column align="center" label="支付方式">
          <template slot-scope="scope">
            <div>{{ scope.row.payType | payTypeFilter }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售数量" prop="salesQty" />
        <el-table-column align="center" label="售价" prop="price" />
        <el-table-column align="center" label="售价金额" prop="saleAmount" />
        <el-table-column align="center" label="进价" prop="cost" />
        <el-table-column align="center" label="进价金额" prop="costValue" />
        <el-table-column align="center" label="支付时间" prop="payTime" min-width="160" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getSaleSum, getSaleSumDetail } from '@/api/material-system/report'
import { downloadFiles } from '@/utils/util'
import { getWebsit } from '@/api/customerManagement.js'
export default {
  name: 'ShopSaleSum',
  filters: {
    payTypeFilter(val) {
      const MAP = {
        WECHAT: '微信支付',
        CASH: '现金支付',
        TRANSFER: '转账支付',
        ALLINPAY: '通联支付'
      }
      return MAP[val]
    }
  },
  data() {
    return {
      listLoading: false,
      dataList: [], // 列表
      detailList: [], // 明细列表
      shopList: [], // 网点列表
      screenForm: {
        // 筛选表单数据
        websitId: '', // 门店编号
        workerMobile: '', // 工程师手机号
        workerName: '', // 工程师名称
        workerBelong: '', // 工程师归属
        month: '', // 支付时间
        dateType: 0,
        dateTime: ''
      },
      dateTypes: [
        { value: 0, label: '月份' },
        { value: 1, label: '日期' }
      ],
      isOpen: false, // 是否展开条件筛选
      dialogVisible: false
    }
  },
  computed: {
    generateMonth() {
      const curDate = new Date()
      const fullYear = curDate.getFullYear()
      const month = curDate.getMonth() + 1 < 10 ? '0' + (curDate.getMonth() + 1) : '' + (curDate.getMonth() + 1)
      return fullYear + '-' + month
    }
  },
  created() {
    this.screenForm.month = this.generateMonth
    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.listLoading = true
      if (!this.screenForm.month) {
        this.$errorMsg('请选择月份!')
        return
      }
      const params = {
        websitId: this.screenForm.websitId, // 门店编号
        workerMobile: this.screenForm.workerMobile, // 工程师手机号
        workerName: this.screenForm.workerName, // 工程师名称
        workerBelong: this.screenForm.workerBelong, // 工程师归属
        month: this.screenForm.dateType ? '' : this.screenForm.month,
        startTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[0] : null,
        endTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[1] : null
      }
      getSaleSum(params).then(res => {
        this.dataList = res.data
        this.listLoading = false
      })
    },
    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.screenForm.month = this.generateMonth
      this.currentPage = 1
      this.getList()
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },
    // 获取明细
    getDetail(row) {
      this.dialogVisible = true
      const params = {
        websitId: row.websitId,
        workerMobile: row.workerMobile,
        month: this.screenForm.dateType ? '' : this.screenForm.month,
        startTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[0] : null,
        endTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[1] : null
      }
      getSaleSumDetail(params).then(res => {
        this.detailList = res.data
      })
    },
    // 导出汇总工程师销售额
    handleWorkerSaleSumExport() {
      const screenData = {
        websitId: this.screenForm.websitId, // 门店编号
        workerMobile: this.screenForm.workerMobile, // 工程师手机号
        workerName: this.screenForm.workerName, // 工程师名称
        workerBelong: this.screenForm.workerBelong, // 工程师归属
        month: this.screenForm.dateType ? '' : this.screenForm.month,
        startTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[0] : null,
        endTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[1] : null
      }
      downloadFiles('websit/report/export/worker/buy/sum', screenData)
    },
    // 导出汇总工程师销售明细
    handleWorkerSaleSumDetailExport() {
      const screenData = {
        websitId: this.screenForm.websitId, // 门店编号
        workerMobile: this.screenForm.workerMobile, // 工程师手机号
        workerName: this.screenForm.workerName, // 工程师名称
        workerBelong: this.screenForm.workerBelong, // 工程师归属
        month: this.screenForm.dateType ? '' : this.screenForm.month,
        startTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[0] : null,
        endTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[1] : null
      }
      downloadFiles('websit/report/export/worker/buy/sum/Detail', screenData)
    },
    // 导出汇总销售明细
    handleSumSaleDetailExport() {
      const screenData = {
        websitId: this.screenForm.websitId, // 门店编号
        workerMobile: this.screenForm.workerMobile, // 工程师手机号
        workerName: this.screenForm.workerName, // 工程师名称
        workerBelong: this.screenForm.workerBelong, // 工程师归属
        month: this.screenForm.dateType ? '' : this.screenForm.month,
        startTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[0] : null,
        endTime: this.screenForm.dateType && this.screenForm.dateTime ? this.screenForm.dateTime[1] : null
      }
      downloadFiles('websit/report/export/sum/buy/detail', screenData)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .row-last .el-col:last-child .el-form-item__content {
  margin-left: 90px !important;
}
</style>