merchant-web/src/views/modules/product/index.vue

<template>
  <div>
    <obj-table-plus
      ref="oTable"
      :tableCols="tableCols"
      @query="queryList"
      v-model="dataList"
    >
      <template slot="tableTop">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="平台分类">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户分类">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品搜索">
            <el-input
              v-model="formInline.user"
              placeholder="商品搜索"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="$refs.oTable.reload()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="在售" name="在售"></el-tab-pane>
          <el-tab-pane label="仓库中" name="仓库中"></el-tab-pane>
          <el-tab-pane label="折扣" name="折扣"></el-tab-pane>
        </el-tabs>
        <div class="mb-2">
          <el-button type="primary" size="small" @click="addProduct"
            >添加商品</el-button
          >
        </div>
      </template>
    </obj-table-plus>
    <add-or-update ref="addOrUpdate"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./popup/add-or-update.vue";
export default {
  components: { AddOrUpdate },
  data() {
    return {
      activeName: "出售中",
      dataList: [],
      formInline: {
        user: "",
        region: "",
      },
      productFilterType: "SALE",
    };
  },
  methods: {
    addProduct() {
      this.$refs.addOrUpdate.toggle().add();
    },
    queryList(pageNo, pageSize) {
      this.$api.mer_admin
        .getProductPage({
          p: {
            pageNumber: pageNo,
            pageSize: pageSize,
          },
          productFilterType: this.productFilterType,
          merchantId: JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
          shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
          productQuerySortParam: [],
        })
        .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);
        });
    },
    handleClick() {
      switch (this.activeName) {
        case "在售":
          this.productFilterType = "SALE";
          break;
        case "仓库中":
          this.productFilterType = "WAREHOUSE";
          break;
        case "折扣":
          this.productFilterType = "DISCOUNT";
          break;
      }
      this.$refs.oTable.reload();
    },
  },
  computed: {
    tableCols() {
      return [
        {
          title: "ID",
        },
        {
          title: "商品图",
        },
        {
          title: "商品名称",
        },
        {
          title: "商品售价",
        },
        {
          title: "销量",
        },
        {
          title: "库存",
        },
        {
          title: "状态",
        },
        {
          title: "操作",
        },
      ];
    },
  },
};
</script>

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