feat[litemall-admin]: 商品类目页面数据表采用树形结构显示

litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/vo/CategoryVO.java

@@ -0,0 +1,78 @@
+package org.linlinjava.litemall.admin.vo;
+
+import java.util.List;
+
+public class CategoryVO {
+    private Integer id;
+    private String name;
+    private String keywords;
+    private String desc;
+    private String iconUrl;
+    private String picUrl;
+    private String level;
+    private List<CategoryVO> children;
+
+    public List<CategoryVO> getChildren() {
+        return children;
+    }
+
+    public void setChildren(List<CategoryVO> children) {
+        this.children = children;
+    }
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getKeywords() {
+        return keywords;
+    }
+
+    public void setKeywords(String keywords) {
+        this.keywords = keywords;
+    }
+
+    public String getDesc() {
+        return desc;
+    }
+
+    public void setDesc(String desc) {
+        this.desc = desc;
+    }
+
+    public String getIconUrl() {
+        return iconUrl;
+    }
+
+    public void setIconUrl(String iconUrl) {
+        this.iconUrl = iconUrl;
+    }
+
+    public String getPicUrl() {
+        return picUrl;
+    }
+
+    public void setPicUrl(String picUrl) {
+        this.picUrl = picUrl;
+    }
+
+    public String getLevel() {
+        return level;
+    }
+
+    public void setLevel(String level) {
+        this.level = level;
+    }
+}

litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/web/AdminCategoryController.java

@@ -5,6 +5,7 @@ import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.linlinjava.litemall.admin.annotation.RequiresPermissionsDesc;
+import org.linlinjava.litemall.admin.vo.CategoryVO;
 import org.linlinjava.litemall.core.util.ResponseUtil;
 import org.linlinjava.litemall.core.validator.Order;
 import org.linlinjava.litemall.core.validator.Sort;
