平台管理，账单管理

src/layout/data/menu.js

@@ -78,7 +78,13 @@ export const adminMenu = [
         icon: 'icon-rencai',
         path: '/system/act',
         name: '平台活动',
-        index: '3-8',
+        index: '2-11',
+      },
+      {
+        icon: 'icon-rencai',
+        path: '/system/bill',
+        name: '账单管理',
+        index: '2-12',
       },
     ],
   },

src/router/module/system.js

@@ -113,4 +113,10 @@ export default [
     meta: { title: '平台管理-平台活动详情' },
     component: () => import(/* webpackChunkName: "system_act_detail" */ '@/views/system/act/detail.vue'),
   },
+  {
+    path: '/system/bill',
+    name: 'system_bill',
+    meta: { title: '平台管理-账单管理' },
+    component: () => import(/* webpackChunkName: "system_bill" */ '@/views/system/bill/index.vue'),
+  },
 ];

src/views/selfShop/bill/index.vue

@@ -9,7 +9,7 @@
           <el-button type="primary" @click="toFile()">对账</el-button>
         </el-col>
         <el-col :span="24" class="two">
-          净销售额：<span>{{ info.total || '暂无' }}</span> 元
+          净销售额：<span>{{ info.total || '0' }}</span> 元
         </el-col>
         <el-col :span="24">
           <el-tabs type="border-card">

