hd-idevvue3 3.0.2 → 3.0.4

package/src/hdcom/HdHeader.vue

@@ -1,148 +1,180 @@
 <template>
-  <ExHeader :height="nowHeight" ref="header" style="display: flex;flex-direction: column;">
+  <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>
+          <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
+              @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%;">
+      <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
+        :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: {},
   /**
-   * 覆写ElHeader,增加拖动和title
-   * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
-   * @module HdHeader
+   * Props 继承ElHeader属性和事件,如果仅需要elementui的ElHeader请使用ExHeader
+   * @prop {String} title 标题
+   * @prop {Boolen} arrowShow 是否显示一键收缩
+   * @prop {Boolen} noDrag 是否可拖动,默认否
    */
-  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'
+  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 = 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
+          this.nowHeight = '15px'
         }
+        this.arrowClass = 'fa-chevron-down'
+      } else {
+        this.nowHeight = this.inputHeight
+        this.arrowClass = 'fa-chevron-up'
       }
+      this.isShrink = isShrink
     },
-    watch: {
-      nowHeight(val) {
-        this.$emit('update:height', val);
-      },
-      width(val) {
-        this.nowHeight = val
+    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;
-  }
+<style lang="scss" rel="stylesheet/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;
-  }
+.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;
-  }
+.dragShowCls {
+  background-color: #409eff;
+}
 </style>

package/src/hdcom/HdHotKey.vue

@@ -3,79 +3,82 @@
 </template>
 
 <script>
-  /**
-   * 通常不需要直接调用,HdButton中已经集成,不需要绑定按钮的快捷键,可能用到
-   * @module HdHotKey
-   */
-  export default {
-    name: 'HdHotKey',
-    data() {
-      return {
-        isFocus: false,
-        rangeThis: {} // 快捷键有效区域
+/**
+ * 通常不需要直接调用,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")
+        }
       }
-    },
-    // 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
     },
-    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)
-      }
+    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
-          }
+  },
+  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 lang="scss" rel="stylesheet/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

@@ -2,48 +2,52 @@
   <el-autocomplete
     :fetch-suggestions="querySearch"
     :placeholder="$t(placeholder)"
-    :value="value"
-    @input="v=>$emit('input', v)"
+    :model-value="value"
+    @input="(v) => $emit('input', v)"
     @select="handleSelect"
-    style="width:100%"
+    style="width: 100%"
   ></el-autocomplete>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        options: [],
-      };
+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 })
+        })
+      })
     },
-    props: ['value', 'field', 'placeholder'],
-    mounted() {
-      this.doQuery();
+    querySearch(queryString, cb) {
+      console.info(this.options)
+      let results = queryString
+        ? this.options.filter(this.createFilter(queryString))
+        : this.options
+      // 调用 callback 返回建议列表的数据
+      cb(results)
     },
-    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)
+    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

@@ -1,43 +1,41 @@
 <template>
   <ExMain v-bind="$attrs" class="hdMain">
     <template v-if="title">
-      <div class="hd-title">{{$t(title)}}
+      <div class="hd-title">
+        {{ $t(title) }}
         <slot name="title"></slot>
       </div>
     </template>
-    <div style="flex:1;height: 100%;position: relative;  ">
+    <div style="flex: 1; height: 100%; position: relative">
       <!--需要这样写 上下布局-->
-      <div style="position: absolute; width: 100%;height: 100%;">
+      <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() {
-    }
-  }
-
+/**
+ * 覆写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 lang="scss" rel="stylesheet/scss">
+.hdMain {
+  display: flex !important; //在主题切换时,会被el-main取消,所以需要important
+  flex-direction: column;
+}
 </style>