线下销售汇总报表

src/api/order.js

@@ -500,3 +500,21 @@ export function orderPaymentRecordAdd(data) {
     data
   })
 }
+
+export function reportOfflineSalesSum(params) {
+  return request({
+    url: '/order/report/offline/sales/sum',
+    method: 'post',
+    params
+  })
+}
+
+export function reportOfflineSalesDetail(params) {
+  return request({
+    url: '/order/report/offline/sales/detail',
+    method: 'post',
+    params
+  })
+}
+
+

src/views/mallManagement/order/order_offline_sales_sum/index.vue

@@ -0,0 +1,251 @@
+<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="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="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+                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="sumExport">导出汇总</el-button>
+          </el-col>          
+          <el-col :xs="24" :sm="24" :lg="24" 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="收款人" prop="paidBy" min-width="140">
+          </el-table-column>
+          <el-table-column align="center" :label="(!screenForm.dateType ? '当月' : '当日') + '订单数'" prop="num">
+          </el-table-column>
+          <el-table-column align="center" :label="(!screenForm.dateType ? '当月' : '当日') + '收款金额'" prop="amount">
+          </el-table-column>
+          <el-table-column align="center" label="销售金额">
+            <el-table-column align="center" label="现金" prop="cashAmount" />
+            <el-table-column align="center" label="微信" prop="wxAmount" />
+            <el-table-column align="center" label="转账" prop="transferAmount" />
+          </el-table-column>
+          <el-table-column align="center" label="支付次数">
+            <el-table-column align="center" label="现金" prop="cashCount" />
+            <el-table-column align="center" label="微信" prop="wxCount" />
+            <el-table-column align="center" label="转账" prop="transferCount" />
+          </el-table-column>
+          <el-table-column align="center" :label="(!screenForm.dateType ? '当月' : '当日') + '退货金额'" prop="refundAmount">
+          </el-table-column>
+          <el-table-column align="center" :label="(!screenForm.dateType ? '当月' : '当日') + '退货次数'" prop="refundCount">
+          </el-table-column>
+          <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="90%">
+      <el-row :gutter="20">
+        <el-col class="tl" v:if="detailList && detailList.length > 0">
+          <el-button size="mini" type="primary" @click="detailExport">导出</el-button>
+        </el-col>
+        <el-col>
+          <el-table :data="detailList" border highlight-current-row>
+            <el-table-column align="center" label="订单号" min-width="190">
+              <template slot-scope="scope">
+                <span style="color: #409EFF; cursor: pointer;" @click="handleOrderClick(scope.row.orderId)">{{ scope.row.orderId }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="商品名称" prop="goodsName" min-width="160" />
+            <el-table-column align="center" label="规格名称" prop="goodsSpecName" min-width="160" />
+            <el-table-column align="center" label="单价" prop="price" />
+            <el-table-column align="center" label="数量" prop="num" />
+            <el-table-column align="center" label="销售金额" prop="totalPrice" />
+            <el-table-column align="center" label="支付方式" prop="payType" />
+            <el-table-column align="center" label="收款状态" prop="payStatus" />
+            <el-table-column align="center" label="订单状态" prop="orderStatus" />
+            <el-table-column align="center" label="业务员" prop="saleName" />
+            <el-table-column align="center" label="下单时间" prop="createTime" min-width="160" />
+          </el-table>  
+        </el-col>        
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { downloadFiles } from '@/utils/util'
+import { reportOfflineSalesSum, reportOfflineSalesDetail } from '@/api/order.js'
+export default {
+  name: 'order_offline_sales_sum',
+  filters: {
+    payTypeFilter(val) {
+      const MAP = {
+        WECHAT: '微信支付',
+        CASH: '现金支付',
+        TRANSFER: '转账支付',
+        ALLINPAY: '通联支付'
+      }
+      return MAP[val]
+    }
+  },
+  data() {
+    return {
+      listLoading: false,
+      dataList: [], // 列表
+      detailList: [], // 明细列表
+      screenForm: {
+        // 筛选表单数据
+        websitId: '', // 门店编号
+        month: '', // 支付时间
+        dateType: 0,
+        dateTime: ''
+      },
+      dateTypes: [
+        { value: 0, label: '月份' },
+        { value: 1, label: '日期' }
+      ],
+      isOpen: false, // 是否展开条件筛选
+      dialogVisible: false,
+      curPaidBy: ''
+    }
+  },
+  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
+  },
+  methods: {
+    // 处理订单号点击事件
+    handleOrderClick(orderId) {
+      // 这里可以添加具体的点击逻辑，例如跳转到订单详情页
+      console.log('点击了订单号：', orderId);
+      // 示例：使用路由跳转（根据项目实际路由配置调整）
+      // this.$router.push({ path: `/order/detail/${orderId}` });
+      this.$router.push({
+        name: "order_detail",
+        query: {
+          orderId: orderId
+        }
+      })
+    },
+    // 查询列表
+    getList() {
+      this.listLoading = true
+      if (!this.screenForm.month) {
+        this.$errorMsg('请选择月份!')
+        return
+      }
+      const params = {
+        websitId: this.screenForm.websitId, // 门店编号
+        startTime: !this.screenForm.dateType ? this.screenForm.month : this.screenForm.dateTime,
+      }
+      reportOfflineSalesSum(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.detailList = []
+      this.curPaidBy = row.paidBy
+      const params = {
+        paidBy: row.paidBy,
+        startTime: !this.screenForm.dateType ? this.screenForm.month : this.screenForm.dateTime,
+      }
+      reportOfflineSalesDetail(params).then(res => {
+        this.detailList = res.data
+      })
+      this.dialogVisible = true
+    },
+    sumExport() {
+      const params = {
+        startTime: !this.screenForm.dateType ? this.screenForm.month : this.screenForm.dateTime,
+      }
+      downloadFiles('order/report/offline/sales/sum/export', params)
+    },       
+    detailExport() {
+      const params = {
+        paidBy: this.curPaidBy,
+        startTime: !this.screenForm.dateType ? this.screenForm.month : this.screenForm.dateTime,
+      }
+      downloadFiles('order/report/offline/sales/detail/export', params)
+    },   
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .row-last .el-col:last-child .el-form-item__content {
+  margin-left: 90px !important;
+}
+</style>