分类删除 ; spu添加页 sku组删除按钮及功能

src/components/SelectionPath.vue

@@ -73,9 +73,14 @@ export default {
   },
   watch: {
     categoryList (val) {
-      if (this.defaultPath !== '') {
+      if (this.defaultPath !== '') { // 首先 默认不是所有分类 先归为未分类
-        this.form.path = this.defaultPath
+        this.form.path = 'none'
       }
+      val.forEach(element => { // 再遍历对比 所有分类 看默认分类是否存在 存在则改成对应分类
+        if (element.path === this.defaultPath) {
+          this.form.path = this.defaultPath
+        }
+      })
       this.updatePath()
     },
     shop_id () { // 商铺selection改变时 分类selection如果不是"全部分类" 则改成"未分类"
@@ -91,9 +96,14 @@ export default {
   },
   created () {
     if (this.categoryList.length > 0) {
-      if (this.defaultPath !== '') {
+      if (this.defaultPath !== '') { // 首先 默认不是所有分类 先归为未分类
-        this.form.path = this.defaultPath
+        this.form.path = 'none'
       }
+      this.categoryList.forEach(element => { // 再遍历对比 所有分类 看默认分类是否存在 存在则改成对应分类
+        if (element.path === this.defaultPath) {
+          this.form.path = this.defaultPath
+        }
+      })
       this.updatePath()
     }
   },

src/components/skuTransfer.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-transfer class="m-t-20" :titles="['SKU列表', tit]" :filter-method="filterMethod" filterable
+  <el-transfer :titles="['SKU列表', tit]" :filter-method="filterMethod" filterable filter-placeholder="输入编号或名称搜索"
-    filter-placeholder="输入编号或名称搜索" v-model="value" :data="skuListArr">
+    v-model="value" :data="skuListArr">
   </el-transfer>
 </template>
 <script>

src/store/index.js

@@ -602,6 +602,24 @@ const store = new Vuex.Store({
       }
       return res
     },
+    /**
+     * @description: 删除账号
+     * @param {*} 多选id组
+     */
+    // eslint-disable-next-line camelcase
+    async fetchDelCategory ({ dispatch }, form) {
+      const params = new URLSearchParams()
+      params.append('delIdArr', form.delIdArr)
+      params.append('shop_id', form.shop_id)
+      api.post('delCategory', params, 'Admin').then(res => {
+        if (res.data.status === 1) {
+          Message.success(res.data.msg)
+          dispatch('fetchCategoryList')// 刷新分类列表
+        } else {
+          Message.error(res.data.msg)
+        }
+      })
+    },
     /**
      * @description: 获取商品spu列表
      * @return {*} 列表
@@ -680,8 +698,8 @@ const store = new Vuex.Store({
       params.append('spu_number', form.spu_number)
       params.append('sort', form.sort)
       params.append('hot', form.hot)
-      params.append('pro_tag', form.pro_tag)
+      params.append('pro_tag', JSON.stringify(form.pro_tag))
-      params.append('bind_sku', form.bind_sku)
+      params.append('bind_sku', JSON.stringify(form.bind_sku))
       params.append('upFile', form.upFile)
       if (form.recommend) {
         params.append('recommend', '1')
@@ -716,8 +734,8 @@ const store = new Vuex.Store({
       params.append('spu_number', form.spu_number)
       params.append('sort', form.sort)
       params.append('hot', form.hot)
-      params.append('pro_tag', form.pro_tag)
+      params.append('pro_tag', JSON.stringify(form.pro_tag))
-      params.append('bind_sku', form.bind_sku)
+      params.append('bind_sku', JSON.stringify(form.bind_sku))
       params.append('oldFile', form.oldFile)
       params.append('upFile', form.upFile)
       if (form.recommend) {

src/views/layout/components/main/category/index.vue

@@ -32,7 +32,7 @@
                   <el-button type="text" @click.stop="" @click="openWin(`${data.name} : 编辑`, data)">
                     编辑
                   </el-button>
-                  <el-button type="text" @click.stop="">
+                  <el-button type="text" @click.stop="" @click="delCategory(data.id)">
                     删除
                   </el-button>
                 </span>
@@ -122,6 +122,8 @@ export default {
         oldFile: '',
         desc: ''
       },
+      isStartDel: false,
+      delIdArr: [],
       categoryListData: [], // 分类树结构 数据
       winIsShow: false, // 操做窗口 显隐
       winTitle: ''// 操做窗口 标题
@@ -229,6 +231,40 @@ export default {
       if (res.data.status === 1) {
         this.winIsShow = false
       }
+    },
+    /**
+     * @description: 删除分类 及其 子分类
+     */
+    delCategory (id) {
+      this.$confirm('删除分类及其子分类, 并且旗下的所有商品会被归为"未分类", 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.delIdArr = []// 用于存储删除的ID的数组
+        this.findCategoryChildren(this.categoryListData, id)// 调用递归函数，查找指定ID及其子元素的ID，并将它们存储到delIdArr数组中
+        const data = { delIdArr: this.delIdArr, shop_id: this.form.shop_id }
+        this.$store.dispatch('fetchDelCategory', data)// 删除指定分类和旗下所有子分类
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 递归遍历 所有分类和子分类  找到指定分类id 和 指定id下所有子分类的id 并push到this.delIdArr里面
+    findCategoryChildren (data, id) {
+      // 遍历数据数组中的每个元素
+      data.forEach(item => {
+        // 如果当前元素的ID与指定ID相等
+        if (item.id === id) {
+          this.isStartDel = true
+        }
+        if (this.isStartDel) {
+          this.delIdArr.push(item.id)
+        }
+        this.findCategoryChildren(item.children, id)
+        if (item.id === id) {
+          this.isStartDel = false
+        }
+      })
     }
   },
   watch: {
@@ -240,6 +276,7 @@ export default {
     },
     categoryList () {
       this.categoryListData = this.buildTree(this.categoryList)
+      console.log(this.categoryListData)
     }
   },
   created () {

src/views/layout/components/main/product/spu/add.vue

@@ -42,9 +42,11 @@
                   @close="handleCloseTag(tag)">
                   {{ tag }}
                 </el-tag>
-                <el-input class="input-new-tag" v-if="inputTagVisible" v-model="inputTagValue" ref="saveTagInput"
+                <span class="" v-if="inputTagVisible">
-                  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
+                  <el-input class="input-new-tag" v-model="inputTagValue" ref="saveTagInput">
-                </el-input>
+                  </el-input>
+                  <el-button type="primary" @click="handleInputConfirm" icon="el-icon-plus">添加</el-button>
+                </span>
                 <el-button v-else @click="showTagInput" icon="el-icon-plus">点击添加</el-button>
               </el-form-item>
               <!-- 商品图片 -->
@@ -64,12 +66,16 @@
               </el-form-item>
               <!-- sku组 穿梭框 -->
               <el-form-item label="SKU组">
-                <el-input class="input-new-tag" v-if="inputSkuVisible" v-model="inputSkuValue" ref="saveSkuInput"
+                <span class="" v-if="inputSkuVisible">
-                  @keyup.enter.native="addSkuTransfer" @blur="addSkuTransfer">
+                  <el-input class="input-new-tag" v-model="inputSkuValue" ref="saveSkuInput">
-                </el-input>
+                  </el-input>
+                  <el-button type="primary" @click="addSkuTransfer" icon="el-icon-plus">添加</el-button>
+                </span>
                 <el-button v-else @click="showSkuInput" icon="el-icon-plus">添加规格</el-button>
-                <SkuTransfer v-for="(t, index) in form.bind_sku" :key="index" :tit="t.tit" :val="t.value"
+                <div class="m-t-10 relative-container" v-for="(t, index) in form.bind_sku" :key="index">
-                  @input="handleTransferInput(index, $event)" />
+                  <SkuTransfer :tit="t.tit" :val="t.value" @input="handleTransferInput(index, $event)" />
+                  <el-button type="danger" icon="el-icon-delete" class="absolute-center-button" @click="delBind_skuArr" />
+                </div>
               </el-form-item>
               <!-- 表单提交 -->
               <el-form-item v-if="pageState == 'add' ? true : false">
@@ -158,6 +164,9 @@ export default {
     handleTransferInput (index, val) { // input事件接收 组件变化的value值
       this.form.bind_sku[index].value = val
     },
+    delBind_skuArr (index) {
+      this.form.bind_sku.splice(index, 1)
+    },
     // 搜索标签相关函数
     handleCloseTag (tag) { // 删除标签
       this.form.pro_tag.splice(this.form.pro_tag.indexOf(tag), 1)
@@ -242,8 +251,6 @@ export default {
      * @description: 创建新商品spu
      */
     async addSpu () {
-      this.form.pro_tag = JSON.stringify(this.form.pro_tag)
-      this.form.bind_sku = JSON.stringify(this.form.bind_sku)
       const res = await this.$store.dispatch('fetchAddSpu', this.form)
       if (res.data.status === 1) {
         this.$router.push('/spu/index')
@@ -254,8 +261,6 @@ export default {
      */
     async saveSpu () {
       this.form.id = this.spuId
-      this.form.pro_tag = JSON.stringify(this.form.pro_tag)
-      this.form.bind_sku = JSON.stringify(this.form.bind_sku)
       const res = await this.$store.dispatch('fetchSaveSpu', this.form)
       if (res.data.status === 1) {
         this.$router.push('/spu/index')
@@ -292,11 +297,24 @@ export default {
 }
 
 .input-new-tag {
+  margin-right: 10px;
   width: 20%;
-  margin-left: 10px;
   vertical-align: bottom;
 }
 
+.relative-container {
+  position: relative;
+  width: 585px;
+}
+
+.absolute-center-button {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: -130px;
+  /* 根据按钮高度调整上边距，使按钮垂直居中 */
+}
+
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;