|
@@ -0,0 +1,292 @@
|
|
|
+<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.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="shopName" min-width="160" />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="工程师信息">
|
|
|
+ <el-table-column align="center" label="手机" prop="mobile" 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="sheetId" 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="saleQty" />
|
|
|
+ <el-table-column align="center" label="售价" prop="price" />
|
|
|
+ <el-table-column align="center" label="售价金额" prop="saleValue" />
|
|
|
+ <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',
|
|
|
+ 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.mobile,
|
|
|
+ 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>
|