hd-idevvue3 3.0.0 → 3.0.2

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

@@ -0,0 +1,225 @@
+<template>
+  <div :class="{'show':show}" class="header-search">
+    <svg @click="click" class="search-icon screenfull-svg" height="32" viewBox="-10 -10 150 150"
+         width="32" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/>
+    </svg>
+    <el-select
+      :placeholder="$t('菜单查询')"
+      :remote-method="querySearch"
+      @change="change"
+      class="header-search-select"
+      default-first-option
+      filterable
+      ref="headerSearchSelect"
+      remote
+      v-model="search"
+    >
+      <el-option-group :key="$t('检索菜单')" :label="$t('检索菜单')" v-if="options1.length>0">
+        <el-option :key="index" :label="item.title.join(' > ')" :value="item" v-for="item,index in options1"/>
+      </el-option-group>
+      <el-option-group :key="$t('更多结果')" :label="$t('更多结果')" v-if="options2.length>0">
+        <el-option :key="index" :label="item.text" :value="item" v-for="item,index in options2"/>
+      </el-option-group>
+    </el-select>
+  </div>
+</template>
+
+<script>
+  import Fuse from 'fuse.js'
+  import path from 'path'
+
+  export default {
+    name: 'ElasticSearch',
+    data() {
+      return {
+        search: '',
+        options1: [],
+        options2: [],
+        searchPool: [],
+        show: false,
+        fuse: undefined
+      }
+    },
+    computed: {
+      routes() {
+        return this.$store.state.permission.hdMenu;
+      },
+      lang() {
+        return this.$store.getters.language
+      }
+    },
+    watch: {
+      lang() {
+        this.searchPool = this.generateRoutes(this.routes)
+      },
+      routes() {
+        this.searchPool = this.generateRoutes(this.routes)
+      },
+      searchPool(list) {
+        this.initFuse(list)
+      },
+      show(value) {
+        if (value) {
+          document.body.addEventListener('click', this.close)
+        } else {
+          document.body.removeEventListener('click', this.close)
+        }
+      }
+    },
+    mounted() {
+      this.searchPool = this.generateRoutes(this.routes)
+    },
+    methods: {
+      click() {
+        this.show = !this.show
+        if (this.show) {
+          this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+        }
+      },
+      close() {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+        this.options1 = [];
+        this.options2 = [];
+        this.show = false
+      },
+      change(val) {
+        this.$router.push(val.path)
+        this.search = ''
+        this.options1 = [];
+        this.options2 = [];
+        this.$nextTick(() => {
+          this.show = false
+        })
+      },
+      initFuse(list) {
+        this.fuse = new Fuse(list, {
+          shouldSort: true,
+          threshold: 0.4,
+          location: 0,
+          distance: 100,
+          maxPatternLength: 32,
+          minMatchCharLength: 1,
+          keys: [{
+            name: 'title',
+            weight: 0.7
+          }, {
+            name: 'path',
+            weight: 0.3
+          }]
+        })
+      },
+      // Filter out the routes that can be displayed in the sidebar
+      // And generate the internationalized title
+      generateRoutes(routes, basePath = '/', prefixTitle = []) {
+        let res = []
+        for (const router of routes) {
+          // skip hidden router
+          if (router.hidden) {
+            continue
+          }
+
+          const data = {
+            path: path.resolve(basePath, router.path),
+            title: [...prefixTitle]
+          }
+
+          if (router.meta && router.meta.title) {
+            // generate internationalized title
+            const i18ntitle = this.$i18n.locale == 'zh' ? router.meta.title : router.meta.enTitle;
+
+            data.title = [...data.title, i18ntitle]
+
+            if (router.redirect !== 'noredirect') {
+              // only push the routes with title
+              // special case: need to exclude parent router without redirect
+              res.push(data)
+            }
+          }
+
+          // recursive child routes
+          if (router.children) {
+            const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+            if (tempRoutes.length >= 1) {
+              res = [...res, ...tempRoutes]
+            }
+          }
+        }
+
+        return res
+      },
+      querySearch(query) {
+        if (query !== '') {
+          this.options1 = this.fuse.search(query)
+        } else {
+          this.options1 = []
+        }
+
+        if (this.$store.state.app.elsearch) {//
+          this.options2 = [{text: this.$t('加载中...')}];
+          this.$http.get(`/webresources/login/com/ComSearch/search?q=${query}&type=${this.$i18n.locale}`).then(response => {
+
+            this.options2 = [];
+            response.data.forEach(v => {
+              let t = v.menuPath.reverse().join('=>')
+              if (this.$i18n.locale == 'en') {
+                t = v.menuEnPath.reverse().join('=>')
+              }
+
+              this.options2.push({
+                path: '/' + v.menuUrl + '?q=' + query,
+                text: t + '=>' + v.content
+              })
+            })
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .header-search {
+    font-size: 0 !important;
+
+    .search-icon {
+      font-size: 18px;
+      vertical-align: middle;
+      display: inline-block;
+      cursor: pointer;
+      fill: #e4e9ef;
+      /* width: 20px;
+       height: 20px;
+       vertical-align: 10px;*/
+    }
+
+    .header-search-select {
+      font-size: 18px;
+      transition: width 0.2s;
+      width: 0;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+
+      :deep(.el-input__inner) {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+
+    &.show {
+      .header-search-select {
+        width: 150px;
+        margin-left: 10px;
+      }
+    }
+  }
+</style>

package/src/views/layout/header/HZRecorder.js

@@ -0,0 +1,231 @@
+var audioContext = null;
+
+(function (window) {
+  // 兼容
+  window.URL = window.URL || window.webkitURL;
+  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+  var audoStream = null;
+  var HZRecorder = function (stream, config) {
+    config = config || {};
+    config.sampleBits = config.sampleBits || 16;      // 采样数位 8, 16
+    config.sampleRate = config.sampleRate || (8000);   // 采样率(1/6 44100)
+    if (!audioContext) {
+      audioContext = new AudioContext();
+    }
+    audoStream = stream;
+    var context = audioContext;
+    var audioInput = context.createMediaStreamSource(stream);
+    var recorder = context.createScriptProcessor(4096, 1, 1);
+    var audioData = {
+      size: 0          // 录音文件长度
+      , buffer: []     // 录音缓存
+      , inputSampleRate: context.sampleRate    // 输入采样率
+      , inputSampleBits: 16       // 输入采样数位 8, 16
+      , outputSampleRate: config.sampleRate    // 输出采样率
+      , oututSampleBits: config.sampleBits       // 输出采样数位 8, 16
+      , input: function (data) {
+        this.buffer.push(new Float32Array(data));
+        this.size += data.length;
+      }
+      , compress: function () { // 合并压缩
+        // 合并
+        var data = new Float32Array(this.size);
+        var offset = 0;
+        for (var i = 0; i < this.buffer.length; i++) {
+          data.set(this.buffer[i], offset);
+          offset += this.buffer[i].length;
+        }
+        // 压缩
+        var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
+        var length = data.length / compression;
+        var result = new Float32Array(length);
+        var index = 0, j = 0;
+        while (index < length) {
+          result[index] = data[j];
+          j += compression;
+          index++;
+        }
+        return result;
+      }
+      , encodeWAV: function () {
+        var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
+        var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
+        var bytes = this.compress();
+        var dataLength = bytes.length * (sampleBits / 8);
+        var buffer = new ArrayBuffer(44 + dataLength);
+        var data = new DataView(buffer);
+
+        var channelCount = 1;// 单声道
+        var offset = 0;
+
+        var writeString = function (str) {
+          for (var i = 0; i < str.length; i++) {
+            data.setUint8(offset + i, str.charCodeAt(i));
+          }
+        }
+
+        // 资源交换文件标识符
+        writeString('RIFF');
+        offset += 4;
+        // 下个地址开始到文件尾总字节数,即文件大小-8
+        data.setUint32(offset, 36 + dataLength, true);
+        offset += 4;
+        // WAV文件标志
+        writeString('WAVE');
+        offset += 4;
+        // 波形格式标志
+        writeString('fmt ');
+        offset += 4;
+        // 过滤字节,一般为 0x10 = 16
+        data.setUint32(offset, 16, true);
+        offset += 4;
+        // 格式类别 (PCM形式采样数据)
+        data.setUint16(offset, 1, true);
+        offset += 2;
+        // 通道数
+        data.setUint16(offset, channelCount, true);
+        offset += 2;
+        // 采样率,每秒样本数,表示每个通道的播放速度
+        data.setUint32(offset, sampleRate, true);
+        offset += 4;
+        // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
+        data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true);
+        offset += 4;
+        // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
+        data.setUint16(offset, channelCount * (sampleBits / 8), true);
+        offset += 2;
+        // 每样本数据位数
+        data.setUint16(offset, sampleBits, true);
+        offset += 2;
+        // 数据标识符
+        writeString('data');
+        offset += 4;
+        // 采样数据总数,即数据总大小-44
+        data.setUint32(offset, dataLength, true);
+        offset += 4;
+        // 写入采样数据
+        if (sampleBits === 8) {
+          for (var i = 0; i < bytes.length; i++, offset++) {
+            var s = Math.max(-1, Math.min(1, bytes[i]));
+            var val = s < 0 ? s * 0x8000 : s * 0x7FFF;
+            val = parseInt(255 / (65535 / (val + 32768)));
+            data.setInt8(offset, val, true);
+          }
+        } else {
+          for (var i = 0; i < bytes.length; i++, offset += 2) {
+            var s = Math.max(-1, Math.min(1, bytes[i]));
+            data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+          }
+        }
+
+        return new Blob([data], {type: 'audio/wav'});
+      }
+    };
+
+    // 开始录音
+    this.start = function () {
+      audioInput.connect(recorder);
+      recorder.connect(context.destination);
+    }
+
+    // 停止
+    this.stop = function () {
+      if (audioContext) {
+        audioContext.close();
+      }
+      audoStream.getTracks()[0].stop();
+      audioContext = null;
+    }
+
+    // 获取音频文件
+    this.getBlob = function () {
+      // this.stop();
+      return audioData.encodeWAV();
+    }
+
+    // 回放
+    this.play = function (audio) {
+      audio.src = window.URL.createObjectURL(this.getBlob());
+    }
+
+    // 上传
+    this.upload = function (url, callback) {
+      var fd = new FormData();
+      fd.append("file", this.getBlob());
+      fd.append('mp3Name', "myname.wav");
+      var xhr = new XMLHttpRequest();
+      if (callback) {
+        xhr.upload.addEventListener("progress", function (e) {
+          callback('uploading', e);
+        }, false);
+        xhr.addEventListener("load", function (e) {
+          callback('ok', e);
+        }, false);
+        xhr.addEventListener("error", function (e) {
+          callback('error', e);
+        }, false);
+        xhr.addEventListener("abort", function (e) {
+          callback('cancel', e);
+        }, false);
+      }
+      xhr.open("POST", url);
+      xhr.send(fd);
+    }
+
+    // 音频采集
+    recorder.onaudioprocess = function (e) {
+      audioData.input(e.inputBuffer.getChannelData(0));
+      // record(e.inputBuffer.getChannelData(0));
+    }
+
+  };
+  // 抛出异常
+  HZRecorder.throwError = function (message) {
+    alert(message);
+    throw new function () {
+      this.toString = function () {
+        return message;
+      }
+    }
+  }
+  // 是否支持录音
+  HZRecorder.canRecording = (navigator.getUserMedia != null);
+  // 获取录音机
+  HZRecorder.get = function (callback, config) {
+    if (callback) {
+      if (navigator.getUserMedia) {
+        navigator.getUserMedia(
+          {audio: true} // 只启用音频
+          , function (stream) {
+            var rec = new HZRecorder(stream, config);
+            callback(rec);
+          }
+          , function (error) {
+            switch (error.code || error.name) {
+              case 'PERMISSION_DENIED':
+              case 'PermissionDeniedError':
+                HZRecorder.throwError(this.$t('用户拒绝提供信息。'));
+                break;
+              case 'NOT_SUPPORTED_ERROR':
+              case 'NotSupportedError':
+                HZRecorder.throwError(this.$t('浏览器不支持硬件设备。'));
+                break;
+              case 'MANDATORY_UNSATISFIED_ERROR':
+              case 'MandatoryUnsatisfiedError':
+                HZRecorder.throwError(this.$t('无法发现指定的硬件设备。'));
+                break;
+              default:
+                HZRecorder.throwError(this.$t('无法打开麦克风。异常信息:') + (error.code || error.name));
+                break;
+            }
+          });
+      } else {
+        HZRecorder.throwErr(this.$t('当前浏览器不支持录音功能。'));
+        return;
+      }
+    }
+  }
+
+  window.HZRecorder = HZRecorder;
+
+})(window);

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

@@ -0,0 +1,198 @@
+<template>
+  <div :class="{'show':show}" class="header-search">
+    <svg @click="click" class="search-icon screenfull-svg" height="32" viewBox="-10 -10 150 150"
+         width="32" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/>
+    </svg>
+    <el-select
+      :remote-method="querySearch"
+      @change="change"
+      class="header-search-select"
+      default-first-option
+      filterable
+      :placeholder="$t('菜单查询')"
+      ref="headerSearchSelect"
+      remote
+      v-model="search"
+    >
+      <el-option :key="item.path" :label="item.title.join(' > ')" :value="item" v-for="item in options"/>
+    </el-select>
+  </div>
+</template>
+
+<script>
+  import Fuse from 'fuse.js'
+  import path from 'path'
+
+  export default {
+    name: 'HeaderSearch',
+    data() {
+      return {
+        search: '',
+        options: [],
+        searchPool: [],
+        show: false,
+        fuse: undefined
+      }
+    },
+    computed: {
+      routes() {
+        return this.$store.state.permission.hdMenu;
+      },
+      lang() {
+        return this.$store.getters.language
+      }
+    },
+    watch: {
+      lang() {
+        this.searchPool = this.generateRoutes(this.routes)
+      },
+      routes() {
+        this.searchPool = this.generateRoutes(this.routes)
+      },
+      searchPool(list) {
+        this.initFuse(list)
+      },
+      show(value) {
+        if (value) {
+          document.body.addEventListener('click', this.close)
+        } else {
+          document.body.removeEventListener('click', this.close)
+        }
+      }
+    },
+    mounted() {
+      this.searchPool = this.generateRoutes(this.routes)
+    },
+    methods: {
+      click() {
+        this.show = !this.show
+        if (this.show) {
+          this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+        }
+      },
+      close() {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+        this.options = []
+        this.show = false
+      },
+      change(val) {
+        this.$router.push(val.path)
+        this.search = ''
+        this.options = []
+        this.$nextTick(() => {
+          this.show = false
+        })
+      },
+      initFuse(list) {
+        this.fuse = new Fuse(list, {
+          shouldSort: true,
+          threshold: 0.4,
+          location: 0,
+          distance: 100,
+          maxPatternLength: 32,
+          minMatchCharLength: 1,
+          keys: [{
+            name: 'title',
+            weight: 0.7
+          }, {
+            name: 'path',
+            weight: 0.3
+          }]
+        })
+      },
+      // Filter out the routes that can be displayed in the sidebar
+      // And generate the internationalized title
+      generateRoutes(routes, basePath = '/', prefixTitle = []) {
+        let res = []
+        for (const router of routes) {
+          // skip hidden router
+          if (router.hidden) {
+            continue
+          }
+
+          const data = {
+            path: path.resolve(basePath, router.path),
+            title: [...prefixTitle]
+          }
+
+          if (router.meta && router.meta.title) {
+            // generate internationalized title
+            const i18ntitle = this.$i18n.locale == 'zh' ? router.meta.title : router.meta.enTitle;
+
+            data.title = [...data.title, i18ntitle]
+
+            if (router.redirect !== 'noredirect') {
+              // only push the routes with title
+              // special case: need to exclude parent router without redirect
+              res.push(data)
+            }
+          }
+
+          // recursive child routes
+          if (router.children) {
+            const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+            if (tempRoutes.length >= 1) {
+              res = [...res, ...tempRoutes]
+            }
+          }
+        }
+
+        return res
+      },
+      querySearch(query) {
+        if (query !== '') {
+          this.options = this.fuse.search(query)
+        } else {
+          this.options = []
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .header-search {
+    font-size: 0 !important;
+
+    .search-icon {
+      font-size: 18px;
+      vertical-align: middle;
+      display: inline-block;
+      cursor: pointer;
+      fill: #e4e9ef;
+      /* width: 20px;
+       height: 20px;
+       vertical-align: 10px;*/
+    }
+
+    .header-search-select {
+      font-size: 18px;
+      transition: width 0.2s;
+      width: 0;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+
+      :deep(.el-input__inner) {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+
+    &.show {
+      .header-search-select {
+        width: 150px;
+        margin-left: 10px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+  <el-breadcrumb class="app-levelbar" separator="/">
+    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
+      <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.name}}</span>
+      <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  methods: {
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.name)
+/*      const first = matched[0]
+      if (first && (first.name !== '首页' || first.path !== '')) {
+        matched = [{ name: '首页', path: '/' }].concat(matched)
+      }*/
+      this.levelList = matched
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-levelbar.el-breadcrumb {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 50px;
+    margin-left: 10px;
+    .no-redirect {
+      color: #97a8be;
+      cursor: text;
+    }
+  }
+</style>