devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

el-menu el-collapse 左右滚动联动，左右展开项联动_el-menu collapse

作者：神奇cpp | 2024-08-12 22:54:35

赞

踩

el-menu collapse

需求：

  1. 左侧menu每次只保持一个子菜单的展开，右侧每次只能展开一个面板（手风琴效果）
  2. 滚动左侧的 menu 菜单，右侧的折叠面板（collapse）会跟随滚动到对应区域
  3. 滚动右侧的折叠面板，左侧的menu 菜单会跟随滚动到对应区域
  4. 展开左侧的menu 菜单，右侧的折叠面板对应的面板展开，滚动到顶部
  5. 点击左侧的 menu 子项item，右侧折叠面板中的二级菜单滚动到顶部
  6. 点击展开右侧的折叠面板，左侧对应的菜单项展开

遇到的问题：

  1. 左侧menu 的数据获取是一个接口，右侧菜单的子项是根据左侧的一级菜单id获取，每次展开左侧右侧需要去异步获取数据填充到面板中，展开的时候数据没有填充完滚动条还未撑起来滚动位置会出错
  2. 左右侧滚动联动的时候，左侧滚动去滚动右侧，右侧滚动去设置左侧滚动，当左右两侧都设置了对方跟随自己滚动的时候，滚动时会出现卡顿，他们会互相循环调用

解决问题：

  1. 动态计算前面有多少个兄弟节点，每个节点是固定高度，设置计算后的值
  2. 设置一个拦截标识，左侧滚动的时候禁止右侧去触发左侧的滚动；右侧滚动的时候禁止左侧去触发右侧的滚动

效果：

代码实现：

