feat[litemall-admin]: 行政区域页面数据表采用树形结构显示

2019-04-10 20:47:44 +08:00
parent e10bf6b92b
commit 364b35fa5a
5 changed files with 107 additions and 59 deletions
--- a/litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/vo/RegionVO.java
+++ b/litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/vo/RegionVO.java
@@ -0,0 +1,52 @@
+package org.linlinjava.litemall.admin.vo;
+
+import java.util.List;
+
+public class RegionVO {
+    private Integer id;
+    private String name;
+    private Byte type;
+    private Integer code;
+
+    private List<RegionVO> children;
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public List<RegionVO> getChildren() {
+        return children;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public Byte getType() {
+        return type;
+    }
+
+    public void setType(Byte type) {
+        this.type = type;
+    }
+
+    public Integer getCode() {
+        return code;
+    }
+
+    public void setCode(Integer code) {
+        this.code = code;
+    }
+
+    public void setChildren(List<RegionVO> children) {
+        this.children = children;
+    }
+}
--- a/litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/web/AdminRegionController.java
+++ b/litemall-admin-api/src/main/java/org/linlinjava/litemall/admin/web/AdminRegionController.java
@@ -3,6 +3,7 @@ package org.linlinjava.litemall.admin.web;
 import com.github.pagehelper.PageInfo;
 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
+import org.linlinjava.litemall.admin.vo.RegionVO;
 import org.linlinjava.litemall.core.util.ResponseUtil;
 import org.linlinjava.litemall.core.validator.Order;
 import org.linlinjava.litemall.core.validator.Sort;
@@ -16,6 +17,7 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;

 import javax.validation.constraints.NotNull;
+import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
@@ -36,17 +38,44 @@ public class AdminRegionController {
    }

    @GetMapping("/list")
-    public Object list(String name, Integer code,
-                       @RequestParam(defaultValue = "1") Integer page,
-                       @RequestParam(defaultValue = "10") Integer limit,
-                       @Sort(accepts = {"id"}) @RequestParam(defaultValue = "id") String sort,
-                       @Order @RequestParam(defaultValue = "desc") String order) {
-        List<LitemallRegion> regionList = regionService.querySelective(name, code, page, limit, sort, order);
-        long total = PageInfo.of(regionList).getTotal();
-        Map<String, Object> data = new HashMap<>();
-        data.put("total", total);
-        data.put("items", regionList);
+    public Object list() {
+        List<RegionVO> regionVOList = new ArrayList<>();

-        return ResponseUtil.ok(data);
+        List<LitemallRegion> provinceList = regionService.queryByPid(0);
+        for(LitemallRegion province : provinceList){
+            RegionVO provinceVO = new RegionVO();
+            provinceVO.setId(province.getId());
+            provinceVO.setName(province.getName());
+            provinceVO.setCode(province.getCode());
+            provinceVO.setType(province.getType());
+
+            List<LitemallRegion> cityList = regionService.queryByPid(province.getId());
+            List<RegionVO> cityVOList = new ArrayList<>();
+            for(LitemallRegion city : cityList){
+                RegionVO cityVO = new RegionVO();
+                cityVO.setId(city.getId());
+                cityVO.setName(city.getName());
+                cityVO.setCode(city.getCode());
+                cityVO.setType(city.getType());
+
+                List<LitemallRegion> areaList = regionService.queryByPid(city.getId());
+                List<RegionVO> areaVOList = new ArrayList<>();
+                for(LitemallRegion area : areaList){
+                    RegionVO areaVO = new RegionVO();
+                    areaVO.setId(area.getId());
+                    areaVO.setName(area.getName());
+                    areaVO.setCode(area.getCode());
+                    areaVO.setType(area.getType());
+                    areaVOList.add(areaVO);
+                }
+
+                cityVO.setChildren(areaVOList);
+                cityVOList.add(cityVO);
+            }
+            provinceVO.setChildren(cityVOList);
+            regionVOList.add(provinceVO);
+        }
+
+        return ResponseUtil.ok(regionVOList);
    }
 }
--- a/litemall-admin/src/api/region.js
+++ b/litemall-admin/src/api/region.js
@@ -1,10 +1,9 @@
 import request from '@/utils/request'

-export function listRegion(query) {
+export function listRegion() {
  return request({
    url: '/region/list',
-    method: 'get',
-    params: query
+    method: 'get'
  })
 }

--- a/litemall-admin/src/views/mall/region.vue
+++ b/litemall-admin/src/views/mall/region.vue
@@ -1,45 +1,28 @@
 <template>
  <div class="app-container">

-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入行政区域名称"/>
-      <el-input v-model="listQuery.code" clearable class="filter-item" style="width: 200px;" placeholder="请输入行政区域编码"/>
-      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</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" element-loading-text="正在查询中。。。" row-key="id" style="width: 100%;margin-bottom: 20px;" border="">

-    <!-- 查询结果 -->
-    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+      <el-table-column label="区域名称" prop="name"/>

-      <el-table-column align="center" width="100px" label="区域ID" prop="id" sortable/>
-
-      <el-table-column align="center" min-width="100px" label="区域父ID" prop="pid"/>
-
-      <el-table-column align="center" min-width="200px" label="区域名称" prop="name"/>
-
-      <el-table-column align="center" min-width="100px" label="区域类型" prop="type">
+      <el-table-column label="区域类型" prop="type">
        <template slot-scope="scope">
          {{ scope.row.type | typeFilter }}
        </template>
      </el-table-column>

-      <el-table-column align="center" min-width="100px" label="区域编码" prop="code"/>
+      <el-table-column label="区域编码" prop="code"/>

    </el-table>

-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-
  </div>
 </template>

 <script>
 import { listRegion } from '@/api/region'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

 export default {
  name: 'Region',
-  components: { Pagination },
  filters: {
    typeFilter(status) {
      const typeMap = {
@@ -53,14 +36,7 @@ export default {
  data() {
    return {
      list: undefined,
-      total: 0,
      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-        name: undefined,
-        code: undefined
-      },
      downloadLoading: false
    }
  },
@@ -70,28 +46,13 @@ export default {
  methods: {
    getList() {
      this.listLoading = true
-      listRegion(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
+      listRegion().then(response => {
+        this.list = response.data.data
        this.listLoading = false
      }).catch(() => {
        this.list = []
-        this.total = 0
        this.listLoading = false
      })
-    },
-    handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['区域ID', '区域父ID', '区域名称', '区域类型', '区域编码']
-        const filterVal = ['id', 'pid', 'name', 'type', 'code']
-        excel.export_json_to_excel2(tHeader, this.list, filterVal, '行政区域信息')
-        this.downloadLoading = false
-      })
    }
  }
 }
--- a/litemall-db/src/main/java/org/linlinjava/litemall/db/service/LitemallRegionService.java
+++ b/litemall-db/src/main/java/org/linlinjava/litemall/db/service/LitemallRegionService.java
@@ -51,4 +51,11 @@ public class LitemallRegionService {
        PageHelper.startPage(page, size);
        return regionMapper.selectByExample(example);
    }
+
+
+    public List<LitemallRegion> queryChildren(Integer id) {
+        LitemallRegionExample example = new LitemallRegionExample();
+        example.or().andPidEqualTo(id);
+        return regionMapper.selectByExample(example);
+    }
 }