merchant-web/src/views/modules/operation-management/order/index.vue

<template>
  <div style="height: calc(100vh - 200px)">
    <obj-table-plus
      ref="oTable"
      style="height: 100%"
      :tableCols="tableCols"
      :tableProp="tableProp"
      @query="queryList"
      v-model="dataList"
      :tableEvent="tableEvent"
      :enableAutoQuery="false"
    >
      <template slot="tableTop">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- <el-form-item label="订单号">
            <el-select v-model="formInline.group" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item v-if="storeList.length > 1" label="摊铺">
            <el-select
              class="filter-item"
              style="width: 200px"
              v-model="formInline.shopId"
              placeholder="请选择摊铺"
            >
              <el-option
                v-for="item in storeList"
                :key="item.shopId"
                :label="item.shopName"
                :value="item.shopId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$refs.oTable.reload()"
              >查询</el-button
            >
            <el-button type="primary" @click="Reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-tabs v-model="formInline.group" @tab-click="handleClick">
          <el-tab-pane
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :name="item.value"
          ></el-tab-pane>
        </el-tabs>
        <!-- <div class="mb-2">
            <el-button type="primary" size="small" @click="addProduct"
              >批量导出</el-button
            >
          </div> -->
      </template>
    </obj-table-plus>
    <!-- 订单详情 -->
    <viewDetails ref="viewDetails"></viewDetails>
  </div>
</template>

<script>
import viewDetails from "./popup/view-details.vue";
import content from "./popup/content.vue";
import { mapState } from "vuex";
export default {
  components: { content, viewDetails },
  data() {
    return {
      activeName: "0",
      value1: "1",
      advanceSellStatus: "",
      dataList: [],
      formInline: {
        group: "",
        shopId: "",
      },
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      statusList: [
        {
          label: "全部订单",
          value: "0",
        },
        {
          label: "待备货",
          value: "1",
        },
        {
          label: "待取货",
          value: "2",
        },
        {
          label: "待收货",
          value: "3",
        },
        {
          label: "已完成",
          value: "4",
        },
      ],
      productFilterType: "SALE",
      selectList: [],
    };
  },
  created() {
    this.formInline = {
      group: "0",
      // marketId: this.marketId,
      shopId: this.shopId,
    };
    this.$nextTick(() => {
      this.$refs.oTable.reload();
    });
  },
  methods: {
    // getData() {
    //   this.$api.mer_admin
    //     .storeList({ marketId: this.formInline.marketId })
    //     .then((res) => {
    //       this.storeList = res.data.data;
    //       this.formInline.shopId = res.data.data[0].shopId;
    //       this.$nextTick(() => {
    //         this.$refs.oTable.reload();
    //       });
    //     });
    // },
    addProduct() {
      this.$refs.addOrUpdate.toggle().add();
    },
    deleteProduct() {
      console.log(this.selectList);
      let integers = this.selectList.map((item) => {
        return item.id;
      });
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("111");
          this.$api.mer_admin.BatchDeleteProducts(integers).then((res) => {
            this.$refs.oTable.reload();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    queryList(pageNo, pageSize) {
      //全部订单
      // this.$api.mer_admin
      //   .orderPage({
      //     pageNumber: pageNo,
      //     pageSize: pageSize,
      //     ...this.formInline,
      //   })
      //   .then((res) => {
      //     console.log(res);
      //     this.$refs.oTable.complete(
      //       res.data.data.data,
      //       Number(res.data.data.total)
      //     );
      //   })
      //   .catch((err) => {
      //     this.$refs.oTable.complete(false);
      //   });
      //根据店铺查询
      this.$api.mer_admin
        .shopOrderPage({
          pageNumber: pageNo,
          pageSize: pageSize,
          ...this.formInline,
        })
        .then((res) => {
          console.log(res);
          this.$refs.oTable.complete(
            res.data.data.data,
            Number(res.data.data.total)
          );
        });
    },
    Reset() {
      this.formInline = {
        group: "0",
        shopId: this.shopId,
      };
      this.$refs.oTable.reload();
    },
    handleClick(e) {
      console.log(e.name);
      if (e.name == "5") {
        this.advanceSellStatus = "";
      } else {
        this.advanceSellStatus = e.name;
      }
      this.$refs.oTable.reload();
    },
    addEarlyWarning() {
      this.$refs.earlyWarning.toggle().add();
    },
  },
  computed: {
    tableCols() {
      return [
        // { type: "checkbox", width: "60px", fixed: "left" },
        {
          type: "seq",
          width: "60px",
          fixed: "left",
          align: "center",
          title: "序号",
        },
        {
          title: "商品详情",
          // align: "center",
          // width: "120px",
          // field: "unitOrderStatus",
          type: "jsx-out",
          render: (col) => {
            console.log(col);
            return <content />;
          },
        },
        {
          title: "总订单号",
          align: "center",
          width: "120px",
          field: "orderNo",
        },
        {
          title: "结算单位订单号",
          align: "center",
          width: "120px",
          field: "unitOrderNo",
        },
        {
          title: "总商品数量",
          align: "center",
          width: "120px",
          field: "productCount",
        },
        {
          title: "顾客支付",
          align: "center",
          width: "120px",
          field: "totalMoney",
        },
        {
          title: "配送费",
          align: "center",
          width: "120px",
          field: "deliveryMoney",
        },
        {
          title: "优惠券减免",
          align: "center",
          width: "120px",
          field: "couponMoney",
        },
        {
          title: "下单时间",
          align: "center",
          width: "120px",
          field: "payTime",
        },
        {
          title: "预计送达时间",
          align: "center",
          width: "120px",
          field: "predictDeliveryTime",
        },
        {
          title: "预计收入",
          align: "center",
          width: "120px",
          field: "predictIncome",
        },
        {
          title: "距离",
          align: "center",
          width: "120px",
          field: "distance",
        },
        {
          title: "预计自动取消时间",
          align: "center",
          width: "120px",
          field: "predictAutoCancelTime",
        },
        {
          title: "备注",
          align: "center",
          width: "120px",
          field: "remark",
        },
        {
          title: "包装费",
          align: "center",
          width: "120px",
          field: "packageMoney",
        },
        {
          title: "平台服务费",
          align: "center",
          width: "120px",
          field: "platformMoney",
        },
        {
          title: "备餐完成时间",
          align: "center",
          width: "120px",
          field: "completePrepareTime",
        },
        {
          title: "开始配送时间",
          align: "center",
          width: "120px",
          field: "startDeliveryTime",
        },
        {
          title: "配送完成时间",
          align: "center",
          width: "120px",
          field: "completeDeliveryTime",
        },
        {
          title: "下单时间",
          align: "center",
          width: "120px",
          field: "createTime",
        },
        {
          title: "完成取货时间",
          align: "center",
          width: "120px",
          field: "pickTime",
        },
        {
          title: "订单完成时间",
          align: "center",
          width: "120px",
          field: "completeTime",
        },
        {
          title: "操作",
          fixed: "right",
          type: "jsx",
          align: "center",
          width: "100px",
          render: ({ row }) => {
            let view = () => {
              this.$refs.viewDetails.toggle(row).update();
            };
            return (
              <div>
                <el-button size="mini" type="primary" onClick={view}>
                  查看
                </el-button>
              </div>
            );
          },
        },
      ];
    },
    tableEvent() {
      return {
        "checkbox-all": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
        "checkbox-change": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
      };
    },
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId",
    ]),
  },
};
</script>

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