界面命名规范:/src/pages/ordermanage/orderlist.vue
样式文件: /src/static/system_01/style/orderlist.scss
1、主页框架左侧导航
在主框架左侧导航中新增一个主菜单--订单管理, 点击订单管理主菜单时,右边内容页直接加载订单列表。主菜单下新增一个子菜单-- 1、在途订单
点击左侧导航时,主页框架顶部的新增一个可关闭的选项卡
新增的导航数据如下:
{
"l_id": "10",
"l_name": "订单管理",
"l_url": "/ordermanage/orderlist",
"l_haveson": 1,
"l_icon": "",
"sonlist": [{
"l_id": "11",
"l_name": "在途订单",
"l_url": " /ordermanage/intransit",
"l_haveson": "0"
}
]
}

1、选项卡
选项卡的生成是根据权限接口返回的数据生成的,每个人显示的选项卡种类不一样,比如有些用户只能看到未揽收、未审核、未申报,有些用户可以看到全部选项卡。
上图中的操作栏按钮则是根据选项卡对应的功能权限来的
数据格式如下:
{
"tab": [{
"type": "wls",
"name": "未揽收",
"count": 0,
"buttons": [{
"name": "入库",
"click": "instorage",
"color": "#00FF00"
},
{
"name": "删除",
"click": "delorder",
"color": "#00FF00"
}
]
},
{
"type": "wsh",
"name": "未审核",
"count": 0,
"buttons": [{
"name": "审核",
"click": "auditorder",
"color": "#00FF00"
}]
},
{
"type": "sh",
"name": "未申报",
"count": 0,
"buttons": [{
"name": "提交申报",
"click": "submitorder",
"color": "#00FF00"
}]
}, {
"type": "dy",
"name": "已申报",
"count": 0,
"buttons": []
}, {
"type": "fx",
"name": "已放行",
"count": 0,
"buttons": []
}, {
"type": "kg",
"name": "扣关中",
"count": 0,
"buttons": []
}
]
}
2、搜索栏排版

3、列表的表头是根据接口返回的数据动态生成的,每个选项卡对应的表头内容不一样,但是表头格式是固定的。以未审核选项卡为例,格式如下:
json中的字段含义在用户列表功能中已说明。
{
"wshcolumns": [{
"type": "checkbox"
},
{
"field": "p_pkval",
"title": "订单号",
"type": "text"
},
{
"field": "ctname",
"title": "寄件人",
"type": "text"
},
{
"field": "p_mode",
"title": "清关口岸",
"type": "text"
},
{
"field": "u_createtime",
"title": "下单时间",
"type": "text",
"sort":true
},
{
"title": "操作",
"type":"template",
"template":""
}
]
}
4、每个选项卡对应的表体格式不一样,以未审核为例,格式如下:
{
"wshlist": [{
"p_pkval": "sys00001",
"ctname": "张三",
"p_mode": "青岛口岸",
"u_createtime": "2020-06-01 12:01"
},
{
"p_pkval": "sys00002",
"ctname": "李四",
"p_mode": "青岛口岸",
"u_createtime": "2020-06-01 12:01"
}
],
"count":2,
"pagecount":1
}