hd-idevvue3 3.0.0 → 3.0.1

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

@@ -0,0 +1,97 @@
+<script>
+  import './HZRecorder.js'
+
+  export default {
+    name: 'VocRec',
+    components: {},
+    mounted() {
+      this.vocRec()
+    },
+    data() {
+      return {
+        vocTimeHandle: null,
+        vocTime: 0,//录制的毫秒数,低于1秒的丢弃
+        recorder: null,
+        hotKeyDown: false,
+        isRecording: false//是否正在录音由于录音设备异步问题,需要标志位控制
+        //log: errLogStore.state.errLog
+      }
+    },
+    methods: {
+      vocHotKey() {
+        if (!this.hotKeyDown) {
+          this.hotKeyDown = true
+          this.startRecording()
+        } else {
+          this.hotKeyDown = false
+          this.endRecording();
+        }
+      },
+      vocRec() {
+        $(".mainHeader .mike").mousedown(() => {
+          console.info('startClick')
+          this.startRecording()
+        });
+
+        $(".mainHeader .mike").mouseup(() => {
+          this.endRecording();
+        });
+      },
+      startRecording() {
+        this.isRecording = true
+        HZRecorder.get((rec) => {
+          this.recorder = rec;
+          if (this.isRecording) {//还未启动就释放的
+            this.recorder.start();
+          } else {
+            this.recorder.stop();
+          }
+        })
+        this.vocTime = new Date().getTime()
+        this.$message({
+          message: this.$t('正在录音...'),
+          type: 'warn',
+          duration: 999999,
+          showClose: true
+        })
+      },
+      endRecording() {
+        this.stopRecording()
+        this.$message.closeAll()
+        let nowTime = new Date().getTime()
+        if (nowTime - this.vocTime < 1000) {//低于一秒的录制不处理
+          return false
+        }
+        this.uploadAudio()
+      },
+      uploadAudio() {//doClose是否关闭录音,repeate是否同时上传
+        this.recorder.upload("/webresources/login/com/comwav/vocRec", (state, e) => {
+          switch (state) {
+            case 'uploading':
+              //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
+              break;
+            case 'ok':
+              var genJson = eval('(' + e.target.responseText + ')');
+              if (genJson.message) {
+                if (genJson.code == '1') {//根据id打开菜单
+                  this.$router.push({name: genJson.message})
+                } else {
+                  this.$store.state.app.vocRec = genJson.message//识别为拼音名
+                  console.info(genJson.message)
+                }
+              }
+              break;
+            case 'error':
+              break;
+            case 'cancel':
+              break;
+          }
+        });
+      },
+      stopRecording() {//停止录音
+        this.isRecording = false
+        this.recorder.stop();
+      }
+    }
+  }
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+
+  <el-dialog title="修改密码" :visible.sync="visiable">
+    <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>
+          </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>
+          </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>
+          </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>
+    </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()
+        }
+      }
+      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
+        },
+        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

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

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

@@ -0,0 +1,45 @@
+<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>

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

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div class="menuSvg" ref="menuSvg">
+      <hamburger :isActive="sidebar.opened" :toggleClick="toggleSideBar" class="hamburger-container"></hamburger>
+    </div>
+    <div class="product_sort">
+      <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 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>
+                <!--<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="line"></div>
+            <div class="subitem">
+
+              <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>
+                    <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)}}
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+<script>
+  import {mapGetters} from 'vuex'
+  import Hamburger from './Hamburger'
+
+  export default {
+    name: 'SidebarItem',
+    components: {
+      Hamburger,
+    },
+    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)
+      },
+      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'
+          }
+        } 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 {
+            let routeData = this.$router.resolve({
+              name: item.name,
+              params: item.meta.addQuery
+            });
+            window.open(routeData.href, '_blank');
+          }
+        } else {
+          this.$router.push({
+            name: item.name,
+            params: item.meta.addQuery
+          });
+        }
+      },
+      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;
+    }
+
+    /deep/ .is-horizontal {
+      height: 0;
+    }
+  }
+</style>
+

package/src/views/layout/menu/css/menu.css

