haiwei-ui 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haiwei-ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "HaiWei前端组件库",
   "author": "Eric",
   "license": "ISC",

package/packages/components/list/components/querybar/index copy.vue

@@ -0,0 +1,227 @@
+<template>
+  <!--工具栏-->
+  <section class="nm-list-querybar">
+    <nm-form ref="normalForm" class="nm-list-querybar-normal" :model="model_" :rules="rules" :size="fontSize" :inline="true">
+      <slot />
+      <el-form-item v-if="!noSearch">
+        <nm-button type="primary" @click="query" :icon="!noSearchButtonIcon ? 'search' : ''" text="查询" />
+      </el-form-item>
+      <el-form-item v-if="!noReset">
+        <nm-button type="info" @click="reset" :icon="!noSearchButtonIcon ? 'refresh' : ''" text="重置" />
+      </el-form-item>
+      <el-form-item v-if="exportEnabled" v-nm-has="exportBtnCode">
+        <nm-button type="primary" @click="onExport" icon="export" text="导出" />
+      </el-form-item>
+      <el-form-item v-if="advanced_.enabled">
+        <nm-button ref="showAdvnacedBtn" type="warning" @click="onAdvancedClick">
+          高级查询
+          <i class="el-icon--right" :class="[showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
+        </nm-button>
+      </el-form-item>
+      <!--自定义按钮插槽-->
+      <el-form-item>
+        <slot name="buttons" />
+      </el-form-item>
+    </nm-form>
+
+    <!--高级查询框-->
+    <transition name="el-zoom-in-top">
+      <section ref="advancedBox" class="nm-list-querybar-advanced" v-if="advanced_.enabled" v-show="showAdvanced" :style="advancedStyle">
+        <nm-box page header footer title="高级查询" icon="search">
+          <template v-slot:toolbar>
+            <nm-button icon="close" @click="showAdvanced = false" />
+          </template>
+          <!--查询条件-->
+          <nm-form ref="advancedForm" :model="model_" :rules="rules" :label-width="advanced_.labelWidth" :inline="advanced_.inline">
+            <slot name="advanced" />
+          </nm-form>
+          <template v-slot:footer>
+            <!--查询按钮-->
+            <nm-button type="primary" @click="query" text="查询" :icon="!noSearchButtonIcon ? 'search' : ''" />
+            <!--重置按钮-->
+            <nm-button type="info" @click="reset" text="重置" :icon="!noSearchButtonIcon ? 'refresh' : ''" />
+          </template>
+        </nm-box>
+        <div ref="arrow" class="advanced-arrow" />
+      </section>
+    </transition>
+  </section>
+</template>
+<script>
+  const defaultAdvanced = {
+    // 是否开启
+    enabled: false,
+    // 宽度
+    width: '400px',
+    // 高度
+    height: '',
+    // 表单标签宽度
+    labelWidth: '100px',
+    // 内联表单
+    inline: false
+  }
+  export default {
+    data() {
+      return {
+        // 是否显示高级查询
+        showAdvanced: false,
+        // 动态计算的高度
+        dynamicHeight: ''
+      }
+    },
+    props: {
+      /** 输入框的宽度 */
+      inputWidth: {
+        type: String,
+        default: '160px'
+      },
+      /** 查询模型 */
+      model: Object,
+      /** 验证规则 */
+      rules: Object,
+      /** 高级查询属性 */
+      advanced: Object,
+      /** 不显示按钮图标 */
+      noSearchButtonIcon: Boolean,
+      /** 不需要查询 */
+      noSearch: Boolean,
+      /**不显示查询按钮 */
+      noReset: Boolean,
+      /**显示导出按钮 */
+      exportEnabled: Boolean,
+      /**导出按钮权限编码 */
+      exportBtnCode: String
+    },
+    computed: {
+      model_() {
+        return this.model || {}
+      },
+      /** 高级查询设置 */
+      advanced_() {
+        const ad = this.$_.merge({}, defaultAdvanced, this.advanced)
+        ad.enabled = ad.enabled && !this.noSearch
+        return ad
+      },
+      /** 高级查询框样式 */
+      advancedStyle() {
+        return {
+          width: this.advanced_.width,
+          height: this.advanced_.height || this.dynamicHeight
+        }
+      }
+    },
+    methods: {
+      query() {
+        this.$parent.page.index = 1
+        this.$parent.query()
+        // 如果高级查询框显示，重新计算高度
+        if (this.showAdvanced && !this.advanced_.height) {
+          this.$nextTick(() => {
+            this.calculateAdvancedHeight()
+          })
+        }
+      },
+      /** 表单重置 */
+      reset() {
+        if (this.$refs.normalForm) {
+          this.$refs.normalForm.reset()
+        }
+        if (this.$refs.advancedForm) {
+          this.$refs.advancedForm.reset()
+        }
+        this.$emit('reset')
+      },
+      validate(action) {
+        return this.$refs.normalForm.validate(action)
+      },
+      /** 计算高级查询框高度 */
+      calculateAdvancedHeight() {
+        if (!this.$refs.advancedBox) return
+
+        const $box = this.$refs.advancedBox
+        const boxHeader = $box.querySelector('.nm-box-header')?.offsetHeight || 0
+        const boxFooter = $box.querySelector('.nm-box-footer')?.offsetHeight || 0
+        const form = $box.querySelector('.nm-form')
+        if (!form) return
+
+        let boxHeight = form.offsetHeight + boxHeader + boxFooter + 20
+        if (!this.advanced_.inline) {
+          boxHeight += 20
+        }
+        $box.style.height = boxHeight + 'px'
+        // 保存动态计算的高度，避免后续样式被覆盖
+        this.dynamicHeight = boxHeight + 'px'
+      },
+
+      /** 高级查询按钮点击事件 */
+      onAdvancedClick() {
+        this.showAdvanced = !this.showAdvanced
+
+        if (this.showAdvanced) {
+          this.$nextTick(() => {
+            let $box = this.$refs.advancedBox
+            let $arrow = this.$refs.arrow
+            const boxWidth = $box.offsetWidth
+            const { x, y, width, height } = this.$refs.showAdvnacedBtn.$el.getBoundingClientRect()
+            let left = x + width / 2 - $box.offsetWidth / 2
+            // 判断右侧有没有超出页面
+            if (left + boxWidth > document.body.offsetWidth) {
+              left = document.body.offsetWidth - boxWidth - 20
+              // 计算箭头的位置
+              $arrow.style.left = x - left - 10 + width / 2 + 'px'
+            } else {
+              // 计算箭头的位置
+              $arrow.style.left = $box.offsetWidth / 2 + 'px'
+            }
+
+            $box.style.left = left + 'px'
+            $box.style.top = y + height + 14 + 'px'
+
+            // 设置高度
+            if (!this.advanced_.height) {
+              this.calculateAdvancedHeight()
+            }
+          })
+        }
+      },
+      onExport() {
+        this.$parent.triggerExport()
+      },
+      /** 设置输入框宽度 */
+      setInputWidths(formRef) {
+        if (!this.inputWidth || !formRef || !formRef.$el) return
+        
+        let inputs = formRef.$el.querySelectorAll('.el-input__inner')
+        if (inputs) {
+          for (let i = 0; i < inputs.length; i++) {
+            const input = inputs[i] 
+            // 检查是否有data-width属性，如果有则使用该值，否则使用inputWidth
+            const customWidth = input.getAttribute('data-width')             
+            input.style.width = customWidth || this.inputWidth           
+          }
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.$refs.normalForm.$el.addEventListener('keydown', e => {
+          if (e.keyCode === 13) {
+            this.query()
+          }
+        })
+        // 设置普通查询栏输入框宽度
+        this.setInputWidths(this.$refs.normalForm)
+      })
+    },
+    watch: {
+      showAdvanced(newVal) {
+        if (newVal && this.$refs.advancedForm) {
+          // 高级查询框显示时，设置其中的输入框宽度
+          this.$nextTick(() => {
+            this.setInputWidths(this.$refs.advancedForm)
+          })
+        }
+      }
+    }
+  }
+</script>