menu 组件：

  1. <template>
  2.   <div class="menuList">
  3.     <div class="search-box">
  4.       <el-autocomplete
  5.         class="search-input"
  6.         v-model="keyword"
  7.         size="small"
  8.         :clearable="true"
  9.         placeholder="请输入关键字"
  10.         :trigger-on-focus="false"
  11.         :fetch-suggestions="querySeachSync"
  12.         @select="handleSelect" />
  13.       <div @click="seachData" class="bth-search el-icon-search"></div>
  14.     </div>
  15.     <el-menu
  16.       id="label-mid-el-menu"
  17.       :default-active="curMenuId[1]"
  18.       @select="handleSelectMenu"
  19.       @open="handleOpenMenu"
  20.       :unique-opened="true">
  21.       <nav-item v-for="nav in navList"
  22.         :key="nav.classificationId"
  23.         :ref="'menu_' + nav.classificationId"
  24.         :nav="nav"
  25.         @clickNav="hanleClickNavItem" />
  26.     </el-menu>
  27.   </div>
  28. </template>
  29.  
  30. <script>
  31. import NavItem from './NavItem.vue'
  32. import { keywordLabels } from '@/api/modules/labelMiddleware.js'
  33. export default {
  34.   props: {
  35.     navList: {
  36.       type: Array,
  37.       default: () => []
  38.     },
  39.     curMenuId: {
  40.       type: Array
  41.     }
  42.   },
  43.   watch: {
  44.     curMenuId(arr) {
  45.       // 折叠面板展开时展开对应的menu
  46.       this.scrollToTarget(arr[0])
  47.     }
  48.   },
  49.   components: {
  50.     NavItem
  51.   },
  52.   data() {
  53.     return {
  54.       keyword: '',
  55.       isScroll: false,
  56.       // 定时器
  57.       scrollTimer: null
  58.     }
  59.   },
  60.   methods: {
  61.     // 展开右侧折叠面板的时候当前menu滚动到顶部
  62.     scrollToTarget(classificationId) {
  63.       // 设置当前为左侧滚动标识，不触发右侧滚动
  64.       window.rightScroll = true
  65.       window.clearTimeout(this.scrollTimer)
  66.       this.scrollTimer = setTimeout(_ => {
  67.         // 放开标识
  68.         window.rightScroll = false
  69.       }, 800)
  70.  
  71.       // 找到目标元素
  72.       const id = classificationId
  73.       let el = this.$refs['menu_' + id][0]
  74.       el = el.$el ? el.$el : el
  75.  
  76.       // 通过计算前面有多少元素来手动计算scrollTop高度
  77.       const scrollBox = document.querySelector('#label-mid-el-menu')
  78.       const children = Array.from(el.parentNode.children)
  79.       const prevSiblings = []
  80.       for (const child of children) {
  81.         if (child === el) {
  82.           break
  83.         }
  84.         prevSiblings.push(child)
  85.       }
  86.       const top = prevSiblings.length * 44
  87.       this.$nextTick(_ => {
  88.         scrollBox.scrollTo({
  89.           top: top,
  90.           behavior: 'smooth'
  91.         })
  92.       })
  93.     },
  94.     // 模糊搜索
  95.     async seachData() {
  96.       const { data } = await keywordLabels({
  97.         keyword: this.keyword
  98.       })
  99.       return data
  100.     },
  101.     // 搜索出来选择
  102.     handleSelect(label) {
  103.       this.$emit('setCurIdArea', label.firstClassificationId)
  104.     },
  105.     // 键入关键字搜索
  106.     async querySeachSync(keyworld, callback) {
  107.       const data = await this.seachData()
  108.       const res = data.map(item => {
  109.         return {
  110.           ...item,
  111.           value: item.labelName
  112.         }
  113.       })
  114.       callback(res)
  115.     },
  116.     // 设置菜单默认选中项为第一个
  117.     setDefaultActive(list) {
  118.       while (true) {
  119.         if (Array.isArray(list)) {
  120.           list = list[0]
  121.           continue
  122.         }
  123.         if (list.childList && list.childList.length > 0) {
  124.           list = list.childList
  125.           continue
  126.         }
  127.         break
  128.       }
  129.       this.defaultActive = list.classificationId
  130.     },
  131.     // 点击item
  132.     hanleClickNavItem(key) {
  133.     },
  134.     // 展开某个菜单列表
  135.     handleOpenMenu(key, keyPath) {
  136.       // console.log(key, keyPath, 'openMenu');
  137.       this.$emit('setCurIdArea', keyPath, 'menu')
  138.     },
  139.     // 选择菜单列表菜单
  140.     handleSelectMenu(key, keyPath) {
  141.       // console.log(typeof key, keyPath, 'itemMenu')
  142.       if (keyPath.length === 1) {
  143.         // 菜单没有子项，触发menu
  144.         this.$emit('setCurIdArea', keyPath, 'menu')
  145.       } else {
  146.         this.$emit('setCurIdArea', keyPath, 'item')
  147.       }
  148.     },
  149.     // 右侧滚动的时候左侧滚动到目标位置
  150.     menuScroll() {
  151.       // 右侧如果正在滚动不触发左侧滚动
  152.       if (window.rightScroll === true) {
  153.         return
  154.       }
  155.       // 设置左侧正在滚动的标识，此时不触发右侧滚动
  156.       window.leftScroll = true
  157.       window.clearTimeout(this.scrollTimer)
  158.       this.scrollTimer = setTimeout(_ => {
  159.         // 左侧滚动结束，放开标识，此时才能触发右侧的滚动
  160.         window.leftScroll = false
  161.       }, 600)
  162.       // 左侧滚动的menu
  163.       const menuEl = document.querySelector('#label-mid-el-menu')
  164.       // menu的滚动高度
  165.       const scrollMenu = menuEl.scrollHeight - menuEl.offsetHeight
  166.       // 右侧的折叠面板
  167.       const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
  168.       // 折叠面板的滚动高度
  169.       const labelScroll = labelContent.scrollHeight - labelContent.offsetHeight
  170.       // 计算滚动比率
  171.       const ratio = scrollMenu / labelScroll
  172.       labelContent.scrollTo({
  173.         top: menuEl.scrollTop / ratio
  174.       })
  175.     }
  176.   },
  177.   mounted() {
  178.     this.setDefaultActive(this.navList)
  179.     const menuEl = document.querySelector('#label-mid-el-menu')
  180.     menuEl.addEventListener('scroll', this.menuScroll)
  181.   },
  182.   beforeDestroy() {
  183.     const menuEl = document.querySelector('#label-mid-el-menu')
  184.     menuEl.removeEventListener('scroll', this.menuScroll)
  185.   }
  186. }
  187. </script>
  188.  
  189. <style lang="scss" scoped>
  190. .menuList {
  191.   height: 100%;
  192.   display: flex;
  193.   flex-direction: column;
  194.   padding-top: 16px;
  195.   border-right: solid 1px #e6e6e6;
  196.  
  197.   .search-box {
  198.     display: flex;
  199.     align-items: center;
  200.     width: 208px;
  201.     height: 32px;
  202.     background: #FFFFFF;
  203.     border-radius: 2px;
  204.     margin-left: 16px;
  205.     margin-bottom: 16px;
  206.  
  207.     .search-input {
  208.       flex: 1;
  209.       margin-right: -2px;
  210.       /deep/ .el-input__inner {
  211.         height: 32px;
  212.         line-height: 32px;
  213.         border-right: none;
  214.       }
  215.     }
  216.     .bth-search {
  217.       flex: 0 0 auto;
  218.       width: 32px;
  219.       height: 32px;
  220.       background: #E02D39;
  221.       color: #fff;
  222.       display: flex;
  223.       align-items: center;
  224.       justify-content: center;
  225.       position: relative;
  226.       z-index: 2;
  227.       cursor: pointer;
  228.     }
  229.   }
  230.   .el-menu {
  231.     flex: 1;
  232.     overflow: auto;
  233.     border-right: none;
  234.  
  235.     /deep/ {
  236.       .is-active:not(.el-submenu) {
  237.         color: #e02d39;
  238.         position: relative;
  239.         background: #F9F9FA;
  240.         font-weight: bold;
  241.         &::after {
  242.           content: "";
  243.           position: absolute;
  244.           left: 0;
  245.           top: 0;
  246.           width: 2px;
  247.           height: 100%;
  248.           background: #e02d39;
  249.         }
  250.       }
  251.     }
  252.   }
  253. }
  254. </style>

