hd-idevvue3 3.0.2 → 3.0.4

package/src/hdcom/HdDatePicker.vue

@@ -1,16 +1,24 @@
 <template>
-  <ExDatePicker ref="exDatePicker" v-model="selVal" v-bind="$attrs" v-on="$listeners" :format="dateFormat"
-                :valueFormat="$attrs.valueFormat || valueFormat" :placeholder="placeholder" @focus="dateFocus"
-                @blur="dateBlur" :clearable="false">
+  <ExDatePicker
+    ref="exDatePicker"
+    v-model="selVal"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :format="dateFormat"
+    :valueFormat="$attrs.valueFormat || valueFormat"
+    :placeholder="placeholder"
+    @focus="dateFocus"
+    @blur="dateBlur"
+    :clearable="false"
+  >
   </ExDatePicker>
-
 </template>
 
 <script>
 /**
-   * 继承ElDatePicker ElementUi的日期以时间戳形式,这里改为字符串形式'yyyy-MM-dd HH:mm' 简化调用
-   * @module HdDatePicker
-   */
+ * 继承ElDatePicker ElementUi的日期以时间戳形式,这里改为字符串形式'yyyy-MM-dd HH:mm' 简化调用
+ * @module HdDatePicker
+ */
 export default {
   name: 'HdDatePicker',
   data() {
@@ -24,12 +32,16 @@ export default {
   },
   props: ['value'],
   inheritAttrs: false,
-  created() { // 判断
+  created() {
+    // 判断
     if (this.$attrs.type == 'date' || this.$attrs.type == 'daterange') {
       this.format = 'yyyy-MM-dd'
       this.valueFormat = 'yyyy-MM-dd'
       this.placeholder = this.$t('选择日期')
-    } else if (this.$attrs.type == 'datetime' || this.$attrs.type == 'datetimerange') {
+    } else if (
+      this.$attrs.type == 'datetime' ||
+      this.$attrs.type == 'datetimerange'
+    ) {
       this.format = 'yyyy-MM-dd HH:mm'
       this.valueFormat = 'yyyy-MM-dd HH:mm'
       this.placeholder = this.$t('选择日期时间')
@@ -51,28 +63,32 @@ export default {
   },
   methods: {
     dateFocus(v) {
-      this.dateFormat = (this.$attrs.format || this.format).replaceAll(/(-|:|\s|y)/, "");
+      this.dateFormat = (this.$attrs.format || this.format).replaceAll(
+        /(-|:|\s|y)/,
+        ''
+      )
       if (!this.value) {
         this.$set(this.$refs.exDatePicker, 'userInput', new Date().format('MM'))
       }
     },
     dateBlur() {
       this.dateFormat = this.$attrs.format || this.format
-    }
+    },
   },
-  computed: {// 给外层v-model赋值
+  computed: {
+    // 给外层v-model赋值
     selVal: {
       // 动态计算selVal的值
       get: function () {
         console.log('调用了get属性')
         return this.value
       },
-      set: function (val) { // v-model input
+      set: function (val) {
+        // v-model input
         console.log('调用了set属性', val)
         this.$emit('input', val)
-      }
+      },
     },
-  }
+  },
 }
-
 </script>

package/src/hdcom/HdDialog.vue

@@ -1,13 +1,30 @@
 <template>
-  <ExDialog :fullscreen="fullscreen" v-el-drag-dialog v-bind="$attrs" v-on="$listeners" :close-on-click-modal="false"
-            append-to-body v-if="$attrs.modal==null||$attrs.modal==true" :title="$t($attrs.title)">
+  <ExDialog
+    :fullscreen="fullscreen"
+    v-el-drag-dialog
+    v-bind="$attrs"
+    v-on="$listeners"
+    :close-on-click-modal="false"
+    append-to-body
+    v-if="$attrs.modal == null || $attrs.modal == true"
+    :title="$t($attrs.title)"
+  >
     <slot></slot>
     <div slot="footer">
       <slot name="footer"></slot>
     </div>
   </ExDialog>
-  <ExDialog :fullscreen="fullscreen" v-el-drag-dialog v-bind="$attrs" v-on="$listeners" :close-on-click-modal="false"
-            append-to-body class="wrapperChg" custom-class="dialogChg" v-else>
+  <ExDialog
+    :fullscreen="fullscreen"
+    v-el-drag-dialog
+    v-bind="$attrs"
+    v-on="$listeners"
+    :close-on-click-modal="false"
+    append-to-body
+    class="wrapperChg"
+    custom-class="dialogChg"
+    v-else
+  >
     <slot></slot>
     <div slot="footer">
       <slot name="footer"></slot>
@@ -16,48 +33,49 @@
 </template>
 
 <script>
-  /**
-   * 继承并重写ElDialog 使弹窗可拖动
-   * 7.6实现 在modal=false时,可以点击底层内容
-   * @module HdDialog
-   */
-  import elDragDialog from '../directive/el-dragDialog' // base on element-ui
-  export default {
-    name: 'HdDialog',
-    directives: {elDragDialog},
-    inheritAttrs: false,
-    components: {},
-    data() {
-      return {nowFull: false}
-    },
-    mounted() {
-      //      $(".el-dialog").draggable({handle: '.el-dialog__header'});
-      //      $(".el-dialog__header").css("cursor", "move")
-    },
-    computed: {
-      fullscreen() {
-        if (this.nowFull) {
-          return true
-        }
+/**
+ * 继承并重写ElDialog 使弹窗可拖动
+ * 7.6实现 在modal=false时,可以点击底层内容
+ * @module HdDialog
+ */
+import elDragDialog from '../directive/el-dragDialog' // base on element-ui
+export default {
+  name: 'HdDialog',
+  directives: { elDragDialog },
+  inheritAttrs: false,
+  components: {},
+  data() {
+    return { nowFull: false }
+  },
+  mounted() {
+    //      $(".el-dialog").draggable({handle: '.el-dialog__header'});
+    //      $(".el-dialog__header").css("cursor", "move")
+  },
+  computed: {
+    fullscreen() {
+      if (this.nowFull) {
+        return true
+      }
 
-        if (this.$attrs.fullscreen === '' || this.$attrs.fullscreen === true) {
-          return true
-        }
+      if (this.$attrs.fullscreen === '' || this.$attrs.fullscreen === true) {
+        return true
       }
-    }
-  }
+    },
+  },
+}
 </script>
-<style rel="stylesheet/scss" lang="scss">
-  .wrapperChg { //为了让弹窗底层的内容可以修改,在model:false时增加class
-    position: static !important;
-    z-index: 1;
-  }
 
-  .dialogChg {
-    position: absolute !important;
-    z-index: 1001;
-    left: 0;
-    right: 0;
-  }
-</style>
+<style lang="scss" rel="stylesheet/scss">
+.wrapperChg {
+  //为了让弹窗底层的内容可以修改,在model:false时增加class
+  position: static !important;
+  z-index: 1;
+}
 
+.dialogChg {
+  position: absolute !important;
+  z-index: 1001;
+  left: 0;
+  right: 0;
+}
+</style>

package/src/hdcom/HdDrop.vue

@@ -1,163 +1,188 @@
 <template>
-  <el-select v-model="selVal" filterable :clearable="clearable" :placeholder="placeholder?$t(placeholder):$t('请选择')"
-             style="width:100%"
-             v-bind="$attrs" v-on="$listeners" @change="change" :filter-method="filterMe"
-             @visible-change="visibleChange">
-    <el-option v-for="item in options" :key="item.codeId" :label="item.name" :value="item.code">
-
+  <el-select
+    v-model="selVal"
+    filterable
+    :clearable="clearable"
+    :placeholder="placeholder ? $t(placeholder) : $t('请选择')"
+    style="width: 100%"
+    v-bind="$attrs"
+    v-on="$listeners"
+    @change="change"
+    :filter-method="filterMe"
+    @visible-change="visibleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.codeId"
+      :label="item.name"
+      :value="item.code"
+    >
       <!--item[myts]可以实现动态label-->
       <span style="float: left">{{ item.name }}</span>
-      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{
+        item.code
+      }}</span>
     </el-option>
   </el-select>
 </template>
 
 <script>
+/**
+ * 继承ElSelect属性和事件,syscode下的field只需要传入field,其它的需要传入url
+ * @module HdDrop
+ */
+export default {
+  name: 'HdDrop',
+  data() {
+    return {
+      options: [],
+      backUpArr: [], // 备份
+    }
+  },
   /**
-   * 继承ElSelect属性和事件,syscode下的field只需要传入field,其它的需要传入url
-   * @module HdDrop
+   * Props
+   * @prop {String} value v-model双向绑定
+   * @prop {String} field syscode时,传入下拉field
+   * @prop {String} placeholder
+   * @prop {String} url 不使用syscode下拉时指定url
+   * @prop {String} txtVal  加.sync双向绑定 选择的label
+   * @prop {Array} codeIn  有值时,只显示指定的code :codeIn="['A','S']"
    */
-  export default {
-    name: 'HdDrop',
-    data() {
-      return {
-        options: [],
-        backUpArr: []// 备份
-      }
+  props: {
+    value: String,
+    field: String,
+    placeholder: String,
+    name: String,
+    url: String,
+    txtVal: String,
+    codeIn: Array,
+    clearable: {
+      type: Boolean,
+      default: true,
     },
-    /**
-     * Props
-     * @prop {String} value v-model双向绑定
-     * @prop {String} field syscode时,传入下拉field
-     * @prop {String} placeholder
-     * @prop {String} url 不使用syscode下拉时指定url
-     * @prop {String} txtVal  加.sync双向绑定 选择的label
-     * @prop {Array} codeIn  有值时,只显示指定的code :codeIn="['A','S']"
-     */
-    props: {
-      value: String,
-      field: String,
-      placeholder: String,
-      name: String,
-      url: String,
-      txtVal: String,
-      codeIn: Array,
-      clearable: {
-        type: Boolean,
-        default: true
+  }, // 设置value为props属性-必须,name.sync(不能用)和txtVal.sync双向
+  inheritAttrs: false,
+  mounted() {
+    if (this.url || this.field) {
+      this.doQuery()
+    }
+  },
+  methods: {
+    doQuery() {
+      let quUrl = ''
+      if (!this.url) {
+        quUrl =
+          '/webresources/login/privilege/SysCode/findAll?fieldCod=' + this.field
+      } else {
+        quUrl = this.url
       }
-    }, // 设置value为props属性-必须,name.sync(不能用)和txtVal.sync双向
-    inheritAttrs: false,
-    mounted() {
-      if (this.url || this.field) {
-        this.doQuery()
+      this.$http.get(quUrl).then((response) => {
+        this.options = response.data
+        if (this.codeIn) {
+          // 如果options的code和codeIn相同,就显示
+          this.options = this.options.filter((item) => {
+            return this.codeIn.find((v) => v == item.code)
+          })
+        }
+        this.backUpArr = this.options
+      })
+    },
+    change(val) {
+      this.upName(val)
+      //this.$emit('change', val) 不用写,el-select会传递到上层
+    },
+    visibleChange(val) {
+      // 下拉隐藏时还原
+      if (!val) {
+        // 隐藏时
+        this.options = this.backUpArr
       }
     },
-    methods: {
-      doQuery() {
-        let quUrl = ''
-        if (!this.url) {
-          quUrl = '/webresources/login/privilege/SysCode/findAll?fieldCod=' + this.field
-        } else {
-          quUrl = this.url
-        }
-        this.$http.get(quUrl).then(response => {
-          this.options = response.data
-          if (this.codeIn) { // 如果options的code和codeIn相同,就显示
-            this.options = this.options.filter((item) => {
-              return this.codeIn.find(v => v == item.code)
-            })
+    filterMe(val) {
+      // 过滤 根据name code
+      if (val) {
+        // val存在
+        this.options = this.backUpArr.filter((item) => {
+          if (item.code.indexOf(val) >= 0 || item.name.indexOf(val) >= 0) {
+            return true
           }
-          this.backUpArr = this.options
         })
-      },
-      change(val) {
-        this.upName(val)
-        //this.$emit('change', val) 不用写,el-select会传递到上层
-      },
-      visibleChange(val) { // 下拉隐藏时还原
-        if (!val) { // 隐藏时
-          this.options = this.backUpArr
-        }
-      },
-      filterMe(val) { // 过滤 根据name code
-        if (val) { // val存在
-          this.options = this.backUpArr.filter((item) => {
-            if (item.code.indexOf(val) >= 0 || item.name.indexOf(val) >= 0) {
-              return true
-            }
-          })
-        } else { // val为空时，还原数组
-          this.options = this.backUpArr
-        }
-      },
-      upName(value) {
-        if (!value) {
-          this.$emit('update:name', null)// 匹配不上
+      } else {
+        // val为空时，还原数组
+        this.options = this.backUpArr
+      }
+    },
+    upName(value) {
+      if (!value) {
+        this.$emit('update:name', null) // 匹配不上
+      }
+      for (let i = 0; i < this.options.length; i++) {
+        if (this.options[i].code == value) {
+          const obj = this.options[i]
+          this.$emit('update:name', obj.name) // 用txtVal
+          this.$emit('update:txtVal', obj.name)
+          return true
         }
-        for (let i = 0; i < this.options.length; i++) {
-          if (this.options[i].code == value) {
-            const obj = this.options[i]
-            this.$emit('update:name', obj.name)// 用txtVal
-            this.$emit('update:txtVal', obj.name)
+      }
+    },
+  },
+  watch: {
+    //      // 针对编辑时，不改变 hddrop里的内容
+    //      val: function (value) {
+    //        for (let i = 0; i < this.options.length; i++) {
+    //          if (this.options[i].code == value) {
+    //            let obj = this.options[i]
+    //            this.$emit('update:name', obj.name)
+    //            return true
+    //          }
+    //        }
+    //      },
+    //      //针对增加编辑时，改变了hddrop里的值
+    //      value: function (value) {
+    //        for (let i = 0; i < this.options.length; i++) {
+    //          if (this.options[i].code == value) {
+    //            let obj = this.options[i]
+    //            this.$emit('update:name', obj.name)
+    //            return true
+    //          }
+    //        }
+    //      }
+    url: function () {
+      this.doQuery()
+    },
+    field: function () {
+      this.doQuery()
+    },
+    codeIn: {
+      handler(newValue, oldValue) {
+        // codeIn改变时计算
+        for (let i = 0; i < newValue.length; i++) {
+          if (newValue[i] != oldValue[i]) {
+            this.doQuery()
             return true
           }
         }
-      }
+      },
+      deep: true,
     },
-    watch: {
-      //      // 针对编辑时，不改变 hddrop里的内容
-      //      val: function (value) {
-      //        for (let i = 0; i < this.options.length; i++) {
-      //          if (this.options[i].code == value) {
-      //            let obj = this.options[i]
-      //            this.$emit('update:name', obj.name)
-      //            return true
-      //          }
-      //        }
-      //      },
-      //      //针对增加编辑时，改变了hddrop里的值
-      //      value: function (value) {
-      //        for (let i = 0; i < this.options.length; i++) {
-      //          if (this.options[i].code == value) {
-      //            let obj = this.options[i]
-      //            this.$emit('update:name', obj.name)
-      //            return true
-      //          }
-      //        }
-      //      }
-      url: function () {
-        this.doQuery()
+  },
+  computed: {
+    // 给外层v-model赋值
+    selVal: {
+      // 动态计算selVal的值
+      get: function () {
+        if (!this.value) {
+          // filterMe在null时不触发,''就没问题
+          return ''
+        }
+        return this.value
       },
-      field: function () {
-        this.doQuery()
+      set: function (val) {
+        // v-model input
+        // upName(val)//更新name
+        this.$emit('input', val)
       },
-      codeIn: {
-        handler(newValue, oldValue) { // codeIn改变时计算
-          for (let i = 0; i < newValue.length; i++) {
-            if (newValue[i] != oldValue[i]) {
-              this.doQuery()
-              return true
-            }
-          }
-        },
-        deep: true
-      }
     },
-    computed: {// 给外层v-model赋值
-      selVal: {
-        // 动态计算selVal的值
-        get: function () {
-          if (!this.value) { // filterMe在null时不触发,''就没问题
-            return ''
-          }
-          return this.value
-        },
-        set: function (val) { // v-model input
-          // upName(val)//更新name
-          this.$emit('input', val)
-        }
-      }
-    }
-  }
+  },
+}
 </script>