food/src/views/layout/components/main/order/index.vue

<template>
  <div class="app-container">
    <!-- 用户select选项 -->
    <el-row :gutter="15" class="m-t-0">
      <el-col :span="4">
        <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
      </el-col>
      <el-col :span="8">
        <DatePickerOrder class="w-100" />
      </el-col>
      <el-col :span="12">
        <SearchOrder class="w-100" />
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="8">
        <SelectionMainStatus />
      </el-col>
      <el-col :span="8">
        <SelectionShipmentStatus />
      </el-col>
      <el-col :span="8">
        <SelectionRefundStatus />
      </el-col>
    </el-row>
    <!-- 订单列表 -->
    <el-table v-loading="loading" class="m-t-20 w-100" ref="myTable" show-summary :summary-method="getSummaries"
      :data="orderList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
      <el-table-column align="center" type="selection" width="70" min-width="40">
      </el-table-column>
      <el-table-column align="center" prop="id" label="id" width="70">
      </el-table-column>
      <el-table-column prop="order_sn" label="订单号" width="130" min-width="130">
      </el-table-column>
      <el-table-column prop="tel" label="客户电话" min-width="130">
      </el-table-column>
      <el-table-column label="下单时间" width="140" min-width="140">
        <template slot-scope="scope">
          {{ scope.row.order_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column prop="controler" label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="success" icon="el-icon-search"
              @click="$router.replace(`/order/show/${scope.row.id}`)">查看</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
      :total="orderList.length">
    </el-pagination>
  </div>
</template>

<script>

import { countSelIdArr, parseTime, formatPrice } from '@/utils'
import { getOrderList } from '@/utils/api/table'
import SelectionShopId from '@/components/SelectionShopId'
import SelectionMainStatus from '@/components/SelectionMainStatus'
import SelectionShipmentStatus from '@/components/SelectionShipmentStatus'
import SelectionRefundStatus from '@/components/SelectionRefundStatus'
import DatePickerOrder from '@/components/DatePickerOrder'
import SearchOrder from '@/components/SearchOrder'
import { debounce } from 'lodash'// 防抖

export default {
  name: 'Order',
  data () {
    return {
      pageSize: 50, // 每页显示记录条数
      currentPage: 1, // 当前页
      shop_id: this.$store.state.user.shop_id, // 搜索条件 单位id
      orderList: [], // 订单列表
      loading: true// 表格加载动画
    }
  },
  components: {
    SelectionShopId,
    SelectionMainStatus,
    SelectionShipmentStatus,
    SelectionRefundStatus,
    DatePickerOrder,
    SearchOrder
  },
  computed: {
    /**
     * @description: 搜索条件 集合
     */
    orderSerch () {
      return this.$store.getters['app/getOrderSerch']
    }
  },
  methods: {
    countSelIdArr,
    /**
     * @description: 根据 缓存的搜索条件 获取订单列表
     */
    async getOrderList (orderSerch) {
      const res = await getOrderList(orderSerch)
      if (res.data.status === 1) {
        this.orderList = res.data.orderList
        console.log(this.orderList)
        this.loading = false
      } else {
        this.$message.error('获取订单列表失败')
      }
    },
    /**
     * @description: 表单提交 加入防抖
     */
    debouncedGetOrderList: debounce(function (val) {
      this.getOrderList(val)
    }, 500),
    /**
     * @description: 表格求和
     */
    getSummaries () {
      const sum = this.orderList.reduce((acc, order) => {
        return acc + (Number(order.total_price) + Number(order.transport_price) + Number(order.pack_price) - Number(order.refund_price))
      }, 0)
      const total = this.orderList.length
      return ['合计', '', '', '', '', `共 ${total}单 ${formatPrice(sum)}元`]
    }
  },
  watch: {
    shop_id (val) {
      this.loading = true
      this.$store.commit('app/setOrderSerch', { shop_id: val })
    },
    orderSerch: {
      handler (val) {
        this.loading = true
        this.debouncedGetOrderList(val)// 表单提交 加入防抖
      },
      deep: true
    }
  },
  created () {
  },
  filters: {
    countSelIdArr,
    parseTime
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

i {
  font-size: 18px !important;
  margin-right: 12px;
  vertical-align: middle;
}
</style>