hd-idevvue3 3.0.2 → 3.0.4

package/src/hdcom/HdGridSel.vue

@@ -1,12 +1,29 @@
 <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>
+    <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>
@@ -14,210 +31,227 @@
     </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
+        :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
+      >
+        <el-icon class="el-input__icon" style="cursor: pointer"
+          ><el-icon-circle-close
+        /></el-icon>
+        <el-icon class="el-input__icon" style="cursor: pointer"
+          ><el-icon-more
+        /></el-icon>
       </el-input>
     </div>
   </div>
 </template>
-<!--<style rel="stylesheet/scss" lang="scss">-->
-<!--.hd-grid-sel {-->
-<!--z-index: 4000 !important;-->
-<!--}-->
 
-<!--</style>-->
 <script>
+import {
+  CircleClose as ElIconCircleClose,
+  More as ElIconMore,
+} from '@element-plus/icons'
+export default {
+  components: {
+    ElIconCircleClose,
+    ElIconMore,
+  },
+  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,
   /**
-   * 自定义列表下拉
-   * @module HdGridSel
+   * 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
    */
-  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
+  // 设置value为props属性-必须
+  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,
+  },
+  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
     },
-    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() {
+    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(() => {
-        if (this.$refs.popSel)
-          this.$refs.popSel.referenceElm.setAttribute('tabindex', -1); // 不可通过tab切换到popsel,因为有input存在
+        this.$refs.sel.focus() // 确保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) {
-        }
+    doMouseEnter() {
+      if (this.disabled) {
+        return false
       }
+      if (this.idVal) {
+        this.threePointShow = false
+      }
+    },
+    doMouseLeave() {
+      this.threePointShow = true
     },
-    watch: {
-      searchVal: function (newVal) {
-        if (!this.visible) {
-          return false
+    /**
+     * @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
         }
-        if (this.searchTimeHandler) {
-          clearTimeout(this.searchTimeHandler)
+      }
+    },
+    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)
         }
-        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
-      },
+        // 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)
-          })
+    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>