Vue组件文件

头部

//   引入api文件中的接口
 import {
    addSpuListSku,
    fetchSpuListById,
    updateSpu,
    deleteSpuListSkuById
  } from '@/api'

方式：methods 分为三部分 页面渲染——接口数据——操作逻辑

methods: {
    // ---------------页面渲染---------------------
      formatterSale (row) {
        if (row.on_sale) {
          return '上架'
        } else {
          return '下架'
        }
      }
// ------------------接口数据-----------------
      // 注意：==>要考虑"请求成功"与"请求失败"的两种情况并且有相应提示
      // 添加spu的接口
      addSpu (arr) {
        let params = {
          sku_id: arr
        }
        console.log('添加spu的接口-参数', params)
        addSpuListSku(params).then(res => {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        }).catch(err => {
          //  注意： ==> 打印失败的信息
          console.log('报错', err)
          this.$message({
            type: 'error',
            message: err.data ? err.data.msg : '添加失败'
          })
        })
      },
      // 获取spu指定模板接口
      fetch (id) {
        let params = {
          spu_id: this.$route.params.id
        }
        console.log('获取spu指定模板接口-参数', params)
        fetchSpuListById(params).then(res => {
          console.log('获取spu指定模板信息', res)
          this.ruleForm.spu_name = res.data.spuDtos[0].spu_name
          this.ruleForm.tableData = res.data.spuDtos[0].sku_dto_list
        })
      },
      // 删除spu中的sku接口
      deleteSkuById (id) {
        let params = {
          sku_id: id
        }
        console.log('删除接口的参数', params)
        deleteSpuListSkuById(params).then(res => {
          this.$message({
            type: 'success',
            message: '已成功删除'
          })
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err.data ? err.data.msg : '删除失败'
          })
        })
      },
      // 修改spu详情接口
      updateSpuDetail () {
        let params = {
          default_sku_id: 0,
          spu_id: this.$route.params.id,
          spu_name: this.ruleForm.spu_name
        }
        console.log('修改spu详情接口-参数', params)
        updateSpu(params).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err.data ? err.data.msg : '修改失败'
          })
        })
      },
//  -----------------操作逻辑-----------------
      // 初始化
      init () {
        let id = this.$route.params.id
        this.fectch(id)
      },
      // 新增商品
      addGoods () {
        this.$store.dispatch('dialogVisible', true)
        this.$store.dispatch('isShowConf', 'edit')
      },
      // 勾选事件
      select (selection, row) {
        this.selectData = selection
      },
      // 删除商品
      handleDelete (index, item) {
        let temp = [item.sku_id]
        this.deleteSkuById(temp)
      }

api文件

post与get两种情况

// 获取SPU指定模板
export function fetchSpuListById (id) {
  return axios.get(env.MANAGE_API_URL + '/goods/spu/details', {
    emulateJSON: true,
    params: id
  }).then(res => {
    if (checkData(res.data) && +res.data.code === 0) {
      return Promise.resolve(res.data)
    } else {
      throw res
    }
  }).catch(err => {
    return Promise.reject(err)
  })
}
// 添加Sku到Spu
export function addSpuListSku (params) {
  return axios.post(env.MANAGE_API_URL + '/goods/spu/addSku', params, {emulateJSON: true}).then(res => {
    if (checkData(res.data) && +res.data.code === 0) {
      return Promise.resolve(res.data)
    } else {
      throw res
    }
  }).catch(err => {
    return Promise.reject(err)
  })
}
// 删除spu中sku的指定模板
export function deleteSpuListSkuById (params) {
  return axios.post(env.MANAGE_API_URL + '/goods/spu/removeSku', params, {emulateJSON: true}).then(res => {
    if (checkData(res.data) && +res.data.code === 0) {
      return Promise.resolve(res.data)
    } else {
      throw res
    }
  }).catch(err => {
    return Promise.reject(err)
  })
}
// 修改Spu详情
export function updateSpu (params) {
  return axios.post(env.MANAGE_API_URL + '/goods/spu/update', params, {emulateJSON: true}).then(res => {
    if (checkData(res.data) && +res.data.code === 0) {
      return Promise.resolve(res.data)
    } else {
      throw res
    }
  }).catch(err => {
    return Promise.reject(err)
  })
}