cloud-web-corejs 1.0.0 → 1.0.2

package/src/layout/components/TagsView/ScrollPane.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  mounted() {
+    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+  },
+  beforeDestroy() {
+    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+  },
+  methods: {
+    handleScrollLeft(e) {
+      const eventDelta =  -200
+      const $scrollWrapper = this.scrollWrapper
+      let data = $scrollWrapper.scrollLeft + eventDelta / 4;
+      data = data < 0 ? 0 : data;
+      $scrollWrapper.scrollLeft = data
+    },
+    handleScrollRight(e) {
+      const eventDelta = 200
+      const $scrollWrapper = this.scrollWrapper
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      let maxData = $scrollWrapper.scrollWidth - $containerWidth
+      let data = $scrollWrapper.scrollLeft + eventDelta / 4;
+      data = data > maxData ? maxData : data;
+      $scrollWrapper.scrollLeft = data
+    },
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    emitScroll() {
+      this.$emit('scroll')
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 45px;
+  ::v-deep {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 66px;
+    }
+  }
+}
+</style>

package/src/layout/components/TagsView/index.vue

@@ -0,0 +1,281 @@
+<template>
+  <div id="tags-view-container" class="navbar-tag">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        <i class="el-icon-s-home" v-if="tag.name =='home'"></i>
+        {{ getMenuName(tag) }}
+
+        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
+      </router-link>
+    </scroll-pane>
+    <div class="tags-operBox">
+      <el-tooltip :enterable="false" class="item" effect="dark" content="左移" placement="bottom">
+        <i class="el-icon-arrow-left" layadmin-event="leftPage"
+           one-link-mark="yes" @click="$refs.scrollPane.handleScrollLeft()"/>
+      </el-tooltip>
+      <el-tooltip :enterable="false" class="item" effect="dark" content="右移" placement="bottom" l>
+        <i class="el-icon-arrow-right" ayadmin-event="rightPage"
+           one-link-mark="yes" @click="$refs.scrollPane.handleScrollRight()"/>
+      </el-tooltip>
+      <el-tooltip :enterable="false" class="item" effect="dark" content="刷新" placement="bottom">
+        <i class="el-icon-refresh" @click="refreshSelectedTag($route)"/>
+      </el-tooltip>
+      <el-tooltip :enterable="false" class="item" effect="dark" content="全部关闭" placement="bottom">
+        <i class="el-icon-close" @click="closeAllTags(selectedTag)"/>
+      </el-tooltip>
+    </div>
+    <!-- <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
+      <li @click="closeOthersTags">Close Others</li>
+      <li @click="closeAllTags(selectedTag)">Close All</li>
+    </ul> -->
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  components: {ScrollPane},
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routes
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    getMenuName(item) {
+      let locale = this.$i18n?.locale;
+      let zhTitle = (item.meta ? item.meta.title : '');
+      let enTitle = (item.meta ? item.meta.enTitle : '');
+      let title;
+      if (locale == "en") {
+        title = enTitle || zhTitle;
+      } else {
+        title = zhTitle
+      }
+      if (!enTitle || locale !== "en") {
+        title = zhTitle
+      }
+      if (this.$t) {
+        title = this.$t(title)
+      }
+      return title;
+    },
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    isAffix(tag) {
+      return tag.meta && tag.meta.affix
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: {...route.meta}
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const {name} = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$baseEventBus.$emit("reflushRouteView", view);
+      /* if(this.$route.name=="outLink"){
+        let a = this.$baseEventBus.$emit("getAppMain");
+        debugger
+        let t = this.$parent.$refs["appMain"].$refs["ref_"+this.$route.path][0];
+        t.$baseReload();
+      }else{
+        this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+          const { fullPath } = view
+          this.$nextTick(() => {
+            this.$router.replace({
+              path: '/redirect' + fullPath
+            })
+          })
+        })
+      } */
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({visitedViews}) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({visitedViews}) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView.fullPath)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({path: '/redirect' + view.fullPath})
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    },
+    handleScroll() {
+      this.closeMenu()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '~@/styles/variables.scss';
+
+.navbar-tag .tags-view-item.active {
+  background: $baseColor !important;
+}
+</style>
+<style lang="scss">
+//reset element css of el-icon-close
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 14px;
+      height: 14px;
+      vertical-align: text-bottom;
+      line-height: 12px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transform-origin: 100% 50%;
+      display: none;
+      position: absolute;
+      right: 12px;
+      top: 8px;
+
+      &:before {
+        transform: scale(.84);
+        display: inline-block;
+        vertical-align: -1.8px;
+      }
+    }
+
+    &:hover .el-icon-close {
+      display: block;
+    }
+  }
+}
+</style>

