parking/src/views/backend/enterprise/orderManagement/orderHistory/index.vue

<template>
  <div class="default-main ">
    <div style="background: #ffffff;padding: 20px">
      <div style="display: flex;align-items: center;flex-wrap: wrap">
        <el-select v-model="search.storeId" placeholder="销售门店" style="margin-right: 20px;width: 250px" clearable>
          <el-option v-for="item in storeList" :label="item.storeName" :value="item.id"></el-option>
        </el-select>
        <el-date-picker style="margin-right: 20px;width: 250px" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        v-model="search.beginDate" placeholder="起始日期"></el-date-picker>
        <el-date-picker style="margin-right: 20px;width: 250px" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        v-model="search.endDate" placeholder="截止日期"></el-date-picker>
        <el-button type="primary" @click="getData">搜索</el-button>
        <el-button type="success" @click="exExcel">生成Excel</el-button>
      </div>
      <el-table :data="tableData" border style="margin-top: 20px">
        <el-table-column label="门店"></el-table-column>
        <el-table-column label="客户"></el-table-column>
        <el-table-column label="交易类型"></el-table-column>
        <el-table-column label="交易日期"></el-table-column>
        <el-table-column label="成交金额"></el-table-column>
        <el-table-column label="会员状态"></el-table-column>
        <el-table-column label="联系电话"></el-table-column>
      </el-table>
      <el-pagination style="background: #ffffff;padding: 20px 0px"
                     v-model:current-page="page.pageNumber"
                     v-model:page-size="page.pageSize"
                     :page-sizes="page.pageSizes"
                     :background="true"
                     layout="total, sizes,prev, pager, next, jumper"
                     :total="page.total"
                     @size-change="getData()"
                     @current-change="getData()"
      />


    </div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, provide } from "vue";
import { order, orderExport, store } from "/@/api/controllerUrls";
import { exportExcel } from "/@/utils/excel.js";
import request from "/@/api/request";

let tableData = ref([]);

let storeList = ref([]);

let search = reactive({
  storeId: "",
  beginDate: "",
  endDate: ""
});

let page = reactive({
  total: 0,
  pageNumber: 1,
  pageSize: 20,
  pageSizes: [20, 100, 500]
});

onMounted(() => {
  getData();
  getInitData();
});

function getData() {
  request.index(order, {
    limit: page.pageSize,
    page: page.pageNumber,
    beginDate: search.beginDate,
    endDate: search.endDate,
    storeId: search.storeId
  }).then((res) => {
    if (res.code == 1) {
      tableData.value = res.data.list;
      page.total = +res.data.total;
    }
  });
}

function getInitData() {
  request.index(store, {}, "list").then((res) => {
    if (res.code == 1) {
      storeList.value = res.data;
    }
  });
}

async function exExcel() {
  const titleArr = ["姓名", "年龄"];//表头中文名
  const res = await request.index(orderExport, {
    limit: page.pageSize,
    page: page.pageNumber,
    beginDate: search.beginDate,
    endDate: search.endDate,
    storeId: search.storeId
  }, "");
  if (res.code == 1) {
    let data = res.data;
    exportExcel(data, "订单列表", titleArr, "sheet1");
  }


}


</script>


<style scoped lang="scss"></style>