management/src/views/home/data_tables.vue

<template>
  <div class="app-container">
    <!-- <el-tabs v-model="orderType" @tab-click="getTableData">
      <el-tab-pane label="收款" name="1"></el-tab-pane>
      <el-tab-pane label="销量" name="2"></el-tab-pane>
    </el-tabs> -->
    <div class="head-container">
      <el-form :model="query" inline label-position="left">
        <el-radio-group v-model="timeValue" @change="timeChange">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="0">今天</el-radio-button>
          <el-radio-button label="-1">昨天</el-radio-button>
          <el-radio-button label="-7">最近7天</el-radio-button>
          <el-radio-button label="-30">最近30天</el-radio-button>
          <el-radio-button label="week">本周</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="custom">自定义</el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
          <el-button icon="el-icon-download" v-loading="downloadLoading" @click="downloadHandle">
            <span v-if="!downloadLoading">导出Excel</span>
            <span v-else>下载中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="head-container">
      <div class="collect_wrap">
        <div class="item" v-for="item in payCountList" :key="item.id">
          <div class="icon_wrap" style="--bg-color:#C978EE">
            <i class="icon" :class="item.icon"></i>
          </div>
          <div class="info">
            <div class="m">
              <template v-if="item.isAmount == 1">￥</template>
{{ item.payAmount }}
</div>
<div class="t">{{ item.payType }}</div>
</div>
</div>
</div>
</div> -->
    <div class="head-container">
      <el-table :data="tableData.data" v-loading="tableData.loading" v-if="orderType == 1">

        <el-table-column type="index" width="50">
        </el-table-column>
        <!-- <el-table-column label="序号" prop="id"></el-table-column> -->
        <!-- <el-table-column label="区域id" prop="areaId"></el-table-column> -->
        <el-table-column label="区域名称" prop="areaName"></el-table-column>
        <!-- <el-table-column label="门店id" prop="shopId"></el-table-column> -->
        <!-- <el-table-column label="台桌Id" prop="tableId"></el-table-column> -->
        <el-table-column label="台桌号" prop="tableName"></el-table-column>
        <el-table-column label="订单数量" prop="orderCount">
          <template v-slot="scope">
            <div class="cursor-pointer" @click="toTableOrderList(scope.row)">
              {{ scope.row.orderCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" prop="orderAmount"></el-table-column>

      </el-table>
      <!-- <el-table :data="tableData.data" v-loading="tableData.loading" v-if="orderType == 2">
        <el-table-column label="商品名称" prop="productName"></el-table-column>
        <el-table-column label="商品分类" prop="cateName"></el-table-column>
        <el-table-column label="商品描述" prop="productSkuName"></el-table-column>
        <el-table-column label="销量" prop="salesNum"></el-table-column>
        <el-table-column label="退单量" prop="refNum"></el-table-column>
        <el-table-column label="销售金额" prop="salesAmount">
          <template v-slot="scope">
            ￥{{ scope.row.salesAmount }}
          </template>
        </el-table-column>
        <el-table-column label="退款金额" prop="refAmount">
          <template v-slot="scope">
            ￥{{ scope.row.refAmount }}
          </template>
        </el-table-column>
      </el-table> -->
    </div>
    <!-- <div class="head-container">
      <el-pagination  :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
        @current-change="paginationChange" @size-change="sizeChange"
        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div> -->
  </div>
</template>

<script>
import { summaryTable, summaryTableDownload } from '@/api/table'
import dayjs from "dayjs";
import { downloadFile } from "@/utils/index";

export default {
  data() {
    return {
      timeValue: "",
      resetQuery: null,
      orderType: "1",
      categorys: [],
      query: {
        createdAt: [],
        proName: '',
        cateId: ''
      },
      tableData: {
        data: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0
      },
      downloadLoading: false,
      payCountList: "",
      payCountTotal: 0
    };
  },
  filters: {
    timeFilter(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  mounted() {
    this.resetQuery = { ...this.query };
    this.getTableData();
  },
  methods: {
    //携带table id跳转到订单列表页面
    toTableOrderList(data) {
      // console.log(data)
      this.$router.push({
        path: '/order_manage/order_list',
        query: {
          tableName: data.tableName,
          timeValue: this.timeValue
        }
      })
    },
    // 导出Excel
    async downloadHandle() {
      try {
        this.downloadLoading = true;
        const file = await summaryTableDownload({
          startTime: this.query.createdAt[0],
          endTime: this.query.createdAt[1],
        });
        downloadFile(file, "数据", "xlsx");
        this.downloadLoading = false;
      } catch (error) {
        this.downloadLoading = false;
        console.log(error);
      }
    },
    // 重置查询
    resetHandle() {
      this.timeValue = "";
      this.query = { ...this.resetQuery };
      this.page = 0;
      this.getTableData();
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await summaryTable({
          page: this.tableData.page + 1,
          size: this.tableData.size,
          startTime: this.query.createdAt[0],
          endTime: this.query.createdAt[1]
        });
        this.tableData.loading = false;
        this.tableData.data = res;
        this.tableData.total = res.length;
      } catch (error) {
        console.log(error);
      }
    },
    // 切换时间
    timeChange(e) {
      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
      switch (e) {
        case "":
          // 全部
          this.query.createdAt = [];
          break;
        case "0":
          // 今天
          this.query.createdAt = [
            dayjs().format(format[0]),
            dayjs().format(format[1])
          ];
          break;
        case "-1":
          // 昨天
          this.query.createdAt = [
            dayjs()
              .add(-1, "d")
              .format(format[0]),
            dayjs()
              .add(-1, "d")
              .format(format[1])
          ];
          break;
        case "-7":
          // 最近7天
          this.query.createdAt = [
            dayjs()
              .add(-7, "d")
              .format(format[0]),
            dayjs().format(format[1])
          ];
          break;
        case "-30":
          // 最近7天
          this.query.createdAt = [
            dayjs()
              .add(-30, "d")
              .format(format[0]),
            dayjs().format(format[1])
          ];
          break;
        case "week":
          // 本周
          this.query.createdAt = [
            dayjs()
              .startOf("week")
              .format(format[0]),
            dayjs()
              .endOf("week")
              .format(format[1])
          ];
          break;
        case "month":
          // 本周
          this.query.createdAt = [
            dayjs()
              .startOf("month")
              .format(format[0]),
            dayjs()
              .endOf("month")
              .format(format[1])
          ];
          break;
        case "custom":
          // 自定义
          this.query.createdAt = [];
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.cursor-pointer {
  cursor: pointer;
  color: #1890ff;
  transition: all 0.3s;
}

.cursor-pointer:hover {
  opacity: .7;
}

.collect_wrap {
  display: flex;
  gap: 14px;

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 20px;

    .icon_wrap {
      $size: 34px;
      $border: 6px;
      width: $size;
      height: $size;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--bg-color);
      border-radius: 50%;
      position: relative;

      &::after {
        content: "";
        width: $size + $border;
        height: $size + $border;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--bg-color);
        opacity: 0.3;
      }

      .icon {
        font-size: 16px;
        color: #fff;
      }

      .img {
        width: 20px;
        height: 20px;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 10px;

      .m {
        font-weight: bold;
      }

      .t {
        font-size: 12px;
        color: #999;
        padding-top: 4px;
      }
    }
  }
}

.refund {
  color: #ff9731;
  font-weight: bold;
}

.table_order_info {
  .order_no {
    color: #999;
  }

  .type {
    color: #e6a23c;
  }
}

.goods_info {
  .row {
    display: flex;

    &:not(:first-child) {
      margin-top: 10px;
    }

    .cover {
      width: 40px;
      height: 40px;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 10px;

      .sku {
        color: #999;
      }
    }
  }
}
</style>