package/packages/components/list/components/querybar/index.vue

@@ -1,7 +1,8 @@
 <template>
   <!--工具栏-->
   <section class="nm-list-querybar">
-    <nm-form ref="normalForm" class="nm-list-querybar-normal" :model="model_" :rules="rules" :size="fontSize" :inline="true">
+    <nm-form ref="normalForm" class="nm-list-querybar-normal" :model="model_" :rules="rules" :size="fontSize"
+      :inline="true">
       <slot />
       <el-form-item v-if="!noSearch">
         <nm-button type="primary" @click="query" :icon="!noSearchButtonIcon ? 'search' : ''" text="查询" />
@@ -26,13 +27,15 @@
 
     <!--高级查询框-->
     <transition name="el-zoom-in-top">
-      <section ref="advancedBox" class="nm-list-querybar-advanced" v-if="advanced_.enabled" v-show="showAdvanced" :style="advancedStyle">
+      <section ref="advancedBox" class="nm-list-querybar-advanced" v-if="advanced_.enabled" v-show="showAdvanced"
+        :style="advancedStyle">
         <nm-box page header footer title="高级查询" icon="search">
           <template v-slot:toolbar>
             <nm-button icon="close" @click="showAdvanced = false" />
           </template>
           <!--查询条件-->
-          <nm-form ref="advancedForm" :model="model_" :rules="rules" :label-width="advanced_.labelWidth" :inline="advanced_.inline">
+          <nm-form ref="advancedForm" :model="model_" :rules="rules" :label-width="advanced_.labelWidth"
+            :inline="advanced_.inline">
             <slot name="advanced" />
           </nm-form>
           <template v-slot:footer>
