farming-business-shop-web/src/views/activity/components/spulist.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item prop="key">
        <el-input
          v-model="queryParams.key"
          placeholder="请输入商品名称/商品id"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品分类" prop="categoryId">
        <el-cascader
          v-model="queryParams.categoryId"
          ref="formCascader"
          placeholder="请选择分类"
          :props="categoryprops"
          style="width: 120px"
          @change="cascaderChange"
        />
      </el-form-item>
      <el-form-item label="类型" prop="scope">
        <el-select
          v-model="queryParams.scope"
          placeholder="请选择类型"
          style="width: 140px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="农商批发商品" :value="1"> </el-option>
          <el-option label="同城特价商品" :value="2"> </el-option>
          <el-option label="同城秒送商品" :value="3"> </el-option>
          <el-option label="会员专区商品" :value="4"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态" prop="spuStatus">
        <el-select
          v-model="queryParams.spuStatus"
          placeholder="请选择商品状态"
          style="width: 140px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="售罄" value="2"> </el-option>
          <el-option label="上架" value="0"> </el-option>
          <el-option label="下架" value="1"> </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableList"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :selectable="checkSelectable"
      />
      <el-table-column label="商品Id" align="center" prop="id" />
      <el-table-column label="商品信息" align="center">
        <template slot-scope="scope">
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
            "
          >
            <el-image
              style="width: 30px; height: 30px"
              :src="scope.row.pic"
              :preview-src-list="[scope.row.pic]"
            >
            </el-image>
            <div
              :title="scope.row.spuName"
              style="
                width: 80px;
                height: auto;
                word-wrap: break-word;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ scope.row.spuName }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分类" align="center" prop="categoryName" />
      <el-table-column label="商品状态" align="center">
        <template slot-scope="scope">
          {{
            scope.row.spuStatus == 2
              ? "售罄"
              : scope.row.spuStatus == 0
              ? "上架"
              : scope.row.spuStatus == 1
              ? "下架"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="销量" align="center" prop="salesVolume" />
      <el-table-column label="价格" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.originalPrice }}元/{{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" width="120">
        <template slot-scope="scope">
          {{
            scope.row.scope == 1
              ? "农商批发商品"
              : scope.row.scope == 3
              ? "同城秒送商品"
              : scope.row.scope == 4
              ? "会员专区"
               : scope.row.scope == 2
              ? "同城特价商品"
              : ""
          }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getRaffleSpuListPage } from "@/api/marketing/lottery";
import { getClassificationListPage } from "@/api/common/index";
export default {
  props: ["selectData"],
  name: "product",
  data() {
    return {
      sort: {
        merchantClassifyId: "",
      },
      sortDialog: false,
      // 遮罩层
      loading: true,
      showSearch: true,
      total: 0,
      tableList: [],
      title: "",
      dialogVisible: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        key: "",
        categoryId: "",
        categoryName: "",
        scope: "",
      },
      // 表单参数
      form: {},
      categoryprops: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.categoryLazyLoad,
      },
      selectList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    checkSelectable(row) {
      // 如果已有选中数据，检查当前行是否已被选中且状态不为禁用
      if (this.selectData && this.selectData.length > 0) {
        const selectedIds = this.selectData.map((item) => item.id);
        return !selectedIds.includes(row.id) && row.status !== "禁用";
      }
      // 如果没有选中数据，直接检查行状态
      return row.status !== "禁用";
    },
    handleSelectionChange(val) {
      this.selectList = val;
      this.$emit("voucherChoose", val);
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      getRaffleSpuListPage(this.queryParams).then((res) => {
        this.tableList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    cascaderChange(val) {
      this.queryParams.categoryId = val[val.length - 1];
    },
    categoryLazyLoad(node, resolve) {
      let level = node.level;
      if (!node.data) {
        getClassificationListPage({ parentId: 0 }).then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 1) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
            // level: 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 2) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 1,
            level: 1,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else {
        resolve({});
      }
    },
  },
};
</script>
<style>
.el-form-item {
  margin-bottom: 10px;
}
</style>