AppLinkSelectDialog.vue 6.6 KB

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