hd-idevvue3 3.0.0 → 3.0.1

package/src/views/layout/header/MainHeader.vue

@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <div class="headerLogo"></div>
+    <div class="headerIcon">
+      <a @click="logout" class="headerIconLink5" href="javascript:void(0)"><!--退出--></a>
+
+
+      <el-dropdown class="avatar-container right-menu-item" style="float: right" trigger="click">
+        <a class="headerIconLink7" href="javascript:void(0)">
+          <el-badge :hidden="$store.state.user.messageNum==0" :max="99" :value="$store.state.user.messageNum"
+                    style="float: left;"></el-badge>
+          <!--<el-badge :value="$store.state.user.messageNum" :hidden="$store.state.user.messageNum==0" :max="99">-->
+          <div class="avatar-wrapper" style="float: left;">
+            <span class="headerIconFontColor"> {{name}}</span>
+          </div>
+        </a>
+
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              {{$t('首页')}}
+            </el-dropdown-item>
+          </router-link>
+          <el-dropdown-item>
+            <span @click="changePsw" style="display:block;"> {{$t('修改密码')}}</span>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <span @click="editBoard" style="display:block;"> {{$t('修改首页')}}</span>
+          </el-dropdown-item>
+          <el-dropdown-item>
+
+            <span @click="showMessage" style="display:block;">
+              {{$t('查看消息')}}
+              <el-badge :hidden="$store.state.user.messageNum==0" :max="99"
+                        :value="$store.state.user.messageNum" style="margin-top: -5px" type="warning"/>
+            </span>
+
+          </el-dropdown-item>
+
+          <!--<el-dropdown-item>
+            <span @click="chgLanguage" style="display:block;">{{nextLanguage}}</span>
+          </el-dropdown-item>-->
+        </el-dropdown-menu>
+      </el-dropdown>
+
+
+      <el-dropdown class="avatar-container right-menu-item" style="float: right" trigger="click">
+        <a class="headerIconLink3" href="javascript:void(0)">
+          <div class="avatar-wrapper">
+            <i class="el-icon-caret-bottom headerIconFontColor"></i>
+          </div>
+        </a>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <span @click="changeStyle('metro-orange')" style="display:block;"> {{$t('橙色')}}</span>
+          </el-dropdown-item>
+          <el-dropdown-item>
+
+            <span @click="changeStyle('metro-green')" style="display:block;"> {{$t('绿色')}}</span>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <span @click="changeStyle('metro-mauves')" style="display:block;"> {{$t('紫色')}}</span>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <span @click="changeStyle('metro-blue')" style="display:block;"> {{$t('蓝色')}}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-dropdown class="avatar-container right-menu-item" style="float: right" trigger="hover">
+        <a :class="colorStyle" href="javascript:void(0)">
+          <div class="avatar-wrapper">
+            <i class="el-icon-caret-bottom headerIconFontColor"></i>
+          </div>
+        </a>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <span @click="changeLanguage('zh')" style="display:block;">中文</span>
+            <!--<span @click="chgLanguage" style="display:block;">{{nextLanguage}}</span>-->
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <span @click="changeLanguage('en')" style="display:block;">English</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <div class="avatar-container right-menu-item" style="float: right" trigger="click">
+        <a class="mike" href="javascript:void(0)">
+          <div @shortkey="vocHotKey" v-shortkey.push="['ctrl','`']">
+          </div>
+        </a>
+      </div>
+
+      <search class="avatar-container right-menu-item" style="float: right"></search>
+
+
+      <changepswform ref="changepswform"></changepswform>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {mapGetters} from 'vuex'
+  import search from './ElasticSearch'
+  import changepswform from './changepswform'
+  import VocRec from './VocRec'
+
+
+  export default {
+    name: 'mainHeader',
+    mixins: [VocRec],
+    components: {
+      changepswform,
+      search
+    },
+    data() {
+      return {
+        show: false,
+        params: {
+          entityId: this.$store.getters.token,
+          entityName: 'avatar'
+        },
+        headers: {
+          smail: '*_~'
+        },
+        imgDataUrl: '', // the datebase64 url of created image
+        style: this.$store.state.user.skin,
+        //log: errLogStore.state.errLog
+      }
+    },
+    mounted() {
+      //this.screenShotFn = screenShot([16, 65], 27);
+      if (this.$store.state.user.nextChgId == "1") {
+        this.changePsw();
+      }
+      this.$i18n.locale = this.$store.state.user.language || 'zh';
+      this.placeholderChg()
+    },
+    computed: {
+      ...mapGetters([
+        'sidebar',
+        'name',
+        'avatar',
+        'language'
+      ]),
+      nextLanguage() {
+        if (this.$i18n.locale == 'zh') {
+          return 'English'
+        } else {
+          return '中文'
+        }
+      },
+      colorStyle() {
+        if (this.$i18n.locale == 'zh') {
+          return 'zhjack'
+        } else {
+          return 'enjack'
+        }
+      }
+    },
+    methods: {
+      // toggleSideBar() {
+      //   this.$store.dispatch('toggleSideBar')
+      // },
+      // handleSetLanguage(lang) {
+      //   this.$i18n.locale = lang
+      //   this.$store.dispatch('setLanguage', lang)
+      //   this.$message({
+      //     message: 'switch language success',
+      //     type: 'success'
+      //   })
+      // },
+
+      editBoard() {
+        this.$router.push({
+          path: '/dashboard',
+          query: {
+            isEdit: '1'
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload()// 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      changePsw() {
+        this.$refs['changepswform'].show()
+      },
+      changeAvatar() {
+        this.show = !this.show
+      },
+      /**
+       * crop success
+       *
+       * [param] imgDataUrl
+       * [param] field
+       */
+      cropSuccess(imgDataUrl, field) {
+        // console.log('-------- crop success --------')
+        // this.imgDataUrl = imgDataUrl
+        // store.getters.avatar = imgDataUrl
+        this.$store.state.user.avatar = imgDataUrl;
+      },
+      /**
+       * upload success
+       *
+       * [param] jsonData   服务器返回数据，已进行json转码
+       * [param] field
+       */
+      cropUploadSuccess(jsonData, field) {
+        // console.log('-------- upload success --------')
+        // console.log(jsonData)
+        // console.log('field: ' + field)
+        // this.imgDataUrl = 'webresources/login/com/comfileupload/download?uploadId=' + jsonData.message
+      },
+      /**
+       * upload fail
+       *
+       * [param] status    server api return error status, like 500
+       * [param] field
+       */
+      cropUploadFail(status, field) {
+        // console.log('-------- upload fail --------')
+        // console.log(status)
+        // console.log('field: ' + field)
+      },
+      changeStyle(style) {
+        this.$store.state.user.skin = style;
+        this.$http.get(`/webresources/login/privilege/AuthUser/updateUserStyleCss/${style}?stylecss=${style}`).then(response => {
+          const data = response.data
+
+        })
+      },
+      showMessage() {
+        this.$router.push({path: '/privilege/commsgto'})
+      },
+      changeLanguage(val) {
+        this.$i18n.locale = val
+        this.$store.state.user.language = val;
+        this.placeholderChg()
+        this.$http.get(`/webresources/login/privilege/AuthUser/updateUserLanguage/${val}`).then(response => {
+          const data = response.datas
+        })
+      },
+      placeholderChg() {
+        this.$date.placeholder = this.$t('选择日期')
+        this.$time.placeholder = this.$t('选择时间')
+        this.$simdate.placeholder = this.$t('选择日期')
+        this.$simtime.placeholder = this.$t('选择时间')
+      }
+    }
+  }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .right-menu-item {
+    display: inline-block;
+    margin: 0 8px;
+  }
+
+  .item {
+    position: absolute;
+    z-index: 2000;
+    margin-left: -10px;
+  }
+
+  .el-icon-caret-bottom:before {
+    content: "" !important;
+  }
+</style>

package/src/views/layout/header/Navbar.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-menu class="navbar" mode="horizontal">
+    <tags-view style="width: calc(100%);height: 100%;"></tags-view>
+  </el-menu>
+</template>
+
+<script>
+  import TagsView from './TagsView'
+
+  export default {
+    components: {
+      TagsView
+    },
+    data() {
+      return {}
+    },
+    computed: {},
+    methods: {
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .navbar {
+    height: 30px; //jianglinghao 513
+    line-height: 40px;
+    border-radius: 0px !important;
+
+    .hamburger-container {
+      /*line-height: 40px;*/
+      /*height: 40px;*/
+      float: left;
+      padding: 0 10px;
+    }
+
+    .breadcrumb-container {
+      float: left;
+    }
+
+    .errLog-container {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .right-menu {
+      float: right;
+      height: 100%;
+
+      &:focus {
+        outline: none;
+      }
+
+      .right-menu-item {
+        display: inline-block;
+        margin: 0 8px;
+      }
+
+      .screenfull {
+        vertical-align: middle;
+        height: 40px;
+      }
+
+      .international {
+        vertical-align: top;
+
+        .international-icon {
+          font-size: 20px;
+          cursor: pointer;
+          vertical-align: -5px;
+        }
+      }
+
+      .theme-switch {
+        vertical-align: 15px;
+      }
+
+      .avatar-container {
+        height: 40px;
+        margin-right: 30px;
+
+        .avatar-wrapper {
+          cursor: pointer;
+          margin-top: 5px;
+          position: relative;
+
+          .user-avatar {
+            width: 30px;
+            height: 30px;
+            border-radius: 10px;
+          }
+
+          .el-icon-caret-bottom {
+            position: absolute;
+            right: -20px;
+            top: 25px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+</style>
+
+
+

package/src/views/layout/header/ScrollPane.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll" @DOMMouseScroll="handleFoxScroll">
+    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'scrollPane',
+    data() {
+      return {
+        left: 0,
+        tmpWrapperWidth: 0
+      }
+    },
+    updated: function () {
+      if (this.tmpWrapperWidth != this.$refs.scrollWrapper.offsetWidth) {
+        this.tmpWrapperWidth = this.$refs.scrollWrapper.offsetWidth;
+        if (this.$refs.scrollContainer.offsetWidth - this.$refs.scrollWrapper.offsetWidth < 100) {
+          this.left = this.$refs.scrollContainer.offsetWidth - this.$refs.scrollWrapper.offsetWidth - 100;
+        }
+      }
+    },
+    methods: {
+      handleScroll(e) {
+        e.preventDefault()
+        const $container = this.$refs.scrollContainer
+        const $containerWidth = $container.offsetWidth
+        const $wrapper = this.$refs.scrollWrapper
+        const $wrapperWidth = $wrapper.offsetWidth
+        if (e.wheelDelta > 0) {
+          this.left = Math.min(0, this.left + e.wheelDelta)
+        } else {
+          if ($containerWidth - 100 < $wrapperWidth) {
+            if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+              this.left = this.left
+            } else {
+              this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
+            }
+          } else {
+            this.left = 0
+          }
+        }
+      },
+      handleFoxScroll(e) {
+        e.preventDefault()
+        const $container = this.$refs.scrollContainer
+        const $containerWidth = $container.offsetWidth
+        const $wrapper = this.$refs.scrollWrapper
+        const $wrapperWidth = $wrapper.offsetWidth
+        let pos = e.detail * (-10);
+        if (pos > 0) {
+          this.left = Math.min(0, this.left + pos)
+        } else {
+          if ($containerWidth - 100 < $wrapperWidth) {
+            if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+              this.left = this.left
+            } else {
+              this.left = Math.max(this.left + pos, $containerWidth - $wrapperWidth - 100)
+            }
+          } else {
+            this.left = 0
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .scroll-container {
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    .scroll-wrapper {
+      position: absolute;
+    }
+  }
+</style>

package/src/views/layout/header/TagsView.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="tags-view-container">
+    <scroll-pane class="tags-view-container" ref="scrollPane">
+      <router-link
+        :class="isActive(tag)?'active':''"
+        :key="tag.name"
+        :to="{ name: tag.name, params: tag.addQuery}"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+        class="tags-view-item"
+        ref="tag"
+        v-for="tag in Array.from(visitedViews)"> <!--name是menuId -->
+        {{ $i18n.locale == 'zh' ? tag.title : tag.enTitle }}
+        <span @click.stop="closeViewTags(tag,$event)" class="el-icon-close"/>
+      </router-link>
+      <div @click="headerToggle()" style="position: fixed;right: 20px"><i :class="showHeaderCls"
+                                                                          style="font-size:20px;color: #4d90fe"></i>
+      </div>
+    </scroll-pane>
+    <ul :style="{left:left+'px',top:top+'px'}" class="context-menu" v-show="visible">
+      <li @click="refreshSelectedTag()">{{ $t('tagsView.refresh') }}</li>
+      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
+      <li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
+      <li @click="openInNewWin()">{{ $t('tagsView.openNew') }}</li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+  import ScrollPane from './ScrollPane'
+
+  export default {
+    components: {ScrollPane},
+    data() {
+      return {
+        visible: false,
+        top: 0,
+        left: 0,
+        showHeaderCls: 'el-icon-upload2'
+      }
+    },
+    computed: {
+      visitedViews() {
+        return this.$store.state.app.visitedViews
+      }
+    },
+    watch: {
+
+      $route() {
+        this.addViewTags()
+      },
+      visible(value) {
+        if (value) {
+          document.body.addEventListener('click', this.closeMenu)
+        } else {
+          document.body.removeEventListener('click', this.closeMenu)
+        }
+      }
+    },
+    mounted() {
+      this.addViewTags()
+    },
+    methods: {
+      headerToggle() {
+        let st = this.$store.state.app.headerShow
+        if (st === false) {
+          this.showHeaderCls = 'el-icon-upload2'
+          this.$set(this.$store.state.app, 'headerShow', true)
+        } else {
+          this.showHeaderCls = 'el-icon-download'
+          this.$set(this.$store.state.app, 'headerShow', false)
+        }
+      },
+      closeViewTags(view, $event) {
+        this.$store.dispatch('delView', view).then((views) => {
+          if (this.isActive(view)) {
+            const latestView = views.slice(-1)[0]
+            if (latestView) {
+              this.$router.push(latestView.path)
+            } else {
+              this.$router.push('/')
+            }
+          }
+        })
+        $event.preventDefault()
+      },
+      generateRoute() {
+        if (this.$route.name) {
+          return this.$route
+        }
+        return false
+      },
+      addViewTags() {
+        const route = this.generateRoute()
+        if (!route) {
+          return false
+        }
+        this.$store.dispatch('addView', route)
+      },
+      isActive(route) {
+        return route.name === this.$route.name
+      },
+      refreshSelectedTag() {
+        this.$store.dispatch('refreshView', this.$store.state.app.selectedView)
+      },
+      closeOthersTags() {
+        this.$router.push(this.$store.state.app.selectedView)
+        this.$store.dispatch('delOthersViews', this.$store.state.app.selectedView).then(() => {
+        })
+      },
+      closeAllTags() {
+        this.$store.dispatch('delAllViews')
+        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 - 40
+        this.visible = true
+          this.$store.state.app.selectedView = tag
+          console.log(this.$store.state.app.selectedView)
+      },
+      closeMenu() {
+        this.visible = false
+      },
+      openInNewWin() {
+          const view = this.$store.state.app.selectedView;
+        const routeData = this.$router.resolve({
+          name: view.name,
+          params: view.params,
+          query: {onlycontent: 1}
+        })
+        window.open(routeData.href, view.name)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .tags-view-container {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+
+      &:first-of-type {
+        margin-left: 15px;
+      }
+
+      &.active {
+        background-color: #409EFF;
+        color: #fff;
+        border-color: #409EFF;
+
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+
+  .tags-view-container {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>