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

2019-04-10 21:32:35 +08:00
parent 364b35fa5a
commit 7b3e23c50c
3 changed files with 130 additions and 91 deletions
--- a/litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/vo/CategoryVO.java
+++ b/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;
+    }
+}
--- a/litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/web/AdminCategoryController.java
+++ b/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<>();

-        return ResponseUtil.ok(data);
+        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(categoryVOList);
    }

    private Object validate(LitemallCategory category) {
--- a/litemall-admin/src/views/mall/category.vue
+++ b/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
-      })
    }
  }
 }