menu 里面的 item 组件：

  1. <template>
  2.   <el-submenu
  3.     :key="nav.classificationId"
  4.     v-if="nav.childList && nav.childList.length>0"
  5.     :index="String(nav.classificationId)">
  6.     <template slot="title">
  7.       <span>{{nav.classificationName}}</span>
  8.     </template>
  9.     <nav-item
  10.       v-for="item in nav.childList"
  11.       :key="item.classificationId"
  12.       :nav="item"
  13.       v-on="$listeners" />
  14.   </el-submenu>
  15.   <el-menu-item
  16.     v-else
  17.     :key="nav.classificationId"
  18.     :index="String(nav.classificationId)"
  19.     @click="$emit('clickNav', nav.classificationId)">
  20.     <span slot="title">{{nav.classificationName}}</span>
  21.   </el-menu-item>
  22. </template>
  23.  
  24. <script>
  25. export default {
  26.   name: 'NavItem',
  27.   props: {
  28.     nav: {
  29.       type: Object,
  30.       default: () => {}
  31.     }
  32.   }
  33. }
  34. </script>
  35.  
  36. <style lang="scss" scoped>
  37.   .el-submenu {
  38.     /deep/ {
  39.       .el-menu-item,
  40.       .el-submenu__title  {
  41.         height: 44px;
  42.         line-height: 44px;
  43.       }
  44.       // .el-submenu__title {
  45.       //   padding-right: 32px !important;
  46.       // }
  47.       // .el-submenu .el-menu-item {
  48.       //   padding: 0 32px;
  49.       // }
  50.       .is-active:not(.el-submenu) {
  51.         color: #e02d39;
  52.         position: relative;
  53.         background: #F9F9FA;
  54.         font-weight: bold;
  55.         &::after {
  56.           content: "";
  57.           position: absolute;
  58.           left: 0;
  59.           top: 0;
  60.           width: 2px;
  61.           height: 100%;
  62.           background: #e02d39;
  63.         }
  64.       }
  65.     }
  66.   }
  67.   /*菜单关闭*/
  68.   .el-submenu /deep/ .el-submenu__title .el-submenu__icon-arrow{
  69.     -webkit-transform: rotateZ(-90deg);
  70.     -ms-transform: rotate(-90deg);
  71.     transform: rotateZ(-90deg);
  72.   }
  73.   /*菜单展开*/
  74.   .el-submenu.is-opened /deep/ .el-submenu__title .el-submenu__icon-arrow{
  75.     -webkit-transform: rotateZ(0deg);
  76.     -ms-transform: rotate(0deg);
  77.     transform: rotateZ(0deg);
  78.   }
  79. </style>

