cashier-web/src/components/GoodsSelect/index.vue

<template>
  <el-dialog title="选择商品" top="5vh" v-model="dialogVisible" @close="resetHandle">
    <el-form :model="searhForm" inline>
      <el-form-item>
        <el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          style="width: 200px"
          v-model="searhForm.category"
          placeholder="商品分类"
          :disabled="disableCategory"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in categoryList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">查询</el-button>
        <el-button @click="resetHandle">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="head-container">
      <el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
        <el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column>
        <el-table-column label="商品信息">
          <template v-slot="scope">
            <div class="shop_info">
              <el-image :src="scope.row.coverImg" style="width: 30px; height: 30px">
                <template #error>
                  <div class="img_error">
                    <i class="icon el-icon-document-delete"></i>
                  </div>
                </template>
              </el-image>
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template v-slot="scope">
            {{ scope.row.typeEnum }}
          </template>
        </el-table-column>
        <el-table-column label="是否售罄">
          <template v-slot="scope">
            {{ scope.row.isPauseSale == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="是否分销">
          <template v-slot="scope">
            {{ scope.row.isDistribute == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="售价">
          <template v-slot="scope">￥{{ scope.row.lowPrice }}</template>
        </el-table-column>
        <el-table-column label="销量/库存">
          <template v-slot="scope">
            {{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="categoryName"></el-table-column>
        <el-table-column label="操作" v-if="radio">
          <template v-slot="scope">
            <el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :total="tableData.total"
      :current-page="tableData.page"
      :page-size="tableData.size"
      @current-change="paginationChange"
      @size-change="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <template #footer>
      <span class="dialog-footer" v-if="!radio">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import productApi from "@/api/product/index";
import paoductCategoryApi from "@/api/product/productclassification";
import { ElMessage } from "element-plus";
export default {
  props: {
    // 是否禁用分类
    disableCategory: {
      type: Boolean,
      default: false,
    },
    // 是否为单选
    radio: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      searhForm: {
        name: "",
        category: "",
      },
      categoryList: [],
      tableData: {
        page: 1,
        size: 10,
        total: 0,
        loading: false,
        list: [],
      },
      goods: [],
    };
  },
  methods: {
    // 单选商品
    selectHandle(row) {
      this.$emit("success", [{ ...row }]);
      this.close();
    },
    // 确定选商品
    confirmHandle() {
      let res = this.$refs.table.selection;
      console.log(res);
      if (!res) {
        return ElMessage.error("请选择商品");
      }
      this.$emit("success", res);
      this.close();
    },

    // 重置查询
    resetHandle() {
      this.searhForm.name = "";
      this.searhForm.category = "";
      this.tableData.page = 1;
      this.tableData.size = 10;
      this.tableData.list = [];
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e;
      this.getTableData();
    },
    // 商品列表
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await productApi.getPage({
          page: this.tableData.page,
          size: this.tableData.size,
          name: this.searhForm.name,
          categoryId: this.searhForm.category,
        });
        this.tableData.list = res.records;
        this.tableData.total = res.totalRow;

        if (this.goods.length) {
          this.$nextTick(() => {
            this.selection();
          });
        }
        setTimeout(() => {
          this.tableData.loading = false;
        }, 500);
      } catch (error) {
        console.log(error);
      }
    },
    // 商品分类
    async tbShopCategoryGet() {
      try {
        const res = await paoductCategoryApi.getPage({
          page: 1,
          size: 600,
        });
        this.categoryList = res.records;
      } catch (error) {
        console.log(error);
      }
    },
    async show(goods, categoryId) {
      this.dialogVisible = true;
      if (goods && goods.length) {
        this.goods = goods;
      } else {
        this.goods = [];
      }
      if (categoryId) {
        this.searhForm.category = categoryId;
      }

      await this.tbShopCategoryGet();

      await this.getTableData();
    },
    close() {
      this.dialogVisible = false;
    },
    selection() {
      this.goods.forEach((row) => {
        this.tableData.list.forEach((item, index) => {
          if (row.id == item.id) {
            this.$refs.table.toggleRowSelection(this.tableData.list[index]);
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.shop_info {
  display: flex;
  align-items: center;

  span {
    margin-left: 10px;
  }
}
</style>