hd-idevvue3 3.0.3 → 3.0.4

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

@@ -1,96 +1,130 @@
 <template>
-
   <el-dialog title="修改密码" :visible.sync="visiable">
-    <el-form label-width="100px" :model="hdform" ref="hdform" :rules="checkRules">
+    <el-form
+      label-width="100px"
+      :model="hdform"
+      ref="hdform"
+      :rules="checkRules"
+    >
       <el-row>
         <el-col :span="24">
           <el-form-item label="旧密码" prop="oldPassword">
-            <el-input type="text" v-model="hdform.oldPassword" placeholder="请输入旧密码">
+            <el-input
+              type="text"
+              v-model="hdform.oldPassword"
+              placeholder="请输入旧密码"
+            >
             </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="新密码" prop="newPassword">
-            <el-input type="password" v-model="hdform.newPassword" placeholder="请输入密码" autocomplete="new-password">
+            <el-input
+              type="password"
+              v-model="hdform.newPassword"
+              placeholder="请输入密码"
+              autocomplete="new-password"
+            >
             </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="重复确认" prop="passwordTemp">
-            <el-input type="password" v-model="hdform.passwordTemp" placeholder="请重复输入密码" autocomplete="new-password">
+            <el-input
+              type="password"
+              v-model="hdform.passwordTemp"
+              placeholder="请重复输入密码"
+              autocomplete="new-password"
+            >
             </el-input>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="visiable = false">{{$t('取 消')}}</el-button>
-      <el-button type="primary" @click="doRegist" :loading="loading"> {{$t('确 定')}}</el-button>
+      <el-button @click="visiable = false">{{ $t('取 消') }}</el-button>
+      <el-button type="primary" @click="doRegist" :loading="loading">
+        {{ $t('确 定') }}</el-button
+      >
     </div>
   </el-dialog>
-
 </template>
 
 <script>