右侧的 collapse LabelList 组件：

  1. <template>
  2.   <div class="label-middleware-list-wrapper"
  3.     v-loading="loading"
  4.     element-loading-text="加载中请稍后..."
  5.     element-loading-background="rgba(255, 255, 255, .8)">
  6.     <div class="content">
  7.       <el-collapse
  8.         accordion
  9.         v-model="activeItem"
  10.         @change="handleChangeCollapse">
  11.         <el-collapse-item
  12.           v-for="nav in labelList"
  13.           :ref="'collapse_'+nav.classificationId"
  14.           :key="nav.classificationId"
  15.           :title="nav.classificationName"
  16.           :name="nav.classificationId"
  17.           >
  18.           <div class="sub-box"
  19.             v-for="subs in nav.children"
  20.             :key="subs.classificationId"
  21.             :ref="'collapse_sub_'+subs.classificationId">
  22.             <div class="sub-title">{{subs.classificationName}}</div>
  23.             <popover-label
  24.               :labelList="subs.labList"
  25.               :selectedLabels="selectedLabels"
  26.               :popoverVisible="popoverVisible"
  27.               @addLabels="addLabels"
  28.               @closePopover="closePopover"
  29.               @showPopover="showPopover" />
  30.           </div>
  31.         </el-collapse-item>
  32.       </el-collapse>
  33.     </div>
  34.   </div>
  35. </template>
  36.  
  37. <script>
  38. import { queryLabels } from '@/api/modules/labelMiddleware.js'
  39. import PopoverLabel from './PopoverLabel.vue'
  40.  
  41. export default {
  42.   components: {
  43.     PopoverLabel
  44.   },
  45.   props: {
  46.     navList: {
  47.       type: Array,
  48.       default: () => []
  49.     },
  50.     selectedLabels: {
  51.       type: Array,
  52.       default: () => []
  53.     },
  54.     curIdArea: {
  55.       type: Array,
  56.       defaut: () => []
  57.     },
  58.     curAreaType: {
  59.       type: String
  60.     }
  61.   },
  62.   data() {
  63.     return {
  64.       loading: false,
  65.       activeItem: 'org',
  66.       labelList: [],
  67.       childLabels: [],
  68.       popoverVisible: {},
  69.       // 定时器
  70.       scrollTimer: null
  71.     }
  72.   },
  73.   watch: {
  74.     // 展开当前区域
  75.     async curIdArea(keyPath) {
  76.       const classificationId = keyPath[0]
  77.       this.activeItem = isNaN(classificationId) ? classificationId : Number(classificationId)
  78.       // 如果左侧是展开的菜单
  79.       if (this.curAreaType === 'menu') {
  80.         await this.openCollapse(classificationId)
  81.         this.scrollToTarget()
  82.       }
  83.       // 如果左侧是点击的item
  84.       if (this.curAreaType === 'item') {
  85.         const curItemId = keyPath[keyPath.length - 1]
  86.         this.scrollToItem(curItemId)
  87.       }
  88.     }
  89.   },
  90.   methods: {
  91.     // 滚动到目标位置, 点击navItem时
  92.     scrollToItem(navId) {
  93.       // 设置当前为左侧滚动标识，不触发右侧滚动
  94.       window.leftScroll = true
  95.       window.clearTimeout(this.scrollTimer)
  96.       this.scrollTimer = setTimeout(_ => {
  97.         // 放开标识
  98.         window.leftScroll = false
  99.       }, 800)
  100.       let el = this.$refs['collapse_sub_' + navId][0]
  101.       el = el.$el ? el.$el : el
  102.       const scrollBox = document.querySelector('.label-middleware-list-wrapper .content')
  103.       this.$nextTick(_ => {
  104.         scrollBox.scrollTo({
  105.           top: el.offsetTop - 8,
  106.           behavior: 'smooth'
  107.         })
  108.       })
  109.     },
  110.     // 滚动到目标位置, 展开menu时
  111.     scrollToTarget(classificationId) {
  112.       // 设置当前为右侧滚动标识，不触发左侧滚动
  113.       window.leftScroll = true
  114.       window.clearTimeout(this.scrollTimer)
  115.       this.scrollTimer = setTimeout(_ => {
  116.         // 放开标识
  117.         window.leftScroll = false
  118.       }, 800)
  119.  
  120.       // 找到目标元素
  121.       const id = classificationId ?? this.curIdArea
  122.       let el = this.$refs['collapse_' + id][0]
  123.       el = el.$el ? el.$el : el
  124.       while (el) {
  125.         if (!el.classList.contains('el-collapse-item')) {
  126.           el = el.parentNode
  127.         } else {
  128.           break
  129.         }
  130.       }
  131.  
  132.       // 通过计算前面有多少元素来手动计算scrollTop高度
  133.       const scrollBox = document.querySelector('.label-middleware-list-wrapper .content')
  134.       const children = Array.from(el.parentNode.children)
  135.       const prevSiblings = []
  136.       for (const child of children) {
  137.         if (child === el) {
  138.           break
  139.         }
  140.         prevSiblings.push(child)
  141.       }
  142.       const top = prevSiblings.length * 48
  143.       this.$nextTick(_ => {
  144.         scrollBox.scrollTo({
  145.           top: top,
  146.           behavior: 'smooth'
  147.         })
  148.       })
  149.     },
  150.     // 添加标签addLabels
  151.     addLabels(label) {
  152.       this.$emit('addLabels', label)
  153.     },
  154.     // 关闭popover
  155.     closePopover() {
  156.       for (let item in this.popoverVisible) {
  157.         this.popoverVisible[item] = false
  158.       }
  159.     },
  160.     // 展示特定的popover
  161.     showPopover(item) {
  162.       this.popoverVisible[item] = true
  163.     },
  164.     // 获取label列表
  165.     async getLabels() {
  166.       try {
  167.         this.loading = true
  168.         const { data } = await queryLabels({
  169.           classificationId: Array.isArray(this.activeItem) ? this.activeItem[this.activeItem.length - 1] : this.activeItem
  170.         })
  171.         this.childLabels = data
  172.         this.loading = false
  173.         const target = this.labelList.find(item => item.classificationId === this.activeItem)
  174.         // 设置数据结构
  175.         data.forEach(item => {
  176.           if (item.labList) {
  177.             item.labList.forEach(label => {
  178.               // 最终值
  179.               label.tagAttributes = []
  180.               label.curRanges = []
  181.               // 临时修改的值，点击确定后才赋值给最终的值
  182.               label.tempTagAttributes = []
  183.               label.tempCurRanges = []
  184.             })
  185.           }
  186.         })
  187.         if (target) {
  188.           this.$set(target, 'children', data)
  189.         }
  190.       } catch (err) {
  191.         console.log(err)
  192.       }
  193.     },
  194.     // 设置机构标签
  195.     async setOrgLabels(id) {
  196.       const target = this.labelList.find(() => id === this.activeItem)
  197.         const data = [{
  198.           classificationId: 'org',
  199.           classificationName: "组织机构",
  200.           labList: [
  201.             {
  202.               labelId: "org_label",
  203.               labelName: "中台机构",
  204.               labelPropType: "org_label",
  205.               labelPropList: [],
  206.               labelRuleDescription: "",
  207.               selected: false,
  208.               tagAttributes: [],
  209.               curRanges: [],
  210.               value: "",
  211.               orgLabel: ''
  212.             }
  213.           ],
  214.           selected: false
  215.         }]
  216.         if (target) {
  217.           this.$set(target, 'children', data)
  218.         }
  219.     },
  220.     // 折叠面板展开设置数据
  221.     async openCollapse(id) {
  222.       if (id) {
  223.         // 初始化手动添加的组织机构
  224.         if (id === 'org') {
  225.           await this.setOrgLabels('org')
  226.         } else {
  227.           // 获取当前详细labels
  228.           await this.getLabels()
  229.         }
  230.       }
  231.     },
  232.     // 展开关闭collapse
  233.     async handleChangeCollapse(id) {
  234.       if (id) {
  235.         await this.openCollapse(id)
  236.         // 当前展开项的第0或者第一个子元素，由于左侧没有本身子元素所以设为第一个
  237.         let classificationId = (this.childLabels[1]?.classificationId ?? this.childLabels[0]?.classificationId) || ''
  238.         // 组织机构是手动添加的数据单独处理
  239.         classificationId = id === 'org' ? 'org_label' : classificationId
  240.         this.$emit('changeCollapse', [String(id), String(classificationId) || String(id)])
  241.         // 先将右侧滚动到目标位置
  242.         this.scrollToTarget(id)
  243.         // 左侧滚动到目标位置
  244.         this.labelListScroll()
  245.       }
  246.     },
  247.     // 右侧滚动的时候左侧滚动到目标位置
  248.     labelListScroll() {
  249.       // 左侧如果正在滚动不触发右侧滚动
  250.       if (window.leftScroll === true) {
  251.         return
  252.       }
  253.       // 设置右侧正在滚动的标识，此时不触发左侧滚动
  254.       window.rightScroll = true
  255.       window.clearTimeout(this.scrollTimer)
  256.       this.scrollTimer = setTimeout(_ => {
  257.         // 右侧滚动结束，放开标识，此时才能触发左侧的滚动
  258.         window.rightScroll = false
  259.       }, 600)
  260.       // 左侧滚动的menu
  261.       const menuEl = document.querySelector('#label-mid-el-menu')
  262.       // menu的滚动高度
  263.       const scrollMenu = menuEl.scrollHeight - menuEl.offsetHeight
  264.       // 右侧的折叠面板
  265.       const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
  266.       // 折叠面板的滚动高度
  267.       const labelScroll = labelContent.scrollHeight - labelContent.offsetHeight
  268.       // 计算滚动比率
  269.       const ratio = scrollMenu / labelScroll
  270.       menuEl.scrollTo({
  271.         top: labelContent.scrollTop * ratio
  272.       })
  273.     }
  274.   },
  275.   mounted() {
  276.     const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
  277.     labelContent.addEventListener('scroll', this.labelListScroll)
  278.   },
  279.   beforeDestroy() {
  280.     const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
  281.     labelContent.removeEventListener('scroll', this.labelListScroll)
  282.   },
  283.   created() {
  284.     this.labelList = this.navList
  285.     this.openCollapse(this.activeItem)
  286.   }
  287. }
  288. </script>
  289.  
  290. <style lang="scss" scoped>
  291. .label-middleware-list-wrapper {
  292.   height: 100%;
  293.   .content {
  294.     height: 100%;
  295.     overflow: auto;
  296.   }
  297.   .el-collapse {
  298.     position: relative;
  299.   }
  300.   .el-collapse-item /deep/ .el-collapse-item__content {
  301.     border-top: 1px solid #EBEEF5;
  302.     padding-bottom: 0;
  303.   }
  304.   /deep/ .el-collapse-item__header{
  305.     font-size: 14px;
  306.     font-family: PingFangSC-Regular, PingFang SC;
  307.     font-weight: 500;
  308.     color: #262626;
  309.   }
  310.   .sub-box {
  311.     padding: 8px 16px 0 12px;
  312.     background: #FAFAFA;
  313.  
  314.     .sub-title {
  315.       height: 18px;
  316.       font-size: 13px;
  317.       font-family: PingFangSC-Regular, PingFang SC;
  318.       font-weight: 400;
  319.       color: #292B33;
  320.       line-height: 18px;
  321.       margin-bottom: 9px;
  322.     }
  323.     .label-box {
  324.       display: flex;
  325.  
  326.       /deep/ .label-item {
  327.         white-space: nowrap;
  328.         display: flex;
  329.         align-items: center;
  330.         height: 28px;
  331.         padding: 0 8px;
  332.         background: #F1F1F1;
  333.         border-radius: 3px;
  334.         font-size: 12px;
  335.         font-family: PingFangSC-Regular, PingFang SC;
  336.         font-weight: 400;
  337.         color: #595959;
  338.         margin-right: 8px;
  339.         margin-bottom: 8px;
  340.         cursor: pointer;
  341.       }
  342.     }
  343.   }
  344.  
  345. }
  346. </style>

 menu 和 右侧的 LbelList 组件的父组件：

  1. <template>
  2.   <el-dialog
  3.     class="dialog"
  4.     title="标签组合筛选"
  5.     width="80%"
  6.     :visible="visible"
  7.     :close-on-click-modal="false"
  8.     @close="handleClose"
  9.     >
  10.     <div class="body">
  11.       <div class="line"></div>
  12.       <div class="content">
  13.         <div class="left-nav">
  14.           <nav-list
  15.             :navList="navList"
  16.             :curMenuId.sync="curMenuId"
  17.             @setCurIdArea="setCurIdArea" />
  18.         </div>
  19.         <div class="label-collapse">
  20.           <label-list
  21.             :navList="navList"
  22.             :selectedLabels="selectedLabels"
  23.             :curIdArea="curIdArea"
  24.             :curAreaType="curAreaType"
  25.             @addLabels="addLabels"
  26.             @changeCollapse="changeCollapse" />
  27.         </div>
  28.       </div>
  29.       <div class="selected-label">
  30.         <div class="title">已选标签：</div>
  31.         <div class="selected-box labels-box">
  32.           <div class="label-item" v-for="(label, index) in selectedLabels" :key="label.labelId">
  33.             <div class="text">
  34.               <div>{{label.labelName}}：</div>
  35.               <div class="value-item"
  36.                 v-for="item in renderLabelInfo(label)"
  37.                 :key="item.showValue">{{item.showValue}}</div>
  38.             </div>
  39.             <div @click="deleteLabel(label, index)" class="delete-label el-icon-close"></div>
  40.           </div>
  41.         </div>
  42.       </div>
  43.     </div>
  44.     <div class="footer" slot="footer">
  45.       <div class="tip">共筛选出<span class="number">{{total}}</span>个</div>
  46.       <div class="buttons">
  47.         <button class="btn-reset" @click="handleClickClearAll">清空重选</button>
  48.         <button class="btn-confirm" @click="handleClickSubmit">确定</button>
  49.       </div>
  50.     </div>
  51.   </el-dialog>
  52. </template>
  53.  
  54. <script>
  55. import NavList from './NavList.vue'
  56. import LabelList from './LabelList.vue'
  57. import { getClassificationTree } from '@/api/modules/labelMiddleware.js'
  58. export default {
  59.   components: {
  60.     NavList,
  61.     LabelList
  62.   },
  63.   props: {
  64.     visible: {
  65.       type: Boolean,
  66.       default: false
  67.     },
  68.     selectedLabels: {
  69.       type: Array,
  70.       default: () => []
  71.     },
  72.     total: {
  73.       type: Number
  74.     },
  75.     renderLabelInfo: {
  76.       type: Function,
  77.       default: () => () => {}
  78.     }
  79.   },
  80.   data() {
  81.     return {
  82.       navList: [],
  83.       search: '',
  84.       curIdArea: [],
  85.       // 左侧选中的type，展开还是点击item
  86.       curAreaType: '',
  87.       curMenuId: ['org', 'org_label']
  88.     }
  89.   },
  90.   methods: {
  91.     // 添加label
  92.     addLabels(label) {
  93.       this.$emit('addLabels', label)
  94.     },
  95.     // 删除label
  96.     deleteLabel(label, index) {
  97.       this.$emit('deleteLabel', label, index)
  98.     },
  99.     // 左侧菜单当前展开项
  100.     setCurIdArea(keyPath, type) {
  101.       this.curIdArea = keyPath
  102.       this.curAreaType = type
  103.     },
  104.     // 获取navList，左侧的menu菜单数据，右侧的面板一级数据
  105.     async getNavList() {
  106.       const { data } = await getClassificationTree()
  107.       this.navList = data || []
  108.       this.navList.unshift({
  109.         classificationId: 'org',
  110.         classificationName: "组织机构",
  111.         childList: [
  112.           {
  113.             childList: null,
  114.             classificationId: 'org_label',
  115.             classificationName: "组织机构"
  116.           }
  117.         ]
  118.       })
  119.     },
  120.     // 点击清空重选
  121.     handleClickClearAll() {
  122.       this.$emit('resetSelectLabels')
  123.     },
  124.     // 点击确定
  125.     handleClickSubmit() {
  126.       this.$emit('getTableData')
  127.       this.handleClose()
  128.     },
  129.     // 关闭dialog
  130.     handleClose() {
  131.       this.$emit('closeDialog')
  132.     },
  133.     // 修改了折叠面板,设置当前展开想的父级和当前id
  134.     changeCollapse(idArr) {
  135.       this.curMenuId = idArr
  136.     }
  137.   },
  138.   mounted() {
  139.     this.getNavList()
  140.   }
  141. }
  142. </script>
  143.  
  144. <style lang="scss" scoped>
  145. .dialog {
  146.   /deep/ .el-dialog{
  147.     margin-top: 8vh !important;
  148.   }
  149.   /deep/ .el-dialog__body {
  150.     padding: 0;
  151.   }
  152.   .left-nav {
  153.     height: 100%;
  154.     width: 240px;
  155.   }
  156.   .content {
  157.     display: flex;
  158.     border: 1px solid rgba(0, 0, 0, 0.1);
  159.     border-right: none;
  160.     border-left: none;
  161.     margin-bottom: 8px;
  162.     height: 556px;
  163.     padding: 0;
  164.     padding-right: 16px;
  165.  
  166.     .label-collapse {
  167.       flex: 1;
  168.       overflow: auto;
  169.       /deep/ {
  170.         .el-collapse-item__header {
  171.           padding-left: 20px;
  172.         }
  173.       }
  174.     }
  175.  
  176.   }
  177.   .selected-label {
  178.     margin-bottom: 18px;
  179.     padding: 0 16px;
  180.     .title {
  181.       height: 20px;
  182.       font-size: 14px;
  183.       font-family: PingFangSC-Medium, PingFang SC;
  184.       font-weight: 500;
  185.       color: #262626;
  186.       line-height: 20px;
  187.       margin-bottom: 12px;
  188.     }
  189.     .labels-box {
  190.       display: flex;
  191.       min-height: 50px;
  192.       max-height: 76px;
  193.       overflow: auto;
  194.       flex: 1;
  195.       flex-wrap: wrap;
  196.  
  197.       .label-item {
  198.         display: flex;
  199.         align-items: center;
  200.         height: 28px;
  201.         background: rgba(224, 45, 57, 0.06);
  202.         border-radius: 3px;
  203.         padding: 4px 11px 4px 8px;
  204.         margin-right: 8px;
  205.         margin-bottom: 8px;
  206.         white-space: nowrap;
  207.  
  208.         .text {
  209.           display: flex;
  210.           align-items: center;
  211.           white-space: nowrap;
  212.           font-size: 14px;
  213.           font-family: PingFangSC-Regular, PingFang SC;
  214.           font-weight: 400;
  215.           color: #595959;
  216.           margin-right: 24px;
  217.           .value-item:not(:last-child){
  218.             margin-right: 8px;
  219.           }
  220.         }
  221.         .delete-label {
  222.           color: #8C8C8C;
  223.           cursor: pointer;
  224.           font-size: 16px;
  225.         }
  226.       }
  227.     }
  228.   }
  229.  
  230.   .footer {
  231.     display: flex;
  232.     justify-content: space-between;
  233.     align-items: center;
  234.  
  235.     .tip {
  236.       font-size: 12px;
  237.       font-family: PingFangSC-Regular, PingFang SC;
  238.       font-weight: 400;
  239.       color: #595959;
  240.       line-height: 17px;
  241.  
  242.       .number {
  243.         font-size: 12px;
  244.         font-family: PingFangSC-Regular, PingFang SC;
  245.         font-weight: 400;
  246.         color: #E02D39;
  247.         line-height: 17px;
  248.         padding: 0 4px;
  249.       }
  250.     }
  251.     .buttons {
  252.       display: flex;
  253.       align-items: center;
  254.       .btn-reset {
  255.         width: 72px;
  256.         height: 28px;
  257.         display: flex;
  258.         align-items: center;
  259.         justify-content: center;
  260.         border-radius: 3px;
  261.         border: 1px solid #E02D39;
  262.         font-size: 12px;
  263.         font-family: PingFangSC-Medium, PingFang SC;
  264.         font-weight: 500;
  265.         color: #E02D39;
  266.         margin-right: 8px;
  267.         cursor: pointer;
  268.       }
  269.       .btn-confirm {
  270.         height: 28px;
  271.         display: flex;
  272.         align-items: center;
  273.         justify-content: center;
  274.         width: 60px;
  275.         background: #E02D39;
  276.         border-radius: 3px;
  277.         font-size: 12px;
  278.         font-family: PingFangSC-Medium, PingFang SC;
  279.         font-weight: 500;
  280.         color: #FFFFFF;
  281.         cursor: pointer;
  282.       }
  283.     }
  284.   }
  285. }
  286. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/971978
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号