admin/src/views/order/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one">
          <c-search :is_search="true" :fields="fields" @search="btSearch"></c-search>
        </el-col>
        <el-col :span="24" class="two">
          <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @view="toView" @pay="toPay"> </data-table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { order_type } from '@common/src/layout/site';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('order');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      // 查询
      searchInfo: {},
      list: [],
      total: 0,
      fields: [
        { label: '序号', options: { type: 'index' } },
        { label: '订单号', model: '_id', isSearch: true },
        { label: '下单时间', model: 'time' },
        { label: '下单桌号', model: 'table' },
        { label: '支付金额', model: 'money' },
        { label: '用餐人数', model: 'num' },
        {
          label: '订单类型',
          model: 'type',
          type: 'select',
          format: (i) => {
            let data = this.typeList.find((r) => r.dict_value == i);
            if (data) return data.dict_label;
            else return '暂无';
          },
          isSearch: true,
        },
        { label: '备注', model: 'remark' },
      ],
      opera: [
        { label: '详情', method: 'view' },
        { label: '收款', method: 'pay', confirm: true, type: 'danger' },
      ],
      // 订单类型
      typeList: order_type,
    };
  },
  created() {
    this.search();
  },
  mounted() {},
  methods: {
    ...mapActions(['query', 'fetch', 'delete']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info, ...this.searchInfo });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    btSearch(query) {
      this.$set(this, `searchInfo`, query);
      this.search();
    },
    // 收款
    toPay() {
      console.log('收款');
    },
    // 详情
    toView({ data }) {
      this.$router.push({ path: '/order/add', query: { id: data._id } });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.dialog_1 {
  video {
    width: 100%;
    height: 390px;
    background-color: #000000;
  }
}
</style>