erp/resources/frontend/src/views/yingyeting/addgoods/addgoods.vue

<template>
  <div>
    <el-card class="box-card">
      <div class="goods"
           style="margin:20px">
        <div class="add-item-info"
             style="margin-bottom:10px;margin-left:52px">
          <span style="font-size:14px;">商品图片：</span>
          <el-upload class="upload"
                     action="/api/admin/upload"
                     list-type="picture-card"
                     :on-success="uploadGalleryItem"
                     :on-remove="removeGalleryItem"
                     :file-list="gallery">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <el-form ref="form"
                 :inline="true"
                 :model="form">
          <div>
            <el-form-item label="商品名称：">
              <el-select v-model="form.name1"
                         placeholder="商品名称">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品种类：">
              <el-select v-model="form.name2"
                         placeholder="商品种类">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品品牌：">
              <el-select v-model="form.name3"
                         placeholder="商品品牌">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-for="(item,i) in specifyList">
            <span style="margin-right:-15px">{{i+1}}.</span>
            <el-form-item label="商品规格：">
              <el-select v-model="specifyList[i].specify"
                         placeholder="商品规格">
                <!-- <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option> -->
              </el-select>
            </el-form-item>
            <span class="addto"
                  @click="handleAdd()">+</span>
            <el-form-item label="商品编码：">
              <el-select v-model="specifyList[i].code"
                         placeholder="商品编码">
                <!-- <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="商品状态：">
              <el-select v-model="specifyList[i].state"
                         placeholder="在售（默认）">
                <!-- <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option> -->
              </el-select>
            </el-form-item>
            <div>
              <el-form-item label="商品数量：">
                <el-select v-model="specifyList[i].number"
                           placeholder="商品数量">
                  <!-- <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item label="商品成本：">
                <el-select v-model="specifyList[i].cost"
                           placeholder="商品成本">
                  <!-- <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option> -->
                </el-select>
              </el-form-item>
              <el-button type="primary"
                         @click="handleDelete(i)">删除</el-button>
            </div>
          </div>
          <div class="btn">
            <el-form-item>
              <el-button type="primary">保存</el-button>
              <el-button plain>取消</el-button>
            </el-form-item>
          </div>

        </el-form>

      </div>

    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gallery: '',
      imageUrl: '',
      specifyList: [
        {
          specify: '',
          code: '',
          state: '',
          number: '',
          cost: '',
        },
      ], // 规格列表
      form: {
        name1: '',
        name2: '',
        name3: '',
        name4: '',
        name5: '',
        name6: '',
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
    }
  },
  methods: {
    // 增加一个商品规格
    handleAdd() {
      this.specifyList.push({
        specify: '',
        code: '',
        state: '',
        number: '',
        cost: '',
      })
    },
    // 删除一个商品规格
    handleDelete(index) {
      this.specifyList.splice(index, 1)
    },
    uploadGalleryItem() {},
    removeGalleryItem() {},
  },
}
</script>

<style scoped>
.el-upload--picture-card {
  width: 50px;
  height: 50px;
}
.el-form-item {
  margin-left: 60px;
}
.addto {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: blue;
  color: #fff;
  font-size: 25px;
  text-align: center;
  line-height: 28px;
}
/* .btn {
  text-align: center;
} */
</style>