@@ -48,184 +51,166 @@
   </section>
 </template>
 <script>
-  const defaultAdvanced = {
-    // 是否开启
-    enabled: false,
-    // 宽度
-    width: '400px',
-    // 高度
-    height: '',
-    // 表单标签宽度
-    labelWidth: '100px',
-    // 内联表单
-    inline: false
-  }
-  export default {
-    data() {
+const defaultAdvanced = {
+  // 是否开启
+  enabled: false,
+  // 宽度
+  width: '400px',
+  // 高度
+  height: '',
+  // 表单标签宽度
+  labelWidth: '100px',
+  // 内联表单
+  inline: false
+}
+export default {
+  data() {
+    return {
+      // 是否显示高级查询
+      showAdvanced: false,
+      // 动态计算的高度
+      dynamicHeight: ''
+    }
+  },
+  props: {
+    /** 输入框的宽度 */
+    inputWidth: {
+      type: String,
+      default: '160px'
+    },
+    /** 查询模型 */
+    model: Object,
+    /** 验证规则 */
+    rules: Object,
+    /** 高级查询属性 */
+    advanced: Object,
+    /** 不显示按钮图标 */
+    noSearchButtonIcon: Boolean,
+    /** 不需要查询 */
+    noSearch: Boolean,
+    /**不显示查询按钮 */
+    noReset: Boolean,
+    /**显示导出按钮 */
+    exportEnabled: Boolean,
+    /**导出按钮权限编码 */
+    exportBtnCode: String
+  },
+  computed: {
+    model_() {
+      return this.model || {}
+    },
+    /** 高级查询设置 */
+    advanced_() {
+      const ad = this.$_.merge({}, defaultAdvanced, this.advanced)
+      ad.enabled = ad.enabled && !this.noSearch
+      return ad
+    },
+    /** 高级查询框样式 */
+    advancedStyle() {
       return {
-        // 是否显示高级查询
-        showAdvanced: false,
-        // 动态计算的高度
-        dynamicHeight: ''
+        width: this.advanced_.width,
+        height: this.advanced_.height || this.dynamicHeight
+      }
+    }
+  },
+  methods: {
+    query() {
+      this.$parent.page.index = 1
+      this.$parent.query()
+      // 如果高级查询框显示，重新计算高度
+      if (this.showAdvanced && !this.advanced_.height) {
+        this.$nextTick(() => {
+          this.calculateAdvancedHeight()
+        })
       }
     },
-    props: {
-      /** 输入框的宽度 */
-      inputWidth: {
-        type: String,
-        default: '160px'
-      },
-      /** 查询模型 */
-      model: Object,
-      /** 验证规则 */
-      rules: Object,
-      /** 高级查询属性 */
-      advanced: Object,
-      /** 不显示按钮图标 */
-      noSearchButtonIcon: Boolean,
-      /** 不需要查询 */
-      noSearch: Boolean,
-      /**不显示查询按钮 */
-      noReset: Boolean,
-      /**显示导出按钮 */
-      exportEnabled: Boolean,
-      /**导出按钮权限编码 */
-      exportBtnCode: String
-    },
-    computed: {
-      model_() {
-        return this.model || {}
-      },
-      /** 高级查询设置 */
-      advanced_() {
-        const ad = this.$_.merge({}, defaultAdvanced, this.advanced)
-        ad.enabled = ad.enabled && !this.noSearch
-        return ad
-      },
-      /** 高级查询框样式 */
-      advancedStyle() {
-        return {
-          width: this.advanced_.width,
-          height: this.advanced_.height || this.dynamicHeight
-        }
+    /** 表单重置 */
+    reset() {
+      if (this.$refs.normalForm) {
+        this.$refs.normalForm.reset()
       }
+      if (this.$refs.advancedForm) {
+        this.$refs.advancedForm.reset()
+      }
+      this.$emit('reset')
     },
-    methods: {
-      query() {
-        this.$parent.page.index = 1
-        this.$parent.query()
-        // 如果高级查询框显示，重新计算高度
-        if (this.showAdvanced && !this.advanced_.height) {
-          this.$nextTick(() => {
-            this.calculateAdvancedHeight()
-          })
-        }
-      },
-      /** 表单重置 */
-      reset() {
-        if (this.$refs.normalForm) {
-          this.$refs.normalForm.reset()
-        }
-        if (this.$refs.advancedForm) {
-          this.$refs.advancedForm.reset()
-        }
-        this.$emit('reset')
-      },
-      validate(action) {
-        return this.$refs.normalForm.validate(action)
-      },
-      /** 计算高级查询框高度 */
-      calculateAdvancedHeight() {
-        if (!this.$refs.advancedBox) return
+    validate(action) {
+      return this.$refs.normalForm.validate(action)
+    },
+    /** 计算高级查询框高度 */
+    calculateAdvancedHeight() {
+      if (!this.$refs.advancedBox) return
 
-        const $box = this.$refs.advancedBox
-        const boxHeader = $box.querySelector('.nm-box-header')?.offsetHeight || 0
-        const boxFooter = $box.querySelector('.nm-box-footer')?.offsetHeight || 0
-        const form = $box.querySelector('.nm-form')
-        if (!form) return
+      const $box = this.$refs.advancedBox
+      const boxHeader = $box.querySelector('.nm-box-header')?.offsetHeight || 0
+      const boxFooter = $box.querySelector('.nm-box-footer')?.offsetHeight || 0
+      const form = $box.querySelector('.nm-form')
+      if (!form) return
 
-        let boxHeight = form.offsetHeight + boxHeader + boxFooter + 20
-        if (!this.advanced_.inline) {
-          boxHeight += 20
-        }
-        $box.style.height = boxHeight + 'px'
-        // 保存动态计算的高度，避免后续样式被覆盖
-        this.dynamicHeight = boxHeight + 'px'
-      },
+      let boxHeight = form.offsetHeight + boxHeader + boxFooter + 20
+      if (!this.advanced_.inline) {
+        boxHeight += 20
+      }
+      $box.style.height = boxHeight + 'px'
+      // 保存动态计算的高度，避免后续样式被覆盖
+      this.dynamicHeight = boxHeight + 'px'
+    },
 
-      /** 高级查询按钮点击事件 */
-      onAdvancedClick() {
-        this.showAdvanced = !this.showAdvanced
+    /** 高级查询按钮点击事件 */
+    onAdvancedClick() {
+      this.showAdvanced = !this.showAdvanced
 
-        if (this.showAdvanced) {
-          this.$nextTick(() => {
-            let $box = this.$refs.advancedBox
-            let $arrow = this.$refs.arrow
-            const boxWidth = $box.offsetWidth
-            const { x, y, width, height } = this.$refs.showAdvnacedBtn.$el.getBoundingClientRect()
-            let left = x + width / 2 - $box.offsetWidth / 2
-            // 判断右侧有没有超出页面
-            if (left + boxWidth > document.body.offsetWidth) {
-              left = document.body.offsetWidth - boxWidth - 20
-              // 计算箭头的位置
-              $arrow.style.left = x - left - 10 + width / 2 + 'px'
-            } else {
-              // 计算箭头的位置
-              $arrow.style.left = $box.offsetWidth / 2 + 'px'
-            }
+      if (this.showAdvanced) {
+        this.$nextTick(() => {
+          let $box = this.$refs.advancedBox
+          let $arrow = this.$refs.arrow
+          const boxWidth = $box.offsetWidth
+          const { x, y, width, height } = this.$refs.showAdvnacedBtn.$el.getBoundingClientRect()
+          let left = x + width / 2 - $box.offsetWidth / 2
+          // 判断右侧有没有超出页面
+          if (left + boxWidth > document.body.offsetWidth) {
+            left = document.body.offsetWidth - boxWidth - 20
+            // 计算箭头的位置
+            $arrow.style.left = x - left - 10 + width / 2 + 'px'
+          } else {
+            // 计算箭头的位置
+            $arrow.style.left = $box.offsetWidth / 2 + 'px'
+          }
 
-            $box.style.left = left + 'px'
-            $box.style.top = y + height + 14 + 'px'
+          $box.style.left = left + 'px'
+          $box.style.top = y + height + 14 + 'px'
 
-            // 设置高度
-            if (!this.advanced_.height) {
-              this.calculateAdvancedHeight()
-            }
-          })
+          // 设置高度
+          if (!this.advanced_.height) {
+            this.calculateAdvancedHeight()
+          }
+        })
+      }
+    },
+    onExport() {
+      this.$parent.triggerExport()
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.normalForm.$el.addEventListener('keydown', e => {
+        if (e.keyCode === 13) {
+          this.query()
         }
-      },
-      onExport() {
-        this.$parent.triggerExport()
-      },
-      /** 设置输入框宽度 */
-      setInputWidths(formRef) {
-        if (!this.inputWidth || !formRef || !formRef.$el) return
-        
-        let inputs = formRef.$el.querySelectorAll('.el-input__inner')
+      })
+      if (this.inputWidth) {
+        let inputs = this.$refs.normalForm.$el.querySelectorAll('.el-input__inner')
         if (inputs) {
           for (let i = 0; i < inputs.length; i++) {
-            const input = inputs[i] 
-
+            // inputs[i].style.width = this.inputWidth  
+            const input = inputs[i]
             // 检查是否有data-width属性，如果有则使用该值，否则使用inputWidth
             const customWidth = input.getAttribute('data-width')
-
-            console.log('data-width============>1',customWidth) 
-            input.style.width = customWidth || this.inputWidth 
-            console.log('input.style.width==========>2',input.style.width)
+            input.style.width = customWidth || this.inputWidth
           }
         }
       }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        this.$refs.normalForm.$el.addEventListener('keydown', e => {
-          if (e.keyCode === 13) {
-            this.query()
-          }
-        })
-        // 设置普通查询栏输入框宽度
-        this.setInputWidths(this.$refs.normalForm)
-      })
-    },
-    watch: {
-      showAdvanced(newVal) {
-        if (newVal && this.$refs.advancedForm) {
-          // 高级查询框显示时，设置其中的输入框宽度
-          this.$nextTick(() => {
-            this.setInputWidths(this.$refs.advancedForm)
-          })
-        }
-      }
-    }
+    })
   }
+}
 </script>

package/packages/mixins/components/select.js

@@ -81,8 +81,19 @@ export default {
   },
   mounted() {
     this.refresh()
+    this.$nextTick(() => {
+      this.setDataWidth()
+    })
   },
   methods: {
+    // 设置data-width属性到内部的input元素
+    setDataWidth() {
+      if (!this.$el) return      
+      const input = this.$el.querySelector('.el-input__inner')
+      if (input && this.$attrs['data-width']) {
+        input.setAttribute('data-width', this.$attrs['data-width'])
+      }
+    },
     // 刷新
     refresh() {
       //远程搜索使用远程方法
@@ -201,6 +212,9 @@ export default {
                   remote: this.remote,
                   remoteMethod: this.remoteMethod
                 },
+                attrs: {
+                  'data-width': this.$attrs['data-width'] || ''
+                },
                 on: {
                   change: this.onChange,
                   'visible-change': this.onVisibleChange,