setting.vue

<template>
	<view class="page">
		<view class="h2">{{ t('format.show') }}:</view>
		<view class="workbench">
			<view v-for="(appItem,appIndex) in displayList" :key="appItem.sectionKey" class="m-block">
				<view class="m_b_title">{{ t(appItem.displayName) }}</view>
				<view class="m_b_list">
					<l-drag :ref="(el) => setDragRef(el, appIndex)" :list="appItem.items"
						@change="(v)=>handleMoveChange(appItem,v)" :column="4" grid-height="160rpx" :touchHandle="false" ghost
						longpress>
						<template #grid="{active, content:menuItem, index, oindex}">
							<view class="menu-item">
								<image :src="getImgSrc(menuItem)" mode="" style="width: 88rpx;height: 88rpx;"></image>
								<view class="menu-item_icon" @tap="()=>handleRemoveItem(appItem,menuItem,appIndex,index)">
                  <uv-icon name="close-circle" color="#f00" size="40rpx" />
                </view>
								<view style="width:100%;overflow: hidden;text-overflow: ellipsis;white-space: no-wrap;">{{ t(menuItem.displayName) }}</view>
							</view>
						</template>
					</l-drag>
				</view>
			</view>
		</view>
		<view class="h2">{{ t('table.hide') }}:</view>
		<view class="workbench">
			<view v-for="(appItem,appIndex) in hiddenList" :key="appItem.sectionKey" class="m-block">
				<view class="m_b_title">{{ t(appItem.displayName) }}</view>
				<view class="m_b_list">
					<view class="menu-item hidden_item" v-for="(menuItem,index) in appItem.items" :key="menuItem.itemKey">
						<image :src="getImgSrc(menuItem)" mode="" style="width: 88rpx;height: 88rpx;"></image>
            <view class="menu-item_icon" @tap="()=>handleAddItem(appItem,menuItem,appIndex,index)">
              <uv-icon name="plus-circle" color="green" size="40rpx" class="menu-item_icon" />
            </view>
            <view style="width:100%;overflow: hidden;text-overflow: ellipsis;white-space: no-wrap;">{{ t(menuItem.displayName) }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		APP_MENU
	} from './data'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		watch,
		computed,
		nextTick
	} from 'vue'
	import {
		getStageObj
	} from '@/utils'
import {
  t
} from '@/plugins/index.js'

	onLoad(() => {
    uni.setNavigationBarTitle({
      title: t('PreMenu.staging')
    })
		const workbenchInfo = getStageObj('workbenchInfo')
		if (workbenchInfo) {
			displayList.value = workbenchInfo.displayList
			hiddenList.value = workbenchInfo.hiddenList
		}
	})


	const dragRefs = ref([])
	const setDragRef = (el, index) => {
		dragRefs.value[index] = el
	}


	const getImgSrc = (menuItem) => {
		return `/static/workbench/${menuItem.icon}.png`
	}
	const displayList = ref(APP_MENU)
	const hiddenList = ref(APP_MENU.map(el => {
		return {
			...el,
			items: []
		}
	}))

	// 被移除的列表
	const removeList = ref([])
	const handleRemoveItem = (appitem, menuItem, appIndex, index) => {
		// 显示列表移除
		dragRefs.value[appIndex].remove(index)

		// 隐藏列表添加
		hiddenList.value[appIndex].items.push(menuItem)

		// 重新存放数据
	}
	const handleAddItem = (appitem, menuItem, appIndex, index) => {
		// 隐藏列表移除
		hiddenList.value[appIndex].items.splice(index, 1)
    console.log(hiddenList.value[appIndex].items,index);

		// //显示列表添加
		dragRefs.value[appIndex].push(menuItem)

		// 重新存放数据
	}

	// 移动更改后重新赋值
	const handleMoveChange = (appItem, v) => {
		appItem.items = v.map(el => el.content)

		// 重新存放数据
		nextTick(()=>{
			setWorkbenchInfo()
		})
	}


	// 将展示列表和隐藏列表放在storage中
	const setWorkbenchInfo = () => {
		const workbenchInfo = {
			displayList: displayList.value,
			hiddenList: hiddenList.value
		}
		uni.setStorageSync('workbenchInfo', JSON.stringify(workbenchInfo))
	}
</script>

<style lang="scss">
	.page {
		padding: 28rpx;
    min-height: 100vh;

		.h2 {
			font-size: 26rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
		}

		.m-block {
			height: 100%;
			/* #ifdef APP-NVUE */
			flex: 1;
			/*  #endif */
			/* #ifndef APP-NVUE */
			width: 100%;
			/*  #endif */
			padding: 16rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 28rpx 24rpx 0;

			.m_b_title {
				font-weight: bold;
				font-size: 28rpx;
				color: #202328;
			}

			.m_b_list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 32rpx;

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					font-size: 24rpx;
					color: #202328;
					position: relative;

					&_icon {
						position: absolute;
						right: 10rpx;
						top: -10rpx;
					}

					image {
						margin-bottom: 6rpx;
					}
				}
			}
		}
	}

	.hidden_item {
		width: 20%;
		margin-bottom: 20rpx;
	}
</style>