erp/resources/frontend/src/components/Goods/edit.vue

<template>
  <el-dialog :visible.sync="show" title="编辑商品" width="900px" @close="closeDialog" :close-on-click-modal="false">
    <el-form label-width="120px" :inline="true">
      <el-form-item label="商品品种/品类：">
        <treeselect
          :options="treeList"
          style="width: 200px;"
          :disable-branch-nodes="true"
          :show-count="true"
          :normalizer="normalizer"
          placeholder="请选择品种"
          v-model="goodsInfo.goods.type_id">
          <div slot="value-label" slot-scope="{ node }">{{ parseLabel(node) }}</div>
        </treeselect>
      </el-form-item>
      <el-form-item label="规格名称：">
        <el-input placeholder="规格名称" v-model="goodsInfo.title"></el-input>
      </el-form-item>
      <el-form-item label="最终编码：">
        <el-input v-model="goodsInfo.external_sku_id" placeholder="不输入自动生成" disabled></el-input>
      </el-form-item>
      <el-form-item label="颜色/特性：">
        <el-input placeholder="颜色/特性" v-model="goodsInfo.attribute"></el-input>
      </el-form-item>
      <el-form-item label="商品状态：">
        <el-select v-model="goodsInfo.status" placeholder="下架（默认）" style="width: 200px;">
          <el-option v-for="it in options" :key="it.id" :label="it.label" :value="it.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品成本：">
        <el-input v-model="goodsInfo.cost" placeholder="商品成本">
        </el-input>
      </el-form-item>
      <el-form-item label="在售库存：">
        <el-input v-model="goodsInfo.sale_stock" placeholder="可售库存"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave()" :loading="loading">保存</el-button>
      <el-button plain @click="cancel()">取消</el-button>
    </span>
    
  </el-dialog>
  
</template>
  
<script>
  import { updateGoods, checkGoods } from '@/api/goods.js'
  import { goods_types } from '@/api/rankingData.js'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  
  export default {
    components: { Treeselect },
    props: {
      show: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      id: {
        type: Number,
        default: () => {
          return 0
        }
      }
    },
    data() {
      return {
        goods_id: 0,
        showDialog: false,
        treeList: [],
        skus: [],
        type_id: null,
        options: [
          { id: '下架', label: '下架' },
          { id: '在售', label: '在售' }
        ],
        loading: false,
        goodsInfo: {
          goods: {
            type_id: null
          }
        }
      }
    },
    methods: {
      getGoodsTypes() {
        let params = {
          parent_id: 0
        }
        goods_types(params).then((res) => {
          this.treeList = JSON.parse(JSON.stringify(res.data.data).replace(/name/g, "label"))
        })
      },
      // 添加商品
      handleSave() {
        this.loading = true
        let goods = {
          title: this.goodsInfo.goods.title,
          img_url: this.goodsInfo.goods.img_url,
          type_id: this.goodsInfo.goods.type_id || '',
          brand_id: this.goodsInfo.goods.brand_id,
          goods_code: this.goodsInfo.goods.goods_code
        }
        let sku = {
          title: this.goodsInfo.title,
          external_sku_id: this.goodsInfo.external_sku_id,
          status: this.goodsInfo.status,
          num: this.goodsInfo.num,
          cost: this.goodsInfo.cost,
          sale_stock: this.goodsInfo.sale_stock,
          thumb_url: this.goodsInfo.thumb_url,
          attribute: this.goodsInfo.attribute
        }
        if (sku.status == '下架') {
          sku.status = 0
        } else if (sku.status == '在售') {
          sku.status = 1
        }
        let params = {
          goods_id: this.goodsInfo.goods_id,
          goods,
          sku
        }
        updateGoods(this.goods_id, params).then((res) => {
          this.$message({ type: 'success', message: '编辑成功' })
          this.loading = false
          this.closeDialog()
          this.$emit('complete')
        }).catch(() => {
          this.loading = false
        })
      },
      getGoodsInfo() {
        checkGoods(this.goods_id).then((res) => {
          this.goodsInfo = res.data.data
          this.goodsInfo.goods.type_id = this.goodsInfo.goods.type_id || null
        })
      },
      cancel() {
        this.closeDialog()
      },
      normalizer(node) {
        if ((!node.children || (node.children && node.children.length == 0)) && node.level == 1) {
          node.isDisabled = true
        }
        return node
      },
      parseLabel(node) {
        let text = ''
        text += node.parentNode ? node.parentNode.label + ' / ' : ''
        text += node.raw ? node.raw.label : ''
        return text
      },
      closeDialog() {
        this.showDialog = false
        this.$emit('close')
      }
    },
    watch: {
      id(newVal, oldVal) {
        this.goods_id = newVal
      },
      show(newVal, oldVal) {
        if (newVal) {
          this.showDialog = true
          this.getGoodsInfo()
          this.getGoodsTypes()
        }
      }
    }
  }
</script>
  
<style scoped lang="scss">
  .skuBox{
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 15px 0;
    margin-bottom: 15px;
    background-color: #f3f3f3;
    .tit{
      padding-left: 40px;
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 15px;
    }
  }

</style>