package/src/layout/components/index.js

@@ -0,0 +1,5 @@
+export { default as AppMain } from './AppMain'
+// export { default as Navbar } from './Navbar'
+// export { default as Settings } from './Settings'
+export { default as Sidebar } from './Sidebar/index.vue'
+export { default as TagsView } from './TagsView/index.vue'

package/src/layout/components/langTool.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="item" v-if="i18nEnabled && languageSettings.length>1">
+    <el-dropdown class='lang-box' trigger="click">
+    <span class="el-dropdown-link">
+      <i class="iconfont icon-duoyuyan"></i><i
+      class="el-icon-arrow-down el-icon--right"></i>
+    </span>
+      <el-dropdown-menu slot="dropdown" class="lang-box-pup">
+        <el-dropdown-item v-for="(item,index) in languageSettings" :key="index" :command="item.languageCode"
+                          @click.native="changeLanguage(item.languageCode)"
+                          :class="{'cur':currentName == item.languageName}">{{ item.languageName }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+import indexUtil from "@base/utils/index.js"
+import settingConfig from "@/settings";
+
+export default {
+  name: "langTool",
+  data() {
+    return {
+      languageSettings: [],
+      languageSettingMap: {},
+      i18nEnabled: settingConfig.i18nEnabled
+    }
+  },
+  computed: {
+    currentName() {
+      return this.languageSettingMap[this.$i18n.locale]
+    }
+  },
+  mounted() {
+    this.initLanguageSetting();
+  },
+  methods: {
+    changeLanguage(command) {
+      if (this.$i18n.locale != command) {
+        this.$http({
+          url: USER_PREFIX + `/auth/switchLanguage`,
+          method: `post`,
+          data: {
+            "stringOne": command
+          },
+          isLoading: true,
+          modalStrictly: true,
+          loadingTarget: document.body,
+          success: res => {
+            this.$i18n.locale = command // 设置给本地的i18n插件
+            localStorage.setItem("i18n-lang", command);
+            this.$message.success('切换多语言成功')
+            location.reload()
+          }
+        })
+      }
+    },
+    initLanguageSetting() {
+      if (settingConfig.i18nEnabled !== true) return;
+      let languageSettings = []
+      languageSettings.push(...(this.$store.state.user.languageSettings));
+      let map = {};
+      languageSettings.forEach(item => {
+        map[item.languageCode] = item.languageName;
+      });
+      this.languageSettingMap = map;
+      this.languageSettings = languageSettings;
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+/*多语言*/
+.lang-box {
+  border-right: solid 1px #ffffff24;
+  padding-right: 7px;
+  height: 18px;
+  line-height: 18px;
+  vertical-align: middle;
+  color: #FFF;
+  font-size: 12px;
+
+  .el-icon--right {
+    margin-left: 3px;
+  }
+
+  .el-dropdown-link {
+    color: #FFF;
+
+    .name {
+      display: inline-block;
+      width: 28px;
+      height: 19px;
+      overflow: hidden;
+      vertical-align: middle;
+      font-size: 12px;
+      line-height: 19px
+    }
+
+    i {
+      zoom: 0.7;
+      margin-left: 3px;
+      opacity: 0.8;
+
+      &.iconfont {
+        font-size: 24px;
+        vertical-align: middle;
+        margin-right: 2px;
+      }
+    }
+  }
+
+}
+
+.lang-box-pup .el-dropdown-menu__item.cur {
+  background-color: #eaf0f4;
+  color: #5583a9;
+}
+</style>

package/src/layout/components/notify_message/unreadDialog.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <el-dialog
+      title="消息列表"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="falseValue"
+      :visible.sync="showDialog"
+      :modal="falseValue"
+      width="1001px"
+      custom-class="dialog-style news-box"
+      :destroy-on-close="true"
+      @close="dialogClose"
+      v-el-drag-dialog
+      v-el-dialog-center
+      top="2vh"
+    >
+      <div class="n-list">
+        <div class="item" v-for="(item, index) in tableDatas" :key="index" :class="{ on: currentIndex == index }"
+             @click="checkLine(index)">
+          <div class="name">
+            {{ item.notifyTypeName }}
+          </div>
+          <p>{{ item.createDate ? item.createDate.substring(0, 10) : '' }}</p>
+        </div>
+      </div>
+      <div class="n-cont">
+        <h2 class="t1">{{ currentRow.notifyTypeName }}</h2>
+        <!--          <h3 class="t2">紧急通知</h3>-->
+        <p class="time">{{ currentRow.createDate }}</p>
+        <div class="c"><p v-html="currentRow.content"></p></div>
+      </div>
+    </el-dialog>
+    <systemNoticeInfoDialog v-if="showSystemNoticeInfoDialog" :visiable.sync="showSystemNoticeInfoDialog"
+                            :appendToTop="true"></systemNoticeInfoDialog>
+  </div>
+</template>
+
+<script>
+import systemNoticeInfoDialog from "@base/views/user/system_notice/infoDialog.vue";
+
+export default {
+  name: 'notifyMessageDialog',
+  components: {systemNoticeInfoDialog},
+  props: {},
+  created() {
+  },
+  mounted() {
+    this.init();
+  },
+  data() {
+    return {
+      showDialog: false,
+      falseValue: false,
+      tableDatas: [],
+      currentIndex: 0,
+      currentRow: {},
+      showSystemNoticeInfoDialog: false
+    };
+  },
+
+  methods: {
+    init() {
+      this.$http({
+        url: USER_PREFIX + '/notify_message/lastUnreadList',
+        method: 'post',
+        data: {},
+        success: res => {
+          let rows = res.objx || [];
+          if (rows.length > 0) {
+            this.tableDatas = rows;
+            this.checkLine(0, () => {
+              this.showDialog = true;
+            });
+          }/* else {
+            this.initSystemNoticeInfoDialog();
+          } */
+        }
+      });
+    },
+    handleRead(index, callback) {
+      let row = this.tableDatas[index];
+      if (row.readed == 0) {
+        this.$http({
+          url: USER_PREFIX + `/notify_message/read`,
+          method: `post`,
+          data: [row.id],
+          isLoading: true,
+          success: res => {
+            row.readed = 1;
+            callback && callback()
+          }
+        });
+      } else {
+        callback && callback()
+      }
+    },
+
+    dialogClose() {
+      this.$emit('update:visiable', false);
+    },
+    dialogPrimary() {
+      // var rows = this.$refs['table-m2'].getTableData().fullData
+      // this.$emit("confirm", rows)
+      this.$emit('update:visiable', false);
+    },
+    checkLine(index, callback) {
+      this.currentIndex = index;
+      let item = this.tableDatas[index];
+      this.handleRead(index, () => {
+        this.currentIndex = index;
+        this.currentRow = item;
+        callback && callback();
+      })
+
+    },
+    initSystemNoticeInfoDialog() {
+      this.$http({
+        url: USER_PREFIX + '/system_notice/listPage',
+        data: {publish: true, important: true, size: 1},
+        method: 'post',
+        success: res => {
+          this.systemNotices = res.objx && res.objx.records ? res.objx.records : [];
+          let rows = res?.objx?.records || []
+          if (rows.length > 0) {
+            this.showSystemNoticeInfoDialog = true;
+          }
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style></style>