yoga-manager-ui/src/views/pms/product/AddProduct.vue

<template>
  <div class="add-product-wrapper">
    <el-form class="content" label-width="108px" :model="form" ref="form">
      <el-form-item label="品牌" prop="brandId">
        <brand-select v-model="form.brandId"></brand-select>
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <product-category-select class="w200" v-model="form.categoryId"></product-category-select>
      </el-form-item>
      <el-form-item label="商品编码" prop="outProductId">
        <el-input v-model="form.outProductId" placeholder="请输入商品编码"></el-input>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="主图" prop="pic">
        <image-upload v-model="form.pic" :limit="1"></image-upload>
      </el-form-item>
      <el-form-item label="商品图片" prop="albumPics">
        <image-upload v-model="form.albumPics" :limit="5"></image-upload>
      </el-form-item>
      <el-form-item label="上架状态">
        <dict-select v-model="form.publishStatus" prop-name="pms_publish_status"></dict-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="form.price" placeholder="请输入PRICE"></el-input>
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
      </el-form-item>
      <el-form-item label="商品重量" prop="weight">
        <el-input v-model="form.weight" placeholder="商品重量，默认为克"></el-input>
      </el-form-item>
      <div class="title">规格信息</div>
      <el-form-item label="商品规格">
        <div class="sku-wrapper">
          <div class="sku_sorts">
            <div class="sku_sort" v-for="(s, idx0) in skuSorts" :key="s.name">
              <div class="label flex-center">
                <div class="flex-one">
                  <dict-select v-model="s.name" prop-name="sku_sort_list" value-prop="label"></dict-select>
                </div><a class="red" @click="deleteSkuSort(idx0)">删除规格类型</a>
              </div>
              <div class="values" v-if="s.name">
                <div class="value" v-for="(it2, idx1) in s.options" :key="idx1">
                  <el-input :value="it2.name" @input="changeName(s, idx1, $event)"></el-input><a class="red no-break ml8" v-if="idx1 &lt; s.options.length - 1 || (s.options.length === maxOptionNum &amp;&amp; idx1 === 3)" @click="deleteOption(s, idx1)">删除</a>
                </div>
              </div>
            </div>
          </div>
          <el-button v-if="skuSorts.length &lt; 2" @click="addSkuSort">添加规格类型</el-button>
        </div>
      </el-form-item>
      <el-form-item label=" 价格">
        <el-table :data="skus" :max-height="400">
          <el-table-column v-for="s in skuSorts" :label="s.name" :key="s.name" :prop="s.name"></el-table-column>
          <el-table-column label="展示图片">
            <template v-slot="{ row }">
              <image-upload class="img-upload-mini" v-model="row.pic" :is-show-tip="false"></image-upload>
            </template>
          </el-table-column>
          <el-table-column label="销售价格">
            <template v-slot="{ row }">
              <el-input v-model="row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="编码">
            <template v-slot="{ row }">
              <el-input v-model="row.outSkuId"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row, index}"><a class="red">删除{{index}}</a></template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="产品详情网页内容" prop="detailHtml">
        <el-input v-model="form.detailHtml" placeholder="请输入内容" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="移动端网页详情" prop="detailMobileHtml">
        <el-input v-model="form.detailMobileHtml" placeholder="请输入内容" type="textarea"></el-input>
      </el-form-item>
      <div class="tc">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {addPmsProduct, getPmsProduct, updatePmsProduct} from "@/api/pms/product";
import ProductCategorySelect from "@/views/components/ProductCategorySelect";
import BrandSelect from "@/views/components/BrandSelect";

export default {
  name: "AddProduct",
  components: {BrandSelect, ProductCategorySelect},
  data() {
    return {
      form: {},
      skuSorts: [
        {
          name: '颜色',
          options: [
            {name: '红'},
            {name: null}
          ]
        }
      ],
      maxOptionNum: 44
    }
  },
  computed: {
    skus() {
      let arr = [];
      this.skuSorts.forEach((it1, idx1) => {
        const arr1 = [];
        it1.options.forEach((it2) => {
          if (!it2.name) {
            return
          }
          if (idx1 === 0) {
            arr1.push({[it1.name]: it2.name});
          } else {
            arr.forEach(it3 => {
              arr1.push({...it3, [it1.name]: it2.name })
            })
          }
        })
        arr = arr1;
      })
      arr.forEach(it => {
        it.outSkuId = null;
        it.price = null;
        it.pic = null;
      })
      return arr
    }
  },
  created() {
    const {id} = this.$route.query
    if (id) {
      this.getInfo(id);
    }
  },
  methods: {
    getInfo(id) {
      getPmsProduct(id).then(response => {
        const {albumPics } = response
        if (albumPics) {
          response.albumPics = albumPics.split(',')
        }
        this.form = response;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePmsProduct(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPmsProduct(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {

    },
    changeName(s, idx, val) {
      s.options[idx].name = val;
      if (s.options.length - 1 !== idx || s.options.length >= this.maxOptionNum) {
        return
      }
      s.options.push({name: null})
    },
    addSkuSort() {
      this.skuSorts.push({
        name: null,
        options: [{name: null}]
      })
    },
    deleteSkuSort(idx) {
      this.skuSorts.splice(idx);
    },
    deleteOption(s, idx) {
      s.options.splice(idx, 1);
    }
  }
}
</script>

<style lang="stylus">
.add-product-wrapper
  padding 12px
  .content
    margin 0 auto
    width 75%
    min-width 800px
  .sku-wrapper
    background-color #f7f8fa
    padding 12px
    .sku_sorts
      .sku_sort
        background-color white
        margin-bottom 12px
        .label
          padding 8px
        .values
          padding 8px 0 0 8px
          border-top 1px solid $border-color
          display flex
          flex-wrap wrap
          .value
            padding 0 32px 8px 0
            width 200px!important
            display flex
            align-items center
  .img-upload-mini .el-upload--picture-card
    width: 48px;
    height: 48px;
    line-height: 57px;
</style>