java/cath-app/pages/menu/index.vue

<template>
	<view class="app-container">
		<uni-nav-bar ref="refTitle" dark :fixed="true" shadow background-color="#007AFF" status-bar :title="title" 
			:right-icon="rightIcon" @clickRight="toggleDisplayMode" />
		<view class="menu-container" v-if="displayMode">
			<uni-section v-for="(item,index) in girdListSetGroupOf" :title="item.name" type="square" padding="0 0 0 5px">
				<view class="example-body" style="display: flex;">
					<view class="tag-view">
						<uni-tag  :inverted="true" :type="item.type" style="height:45px;line-height: 45px;min-width:64px;font-size: 16px;font-weight: bold;margin: 0 5px 5px 0;"
							v-for="(item2, index) in item.girdList"
							:index="index" :key="index"
							:text="item2.text"
							@click="navClick(item2.navUrl)"
						/>
					</view>
				</view>
			</uni-section>
		</view>
		<view class="menu-container" v-if="!displayMode">
			<uni-section title="WMS" type="circle"></uni-section>
			<view class="grid-body">
				<uni-grid :column="3" :highlight="true" :showBorder="false">
					<uni-grid-item v-for="(item, index) in girdListSetOf" :index="index" :key="index">
						<view class="grid-item-box"  @click="navClick(item.navUrl)">
							<text class="t-icon" :class="item.icon"></text>
							<text class="text">{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<uni-section title="MES" type="circle"></uni-section>
			<view class="grid-body">
				<uni-grid :column="3" :highlight="true" :showBorder="false">
					<uni-grid-item v-for="(item, index) in girdMesList" :index="index" :key="index">
						<view class="grid-item-box"  @click="navClick(item.navUrl)">
							<text class="t-icon" :class="item.icon"></text>
							<text class="text">{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//types : ["default", "primary", "success", "warning", "error"]
				girdList: [
					{
						icon: 'iconrukutui',
						text: '入库(退)',
						navUrl: '/pages/menu/backStockIn/index',
					},
					{
						icon: 'iconchukutui',
						text: '出库(退)',
						navUrl: '/pages/menu/backStockOut/index',
					},
					{
						icon: 'iconcs-kc-1',
						text: '查库存',
						navUrl: '/pages/menu/report/current',
					},
					{
						icon: 'iconpandian',
						text: '盘点单',
						navUrl: '/pages/menu/stockCheck/index',
					},
				],
				girdMesList:[
					{
						icon: 'icongantt-full',
						text: '生产报工',
						navUrl: '/pages/mes/progx/index',
					},
				],
				inGirdList:[],
				outGirdList:[],
				moveGirdList:[],
				title:"菜单",
				isNavigating: false, // 用来检查是否正在导航
				displayMode: uni.getStorageSync('menuDisplayMode'),
			}
		},
		created() {
		  let stockInBillType = [];
		  let stockOutBillType = [];
		  let stockMoveBillType = [];
		  try{
		    stockInBillType = JSON.parse(uni.getStorageSync('stockInBillType')).map(item => ({
							  icon:'iconruku',
			                  text: item.billTypeName,
			                  navUrl: '/pages/menu/stockIn/index?ywlx=' + item.billTypeCode
			                }));
		    stockOutBillType = JSON.parse(uni.getStorageSync('stockOutBillType')).map(item => ({
							  icon:'iconchuku',
			                  text: item.billTypeName,
			                  navUrl: '/pages/menu/stockOut/index?ywlx=' + item.billTypeCode
			                }));
		    stockMoveBillType = JSON.parse(uni.getStorageSync('stockMoveBillType')).map(item => ({
							  icon:'icont-icon-svg-08',
			                  text: item.billTypeName,
			                  navUrl: '/pages/menu/stockMove/index?ywlx=' + item.billTypeCode
			                }));
		  }catch(e){
		  	stockInBillType = [{ icon:'iconruku', text: '入库单', navUrl:'/pages/menu/stockIn/index' }];
		  	stockOutBillType = [{ icon:'iconchuku', text: '出库单', navUrl:'/pages/menu/stockOut/index' }];
				stockMoveBillType = [{ icon:'icont-icon-svg-08', text: '移位单', navUrl:'/pages/menu/stockMove/index' }];
		  }

		  this.inGirdList = stockInBillType;
		  this.outGirdList = stockOutBillType;
			this.moveGirdList = stockMoveBillType;
		  //this.girdList = [ ...stockInBillType, ...stockOutBillType, ...this.otherGirdList ]
		  //console.log(this.girdList);
		},
		methods: {
			navClick(path) {
				if (this.isNavigating) {
					// 如果正在导航，则不执行任何操作
					return;
				}

				this.isNavigating = true; // 设置正在导航状态

				uni.navigateTo({
					url: path,
					success: () => {
						// 导航成功，可以在这里做一些操作，比如发送全局事件等
						this.isNavigating = false; // 重置导航状态
					},
					fail: () => {
						// 导航失败，同样重置导航状态
						this.isNavigating = false;
					}
				});
			},
			toggleDisplayMode(){//切换用九宫格还是分组标签
				this.displayMode = !this.displayMode
				uni.setStorageSync('menuDisplayMode', this.displayMode)
			},
		},
		onLoad: function (options) {
			this.$nextTick(() => {
				this.title = "菜单("+ uni.getStorageSync('name') +")";
			});
		},
		computed: {
			girdListSetOf(){ //数据合集
				return [...this.inGirdList, ...this.outGirdList, ...this.moveGirdList, ...this.girdList]
			},
			girdListSetGroupOf() { //数据分组合集
				return [
						{"name" : "WMS","girdList" : this.girdList, "type" : "primary"},
						{"name" : "入库","girdList" : this.inGirdList, "type" : "success"},
						{"name" : "出库","girdList" : this.outGirdList, "type" : "warning"},
						{"name" : "移位","girdList" : this.moveGirdList, "type" : "error"},
					]
			},
			rightIcon(){
				return this.displayMode ? 'list' : 'more-filled'
			},
		},
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 16px;
		line-height: inherit;
	}
	/* #endif */
	
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 16px;
		margin-top: 10px;
	}
	
	.t-icon {
		display: inline-block;
		width: 2rem;
		height: 2rem;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
	}
	
	.example-body {
	  display: flex; /* 使用 Flexbox */
	  flex-wrap: wrap; /* 允许子元素换行 */
	  align-items: center; /* 垂直居中对齐 */
	}
	
	.tag-view {
	  display: flex; /* 使用 Flexbox */
	  flex-wrap: wrap; /* 允许子元素换行 */
	  align-items: center; /* 垂直居中对齐 */
	   /* 子元素之间的间距 */
	}
</style>