n20-common-lib 2.1.20 → 2.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.1.20",
+  "version": "2.1.22",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/cl-anchor.scss

@@ -4,13 +4,12 @@
   .el-scrollbar__bar.is-vertical {
     .el-scrollbar__thumb {
       display: none;
-
     }
   }
-
 }
 
 .n20-anchor {
+  padding-inline-start: 0;
   position: absolute;
   top: 16px;
   right: 0;
@@ -25,7 +24,6 @@
     margin: 2px 0;
     border-left: 2px solid var(--color-text-placeholder);
   }
-
   .n20-anchor-activit {
     color: var(--color-primary);
     border-left: 2px solid var(--color-primary);
@@ -38,17 +36,12 @@
   .el-scrollbar__bar.is-vertical {
     .el-scrollbar__thumb {
       display: none;
-
     }
   }
-
-}
-
-ul {
-  padding-inline-start: 0;
 }
 
 .n20-anchor-left {
+  padding-inline-start: 0;
   position: absolute;
   top: 16px;
   left: 0;
@@ -68,4 +61,4 @@ ul {
     color: var(--color-primary);
     border-left: 2px solid var(--color-primary);
   }
-}
+}

package/src/components/Anchor/AnchorItem.vue

@@ -1,37 +1,47 @@
 <template>
-  <ExpandablePane :id="id" :default-expand.sync="show" :title="title"><slot></slot></ExpandablePane>
+  <ExpandablePane :anchor-item-id="id" :default-expand.sync="show" :title="title"><slot></slot></ExpandablePane>
 </template>
 
 <script>