@@ -33,18 +34,40 @@ public class AdminCategoryController {
     @RequiresPermissions("admin:category:list")
     @RequiresPermissionsDesc(menu={"商场管理" , "类目管理"}, button="查询")
     @GetMapping("/list")
-    public Object list(String id, String name,
-                       @RequestParam(defaultValue = "1") Integer page,
-                       @RequestParam(defaultValue = "10") Integer limit,
-                       @Sort @RequestParam(defaultValue = "add_time") String sort,
-                       @Order @RequestParam(defaultValue = "desc") String order) {
-        List<LitemallCategory> collectList = categoryService.querySelective(id, name, page, limit, sort, order);
-        long total = PageInfo.of(collectList).getTotal();
-        Map<String, Object> data = new HashMap<>();
-        data.put("total", total);
-        data.put("items", collectList);
+    public Object list() {
+        List<CategoryVO> categoryVOList = new ArrayList<>();
+
+        List<LitemallCategory> categoryList = categoryService.queryByPid(0);
+        for(LitemallCategory category : categoryList){
+            CategoryVO categoryVO = new CategoryVO();
+            categoryVO.setId(category.getId());
+            categoryVO.setDesc(category.getDesc());
+            categoryVO.setIconUrl(category.getIconUrl());
+            categoryVO.setPicUrl(category.getPicUrl());
+            categoryVO.setKeywords(category.getKeywords());
+            categoryVO.setName(category.getName());
+            categoryVO.setLevel(category.getLevel());
+
+            List<CategoryVO> children = new ArrayList<>();
+            List<LitemallCategory> subCategoryList = categoryService.queryByPid(category.getId());
+            for(LitemallCategory subCategory : subCategoryList){
+                CategoryVO subCategoryVO = new CategoryVO();
+                subCategoryVO.setId(subCategory.getId());
+                subCategoryVO.setDesc(subCategory.getDesc());
+                subCategoryVO.setIconUrl(subCategory.getIconUrl());
+                subCategoryVO.setPicUrl(subCategory.getPicUrl());
+                subCategoryVO.setKeywords(subCategory.getKeywords());
+                subCategoryVO.setName(subCategory.getName());
+                subCategoryVO.setLevel(subCategory.getLevel());
+
+                children.add(subCategoryVO);
+            }
+
+            categoryVO.setChildren(children);
+            categoryVOList.add(categoryVO);
+        }
 
-        return ResponseUtil.ok(data);
+        return ResponseUtil.ok(categoryVOList);
     }
 
     private Object validate(LitemallCategory category) {

litemall-admin/src/views/mall/category.vue

@@ -3,15 +3,11 @@
 
     <!-- 查询和其他操作 -->
     <div class="filter-container">
-      <el-input v-model="listQuery.id" clearable class="filter-item" style="width: 200px;" placeholder="请输入类目ID"/>
-      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入类目名称"/>
-      <el-button v-permission="['GET /admin/category/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
       <el-button v-permission="['POST /admin/category/create']" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
-      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
     </div>
 
     <!-- 查询结果 -->
-    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row row-key="id">
 
       <el-table-column align="center" label="类目ID" prop="id"/>
 
@@ -39,8 +35,6 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="父类目ID" prop="pid"/>
-
       <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button v-permission="['POST /admin/category/update']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
@@ -49,8 +43,6 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-
     <!-- 添加或修改对话框 -->
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
       <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
@@ -110,6 +102,9 @@
 </template>
 
 <style>
+.filter-item{
+  margin-left: 100px;
+}
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
@@ -139,35 +134,24 @@
 import { listCategory, listCatL1, createCategory, updateCategory, deleteCategory } from '@/api/category'
 import { uploadPath } from '@/api/storage'
 import { getToken } from '@/utils/auth'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
   name: 'Category',
-  components: { Pagination },
   data() {
     return {
       uploadPath,
-      list: undefined,
-      total: 0,
+      list: [],
       listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-        id: undefined,
-        name: undefined,
-        sort: 'add_time',
-        order: 'desc'
-      },
       catL1: {},
       dataForm: {
         id: undefined,
         name: '',
         keywords: '',
         level: 'L2',
-        pid: undefined,
+        pid: 0,
         desc: '',
-        iconUrl: undefined,
-        picUrl: undefined
+        iconUrl: '',
+        picUrl: ''
       },
       dialogFormVisible: false,
       dialogStatus: '',
@@ -177,8 +161,7 @@ export default {
       },
       rules: {
         name: [{ required: true, message: '类目名不能为空', trigger: 'blur' }]
-      },
-      downloadLoading: false
+      }
     }
   },
   computed: {
@@ -195,15 +178,13 @@ export default {
   methods: {
     getList() {
       this.listLoading = true
-      listCategory(this.listQuery)
+      listCategory()
         .then(response => {
-          this.list = response.data.data.items
-          this.total = response.data.data.total
+          this.list = response.data.data
           this.listLoading = false
         })
         .catch(() => {
           this.list = []
-          this.total = 0
           this.listLoading = false
         })
     },
@@ -212,25 +193,21 @@ export default {
         this.catL1 = response.data.data
       })
     },
-    handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
-    },
     resetForm() {
       this.dataForm = {
         id: undefined,
         name: '',
         keywords: '',
         level: 'L2',
-        pid: undefined,
+        pid: 0,
         desc: '',
-        iconUrl: undefined,
-        picUrl: undefined
+        iconUrl: '',
+        picUrl: ''
       }
     },
     onLevelChange: function(value) {
       if (value === 'L1') {
-        this.pid = undefined
+        this.dataForm.pid = 0
       }
     },
     handleCreate() {
@@ -252,7 +229,7 @@ export default {
         if (valid) {
           createCategory(this.dataForm)
             .then(response => {
-              this.list.unshift(response.data.data)
+              this.getList()
               // 更新L1目录
               this.getCatL1()
               this.dialogFormVisible = false
@@ -283,13 +260,7 @@ export default {
         if (valid) {
           updateCategory(this.dataForm)
             .then(() => {
-              for (const v of this.list) {
-                if (v.id === this.dataForm.id) {
-                  const index = this.list.indexOf(v)
-                  this.list.splice(index, 1, this.dataForm)
-                  break
-                }
-              }
+              this.getList()
               // 更新L1目录
               this.getCatL1()
               this.dialogFormVisible = false
@@ -310,14 +281,13 @@ export default {
     handleDelete(row) {
       deleteCategory(row)
         .then(response => {
+          this.getList()
           // 更新L1目录
           this.getCatL1()
           this.$notify.success({
             title: '成功',
             message: '删除成功'
           })
-          const index = this.list.indexOf(row)
-          this.list.splice(index, 1)
         })
         .catch(response => {
           this.$notify.error({
@@ -325,38 +295,6 @@ export default {
             message: response.data.errmsg
           })
         })
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = [
-          '类目ID',
-          '名称',
-          '关键字',
-          '级别',
-          '父类目ID',
-          '类目图标',
-          '类目图片',
-          '简介'
-        ]
-        const filterVal = [
-          'id',
-          'name',
-          'keywords',
-          'level',
-          'pid',
-          'iconUrl',
-          'picUrl',
-          'desc'
-        ]
-        excel.export_json_to_excel2(
-          tHeader,
-          this.list,
-          filterVal,
-          '商品类目信息'
-        )
-        this.downloadLoading = false
-      })
     }
   }
 }