406 lines
12 KiB
Vue
406 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar :is-back="false" title="MWMS PDA" :background="background" />
|
||
<view class="aside-main" style="margin-top: 30rpx;">
|
||
<scroll-view scroll-y class="scroll-Y1" :style="'height:'+ mainH" scroll-with-animation>
|
||
<view :class="num==index?'active':''" v-for="(item,index) in asideList" :key="index"
|
||
@click="asid(index)" class="mini">
|
||
<image :src="item.imgUrl" class="min-img"></image>
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 分割线 -->
|
||
<view class="divider-vertical"></view>
|
||
<!-- 右侧滑动区 -->
|
||
<scroll-view scroll-y class="scroll-Y2" :style="'height:'+ mainH" :scroll-into-view="rightview"
|
||
scroll-with-animation @scroll="scrollright" @scrolltoupper="scrolltop" @scrolltolower="scrollbuttom">
|
||
<!-- 功能区节点 -->
|
||
<view v-for="(item,index) in asideList" :key="index" class="min" :id="'rightIndex'+index">
|
||
<!-- <view v-for="(subItem, j) in item.list" :key="j" class="mini" @click="navigateToDetail(subItem.name)">
|
||
<image :src="subItem.url" class="min-img"></image>
|
||
<text>{{ subItem.itemName }}</text>
|
||
</view> -->
|
||
<view class="divider-horizontal"></view>
|
||
<view v-for="(subItem, j) in item.list" :key="j" class="mini"
|
||
@click="navigateToDetail(subItem.name)">
|
||
<image :src="subItem.url" class="min-img"></image>
|
||
<text>{{ subItem.itemName }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
background: {
|
||
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||
},
|
||
mainH: 800,
|
||
num: 0,
|
||
leftview: '',
|
||
rightview: '',
|
||
// 所有的节点坐标
|
||
nodes: [],
|
||
asideList: [{
|
||
title: "入库",
|
||
imgUrl : "../../static/img/ruku.png",
|
||
list: [{
|
||
name: "PoStockIn",
|
||
url: "../../static/img/订单物料采购入库.png",
|
||
itemName: "采购入库\n"
|
||
},{
|
||
// name: "PoStockIn",
|
||
url: "../../static/img/委外加工采购入库.png",
|
||
itemName: "委外采购"
|
||
}, {
|
||
url: "../../static/img/生产退料入库.png",
|
||
itemName: "退库入库"
|
||
}, {
|
||
name: 'ShipStockInMDC',
|
||
url: "../../static/img/生产退料入库.png",
|
||
itemName: "预留退料"
|
||
}, {
|
||
name: 'PmsReturnStockInPage',
|
||
url: "../../static/img/设备退库.png",
|
||
itemName: "PMS退库"
|
||
}]
|
||
},
|
||
{
|
||
imgUrl : "../../static/img/WMS-zaikuguanli.png",
|
||
title: "在库",
|
||
list: [{
|
||
name : 'MaterialQuery',
|
||
url: "../../static/img/库存查询.png",
|
||
itemName: "库存查询"
|
||
}, {
|
||
name: 'ErpLocationRemove',
|
||
url: "../../static/img/库位调整.png",
|
||
itemName: "库位调整"
|
||
}, {
|
||
name: 'LocationRemove',
|
||
url: "../../static/img/货位调整.png",
|
||
itemName: "货位调整"
|
||
}, {
|
||
name: 'SplitBoxPage',
|
||
url: "../../static/img/拆箱.png",
|
||
itemName: "标签拆分"
|
||
}, {
|
||
name: 'MergeBoxPage',
|
||
url: "../../static/img/合箱.png",
|
||
itemName: "标签合并"
|
||
}, {
|
||
url: "../../static/img/标签补打.png",
|
||
itemName: "标签补印"
|
||
}]
|
||
},
|
||
{
|
||
imgUrl : "../../static/img/chuku.png",
|
||
title: "出库",
|
||
list: [{
|
||
url: "../../static/img/手工拣配.png",
|
||
itemName: "拣配"
|
||
}, {
|
||
url: "../../static/img/出库确认.png",
|
||
itemName: "出库"
|
||
}, {
|
||
url: "../../static/img/出库确认.png",
|
||
itemName: "OEM领料"
|
||
}, {
|
||
url: "../../static/img/出库确认.png",
|
||
itemName: "配送单出\n库"
|
||
}, {
|
||
url: "../../static/img/工具报废.png",
|
||
itemName: "PMS报废\n出库"
|
||
}, {
|
||
url: "../../static/img/采购退库.png",
|
||
itemName: "原PO退\n库"
|
||
}, {
|
||
url: "../../static/img/采购退库.png",
|
||
itemName: "退货PO返\n厂"
|
||
}, {
|
||
name: 'ScrapPickPage',
|
||
url: "../../static/img/产权报废.png",
|
||
itemName: "财务报废\n转库"
|
||
}, {
|
||
name: 'ScrapOutPickPage',
|
||
url: "../../static/img/报废出库管理.png",
|
||
itemName: "实物报废\n出库"
|
||
}]
|
||
},
|
||
{
|
||
imgUrl : "../../static/img/kucunpandian.png",
|
||
title: "盘点",
|
||
list: [{
|
||
name : 'CheckRecord/CheckRecord',
|
||
url: "../../static/img/盘点扫描.png",
|
||
itemName: "盘点扫描"
|
||
}, {
|
||
url: "../../static/img/盘点确认.png",
|
||
itemName: "盘点确认"
|
||
},
|
||
{
|
||
url: "../../static/img/库存盘点审核.png",
|
||
itemName: "盘点审核"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
imgUrl : "../../static/img/litiku.png",
|
||
title: "立库",
|
||
list: [{
|
||
url: "../../static/img/绑定解绑_X.png",
|
||
itemName: "母托绑定\n&解绑"
|
||
}, {
|
||
url: "../../static/img/搬送.png",
|
||
itemName: "搬送任务\n下发"
|
||
}, {
|
||
url: "../../static/img/信息同步.png",
|
||
itemName: "货位同步"
|
||
}, {
|
||
url: "../../static/img/库存更新.png",
|
||
itemName: "托盘同步"
|
||
}]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
// 调用uniapp的api获取系统信息,如浏览器可视区高度
|
||
// 实现向下滑动,只有内容区可以滑动
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
// 将upx转换成px
|
||
// 可视区高度减去导航栏高度
|
||
this.mainH = res.windowHeight - uni.upx2px(8) + 'px';
|
||
}
|
||
})
|
||
// 得到页面加载完成时所有的.min节点的坐标位置,主要为top值
|
||
this.coordinate()
|
||
},
|
||
methods: {
|
||
navigateToDetail(name) {
|
||
// 检查 name 是否为空或未定义
|
||
if (!name || name.trim() === '') {
|
||
// 使用 uni.showToast 显示弹窗提示
|
||
uni.showToast({
|
||
title: '功能开发中', // 提示信息
|
||
icon: 'none', // 图标类型，'none' 表示不显示图标
|
||
duration: 2000 // 提示框显示的毫秒数，默认为 1500ms
|
||
});
|
||
return; // 阻止后续代码执行，即不进行页面跳转
|
||
}
|
||
|
||
// 若 name 不为空，则执行页面跳转
|
||
uni.navigateTo({
|
||
url: `/pages/material/features/${name}`
|
||
});
|
||
},
|
||
// 扫码
|
||
re() {
|
||
uni.scanCode({
|
||
success: function(res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
}
|
||
});
|
||
},
|
||
// 搜索
|
||
searchTo() {
|
||
// 跳转路由，跳转到搜索页面
|
||
uni.navigateTo({
|
||
url: "../searchmain/searchmain"
|
||
})
|
||
},
|
||
// 侧边栏切换
|
||
asid(index) {
|
||
// 变色
|
||
this.num = index
|
||
// 通过uniapp的scroll-into-view实现与右侧功能区节点的切换联动
|
||
this.rightview = 'rightIndex' + index
|
||
},
|
||
// 滑动触顶事件
|
||
scrolltop() {
|
||
this.num = 0
|
||
},
|
||
// 滑动触底事件
|
||
scrollbuttom() {
|
||
this.num = this.nodes.length - 1
|
||
},
|
||
// 滑动右边内容区实现与左侧菜单栏联动效果
|
||
// 监听滑动事件
|
||
scrollright(e) {
|
||
// 每一次滑动之前都做一遍跟随,用来解决侧边栏切换不联动问题（重要！！！不加是有bug的）
|
||
this.asid()
|
||
// 拿到滑动的距离(记住初始滑动距离是0！！很重要)
|
||
// console.log('滑动的距离', e.detail.scrollTop)
|
||
// 遍历存储所有节点top坐标的数组nodes(默认从下标1开始，因为初始状态的左侧菜单栏与右侧功能区就是对应的！！)
|
||
for (let i = 1; i < this.nodes.length; i++) {
|
||
// 判断滑动的距离+初始节点的top值!!(这里就是为什么在上面特意提醒要牢记滑动距离的初始值是0的原因,这里将滑动距离加上初始节点的top值是为了将二者放在一个'水平线'上,便于后面比较)是否大于等于当前功能区节点的top值并且小于等于下一个的节点的top值，如果满足条件将切换左侧菜单栏变色的标识符num的值变为当前节点的i。同时需额外判断滑动的距离+初始节点的top值是否大于最后一个功能区节点的top值，因为如果不单独判断的话，原判断逻辑针对最后一个节点是满足不了并条件的。判断头部同理，同时需搭配触顶与触底事件。
|
||
if (e.detail.scrollTop + this.nodes[0] >= this.nodes[i] && e.detail.scrollTop + this.nodes[0] <= this
|
||
.nodes[i + 1]) {
|
||
this.num = i
|
||
} else if (e.detail.scrollTop + this.nodes[0] < this.nodes[1]) {
|
||
this.num = 0
|
||
} else if (e.detail.scrollTop + this.nodes[0] > this.nodes[this.nodes.length - 1]) {
|
||
this.num = this.nodes.length - 1
|
||
}
|
||
}
|
||
},
|
||
// 获取右侧内容区每个指定节点的坐标信息(即左侧菜单栏所对应的每一个功能区的顶部坐标),该方法只在created生命周期中执行一遍即可
|
||
coordinate() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.selectAll(".min").boundingClientRect((data) => {
|
||
// 获取每一个功能区的全部坐标对象(数组形式)
|
||
console.log("得到布局位置信息" + JSON.stringify(data));
|
||
console.log("节点离页面顶部的距离为" + data.top);
|
||
console.log(data)
|
||
// 遍历每一个功能区的全部坐标对象(数组形式),拿到所有的top坐标
|
||
for (let i = 0; i < data.length; i++) {
|
||
console.log("每个节点的top坐标", data[i].top)
|
||
// 将每个top坐标push进一个空数组nodes中
|
||
this.nodes.push(data[i].top)
|
||
}
|
||
console.log("nodes", this.nodes)
|
||
})
|
||
.exec();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.active {
|
||
color: #aaaa7f;
|
||
}
|
||
|
||
.min {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.mini {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* .min {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.mini {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
} */
|
||
.min-img {
|
||
width: 80upx;
|
||
height: 80upx;
|
||
/* filter: grayscale(30%); */
|
||
filter: brightness(50%);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.text {
|
||
width: 100upx;
|
||
margin: 0 auto;
|
||
align-items: center;
|
||
opacity: 0.3;
|
||
/* height: 80upx; */
|
||
}
|
||
|
||
.aside-main {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.scroll-Y1 {
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.scroll-Y1 view {
|
||
text-align: center;
|
||
margin-top: 80upx;
|
||
}
|
||
|
||
.scroll-Y2 {
|
||
flex: 2;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
}
|
||
|
||
.scroll-Y2 view {
|
||
text-align: center;
|
||
margin: 30upx 30upx 0upx 0upx;
|
||
}
|
||
|
||
.icon {
|
||
width: 50upx;
|
||
height: 50upx;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
.icon1 {
|
||
width: 30upx;
|
||
height: 30upx;
|
||
position: absolute;
|
||
top: 15upx;
|
||
left: 10upx;
|
||
}
|
||
|
||
.btn {
|
||
width: 240upx;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 30upx;
|
||
}
|
||
|
||
.serch {
|
||
height: 60upx;
|
||
flex: 2;
|
||
margin-left: 20upx;
|
||
margin-right: 20upx;
|
||
box-sizing: border-box;
|
||
border: solid 1upx #ccc;
|
||
border-radius: 10upx;
|
||
position: relative;
|
||
}
|
||
|
||
.serch input {
|
||
height: 60upx;
|
||
margin-left: 60upx;
|
||
}
|
||
.divider-vertical {
|
||
width: 1px; /* 竖线的宽度 */
|
||
height: 100% + 0px; /* 竖线的高度，与 scroll-view 相同 */
|
||
background-color: #ccc; /* 竖线的颜色 */
|
||
/* 如果需要，可以添加 margin 或 padding 来调整位置 */
|
||
margin : 20rpx;
|
||
}
|
||
.divider-horizontal {
|
||
width: 100%; /* 或者你需要的宽度 */
|
||
height: 1px; /* 横线的高度 */
|
||
background-color: #ccc; /* 横线的颜色 */
|
||
margin: 8px 0; /* 可选的，增加上下边距 */
|
||
}
|
||
</style> |