-import ExpandablePane from '../Expandable/main.vue'
+import ExpandablePane from '../../components/Expandable/main.vue'
 export default {
   name: 'AnchorItem',
   components: {
     ExpandablePane
   },
   props: {
-    title: {
-      type: String,
+    id: {
+      type: [String, Number],
       default: undefined
     },
-    id: {
+    title: {
       type: String,
-      default: ''
-    },
-    // eslint-disable-next-line vue/require-default-prop
-    sort: [String, Number]
+      default: undefined
+    }
+  },
+  inject: {
+    init: {
+      type: Function,
+      default: () => () => {}
+    }
   },
-  inject: ['init'],
   data() {
     return {
       show: true
     }
   },
+  watch: {
+    title(val) {
+      if (val) {
+        this.init('title', this.id, this.title)
+      }
+    }
+  },
   mounted() {
-    this.init()
+    this.init('mount', this.id, this.title)
   },
-  destroyed() {
-    this.init()
+  beforeDestroy() {
+    this.init('destroy', this.id, this.title)
   }
 }
 </script>

package/src/components/Anchor/index.vue

@@ -1,40 +1,31 @@
 <template>
-  <el-scrollbar :id="position === 'right' ? 'page-scrollbar' : 'page-scrollbar-left'" style="height: 100%">
-    <div v-if="position === 'right'" ref="Anchor">
+  <div class="flex-box" style="height: 100%">
+    <AnchorSidebar
+      v-if="position !== 'right'"
+      :nav-list="navList"
+      :activit="value"
+      :style="{ width: navWidth }"
+      @click="activitFn"
+    />
+    <div ref="anchor-content" class="flex-item" style="height: 100%; overflow: auto">
       <slot></slot>
-      <ul class="n20-anchor">
-        <li
-          v-for="(item, index) in AnchorNavList"
-          :key="index"
-          :class="['n20-anchor-item', value === item.id ? 'n20-anchor-activit' : '']"
-          @click="getAnchorItem(item.id, index)"
-        >
-          {{ item.title }}
-        </li>
-      </ul>
     </div>
-    <div v-else ref="Anchor">
-      <ul class="n20-anchor-left">
-        <li
-          v-for="(item, index) in AnchorNavList"
-          :key="index"
-          :class="['n20-anchor-item', value === item.id ? 'n20-anchor-activit' : '']"
-          @click="getAnchorItem(item.id, index)"
-        >
-          {{ item.title }}
-        </li>
-      </ul>
-      <slot></slot>
-    </div>
-  </el-scrollbar>
+    <AnchorSidebar v-if="position === 'right'" :nav-list="navList" :activit="value" @click="activitFn" />
+  </div>
 </template>
 
 <script>
-import { getScrollContainer, vueDebounce } from '../../utils/getScrollContainer.js'
+import { debounce } from 'throttle-debounce'
+import { addListener, removeListener } from 'resize-detector'
+
+import AnchorSidebar from './sidebar.vue'
 export default {
   name: 'Anchor',
+  components: {
+    AnchorSidebar
+  },
   props: {
-    scrollDom: {
+    value: {
       type: String,
       default: ''
     },
@@ -42,161 +33,171 @@ export default {
       type: String,
       default: 'right'
     },
-    // 默认选中tab按钮
-    value: {
+    navWidth: {
       type: String,
-      default: ''
-    }
-  },
-  provide() {
-    return {
-      init: this.init
+      default: '110px'
     }
   },
   data() {
     return {
-      AnchorNavList: [], // 按钮数据
-      AnchorNavMap: {}, // 楼层高度的映射
-      scrollDisabled: false, //禁止滚动函数执行
-      valueType: 1, //当前楼层改变的类型，1是组件传递、按钮直达改变，2是通过滚动监听自动改变
-      scrollFunDebounceFun: vueDebounce('scrollFun', 100)
-    }
-  },
-  computed: {
-    scrollWrap() {
-      if (this.scrollDom) {
-        return document.querySelector(this.scrollDom)
-      } else {
-        return getScrollContainer(this.$refs.Anchor, true)
-      }
+      navList: [],
+      wrapTop: 0,
+      wrapHeight: 48
     }
   },
   watch: {
-    // 监听楼层变化，当为父组件传递，或者按钮直达时，手动滚动到当前楼层
-    value: function (val) {
-      this.valueType === 1 && this.scrollDomFun(this.AnchorNavMap[val])
+    navList() {
+      this.navsWatch()
+    },
+    value() {
+      this.valueWatch()
     }
   },
-  async mounted() {
-    await this.init()
-    // 如果传了当前楼层，直接到达对应的高度
-    if (this.value) {
-      this.scrollWrap.scrollTop = this.AnchorNavMap[this.value]
-    } else {
-      //没有传楼层，则根据当前高度自动获取
-      this.getAnchorValue(this.scrollWrap.scrollTop)
+  provide() {
+    return {
+      init: this.itemWatch
     }
-    this.scrollWrap.addEventListener('scroll', this.scrollFunDebounce)
   },
-  beforeDestroy() {
-    this.scrollWrap.removeEventListener('scroll', this.scrollFunDebounce)
+  mounted() {
+    this.mdIng = true
+    let wrap = this.$refs['anchor-content']
+
+    wrap.addEventListener('scroll', this.scrollFn)
+    this.sizeFn()
+    addListener(wrap, debounce(30, this.sizeFn))
+
+    setTimeout(() => {
+      this.valueWatch()
+      this.mdIng = false
+    }, 100)
   },
   methods: {
-    init: vueDebounce('initAs', 500),
-    // 初始化，获取电梯按钮数据，获取楼层高度映射
-    initAs() {
-      let parentTop = this.$refs.Anchor.getBoundingClientRect().top - this.scrollWrap.getBoundingClientRect().top
-      let list = this.$children[0].$children.map((item) => {
-        let rect = item.$el.getBoundingClientRect()
-        let itemScrollTop = item.$el.offsetTop
-        this.AnchorNavMap[item.id] = itemScrollTop
-        // console.log(item, 123)
-        return {
-          scrollTop: itemScrollTop,
-          top: rect.top - parentTop,
-          bottom: rect.bottom - parentTop,
-          height: rect.height,
-          title: item.title,
-          id: item.id,
-          sort: item.sort
-        }
-      })
-      // 去掉多余的节点
-      this.AnchorNavList = list
-        .filter((val) => val.id !== undefined && val.title !== undefined)
-        .sort((a, b) => {
-          return a.sort - b.sort
-        })
-    },
-    //滚动的函数
-    scrollFun(e) {
-      this.getAnchorValue(e.target.scrollTop)
-    },
-    scrollFunDebounce(e) {
-      !this.scrollDisabled && this.scrollFunDebounceFun(e)
-    },
-    // 根据当前高度获取楼层位置
-    getAnchorValue(scrollTop) {
-      let arr = []
-      for (let i = 0; i < this.AnchorNavList.length; i++) {
-        let item = this.AnchorNavList[i]
-        let height = this.scrollWrap.getBoundingClientRect().height + scrollTop
-        let value = 0
-        if (scrollTop <= item.top) {
-          value = height - item.top
-          if (value > item.height) {
-            value = item.height
-          } else if (value < 0) {
-            value = 0
+    valueWatch() {
+      if (!this.scIng && !this.acIng) {
+        if (this.navList.length && (this.value || this.value === 0)) {
+          let item = this.navList.find((c) => c.id === this.value)
+          if (item) {
+            this.activitFn(item)
+          } else {
+            this.$emit('input', undefined)
           }
-        } else if (scrollTop > item.top && scrollTop <= item.bottom) {
-          value = item.bottom - scrollTop
         }
-        value = value / item.height
-        arr.push(value)
       }
-      let max = Math.max(...arr)
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i] === max) {
-          this.valueType = 2
-          this.$emit('input', this.AnchorNavList[i].id)
-          break
+    },
+    navsWatch() {
+      if (!this.mdIng) {
+        if (this.navList.length && (this.value || this.value === 0)) {
+          this.scrollFn()
         }
       }
     },
-    getAnchorItem(id, i) {
-      //直达楼层
-      if (id === this.value || this.scrollDisabled) {
-        return
+    itemWatch(type, id, title) {
+      if (type === 'mount') {
+        let item = this.navList.find((c) => c.id === id)
+        if (!item) {
+          item = { id: id, title: title, height: 48 }
+          this.navList.push(item)
+        } else {
+          item.title = title
+        }
+
+        let dom = this.$refs['anchor-content'].querySelector(`[anchor-item-id="${id}"]`)
+        if (dom) {
+          this.getHeight(item, dom)
+          addListener(dom, debounce(30, this.getHeight.bind(this, item)))
+        }
+
+        this.sortList()
+      } else if (type === 'destroy') {
+        let dom = this.$refs['anchor-content']?.querySelector(`[anchor-item-id="${id}"]`)
+        dom && removeListener(dom)
+
+        this.sortList()
+      } else if (type === 'title') {
+        let item = this.navList.find((c) => c.id === id)
+        if (item) {
+          item.title = title
+        }
       }
-      this.$children[0].$children[i].show = true
-      this.valueType = 1
-      this.$emit('input', id)
     },
-    // 模拟滚动
-    scrollDomFun(itemScrollTop) {
-      this.scrollDisabled = true //模拟滚动过程中，禁用直达楼层和监听的滚动事件
-      let speed = 50
-      let scrollTop = this.scrollWrap.scrollTop
-      if (itemScrollTop > scrollTop) {
-        // 向下滚动
-        let timer = setInterval(() => {
-          scrollTop += speed
-          if (scrollTop < itemScrollTop) {
-            this.scrollWrap.scrollTop = scrollTop
-          } else {
-            this.scrollWrap.scrollTop = itemScrollTop
-            clearInterval(timer)
-            setTimeout(() => {
-              this.scrollDisabled = false
-            }, 100)
-          }
-        }, 20)
-      } else {
-        // 向上滚动
-        let timer = setInterval(() => {
-          scrollTop -= speed
-          if (scrollTop >= itemScrollTop) {
-            this.scrollWrap.scrollTop = scrollTop
-          } else {
-            this.scrollWrap.scrollTop = itemScrollTop
-            clearInterval(timer)
-            setTimeout(() => {
-              this.scrollDisabled = false
-            }, 100)
+    getHeight(item, dom) {
+      item.height = dom.offsetHeight
+    },
+    sortList: debounce(30, function () {
+      if (this.$refs['anchor-content']) {
+        let list = []
+        let DomList = this.$refs['anchor-content'].querySelectorAll('[anchor-item-id]')
+        DomList.forEach((dom) => {
+          let id = dom.getAttribute('anchor-item-id')
+          let item = this.navList.find((c) => c.id === id)
+          if (item) {
+            list.push(item)
           }
-        }, 20)
+        })
+        this.navList = list
       }
+    }),
+    sizeFn: debounce(30, function () {
+      this.wrapHeight = this.$refs['anchor-content']?.offsetHeight
+    }),
+    scrollFn: debounce(30, function () {
+      if (this.acIng) return
+
+      this.scIng = true
+
+      let wrapTop = this.$refs['anchor-content'].scrollTop
+
+      let mB = 8 // 边距
+      let pHs = 0
+      this.navList.some((item) => {
+        if (!(pHs <= wrapTop && pHs + item.height - mB > wrapTop)) {
+          pHs += item.height
+        } else {
+          this.$emit('input', item.id)
+
+          return true
+        }
+      })
+
+      this.wrapTop = wrapTop
+
+      this.$nextTick(() => {
+        this.scIng = false
+      })
+    }),
+    activitFn(item) {
+      this.acIng = true
+      this.$emit('input', item.id)
+
+      let pHs = 0
+      this.navList.some((c) => {
+        if (c.id !== item.id) {
+          pHs += c.height
+        } else {
+          let wrap = this.$refs['anchor-content']
+          // wrap.scrollTop = pHs
+          // this.acIng = false
+          this.animation(wrap, wrap.scrollTop, pHs)
+          return true
+        }
+      })
+    },
+    animation(dom, F, T) {
+      let sT = 16 //每步时间
+      let N = 16 //步数
+      let S = T - F //距离
+      let V = S / N //每步长
+      let nI = 0
+      let stO = setInterval(() => {
+        nI++
+        if (nI <= N) {
+          dom.scrollTop = dom.scrollTop + V
+        } else {
+          dom.scrollTop = T
+          setTimeout(() => (this.acIng = false), 60)
+          clearInterval(stO)
+        }
+      }, sT)
     }
   }
 }

package/src/components/Anchor/sidebar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="p-t-m">
+    <div
+      v-for="item in navList"
+      :key="item.id"
+      class="n20-anchor2-nav"
+      :class="{ 'n20-anchor2-nav-activit': item.id === activit }"
+      @click="$emit('click', item)"
+    >
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    navList: {
+      type: Array,
+      default: () => []
+    },
+    activit: {
+      type: [String, Number],
+      default: undefined
+    }
+  }
+}
+</script>
+
+<style>
+.n20-anchor2-nav {
+  padding: 5px 10px;
+  margin: 2px 0;
+  border-left: 2px solid var(--color-text-placeholder);
+  cursor: pointer;
+}
+.n20-anchor2-nav-activit {
+  color: var(--color-primary);
+  border-left: 2px solid var(--color-primary);
+}
+</style>

package/src/components/CascaderArea/index.vue

@@ -6,12 +6,7 @@
     :options="areaTree"
     :filterable="filterable"
     :clearable="clearable"
-    :props="{
-      value: 'regionNo',
-      label: 'regionName',
-      children: 'children',
-      expandTrigger: 'hover'
-    }"
+    :props="propsAs"
     v-on="$listeners"
   />
 </template>
@@ -44,6 +39,10 @@ export default {
     countryId: {
       type: String,
       default: 'CHN'
+    },
+    props: {
+      type: Object,
+      default: undefined
     }
   },
   data() {
@@ -52,6 +51,15 @@ export default {
     }
   },
   computed: {
+    propsAs() {
+      let _prop = {
+        value: 'regionNo',
+        label: 'regionName',
+        children: 'children',
+        expandTrigger: 'hover'
+      }
+      return Object.assign(_prop, this.props)
+    },
     areaKey() {
       return this.countryId === 'CHN' ? '_china_area_tree_' : `_${this.countryId}_area_tree_`
     },

package/src/components/Filters/indexO.vue

@@ -27,10 +27,10 @@
     </div>
     <div class="text-c m-t m-b">
       <slot name="actions">
-        <el-button size="mini" type="primary" style="width: 76px" @click="filter">
+        <el-button type="primary" @click="filter">
           {{ filterText }}
         </el-button>
-        <el-button size="mini" plain style="width: 76px" @click="clear">
+        <el-button plain @click="clear">
           {{ clearText }}
         </el-button>
       </slot>

package/src/components/Layout/HeaderWrap/index.vue

@@ -155,7 +155,7 @@
     </dialogWrap>
     <!-- 消息/通知 -->
     <el-popover ref="noticePop" trigger="click" width="400" @after-enter="$refs.noticeContent.show()">
-      <noticePop ref="noticeContent" :num.sync="noticeNum" />
+      <noticePop ref="noticeContent" />
     </el-popover>
     <el-dialog :visible.sync="scV" :title="'切换用户' | $lc" append-to-body width="600px">
       <switchUser :visible.sync="scV" :user-no="userNo" />
@@ -270,6 +270,10 @@ export default {
         this.show = true
       }
     })
+
+    this.getNNum()
+    document.addEventListener('visibilitychange', this.getNNum)
+    window.addEventListener('message', this.updateNotice)
   },
   mounted() {
     let userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
@@ -281,6 +285,10 @@ export default {
     }
     this.rolesList = userInfo.roles || []
   },
+  beforeDestroy() {
+    document.removeEventListener('visibilitychange', this.getNNum)
+    window.removeEventListener('message', this.updateNotice)
+  },
   methods: {
     // 跳转打主数据人员页面
     goMdmUser() {
@@ -422,6 +430,29 @@ export default {
       })
 
       this.underway = !!res.data
+    },
+    // 更新消息条数
+    updateNotice(ev) {
+      if (ev.data === 'NstcUpdateNotice') {
+        this.getNNum()
+      }
+    },
+    // 获取消息条数
+    getNNum() {
+      clearTimeout(this.getNNumTimeOut)
+      if (!document.hidden) {
+        Promise.all([
+          axios.get('/bems/wkb/messageCenter/getUnReadTotal/' + this.username, null, { loading: false, noMsg: true }),
+          axios.get('/bems/1.0/notice/notReadCount', null, {
+            loading: false,
+            noMsg: true
+          })
+        ]).then(([res_1, res_2]) => {
+          this.noticeNum = (res_1.data.data || 0) + (res_2.data || 0)
+        })
+
+        this.getNNumTimeOut = setTimeout(this.loopGetNNum, 1000 * 60 * 3)
+      }
     }
   }
 }