选品管理

src/api/platformProduct.js

@@ -0,0 +1,107 @@
+import request from '@/utils/request'
+
+// 商品分类管理
+// /platformProductClassify/getAll 商品类别管理查询
+export const getAllClass = (data) => request({
+  url: '/platformProductClassify/getAll',
+  method: 'POST',
+  data
+})
+
+// /platformProductClassify/save 添加商品类别
+export const createdShopClass = (data) => request({
+  url: '/platformProductClassify/save',
+  method: 'POST',
+  data
+})
+
+// /platformProductClassify/update 修改商品类别
+export const updateClass = (data) => request({
+  url: '/platformProductClassify/update',
+  method: 'POST',
+  data
+})
+
+// /platformProductClassify/delete 删除商品类别
+export const deleteClass = (data) => request({
+  url: '/platformProductClassify/delete',
+  method: 'POST',
+  data
+})
+
+// /platformProductClassify/getById 商品类别编辑/查询
+export const getClassDetails = (data) => request({
+  url: '/platformProductClassify/getById',
+  method: 'POST',
+  data
+})
+
+// 商品管理
+// 商品管理查询
+export function getClassifyGetAll(data) {
+  return request({
+    url: '/platformProduct/getAll',
+    method: 'POST',
+    data
+  })
+}
+// /platformProduct/save  新增选品商品
+export function getClassifyAdd(data) {
+  return request({
+    url: '/platformProduct/save',
+    method: 'POST',
+    data
+  })
+}
+
+// /platformProduct/update 修改选品商品
+export function getClassifyUpdate(data) {
+  return request({
+    url: '/platformProduct/update',
+    method: 'POST',
+    data
+  })
+}
+
+// /platformProduct/delete 删除商品
+export function getClassifyDelete(data) {
+  return request({
+    url: '/platformProduct/delete',
+    method: 'POST',
+    data
+  })
+}
+
+// /platformProduct/start 商品上下架
+export function getClassifyStart(data) {
+  return request({
+    url: '/platformProduct/start',
+    method: 'POST',
+    data
+  })
+}
+
+// 获取品牌列表
+export function getBrandList() {
+  return request({
+    url: '/platformProduct/getBrandList',
+    method: 'POST'
+  })
+}
+
+// 商品分类
+export function getClassify(data) {
+  return request({
+    url: '/platformProduct/getClassify',
+    method: 'POST',
+    data
+  })
+}
+// /voucher/getAll 获取可选择的代金卷
+export function getVoucher(data) {
+  return request({
+    url: '/voucher/getAll',
+    method: 'POST',
+    data
+  })
+}

src/views/platformProduct/commodityManagement/addCommodity.vue

