商品分类管理新增二级分类

src/api/business/category.js

@@ -10,6 +10,17 @@ export function goodsCategoryList(urlParams, data) {
   })
 }
 
+
+// 查询分类列表树状
+export function goodsCategoryListTree(urlParams, data) {
+  return request({
+    url: '/api/v1/mp/admin/goods/category/listTree',
+    method: 'post',
+    data,
+    urlParams
+  })
+}
+
 // 查询分类下拉列表, 不分页
 export function goodsCategoryItems(data) {
   return request({
@@ -53,4 +64,4 @@ export function goodsCategoryRemove(data) {
     method: 'post',
     data
   })
-}
+}

src/views/business/category/components/CategoryCreate.vue

@@ -7,6 +7,16 @@
       :before-close="close"
     >
       <el-form :model="form" ref="form" :rules="rules" label-width="100px">
+        <el-form-item label="上级分类" prop="parentId">
+          <el-select
+            v-model="form.parentId"
+            placeholder="请选择上级分类"
+            filterable
+            clearable
+          >
+            <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in parentList" :key="index" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="分类名称" prop="name">
           <el-input
             v-model="form.name"
@@ -50,7 +60,7 @@
 </template>
 <script>
 import CustomFieldsMixin from "@/mixins/CustomFields";
-import { goodsCategoryCreate, goodsCategoryDetail, goodsCategoryUpdate } from "@/api/business/category";
+import { goodsCategoryCreate, goodsCategoryDetail, goodsCategoryUpdate, goodsCategoryListTree } from "@/api/business/category";
 export default {
   mixins: [CustomFieldsMixin],
   props: {
@@ -63,14 +73,20 @@ export default {
     categoryId: {
       type: [String, Number],
       default: null
-    }
+    },
   },
   data() {
     return {
+      //一级分类列表
+      parentList: [{
+        name:'',
+        categoryId:'',
+      }],
       loading: false,
       form: {
         isShow: 1,
-        sort: 0
+        sort: 0,
+        parentId: '',
       },
       rules: {
         name: [
@@ -97,6 +113,7 @@ export default {
       },
     };
   },
+
   computed: {
     title() {
       return this.categoryId ? '编辑分类' : '添加分类';
@@ -117,14 +134,24 @@ export default {
   created() {
     if(this.categoryId){
       goodsCategoryDetail({ categoryId: this.categoryId }).then(res => {
-        const { name, sort, picUrl, isShow } = res && res.data
+        const { name, sort, picUrl, isShow, parentId } = res && res.data
         this.form = {
-          name, sort, picUrl, isShow
+          name, sort, picUrl, isShow, parentId:parentId == 0?"":parentId
         }
+
       })
     }
+    this.getParentList()
   },
   methods: {
+    //获取一级列表
+    getParentList(){
+      goodsCategoryListTree( "pageNum=1&",{}).then((res) => {
+          if (res.code == 0) {
+            this.parentList = res.rows;
+          }
+        })
+    },
     // 关闭弹框
     close() {
       this.$emit("close");
@@ -174,4 +201,4 @@ export default {
   align-items: center;
   justify-content: space-between;
 }
-</style>
+</style>

src/views/business/category/index.vue

@@ -52,7 +52,7 @@
       ></right-toolbar>
     </el-row>
     <!-- 列表 -->
-    <el-table ref="table" v-loading="loading" :data="list">
+    <el-table ref="table" v-loading="loading" :data="list" row-key="categoryId" :tree-props="{children: 'goodsCategoryList', hasChildren: 'hasChildren'}">
       <el-table-column label="分类名称" prop="name" />
       <el-table-column label="分类图片">
         <div slot-scope="{ row }">
@@ -116,7 +116,7 @@
 <script>
 import { publicFileGetUrl } from "@/api/common";
 import {
-  goodsCategoryList,
+  goodsCategoryListTree,
   goodsCategoryRemove,
 } from "@/api/business/category";
 import CategoryCreate from "./components/CategoryCreate";
@@ -147,7 +147,7 @@ export default {
   methods: {
     getList() {
       this.loading = true;
-      goodsCategoryList(
+      goodsCategoryListTree(
         "pageNum=" +
           this.pageParams.pageNum +
           "&pageSize=" +
@@ -160,7 +160,11 @@ export default {
           if (res.code == 0) {
             res.rows.forEach((item) => {
               item.picUrl = publicFileGetUrl + item.picUrl.split(",")[0];
+              item.goodsCategoryList.forEach(item1 => {
+                item1.picUrl = publicFileGetUrl + item1.picUrl.split(",")[0];
+              })
             });
+
             this.total = res.total;
             this.list = res.rows;
           }
@@ -210,4 +214,4 @@ export default {
 };
 </script>
 <style>
-</style>
+</style>

src/views/business/goods/add.vue

@@ -30,13 +30,9 @@
       <el-row :gutter="40" style="width: 500px">
         <el-col :span="23">
           <el-form-item label="商品分类:" prop="categoryId">
-            <el-select
-              v-model="addData.categoryId"
-              placeholder="请选择商品分类"
-              clearable
-            >
-              <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in goodsCategoryItemsList" :key="index" />
-            </el-select>
+            <el-cascader
+              v-model="addData.categoryId" clearable
+              :options="goodsCategoryItemsList" :props="{ expandTrigger: 'hover', value: 'categoryId',label: 'name', children: 'goodsCategoryList', }"></el-cascader>
           </el-form-item>
         </el-col>
       </el-row>
@@ -183,7 +179,7 @@ import WangEditor from '@/components/WangEditor'
 import Spec from './components/spec'
 import TinyEditor from '@/components/TinyEditor'
 import { getGoodsDetail, addGoods } from '@/api/business/goods'
-import { goodsCategoryItems } from '@/api/business/category'
+import { goodsCategoryListTree } from '@/api/business/category'
 import { getSupplierList } from '@/api/business/supplier'
 import { goodsTagItems } from '@/api/business/tag'
 import { publicFileGetUrl } from "@/api/common"
@@ -297,8 +293,8 @@ export default {
   },
   methods: {
     getGoodsCategoryItems(){
-      goodsCategoryItems({}).then(res => {
-        this.goodsCategoryItemsList = res && res.data
+      goodsCategoryListTree("",{}).then(res => {
+        this.goodsCategoryItemsList = res && res.rows
       })
     },
     //获取供应商
@@ -330,12 +326,13 @@ export default {
       this.$refs.addItem.validate((valid, items) => {
         if (valid) {
           this.addData.skuList = skuList
-          const { value, cost,exchangePrice, description, ...rest } = this.addData
+          const { value, categoryId, cost,exchangePrice, description, ...rest } = this.addData
           addGoods({...rest, ...{
             value: accMul(value, 100),
             cost: cost == '' || cost == null ? '' : accMul(cost, 100),
             exchangePrice: accMul(exchangePrice, 1),
-            description: encodeURI(description)
+            description: encodeURI(description),
+            categoryId:categoryId[1],
           }}).then(res => {
             if (res.code === 0) {
               this.$message({