allLikeMall/yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue

<template>
	<Dialog v-model="dialogVisible" title="选择链接" width="65%">
		<div class="h-500px flex gap-8px">
			<!-- 左侧分组列表 -->
			<el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col">
				<template v-for="(group, groupIndex) in APP_LINK_GROUP_LIST">
				<el-button v-if="groupIndex<7"  :key="groupIndex"  :class="[
            'm-r-16px m-l-0px! justify-start! w-90px',
            { active: activeGroup === group.name }
          ]" ref="groupBtnRefs" :text="activeGroup !== group.name"
					:type="activeGroup === group.name ? 'primary' : 'default'" @click="handleGroupSelected(group.name)">
						{{ group.name }}
				</el-button>
				</template>
			</el-scrollbar>
			<!-- 右侧链接列表 -->
			<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
				<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
					<template v-if="activeGroup == group.name && groupIndex<7">
						<!-- 分组标题 -->
						<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
						<!-- 链接列表 -->
						<el-tooltip v-for="(appLink, appLinkIndex) in group.links" :key="appLinkIndex"
							:content="appLink.path" placement="bottom" :show-after="300">
							
							<el-button class="m-b-8px m-r-8px m-l-0px!"
								:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
								@click="handleAppLinkSelected(appLink)">
								{{ appLink.name }}
							</el-button>
						</el-tooltip>
					</template>

				</div>
			</el-scrollbar>
		</div>
		<!-- 底部对话框操作按钮 -->
		<template #footer>
			<el-button type="primary" @click="handleSubmit">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
	<Dialog v-model="detailSelectDialog.visible" title="" width="50%">
		<el-form class="min-h-200px">
			<el-form-item label="选择分类" v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST">
				<ProductCategorySelect v-model="detailSelectDialog.id" :parent-id="0"
					@update:model-value="handleProductCategorySelected" />
			</el-form-item>
		</el-form>
	</Dialog>
</template>
<script lang="ts" setup>
	import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM, AppLink } from './data'
	import * as MemberStatisticsApi from '@/api/mall/statistics/member'
	import { ButtonInstance, ScrollbarInstance } from 'element-plus'
	import { split } from 'lodash-es'
	import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
	import { getUrlNumberValue } from '@/utils'
	// 假设你要追加的数据是一个新的对象
	const userComparison = ref([])
	/** 查询会员用户数量对照卡片数据 */
	const GetDiyPage = async () => {
		userComparison.value = await MemberStatisticsApi.getDiyPage()
		const arry = userComparison.value.map(link => {
			return {
				name: link.name,
				path: `/pages/index/page?id=${link.id}`
			};
		});
		userComparison.value = {
			name: '自定义页面',
			links:arry
		}
		APP_LINK_GROUP_LIST.push(userComparison.value);
		// userComparison.value = APP_LINK_GROUP_LIST 
		//  userComparison.value = APP_LINK_GROUP_LIST.push({qq:1})
		console.log(APP_LINK_GROUP_LIST, 'userComparison.value')
	}
	GetDiyPage()
	// APP 链接选择弹框
	defineOptions({ name: 'AppLinkSelectDialog' })
	// 选中的分组，默认选中第一个
	const activeGroup = ref(APP_LINK_GROUP_LIST[0].name)
	// 选中的 APP 链接
	const activeAppLink = ref({} as AppLink)

	/** 打开弹窗 */
	const dialogVisible = ref(false)
	const open = (link : string) => {
		activeAppLink.value.path = link
		dialogVisible.value = true

		// 滚动到当前的链接
		const group = APP_LINK_GROUP_LIST.find((group) =>
			group.links.some((linkItem) => {
				const sameLink = isSameLink(linkItem.path, link)
				if (sameLink) {
					activeAppLink.value = { ...linkItem, path: link }
				}
				return sameLink
			})
		)
		if (group) {
			// 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
			nextTick(() => handleGroupSelected(group.name))
		}
	}
	defineExpose({ open })

	// 处理 APP 链接选中
	const handleAppLinkSelected = (appLink : AppLink) => {
		if (!isSameLink(appLink.path, activeAppLink.value.path)) {
			activeAppLink.value = appLink
			console.log(activeAppLink.value,activeAppLink.value.path,"activeAppLink.value")
		}
		switch (appLink.type) {
			case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST:
				detailSelectDialog.value.visible = true
				detailSelectDialog.value.type = appLink.type
				// 返显
				detailSelectDialog.value.id =
					getUrlNumberValue('id', 'http://127.0.0.1' + activeAppLink.value.path) || undefined
				break
			default:
				break
		}
	}

	// 处理绑定值更新
	const emit = defineEmits<{
		change : [link: string]
		appLinkChange : [appLink: AppLink]
	}>()
	const handleSubmit = () => {
		dialogVisible.value = false
		emit('change', activeAppLink.value.path)
		emit('appLinkChange', activeAppLink.value)
	}

	// 分组标题引用列表
	const groupTitleRefs = ref<HTMLInputElement[]>([])
	/**
	 * 处理右侧链接列表滚动
	 * @param scrollTop 滚动条的位置
	 */
	const handleScroll = ({ scrollTop } : { scrollTop : number }) => {
		const titleEl = groupTitleRefs.value.find((titleEl : HTMLInputElement) => {
			// 获取标题的位置信息
			const { offsetHeight, offsetTop } = titleEl
			// 判断标题是否在可视范围内
			return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight
		})
		// 只需处理一次
		if (titleEl && activeGroup.value !== titleEl.textContent) {
			activeGroup.value = titleEl.textContent || ''
			// 同步左侧的滚动条位置
			scrollToGroupBtn(activeGroup.value)
		}
	}

	// 右侧滚动条
	const linkScrollbar = ref<ScrollbarInstance>()
	// 处理分组选中
	const handleGroupSelected = (group : string) => {
		activeGroup.value = group
		// const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
		// if (titleRef) {
		//   // 滚动分组标题
		//   linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
		// }
	}

	// 分组滚动条
	const groupScrollbar = ref<ScrollbarInstance>()
	// 分组引用列表
	const groupBtnRefs = ref<ButtonInstance[]>([])
	// 自动滚动分组按钮，确保分组按钮保持在可视区域内
	const scrollToGroupBtn = (group : string) => {
		const groupBtn = groupBtnRefs.value
			.map((btn : ButtonInstance) => btn['ref'])
			.find((ref : Node) => ref.textContent === group)
		if (groupBtn) {
			groupScrollbar.value?.setScrollTop(groupBtn.offsetTop)
		}
	}

	// 是否为相同的链接（不比较参数，只比较链接）
	const isSameLink = (link1 : string, link2 : string) => {
		return split(link1, '?', 1)[0] === split(link2, '?', 1)[0]
	}

	// 详情选择对话框
	const detailSelectDialog = ref<{
		visible : boolean
		id ?: number
		type ?: APP_LINK_TYPE_ENUM
	}>({
		visible: false,
		id: undefined,
		type: undefined
	})
	// 处理详情选择
	const handleProductCategorySelected = (id : number) => {
		const url = new URL(activeAppLink.value.path, 'http://127.0.0.1')
		// 修改 id 参数
		url.searchParams.set('id', `${id}`)
		// 排除域名
		activeAppLink.value.path = `${url.pathname}${url.search}`
		// 关闭对话框
		detailSelectDialog.value.visible = false
		// 重置 id
		detailSelectDialog.value.id = undefined
	}
</script>
<style lang="scss" scoped></style>