merchant-web/src/views/modules/marketing/points-mall/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 v-if="storeList.length > 1" label="商铺">
            <el-select 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 label="商品ID">
            <el-input
              placeholder="请输入商品ID"
              v-model="formInline.productId"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input
              placeholder="请输入商品名称"
              v-model="formInline.productName"
            ></el-input>
          </el-form-item>
          <el-form-item label="兑换状态">
            <el-select v-model="formInline.redeemEnable" placeholder="请选择">
              <el-option
                v-for="item in [
                  { value: true, label: '启用' },
                  { value: false, label: '禁用' },
                ]"
                :key="item.marketId"
                :label="item.marketName"
                :value="item.marketId"
              ></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>
        <div class="mb-2">
          <el-button @click="add" type="primary" size="small">+添加</el-button>
        </div>
      </template>
    </obj-table-plus>
    <!-- 添加或编辑 -->
    <add-or-update
      :marketId="formInline.marketId"
      :shopId="formInline.shopId"
      @queryList="$refs.oTable.reload()"
      ref="addOrUpdate"
    ></add-or-update>
    <!-- 查看详情 -->
    <!-- <viewDetails ref="viewDetails"></viewDetails> -->
  </div>
</template>

<script>
import AddOrUpdate from "./popup/add-or-update.vue";
// import viewDetails from "./popup/view-details.vue";
import { mapState } from "vuex";
export default {
  components: { AddOrUpdate },
  data() {
    return {
      dataList: [],
      formInline: {
        marketId: "",
        shopId: "",
        unitType: "",
        productId: "",
        productName: "",
        redeemEnable: "",
      },
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      productFilterType: "SALE",
      selectList: [],
      value1: [],
    };
  },
  created() {
    this.formInline = {
      unitType: JSON.parse(sessionStorage.getItem("userInfo")).unitType,
      marketId: this.marketId,
      shopId: this.shopId,
    };
    this.$nextTick(() => {
      this.$refs.oTable.reload();
    });
  },
  methods: {
    queryList(pageNo, pageSize) {
      this.$api.marketing
        .PointsProductPage({
          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);
        });
    },
    add() {
      this.$refs.addOrUpdate.toggle().add();
    },
    reset() {
      this.formInline = {
        unitType: JSON.parse(sessionStorage.getItem("userInfo")).unitType,
        marketId: this.marketId,
        shopId: this.shopId,
      };
      this.$refs.oTable.reload();
    },
  },
  computed: {
    tableCols() {
      return [
        { type: "checkbox", width: "60px", fixed: "left" },
        // { type: "seq", width: "60px", align: "center", title: "序号" },
        {
          title: "商品ID",
          align: "center",
          field: "productId",
        },
        {
          title: "商品名称",
          align: "center",
          field: "productName",
        },
        {
          title: "兑换积分",
          align: "center",
          field: "maxPoints",
          type: "jsx",
          render: ({ row }) => {
            if (row.minPoints == row.maxPoints) {
              return <span>{row.minPoints}</span>;
            } else {
              return (
                <span>
                  {row.minPoints}-{row.maxPoints}
                </span>
              );
            }
          },
        },
        {
          title: "剩余兑换库存",
          align: "center",
          field: "totalInventory",
        },
        {
          title: "兑换状态",
          align: "center",
          field: "redeemEnable",
          type: "jsx",
          render: ({ row }) => {
            let changStatus = () => {
              if (row.redeemEnable) {
                this.$confirm("是否开启积分商品兑换, 是否继续?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$api.marketing
                      .reverseEnablePointsProduct({
                        id: row.id,
                      })
                      .then((res) => {
                        this.$refs.oTable.reload();
                      })
                      .catch((err) => {
                        this.$refs.oTable.reload();
                      });
                  })
                  .catch(() => {
                    this.$refs.oTable.reload();
                  });
              } else {
                this.$confirm("是否关闭积分商品兑换, 是否继续?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$api.marketing
                      .reverseEnablePointsProduct({
                        id: row.id,
                      })
                      .then((res) => {
                        this.$refs.oTable.reload();
                      })
                      .catch((err) => {
                        this.$refs.oTable.reload();
                      });
                  })
                  .catch(() => {
                    this.$refs.oTable.reload();
                  });
              }
            };
            return (
              <el-switch
                onChange={changStatus}
                v-model={row.redeemEnable}
                active-text="启用"
                inactive-text="关闭"
              ></el-switch>
            );
          },
        },
        {
          title: "已兑换数",
          align: "center",
          field: "totalRedeemQuantity",
        },
        {
          title: "操作",
          fixed: "right",
          type: "jsx",
          align: "center",
          width: "200px",
          render: ({ row }) => {
            let edit = () => {
              this.$api.marketing
                .PointsProductDetail({
                  id: row.id,
                })
                .then((res) => {
                  this.$refs.addOrUpdate
                    .toggle({ ...res.data.data, productName: row.productName })
                    .update();
                })
                .catch((err) => {});
            };
            let deleteProduct = () => {
              this.$api.marketing
                .deletePointsProduct({ id: row.id })
                .then((res) => {
                  this.$message.success("删除成功");
                  this.$refs.oTable.reload();
                })
                .catch((err) => {});
            };
            return (
              <div>
                <el-button
                  style="margin-right:10px"
                  size="mini"
                  type="primary"
                  onClick={edit}
                >
                  编辑
                </el-button>
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  onConfirm={deleteProduct}
                  title="确定删除吗？"
                >
                  <el-button size="mini" slot="reference" type="danger">
                    删除
                  </el-button>
                </el-popconfirm>
              </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>