@@ -0,0 +1,288 @@
+@charset "utf-8";
+/* CSS Document */
+
+ul, ol {
+  list-style: none;
+}
+
+/*清除浮动*/
+.clearfix:after {
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.clearfix {
+  display: inline-table;
+}
+
+* html .clearfix {
+  height: 1%;
+}
+
+.clearfix {
+  display: block;
+}
+
+.ma {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.w980 {
+  width: 980px;
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.product_sortBg {
+  background-color: #ededed;
+}
+
+/*.fa{ margin-right:5px;}*/
+
+/*缩进按钮*/
+.menuSvg {
+  height: 30px;
+  background-color: #ededed;
+  border-bottom: solid 1px #bbb;
+  text-align: center;
+  color: #f0f0f0;
+  padding-top: 5px;
+}
+
+.hamburger[data-v-4e6f274c] {
+  width: 16px !important;
+  height: 16px !important;
+  fill: #bbbbbb;
+}
+
+.scroll-container .scroll-wrapper { /*background-color:#666666;*/
+}
+
+/*菜单的高度 height:calc(100vh + 70px)  70 对应ScrllBar\index.vue 32 行的判断尺寸*/
+.product_sort { /*border-bottom:solid 1px #3299fd;border-right:solid 1px #3299fd;*/
+  height: calc(100vh - 80px);
+  position: relative;
+  z-index: 999;
+}
+
+.product_sort .hd {
+  line-height: 40px;
+  text-indent: 20px;
+  font-size: 15px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.product_sort .bd {
+  padding-bottom: 10px;
+}
+
+.product_sort .bd .item {
+  border-bottom: solid 1px #bbb;
+  height: 50px;
+  position: relative;
+}
+
+.product_sort .bd .item .title {
+  text-indent: 13px;
+  height: 50px;
+  overflow: hidden;
+  line-height: 50px;
+  font-size: 15px;
+  font-weight: bold;;
+}
+
+.product_sort .bd .item .title a {
+  position: relative;
+}
+
+.product_sort .bd .item .title .fa {
+  font-size: 16px;
+  margin-right: 5px;
+  width: 20px !important;
+  height: 20px !important;
+  display: block !important;
+  float: left;
+  margin-top: 15px;
+}
+
+/*选择和不被选择时的背景色*/
+.product_sortSelected {
+  background-color: #409EFF;
+}
+
+.product_sortUnselected {
+  background-color: #666666;
+}
+
+/*二级弹出菜单结束*/
+.product_sortTwo {
+  width: 820px;
+  min-height: 30px;
+  max-height: 400px;
+  overflow-y: auto;
+  position: absolute;
+  left: 142px;
+  padding-top: 10px;
+  padding-bottom: 5px;
+  border: 1px solid #b6b6b6;
+  color: #494949;
+  background: #FFF;
+}
+
+.product_sortTwoDiv {
+  width: 770px;
+  float: left;
+  margin-left: 25px;
+  margin-bottom: 5px;
+  padding-bottom: 0px;
+}
+
+.product_sortTwoBottomLine {
+  border: 0px;
+  padding-bottom: 0px;
+}
+
+.product_sortSpan {
+  color: #0555a6;
+  font-weight: bold;
+  display: block;
+  float: left;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  margin-right: 10px;
+  border-bottom: 1px solid #ccc;
+}
+
+.product_sortSpan a {
+  display: inline-block;
+}
+
+.product_sortTwoMenu {
+  width: 100%;
+  float: left;
+  margin-top: 5px;
+}
+
+.product_sortTwoMenu > a {
+  min-width: 50px;
+  width: auto !important;
+  height: 30px;
+  line-height: 30px;
+  float: left;
+  color: #646464;
+  display: block;
+  margin-right: 10px;
+}
+
+.product_sortTwoMenu a:hover {
+  color: #888;
+}
+
+.product_sortTwo678 {
+  width: 850px;
+  min-height: 30px;
+  height: auto !important;
+  position: absolute;
+  left: 142px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border: 1px solid #b6b6b6;
+  color: #494949;
+  background: #FFF;
+  bottom: 0px;
+}
+
+.product_sortTwo9 {
+  width: 850px;
+  min-height: 30px;
+  height: auto !important;
+  position: absolute;
+  left: 142px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border: 1px solid #b6b6b6;
+  color: #494949;
+  background: #FFF;
+  bottom: 0px;
+}
+
+/*二级弹出菜单结束*/
+
+.product_sort .bd .item .list {
+  padding-left: 5px;
+  height: 30px;
+  line-height: 30px;
+  overflow: hidden;
+}
+
+.product_sort .bd .item .list a {
+  color: #333;
+}
+
+.product_sort .bd .item .list a:hover {
+  text-decoration: underline;
+}
+
+.product_sort .bd .item .arrow {
+  font-size: 12px;
+  color: #333;
+  position: absolute;
+  right: 10px;
+  top: 18px;
+}
+
+.product_sort .bd .menuvisit .arrow {
+  font-size: 12px;
+  color: white;
+  position: absolute;
+  right: 10px;
+  top: 18px;
+}
+
+.product_sort .bd .item .line {
+  position: absolute;
+  right: -2px;
+  top: 0px;
+  width: 2px;
+  height: 55px;
+  background-color: #fff;
+  z-index: 999;
+  display: none;
+}
+
+.product_sort .bd .item .subitem {
+  display: none;
+}
+
+.product_sort .bd .layer .line {
+  display: block;
+}
+
+.product_sort .bd .layer .arrow {
+  display: block;
+}
+
+.product_sort .bd .layer .subitem {
+  width: 731px;
+  background: #fff;
+  border: solid 1px #dbd4d5;
+  border-left: none;
+  position: absolute;
+  top: -1px;
+  z-index: 999;
+  min-height: 55px;
+  height: auto !important;
+  height: 55px;
+  padding: 10px 20px;
+  display: block;
+}
+
+