merchant-web/src/views/modules/marketing/points-mall/popup/commodity.vue

<template>
  <obj-modal
    ref="modal"
    labelWidth="150px"
    :modalConfig="modalConfig"
    :modalData="modalData"
    :modalHandles="modalHandles"
  >
    <template slot="dialog__content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品搜索">
          <el-input v-model="formList.name" placeholder="商品搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">查询</el-button>
          <el-button type="primary" @click="Reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        @select="select"
        @select-all="selectAll"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="商品图" width="100">
          <template slot-scope="scope">
            <el-image
              :preview-src-list="[scope.row.productPhotoList[0].url]"
              :src="scope.row.productPhotoList[0].url"
            ></el-image
          ></template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="name" label="商品售价">
          <template slot-scope="scope">
            <span>￥{{ getSalePrice(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="折扣">
          <template slot-scope="scope">
            <span>{{ scope.row.discountActivity?.ruleObject.discount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="saleNum" label="销量" />
        <el-table-column prop="stockNum" label="库存" />
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="query.pageNumber"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="query.pageSize"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
  </obj-modal>
</template>

<script>
import { debounce, cloneDeep } from "lodash";
export default {
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "请点击选择商品 (提示：最多选择5个商品)",
        show: false,
        width: "1000px",
      },
      query: {
        pageNumber: 1,
        pageSize: 10,
      },
      total: 0,
      modalData: {},
      dataList: [], //表格数据
      selectList: [],
      formInline: {},
      formList: {
        name: "",
      },
    };
  },
  methods: {
    queryList() {
      this.$api.mer_admin
        .getProductPage({
          p: {
            pageNumber: this.query.pageNumber,
            pageSize: this.query.pageSize,
          },
          ...this.formInline,
          ...this.formList,
          productFilterType: "SALE",
          merchantId: JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
          productQuerySortParam: [],
        })
        .then((res) => {
          console.log(res);
          this.dataList = res.data.data.data;
          this.total = Number(res.data.data.total);
        })
        .catch((err) => {
          this.dataList = [];
        });
    },
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: (row) => {
          console.log(row);
          this.formInline = row;
          this.isAdd = true;
          this.$nextTick(() => {
            this.queryList();
          });
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    select(selection, row) {
      if (selection.length > 5) {
        this.$message.error("最多选择5个商品");
        this.$refs.multipleTable.toggleRowSelection(row, false);
      } else {
        this.selectList = selection;
      }
    },
    selectAll(selection) {
      if (selection.length > 5) {
        this.$message.error("最多选择5个商品");
        selection.length = 5;
        this.selectList = selection;
        console.log(selection);
      } else {
        this.selectList = selection;
      }
    },
    getSalePrice(row) {
      if (row.minSalePrice == row.maxSalePrice) {
        return row.minSalePrice;
      } else {
        return `${row.minSalePrice}~${row.maxSalePrice}`;
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.pageNumber = val;
      this.getList();
    },
    Reset() {
      this.formList = {};
      this.queryList();
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          handle: () => {
            this.$emit("getProduct", this.selectList);
            this.toggle();
          },
        },
      ];
    },
    tableEvent() {
      return {
        "checkbox-all": ({ records, reserves }) => {
          console.log(records, reserves);
          this.selectList = [...records, ...reserves];
        },
        "checkbox-change": ({ records, reserves }) => {
          console.log(records, reserves);
          if (records.length > 5) {
            this.$message.error("最多选择5个商品");
            return;
          }
          this.selectList = [...records, ...reserves];
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .selectAllbtnDis .cell .el-checkbox__inner {
  display: none;
}
</style>