erp/resources/frontend/src/views/goods/combination.vue

<template>
  <div class="pageBox">
    <div class="cardBox">
      <div class="searchBox">
        <div class="row">
          <span>商品名称：</span>
          <el-input v-model="searchForm.sku_title" clearable></el-input>
        </div>
        <div class="row">
          <span>商品编码：</span>
          <el-input v-model="searchForm.external_sku_id" clearable></el-input>
        </div>
        <div class="row">
          <el-button type="primary" @click="handleChoose(1)" icon="el-icon-search">筛选</el-button>
        </div>
      </div>
    </div>

    <el-card>
      <div class="opaBox">
        <el-upload ref="myUpload" action="/api/combination/goods" :multiple="false" name="combinationGoods"
          :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload"
          :on-error="uploadError" style="display:inline-block;margin: 0 15px 0 0;">
          <el-button type="warning" icon="el-icon-upload2">组合商品导入</el-button>
        </el-upload>
        <el-button type="primary" plain @click="addGoodsCombination" icon="el-icon-plus">新增组合商品</el-button>
      </div>

      <el-table v-loading="loading" ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark" border
        style="width: 100%" row-key="id" :tree-props="{ children: 'children' }">
        <el-table-column label="商品信息" width="400">
          <template slot-scope="scope">
            <div class="commodityimg">
              <img :src="scope.row.img_url" class="Img" />
            </div>
            <div>
              <p>{{ scope.row.title }}</p>
              <p>{{ scope.row.external_sku_id }}</p>
              <p>{{ scope.row.updated_at }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="组合数量"></el-table-column>
        <el-table-column label="剩余库存">
          <template slot-scope="scope">
            <span v-if="!scope.row.children">{{ scope.row.stock }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="reference_price" label="售价"></el-table-column> -->
        <!-- <el-table-column sortable label="今日7点以后订单">
            <template slot-scope="scope">
                <div>
                    <span>{{ scope.row.order_goods_num }}</span>
                </div>
                <el-popover placement="right-start" trigger="hover" v-if="scope.row.order_detail.length !== 0">
                    <div>
                        <span v-for="(j, index) in scope.row.order_detail" :key="index">
                            <div>{{ j.shop.name }}:{{ j.number }}</div>
                        </span>
                    </div>
                    <el-button class="btn11" type="text" slot="reference"><img src="../../css/img/眼睛.png"
                            alt="" />
                    </el-button>
                </el-popover>
            </template>
        </el-table-column> -->
        <!-- <el-table-column sortable prop="total_orders_num" label="累计订单"></el-table-column> -->
        <el-table-column sortable prop="sale_stock" label="可售库存"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
            <!-- <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div class="page-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current_page"
          :page-sizes="[15, 50, 100, 150, 200]"
          :page-size="per_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Paginationdata.total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog title="新增组合商品" :visible.sync="dialogVisible">
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item label="商品名称" prop="title" :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
          <el-input v-model="dynamicValidateForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品编码" prop="external_sku_id">
          <el-input v-model="dynamicValidateForm.external_sku_id"></el-input>
        </el-form-item>
        <el-form-item v-for="(item, index) in dynamicValidateForm.combination_goods" :label="'花材' + (index + 1)"
          :key="item.item_id" :prop="'combination_goods.' + index + '.item_id'" :rules="{
              required: true, message: '子商品不能为空', trigger: 'blur'
          }">
          <div style="display: flex;align-items: center;">
            <el-select v-model="item.item_id" filterable remote reserve-keyword placeholder="请选择子商品"
              :remote-method="remoteMethod" :loading="remoteLoading" style="width: 240px;">
              <el-option v-for="sku in skus" :key="sku.id" :label="sku.title" :value="sku.id"></el-option>
            </el-select>
            <el-input v-model="item.item_num"  placeholder="数量" style="width: 120px;margin: 0 10px"></el-input>
            <el-button type="danger" size="mini" @click.prevent="removeItem(index)">删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label=" ">
          <el-button @click="addItem" icon="el-icon-plus">添加花材</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import { getGoodsCombination, addGoodsCombination, showGoodsCombination, getGoodsFilter } from "@/api/goods.js";

  export default {
    data() {
      return {
        dialogVisible: false,
        loading: false,
        tableData: [], // 商品列表
        searchForm: {
          external_sku_id: '',
          sku_title: '' // 商品名称
        },
        Paginationdata: {}, // 分页相关数据
        current_page: 1, // 当前页
        per_page: 100, // 每页显示数量
        dynamicValidateForm: {
          id: 0,
          title: '',
          external_sku_id: '',
          combination_goods: [{
              item_id: '',
              item_num: 1
          }]
        },
        skus: [],
        remoteLoading: false
      }
    },
    methods: {
      // 列表编辑
      handleEdit(id) {
        this.dialogVisible = true;
        showGoodsCombination(id).then((res) => {
          this.dynamicValidateForm = res.data.data
          this.skus = res.data.data.skus
        })
      },
      handleDelete(id) {

      },
      // 获取商品列表
      getList(params) {
        getGoodsCombination(params).then((res) => {
          this.tableData = res.data.data
          this.Paginationdata = res.data.meta
          this.currentPage = res.data.meta.current_page
          this.per_page = parseInt(res.data.meta.per_page)
          this.loading = false
        })
      },
      // 筛选
      handleChoose() {
        this.searchForm = {
          ...this.searchForm,
          page: this.current_page,
          per_page: this.per_page
        }
        this.getList(this.searchForm)
      },
      handleSizeChange(val) {
        this.per_page = val
        this.current_page = 1
        this.handleChoose()
      },
      handleCurrentChange(val) {
        this.current_page = val
        this.handleChoose()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addGoodsCombination(this.dynamicValidateForm).then((res) => {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.dialogVisible = false
              this.handleCurrentChange(1)
            })
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      removeItem(index) {
        this.dynamicValidateForm.combination_goods.splice(index, 1)
      },
      addItem() {
        this.dynamicValidateForm.combination_goods.push({
          item_id: '',
          item_num: 1
        })
      },
      remoteMethod(query) {
        if (query !== '') {
            this.remoteLoading = true
            getGoodsFilter(query).then((res) => {
              this.skus = res.data.data
              this.remoteLoading = false
            })
        } else {
          this.skus = []
        }
      },
      addGoodsCombination() {
        this.dialogVisible = true;
        this.dynamicValidateForm = {
          id: 0,
          title: '',
          external_sku_id: '',
          combination_goods: [{
            item_id: '',
            item_num: 1
          }]
        }
      },
      beforeUpload() {
        this.loadingModule = this.$loading({
          lock: true,
          text: '表格导入中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      },
      uploadSuccess(response) {
        this.$message({
          message: response.message,
          type: "success"
      });
        this.loadingModule.close()
      },
      uploadError(err) {
        this.$message({
          message: err.errorMessage,
          type: "error"
        });
        this.loadingModule.close()
      }
    },
    mounted() {
      this.handleCurrentChange(1)
    }
  }
</script>

<style lang="css" scoped>
  .searchBox{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
    .row{
      font-size: 14px;
      margin-bottom: 20px;
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
  .opaBox{
    margin-bottom: 15px;
  }

  .btn {
    float: right;
  }

  ::v-deep .cell {
    display: flex;
    align-items: center;
  }

  .commodityimg {
    width: 59px;
    height: 59px;
    background: rgba(227, 227, 227, 0.39);
    opacity: 1;
    display: block;
    margin-right: 12px;
  }

  .Img {
    width: 100%;
    height: 100%;
  }

  ::v-deep .btn11 {
    padding: 0;
    width: 14px;
    height: 14px;
  }

  ::v-deep .btn11 img {
    width: 100%;
    height: 100%;
  }

  .page {
    margin-top: 20px;
  }
</style>