2025-03-JS-SDK-PDA/pages/material/index.vue

<template>
	<view>
		<u-navbar :is-back="false" title="WMS PDA" :background="background" />
		<scroll-view scroll-y class="page">
			<view class="nav-list">
				<!-- <u-row class="mt-10"> -->
				<view class="row-flex">
					<view v-for="(item, i) in elements" :key="i" class="nav-view" v-if="$menuLimit(item.id)">
						<navigator hover-class="none" :url="'/pages/material/features/' + item.name" navigateTo
							:class="'bg-'+item.color" class="nav-a nav-li">
							<view class="nav-title">{{item.title}}</view>
							<view class="nav-name">{{item.en_name}}</view>
							<text :class="'cuIcon-' + item.cuIcon"></text>
						</navigator>
					</view>
				</view>

				<!-- </u-row> -->
			</view>
		</scroll-view>
		<u-gap height="70"></u-gap>
		<!-- <text class="detail">收到消息：{{reciveMessageData.total}}</text>
		<view class="notice_list">
			<text class="notice_btn" @click="sendNotice">发送通知</text>
			<text class="notice_btn" @click="deleteNotice">删除单个通知</text>
			<text class="notice_btn" @click="deleteAllNotice">删除全部通知</text>
			<text class="notice_btn" @click="getNoticePermissions">获取通知权限状态</text>
			<text class="notice_btn" @click="openSetting">打开通知设置</text>
			<text class="notice_btn" @click="setBadge">设置角标数</text>
			<text class="notice_btn" @click="getNotice">获取通知栏列表</text>
		</view> -->
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import {
		removeZeros
	} from "@/utils/utils"
	import WebSocketsss from '../../components/stomprabbitmq-stomprabbitmq/stomprabbitmq-stomprabbitmq.js';
	const syczuanNotice = uni.requireNativePlugin("syczuan-notice");
	export default {
		onShow() {
			// #ifdef APP-PLUS
			const globalEvent = uni.requireNativePlugin('globalEvent');
			let that = this
			plus.globalEvent.addEventListener('tagDataEvent', function(e) {
				console.log('tagDataEvent' + JSON.stringify(e));
				let rifd = removeZeros(e.tagData[0].tagID)
				uni.$emit('rifdscan', {
					rifd: rifd
				})
			});
			// #endif
		},
		mounted() {
			// 连接--
			this.rabbit()
				
			// setInterval(()=>{
			// 	var init8arr = new Uint8Array([1,0,2,0,1]);
			// 	WebSocketsss.sendMessage(init8arr)
			// },5000)
			// this.getNoticePermissions()
			uni.$on('sendMessage', res => {
				console.log("接收到的消息：" + res.data);
				if (res.data.indexOf("服务器") == -1 && res.data) {
					this.reciveMessageData = JSON.parse(res.data)
					if (this.reciveMessageData.total) {
						this.sendNotice(this.reciveMessageData)
					}
				}
			})

			uni.$on('socketError', res => {
				console.log('失去连接res')
				setTimeout(() => {
					this.rabbit()
				}, 5000)
			})

		},
		data() {
			return {
				reciveMessageData: '',
				title: '物料仓库主界面',
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				//要展示的数组元素
				elements: [{
						title: '产成品入库',
						name: 'ProductStockIn/index',
						en_name: 'ProductStockIn',
						color: 'cyan',
						cuIcon: 'ProductStockIn/index',
						label: '跨组织收料',
						id: '100001'
					},
					{
						title: '调拨入库',
						name: 'TransferReceivePage/index',
						en_name: 'TransferReceivePage',
						color: 'yellow',
						cuIcon: 'backwardfill',
						label: '调拨',
						id: '100002'
					},
					{
						title: '销售退货入库',
						name: 'ProductSaleReturn/index',
						en_name: 'ProductSaleReturn',
						color: 'yellow',
						cuIcon: 'ProductSaleReturn/index',
						label: '销售退货入库',
						id: '100003'
					}, {
						title: '其他入库',
						name: 'OtherStockIn/index',
						en_name: 'OfferingsStockIn',
						color: 'yellow',
						cuIcon: 'OtherStockIn/index',
						label: '其他入库',
						id: '100004'
					}, {
						title: '退料入库',
						name: 'ProduceReturnPage/index',
						en_name: 'ProduceReturnPage',
						color: 'yellow',
						cuIcon: 'ProduceReturnPage/index',
						label: '退料入库',
						id: '100005'
					},
					{
						title: '客供品入库',
						name: 'OtherStockInNoInvoic/OtherStockInNoInvoic',
						en_name: 'OtherStockInNoInvoic',
						color: 'mauve',
						cuIcon: '',
						label: '客供品入库',
						id: '100006'
					},
					{
						title: '无单据入库2',
						name: 'TEST/TEST',
						en_name: 'TEST',
						color: 'mauve',
						cuIcon: '',
						label: '无单据入库2',
						id: '100007'
					},
					{
						title: '委外退料入库',
						name: 'MaterialReturnStockIn/index',
						en_name: 'MaterialReturnStockIn',
						color: 'yellow',
						cuIcon: 'OtherStockIn/index',
						label: '委外退料入库',
						id: '100008'
					},
					{
						title: '盘盈入库',
						name: 'InventoryProfitStockIn/index',
						en_name: 'InventoryProfitStockIn',
						color: 'yellow',
						cuIcon: 'OtherStockIn/index',
						label: '盘盈入库',
						id: '100009'
					}
				],
			}
		},
		computed: {
			tabbar() {
				return store.vuex_tabbar
			}
		},
		methods: {
			sendNotice(list) {
				console.log("list", list)
				let orderList = [];
				list.list.map(val => {
					orderList.push(val.RECEIVEREQUESTNAME)
				})
				syczuanNotice.send({
					// 唯一通知id,用于更新、取消通知
					noticeId: Math.floor(Math.random() * Math.pow(10, 9)),
					// 通知标题
					title: "您有新的领料单下发",
					// 通知内容
					content: "领料单单号：" + orderList.join(","),
					// 通知栏附加文本
					subText: "领料单下发" + list.total + "条",
					// date: "2025-10-1",
					smallColor: "#000000",
					// 自定义数据
					payload: {
						pages: "/pages/message/index",
						type: "default",
					}
				});
			},
			// 删除单个通知
			deleteNotice() {
				syczuanNotice.delete(1);
			},
			// 删除全部通知
			deleteAllNotice() {
				syczuanNotice.deleteAll();
			},
			// 获取通知权限
			getNoticePermissions() {
				const info = syczuanNotice.determinePermissions();
				console.log(info);
			},
			// 打开通知设置
			openSetting() {
				syczuanNotice.openSetting();
			},
			// 设置角标数
			setBadge() {
				syczuanNotice.setBadge(10);
			},
			// 获取通知列表
			getNotice() {
				const info = syczuanNotice.getNoticeList();
				console.log(info);
			},
			rabbit() {
				let ut = uni.getStorageSync('ut')
				let userid = uni.getStorageSync('userid')
				let that = this;
				console.log('连接')
				// let url = location.host
				// console.log('WebSocket_url',url)
				// ip连接模拟器联调地址ws://172.22.54.217:17878/socket/
				WebSocketsss.init("ws://localhost:18878/socket/" + userid, {
					login: userid,
					passcode: ut,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.mt-10 {
		margin-top: 10px;
	}

	.row-flex {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.nav-view {
		width: 45%;
		margin: 2.5%;
		// display: contents;
	}

	.nav-li {
		// width: 45%;
		width: 100%;
		// margin: 0 2.5% 40upx;
		background-image: url('../../static/img/background.png');
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-a {
		padding: 30upx;
		border-radius: 12upx;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}

	.text-light {
		font-weight: 300;
	}

	@keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}
</style>