底部导航菜单不允许多选， 选中一个关闭其他

src/components/common-comp-footer/src/entry/CommonFooter.vue

@@ -2,52 +2,52 @@
 <template>
   <div class="common-comp-footer__footer_func_area">
     <div
-      class="footer_open"
-      :style="`transform: translateX(-50%);`"
-      v-if="isOpen"
+        class="footer_open"
+        :style="`transform: translateX(-50%);`"
+        v-if="isOpen"
     >
       <div class="clip-bg-box">
-        <img :src="currentBgImage.unfold" alt="" />
+        <img :src="currentBgImage.unfold" alt=""/>
       </div>
       <div class="opt_btn_off_on to_close_btn" @click="toCloseArea">
-        <img :src="closeIcon" alt="" />
+        <img :src="closeIcon" alt=""/>
       </div>
       <div class="cont" v-if="isHaveFunction">
         <div
-          class="page-left"
-          @click="getPrevPage"
-          v-if="functionList.filter((item) => item.checked).length > 9"
+            class="page-left"
+            @click="getPrevPage"
+            v-if="functionList.filter((item) => item.checked).length > 9"
         >
           <img
-            :src="
+              :src="
               this.currentPage === 0 ? prevImg?.iconDisabled : prevImg?.icon
             "
           />
         </div>
         <template v-for="item in scollFunctionList">
           <div
-            class="func_item"
-            v-if="item.checked"
-            :key="item.id"
-            :class="
+              class="func_item"
+              v-if="item.checked"
+              :key="item.id"
+              :class="
               currentSelectFunction.find((secItem) => secItem.id == item.id)
                 ? 'active'
                 : ''
             "
-            @click="selectFunction(item)"
+              @click="selectFunction(item)"
           >
             <!--            <i class="top_iocn iconfont_tools" :class="item.icon"></i>-->
             <img
-              class="icon-img"
-              :src="
+                class="icon-img"
+                :src="
                 currentSelectFunction.find((secItem) => secItem.id == item.id)
                   ? item.iconImgActive
                   : item.iconImg
               "
             />
             <div
-              class="mid_bg_img"
-              :class="
+                class="mid_bg_img"
+                :class="
                 currentSelectFunction.find((secItem) => secItem.id == item.id)
                   ? 'act_item_icon'
                   : 'def_item_icon'
@@ -60,12 +60,12 @@
           <slot></slot>
         </template>
         <div
-          class="page-right"
-          @click="getNextPage"
-          v-if="functionList.filter((item) => item.checked).length > 9"
+            class="page-right"
+            @click="getNextPage"
+            v-if="functionList.filter((item) => item.checked).length > 9"
         >
           <img
-            :src="
+              :src="
               this.currentPage + 9 ===
               this.functionList.filter((item) => item.checked).length
                 ? nextImg?.iconDisabled
@@ -78,37 +78,38 @@
         <div class="tips_cont">
           <span class="iconfont icon-style icon-icon_dikuaixiangqing_s"></span>
           <span class="des"
-            >该区域没有配置功能菜单，请到【工具箱-配置项-<span
+          >该区域没有配置功能菜单，请到【工具箱-配置项-<span
               @click="toOpenConfig"
               class="to_tools"
-              >菜单配置</span
-            >】中配置</span
+          >菜单配置</span
+          >】中配置</span
           >
         </div>
       </div>
     </div>
     <div class="footer_close" :style="`transform: translateX(-50%);`" v-else>
       <div class="opt_btn_off_on to_open_btn" @click="toOpenArae">
-        <img :src="openIcon" alt="" />
+        <img :src="openIcon" alt=""/>
       </div>
       <div class="clip-bg-box fold-height">
-        <img :src="currentBgImage.fold" alt="" />
+        <img :src="currentBgImage.fold" alt=""/>
       </div>
     </div>
-    <div v-if="!isOpen" class="close_line"> </div>
+    <div v-if="!isOpen" class="close_line"></div>
     <!-- 实时显示鼠标坐标 右下角 -->
     <bottom-map-mouse-position
-      v-if="showMapMousePosition"
-      :mapId="mapId"
+        v-if="showMapMousePosition"
+        :mapId="mapId"
     ></bottom-map-mouse-position>
   </div>
 </template>
 
 <script>