@@ -0,0 +1,689 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header">
+        <span v-if="!productId" class="addTitle">新增商品</span>
+        <span v-else class="addTitle">编辑商品</span>
+        <el-button v-if="active" class="btnList" @click="back">取消</el-button>
+        <el-button v-if="active" type="primary" class="btnList" @click="next">下一步</el-button>
+        <el-button v-if="!active" type="primary" class="btnList" @click="save">保存</el-button>
+        <el-button v-if="!active" class="btnList" @click="last">上一步</el-button>
+      </div>
+      <!-- 步骤条 -->
+      <div class="stepsColor common">
+        <div class="stepsOne common">
+          <div :class="active ? 'one_class common' : 't_class common'">1</div>
+          <div :class="active ? 'two_class' : 'w_class'">基本属性&商品描述</div>
+        </div>
+        <div class="line" />
+        <div class="stepsTwo common">
+          <div :class="active ? 't_class common' : 'one_class common'">2</div>
+          <div :class="active ? 'w_class' : 'two_class'">基本属性&商品描述</div>
+        </div>
+      </div>
+    </el-card>
+    <!-- 商品 -->
+    <div class="addCom common">
+      <div v-if="active">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="padding: 40px 40px;">
+          <div class="leftCom">
+            <el-form-item label="商品名称" prop="productName">
+              <el-input v-model="form.productName" maxlength="20" show-word-limit />
+            </el-form-item>
+            <el-form-item label="卖点简介">
+              <el-input v-model="form.productBrief" maxlength="50" show-word-limit />
+            </el-form-item>
+            <el-form-item>
+              <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />
+            </el-form-item>
+          </div>
+          <div class="rightCom">
+            <el-form-item label="官方分类" prop="classifyId">
+              <el-cascader
+                v-model="form.classifyId" :options="classifyList" clearable :props="{
+                  checkStrictly: false,
+                  label: 'categoryName',
+                  value: 'id',
+                  children: 'childs'
+                }"
+                @change="handleChangeCascader"
+              />
+            </el-form-item>
+
+            <el-form-item label="商品分组" prop="shopGroupId">
+              <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable disabled>
+                <el-option
+                  v-for="(item, index) in groupList" :key="index" :label="item.groupName"
+                  :value="item.shopGroupId"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="品牌">
+              <el-select v-model="form.brandId" clearable placeholder="请选择品牌">
+                <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item class="form-item-long" label="供应商">
+              <el-input v-model="form.supplierName" maxlength="20" show-word-limit placeholder="请输入供应商名称" />
+            </el-form-item>
+            <el-form-item label="需要物流" prop="ifLogistics">
+              <el-radio-group v-model="form.ifLogistics">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="上架状态" prop="shelveState">
+              <el-radio-group v-model="form.shelveState">
+                <el-radio :label="1">上架</el-radio>
+                <el-radio :label="0">下架</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="允许超卖" prop="ifOversold">
+              <el-radio-group v-model="form.ifOversold">
+                <el-radio :label="1">允许</el-radio>
+                <el-radio :label="0">不允许</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <!-- <el-form-item label="积分兑换" prop="ifCredit">
+              <el-radio-group v-model="form.ifCredit">
+                <el-radio :label="1">允许</el-radio>
+                <el-radio :label="0">不允许</el-radio>
+              </el-radio-group>
+              <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>
+            </el-form-item> -->
+            <el-form-item v-if="form.ifCredit == 1" class="form-item-long" label="单笔最大抵扣" prop="creditLimit">
+              <!-- <el-input v-model="form.creditLimit" type="number" placeholder="请输入单笔最大抵扣" /> -->
+              <el-input-number
+                v-model="form.creditLimit" :controls="false" :max="999999999" :min="0"
+                :precision="0"
+                placeholder="请输入单笔最大抵扣"
+              />
+              <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>
+              <!-- <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p> -->
+            </el-form-item>
+            <!--            <el-form-item label="花呗分期"> -->
+            <!--              <el-radio-group v-model="form.ifHuabei"> -->
+            <!--                <el-radio :label="1">支持</el-radio> -->
+            <!--                <el-radio :label="0">不支持</el-radio> -->
+            <!--              </el-radio-group> -->
+            <!--            </el-form-item> -->
+          </div>
+        </el-form>
+      </div>
+      <div v-if="!active" class="centerCom">
+        <el-form ref="form" :model="params" label-width="80px">
+          <StyleInformation v-bind="$props" :form="params" />
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" class="check-image-dialog" title="查看图片" center="center">
+      <img width="100%" :src="dialogImageUrl" alt>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import {
+  getGroupSelect,
+  getClassify,
+  getClassifyAdd,
+  getClassifyGetById,
+  getClassifyUpdate,
+  getBrandList
+} from '@/api/platformProduct'
+// import {
+//   getSelect
+// } from '@/api/account'
+import { uploadUrl } from '@/utils/request'
+import StyleInformation from './addComponent'
+export default {
+  components: {
+    Tinymce,
+    StyleInformation
+  },
+  props: {
+    productId: {
+      type: Number,
+      default: 0
+    },
+    showTinymce: {
+      type: Boolean
+    },
+    voucherList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    // const checkCreditLimit = (rule, value, callback) => {
+    //   console.log(this.form.ifCredit)
+    //   if (this.form.ifCredit) {
+    //     callback(new Error('当选择允许积分兑换时，必须填写该值'))
+    //   }
+    //   const reg = /^[1-9]\d*$/
+    //   if (value === '' || value === undefined || value === null) {
+    //     callback();
+    //   } else {
+    //     if ((!reg.test(value)) && value !== '') {
+    //       callback(new Error('请输入正确的价格'));
+    //     } else {
+    //       callback();
+    //     }
+    //   }
+    //   callback()
+    // }
+    return {
+      brandList: [],
+      active: 1,
+      action: uploadUrl,
+      form: {
+        brandId: null, // 品牌ID
+        productName: '', // 商品名称
+        productBrief: '', // 商品简介
+        shopGroupId: '0', // 商品分组id
+        classifyId: '', // 分类id
+        supplierName: '', // 供应商名称
+        ifLogistics: '', // 是否需要物流 1-是 0-否
+        shelveState: '', // 是否上架 1-上架 0-不上架
+        ifOversold: '', // 是否允许超卖 1-是 0-否
+        ifCredit: '0', // 是否支持积分兑换 1-是 0-否
+        creditLimit: '', // 单笔订单限制使用多少积分
+        ifHuabei: 1, // 是否支持花呗分期 1-是 0-否
+        productText: '', // 商品描述（富文本）
+        images: [], // "图片地址"
+        deletes: [], // 删除的规格id数组
+        names: [
+          {
+            code: '', // 级别
+            skuName: '', // 规格名
+            values: [
+              {
+                valueCode: '', // 级别
+                skuValue: '', // 规格值
+                image: '' // 图片
+              }
+            ]
+          }
+        ],
+        skus: [
+          {
+            skuName: '', // 规格名称
+            skuValue: '', // 规格值
+            price: '', // 售价
+            originalPrice: '', // 原价
+            stockNumber: '', // 库存数量
+            weight: '', // 重量
+            skuImage: '', // 配图地址
+            style: '', // 款式  1-单款式 2-多款式
+            voucherId: '', // 允许使用的代金卷ID
+            voucherPrice: '' // 代金卷最大的使用限额
+          }
+        ]
+      },
+      params: {
+        applyPrice: 0,
+        attrStyle: 0,
+        categoryId: '',
+        oversold: 1,
+        collects: 0,
+        groupId: '',
+        imgs: [],
+        deletes: [], // 删除规格数据
+        isDelete: 0,
+        limitCount: 0,
+        minusStock: '',
+        needLogistics: 1,
+        platform: '',
+        price: 0,
+        productCode: '',
+        productName: '',
+        sellCount: 0,
+        sellDesc: '',
+        sellType: '',
+        shortName: '',
+        skuAttrList: [
+          {
+            code: '',
+            skuName: '',
+            needImg: false,
+            values: [
+              {
+                skuValue: '',
+                valueCode: '',
+                image: ''
+              }
+            ]
+          }
+        ],
+        skuList: [
+          {
+            isDelete: '',
+            skuAttrCodeDTOList: [
+              {
+                code: '',
+                valueCode: ''
+              }
+            ],
+            skuAttrList: [],
+            sku: '',
+            skuImg: '',
+            price: 0,
+            originalPrice: 0,
+            stockNumber: 0,
+            weight: 0
+          }
+        ],
+        sortOrder: '',
+        status: '',
+        stock: '',
+        supplierName: '',
+        views: '',
+        weight: ''
+      },
+      imgList: [],
+      groupList: [],
+      classifyList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      rules: {
+        productName: [ { required: true, message: '请输入商品名称', trigger: 'blur' } ],
+        shopGroupId: [ { required: true, message: '请选择商品分组', trigger: 'change' } ],
+        classifyId: [ { required: true, message: '请选择商品分类', trigger: 'change' } ],
+        ifLogistics: [ { required: true, message: '请选择是否需要物流', trigger: 'change' } ],
+        shelveState: [ { required: true, message: '请选择是否上架', trigger: 'change' } ],
+        ifOversold: [ { required: true, message: '请选择是否允许超卖', trigger: 'change' } ],
+        ifCredit: [ { required: true, message: '请选择是否支持积分兑换', trigger: 'change' } ],
+        creditLimit: [ { required: true, message: '请输入单笔最大抵扣', trigger: 'blur' } ]
+      },
+      integralList: [],
+      // integralProportion: '' // 积分兑换金额比例
+    }
+  },
+  watch: {
+    productId: {
+      handler(nVal, oVal) {
+        if (nVal) {
+          // this.details()
+        }
+      }
+    }
+  },
+  mounted() {
+    // console.log(this.voucherList)
+    this.groups()
+    this.selectList()
+    this.getBrandList()
+    // if (this.productId) {
+    //   this.details()
+    // }
+    // this.getCredit()
+  },
+  methods: {
+    handleChangeCascader() {
+      console.log(this.form.classifyId)
+    },
+    async getBrandList() {
+      const { data } = await getBrandList()
+      this.brandList = data
+    },
+    // async getCredit() { // 隐藏了积分比例
+    //   const res = await getSelect({ dictName: 'CREDIT_CONFIG' })
+    //   this.integralList = res.data
+    //   this.integralList.forEach((item) => {
+    //     if (item.dictName === 'credit_exchange_rate') {
+    //       this.integralProportion = item.dictDescribe
+    //     }
+    //   })
+    // },
+    handleImageSuccess(response) {
+      const { url } = response.data
+      this.imgList.push(url)
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.imgPath
+      this.dialogVisible = true
+    },
+    // 移除图片
+    handleRemove(file) {
+      const { imgPath } = file
+      this.form.imgs = this.form.imgs.filter((item) => item.imgPath !== imgPath)
+    },
+    // 下一步
+    next() {
+      this.$refs.form.validate((valid) => {
+        console.log('val', valid)
+        if (valid) {
+          if (this.active === 1) {
+            this.active = 0
+            // console.log(this.form);
+            sessionStorage.setItem('form', JSON.stringify(this.form.skus))
+          }
+        } else {
+          this.$message({
+            message: '请填写正确的信息',
+            type: 'warning'
+          })
+          return false
+        }
+      })
+    },
+    // 点击新增商品时表单数据重置
+    reset() {
+      // this.form.productText = ''
+      this.form = {
+        productName: '',
+        productBrief: '',
+        shopGroupId: '',
+        classifyId: '',
+        supplierName: '',
+        ifLogistics: '',
+        shelveState: ' ',
+        ifOversold: '',
+        ifCredit: '',
+        creditLimit: '',
+        ifHuabei: 1,
+        productText: '',
+        images: [],
+        deletes: [],
+        names: [
+          {
+            code: '',
+            skuName: '',
+            values: [
+              {
+                valueCode: '',
+                skuValue: '',
+                image: ''
+              }
+            ]
+          }
+        ],
+        skus: [
+          {
+            skuName: '',
+            skuValue: '',
+            price: '',
+            originalPrice: '',
+            stockNumber: '',
+            weight: '',
+            skuImage: '',
+            voucherId: 0,
+            style: ''
+          }
+        ]
+      }
+      this.params = {
+        applyPrice: 0,
+        attrStyle: 0,
+        categoryId: '',
+        oversold: 1,
+        collects: 0,
+        groupId: '',
+        imgs: [],
+        deletes: [],
+        isDelete: 0,
+        limitCount: 0,
+        minusStock: '',
+        needLogistics: 1,
+        platform: '',
+        price: 0,
+        productCode: '',
+        productName: '',
+        sellCount: 0,
+        sellDesc: '',
+        sellType: '',
+        shortName: '',
+        skuAttrList: [
+          {
+            code: '',
+            skuName: '',
+            needImg: false,
+            values: [
+              {
+                skuValue: '',
+                valueCode: '',
+                image: ''
+              }
+            ]
+          }
+        ],
+        skuList: [
+          {
+            isDelete: '',
+            skuAttrCodeDTOList: [
+              {
+                code: '',
+                valueCode: ''
+              }
+            ],
+            skuAttrList: [],
+            sku: '',
+            skuImg: '',
+            price: 0,
+            originalPrice: 0,
+            stockNumber: 0,
+            voucherId: 0,
+            weight: 0
+          }
+        ],
+        sortOrder: '',
+        status: '',
+        stock: '',
+        supplierName: '',
+        views: '',
+        weight: ''
+      }
+      this.imgList = []
+      this.dialogImageUrl = ''
+      this.dialogVisible = false
+      this.active = 1
+    },
+    // 返回
+    back() {
+      this.active = 1
+      this.$emit('cancel')
+    },
+    // 上一步
+    last() {
+      if (this.active !== 1) {
+        this.active = 1
+      }
+    },
+    // 保存
+    async save() {
+      console.log(this.params.skuAttrList)
+      if (this.params.attrStyle === 1) {
+        for (let i = 0; i < this.params.skuAttrList.length; i++) {
+          if (this.params.skuAttrList[i].skuName === '') {
+            this.$message({
+              message: '规格名不能为空',
+              type: 'warning'
+            })
+            return false
+          }
+        }
+      }
+      this.form.names = this.params.skuAttrList
+      this.params.skuList.forEach((element) => {
+        element.style = this.params.attrStyle
+      })
+      this.form.skus = this.params.skuList
+      this.form.images = this.params.imgs
+      this.form.deletes = this.params.deletes
+      this.form.classifyId = Array.isArray(this.form.classifyId) ? this.form.classifyId[this.form.classifyId.length - 1] : this.form.classifyId
+      if (this.productId) {
+        this.form.productId = this.productId
+        const sku = JSON.parse(sessionStorage.getItem('form'))
+        console.log(sku)
+        sku.forEach((element, i) => {
+          for (let index = 0; index < this.form.skus.length; index++) {
+            if (i === index) {
+              this.form.skus[index].skuId = element.skuId
+            }
+          }
+        })
+        console.log(this.form, 'this.form')
+        const res = await getClassifyUpdate(this.form)
+        console.log(res)
+        if (res.code === '') {
+          this.$message({
+            type: 'success',
+            message: '成功!'
+          })
+          this.back()
+        }
+      } else {
+        const res = await getClassifyAdd(this.form)
+        if (res.code === '') {
+          this.$message({
+            type: 'success',
+            message: '成功!'
+          })
+          this.reset()
+          this.back()
+        }
+      }
+    },
+    // 获取商品分组
+    async groups() {
+      const res = await getGroupSelect({
+      })
+      this.groupList = res.data
+    },
+    // 获取详情
+    async details() {
+      const res = await getClassifyGetById({ productId: this.productId })
+      this.form = res.data
+      this.$set(this.form, 'productText', res.data.productText)
+      // this.form.productText = res.data.productText
+      // console.log(this.form.productText, 'productText')
+      if (res.data.names.length !== 0) {
+        this.params.skuAttrList = res.data.names
+      }
+      // this.params.skuAttrList.forEach((item) => {
+      //   var data = {}
+      //   var arr = Object.keys(res.data)
+      //   if (arr.length === 0) {
+      //     item.needImg = false
+      //   }
+      // })
+      this.params.skuList = this.form.skus
+      this.params.attrStyle = res.data.skus[0].style
+      this.params.imgs = res.data.images
+    },
+    async selectList() {
+      const res = await getClassify()
+      this.classifyList = this.filterList(res.data)
+    },
+    filterList(data) {
+      data.forEach((i) => {
+        if (i.childs.length) {
+          this.filterList(i.childs)
+        } else {
+          i.childs = null
+        }
+      })
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+@import url("../../../styles/elDialog.scss");
+
+.btnList {
+	float: right;
+	padding: 3px 0;
+	width: 100px;
+	height: 40px;
+	border-radius: 4px;
+	margin-right: 30px;
+}
+
+.addTitle {
+	font-size: 20px;
+	color: #333333;
+	line-height: 50px;
+}
+
+.stepsColor {
+	font-size: 20px;
+	line-height: 40px;
+
+	.one_class {
+		width: 40px;
+		background: #3a68f2;
+		border-radius: 50%;
+		color: #ffffff;
+		margin: 0 10px;
+	}
+
+	.two_class {
+		color: #3a68f2;
+	}
+
+	.line {
+		width: 230px;
+		height: 2px;
+		background: #e0e5eb;
+		margin: 0 20px;
+	}
+
+	.t_class {
+		width: 40px;
+		background: #dddddd;
+		border-radius: 50%;
+		color: #333333;
+		margin: 0 10px;
+	}
+
+	.w_class {
+		color: #666666;
+	}
+}
+
+.common {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.addCom {
+	margin: 10px 0;
+	justify-content: space-around;
+	align-items: unset;
+
+	.el-form {
+		display: flex;
+		padding: 40px 0;
+	}
+
+	.leftCom {
+		width: 65%;
+		background: #ffffff;
+	}
+
+	.rightCom {
+		width: 35%;
+		background: #ffffff;
+		margin-left: 80px;
+	}
+}
+
+.centerCom {
+	width: 1660px;
+	background: #ffffff;
+	box-shadow: 0px 5px 20px 0px rgba(51, 51, 51, 0.15);
+	border-radius: 4px;
+}
+</style>
+
+<style scoped>
+.form-item-long>>>.el-input {
+	width: 100%;
+}
+</style>

src/views/platformProduct/commodityManagement/addComponent.vue

@@ -0,0 +1,735 @@
+<template>
+  <div class="style-information-component">
+    <el-form-item label="商品图片" />
+    <div class="upload-wrap">
+      <el-upload
+        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+        :headers="headers" :data="dataObj" :file-list="form.imgs" :limit="20"
+        :on-success="handleImageSuccess"
+        :action="action"
+      >
+        <i slot="default" class="el-icon-plus" />
+        <div slot="file" slot-scope="{ file }">
+          <img class="el-upload-list__item-thumbnail" :src="file.imgPath">
+          <span class="el-upload-list__item-actions">
+            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+              <i class="el-icon-zoom-in" />
+            </span>
+            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
+              <i class="el-icon-delete" />
+            </span>
+          </span>
+        </div>
+      </el-upload>
+    </div>
+    <el-form-item label="款式设置">
+      <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">
+        <el-radio :label="0">单款式</el-radio>
+        <el-radio :label="1">多款式</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <div class="style-container">
+      <div v-if="form.attrStyle === 0" class="single-style">
+        <el-table :data="skuList" style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
+          <el-table-column label="规格">
+            <template slot-scope="scope">
+              <el-input v-model="singleStyle.skuValue" :sss="scope" maxlength="10" />
+            </template>
+          </el-table-column>
+          <el-table-column label="售价">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.price" :controls="false" :max="999999999" :min="0"
+                :precision="2"
+                :step="0.01"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="原价">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.originalPrice" :controls="false" :max="999999999" :min="0"
+                :precision="2" :step="0.01"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="库存">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->
+              <el-input-number
+                v-model="scope.row.stockNumber" :controls="false" :max="999999999" :min="0"
+                :precision="0"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="重量(KG)">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.weight" :controls="false" :max="999" :min="0"
+                :precision="2"
+                :step="0.01"
+              />
+            </template>
+          </el-table-column>
+                    <el-table-column label="代金卷最大抵扣额度(一般设置全额抵扣)">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.voucherPrice" :controls="false" :min="0"
+                :precision="6"
+                :step="0.01"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="商品绑定的代金卷">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.voucherId" placeholder="请选择商品绑定的代金卷">
+                <el-option
+                  v-for="item in voucherList"
+                  :key="item.createTime"
+                  :label="item.voucherName"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="国际条码">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.sku" maxlength="20" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else class="multiple-styles">
+        <div v-for="(skuAttr, index) in form.skuAttrList" :key="index" class="sku-attr-list">
+          <el-form-item label="规格名">
+            <el-input v-model="skuAttr.skuName" maxlength="20" />
+            <i v-if="index != 0" class="el-icon-close delImg" @click="delSkuAttrList(index)" />
+            <el-checkbox v-if="index === 0" v-model="skuAttr.needImg" style="margin-left: 20px;">需要配图</el-checkbox>
+          </el-form-item>
+          <el-form-item label="规格值">
+            <div class="attr-value-list">
+              <div v-for="(sku, index1) in skuAttr.values" :key="index + '-' + index1" class="main-diagram m-8">
+                <el-input v-model="sku.skuValue" maxlength="10" />
+                <i v-if="index === 0 && index1 === 0" />
+                <i v-else class="el-icon-close delImg" @click="delValue(index, index1)" />
+                <div v-if="skuAttr.needImg && index === 0" class="upload-wrap diagram-upload">
+                  <div class="span-wrap">
+                    <el-upload
+                      list-type="picture-card" :show-file-list="false" :on-preview="handlePictureCardPreview"
+                      :on-remove="handleRemove" :headers="headers" :data="dataObj" :file-list="[ sku ]"
+                      :multiple="false"
+                      :on-success="handleImageSuccess1" :action="action"
+                    >
+                      <i v-if="!sku.image" slot="trigger" class="el-icon-plus" />
+                      <div v-else class="attr-value-img">
+                        <img class="attr-thumbnail" :src="sku.image">
+                      </div>
+                    </el-upload>
+                    <div v-if="sku.image" class="attr-actions">
+                      <span class="attr-preview" @click="handlePictureCardPreview({ imgPath: sku.image })">
+                        <i class="el-icon-zoom-in" />
+                      </span>
+                      <span class="attr-delete" @click="handleRemove1(sku)">
+                        <i class="el-icon-delete" />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <el-button type="text" style="margin-left: 10px;" @click="addAttrValue(index)">添加</el-button>
+            </div>
+          </el-form-item>
+        </div>
+        <el-button class="add-attr-btn" type="primary" @click="addSkuAttrList">添加规格</el-button>
+        <el-table :data="skuList" style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
+          <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
+            <template slot-scope="scope">
+              {{
+                scope.row.skuAttrCodeDTOList &&
+                  scope.row.skuAttrCodeDTOList[index]
+                  | attrValueFilter(form.skuAttrList)
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="售价">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.price" :controls="false" :max="999999999" :min="0"
+                :precision="2"
+                :step="0.01"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="原价">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.originalPrice" :controls="false" :max="999999999" :min="0"
+                :precision="2" :step="0.01"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="库存">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->
+              <el-input-number
+                v-model="scope.row.stockNumber" :controls="false" :max="999999999" :min="0"
+                :precision="0"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="重量(KG)">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.weight" :controls="false" :max="999" :min="0"
+                :precision="6"
+                :step="0.01"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="代金卷最大抵扣额度(一般设置全额抵扣)">
+            <template slot-scope="scope">
+              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              <el-input-number
+                v-model="scope.row.voucherPrice" :controls="false" :min="0"
+                :precision="6"
+                :step="0.01"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="商品绑定的代金卷">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.voucherId" placeholder="请选择商品绑定的代金卷">
+                <el-option
+                  v-for="item in voucherList"
+                  :key="item.createTime"
+                  :label="item.voucherName"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="国际条码">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.sku" maxlength="20" />
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="操作">
+            <template slot-scope="scope">
+            <el-button type="text" @click="delAttrValue(scope.row,scope.$index,scope.row,scope)">删除</el-button>
+            </template>
+            </el-table-column> -->
+        </el-table>
+      </div>
+    </div>
+    <el-dialog
+      :append-to-body="true" :visible.sync="dialogVisible" class="check-image-dialog" title="查看图片"
+      center="center"
+    >
+      <img width="100%" :src="dialogImageUrl" alt>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { uploadUrl } from '@/utils/request'
+import { getToken } from '@/utils/auth'
+export default {
+  filters: {
+    attrValueFilter(map, list) {
+      const hasChilds =
+        list &&
+        list.filter((skuAttr) => {
+          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChild
+        })
+      if (!map) {
+        return ''
+      }
+      const { code, valueCode } = map
+      let codeStr = ''
+      hasChilds.map((item) => {
+        const { values } = item
+        values &&
+          values.some((attr) => {
+            const isSome = item.code === code && attr.valueCode === valueCode
+            if (isSome) {
+              codeStr = attr.skuValue
+            }
+            return isSome
+          })
+      })
+      return codeStr
+    }
+  },
+  props: {
+    form: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    voucherList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      newform: this.form,
+      headers: {
+        'Authorization-business': getToken()
+      },
+      action: uploadUrl,
+      dataObj: {
+        folderId: 1
+      },
+      fileList: []
+    }
+  },
+  computed: {
+    skuAttrName() {
+      return (
+        this.form.skuAttrList &&
+        this.form.skuAttrList.filter((skuAttr) => {
+          const hasChilds = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChilds
+        })
+      )
+    },
+    singleStyle() {
+      if (this.form.skuAttrList && this.form.skuAttrList[0]) {
+        return this.form.skuAttrList && this.form.skuAttrList[0].values[0]
+      }
+      return {
+        skuValue: ''
+      }
+    },
+    skuList() {
+      // console.log(this.form)
+      if (this.form.attrStyle === 0) {
+        return this.form.skuList.slice(0, 1)
+      }
+      return this.form.skuList
+    }
+  },
+  watch: {
+    'form.skuAttrList': {
+      handler(newVal, oldVal) {
+        // 判断是否有规格值
+        const hasChilds =
+          this.form.skuAttrList &&
+          this.form.skuAttrList.filter((skuAttr) => {
+            const hasChild = skuAttr.values.some((attr) => attr.skuValue)
+            return skuAttr.skuName && hasChild
+          })
+        if (this.form.attrStyle === 1 && hasChilds.length) {
+          this.skuFormat()
+        }
+        // console.log(newVal);
+        // console.log(oldVal);
+      },
+      deep: true
+    },
+    'form.skuList': {
+      handler(newVal, oldVal) {
+        // console.log(newVal);
+        // console.log(oldVal);
+      },
+      deep: true
+    }
+  },
+  created() {
+    // console.log(this.voucherList)
+    this.headers.tenant = 'MDAwMA=='
+  },
+  methods: {
+    // proving1(e) {
+    //   var keynum = window.event ? e.keyCode : e.which // 获取键盘码
+    //   // var keychar = String.fromCharCode(keynum) // 获取键盘码对应的字符
+    //   console.log(
+    //     e.key
+    //       .replace(/[^\d^\.]+/g, '')
+    //       .replace('.', '$#$')
+    //       .replace(/\./g, '')
+    //       .replace('$#$', '.')
+    //   )
+    //   console.log(keynum)
+    //   if (
+    //     e.key
+    //       .replace(/[^\d^\.]+/g, '')
+    //       .replace('.', '$#$')
+    //       .replace(/\./g, '')
+    //       .replace('$#$', '.') === '' &&
+    //     keynum !== 8
+    //   ) {
+    //     this.$message.warning('禁止输入中文或空')
+    //     e.target.value = ' '
+    //   }
+    // },
+    handleImageSuccess(response) {
+      const url = response.data.url
+      this.form.imgs.push({
+        imgPath: url
+      })
+    },
+    // 移除图片
+    handleRemove(file) {
+      const { imgPath } = file
+      this.form.imgs = this.form.imgs.filter((item) => item.imgPath !== imgPath)
+    },
+    handleRemove1(file) {
+      file.image = ''
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.imgPath
+      this.dialogVisible = true
+    },
+    handleImageSuccess1(response, file, fileList) {
+      const url = response.data.url
+      fileList[0].image = url
+    },
+    del(row, index, arr) {
+      console.log(row, index)
+      // this.form.skuList.splice(index, 1);
+      // console.log(this.form.skuAttrList);
+      // console.log(this.form.skuList);
+      console.log(arr)
+    },
+    //
+    changeAttrStyle(index) {
+      console.log(index)
+      console.log(this.form)
+      // if (index === 0) {
+      //   this.form.skuAttrList = []
+      // }
+    },
+    addSkuAttrList() {
+      this.form.skuAttrList.push({
+        code: '',
+        skuName: '',
+        values: [
+          {
+            skuValue: '',
+            valueCode: '',
+            image: '',
+            isDelete: 0,
+            sortOrder: 0
+          }
+        ],
+        isDelete: 0,
+        needImg: 0,
+        sortOrder: 0
+      })
+    },
+    addAttrValue(index) {
+      this.form.skuAttrList[index].values.push({
+        skuValue: '',
+        valueCode: '',
+        image: ''
+      })
+    },
+    // 删除规格值
+    delValue(index, index1) {
+      const newList = JSON.parse(JSON.stringify(this.form.skuAttrList[index]))
+      const valueObj = {
+        code: newList.code,
+        skuId: newList.skuId,
+        valueCode: newList.values[index1].valueCode
+      }
+      this.form.deletes.push(valueObj)
+      this.form.skuAttrList[index].values.splice(index1, 1)
+    },
+    // 删除规格名
+    delSkuAttrList(index) {
+      const newList = JSON.parse(JSON.stringify(this.form.skuAttrList[index]))
+      newList.values.forEach((item) => {
+        const valueObj = {
+          code: newList.code,
+          skuId: newList.skuId,
+          valueCode: ''
+        }
+        valueObj.valueCode = item.valueCode
+        this.form.deletes.push(valueObj)
+      })
+      this.form.skuAttrList.splice(index, 1)
+    },
+    delAttrValue1(row, index, arr) {
+
+    },
+    skuFormat() {
+      const skuListArray = []
+      const result = {
+        isDelete: 0,
+        productId: '',
+        skuAttrCodeDTOList: [
+          {
+            code: '',
+            valueCode: ''
+          }
+        ],
+        sku: '',
+        skuImg: '',
+        price: 0,
+        originalPrice: 0,
+        stockNumber: 0,
+        weight: 0
+      }
+      const doExchange = (arr, depth) => {
+        const map = {
+          arr: []
+        }
+        for (var i = 0; i < arr[depth].length; i++) {
+          map.arr.push(arr[depth][i])
+          const { code, valueCode, attrId } = arr[depth][i]
+          result.skuAttrCodeDTOList[depth] = {
+            code,
+            valueCode,
+            attrId
+          }
+          if (depth !== arr.length - 1) {
+            doExchange(arr, depth + 1)
+          } else {
+            skuListArray.push(JSON.parse(JSON.stringify(result)))
+          }
+        }
+      }
+      // this.form.skuList  = skuListArray
+      // 获取规格值的所有组合
+      const values = []
+      this.form.skuAttrList.map((skuItem, index) => {
+        const attrList = []
+        skuItem.code = skuItem.code || 'attr_code_' + index
+        const { code } = skuItem
+        skuItem.values &&
+          skuItem.values.map((attrItem, index1) => {
+            attrItem.valueCode = skuItem.valueCode || code + '_value_' + index1
+            const skuId = attrItem.skuId
+            const attrId = attrItem.attrId
+            if (attrItem.skuValue) {
+              attrList.push({
+                skuId,
+                attrId,
+                code,
+                valueCode: attrItem.valueCode
+              })
+            }
+          })
+        if (attrList.length) {
+          values.push(attrList)
+        }
+      })
+      // 相互组合
+      if (values.length) {
+        doExchange(values, 0)
+      }
+      this.form.skuList = skuListArray.map((sku1) => {
+        const { skuAttrList, skuAttrCodeDTOList } = sku1
+        const skuAttrList1 = skuAttrCodeDTOList || skuAttrList
+        const skuMap = this.form.skuList.filter((sku2) => {
+          const skuAttrList2 = sku2.skuAttrList
+          sku2.skuAttrCodeDTOList = skuAttrList2
+          if (!skuAttrList2) return false
+          const ids = []
+          skuAttrList1.filter((item) => ids.push(item.id))
+          const result = skuAttrList2.every((item) => ids.indexOf(item.attrValueId) !== -1)
+          return result
+        })
+        let selectMap = sku1
+        if (skuMap && skuMap.length) {
+          selectMap = JSON.parse(JSON.stringify(skuMap[0]))
+          selectMap.skuAttrCodeDTOList = skuAttrCodeDTOList
+        }
+        return selectMap
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../../../styles/elDialog.scss");
+
+.style-information-component {
+	width: 100%;
+	min-height: 300px;
+	padding: 24px;
+	background-color: rgb(255, 255, 255);
+
+	.el-form-item {
+		margin-bottom: 10px;
+	}
+
+	.attr-value-list {
+		display: flex;
+		flex-wrap: wrap;
+
+		.main-diagram {
+			width: 180px;
+
+			.span-wrap {
+				position: relative;
+				display: inline-block;
+				margin-top: 10px;
+
+				.attr-actions {
+					line-height: 100px;
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					left: 0;
+					top: 0;
+					cursor: default;
+					text-align: center;
+					color: #fff;
+					opacity: 0;
+					font-size: 20px;
+					background-color: rgba(0, 0, 0, 0.5);
+					-webkit-transition: opacity 0.3s;
+					transition: opacity 0.3s;
+					z-index: 1;
+
+					&:hover {
+						opacity: 1;
+
+						.attr-preview {
+							display: inline-block;
+						}
+
+						i {
+							color: #fff;
+							font-size: 20px;
+						}
+					}
+				}
+
+				.attr-preview {
+					display: none;
+					cursor: pointer;
+					font-size: 20px;
+					color: #fff;
+				}
+
+				.attr-delete {
+					margin-left: 15px;
+					color: #fff;
+				}
+			}
+
+			.attr-value-img {
+				width: 100%;
+				height: 100%;
+
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+				}
+			}
+		}
+	}
+
+	.m-8 {
+		margin-right: 8px;
+	}
+
+	.upload-btn {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 110px;
+		cursor: pointer;
+		border: 2px dashed #2e60f8;
+		border-radius: 2px;
+		background-color: #f8f9fb;
+		text-align: center;
+		font-size: 20px;
+		color: #2e60f8;
+
+		i {
+			color: #2e60f8;
+			font-size: 20px;
+		}
+
+		.upload-title {
+			margin-left: 10px;
+			font-size: 14px;
+		}
+	}
+
+	.upload-wrap {
+		margin-bottom: 25px;
+
+		.el-upload-list__item {
+			transition: none !important;
+		}
+
+		.el-upload,
+		.el-upload-list__item {
+			width: 100px;
+			height: 100px;
+			line-height: 100px;
+		}
+
+		.el-progress,
+		.el-progress-circle {
+			width: 80px !important;
+			height: 80px !important;
+		}
+	}
+
+	.sku-attr-list {
+		.el-input {
+			width: 180px;
+		}
+	}
+
+	.single-style {
+		.el-input {
+			max-width: 180px;
+		}
+	}
+
+	.add-attr-btn {
+		margin-bottom: 25px;
+	}
+
+	.check-image-dialog {
+		.el-dialog {
+			margin-top: 25px;
+
+			.el-dialog__body {
+				img {
+					max-width: 100%;
+					max-height: 100%;
+					height: 500px;
+					object-fit: contain;
+				}
+			}
+		}
+	}
+
+	.delImg {
+		position: absolute;
+		top: 12px;
+		margin-left: -24px
+	}
+
+	.delImg:hover {
+		border-radius: 50%;
+		color: #ffffff;
+		background: #2e60f8;
+		cursor: pointer;
+	}
+}
+</style>

src/views/platformProduct/commodityManagement/index.vue

@@ -0,0 +1,700 @@
+<template>
+  <div>
+    <div class="pending">
+      <!-- 搜索 -->
+      <div class="formSearch">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="商品名称">
+            <el-input v-model="formInline.search" maxlength="20" placeholder="请输入商品名称" />
+          </el-form-item>
+          <el-form-item label="上架状态">
+            <el-select v-model="formInline.shelveState" placeholder="请选择上架状态">
+              <el-option label="全部" :value="null" />
+              <el-option label="上架" value="1" />
+              <el-option label="下架" value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="官方分类">
+            <el-cascader
+              v-model="formInline.classifyId" :options="categoryList" clearable :props="{
+                checkStrictly: true,
+                expandTrigger: 'hover',
+                label: 'categoryName',
+                value: 'id',
+                children: 'childs'
+              }"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" plain @click="search">查询</el-button>
+            <el-button plain @click="clear">重置</el-button>
+            <el-button type="success" plain @click="add">新增商品</el-button>
+            <el-button type="success" plain @click="sends">批量导入</el-button>
+            <el-button type="success" plain @click="productDataExport">导出商品</el-button>
+            <!-- <span v-for="(item,index) in btnList" :key="index" class="promissStyle">
+              <el-button type="success" plain @click="btnClick(item)">{{ item.permissionName }}</el-button>
+              </span> -->
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 表格 -->
+      <div class="tableBox">
+        <el-table
+          ref="multipleTable" :data="tableData" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+        >
+          <el-table-column prop="productId" label="商品id" show-overflow-tooltip />
+          <el-table-column label="商品主图" width="150" align="center">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.productImage" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="productName" label="商品名称" width="220" />
+          <el-table-column prop="section" label="售价区间" show-overflow-tooltip />
+          <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip />
+          <el-table-column prop="ifCredit" label="积分兑换" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span v-if="scope.row.ifCredit == 1">允许</span>
+              <span v-if="scope.row.ifCredit == 0">不允许</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
+          <el-table-column prop="volume" label="销量" show-overflow-tooltip />
+          <el-table-column prop="volume" label="上架状态" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span v-if="scope.row.shelveState == 0">未上架</span>
+              <span v-if="scope.row.shelveState == 1">已上架</span>
+              <span v-if="scope.row.shelveState == 2">待审核</span>
+              <span v-if="scope.row.shelveState == 3">审核失败</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip />
+          <el-table-column :formatter="row => getBrandName(row)" label="品牌" show-overflow-tooltip />
+          <el-table-column prop="createTime" label="创建时间" width="180" />
+          <el-table-column label="操作" width="200">
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+                <el-button v-if="scope.row.shelveState == 0" type="text" @click="down(scope.row)">上架</el-button>
+                <el-button v-if="scope.row.shelveState == 1" type="text" @click="down(scope.row)">下架</el-button>
+                <el-button v-if="scope.row.shelveState == 1" type="text" @click="setVipPrice(scope.row)">设置会员价</el-button>
+                <el-button v-if="scope.row.shelveState != 1" type="text" @click="del(scope.row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 批量导入 -->
+    <el-dialog title="批量导入商品" :visible.sync="batchAdd" :close-on-click-modal="false" center width="400px">
+      <div class="uploadDialog">
+        <el-upload
+          drag :limit="1" :auto-upload="false" accept=".xlsx"
+          :headers="headers" :action="UploadUrls"
+          :before-upload="beforeUploadFile" :on-change="fileChange" :on-remove="batchRemove" :on-exceed="exceedFile"
+          :on-success="handleSuccess" :on-error="handleError" :file-list="batchFileList"
+        >
+          <i class="el-icon-upload" />
+          <div class="el-upload__text">
+            <em>点击上传</em>
+          </div>
+          <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过10M</div>
+          <div slot="tip" class="el-upload__tip">
+            上传前不知道excel模板的，请点击
+            <span class="clickMe" @click="poDownload">点我下载模板</span> 去下载
+          </div>
+        </el-upload>
+        <br>
+        <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
+      </div>
+    </el-dialog>
+    <!-- 设置会员价弹窗 -->
+    <el-dialog title="设置会员价" :visible.sync="vipPriceVisible" width="50%" class="vipDialog">
+      <el-form ref="form" label-width="80px">
+        <el-form-item label="优惠方式">
+          <el-radio-group v-model="mode" @change="modeChange">
+            <el-radio :label="1">折扣</el-radio>
+            <el-radio :label="2">指定价格</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div class="priceTable">
+          <table>
+            <tr>
+              <th>规格</th>
+              <th>售价</th>
+              <th v-for="(item, index) in gradeList" :key="index">
+                {{ item }}
+              </th>
+            </tr>
+            <tr v-for="(item, index) in productData" :key="index">
+              <td>
+                {{ item.value }}
+              </td>
+              <td>
+                {{ item.price }}
+              </td>
+              <td v-for="(itemJ, indexJ) in item.memberPrices" :key="indexJ" class="td-input">
+                <el-input v-model="itemJ.price" maxlength="9" oninput="value=value.replace(/([^\d|\.])/g, '')" /> {{
+                  mode == 1 ? '折' : '元' }}
+              </td>
+            </tr>
+          </table>
+        </div>
+        <el-button type="success" class="clearBtn" @click="clearProductMember">清除所有旧会员价</el-button>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="vipPriceVisible = false">取 消</el-button>
+        <el-button type="primary" @click="vipPriceSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 新增/修改商品弹窗 -->
+    <el-dialog
+      :title="!commId ? '新增商品' : '编辑商品'" :visible.sync="commidyVisible" width="74%" center
+      top="10vh"
+      :close-on-click-modal="false" @before-close="closeModal" @close="closeModal"
+    >
+      <CommAdd ref="child" :voucherList="voucherList" :show-tinymce="showTinymce" :product-id="commId" @cancel="cancelForm" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import CommAdd from './addCommodity.vue'
+import { getBtnList, getToken } from '@/utils/auth'
+import { uploadUrl } from '@/utils/request'
+import {
+  getClassifyGetAll,
+  getClassifyDelete,
+  getClassifyStart,
+  downloadTemplate,
+  importProduct,
+  getClassify,
+  getProductMembers,
+  setProductMember,
+  clearProductMember,
+  productExport,
+  getBrandList,
+  getVoucher
+} from '@/api/platformProduct'
+export default {
+  components: {
+    CommAdd
+  },
+  data() {
+    // 这里存放数据
+    return {
+      showTinymce: false,
+      btnList: '',
+      activeName: 'first',
+      formInline: {
+        search: '', // 搜索字段
+        shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
+        stock: '', // 库存状态 1-有库存 0-无库存 null-全部
+        classifyId: '', // 最下级分类id
+        page: 1, // 当前页
+        pageSize: 10
+      },
+      batchAdd: false,
+      batchFileList: [],
+      total: 1,
+      tableData: [],
+      categoryList: [],
+      UploadUrl: uploadUrl,
+      headers: {
+        'Authorization-business': getToken()
+      },
+      vipPriceVisible: false,
+      productId: 0,
+      mode: 1,
+      productData: [],
+      gradeList: [],
+      commidyVisible: false,
+      commId: 0,
+      brandList: [],
+      voucherList: []
+    }
+  },
+  computed: {
+    getBrandName() {
+      return (row) => {
+        const find = this.brandList.find((item) => item.id === row.brandId)
+        if (find) return find.brandName
+        return '-'
+      }
+    }
+  },
+  created () {
+    getVoucher({
+      page: 1,
+      pageSize: 100,
+      voucherId: '',
+      voucherName: ''
+    }).then(res => { // 获取可选的代金卷，用于创建和修改商品时定义代金卷的使用规则
+      this.voucherList = res.data.list
+      this.voucherList.push({
+        voucherName: '不使用代金卷',
+        updateTime: '123123123123',
+        ratio: 'xxx',
+        enabled: '666',
+        id: '0',
+        desc: '不支持代金卷'
+      })
+    })
+  },
+  mounted() {
+    this.getBrandList()
+    this.getAll(this.formInline)
+    this.queryAllCategory()
+    this.btnList = getBtnList()
+  },
+  // 方法集合
+  methods: {
+    async getBrandList() {
+      const { data } = await getBrandList()
+      this.brandList = data
+    },
+    cancelForm() {
+      this.commidyVisible = false
+      this.formInline = {
+        search: '',
+        shelveState: '',
+        stock: '',
+        classifyId: '',
+        page: 1,
+        pageSize: 10
+      }
+      this.getAll(this.formInline)
+      this.closeModal()
+    },
+    closeModal() {
+      this.showTinymce = false
+      this.$refs.child.last()
+      this.$refs.child.reset()
+    },
+    btnClick(id) {
+      if (id.permissionName === '批量导入') {
+        this.sends()
+      } else if (id.permissionName === '新增商品') {
+        this.add()
+      }
+    },
+    handleSizeChange(val) {
+      this.formInline.pageSize = val
+      this.getAll(this.formInline)
+    },
+    handleCurrentChange(val) {
+      this.formInline.page = val
+      this.getAll(this.formInline)
+    },
+    //  查询
+    search() {
+      this.total = 1
+      this.formInline.page = 1
+      this.getAll(this.formInline)
+    },
+    // 重置
+    clear() {
+      this.formInline = {
+        search: '', // 搜索字段
+        shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
+        stock: '', // 库存状态 1-有库存 0-无库存 null-全部
+        classifyId: '', // 最下级分类id
+        page: 1, // 当前页
+        pageSize: 10
+      }
+    },
+    // 新增商品
+    add() {
+      this.showTinymce = true
+      if (this.commId) {
+        this.$refs.child.reset()
+      }
+      this.commidyVisible = true
+      this.commId = 0
+      // this.$router.push({ name: 'addCommodity', params: { id: '1' }})
+    },
+    // 导出商品
+    async productDataExport() {
+      this.$message({
+        message: '数据导出中，请勿重复操作！',
+        type: 'success'
+      })
+      const res = await productExport(this.formInline)
+      if (!res) { return }
+      const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
+      const fileName = '商品数据明细表.xls'
+      if ('download' in document.createElement('a')) {
+        // 非IE下载
+        const elink = document.createElement('a')
+        elink.download = fileName
+        elink.href = URL.createObjectURL(blob)
+        elink.style.display = 'none'
+        document.body.appendChild(elink)
+        elink.click()
+        URL.revokeObjectURL(elink.href) // 释放URL 对象
+        document.body.removeChild(elink)
+      } else {
+        // IE10+下载
+        navigator.msSaveBlob(blob, fileName)
+      }
+    },
+    // 批量导入
+    sends() {
+      this.batchAdd = true
+      this.batchFileList = []
+    },
+    // 编辑商品
+    edit(row) {
+      this.showTinymce = true
+      this.commidyVisible = true
+      this.commId = row.productId
+      this.$nextTick(() => {
+        this.$refs.child?.details()
+      })
+      // this.$router.push({
+      //   name: 'addCommodity',
+      //   params: { productId: row.productId }
+      // })
+      // let res = await getClassifyGetById({ productId: row.productId });
+      // console.log(res);
+    },
+    // 设置会员价
+    setVipPrice(row) {
+      var _ = this
+      this.productId = row.productId
+      getProductMembers({ productId: row.productId }).then((res) => {
+        if (res.code === '') {
+          _.productData = res.data
+          if (_.productData && _.productData.length > 0) {
+            _.gradeList = []
+            const _memberPrices = _.productData[0].memberPrices
+            _memberPrices.forEach(function (item, i) {
+              _.gradeList.push(item.memberLevelName)
+            })
+            _.mode = _.productData[0].mode ? _.productData[0].mode : 1
+            _.vipPriceVisible = true
+          }
+        }
+      })
+    },
+    // 设置会员价提交
+    vipPriceSubmit() {
+      for (let i = 0; i < this.productData.length; i++) {
+        this.productData[i].mode = this.mode
+        for (let j = 0; j < this.productData[i].memberPrices.length; j++) {
+          this.productData[i].memberPrices[j].mode = this.mode
+          var _price = this.productData[i].memberPrices[j].price
+          if (!_price) {
+            this.$message({
+              type: 'warning',
+              message: '会员价格不能为空！'
+            })
+            return false
+          } else if (this.productData[i].mode === 1) {
+            if (_price <= 0 || _price >= 10) {
+              this.$message({
+                type: 'warning',
+                message: '会员折数必须大于0小于10！'
+              })
+              return false
+            }
+          } else if (this.productData[i].mode === 2) {
+            if (_price > this.productData[i].price) {
+              this.$message({
+                type: 'warning',
+                message: '会员价格不能大于原价！'
+              })
+              return false
+            }
+          }
+        }
+      }
+      setProductMember({ productId: this.productId, members: this.productData }).then((res) => {
+        if (res.code === '') {
+          this.$message({
+            type: 'success',
+            message: '设置成功!'
+          })
+          this.getAll(this.formInline)
+          this.vipPriceVisible = false
+        }
+      })
+    },
+    // 清空会员价
+    clearProductMember() {
+      console.log(this.productData, 'this.productData')
+      this.$confirm('该商品所有旧设置的会员价将被清除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        clearProductMember({ productId: this.productId }).then((res) => {
+          if (res.code === '') {
+            this.productData.map((item) => {
+              item.memberPrices.map((itemChild) => {
+                itemChild.price = null
+              })
+            })
+            this.$message.success('清除成功')
+            // this.vipPriceVisible = false
+          }
+        })
+      })
+    },
+    // 删除商品
+    del(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          getClassifyDelete({ productId: row.productId }).then((res) => {
+            if (res.code === '') {
+              this.$message({
+                type: 'success',
+                message: '删除成功!'
+              })
+              this.getAll(this.formInline)
+            }
+          })
+        })
+        .catch(() => { })
+    },
+    // 商品上下架
+    async down(row) {
+      console.log(row.shelveState)
+      if (row.shelveState) {
+        console.log(111)
+        const res = await getClassifyStart({
+          productId: row.productId,
+          shelveState: 0
+        })
+        if (res.code === '') {
+          this.$message({
+            type: 'success',
+            message: '下架成功!'
+          })
+          this.getAll(this.formInline)
+        }
+      } else {
+        const res = await getClassifyStart({
+          productId: row.productId,
+          shelveState: 1
+        })
+        if (res.code === '') {
+          this.$message({
+            type: 'success',
+            message: '上架成功!'
+          })
+          this.getAll(this.formInline)
+        }
+      }
+    },
+    // 初始化查询所有数据
+    async getAll(formInline) {
+      this.formInline.classifyId =
+        this.formInline.classifyId[2] ||
+        this.formInline.classifyId[1] ||
+        this.formInline.classifyId[0] ||
+        this.formInline.classifyId
+      const res = await getClassifyGetAll(formInline)
+      this.total = res.data.total
+      this.tableData = res.data.list
+    },
+    // 初始化查询所有分类
+    async queryAllCategory() {
+      const res = await getClassify()
+      this.categoryList = res.data
+      this.handleRemoveEmptyChild(this.categoryList)
+    },
+    handleRemoveEmptyChild(arr) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].childs && Array.isArray(arr[i].childs)) {
+          this.handleRemoveEmptyChild(arr[i].childs)
+        }
+        if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {
+          delete arr[i].childs
+        }
+      }
+    },
+    // *********************导入部分
+    UploadUrls() {
+      // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
+      return ''
+    },
+    // 下载模板
+    poDownload() {
+      downloadTemplate().then((res) => {
+        console.log(res, 1111)
+        // const content = res
+        const blob = new Blob([ res ])
+        const fileName = '批量导入商品模板.xlsx'
+        if ('download' in document.createElement('a')) {
+          // 非IE下载
+          const elink = document.createElement('a')
+          elink.download = fileName
+          elink.style.display = 'none'
+          elink.href = URL.createObjectURL(blob)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href) // 释放URL 对象
+          document.body.removeChild(elink)
+        } else {
+          // IE10+下载
+          navigator.msSaveBlob(blob, fileName)
+        }
+      })
+    },
+    // 导入
+    uploadFile() {
+      if (this.batchFileList.length === 0) {
+        this.$message.warning('请上传文件')
+      } else {
+        const formDate = new FormData()
+        formDate.append('file', this.batchFileList[0])
+        console.log(formDate.get('file'))
+        importProduct(formDate).then((res) => {
+          console.log(res)
+          if (res.code === '') {
+            this.$message.success('导入成功')
+            this.batchAdd = false
+            this.batchFileList = []
+            this.getAll(this.formInline)
+          }
+        })
+      }
+    },
+    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
+    beforeUploadFile(file) {
+      console.log('before upload')
+      console.log(file)
+      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const size = file.size / 1024 / 1024
+      if (extension !== 'xlsx') {
+        this.$message.warning('只能上传后缀是.xlsx的文件')
+      }
+      if (size > 10) {
+        this.$message.warning('文件大小不得超过10M')
+      }
+    },
+    // 文件状态改变时的钩子
+    fileChange(file, batchFileList) {
+      console.log(file.raw)
+      this.batchFileList.push(file.raw)
+      console.log(this.batchFileList)
+    },
+    batchRemove(file, batchFileList) {
+      this.batchFileList = []
+    },
+    // 文件超出个数限制时的钩子
+    exceedFile(files, batchFileList) {
+      this.$message.warning(`只能选择1个文件`)
+    },
+    // 文件上传成功时的钩子
+    handleSuccess(res, file, batchFileList) {
+      this.$message.success('文件上传成功')
+    },
+    // 文件上传失败时的钩子
+    handleError() {
+      this.$message.error('文件上传失败')
+    },
+    // 切换优惠方式清除内容
+    modeChange() {
+      this.productData.forEach((item) => {
+        item.memberPrices.forEach((itemJ) => {
+          itemJ.price = ''
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+@import url("../../../styles/elDialog.scss");
+
+.pending {
+	padding: 30px;
+}
+
+.fenye {
+	margin-top: 20px;
+}
+
+.clickMe {
+	color: #3a68f2;
+	cursor: pointer;
+}
+
+.uploadDialog {
+
+	// display: flex;
+	// flex-direction: column;
+	// justify-content: center;
+	>>>.el-upload__tip {
+		display: inline-block;
+		width: 360px;
+		margin: auto;
+	}
+}
+
+.vipDialog {
+	.priceTable {
+		table {
+			width: 100%;
+			text-align: center;
+			border-left: 1px solid #EBEEF5;
+			border-bottom: 1px solid #EBEEF5;
+			font-size: 14px;
+			color: #606266;
+			border-collapse: collapse;
+
+			tr {
+				border-top: 1px solid #EBEEF5;
+
+				th {
+					padding: 12px 0;
+					background: #EEF3FF;
+					color: #333;
+					border-right: 1px solid #EBEEF5;
+				}
+
+				td {
+					padding: 12px 0;
+					border-right: 1px solid #EBEEF5;
+
+					&.td-input {
+						.el-input {
+							width: 80px;
+							margin-right: 0;
+						}
+					}
+
+					&:nth-child(1),
+					&:nth-child(2) {
+						width: 80px;
+					}
+
+					.el-input {
+						width: 100px;
+						margin-right: 10px;
+					}
+				}
+			}
+		}
+	}
+
+	.clearBtn {
+		margin-top: 20px;
+	}
+}
+</style>

src/views/platformProduct/platformProductClassify/Edit.vue

@@ -0,0 +1,555 @@
+<template>
+  <el-dialog
+    :close-on-click-modal="false" :title="title" :type="type" :visible.sync="isVisible"
+    center width="48%"
+    top="50px" class="group-dialog"
+  >
+    <div class="add-dialog-component">
+      <el-alert :style="{ backgroundColor: '#fff' }" title="保存后将生效在移动端的分类里" type="info" :closable="false" />
+      <el-tree
+        class="tree-box" :data="treeData" :props="{ children: 'childs' }" node-key="id"
+        default-expand-all draggable
+        :expand-on-click-node="false"
+      >
+        <div slot-scope="{ node, data }" class="custom-tree-node">
+          <div class="content">
+            <template v-if="data.depth < 3">
+              <el-input
+                v-model="data.categoryName" class="input" :disabled="isCheck" maxlength="6"
+                size="mini"
+                :placeholder="data.depth | placeholderTips"
+              />
+              <el-upload
+                class="upload-uploader" :on-success="handleImageSuccessOne" :multiple="false"
+                :show-file-list="false" :action="action" :file-list="data.categoryImgArray"
+              >
+                <img
+                  v-if="data.categoryImgArray.length && data.categoryImgArray[0].imgPath" width="80" height="80"
+                  :src="data.categoryImgArray.length && data.categoryImgArray[0].imgPath"
+                >
+                <i v-else class="el-icon-plus" />
+              </el-upload>
+            </template>
+            <template v-else>
+              <div class="content" :class="isCheck ? 'disabled' : ''">
+                <el-input
+                  v-model="data.categoryName" class="input" :disabled="isCheck" size="mini"
+                  maxlength="6"
+                  placeholder="输入三级类别名称（最大6个字符）"
+                />
+                <el-upload
+                  :headers="headers" :data="dataObj" :multiple="false" :show-file-list="false"
+                  :file-list="data.categoryImgArray" :on-success="handleImageSuccess" class="upload-uploader"
+                  :action="action"
+                >
+                  <img
+                    v-if="data.categoryImgArray && data.categoryImgArray[0].url
+                    " width="80" height="80" :src="data.categoryImgArray && data.categoryImgArray[0].url
+                    "
+                  >
+                  <i v-else class="el-icon-plus" />
+                </el-upload>
+              </div>
+            </template>
+          </div>
+          <div v-if="!isCheck" class="setting-box">
+            <el-button type="text" size="mini" @click="() => append(data)">
+              {{ data.depth | addTips }}
+            </el-button>
+            <el-button type="text" size="mini" @click="() => remove(node, data)">
+              删除
+            </el-button>
+          </div>
+        </div>
+      </el-tree>
+      <div class="add-btn-wrap">
+        <template v-if="isCheck">
+          <el-button class="add" type="primary" size="small" @click="close">
+            确定
+          </el-button>
+        </template>
+        <template v-else>
+          <el-button v-if="type === 'add'" class="add" type="primary" size="small" @click="addClassification">
+            添加一级类别名称
+          </el-button>
+          <el-button type="primary" size="small" @click="onSubmit">
+            保存
+          </el-button>
+        </template>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { uploadUrl } from '@/utils/request'
+// import {
+//   getSelect,
+//   commdityClassAdd,
+//   commdityClassgetById,
+//   commdityClassUpdate
+// } from '@/api/renovation'
+
+import {
+  createdShopClass,
+  updateClass,
+  getClassDetails
+} from '@/api/platformProduct'
+
+let idx = 1000
+let imgId = 1
+export default {
+  filters: {
+    addTips(depth) {
+      depth = depth + ''
+      const tipsMp = {
+        1: '添加二级类别名称',
+        2: '添加三级类别名称'
+      }
+      return tipsMp[depth]
+    },
+    placeholderTips(depth) {
+      depth = depth + ''
+      const tipsMp = {
+        1: '输入一级类别名称（最大6个字符）',
+        2: '输入二级类别名称（最大6个字符）'
+      }
+      return tipsMp[depth]
+    }
+  },
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'add'
+    }
+  },
+  data() {
+    return {
+      params: {
+        categoryName: ''
+      },
+      file: this.image ? this.image : '',
+      imgList: [],
+      customParams: {
+        current: 1,
+        map: {},
+        model: {
+          config: '',
+          isCustom: true,
+          isDelete: 0,
+          name: ''
+        },
+        order: 'descending',
+        size: 100,
+        sort: 'id'
+      },
+      treeData: [],
+      headers: {
+        Authorization: ''
+      },
+      action: uploadUrl,
+      dataObj: {
+        folderId: 1
+      },
+      deleteArr: []
+    }
+  },
+  computed: {
+    isVisible: {
+      get() {
+        return this.dialogVisible
+      },
+      set() {
+        this.close()
+        this.reset()
+      }
+    },
+    title() {
+      const stateMap = {
+        add: '新建类别',
+        edit: '修改类别',
+        check: '查看类别'
+      }
+      return stateMap[this.type]
+    },
+    isCheck() {
+      return this.type === 'check'
+    }
+  },
+  async created() {
+    /*
+		const res = await getSelect({
+			dictName: '商品类别链接'
+		})
+		console.log(res)
+		this.dictList = res.data
+		*/
+  },
+  methods: {
+    async queryOneCategory(oneClassifyId) {
+      console.log(oneClassifyId)
+      if (oneClassifyId === undefined) {
+        this.treeData = []
+        return
+      }
+      const res = await getClassDetails({
+        oneClassifyId
+      })
+      console.log(res)
+      const resData = res.data
+      const treeFilter = (item) => {
+        const {
+          categoryName,
+          categoryImg,
+          categoryPath,
+          parentName,
+          categoryImgArray,
+          depth,
+          id,
+          link
+        } = item
+        const newMap = {
+          depth,
+          categoryName,
+          categoryPath: categoryPath || '',
+          parentName,
+          categoryImgArray,
+          link,
+          id
+        }
+        console.log(depth)
+        if (depth === 3) {
+          newMap.categoryImgArray = [
+            {
+              url: categoryImg
+            }
+          ]
+        }
+        if (item.childs && item.childs.length) {
+          newMap.childs = item.childs.map(treeFilter)
+        }
+        return newMap
+      }
+      if (resData) {
+        resData.childs =
+          resData && resData.childs && resData.childs.map(treeFilter)
+        this.treeData = [ resData ]
+      } else {
+        this.treeData = []
+      }
+      console.log(this.treeData)
+    },
+    handleImageSuccess(response, file, fileList) {
+      console.log(response)
+      const url = response.data.url
+      fileList[0].url = url
+    },
+    handleImageSuccessOne(response, file, fileList) {
+      const url = response.data.url
+      console.log(fileList)
+      fileList[0].imgPath = url
+    },
+    close() {
+      this.$emit('close')
+    },
+    reset() {
+      this.treeData = []
+    },
+    addClassification() {
+      this.treeData.push({
+        placeholder: '输入一级类别名称',
+        addTips: '添加二级类别名称',
+        categoryName: '',
+        categoryPath: '',
+        depth: 1,
+        idx: idx++,
+        categoryImgArray: [
+          {
+            id: imgId++,
+            imgPath: ''
+          }
+        ]
+      })
+    },
+    append(data) {
+      console.log(data)
+      const { categoryName } = data
+      const depth = data.depth + 1
+      let newChild
+      if (!data.childs) {
+        this.$set(data, 'childs', [])
+      }
+      if (depth < 3) {
+        newChild = {
+          placeholder: '输入二级类别名称',
+          addTips: '添加三级类别名称',
+          depth,
+          parentName: categoryName,
+          categoryName: '',
+          categoryPath: '',
+          categoryImgArray: [
+            {
+              id: imgId++,
+              imgPath: ''
+            }
+          ],
+          childs: [],
+          idx: idx++
+        }
+      } else {
+        newChild = {
+          parentName: categoryName,
+          categoryImgArray: [
+            {
+              id: imgId++,
+              url: ''
+            }
+          ],
+          depth: 3,
+          categoryName: '',
+          idx: idx++
+        }
+      }
+      data.childs.push(newChild)
+    },
+    remove(node, data) {
+      const parent = node.parent
+      const children = parent.data.childs || parent.data
+      const index = children.findIndex((d) => d.idx === data.idx)
+      if (index !== -1) {
+        children.splice(index, 1)
+        this.deleteArr.push(data.id || '')
+      } else {
+        this.$message.warning('数据错误，请重试')
+      }
+    },
+    onSubmit() {
+      console.log(this.type)
+      if (this.type === 'add') {
+        this.addGroup()
+      } else {
+        this.updateGroup()
+      }
+    },
+    async addGroup() {
+      console.log(this.treeData)
+      const treeFilter = (item) => {
+        const {
+          categoryName,
+          categoryImgArray,
+          categoryPath,
+          parentName,
+          depth,
+          link
+        } = item
+        const newMap = {
+          depth,
+          categoryName,
+          categoryPath: categoryPath || '',
+          parentName,
+          link
+        }
+        if (categoryImgArray) {
+          newMap.categoryImg = categoryImgArray[0].imgPath
+        }
+        if (depth === 3) {
+          newMap.categoryImg = categoryImgArray[0].url
+        }
+        if (!newMap.categoryImg) {
+          this.$message.error('分类\"' + categoryName + '\"请上传分类图片')
+          throw new Error('未上传分类图片')
+        }
+        if (item.childs && item.childs.length) {
+          newMap.childs = item.childs.map(treeFilter)
+        }
+        return newMap
+      }
+      const params = this.treeData.map(treeFilter)
+      console.log(params)
+      if (params.length === 0) {
+        this.$message.error('请添加分类')
+        return
+      }
+      const obj = {
+        classifies: params
+      }
+      const res = await createdShopClass(obj)
+      if (res.code === '') {
+        this.isVisible = false
+        this.$message({
+          message: '新增成功',
+          type: 'success'
+        })
+        this.$emit('success')
+        this.deleteArr = []
+      }
+    },
+    async updateGroup() {
+      const treeFilter = (item) => {
+        const {
+          categoryName,
+          categoryImgArray,
+          categoryPath,
+          parentName,
+          depth,
+          id,
+          link
+        } = item
+        const newMap = {
+          depth,
+          categoryName,
+          categoryPath: categoryPath || '',
+          parentName,
+          link,
+          id
+        }
+        if (categoryImgArray) {
+          newMap.categoryImg = categoryImgArray[0].imgPath
+        }
+        if (depth === 3) {
+          newMap.categoryImg = categoryImgArray[0].url
+        }
+        if (!newMap.categoryImg) {
+          this.$message.error('分类\"' + categoryName + '\"请上传分类图片')
+          throw new Error('未上传分类图片')
+        }
+        if (item.childs && item.childs.length) {
+          newMap.childs = item.childs.map(treeFilter)
+        }
+        return newMap
+      }
+      console.log(this.treeData)
+      const params = this.treeData.map(treeFilter)
+      const obj = {
+        classifies: params,
+        deleteIds: this.deleteArr
+      }
+      const res = await updateClass(obj)
+      if (res.code === '') {
+        this.isVisible = false
+        this.$message({
+          message: '成功',
+          type: 'success'
+        })
+        this.$emit('success')
+        this.deleteArr = []
+      }
+    },
+    setParams({ id }) {
+      console.log(id)
+      this.queryOneCategory(id)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.add-dialog-component {
+	.tree-box {
+		.el-tree-node__content {
+			margin-bottom: 15px;
+			height: auto;
+		}
+	}
+}
+</style>
+
+<style
+  lang="scss"
+  scoped
+>
+@import url("../../../styles/elDialog.scss");
+
+.group-dialog {
+	.el-dialog {
+		min-width: 500px;
+		max-width: 600px;
+	}
+}
+
+.add-dialog-component {
+	padding: 15px 20px;
+	max-height: 60vh;
+	overflow: auto;
+
+	.el-tree-node__content {
+		&:hover {
+			background-color: #fff;
+		}
+	}
+
+	.tree-box {
+		margin: 15px 0;
+
+		.custom-tree-node {
+			display: flex;
+			width: 100%;
+			text-align: left;
+
+			.content {
+				flex: 1;
+				display: flex;
+				align-items: center;
+
+				.input {
+					width: 60%;
+					margin-right: 20px;
+				}
+
+				.textarea-input {
+					width: 100%;
+					margin-left: 15px;
+
+					textarea {
+						height: 80px;
+					}
+				}
+			}
+
+			.level-3-wrap {
+				display: flex;
+				width: 300px;
+
+				.upload-wrap {
+					position: relative;
+
+					&.disabled::after {
+						content: "";
+						position: absolute;
+						left: 0;
+						right: 0;
+						top: 0;
+						bottom: 0;
+						z-index: 999;
+						background-color: #f5f7fa;
+						opacity: 0.5;
+					}
+
+					.el-upload {
+						border: 1px dashed #d9d9d9;
+					}
+
+					i {}
+
+					img {
+						width: 80px;
+						height: 80px;
+					}
+				}
+			}
+		}
+	}
+
+	.add-btn-wrap {
+		text-align: center;
+	}
+}
+
+.upload-uploader {
+	margin-left: 30px;
+}
+</style>

src/views/platformProduct/platformProductClassify/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="classification-page">
+    <div class="toolbar">
+      <el-button type="success" @click="addBar">添加一级类别</el-button>
+    </div>
+    <el-table
+      :data="tableData" style="width: 100%" border row-key="id"
+      :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" :tree-props="{ children: 'childs' }"
+    >
+      <el-table-column prop="classifyName" label="商品类别" />
+      <el-table-column prop="status" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" @click.native.prevent="checkRow(scope.row)">查看</el-button>
+          <el-button type="text" @click.native.prevent="updateRow(scope.row)">编辑</el-button>
+          <el-button type="text" @click.native.prevent="deleteRow(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="fenye">
+      <el-pagination
+        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <EditDialog
+      ref="edit" :dialog-visible="dialog.isVisible" :type="dialog.type" @close="editClose"
+      @success="getProductCategory"
+    />
+  </div>
+</template>
+
+<script>
+// import {
+//   getAllClass,
+//   udeleteClass
+// } from '@/api/renovation'
+import {
+  getAllClass,
+  deleteClass
+} from '@/api/platformProduct'
+import EditDialog from './Edit'
+export default {
+  components: {
+    EditDialog
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      formParams: {
+        page: 1,
+        pageSize: 10
+      },
+      total: 1,
+      tableData: [],
+      currentPage: 1,
+      dialog: {
+        type: 'add',
+        isVisible: false
+      }
+    }
+  },
+  created() {
+    // this.getProductCategory()
+    this.getAll(this.formParams)
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.formParams.pageSize = val
+      this.getAll(this.formParams)
+    },
+    handleCurrentChange(val) {
+      this.formParams.page = val
+      this.getAll(this.formParams)
+    },
+    fetch(config) {
+      const { limit, page } = config
+      this.formParams.pageIndex = page || 1
+      this.formParams.pageSize = limit || 10
+      this.getProductCategory()
+    },
+    addBar() {
+      this.dialog = {
+        type: 'add',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({ treeData: [] })
+    },
+    editClose() {
+      this.dialog.isVisible = false
+    },
+    // 编辑
+    updateRow(row) {
+      const id = row.classifyId
+      this.dialog = {
+        type: 'edit',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({
+        id
+      })
+    },
+    // 查看
+    checkRow(row) {
+      const id = row.classifyId
+      this.dialog = {
+        type: 'check',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({
+        id
+      })
+    },
+    // 删除
+    async deleteRow(row) {
+      this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          deleteClass({ oneClassifyId: row.classifyId }).then((res) => {
+            if (res.code === '') {
+              this.$message({
+                type: 'success',
+                message: '删除成功!'
+              })
+            }
+            this.getAll(this.formParams)
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+
+    async getProductCategory() {
+      this.getAll(this.formParams)
+    },
+    async getAll(formParams) {
+      const res = await getAllClass(formParams)
+      this.tableData = res.data.list
+      this.total = res.data.total
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../../../styles/elDialog.scss");
+
+.classification-page {
+	padding: 15px 20px;
+
+	.toolbar {
+		margin-bottom: 15px;
+		text-align: right;
+	}
+}
+</style>

vue.config.js

@@ -41,8 +41,8 @@ module.exports = {
     // before: require('./mock/mock-server.js'),
     proxy: {
       '/api': {
-        target: 'https://nsadminapi.tuanfengkeji.cn', // 测试
-        // target: 'http://192.168.0.91:9103', // 平台端
+        // target: 'https://nsadminapi.tuanfengkeji.cn', // 测试
+        target: 'http://192.168.0.91:9103', // 平台端
         // target: 'http://192.168.0.91:9003', // 商家端
         changeOrigin: true,
         pathRewrite: {