hd-idevvue3 3.0.0 → 3.0.1

package/src/hdcom/HdHotKey.vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-shortkey="keyMap" @shortkey="doMethod" v-if="isFocus"></div>
+</template>
+
+<script>
+  /**
+   * 通常不需要直接调用,HdButton中已经集成,不需要绑定按钮的快捷键,可能用到
+   * @module HdHotKey
+   */
+  export default {
+    name: 'HdHotKey',
+    data() {
+      return {
+        isFocus: false,
+        rangeThis: {} // 快捷键有效区域
+      }
+    },
+    // hdResult展示 hdQuery查询 defaultSort默认排序 pageHide true隐藏分页
+    props: ['keyMap', 'hotKeyRange'],
+    created() {
+      this.rangeThis = this.getRangeThis()
+      this.$set(this.$store.state, 'IdevFocus', -1) // 必须在watch之前先初始化
+    },
+    mounted() {
+      this.$nextTick(() => {
+        if (this.rangeThis) {
+          const rgThisEl = this.rangeThis.$el
+          rgThisEl.onmouseenter = () => {
+            if (this.$store.state.hotKey != "-1")//aside拖动时,会有样式干扰
+              this.$set(this.$store.state, 'IdevFocus', this.rangeThis._uid)
+          }
+          rgThisEl.onmouseleave = () => {
+            this.$set(this.$store.state, 'IdevFocus', '-1')
+            // this.$set(this.$route.meta, 'focusAreaId', "-1")
+          }
+        }
+      })
+    },
+    methods: {
+      getRangeThis() {
+        let par = this.$parent
+        while (par) {
+          if (par.$options._componentTag == this.hotKeyRange) {
+            return par
+          }
+          par = par.$parent
+        }
+        return null
+      },
+
+      doMethod(e) {
+        this.$emit('do', e)
+      }
+    },
+    watch: {
+      '$store.state.IdevFocus'() {
+        if (!this.rangeThis) {
+          return false
+        }
+        const rgThisEl = this.rangeThis.$el
+        if (rgThisEl) {
+          if (this.$store.state.IdevFocus == this.rangeThis._uid) {
+            this.isFocus = true
+            //rgThisEl.classList.add("mouseEnter");
+          } else {
+            //rgThisEl.classList.remove("mouseEnter");
+            this.isFocus = false
+          }
+        }
+      }
+    }
+  }
+</script>
+<style rel="stylesheet/scss" lang="scss">
+  .mouseEnter {//1.15 wxl去掉用途不大
+    /*border-width: 0 0 2px 0;*/
+    /*border-color: #2d8ac7;*/
+    /*border-style: solid;*/
+    //padding: 1px;
+  }
+</style>