-import { getUserMemoryInfo } from '../service/index'
+import {getUserMemoryInfo} from '../service/index'
 import bottomMapMousePosition from '../components/bottomMapLocaltionShow/BottomMapLocaltionShow.vue'
 import eventPath from '@component-gallery/build-event-bus-path'
-import { bgImages } from '../service/util'
+import {bgImages} from '../service/util'
+
 const themeMap = {
   // 蓝
   'theme-wiseblue': {
@@ -401,7 +402,7 @@ export default {
           // 如果主题图标集合中存在当前功能对应的图标
           if (themeIcons[item.id]) {
             // 提取当前功能对应的图标和激活态图标
-            const { iconImg, iconImgActive } = themeIcons[item.id]
+            const {iconImg, iconImgActive} = themeIcons[item.id]
             // 更新功能图标和激活态图标
             item.iconImg = iconImg
             item.iconImgActive = iconImgActive
@@ -412,7 +413,7 @@ export default {
         const checkedList = arr.filter((item) => item.checked)
         // 根据被选中的功能数量设置滚动功能列表
         this.scollFunctionList =
-          checkedList.length > 9 ? [...checkedList.slice(0, 9)] : checkedList
+            checkedList.length > 9 ? [...checkedList.slice(0, 9)] : checkedList
       }
     },
     functionList(newV) {
@@ -424,7 +425,7 @@ export default {
         // 遍历功能列表，根据主题图标集合更新图标和激活状态的图标
         const arr = this.functionList.map((item) => {
           if (themeIcons[item.id]) {
-            const { iconImg, iconImgActive } = themeIcons[item.id]
+            const {iconImg, iconImgActive} = themeIcons[item.id]
             item.iconImg = iconImg
             item.iconImgActive = iconImgActive
           }
@@ -434,7 +435,7 @@ export default {
         const checkedList = arr.filter((item) => item.checked)
         // 如果选中的功能列表项超过9个，则只保留前9个，否则直接使用过滤后的结果
         this.scollFunctionList =
-          checkedList.length > 9 ? [...checkedList.slice(0, 9)] : checkedList
+            checkedList.length > 9 ? [...checkedList.slice(0, 9)] : checkedList
       })
     }
   },
@@ -463,9 +464,9 @@ export default {
         num = 9
       }
       console.log(
-        this.themeKey,
-        bgImages[this.themeKey],
-        ' bgImages[this.themeKey]'
+          this.themeKey,
+          bgImages[this.themeKey],
+          ' bgImages[this.themeKey]'
       )
       // 如果主题键为空，则返回空字符串
       if (!this.themeKey) {
@@ -488,12 +489,12 @@ export default {
       options.isOpen = this.isOpen
       // 将 currentSelectFunction 对象转换为 JSON 字符串，然后再将其解析为新的对象，赋值给 options 对象的 currentSelectFunction 属性
       options.currentSelectFunction = JSON.parse(
-        JSON.stringify(this.currentSelectFunction)
+          JSON.stringify(this.currentSelectFunction)
       )
       // 使用全局事件总线触发一个事件，事件名为 eventPath.commonCompFooter + '__to-close-area'，并传递 options 对象作为参数
       this.$globalEventBus.$emit(
-        `${eventPath.commonCompFooter}__to-close-area`,
-        options
+          `${eventPath.commonCompFooter}__to-close-area`,
+          options
       )
     },
     toOpenArae() {
@@ -504,69 +505,66 @@ export default {
       options.isOpen = this.isOpen
       // 触发全局事件，并携带参数options
       this.$globalEventBus.$emit(
-        `${eventPath.commonCompFooter}__to-open-area`,
-        options
+          `${eventPath.commonCompFooter}__to-open-area`,
+          options
       )
     },
     // 选择功能
     selectFunction(data) {
-      let options = {}
-      /**
-       * 1.currentSelectFunction中没有data,将点击的data集成入currentSelectFunction中，data.checked选中
-       * 2.如果有data,将currentSelectFunction中的data删除，将列表传出
-       */
-      // 在currentSelectFunction中查找是否存在与data的id相同的项
-      const existingItem = this.currentSelectFunction.find(
-        (item) => item.id == data.id
-      )
-      // 如果不存在，则将data添加到currentSelectFunction中
-      if (!existingItem) {
-        this.currentSelectFunction.push(data)
-        // 如果存在，则从currentSelectFunction中删除该项
+      const isCurrentlyActive = this.currentSelectFunction.some(
+          (item) => item.id === data.id
+      );
+
+      // 如果当前功能已激活，取消激活
+      if (isCurrentlyActive) {
+        this.currentSelectFunction = [];
       } else {
-        const index = this.currentSelectFunction.indexOf(existingItem)
-        // 如果该项的id为5，则触发一个全局事件，用于关闭设备树弹窗
-        if (existingItem.id == 5) {
+        // 先关闭所有已激活的功能
+        this.currentSelectFunction.forEach((activeItem) => {
           this.$globalEventBus.$emit(
-            `${eventPath.commonCompHornTree}__change-device-tree-pop-ups-status`,
-            {
-              isShow: false
-            }
-          ) // 提供君南大喇叭设备树弹窗开启和关闭回调
-        }
-        this.currentSelectFunction.splice(index, 1)
+              `${eventPath.commonCompFooter}__click`,
+              {
+                currentSelectData: { ...activeItem, isChecked: false },
+                currentSelectFunction: [],
+                zIndex: ++this.zIndex
+              }
+          );
+
+          // 特殊处理：大喇叭关闭事件
+          if (activeItem.id === 5) {
+            this.$globalEventBus.$emit(
+                `${eventPath.commonCompHornTree}__change-device-tree-pop-ups-status`,
+                { isShow: false }
+            );
+          }
+        });
+
+        // 再激活当前功能
+        this.currentSelectFunction = [data];
       }
-      // 设置options的zIndex属性为当前zIndex加1
-      options.zIndex = this.zIndex = this.zIndex + 1
-      // 创建一个currentSelectData对象，包含data的属性以及isChecked属性
-      const currentSelectData = Object.assign({}, data, {
-        isChecked: this.currentSelectFunction.some(
-          (secItem) => secItem.id == data.id
-        )
-      })
-      // 将currentSelectData添加到options的currentSelectData属性中
-      options.currentSelectData = currentSelectData
-      // 将currentSelectFunction的副本添加到options的currentSelectFunction属性中
-      options.currentSelectFunction = JSON.parse(
-        JSON.stringify(this.currentSelectFunction)
-      )
-      console.log(options, 'options')
-      let footerOpenArr = options.currentSelectFunction.map((item) => item.id)
-      window.footerOpenOptions = footerOpenArr
-      console.log(window.footerOpenOptions, 'window.footerOpenOptions')
-      // 触发一个全局事件，options用于在tree组件中显示和隐藏
-      // emit 数据，options 用于 tree组件显示和隐藏
+
+      // 触发当前功能状态变化事件
+      const currentSelectData = {
+        ...data,
+        isChecked: !isCurrentlyActive
+      };
+
       this.$globalEventBus.$emit(
-        `${eventPath.commonCompFooter}__click`,
-        options
-      )
-      // 如果data有clickFn属性，则执行clickFn函数
+          `${eventPath.commonCompFooter}__click`,
+          {
+            currentSelectData,
+            currentSelectFunction: JSON.parse(JSON.stringify(this.currentSelectFunction)),
+            zIndex: ++this.zIndex
+          }
+      );
+
+      // 如果功能有点击回调，执行
       if (data.clickFn) {
-        let findOne = options.currentSelectFunction.find(
-          (item_) => item_.id == data.id
-        )
-        data.clickFn(findOne ? true : false)
+        data.clickFn(!isCurrentlyActive);
       }
+
+      // 更新全局变量
+      window.footerOpenOptions = this.currentSelectFunction.map(item => item.id);
     },
     // 工具箱设置菜单配置
     settingHandler(val) {
@@ -577,7 +575,7 @@ export default {
       })
       closeIds.forEach((closeItem) => {
         let findex = this.currentSelectFunction.findIndex(
-          (item) => item.id == closeItem.id
+            (item) => item.id == closeItem.id
         )
         if (findex > -1) {
           this.handleCloseIconClick(closeItem.id)
@@ -592,7 +590,7 @@ export default {
       const labelList = tempJSON.map((item) => item.id)
       // 过滤出functionList中不在labelList中的元素
       const list = this.functionList.filter(
-        (item) => !labelList.includes(item.id)
+          (item) => !labelList.includes(item.id)
       )
       // 遍历arr，将functionList中匹配的元素找到后，将原arr中的checked属性赋值给找到的元素的checked属性
       let _arr = arr.map((item) => {
@@ -635,13 +633,13 @@ export default {
       options.currentSelectData = currentSelectData
       // 深拷贝当前选中函数
       options.currentSelectFunction = JSON.parse(
-        JSON.stringify(this.currentSelectFunction)
+          JSON.stringify(this.currentSelectFunction)
       )
       // 触发全局事件总线上的事件，将 options 传递给 tree 组件显示和隐藏
       // emit 数据，options 用于 tree组件显示和隐藏
       this.$globalEventBus.$emit(
-        `${eventPath.commonCompFooter}__click`,
-        options
+          `${eventPath.commonCompFooter}__click`,
+          options
       )
     },
     resetCopyFunctionList() {
@@ -653,7 +651,7 @@ export default {
         this.defaultKeys.forEach((item) => {
           if (item.id) {
             // 如果item有id属性，则将item对象添加到functionList中，并修改name属性为item.label
-            this.functionList.push({ ...item, name: item.label })
+            this.functionList.push({...item, name: item.label})
           } else {
             let findOne = this.functionList.find((item_) => item_.id == item)
             // 如果item没有id属性，则在functionList中找到与item相等的id属性对应的对象，并将该对象的checked属性设为true
@@ -688,7 +686,7 @@ export default {
       if (payload.visible) {
         // 如果现在current 有这个值，不做处理，没有值，添加
         let itemIndex = this.currentSelectFunction.findIndex(
-          (item) => item.id == payload.type
+            (item) => item.id == payload.type
         )
         if (itemIndex >= 0) {
           // 如果当前选中的功能已经存在，则不执行任何操作
@@ -705,15 +703,15 @@ export default {
     toOpenConfig() {
       // 使用全局事件总线触发一个带有特定前缀的事件
       this.$globalEventBus.$emit(
-        `${eventPath.commonCompToolConfigItem}__operate`,
-        { status: true }
+          `${eventPath.commonCompToolConfigItem}__operate`,
+          {status: true}
       )
     },
     getNextPage() {
       // 如果当前页加上9等于已选中的功能项数量
       if (
-        this.currentPage + 9 ===
-        this.functionList.filter((item) => item.checked).length
+          this.currentPage + 9 ===
+          this.functionList.filter((item) => item.checked).length
       ) {
         return
       }
@@ -722,16 +720,16 @@ export default {
 
       // 滚动功能项列表
       this.scollFunctionList =
-        // 如果功能项列表长度大于9
-        this.functionList.length > 9
-          ? [
-              ...this.functionList
-                // 取出已选中的功能项
-                .filter((item) => item.checked)
-                // 切片取出当前页和下一页的功能项
-                .slice(this.currentPage, this.currentPage + 9)
-            ]
-          : this.functionList.filter((item) => item.checked)
+          // 如果功能项列表长度大于9
+          this.functionList.length > 9
+              ? [
+                ...this.functionList
+                    // 取出已选中的功能项
+                    .filter((item) => item.checked)
+                    // 切片取出当前页和下一页的功能项
+                    .slice(this.currentPage, this.currentPage + 9)
+              ]
+              : this.functionList.filter((item) => item.checked)
     },
     getPrevPage() {
       if (this.currentPage === 0) {
@@ -741,15 +739,15 @@ export default {
       this.currentPage--
       // 判断是否需要滚动函数列表
       this.scollFunctionList =
-        this.functionList.filter((item) => item.checked).length > 9
-          ? [
-              ...this.functionList
-                // 获取当前页码对应的数据
-                .filter((item) => item.checked)
-                // 获取当前页码和下一页码对应的数据
-                .slice(this.currentPage, this.currentPage + 9)
-            ]
-          : this.functionList.filter((item) => item.checked)
+          this.functionList.filter((item) => item.checked).length > 9
+              ? [
+                ...this.functionList
+                    // 获取当前页码对应的数据
+                    .filter((item) => item.checked)
+                    // 获取当前页码和下一页码对应的数据
+                    .slice(this.currentPage, this.currentPage + 9)
+              ]
+              : this.functionList.filter((item) => item.checked)
     },
     getThemeKey() {
       this.$nextTick(() => {
@@ -759,111 +757,111 @@ export default {
     initEvent() {
       // 监听全局事件，当接收到指定事件时触发回调函数
       this.$globalEventBus.$on(
-        `${eventPath.commonCompMap}__init-map-resolve`,
-        (payload) => {
-          // 判断payload中的status是否为true
-          if (payload.status) {
-            // 判断payload中的isCloseTree是否为true
-            if (payload.isCloseTree) {
-              // 清空currentSelectFunction数组
-              this.currentSelectFunction = []
-              // 触发全局事件，向指定组件发送消息
-              this.$globalEventBus.$emit(
-                `${eventPath.commonCompFooter}__to-close-area`,
-                {
-                  // 将currentSelectFunction数组转换为字符串，并解析为对象
-                  currentSelectFunction: JSON.parse(
-                    JSON.stringify(this.currentSelectFunction)
-                  )
-                }
-              )
+          `${eventPath.commonCompMap}__init-map-resolve`,
+          (payload) => {
+            // 判断payload中的status是否为true
+            if (payload.status) {
+              // 判断payload中的isCloseTree是否为true
+              if (payload.isCloseTree) {
+                // 清空currentSelectFunction数组
+                this.currentSelectFunction = []
+                // 触发全局事件，向指定组件发送消息
+                this.$globalEventBus.$emit(
+                    `${eventPath.commonCompFooter}__to-close-area`,
+                    {
+                      // 将currentSelectFunction数组转换为字符串，并解析为对象
+                      currentSelectFunction: JSON.parse(
+                          JSON.stringify(this.currentSelectFunction)
+                      )
+                    }
+                )
+              }
             }
           }
-        }
       )
 
       // 监听全局事件，当接收到指定事件时触发回调函数
       this.$globalEventBus.$on(
-        `${eventPath.commonCompHornTree}__select-footer-menu`,
-        this.selectFooterMenu
+          `${eventPath.commonCompHornTree}__select-footer-menu`,
+          this.selectFooterMenu
       )
 
       // 监听全局事件，当接收到指定事件时触发回调函数功 工具箱配置变化
       this.$globalEventBus.$on(
-        `${eventPath.commonCompToolConfigItem}__menu-config-change`,
-        this.settingHandler
+          `${eventPath.commonCompToolConfigItem}__menu-config-change`,
+          this.settingHandler
       )
 
       // 监听全局事件，当接收到指定事件时触发回调函数
       this.$globalEventBus.$on(
-        `${eventPath.commonCompFooter}__pop-up-close`,
-        (value) => {
-          console.log(value, '触发关闭')
-          // 在currentSelectFunction数组中查找指定元素
-          const index = this.currentSelectFunction.findIndex(
-            (item) => item.id == value.id
-          )
-          // 如果未找到指定元素，则直接返回
-          if (index === -1) {
-            return
-          }
-          // 将指定元素从数组中移除，并获取被移除的元素
-          const data = this.currentSelectFunction.splice(index, 1)[0]
-          // 如果被移除的元素不存在，则直接返回
-          if (!data) {
-            return
+          `${eventPath.commonCompFooter}__pop-up-close`,
+          (value) => {
+            console.log(value, '触发关闭')
+            // 在currentSelectFunction数组中查找指定元素
+            const index = this.currentSelectFunction.findIndex(
+                (item) => item.id == value.id
+            )
+            // 如果未找到指定元素，则直接返回
+            if (index === -1) {
+              return
+            }
+            // 将指定元素从数组中移除，并获取被移除的元素
+            const data = this.currentSelectFunction.splice(index, 1)[0]
+            // 如果被移除的元素不存在，则直接返回
+            if (!data) {
+              return
+            }
+            // 将被移除的元素的isChecked属性设置为false
+            data.isChecked = false
+            const options = {}
+            // 将zIndex属性设置为当前zIndex属性的值加1
+            options.zIndex = this.zIndex = this.zIndex + 1
+            // 将当前被选中元素赋值给currentSelectData
+            const currentSelectData = data
+            // 将currentSelectData赋值给options的currentSelectData属性
+            options.currentSelectData = currentSelectData
+            // 将currentSelectFunction数组转换为字符串，并解析为对象，赋值给options的currentSelectFunction属性
+            options.currentSelectFunction = JSON.parse(
+                JSON.stringify(this.currentSelectFunction)
+            )
+            console.log('关闭后的options', options)
+            // 触发全局事件，向指定组件发送消息
+            // emit 数据，options 用于 tree组件显示和隐藏
+            this.$globalEventBus.$emit(
+                `${eventPath.commonCompFooter}__click`,
+                options
+            )
           }
-          // 将被移除的元素的isChecked属性设置为false
-          data.isChecked = false
-          const options = {}
-          // 将zIndex属性设置为当前zIndex属性的值加1
-          options.zIndex = this.zIndex = this.zIndex + 1
-          // 将当前被选中元素赋值给currentSelectData
-          const currentSelectData = data
-          // 将currentSelectData赋值给options的currentSelectData属性
-          options.currentSelectData = currentSelectData
-          // 将currentSelectFunction数组转换为字符串，并解析为对象，赋值给options的currentSelectFunction属性
-          options.currentSelectFunction = JSON.parse(
-            JSON.stringify(this.currentSelectFunction)
-          )
-          console.log('关闭后的options', options)
-          // 触发全局事件，向指定组件发送消息
-          // emit 数据，options 用于 tree组件显示和隐藏
-          this.$globalEventBus.$emit(
-            `${eventPath.commonCompFooter}__click`,
-            options
-          )
-        }
       )
       // 整体底部功能区开关
       this.$globalEventBus.$on(
-        `${eventPath.commonCompFooter}__change-footer-status`,
-        (value) => {
-          if (!value.status) {
-            this.toCloseArea()
-          } else {
-            this.toOpenArae()
+          `${eventPath.commonCompFooter}__change-footer-status`,
+          (value) => {
+            if (!value.status) {
+              this.toCloseArea()
+            } else {
+              this.toOpenArae()
+            }
           }
-        }
       )
       this.$globalEventBus.$on('data-theme', this.getThemeKey)
       // 监听外部打开某个菜单
       this.$globalEventBus.$on(
-        `${eventPath.commonCompFooter}__click-menu`,
-        (menu) => {
-          // 判断传入的目的，如果是需要打开或者是需要关闭的情况下模拟点击，否则不予处理
-          const needChecked =
-            menu.checked &&
-            !this.currentSelectFunction.find((item) => item.id === menu.id)
-          const needCancel =
-            !menu.checked &&
-            this.currentSelectFunction.find((item) => item.id === menu.id)
-          if (needChecked || needCancel) {
-            this.selectFunction(
-              this.functionList.find((item) => item.id === menu.id)
-            )
+          `${eventPath.commonCompFooter}__click-menu`,
+          (menu) => {
+            // 判断传入的目的，如果是需要打开或者是需要关闭的情况下模拟点击，否则不予处理
+            const needChecked =
+                menu.checked &&
+                !this.currentSelectFunction.find((item) => item.id === menu.id)
+            const needCancel =
+                !menu.checked &&
+                this.currentSelectFunction.find((item) => item.id === menu.id)
+            if (needChecked || needCancel) {
+              this.selectFunction(
+                  this.functionList.find((item) => item.id === menu.id)
+              )
+            }
           }
-        }
       )
     }
   },
@@ -877,12 +875,12 @@ export default {
     // 初始化事件
     this.initEvent()
     this.scollFunctionList =
-      // 如果功能列表长度大于9
-      this.functionList.length > 9
-        ? // 则取前9个元素
-          [...this.functionList.slice(0, 9)]
-        : // 否则取全部元素
-          this.functionList
+        // 如果功能列表长度大于9
+        this.functionList.length > 9
+            ? // 则取前9个元素
+            [...this.functionList.slice(0, 9)]
+            : // 否则取全部元素
+            this.functionList
   },
   beforeDestroy() {
     window.footerOpenOptions = null
@@ -891,8 +889,8 @@ export default {
 
     // 取消订阅以 `${eventPath.commonCompToolConfigItem}__menu-config-change` 命名的全局事件，并传递给该事件的处理函数为 this.settingHandler
     this.$globalEventBus.$off(
-      `${eventPath.commonCompToolConfigItem}__menu-config-change`,
-      this.settingHandler
+        `${eventPath.commonCompToolConfigItem}__menu-config-change`,
+        this.settingHandler
     )
   }
 }