平台端管理商品添加平台分类设置功能

src/api/commodity.js

@@ -221,3 +221,12 @@ export function productExport(data) {
     responseType: 'blob'
   })
 }
+
+// 设置商品平台分类
+export function setProdClass(data) {
+  return request({
+    url: '/canvas/setProdClass',
+    method: 'post',
+    data
+  })
+}

src/views/renovation/commoditySystem/index.vue

@@ -104,6 +104,16 @@
             label="虚拟销售"
             show-overflow-tooltip
           />
+          <el-table-column
+            prop="classifyName"
+            label="平台分类"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.classifyName" style="color: #2e60f8;cursor: pointer" @click="showClassSet(scope.row)">{{scope.row.classifyName}}</span>
+              <span v-else style="color: red;cursor: pointer" @click="showClassSet(scope.row)">未分类</span>
+            </template>
+          </el-table-column>
           <el-table-column prop="createTime" label="创建时间" width="180" />
           <el-table-column
             prop="shelveState"
@@ -212,8 +222,35 @@
       </span>
     </el-dialog>
     <add-commodity ref="addCommodity" :examine-show="examineShow" @reset="reset" />
-    <SharesettingDialog 
+    <SharesettingDialog
       ref="shareSettingDialog"/>
+
+    <!-- 设置虚拟销量 -->
+    <el-dialog
+      title="商品设置平台分类"
+      :visible.sync="classSetVisible"
+      width="360px"
+    >
+<!--      <el-select v-model="classifyId" placeholder="请选择分类">
+        <el-option
+          v-for="item in classList"
+          :key="item.classifyId"
+          :label="item.classifyName"
+          :value="item.classifyId"
+        />
+      </el-select>-->
+      <span>平台分类：</span>
+      <el-cascader v-model="classifyId" :options="classList" clearable :props="{
+            checkStrictly: false,
+            label: 'classifyName',
+            value: 'classifyId',
+            children: 'childs'
+          }"/>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="classSetVisible = false">取 消</el-button>
+        <el-button type="primary" @click="classSetSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -223,10 +260,11 @@ import {
   Forced,
   setFictitious,
   examine,
-  productExport
+  productExport, setProdClass
 } from '@/api/commodity';
 import AddCommodity from './addCommodity';
 import SharesettingDialog from '../../../components/Sharesetting';
+import {commdityClassGetAll} from "@/api/renovation";
 export default {
   components: { AddCommodity,SharesettingDialog},
   data () {
@@ -256,7 +294,11 @@ export default {
         shelveState: 1,
       },
       examineVisible: false,
-      isDetail: false
+      isDetail: false,
+      currentProdId: undefined,
+      classifyId: undefined,
+      classList: [],
+      classSetVisible: false
     };
   },
   // 监听属性 类似于data概念
@@ -268,6 +310,7 @@ export default {
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
     this.getAll(this.formInline);
+    this.getAllClassify()
   },
   // 方法集合
   methods: {
@@ -408,6 +451,48 @@ export default {
     },
     reset () {
       this.getAll(this.formInline)
+    },
+
+    // 获取平台类别
+    async getAllClassify () {
+      const res = await commdityClassGetAll({
+        page: 1,
+        pageSize: 1000
+      })
+      this.classList = res.data.list
+
+      //处理集合子集空数组为undefined，解决平台分类选择时可选到分类
+      this.classList.forEach(firstClass => {
+        if (firstClass.childs.length === 0) {
+          firstClass.childs = undefined
+        }else {
+          firstClass.childs.forEach(secondClass => {
+            if (secondClass.childs.length === 0){
+              secondClass.childs = undefined
+            }
+          })
+        }
+      })
+    },
+
+    showClassSet(prod) {
+      this.classifyId = prod.classifyId
+      this.currentProdId = prod.productId
+      this.classSetVisible = true
+    },
+
+    async classSetSubmit() {
+      //防出错处理。选到二级分类、三级分类时。classifyId为数组
+      this.classifyId = Array.isArray(this.classifyId) ? this.classifyId[this.classifyId.length - 1] : this.classifyId
+      const res = await setProdClass({
+        productId: this.currentProdId,
+        classId: this.classifyId
+      });
+      if (res.code === '') {
+        this.classSetVisible = false
+        this.$message.success('设置成功');
+        this.search();
+      }
     }
   },
 };