package/src/hdcom/HdInputHint.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-autocomplete
+    :fetch-suggestions="querySearch"
+    :placeholder="$t(placeholder)"
+    :value="value"
+    @input="v=>$emit('input', v)"
+    @select="handleSelect"
+    style="width:100%"
+  ></el-autocomplete>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [],
+      };
+    },
+    props: ['value', 'field', 'placeholder'],
+    mounted() {
+      this.doQuery();
+    },
+    methods: {
+      doQuery() {
+        let quUrl = '/webresources/login/privilege/SysCode/findAll?fieldCod=' + this.field
+        this.$http.get(quUrl).then(response => {
+          response.data.forEach(v => {
+            this.options.push({value: v.name})
+          });
+        })
+      },
+      querySearch(queryString, cb) {
+        console.info(this.options)
+        let results = queryString ? this.options.filter(this.createFilter(queryString)) : this.options;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (dropLs) => {
+          return (dropLs.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect(item) {
+        this.$emit('input', item.value)
+      }
+    }
+  }
+</script>
+

package/src/hdcom/HdMain.vue

@@ -0,0 +1,43 @@
+<template>
+  <ExMain v-bind="$attrs" class="hdMain">
+    <template v-if="title">
+      <div class="hd-title">{{$t(title)}}
+        <slot name="title"></slot>
+      </div>
+    </template>
+    <div style="flex:1;height: 100%;position: relative;  ">
+      <!--需要这样写 上下布局-->
+      <div style="position: absolute; width: 100%;height: 100%;">
+        <slot></slot>
+      </div>
+    </div>
+
+  </ExMain>
+</template>
+
+<script>
+
+  /**
+   * 覆写ElMain,增加title
+   * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
+   * @module HdMain
+   */
+  export default {
+    name: 'HdMain',
+    component: {},
+    props: ['title'],
+    inheritAttrs: false,
+    data() {
+      return {}
+    },
+    mounted() {
+    }
+  }
+
+</script>
+<style rel="stylesheet/scss" lang="scss">
+  .hdMain {
+    display: flex !important;//在主题切换时,会被el-main取消,所以需要important
+    flex-direction: column;
+  }
+</style>

package/src/hdcom/HdMessage.vue

@@ -0,0 +1,192 @@
+<template>
+</template>
+<script>
+
+  /**
+   * websocket消息
+   * @module HdMessage
+   */
+  export default {
+    name: 'HdMessage',
+    data() {
+      return {
+        hdQuery: new HdQuery(this),
+        websocket: null,
+      }
+    },
+    /**
+     * prop
+     * @prop {allProto} 完整格式 如 wss://gctos.huadong.net/ws,与ipAddr和port互斥
+     * @prop {String} ipAddr 有值时,使用该值,无值时,localhost下 为localhost:8080,其它用浏览器的url
+     * @prop {Event} msgRec 消息接收的事件,类型1的会弹出系统自带的消息框
+     */
+    props: ['ipAddr', 'port', 'allProto'],
+    mounted() {
+      window._tabOpen = (path) => {//这里必须是全局的
+        if (path.indexOf('http') == 0) {//http开头的在新窗口打开
+          window.open(path);
+        } else if(path.indexOf('iframe://') == 0) {
+         // this.$refs['commsgiframe'].show(path.substring(9));
+        } else {
+          this.$router.push({
+            path: path,
+          });
+        }
+      }
+      this.init()
+      this.readMessage();
+    },
+    methods: {
+      init() {
+        this.socketConnect()
+
+        // 连接发生错误的回调方法
+        this.websocket.onerror = () => {
+          this.websocket = -1
+          console.info("连接发生错误")
+          //this.doMsg("连接发生错误");
+        };
+
+        // 连接成功建立的回调方法
+        this.websocket.onopen = () => {
+          console.info("websocket success")
+          this.doHeartConnect()//开启心跳连接
+          //this.doMsg("连接成功");
+        }
+
+        // 接收到消息的回调方法，此处添加处理接收消息方法，当前是将接收到的信息显示在网页上
+        this.websocket.onmessage = (event) => {
+          let msgObj = JSON.parse(event.data)
+          if (msgObj.msgType == -2) {//单用户登录:退出到登录页
+            this.singleLoginNotify(msgObj)
+            return false
+          }
+          //未读消息加一
+          this.$store.state.user.messageNum = this.$store.state.user.messageNum + 1;
+          if (msgObj.msgType == 1) {//type 1为普通消息,默认提示,其它类型发送给业务系统判断
+            this.doMsgObj(msgObj);
+          }
+          this.$emit('msgRec', msgObj)//父类处理事件
+        }
+
+        // 连接关闭的回调方法
+        this.websocket.onclose = () => {
+          console.info("websocket close,restart")
+          if (this.websocket != -1) {//连接错误,停止使用
+            this.websocket = null
+            this.init()//重新连接
+          }
+        }
+
+      }
+      ,
+      singleLoginNotify(msgObj) {
+        this.$notify({
+          title: '',
+          message: this.$t('该账号已在其它地方登录,5秒后将退出系统'),
+          duration: 5000,
+          onClose: () => {
+            this.$store.dispatch('LogOut').then(() => {
+              location.reload()// 为了重新实例化vue-router对象 避免bug
+            })
+          }
+        });
+      }
+      ,
+      socketConnect() {
+        // 判断当前浏览器是否支持WebSocket
+        let inPort = this.port
+        if ('WebSocket' in window) {
+          if (!this.port) {
+            inPort = '8080';
+          }
+          // let host = "127.0.0.1:8080" //window.location.host
+          let host = window.location.host //window.location.host
+          // 创建一个WebSocket连接，URL：127.0.0.1:8080/realTimeWebSocket/webSocket
+          if (host.indexOf("localhost") >= 0) {
+            host = "127.0.0.1:" + inPort
+          }
+          if (this.ipAddr) {
+            host = this.ipAddr + ":" + inPort
+          }
+          if (this.allProto) {
+            this.websocket = new WebSocket(this.allProto + "?token=" + this.$store.getters.token);
+          } else {
+            this.websocket = new WebSocket("ws://" + host + "/ws?token=" + this.$store.getters.token);
+          }
+        } else {
+          alert('当前浏览器 不支持WebSocket')
+        }
+      },
+      readMessage() {
+        this.hdQuery.query.readFlg = '0';
+        this.hdQuery.rows = '1000';
+        this.hdQuery.sort = 'sendTim'
+
+        this.$http.post('/webresources/login/com/ComMsg/find/rec', this.hdQuery).then(response => {
+            if (response.data.total === 0) {
+              return;
+            }
+            var msg = {};
+            msg.title = this.$t('消息提示');
+            msg.content = this.$t('您有{total}条未读消息', {total: response.data.total});
+            msg.url = '/privilege/commsgto'
+            this.$store.state.user.messageNum = response.data.total;
+            this.doMsgObj(msg);
+            // let data = response.data.rows;
+            // for (let i = 0; i < data.length; i++) {
+            //   this.doMsgObj(data[i]);
+            // }
+          }
+        )
+      }
+      ,
+      doMsgObj(con) {
+        let msgcon = ""
+        if (con.url) {
+          msgcon = `<a onclick="_tabOpen('${con.url}')">${con.content}</a>`
+        } else {
+          msgcon = con.content
+        }
+        //document.getElementById("video").src=require('../assets/sound/notify.wav')
+        //this.notify = new Audio(require('../assets/sound/notify.wav'));
+        this.notify = new Audio(`/webresources/login/com/comwav/txtRead?text=${con.content}`);
+        this.notify.play();
+
+        this.$notify({
+          dangerouslyUseHTMLString: true,
+          title: con.title,
+          message: msgcon,
+          duration: 10000,
+          position: 'bottom-right'
+        });
+        if (!con.msgRecId) {
+          con.msgRecId = con.recId;
+        }
+
+        //消息展示完不在把消息标为已读
+        // this.$http.post('/webresources/login/com/ComMsg/read', {recId: con.msgRecId}).then(response => {
+        //   var data = response.data;
+        //   if (data.code != '1') {
+        //     this.$message({
+        //       type: 'error',
+        //       message: data.message
+        //     })
+        //   }
+        // })
+      }
+      ,
+      doHeartConnect() {
+        setInterval(() => {
+          try {
+            if (this.websocket && this.websocket != -1) {
+              this.websocket.send('ping')
+            }
+          } catch (e) {
+            console.error(e)
+          }
+        }, 30000)
+      }
+    }
+  }
+</script>

package/src/hdcom/HdNum.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-input :clearable="false" :disabled="disabled" :step="step" @blur="myblur" @change="mychange"
+            class="hdnum" onkeypress='return( "e"!=(String.fromCharCode(event.keyCode).toLowerCase()))'
+            ref="numInput" type="number"
+            v-model.lazy="mynum"></el-input>
+</template>
+<!-- onkeypress 是为了阻止e的输入html5的问题-->
+<script>
+  /**
+   * 输入区为数字时使用,请勿直接使用el-input(校验时空处理有问题)
+   * @module HdNum
+   */
+  export default {
+    name: 'HdNum',
+    data() {
+      return {
+        mynum: null
+      }
+    },
+    inheritAttrs: false,
+    /**
+     * Props  不继承任何属性
+     * @prop {int} value 值,组件使用 v-model=""
+     * @prop {int} step 步长
+     * @prop {boolean}  disabled
+     * @change
+     * @blur
+     */
+    props: ['value', 'step', 'disabled'],
+    methods: {
+      mychange(evt) {
+        if (typeof (evt) == 'undefined' || evt === '') { // 空字符串设置为null
+          this.mynum = null
+          this.$emit('input', null)
+        } else {
+          this.mynum = parseFloat(evt)
+          this.$emit('input', parseFloat(evt))
+        }
+        this.$emit('change', evt)
+      },
+      myblur(evt) {
+        this.$emit('blur', evt)
+      },
+      isNumber(val) {
+        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
+        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
+        if (regPos.test(val) || regNeg.test(val)) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    watch: {// 给外层v-model赋值
+      value: {
+        handler: function (val, oldVal) {
+          if(val && this.isNumber(val)){
+              this.mynum = parseFloat(val)
+              this.$emit('input', parseFloat(val))
+          }  else {
+              this.mynum = val
+          }
+        },
+        immediate: true
+      }
+    }
+  }
+
+</script>

package/src/hdcom/HdPopSel.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-input v-bind="$attrs" v-on="$listeners" :placeholder="placeholder?placeholder:''" :value="txtVal" readonly
+            @focus="$emit('focus')" :disabled="disabled"
+            ref="sel" @mouseenter.native="doMouseEnter" @mouseleave.native="doMouseLeave" :clearable="false">
+    <i slot="suffix" class="el-input__icon el-icon-circle-close" v-if="!threePointShow" @click.stop="doClear"
+       style="cursor:pointer "></i>
+    <i v-if="threePointShow" slot="suffix" class="el-input__icon el-icon-more" @click="$emit('pop')"
+       style="cursor:pointer"></i>
+  </el-input>
+</template>
+<style>
+  .lucencyInput .el-input__inner {
+    border: 0px;
+  }
+</style>
+<script>
+/**
+   * 废弃,直接使用HdGridSel
+   * @module HdPoPSel
+   */
+export default {
+  name: 'HdPoPSel',
+  data() {
+    return {
+      popShow: this.show,
+      threePointShow: true
+    }
+  },
+  inheritAttrs: false,
+  props: {
+    show: Boolean, txtVal: String, idVal: String, placeholder: String, disabled: Boolean
+  }, // 设置value为props属性-必须
+  mounted() {
+    $(this.$parent.$el).find('.el-popover__reference').removeAttr('tabIndex')// 焦点用
+  },
+  methods: {
+    focus() {
+      this.$refs.sel.focus()
+    },
+    doQuery() {
+    },
+    doClear() {
+      this.$emit('clear')
+    },
+    doMouseEnter() {
+      if (this.disabled) {
+        return false
+      }
+      if (this.idVal) {
+        this.threePointShow = false
+      }
+    },
+    doMouseLeave() {
+      this.threePointShow = true
+    }
+  }
+}
+</script>

package/src/hdcom/HdRightMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="rightmenu">
+    <slot name="rightMenu">
+      <el-button-group>
+
+        <ex-button class="rightmenu_button" @click="doAdd" vid="doAdd">增加
+        </ex-button>
+        <ex-button class="rightmenu_button" @click="doUpdate" vid="doUpdate">修改
+        </ex-button>
+        <ex-button class="rightmenu_button" @click="doRemove" vid="doRemove">删除
+        </ex-button>
+        <ex-button class="rightmenu_button" @click="doCopy" vid="doCopy">复制
+        </ex-button>
+      </el-button-group>
+      <div style="border: #555 1px solid;" v-if="$slots.rightMenuExt"></div>
+      <el-button-group>
+
+        <slot name="rightMenuExt">
+        </slot>
+      </el-button-group>
+    </slot>
+  </div>
+</template>
+<script>
+// import BtnRight from './BtnRight'
+
+export default {
+  name: 'HdRightMenu',
+  // mixins: [BtnRight],
+  props: {
+    noRoleManage: false,
+  },
+  data() {
+    return {
+      isFocus: false,
+      rangeThis: {} // 快捷键有效区域
+    }
+  },
+  created() {
+    // if (!this.noRoleManage) {
+    //   if (this.$route && this.$route.meta.btnRoleCheck) { // 角色管理下激活
+    //     this.addBtnMetaToParent()
+    //   }
+    // }
+  },
+  methods: {
+    doAdd() {
+      this.$emit('do-add')
+    },
+    doRemove() {
+      this.$emit('do-remove')
+    },
+    doUpdate() {
+      this.$emit('do-update')
+    },
+    doCopy() {
+      this.$emit('do-copy')
+    },
+  }
+}
+</script>

package/src/hdcom/HdSel/SelGridFieldcod.vue

@@ -0,0 +1,36 @@
+<!--代码表用popsel-->
+<template>
+  <hd-grid-sel :txtVal="txtVal" :idVal="idVal" placeholder="请点击选取"
+               height="50vh" width="300px" :hdQuery="hdQuery" :disabled="disabled"
+               url="webresources/login/privilege/SysField/vue/find" @rowClick="doClick" :beforeQuery="beforeQuery">
+    <el-table-column width="120px" align="left" header-align="center" label="代码" prop="fieldCod" sortable></el-table-column>
+    <el-table-column widhth="180px" align="left" header-align="center" label="名称" prop="fieldName" sortable></el-table-column>
+  </hd-grid-sel>
+</template>
+
+<script>
+
+  export default {
+    name: 'sel-grid-fieldcode',
+    components: {},
+    data() {
+      return {
+        hdQuery: new HdQuery(this)
+      }
+    },
+    mounted() {
+    },
+    props: {txtVal: String, idVal: String, disabled: Boolean},// 设置value为props属�??-必须
+    methods: {
+      beforeQuery(val) {
+        this.hdQuery.query.anyQuery = val
+      },
+      doClick(row) {
+        this.$emit('update:txtVal', row.fieldName)
+        this.$emit('update:idVal', row.fieldCod)
+      }
+    }
+  }
+</script>
+
+