java實作分類的樹形菜單展示

一、實體類
@Getter
@Setter
public class VueTreeSelectModel {
    private Integer id;
    private String label;
    private List children;

    private void setChildren(List children) {
        if (children.size() == 0) {
            this.children = null;
        } else {
            this.children = children;
        }

    }
}
           

二、mapper
           

<!--================================N級分類（element Cascader）=================================================-->
    <resultMap id="Map_GetListVueCascader" type="org.jeecg.modules.caayouth.admin.model.VueTreeSelectModel">
        <id column="id" property="id"/>
        <collection property="children" ofType="org.jeecg.modules.caayouth.admin.model.VueTreeSelectModel" select="Mapper_GetClassVueCascaderByPid" column="id"/>
    </resultMap>
    <!-- 擷取所有資料 -->
    <select id="Mapper_GetListVueCascader" resultMap="Map_GetListVueCascader">
        SELECT
        <!--select-->
        id,`name` as label
        FROM gm_majortype
        <!--where-->
        where parentId=0 and levels=1
        order by sort asc
    </select>
    <!-- 所有節點資料 -->
    <select id="Mapper_GetClassVueCascaderByPid" resultMap="Map_GetListVueCascader">
        SELECT
        <!--select-->
        id,`name` as label
        FROM gm_majortype
        <!--where-->
        where parentId=#{value}
        order by sort asc
    </select>
           

三、實作方法
List GetAdminTreeSelect();
    @Override
    public Result GetTreeSelect() {
        List vmList = new ArrayList<>();
//        if (type == 0) {
//            VueTreeSelectModel vm0 = new VueTreeSelectModel();
//            vm0.setValue("0");
//            vm0.setLabel("頂級菜單");
//            vmList.add(vm0);
//        }
        List data = baseMapper.Mapper_GetListVueCascader();
        vmList.addAll(data);
        return Result.OK(vmList);
    }
           

四、controller

@AutoLog(value = "專業類别-背景使用")
@ApiOperation(value="專業類别-背景使用", notes="專業類别-背景使用")
@GetMapping(value = "/adminList")
public  List adminList() {
   List list=gmMajortypeService.GetAdminTreeSelect();
   return list;
}
           

五、d2-crud-plus前台顯示

import { request } from '@/api/service'
export const crudOptions = (vm) => {
  return {
   
    options:{
      height: '100%'
    },
    columns: [
      {
       title: '基本辨別',
       key: 'id',
       width: 50,
       sortable: false,
       show:true,
       type: 'int',
       form: {
         disabled: true
       }
     }，
       {
          title: '作品尺寸',
          key: 'sizes',
           width: 100,
          sortable: false,
          type: 'string',
          show:false,
          search: {
            disabled: true
          },
          form: {
            disabled: false
          },
       },
       {
         title: '專業組别',
         width: 150,
         key: 'typeId',
         type: 'tree-selector',
         dict: { url: '/myzl/gmMajortype/adminList', isTree: true, value: 'id', label: 'label' },
         form: {
           component: {
             span: 24,
             props: { multiple: false, clearable: true }
           },
           rules: [{ required: false, message: '請選擇' }],//required: true必填
         }
       },
       {
         title: '詳細組别',
         width: 150,
         key: 'majorId',
         type: 'tree-selector',
         dict: { url: '/myzl/gmMajortype/adminList',isTree: true, value: 'id', label: 'label' },
         form: {
           component: {
             span: 24,
             props: { multiple: false, clearable: true }
           },
           rules: [{ required: false, message: '請選擇' }]
         }
       }，
    ]
  }
}
           

六、最終效果