-  export default {
-    name: 'registform',
-    data() {
-      const validatePassword = (rule, value, callback) => {
-        if (!value || value.length < 2) {
-          callback(new Error(this.$t('密码不能小于2位')))
-        } else {
-          callback()
-        }
-      }
-      const validatePasswordSame = (rule, value, callback) => {
-        if (this.hdform.newPassword !== this.hdform.passwordTemp) {
-          callback(new Error(this.$t('两次输入密码不一致')))
-        } else {
-          callback()
-        }
+export default {
+  name: 'registform',
+  data() {
+    const validatePassword = (rule, value, callback) => {
+      if (!value || value.length < 2) {
+        callback(new Error(this.$t('密码不能小于2位')))
+      } else {
+        callback()
       }
-      return {
-        hdform: {},
-        visiable: false,
-        tsLoading: false,
-        loading: false,
-        checkRules: {
-          oldPassword: [{ required: true, trigger: 'change', validator: validatePassword }],
-          newPassword: [{ required: true, trigger: 'change', validator: validatePassword }],
-          passwordTemp: [{ required: true, trigger: 'change', validator: validatePasswordSame }]
-        }
+    }
+    const validatePasswordSame = (rule, value, callback) => {
+      if (this.hdform.newPassword !== this.hdform.passwordTemp) {
+        callback(new Error(this.$t('两次输入密码不一致')))
+      } else {
+        callback()
       }
+    }
+    return {
+      hdform: {},
+      visiable: false,
+      tsLoading: false,
+      loading: false,
+      checkRules: {
+        oldPassword: [
+          { required: true, trigger: 'change', validator: validatePassword },
+        ],
+        newPassword: [
+          { required: true, trigger: 'change', validator: validatePassword },
+        ],
+        passwordTemp: [
+          {
+            required: true,
+            trigger: 'change',
+            validator: validatePasswordSame,
+          },
+        ],
+      },
+    }
+  },
+  methods: {
+    show() {
+      this.visiable = true
     },
-    methods:
-      {
-        show() {
-          this.visiable = true
-        },
-        doRegist() {
-          this.$refs['hdform'].validate((valid) => {
-            if (!valid) {
-              return false
-            }
-            if (this.hdform.passwordTemp !== this.hdform.newPassword) {
-              this.$alert(this.$t('两次密码输入不一致'), this.$t('错误'))
-              return false
-            }
-            this.loading = true
-            this.$http.post('/webresources/login/privilege/AuthUser/modifyPasswordVue?oldPassword=' + this.hdform.oldPassword + '&newPassword=' + this.hdform.newPassword).then(response => {
-              this.loading = false
-              const data = response.data
-              this.$message({
-                type: data.code === '-1' ? 'error' : 'success',
-                message: data.message
-              })
-              if (data.code === '-1') {
-                return
-              }
-              this.visiable = false
+    doRegist() {
+      this.$refs['hdform'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if (this.hdform.passwordTemp !== this.hdform.newPassword) {
+          this.$alert(this.$t('两次密码输入不一致'), this.$t('错误'))
+          return false
+        }
+        this.loading = true
+        this.$http
+          .post(
+            '/webresources/login/privilege/AuthUser/modifyPasswordVue?oldPassword=' +
+              this.hdform.oldPassword +
+              '&newPassword=' +
+              this.hdform.newPassword
+          )
+          .then((response) => {
+            this.loading = false
+            const data = response.data
+            this.$message({
+              type: data.code === '-1' ? 'error' : 'success',
+              message: data.message,
             })
+            if (data.code === '-1') {
+              return
+            }
+            this.visiable = false
           })
-        }
-      }
-  }
+      })
+    },
+  },
+}
 </script>
-

package/src/views/layout/index.js

@@ -1,12 +1,10 @@
 import HdLayout from './HdLayout'
 import HdSearch from './header/HeaderSearch'
 
-
 export default {
-  install(Vue) {//布局,包括菜单,多任务tag,用户设置等
-    Vue.component('HdLayout', HdLayout)
-    Vue.component('HdSearch', HdSearch)
-  }
+  install(Vue) {
+    //布局,包括菜单,多任务tag,用户设置等
+    window.$vueApp.component('HdLayout', HdLayout)
+    window.$vueApp.component('HdSearch', HdSearch)
+  },
 }
-
-

package/src/views/layout/menu/Hamburger.vue

@@ -1,45 +1,63 @@
-<template>
-  <span>
-    <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
-      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
-        p-id="1692"></path>
-      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
-        p-id="1693"></path>
-      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
-        p-id="1694"></path>
-    </svg>
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'hamburger',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    },
-    toggleClick: {
-      type: Function,
-      default: null
-    }
-  }
-}
-</script>
-
-<style scoped>
-.hamburger {
-	display: inline-block;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	transform: rotate(90deg);
-	transition: .38s;
-	transform-origin: 30% 50%;
-}
-
-.hamburger.is-active {
-	transform: rotate(0deg);
-}
-</style>
+<template>
+  <span>
+    <svg
+      t="1492500959545"
+      @click="toggleClick"
+      class="wscn-icon hamburger"
+      :class="{ 'is-active': isActive }"
+      style=""
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="1691"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="64"
+      height="64"
+    >
+      <path
+        d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692"
+      ></path>
+      <path
+        d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+        p-id="1693"
+      ></path>
+      <path
+        d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+        p-id="1694"
+      ></path>
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    toggleClick: {
+      type: Function,
+      default: null,
+    },
+  },
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  transform: rotate(90deg);
+  transition: 0.38s;
+  transform-origin: 30% 50%;
+}
+
+.hamburger.is-active {
+  transform: rotate(0deg);
+}
+</style>

package/src/views/layout/menu/HdMenu.vue

@@ -1,39 +1,70 @@
 <template>
   <div>
     <div class="menuSvg" ref="menuSvg">
-      <hamburger :isActive="sidebar.opened" :toggleClick="toggleSideBar" class="hamburger-container"></hamburger>
+      <hamburger
+        :isActive="sidebar.opened"
+        :toggleClick="toggleSideBar"
+        class="hamburger-container"
+      ></hamburger>
     </div>
     <div class="product_sort">
-      <el-scrollbar ref="scrollbar" style="height: 100%;">
+      <el-scrollbar ref="scrollbar" style="height: 100%">
         <div class="bd">
-          <div @mouseleave="mouseLeave($event)"
-               @mouseover="mouseOver($event)" class="item" v-for="item,index in routes">
+          <div
+            @mouseleave="mouseLeave($event)"
+            @mouseover="mouseOver($event)"
+            class="item"
+            v-for="(item, index) in routes"
+          >
             <div class="title" v-show="$store.state.app.sidebar.opened">
               <a href="javascript:void(0)">
-                <i :class="item.meta.icon" style="display:inline" v-if="item.meta&&item.meta.icon"></i>
-                <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta)}}</span>
+                <i
+                  :class="item.meta.icon"
+                  style="display: inline"
+                  v-if="item.meta && item.meta.icon"
+                ></i>
+                <span v-if="item.meta && item.meta.title">{{
+                  generateTitle(item.meta)
+                }}</span>
                 <!--<span>{{item.meta.title}}</span>-->
               </a>
             </div>
             <div class="arrow" v-if="$store.state.app.sidebar.opened">&gt;</div>
