hd-idevvue3 3.0.0 → 3.0.2

package/src/hdcom/HdGridEditBtn.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <hd-btn icon="el-icon-edit" hint="编辑" @click.stop="$vnode.context.$refs[gridRef].doEdit(row)"
+            v-if="!row.isEdit">
+    </hd-btn>
+    <hd-btn hint="撤销" @click.stop="$vnode.context.$refs[gridRef].doCancel(row)" v-if="row.isEdit">
+      <svg-icon icon-class="undo"/>
+    </hd-btn>
+    <hd-btn icon="el-icon-check" hint="保存" @click.stop="$vnode.context.$refs[gridRef].doSave(row)" v-if="row.isEdit">
+    </hd-btn>
+    <hd-btn icon="el-icon-delete" hint="删除" @click.stop="$vnode.context.$refs[gridRef].doRemove(row)"
+            v-if="!row.isEdit">
+    </hd-btn>
+  </div>
+</template>
+
+<script>
+
+/**
+   * GridEditBtn 列表内的增删改按钮
+   * @module HdGridEditBtn
+   */
+export default {
+  name: 'HdGridEditBtn',
+  inheritAttrs: false,
+  /**
+     * Props
+     * @prop {String} gridRef 默认为grid
+     * @prop {Object} row 行对象
+     */
+  props: {
+    gridRef: {
+      type: String,
+      default: 'grid'
+    },
+    row: Object
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+

package/src/hdcom/HdGridExt.js

@@ -0,0 +1,219 @@
+// 快捷键实现及导出excel和pdf
+export default {
+  data() {
+    return {
+      rowSelNum: -1// 选中行
+    }
+  },
+  methods: {
+    addHotKey() {
+      document.body.addEventListener('keydown', this.handleKeydown)
+    },
+    removeHotKey() {
+      document.body.removeEventListener('keydown', this.handleKeydown)
+    },
+    handleKeydown(event) {
+      const keyCode = event.keyCode
+      const list = [38, 40, 37, 39]
+      if (list.indexOf(keyCode) !== -1) {
+        if (keyCode === 38) { // up
+          this.rowSelNum -= 1
+        }
+        if (keyCode === 40) {
+          this.rowSelNum += 1
+        }
+        if (keyCode === 37) { // left
+          this.hdQuery.doCurPageChange(this.hdQuery.page - 1 < 1 ? 1 : this.hdQuery.page - 1)
+        }
+        if (keyCode === 39) {
+          let totalPageSize = (this.hdResult.total - 1) / this.hdQuery.rows + 1;
+          this.hdQuery.doCurPageChange(this.hdQuery.page + 1 > totalPageSize ? totalPageSize : this.hdQuery.page + 1);
+        }
+        event.stopPropagation()
+        event.preventDefault()
+      }
+      if (keyCode === 13) { // Enter
+        if (this.hdQuery.selRow) {
+          this.$emit('enterClick', this.hdQuery.selRow)
+          this.hdQuery.selRow = null
+        } else if (this.hdResultComRows.length > 0) {
+          this.hdQuery.selRow = this.hdResultComRows[0] // 这里必须这样赋值
+          this.$emit('enterClick', this.hdResultComRows[0])
+          this.hdQuery.selRow = null
+        }
+      }
+      if (event.altKey && keyCode === 13) { // alt+Enter
+        this.$emit('altEnterClick', this.hdQuery.selRow)
+      }
+    },
+    setCurrentRow(i, isDown) {
+      this.rowSelNum = i
+      this.$refs.ingrid.setCurrentRow(this.hdResultComRows[i])
+      if (this.hdQuery) {
+        this.hdQuery.selRow = this.hdResultComRows[this.rowSelNum]
+      }
+      const trSel = this.$refs.ingrid.$el.querySelectorAll('.el-table__body tr')[i]
+      if (!trSel) {
+        return true
+      }
+
+      const scrollParent = this.$refs.ingrid.$el.querySelector('.el-table__body-wrapper')
+      const conHeigh = scrollParent.getBoundingClientRect().height
+      //        const cellNumPage = conHeigh / cellHeigh //当前页面有多少行
+
+      const top = trSel.offsetTop
+      const bottom = trSel.offsetTop + trSel.offsetHeight
+      const viewRectTop = scrollParent.scrollTop
+      const viewRectBottom = viewRectTop + scrollParent.clientHeight + trSel.clientHeight / 3// trSel.clientHeight/3确保滚出屏幕后才触发
+      if (top < viewRectTop) {
+        scrollParent.scrollTop = top
+      } else if (bottom > viewRectBottom) { // 向下移动触发
+        scrollParent.scrollTop = scrollParent.scrollTop + trSel.clientHeight
+      }
+    },
+    findLeafCol(col, leafCol, header, filterVal, par) {//获得叶子节点,并且返回叶子节点父类
+      if (!col.children) {
+        leafCol.push(col)
+        if (par) {
+          header.push(par.label + "-" + col.label)
+        } else {
+          header.push(col.label)
+        }
+        filterVal.push(col.property)
+      } else {
+        for (let i = 0; i < col.children.length; i++) {
+          this.findLeafCol(col.children[i], leafCol, header, filterVal, col)
+        }
+      }
+    },
+    comExport(exportdata) {
+      const header = []
+      const filterVal = []
+      // const filterFt = [] // 与filterVal1对1,导出的excel值进行转换
+      const disColWithProp = [] //统计表头时判断
+      for (let i = 0; i < this.disCol.length; i++) {
+        const oneCol = this.disCol[i]
+        if (!oneCol || (!oneCol.property && !oneCol.children) || !oneCol.showFlg || oneCol.showFlg == '0') {
+          continue
+        }
+        this.findLeafCol(oneCol, disColWithProp, header, filterVal)//将所有的叶子节点
+      }
+      const data = this.formatJson(filterVal, exportdata, header)
+      const merdata = [header].concat(data)// 中文+数据
+      this.summaryAdd(merdata, filterVal.length)
+      const title = this.$route.meta.title + new Date().format('yyyy-MM-dd HH:mm:ss')
+      return { header, filterVal, merdata, title }
+    },
+    excelExport(exportdata) {
+      let excelData = this.comExport(exportdata);
+      let exportData = {};
+      if (this.excelFormatter) {
+        exportData = this.excelFormatter(excelData);
+      } else {
+        let merdata = excelData.merdata;
+        if (this.excelPropHeader) {
+          merdata = this.formatJson(excelData.filterVal, merdata);
+        }
+        exportData = {
+          header: merdata[0],
+          data: merdata.slice(1),
+          filename: excelData.title
+        }
+      }
+      const excel = require('../vendor/Export2Excel')
+      excel.export_json_to_excel(exportData)// excelPropHeader:是否导出prop头
+    },
+    pdfExport(exportdata) {
+      let { header, filterVal, merdata, title } = this.comExport(exportdata)
+      this.$refs.pdfshow.genPdf(header, merdata, title)
+    },
+    summaryAdd(merdata, size) {//如果导出有合计项
+      if (this.$attrs.showSummary == undefined && this.$attrs['show-summary'] == undefined) {
+        return
+      }
+      const disColWithProp = [] //获取表头
+      for (let i = 0; i < this.disCol.length; i++) {
+        const oneCol = this.disCol[i]
+        if (!oneCol || !oneCol.property || !oneCol.showFlg) {
+          continue
+        }
+        disColWithProp.push(oneCol)
+      }
+      let sum = new Array(size)
+      let sumMethod = this.$attrs.summaryMethod || this.$attrs['summary-method']
+      let sumVal = sumMethod({ columns: disColWithProp })
+      for (let i = 0; i < sum.length; i++) {
+        if (sumVal[i]) {
+          sum[i] = sumVal[i]
+        } else {
+          sum[i] = ''
+        }
+      }
+      merdata.push(sum)
+    },
+
+    formatJson(filterVal, jsonData, header) {
+      if (!jsonData || jsonData.length == 0) {
+        return []
+      }
+      if (this.excelPropHeader) { // 导出所有头
+        for (const data in jsonData[0]) {
+          let isHas = false
+          for (const val in filterVal) {
+            if (filterVal[val] == data) {
+              isHas = true
+              break
+            }
+          }
+          if (!isHas) { // 所有json属性在filterval都要有
+            filterVal.push(data)
+          }
+        }
+      }
+      let noExLs = ['_obj', 'idevVersionUse', '_map']
+      if (this.noExcelExport) {
+        noExLs = noExLs.concat(this.noExcelExport)
+      }
+      for (let j = 0; j < noExLs.length; j++) { // 不需要导出的属性,header也需要删除
+        const index = filterVal.removeone(noExLs[j])
+        if (index != -1) {
+          header.splice(index, 1)
+        }
+      }
+      return jsonData.map(v => filterVal.map(j => {
+        try {
+          const inFt = this.getInputFormat(j) //支持多级prop如果有inutFormat会使用inputFormt
+          if (inFt) {
+            return inFt(v, j)
+          } else {
+            return v[j] + ''// 数字变为字符串
+          }
+        } catch (err) {//不存在时,直接返回空
+          console.info(err)
+          return null
+        }
+      }
+      ))
+    },
+  },
+  watch: {
+
+    rowSelNum: function (val, oldVal) {
+      if (val < 0) {
+        if (this.hdResult.rows.length == 0) { // 没有数据时不选中
+          this.rowSelNum = -1
+          return false
+        } else {
+          this.rowSelNum = 0
+        }
+      }
+      if (val > this.hdResult.rows.length - 1) {
+        this.rowSelNum = this.hdResult.rows.length - 1
+      }
+      if (this.hdQuery) {
+        this.hdQuery.selRow = this.hdResult.rows[this.rowSelNum]
+      }
+      this.setCurrentRow(this.rowSelNum, val - oldVal > 0) // >0是下移动,<0是上移
+    }
+  }
+}

package/src/hdcom/HdGridSel.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <el-popover :disabled="disabled" placement="bottom-start" popperClass="hd-grid-sel" ref="popSel"
+                v-model="visible">
+      <div :style="{height: height,width:width}">
+        <hd-com-grid :findUrl='url' :hdQuery="hdQuery" @enterClick="rowClick(hdQuery.selRow)" @row-click="rowClick"
+                     ckHide
+                     indexHide noSets notInit recHide ref="grid" v-bind="$attrs"
+                     v-on="$listeners" :hd-btn-tool=false is-not-db-edit>
+          <slot name="query" slot="query"></slot>
+          <slot></slot>
+        </hd-com-grid>
+      </div>
+    </el-popover>
+    <div>
+      <!--readonly 在选择区隐藏时,不能输入-->
+      <el-input :clearable="false" :disabled="disabled"
+                :placeholder="placeholder?$t(placeholder):$t('请选择')" :readonly="!visible"
+                @blur="blur" @focus="focus" @mouseenter.native="doMouseEnter"
+                @mouseleave.native="doMouseLeave" ref="sel" v-model="searchVal" v-popover:popSel>
+        <i @click.stop="doClear" class="el-input__icon el-icon-circle-close" slot="suffix" style="cursor:pointer "
+           v-if="!threePointShow"></i>
+        <i @click="$emit('pop')" class="el-input__icon el-icon-more" slot="suffix" style="cursor:pointer"
+           v-if="threePointShow"></i>
+      </el-input>
+    </div>
+  </div>
+</template>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.hd-grid-sel {-->
+<!--z-index: 4000 !important;-->
+<!--}-->
+
+<!--</style>-->
+<script>
+  /**
+   * 自定义列表下拉
+   * @module HdGridSel
+   */
+  export default {
+    name: 'HdGridSel',
+    data() {
+      return {
+        openHandler: null,//快速切换焦点,避免出现很多下拉类别
+        threePointShow: true,
+        searchVal: this.txtVal,
+        // isFocus: false,
+        visible: false,
+        isFirst: true, // 是否第一次打开
+        searchHandler: Object,
+        isSoftFocus: false // 点击弹窗内容时,input重新获得焦点,但是不能触发focus
+        // focusTime: 0
+      }
+    },
+    inheritAttrs: false,
+    /**
+     * Props  继承hd-com-grid的属性和事件
+     * @prop {String} txtVal 双向绑定 这里是为了clear清空用
+     * @prop {String} idVal 双向绑定 这里是为了clear清空用
+     * @prop {String} placeholder
+     * @prop {Boolean} disabled 只读
+     * @prop {Object} hdQuery  查询封装类
+     * @prop {String} height  默认为40vh
+     * @prop {String} width  弹出选择框的宽度,非输入框的!!!
+     * @prop {Function} beforeQuery  查询前的事件,通常需要绑定anyQuery
+     * @prop {String} url  查询的url,hdGrid中的findUrl
+     */
+    props: {
+      txtVal: String,
+      idVal: String,
+      placeholder: String,
+      disabled: Boolean,
+      hdQuery: Object,
+      url: String, // 全路径
+      height: {// 弹出选择框的高度,非输入框的!!!
+        type: String,
+        default: '40vh'
+      },
+      width: {// 弹出选择框的宽度,非输入框的!!!
+        type: String,
+        default: '100%'
+      },
+      beforeQuery: Function
+    }, // 设置value为props属性-必须
+    mounted() {
+      this.$nextTick(() => {
+        if (this.$refs.popSel)
+          this.$refs.popSel.referenceElm.setAttribute('tabindex', -1); // 不可通过tab切换到popsel,因为有input存在
+      })
+    },
+    methods: {
+      focus() {
+        // this.focusTime = new Date().getTime()
+        this.$emit('focus')
+        if (this.isSoftFocus) { // click时
+          this.isSoftFocus = false // 点击时,防止焦点触发
+          return false
+        }
+        this.openHandler = setTimeout(() => { // 否则会和默认的冲突
+          this.visible = true
+          this.openHandler = null
+        }, 150)
+        // this.isFocus = true
+      },
+      blur() {
+        if (this.openHandler) {
+          clearTimeout(this.openHandler)
+          this.openHandler = null
+        }
+      },
+      //      visibleChg() {
+      //        setTimeout(() => {
+      //          let nowClickTime = new Date().getTime()
+      //          if (nowClickTime - focusTime > 500)//只有焦点时才可点击
+      //            this.visible = !this.visible
+      //        }, 150)
+      //      },
+      //      blur() {
+      // //        setTimeout(() => {
+      // //          console.info('blur' + this.isSoftFocus)
+      // //          if (this.isSoftFocus) {
+      // //            this.isSoftFocus = false;
+      // //          } else {
+      // //            this.$emit('blur', event);
+      // //            this.isFocus = false
+      // //            this.searchVal = this.txtVal //焦点切换,还原
+      // //            this.visible = false
+      // //          }
+      // //        }, 150);
+      //      },
+      doClear() {
+        this.$parent.$emit('update:txtVal', '')
+        this.$parent.$emit('update:idVal', '')
+        this.$emit('clear')
+        this.$nextTick(() => {
+          this.$refs.sel.focus(); // 确保input已渲染后再设置焦点
+        });
+      },
+      doMouseEnter() {
+        if (this.disabled) {
+          return false
+        }
+        if (this.idVal) {
+          this.threePointShow = false
+        }
+      },
+      doMouseLeave() {
+        this.threePointShow = true
+      },
+      /**
+       * @function 触发rowClick(row)事件
+       * */
+      rowClick(row) {
+        this.$emit('rowClick', row)
+        this.isSoftFocus = true
+        this.$refs.sel.focus()
+        this.visible = false
+      },
+      visbileKeyAdd() {
+        document.onkeydown = (e) => {
+          var key = window.event.keyCode
+          if (key == 9 || key == 27) { // 9 tab 27 esc
+            this.visible = false
+          }
+        }
+      },
+      visbileKeyRemove() {
+        document.onkeydown = function (e) {
+        }
+      }
+    },
+    watch: {
+      searchVal: function (newVal) {
+        if (!this.visible) {
+          return false
+        }
+        if (this.searchTimeHandler) {
+          clearTimeout(this.searchTimeHandler)
+        }
+        this.searchTimeHandler = setTimeout(() => { // 延迟300ms查询
+          this.searchTimeHandler = null
+          if (this.beforeQuery) {
+            this.beforeQuery(newVal)
+          }
+          // for(var key in this.hdQuery.query) {
+          //   this.hdQuery.query[key]=this.hdQuery.query[key].toUpperCase();
+          // }
+          this.$refs.grid.doQuery().then(() => { // 默认选中第一行
+            this.$refs.grid.$refs.hdgrid.setCurrentRow(0)
+          })
+        }, 600)
+        // this.visible = true
+      },
+      txtVal: function (newVal) {
+        this.searchVal = this.txtVal
+      },
+
+      visible: function (newVal) {
+        if (newVal) {
+          //虚拟滚动时,防止页面空白
+          this.$refs.grid.$refs.hdgrid.scroller = 0
+          this.$refs.grid.addHotKey()
+          this.visbileKeyAdd()
+        } else {
+          this.$refs.grid.removeHotKey()
+          this.visbileKeyRemove()
+          this.searchVal = this.txtVal
+        }
+        if (newVal) {
+          if (this.beforeQuery) {
+            this.beforeQuery()
+          }
+          // for(var key in this.hdQuery.query) {
+          //   this.hdQuery.query[key]=this.hdQuery.query[key].toUpperCase();
+          // }
+          this.$refs.grid.doQuery(null).then(() => {
+            this.$refs.grid.$refs.hdgrid.setCurrentRow(0)
+          })
+        }
+      }
+    }
+  }
+</script>

package/src/hdcom/HdHeader.vue

@@ -0,0 +1,148 @@
+<template>
+  <ExHeader :height="nowHeight" ref="header" style="display: flex;flex-direction: column;">
+    <div class="hdHeader">
+      <template v-if="title">
+        <div class="hd-title">
+          <div align="left" style="float:left">{{$t(title)}}</div>
+          <slot name="title"></slot>
+          <div align="right" v-if="arrowShow">
+            <i @click="isShrink?doShrink(false):doShrink(true)" style="cursor:pointer;" v-bind:class="[fa, arrowClass]">
+            </i>
+          </div>
+        </div>
+      </template>
+      <!--title有20的高度-->
+      <div style="flex:1;height: 100%;position: relative;" v-show="!isShrink">
+        <div style="position: absolute; width: 100%;height: 100%;">
+          <slot></slot>
+        </div>
+      </div>
+      <div :class="{dragShowCls:dragShow}" @mousedown="mousedown($event)" @mouseout="dragShow=false" @mouseover="dragShow=true"
+           class="asideDrag" v-if="!noDrag"></div>
+      <div class="moveline" ref="moveline" v-show="dragFrom!=null"></div>
+    </div>
+  </ExHeader>
+</template>
+
+<script>
+
+  /**
+   * 覆写ElHeader,增加拖动和title
+   * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
+   * @module HdHeader
+   */
+  export default {
+    name: 'HdHeader',
+    component: {},
+    /**
+     * Props 继承ElHeader属性和事件,如果仅需要elementui的ElHeader请使用ExHeader
+     * @prop {String} title 标题
+     * @prop {Boolen} arrowShow 是否显示一键收缩
+     * @prop {Boolen} noDrag 是否可拖动,默认否
+     */
+    props: {
+      height: String,
+      title: String,
+      arrowShow: {type: Boolean, default: true},
+      noDrag: {type: Boolean, default: false}
+    },
+    inheritAttrs: false,
+    data() {
+      return {
+        inputHeight: 0, //未拖拽时的高度
+        iconCls: 'el-icon-d-caret',
+        arrowClass: 'fa-chevron-up',
+        fa: 'fa',
+        isShrink: false,
+        dragFrom: null,
+        nowHeight: '100px',
+        dragShow: false
+      }
+    },
+    mounted() {
+      if (this.height) {
+        this.nowHeight = this.height
+      }
+      this.inputHeight = this.nowHeight
+    },
+    methods: {
+      doShrink(isShrink) {
+        if (isShrink) {
+          if (this.title) {
+            this.nowHeight = "30px"
+          } else {
+            this.nowHeight = "15px"
+          }
+          this.arrowClass = 'fa-chevron-down'
+        } else {
+          this.nowHeight = this.inputHeight
+          this.arrowClass = 'fa-chevron-up'
+        }
+        this.isShrink = isShrink
+      },
+      mousedown: function (event) {
+        this.$set(this.$store.state, 'hotKey', "-1") //避免热键样式影响体验
+        this.dragFrom = event.y
+        this.$refs.moveline.style.top = this.dragFrom + "px"
+        document.documentElement.addEventListener('mousemove', this.handleMove, true)
+        document.documentElement.addEventListener('mouseup', this.handleMouseup, true)
+      },
+      handleMove: function (event) {
+        this.$refs.moveline.style.top = event.y + "px"
+      },
+      handleMouseup: function (event) {
+        document.documentElement.removeEventListener('mousemove', this.handleMove, true)
+        document.documentElement.removeEventListener('mouseup', this.handleMouseup, true)
+        let newHeight = this.$refs.header.$el.offsetHeight + event.y - this.dragFrom
+        this.nowHeight = newHeight + 'px';
+        this.dragFrom = null
+        this.$set(this.$store.state, 'hotKey', null) //避免热键样式影响体验
+        if (newHeight <= 70) { // 少于一定宽度自动收缩
+          this.doShrink(true)
+        }
+        if (newHeight >= 100) { // 少于一定宽度自动收缩
+          this.isShrink = false
+        }
+      }
+    },
+    watch: {
+      nowHeight(val) {
+        this.$emit('update:height', val);
+      },
+      width(val) {
+        this.nowHeight = val
+      }
+    }
+  }
+
+</script>
+<style rel="stylesheet/scss" lang="scss">
+  .hdHeader {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .asideDrag {
+    width: 100%;
+    height: 5px;
+    overflow: hidden;
+    cursor: ns-resize;
+    user-select: none;
+  }
+
+  .moveline {
+    width: 100%;
+    height: 5px;
+    overflow: hidden;
+    position: fixed;
+    cursor: ns-resize;
+    background-color: red;
+    z-index: 9999;
+    user-select: none;
+  }
+
+  .dragShowCls {
+    background-color: #409EFF;
+  }
+</style>