src/views/system/bill/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <search-1 :form="searchForm" @onSubmit="search" @querySearch="querySearch" @toReset="toClose" :shopList="shopList"></search-1>
+        </el-col>
+        <el-col :span="24" v-if="afterSaleList.length != '0' || orderList.length != '0'">
+          <el-button type="primary" @click="toFile()">对账</el-button>
+        </el-col>
+        <el-col :span="24" class="two">
+          净销售额：<span>{{ info.total || '0' }}</span> 元
+        </el-col>
+        <el-col :span="24">
+          <el-tabs type="border-card">
+            <el-tab-pane label="订单">
+              <data-table :fields="orderfields" @query="search" :data="orderList" :usePage="false"> </data-table>
+            </el-tab-pane>
+            <el-tab-pane label="售后单">
+              <data-table :fields="afterSalefields" @query="search" :data="afterSaleList" :usePage="false"> </data-table>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+import FileSaver from 'file-saver';
+const ExcelJS = require('exceljs');
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('getBill');
+const { mapActions: outBill } = createNamespacedHelpers('outBill');
+const { mapActions: shop } = createNamespacedHelpers('shop');
+export default {
+  name: 'card-1',
+  props: {},
+  components: { search1: () => import('./parts/search-1.vue') },
+  data: function () {
+    return {
+      searchForm: {},
+      info: {},
+      afterSaleList: [],
+      orderList: [],
+      orderfields: [
+        { label: '订单号', model: 'no' },
+        { label: '订单类型', model: 'type' },
+        { label: '支付时间', model: 'pay_time' },
+        { label: '商品', model: 'goods' },
+        { label: '规格', model: 'spec' },
+        { label: '购买数量', model: 'buy_num' },
+        { label: '单价', model: 'price' },
+        { label: '优惠金额', model: 'discount' },
+        { label: '总价', model: 'total' },
+      ],
+      afterSalefields: [
+        { label: '订单号', model: 'no' },
+        { label: '商品', model: 'goods' },
+        { label: '规格', model: 'spec' },
+        { label: '退款时间', model: 'end_time' },
+        { label: '退款金额', model: 'money' },
+      ],
+      // 多选值
+      selected: [],
+      // 自营店铺信息
+      shop: {},
+      // 店铺列表
+      shopList: [],
+    };
+  },
+  async created() {
+    await this.search();
+    await this.searchOther();
+  },
+  methods: {
+    ...shop({ shopQuery: 'query' }),
+    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
+    ...outBill({ outQuery: 'query', outCreate: 'create' }),
+    // 查询
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let condition = _.cloneDeep(this.searchForm);
+      if (condition.buy_time && condition.shop) {
+        condition[`start`] = _.head(condition.buy_time);
+        condition[`end`] = _.last(condition.buy_time);
+        delete condition.buy_time;
+        let res = await this.query({ skip, limit, ...condition, ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, 'info', res.data);
+          this.$set(this, 'afterSaleList', res.data.afterSaleList);
+          this.$set(this, 'orderList', res.data.orderList);
+        }
+      } else {
+        this.$message({ type: `warning`, message: `请选择查询信息` });
+      }
+    },
+    toClose() {
+      this.searchForm = {};
+      this.search();
+    },
+    // 店铺名称远程查询
+    async querySearch(value) {
+      let res = await this.shopQuery({ name: value });
+      if (this.$checkRes(res)) {
+        this.$set(this, 'shopList', res.data);
+      }
+    },
+    // 导出清单
+    toFile() {
+      const workbook = new ExcelJS.Workbook();
+      let orderList = this.orderList;
+      const worksheet_one = workbook.addWorksheet('订单');
+      let data_one = [['订单号', '订单类型', '支付时间', '商品', '规格', '购买数量', '单价', '优惠金额', '总价']];
+      for (const p1 of orderList) {
+        let p2 = [[p1.no, p1.type, p1.pay_time, p1.goods, p1.spec, p1.buy_num, p1.price, p1.discount, p1.total]];
+        data_one.push(...p2);
+      }
+      for (const val of data_one) {
+        worksheet_one.addRow(val);
+      }
+      let afterSaleList = this.afterSaleList;
+      const worksheet_two = workbook.addWorksheet('售后单');
+      let data_two = [['订单号', '商品', '规格', '退款时间', '退款金额']];
+      for (const p1 of afterSaleList) {
+        let p2 = [[p1.no, p1.goods, p1.spec, p1.end_time, p1.money]];
+        data_two.push(...p2);
+      }
+      for (const val of data_two) {
+        worksheet_two.addRow(val);
+      }
+      worksheet_one.columns.forEach(function (column, i) {
+        column.width = 20;
+      });
+      worksheet_two.columns.forEach(function (column, i) {
+        column.width = 20;
+      });
+      workbook.xlsx.writeBuffer().then((buffer) => {
+        FileSaver.saveAs(
+          new Blob([buffer], {
+            type: 'application/octet-stream',
+          }),
+          `对账单.xlsx`
+        );
+      });
+      // this.$confirm('是否确认对账?', '提示', {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning',
+      // }).then(async () => {
+      //   let order = [];
+      //   for (const p1 of this.orderList) {
+      //     order.push(p1._id);
+      //   }
+      //   let afterSale = [];
+      //   for (const p1 of this.afterSaleList) {
+      //     afterSale.push(p1._id);
+      //   }
+      //   let res;
+      //   res = await this.outCreate({ order, afterSale });
+      //   if (this.$checkRes(res)) {
+      //     this.$message({ type: `success`, message: `对账成功` });
+      //   }
+      // });
+    },
+    // 查询其他信息
+    async searchOther() {},
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.one {
+  margin: 0 0 10px 0;
+}
+.two {
+  span {
+    color: red;
+  }
+}
+.title {
+  text-align: center;
+}
+.el-col {
+  margin: 10px 0;
+}
+</style>

src/views/system/bill/parts/search-1.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="search-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-form :model="form" ref="form" label-width="130px">
+          <el-col :span="7">
+            <el-form-item label="日期" prop="buy_time">
+              <el-date-picker
+                v-model="form.buy_time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="店铺名称" prop="type">
+              <el-select
+                v-model="form.shop"
+                filterable
+                remote
+                reserve-keyword
+                placeholder="请输入商铺名称"
+                :remote-method="querySearch"
+                :loading="loading"
+                @change="handleSelect"
+              >
+                <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit('form')">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="toReset('form')">重置</el-button>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'search-1',
+  props: { form: { type: Object }, shopList: { type: Array } },
+  components: {},
+  data: function () {
+    return { loading: false };
+  },
+  created() {},
+  methods: {
+    querySearch(value) {
+      this.loading = true;
+      this.$emit('querySearch', value);
+      this.loading = false;
+    },
+    handleSelect(value) {
+      this.$set(this.form, `shop`, value);
+    },
+    onSubmit() {
+      this.$emit('onSubmit');
+    },
+    toReset(formName) {
+      this.$refs[formName].resetFields();
+      this.$emit('toReset');
+    },
+  },
+  computed: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .btn {
+    text-align: right;
+  }
+  /deep/.el-form-item {
+    float: left;
+    width: 100%;
+    margin: 0 0 10px 0;
+  }
+}
+</style>