-            <div class="arrow" v-else><i :class="item.meta.icon" style="color:#494949"
-                                         v-if="item.meta&&item.meta.icon"></i></div>
+            <div class="arrow" v-else>
+              <i
+                :class="item.meta.icon"
+                style="color: #494949"
+                v-if="item.meta && item.meta.icon"
+              ></i>
+            </div>
             <div class="line"></div>
             <div class="subitem">
-
-              <template v-if="item.children&&item.children.length>0">
-                <div class="inner" v-for="itemTwo,indexTwo in item.children">
+              <template v-if="item.children && item.children.length > 0">
+                <div class="inner" v-for="(itemTwo, indexTwo) in item.children">
                   <div class="tit tit1">
-                    <div class="name" v-if="itemTwo.meta&&itemTwo.meta.title">
-                      <i :class="itemTwo.meta.icon" style="display:inline" v-if="itemTwo.meta.icon"></i>
-                      {{generateTitle(itemTwo.meta)}}
+                    <div class="name" v-if="itemTwo.meta && itemTwo.meta.title">
+                      <i
+                        :class="itemTwo.meta.icon"
+                        style="display: inline"
+                        v-if="itemTwo.meta.icon"
+                      ></i>
+                      {{ generateTitle(itemTwo.meta) }}
                     </div>
                     <ul>
-                      <li @click="clickOne(itemThree)" v-for="itemThree,indexThree in itemTwo.children">
-                        <a href="javascript:void(0)"
-                           v-if="itemThree.meta&&itemThree.meta.title">
-                          <i :class="itemThree.meta.icon" style="display:inline" v-if="itemThree.meta.icon"></i>
-                          {{generateTitle(itemThree.meta)}}
+                      <li
+                        @click="clickOne(itemThree)"
+                        v-for="(itemThree, indexThree) in itemTwo.children"
+                      >
+                        <a
+                          href="javascript:void(0)"
+                          v-if="itemThree.meta && itemThree.meta.title"
+                        >
+                          <i
+                            :class="itemThree.meta.icon"
+                            style="display: inline"
+                            v-if="itemThree.meta.icon"
+                          ></i>
+                          {{ generateTitle(itemThree.meta) }}
                         </a>
                       </li>
                     </ul>
@@ -47,121 +78,127 @@
     </div>
   </div>
 </template>
+
 <script>
-  import {mapGetters} from 'vuex'
-  import Hamburger from './Hamburger'
+import { mapGetters } from 'vuex'
+import Hamburger from './Hamburger'
 
