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>
        <buttonExportExcel ref="exportExcelRef" @click="exportExcel">生成Excel</buttonExportExcel>
      </div>
      <el-table :data="tableData" border style="margin-top: 20px">
        <el-table-column prop="storeName" label="门店"></el-table-column>
        <el-table-column prop="memberName" label="会员" min-width="150px"></el-table-column>
        <el-table-column prop="mobileNumber" label="联系电话" min-width="150px"></el-table-column>
        <el-table-column prop="goodsName" label="货品"></el-table-column>
        <el-table-column prop="goodsPrice" label="定价"></el-table-column>
        <el-table-column prop="discountAmount" label="折扣"></el-table-column>
        <el-table-column prop="orderAmount" label="订单价"></el-table-column>
        <el-table-column prop="memberCouponName" label="优惠券"></el-table-column>
        <el-table-column prop="actualAmount" label="实付金额"></el-table-column>
        <el-table-column prop="saleCount" label="数量"></el-table-column>
        <el-table-column prop="createTime" label="订单创建时间" min-width="150px"></el-table-column>
      </el-table>
      <el-pagination style="background: #ffffff;padding: 20px 0"
                     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 } from "vue";
import { order, orderExport, store } from "/@/api/controllerUrls";
import request from "/@/api/request";
import buttonExportExcel from "/@/components/common/buttonExportExcel.vue";

let tableData = ref([]);

let storeList = ref([]);

let exportExcelRef = 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 exportExcel() {
  const columns = [
    { name: "storeName", label: "门店" },
    { name: "goodsName", label: "货品" },
    { name: "goodsPrice", label: "定价" },
    { name: "discountAmount", label: "折扣" },
    { name: "orderAmount", label: "订单价" },
    { name: "memberCouponName", label: "优惠券" },
    { name: "actualAmount", label: "实付金额" },
    { name: "saleCount", label: "数量" },
    { name: "memberName", label: "会员" },
    { name: "mobileNumber", label: "联系电话" },
    { name: "createTime", label: "订单创建时间" }
  ];//表头中文名
  const res = await request.edit(orderExport, {
    beginDate: search.beginDate,
    endDate: search.endDate,
    storeId: search.storeId
  }, "");
  if (res.code === 1) {
    let data = res.data;
    data.forEach(item => {
      item["memberCouponName"] = item.memberCouponName ? item.memberCouponName : "";
      // item["storeName"] = item.storeName ? item.storeName : "";
    });
    console.log(data);
    exportExcelRef.value.open(data, columns);
  }


}


</script>


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