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

<template>
  <div class="app-container">
    <!-- 用户select选项 -->
    <el-button-group class="m-b-15">
      <SelectionOrderStatus class="m-r-20" />
      <SelectionOrderBack />
    </el-button-group>
    <el-button-group class="m-r-20">
      <SelectionShopId v-model="form.shop_id" :allSel="true" />
    </el-button-group>
    <!-- 订单列表 -->
    <el-table class="m-t-20 w-100" ref="myTable"
      :data="orderList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
      <el-table-column align="center" type="selection" width="40">
      </el-table-column>
      <el-table-column align="center" prop="id" label="id" width="50">
      </el-table-column>
      <el-table-column prop="order_sn" label="订单号" width="150" min-width="150">
      </el-table-column>
      <el-table-column prop="tel" label="客户电话" min-width="150">
      </el-table-column>
      <el-table-column label="下单时间" width="140" min-width="140">
        <template slot-scope="scope">
          {{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column prop="controler" label="操作" width="200" min-width="200">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="warning" icon="el-icon-edit"
              @click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([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 } from '@/utils'
import SelectionShopId from '@/components/SelectionShopId'
import SelectionOrderStatus from '@/components/SelectionOrderStatus'
import SelectionOrderBack from '@/components/SelectionOrderBack'

export default {
  name: 'Order',
  data () {
    return {
      pageSize: 50, // 每页显示记录条数
      currentPage: 1, // 当前页
      form: {
        shop_id: ''
      }
    }
  },
  components: {
    SelectionShopId,
    SelectionOrderStatus,
    SelectionOrderBack
  },
  computed: {
    // 获取订单列表
    orderList () {
      return this.$store.state.orderList
    }

  },
  methods: {
    countSelIdArr
  },
  watch: {
  },
  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>