-  export default {
-    name: 'SidebarItem',
-    components: {
-      Hamburger,
+export default {
+  name: 'SidebarItem',
+  components: {
+    Hamburger,
+  },
+  props: {
+    routes: {
+      type: Array,
     },
-    props: {
-      routes: {
-        type: Array
+  },
+  data() {
+    return {
+      menuVisitUrl: '',
+      menuSelUrl: '',
+      isShow: false,
+    }
+  },
+  mounted() {},
+  methods: {
+    generateTitle(meta) {
+      if (this.$i18n.locale == 'zh') {
+        return meta.title //i18n wxl
+      } else {
+        return meta.enTitle //
       }
+      //return this.$t('route.' + title)
     },
-    data() {
-      return {
-        menuVisitUrl: "",
-        menuSelUrl: "",
-        isShow: false
+    mouseOver(e) {
+      if (this.isShow == true) {
+        return
       }
-    },
-    mounted() {
-
-    },
-    methods: {
-      generateTitle(meta) {
-
-        if (this.$i18n.locale == 'zh') {
-          return meta.title//i18n wxl
-        } else {
-          return meta.enTitle//
-        }
-        //return this.$t('route.' + title)
-      },
-      mouseOver(e) {
-        if (this.isShow == true) {
-          return
-        }
-        let outerheight = document.getElementsByClassName('hd-header')[0].clientHeight
-        let subcls = e.currentTarget.getElementsByClassName('subitem')[0]
-        e.currentTarget.classList.add('layer')
-        subcls.style.left = e.currentTarget.offsetWidth - 10 + "px";
-        subcls.style.position = 'fixed'
-        subcls.style.overflow = 'auto'
-        //距离页面顶的距离
-        let itemTop = e.currentTarget.offsetTop - this.$refs.scrollbar.wrap.scrollTop + outerheight + this.$refs.menuSvg.clientHeight
-        let menuHeight = subcls.clientHeight;
-        let windowHeigth = document.body.clientHeight;
-        if ((itemTop + menuHeight) > windowHeigth) {
-          if (itemTop + +e.currentTarget.clientHeight - menuHeight < 0) {
-            subcls.style.top = '0px'
-            subcls.style.bottom = '0px'
-          } else {
-            subcls.style.top = itemTop + e.currentTarget.clientHeight - menuHeight + "px";
-            // subcls.style.bottom = '0px'
-          }
+      let outerheight =
+        document.getElementsByClassName('hd-header')[0].clientHeight
+      let subcls = e.currentTarget.getElementsByClassName('subitem')[0]
+      e.currentTarget.classList.add('layer')
+      subcls.style.left = e.currentTarget.offsetWidth - 10 + 'px'
+      subcls.style.position = 'fixed'
+      subcls.style.overflow = 'auto'
+      //距离页面顶的距离
+      let itemTop =
+        e.currentTarget.offsetTop -
+        this.$refs.scrollbar.wrap$.scrollTop +
+        outerheight +
+        this.$refs.menuSvg.clientHeight
+      let menuHeight = subcls.clientHeight
+      let windowHeigth = document.body.clientHeight
+      if (itemTop + menuHeight > windowHeigth) {
+        if (itemTop + +e.currentTarget.clientHeight - menuHeight < 0) {
+          subcls.style.top = '0px'
+          subcls.style.bottom = '0px'
         } else {
-          subcls.style.top = itemTop + "px";
+          subcls.style.top =
+            itemTop + e.currentTarget.clientHeight - menuHeight + 'px'
           // subcls.style.bottom = '0px'
         }
-        this.isShow = true
-      },
-      mouseLeave(e) {
-        this.isShow = false
-        e.currentTarget.classList.remove('layer')
-      },
-      clickOne(item) {
-
-        if (!item.path && !item.redirect) {
-          return false
-        }
-        let obj = {path: item.path ? item.path : item.url, menuId: item.menuId, title: item.meta.title}
-        //记录菜单点击
-        this.$http.post('/webresources/login/com/ComMenuHistory/menuClick', obj).then(response => {
-          this.menuSelUrl = this.menuVisitUrl;
-        });
-        if (item.meta.type === "2") {
-          if (item.redirect) {
-            window.open(item.redirect, '_blank');
-          } else {
-            let routeData = this.$router.resolve({
-              name: item.name,
-              params: item.meta.addQuery
-            });
-            window.open(routeData.href, '_blank');
-          }
+      } else {
+        subcls.style.top = itemTop + 'px'
+        // subcls.style.bottom = '0px'
+      }
+      this.isShow = true
+    },
+    mouseLeave(e) {
+      this.isShow = false
+      e.currentTarget.classList.remove('layer')
+    },
+    clickOne(item) {
+      if (!item.path && !item.redirect) {
+        return false
+      }
+      let obj = {
+        path: item.path ? item.path : item.url,
+        menuId: item.menuId,
+        title: item.meta.title,
+      }
+      //记录菜单点击
+      this.$http
+        .post('/webresources/login/com/ComMenuHistory/menuClick', obj)
+        .then((response) => {
+          this.menuSelUrl = this.menuVisitUrl
+        })
+      if (item.meta.type === '2') {
+        if (item.redirect) {
+          window.open(item.redirect, '_blank')
         } else {
-          this.$router.push({
+          let routeData = this.$router.resolve({
             name: item.name,
-            params: item.meta.addQuery
-          });
+            params: item.meta.addQuery,
+          })
+          window.open(routeData.href, '_blank')
         }
-      },
-      toggleSideBar() {
-        this.$store.dispatch('toggleSideBar')
-      },
+      } else {
+        this.$router.push({
+          name: item.name,
+          params: item.meta.addQuery,
+        })
+      }
     },
-    computed: {
-      ...mapGetters([
-        'sidebar',
-      ])
+    toggleSideBar() {
+      this.$store.dispatch('toggleSideBar')
     },
-  }
-
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+  },
+}
 </script>
+
 <style lang="scss" scoped>
-  @import 'css/menu.css'; // normalize.css 样式格式化
-  .product_sort {
-    :deep(.el-scrollbar__wrap) {
-      overflow-x: hidden;
-    }
+@import 'css/menu.css'; // normalize.css 样式格式化
+.product_sort {
+  :deep(.el-scrollbar__wrap) {
+    overflow-x: hidden;
+  }
 
-    :deep(.is-horizontal) {
-      height: 0;
-    }
+  :deep(.is-horizontal) {
+    height: 0;
   }
+}
 </style>
-