|
| 1 | +<template> |
| 2 | + <Dialog v-model="dialogVisible" title="选择链接" width="65%"> |
| 3 | + <div class="h-500px flex gap-8px"> |
| 4 | + <!-- 左侧分组列表 --> |
| 5 | + <el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col"> |
| 6 | + <el-button |
| 7 | + v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" |
| 8 | + :key="groupIndex" |
| 9 | + :class="[ |
| 10 | + 'm-r-16px m-l-0px! justify-start! w-90px', |
| 11 | + { active: activeGroup === group.name } |
| 12 | + ]" |
| 13 | + ref="groupBtnRefs" |
| 14 | + :text="activeGroup !== group.name" |
| 15 | + :type="activeGroup === group.name ? 'primary' : 'default'" |
| 16 | + @click="handleGroupSelected(group.name)" |
| 17 | + > |
| 18 | + {{ group.name }} |
| 19 | + </el-button> |
| 20 | + </el-scrollbar> |
| 21 | + <!-- 右侧链接列表 --> |
| 22 | + <el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar"> |
| 23 | + <div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex"> |
| 24 | + <!-- 分组标题 --> |
| 25 | + <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div> |
| 26 | + <!-- 链接列表 --> |
| 27 | + <el-tooltip |
| 28 | + v-for="(appLink, appLinkIndex) in group.links" |
| 29 | + :key="appLinkIndex" |
| 30 | + :content="appLink.path" |
| 31 | + placement="bottom" |
| 32 | + > |
| 33 | + <el-button |
| 34 | + class="m-b-8px m-r-8px m-l-0px!" |
| 35 | + :type="isSameLink(appLink.path, activeAppLink) ? 'primary' : 'default'" |
| 36 | + @click="handleAppLinkSelected(appLink)" |
| 37 | + > |
| 38 | + {{ appLink.name }} |
| 39 | + </el-button> |
| 40 | + </el-tooltip> |
| 41 | + </div> |
| 42 | + </el-scrollbar> |
| 43 | + </div> |
| 44 | + <!-- 底部对话框操作按钮 --> |
| 45 | + <template #footer> |
| 46 | + <el-button type="primary" @click="handleSubmit">确 定</el-button> |
| 47 | + <el-button @click="dialogVisible = false">取 消</el-button> |
| 48 | + </template> |
| 49 | + </Dialog> |
| 50 | + <Dialog v-model="detailSelectDialog.visible" title="" width="50%"> |
| 51 | + <el-form class="min-h-200px"> |
| 52 | + <el-form-item |
| 53 | + label="选择分类" |
| 54 | + v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST" |
| 55 | + > |
| 56 | + <ProductCategorySelect |
| 57 | + v-model="detailSelectDialog.id" |
| 58 | + :parent-id="0" |
| 59 | + @update:model-value="handleProductCategorySelected" |
| 60 | + /> |
| 61 | + </el-form-item> |
| 62 | + </el-form> |
| 63 | + </Dialog> |
| 64 | +</template> |
| 65 | +<script lang="ts" setup> |
| 66 | +import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data' |
| 67 | +import { ButtonInstance, ScrollbarInstance } from 'element-plus' |
| 68 | +import { split } from 'lodash-es' |
| 69 | +import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue' |
| 70 | +import { getUrlNumberValue } from '@/utils' |
| 71 | +
|
| 72 | +// APP 链接选择弹框 |
| 73 | +defineOptions({ name: 'AppLinkSelectDialog' }) |
| 74 | +// 选中的分组，默认选中第一个 |
| 75 | +const activeGroup = ref(APP_LINK_GROUP_LIST[0].name) |
| 76 | +// 选中的 APP 链接 |
| 77 | +const activeAppLink = ref('') |
| 78 | +
|
| 79 | +/** 打开弹窗 */ |
| 80 | +const dialogVisible = ref(false) |
| 81 | +const open = (link: string) => { |
| 82 | + activeAppLink.value = link |
| 83 | + dialogVisible.value = true |
| 84 | +
|
| 85 | + // 滚动到当前的链接 |
| 86 | + const group = APP_LINK_GROUP_LIST.find((group) => |
| 87 | + group.links.some((linkItem) => isSameLink(linkItem.path, link)) |
| 88 | + ) |
| 89 | + if (group) { |
| 90 | + // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败 |
| 91 | + nextTick(() => handleGroupSelected(group.name)) |
| 92 | + } |
| 93 | +} |
| 94 | +defineExpose({ open }) |
| 95 | +
|
| 96 | +// 处理 APP 链接选中 |
| 97 | +const handleAppLinkSelected = (appLink: any) => { |
| 98 | + if (!isSameLink(appLink.path, activeAppLink.value)) { |
| 99 | + activeAppLink.value = appLink.path |
| 100 | + } |
| 101 | + switch (appLink.type) { |
| 102 | + case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: |
| 103 | + detailSelectDialog.value.visible = true |
| 104 | + detailSelectDialog.value.type = appLink.type |
| 105 | + // 返显 |
| 106 | + detailSelectDialog.value.id = |
| 107 | + getUrlNumberValue('id', 'http://127.0.0.1' + activeAppLink.value) || undefined |
| 108 | + break |
| 109 | + default: |
| 110 | + break |
| 111 | + } |
| 112 | +} |
| 113 | +
|
| 114 | +// 处理绑定值更新 |
| 115 | +const emit = defineEmits<{ |
| 116 | + change: [link: string] |
| 117 | +}>() |
| 118 | +const handleSubmit = () => { |
| 119 | + dialogVisible.value = false |
| 120 | + emit('change', activeAppLink.value) |
| 121 | +} |
| 122 | +
|
| 123 | +// 分组标题引用列表 |
| 124 | +const groupTitleRefs = ref<HTMLInputElement[]>([]) |
| 125 | +/** |
| 126 | + * 处理右侧链接列表滚动 |
| 127 | + * @param scrollTop 滚动条的位置 |
| 128 | + */ |
| 129 | +const handleScroll = ({ scrollTop }: { scrollTop: number }) => { |
| 130 | + const titleEl = groupTitleRefs.value.find((titleEl) => { |
| 131 | + // 获取标题的位置信息 |
| 132 | + const { offsetHeight, offsetTop } = titleEl |
| 133 | + // 判断标题是否在可视范围内 |
| 134 | + return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight |
| 135 | + }) |
| 136 | + // 只需处理一次 |
| 137 | + if (titleEl && activeGroup.value !== titleEl.textContent) { |
| 138 | + activeGroup.value = titleEl.textContent || '' |
| 139 | + // 同步左侧的滚动条位置 |
| 140 | + scrollToGroupBtn(activeGroup.value) |
| 141 | + } |
| 142 | +} |
| 143 | +
|
| 144 | +// 右侧滚动条 |
| 145 | +const linkScrollbar = ref<ScrollbarInstance>() |
| 146 | +// 处理分组选中 |
| 147 | +const handleGroupSelected = (group: string) => { |
| 148 | + activeGroup.value = group |
| 149 | + const titleRef = groupTitleRefs.value.find((item) => item.textContent === group) |
| 150 | + if (titleRef) { |
| 151 | + // 滚动分组标题 |
| 152 | + linkScrollbar.value?.setScrollTop(titleRef.offsetTop) |
| 153 | + } |
| 154 | +} |
| 155 | +
|
| 156 | +// 分组滚动条 |
| 157 | +const groupScrollbar = ref<ScrollbarInstance>() |
| 158 | +// 分组引用列表 |
| 159 | +const groupBtnRefs = ref<ButtonInstance[]>([]) |
| 160 | +// 自动滚动分组按钮，确保分组按钮保持在可视区域内 |
| 161 | +const scrollToGroupBtn = (group: string) => { |
| 162 | + const groupBtn = groupBtnRefs.value |
| 163 | + .map((btn) => btn['ref']) |
| 164 | + .find((ref) => ref.textContent === group) |
| 165 | + if (groupBtn) { |
| 166 | + groupScrollbar.value?.setScrollTop(groupBtn.offsetTop) |
| 167 | + } |
| 168 | +} |
| 169 | +
|
| 170 | +// 是否为相同的链接（不比较参数，只比较链接） |
| 171 | +const isSameLink = (link1: string, link2: string) => { |
| 172 | + return split(link1, '?', 1)[0] === split(link2, '?', 1)[0] |
| 173 | +} |
| 174 | +
|
| 175 | +// 详情选择对话框 |
| 176 | +const detailSelectDialog = ref<{ |
| 177 | + visible: boolean |
| 178 | + id?: number |
| 179 | + type?: APP_LINK_TYPE_ENUM |
| 180 | +}>({ |
| 181 | + visible: false, |
| 182 | + id: undefined, |
| 183 | + type: undefined |
| 184 | +}) |
| 185 | +// 处理详情选择 |
| 186 | +const handleProductCategorySelected = (id: number) => { |
| 187 | + const url = new URL(activeAppLink.value, 'http://127.0.0.1') |
| 188 | + // 修改 id 参数 |
| 189 | + url.searchParams.set('id', `${id}`) |
| 190 | + // 排除域名 |
| 191 | + activeAppLink.value = `${url.pathname}${url.search}` |
| 192 | + // 关闭对话框 |
| 193 | + detailSelectDialog.value.visible = false |
| 194 | + // 重置 id |
| 195 | + detailSelectDialog.value.id = undefined |
| 196 | +} |
| 197 | +</script> |
| 198 | +<style lang="scss" scoped></style> |
0 commit comments