界面命名规范：/src/pages/user/index.vue
样式文件: /src/static/system_01/style/user.scss
1、主页框架左侧导航
在主框架左侧导航中新增一个主菜单--用户管理，主菜单下新增一个子菜单-- 角色信息。点击用户管理主菜单时，右边内容页直接加载用户列表。
点击左侧导航时，主页框架顶部的新增一个可关闭的选项卡
新增的导航数据如下：
{
"l_id": "8",
"l_name": "用户管理",
"l_url": "/user/index",
"l_haveson": 1,
"l_icon": "fa-cogs",
"sonlist": [{
"l_id": "9",
"l_name": "角色管理",
"l_url": "/user/rolelist",
"l_haveson": "0"
}]
}
2、界面功能描述
2.1 公司组织结构的界面用下图展示
红色标注的是需要的功能。
a、树形菜单顶部新增组织结构的功能
b、树形节点右边的操作菜单有 编辑、删除的功能。
c、树形节点可以拖拽调整顺序
树形菜单的数据格式为：
{
"data": [{
"id": 1,
"groupname": "北京总部",
"isshop": false,
"p_id": 0
},
{
"id": 2,
"groupname": "广州总店",
"isshop": true,
"p_id": 0
},
{
"id": 3,
"groupname": "广州天河店",
"isshop": true,
"p_id": 2
}
]
}
2.2 搜索栏界面
2.3 用户列表
2.3.1 新列表组件
列表在原组件基础上再封装成组件，表头数据，表体数据动态传入，根据表头的列类型 type 对应不同的显示方式。
监听列表滚动条滚动事件，当滚动到底部时，可触发配置的外部方法。
type---列类型,默认为text。text--直接显示数据内容,checkbox--复选框, switch --开关，template--自定义内容，一般用于操作列 。
field--数据字段
title--表头名称
sort--列是否可排序，默认不排序
列表的表头也是动态生成的，结构为:
{
"columns": [{
"type": "checkbox"
},
{
"field": "u_account",
"title": "用户账号",
"type": "text"
},
{
"field": "u_name",
"title": "姓名",
"type": "text"
},
{
"field": "u_phone",
"title": "手机号",
"type": "text"
},
{
"field": "isadmin",
"title": "是否管理员",
"type": "switch"
},
{
"field": "u_createtime",
"title": "注册时间",
"type": "text",
"sort":true
},
{
"title": "操作",
"type":"template",
"template":""
}
]
}
用户列表表体数据结构:
u_account --用户账号
u_name --姓名
u_phone--手机号
u_createtime --注册时间
isadmin--是否为管理员
{
"userlist": [{
"u_account": "user01",
"u_phone": "15622363008",
"u_name": "用户01",
"u_createtime": "2020-06-01 12:01",
"isadmin": true
},
{
"u_account": "user02",
"u_phone": "",
"u_name": "用户02",
"u_createtime": "2020-06-0512:01",
"isadmin": false
}
],
"count":2,
"pagecount":1
}