2025-08-07 15:33:34 +08:00
|
|
|
|
## 项目说明
|
|
|
|
|
|
|
|
|
|
|
|
* 本项目为天津VMI库使用的手持程序包
|
|
|
|
|
|
|
|
|
|
|
|
## 平台简介
|
|
|
|
|
|
|
|
|
|
|
|
* 应用框架基于[uniapp](https://uniapp.dcloud.net.cn/)，支持小程序、H5、Android和IOS。
|
|
|
|
|
|
* 前端组件采用[uni-ui](https://github.com/dcloudio/uni-ui)，全端兼容的高性能UI框架。
|
|
|
|
|
|
* 与 WMS后端完成完成权限管理会框架的整合,前端代码与WMS前端代码基本保持一致。
|
|
|
|
|
|
|
|
|
|
|
|
## 主要代码简介
|
|
|
|
|
|
# 系统配置
|
|
|
|
|
|
* 基础登录链接信息配置（访问后端的IP信息），位于根目录下的 config.js 文件中的 baseUrl；
|
|
|
|
|
|
* logo 替换 位于根目录下的 config.js 文件中的 appInfo.logo；
|
|
|
|
|
|
* 实际项目启动时现场IP设置，查看登录页面下小字 "IP端口设置"；
|
|
|
|
|
|
* 程序运行时启动的端口设置 manifest.json中
|
|
|
|
|
|
|
|
|
|
|
|
# 页面功能的开发
|
|
|
|
|
|
* 1.组件的使用，可参考文档 [ColorUI 使用文档](https://miren123.gitee.io/colorui-document/pages/base/)；
|
|
|
|
|
|
* 2.调用后端方法 ，参见 api/wms/login.js 使用、配置方式与WMS主服务的前端框架保持一致；
|
|
|
|
|
|
* 3.简便弹窗的使用：参见util/common.js 中 showConfirm方法；
|
|
|
|
|
|
|
|
|
|
|
|
# 实践：完成以下三个步骤，可完成页面添加和展示
|
|
|
|
|
|
* 1.新增界面 归类到 page/work/wms 文件夹中；
|
|
|
|
|
|
* 2.新增页面配置路由：添加到根目录下 page.json文件中；
|
|
|
|
|
|
* 3.功能也功能菜单加载：版本1.在 static/json/dynamicRouter.json 文件中添加能够访问的路由信息；（在后续版本中会修改为系统根据所分配的权限去后端获取权限菜单）
|
|
|
|
|
|
|
|
|
|
|
|
# 界面菜单的权限管理
|
|
|
|
|
|
# # 基本原理
|
|
|
|
|
|
* 基本原理与WMS的PC端主界面相同，在登录成功后，
|
|
|
|
|
|
* 1.在utils/request.js文件中添加自定义heander信息，标明访问终端类型；
|
|
|
|
|
|
* 2.加载routes(当前登录用户权限下可访问的所有页面路由定向)，在“pages/work/index”界面中渲染界面路由；
|
|
|
|
|
|
* 3.加载powers(当前用户权限下所有页面允许访问的按钮标识)，在打开具体界面时，会在缓存中判断是否存在该code对应的信息，界面渲染时时决定是否展示对应按钮；
|
|
|
|
|
|
* 注意：目前只有pages/work/index 界面中的进行权限相关内容控制，其余未添加；
|
|
|
|
|
|
* 当前版本中，因为只针对与主页做菜单，所以并未支持
|
|
|
|
|
|
```js
|
|
|
|
|
|
config.header['platform'] = 'APP'
|
|
|
|
|
|
```
|
|
|
|
|
|
* 按钮的权限控制：components 添加了 has-authority组件，用于按钮的权限校验；
|
|
|
|
|
|
* 使用是参照 页面pages/work/wms/palletInfoQuery.vue
|
|
|
|
|
|
```vue
|
|
|
|
|
|
<uni-td>
|
|
|
|
|
|
<view class="grid text-center solid-bottom justify-start">
|
|
|
|
|
|
//has-authority 标签，其中code与后端配置的按钮 名称相同
|
|
|
|
|
|
<has-authority :code="'pallet:infoQuery:btn'">
|
|
|
|
|
|
<view class=" margin-xs radius">
|
|
|
|
|
|
<button class="uni-button" size="mini" type="primary"
|
|
|
|
|
|
@click="btnModify">修改</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</has-authority>
|
|
|
|
|
|
<has-authority :code="'pallet:infoQuery:btnAA'">
|
|
|
|
|
|
<view class=" margin-xs radius">
|
|
|
|
|
|
<button class="uni-button" size="mini" type="warn">删除</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</has-authority>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</uni-td>
|
2025-11-06 10:38:56 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
# 以下为复杂页面的完整配置参数
|
|
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
|
{
|
|
|
|
|
|
"path": "pages/index/index", // 首页
|
|
|
|
|
|
"style": {
|
|
|
|
|
|
"navigationBarTitleText": "首页", // 页面标题
|
|
|
|
|
|
"enablePullDownRefresh": true, // 开启下拉刷新
|
|
|
|
|
|
"backgroundColor": "#F8F8F8", // 导航栏背景颜色
|
|
|
|
|
|
"onReachBottomDistance": 100, // 设置页面上拉触底事件触发时距离页面底部的距离,默认是50px
|
|
|
|
|
|
"app-plus": { // 以下是App平台特有配置
|
|
|
|
|
|
"titleNView": {
|
|
|
|
|
|
"titleSize": "16px" // App端原生导航栏标题字体大小
|
|
|
|
|
|
"titleColor": "#fff",
|
|
|
|
|
|
"buttons": [{ // 导航栏右侧按钮，下面是使用icon展示的示例
|
|
|
|
|
|
"text": "\ue60f",
|
|
|
|
|
|
"fontSize": "30px",
|
|
|
|
|
|
"fontSrc": "/static/iconfont.ttf"
|
|
|
|
|
|
}]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 以下为底部按钮列表的使用方式
|
|
|
|
|
|
```js
|
|
|
|
|
|
//按钮列表的引入
|
|
|
|
|
|
import bottomBtnGroup from '@/components/bottomBtn/bottomBtnGroup.vue'
|
|
|
|
|
|
//注册组件
|
|
|
|
|
|
components: {
|
|
|
|
|
|
bottomBtnGroup
|
|
|
|
|
|
},
|
|
|
|
|
|
//UI 引用
|
|
|
|
|
|
<bottomBtnGroup :toolbar="bottomBtnList"></bottomBtnGroup>
|
|
|
|
|
|
// vue Data定义
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
//form 底部按钮栏配置
|
|
|
|
|
|
bottomBtnList: [{
|
|
|
|
|
|
label: "新增",
|
|
|
|
|
|
type: "primary",
|
|
|
|
|
|
event: (done) => { // 接收 done 回调 // ✅ 箭头函数，this 指向组件
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
// // 在这里执行你想要延迟执行的函数或代码
|
|
|
|
|
|
console.log("延时5秒") // 调用你的函数
|
|
|
|
|
|
this.containCallMethods(done);//你需要执行的方法
|
|
|
|
|
|
}, 5000);
|
|
|
|
|
|
//this.containCallMethods(done);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "取消",
|
|
|
|
|
|
type: "primary",
|
|
|
|
|
|
event: function() {
|
|
|
|
|
|
//方式2：
|
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
console.log("取消方法完成")
|
|
|
|
|
|
setTimeout(resolve, 5000);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-08-07 15:33:34 +08:00
|
|
|
|
```
|
