haiwei-ui 1.0.2 → 1.0.4

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

@@ -27,7 +27,7 @@
     <!--高级查询框-->
     <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">
+        <nm-box page header footer title="高级查询1" icon="search">
           <template v-slot:toolbar>
             <nm-button icon="close" @click="showAdvanced = false" />
           </template>
@@ -48,141 +48,162 @@
   </section>
 </template>
 <script>
-const defaultAdvanced = {
-  // 是否开启
-  enabled: false,
-  // 宽度
-  width: '400px',
-  // 高度
-  height: '',
-  // 表单标签宽度
-  labelWidth: '100px',
-  // 内联表单
-  inline: false
-}
-export default {
-  data() {
-    return {
-      // 是否显示高级查询
-      showAdvanced: false
-    }
-  },
-  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() {
+  const defaultAdvanced = {
+    // 是否开启
+    enabled: false,
+    // 宽度
+    width: '400px',
+    // 高度
+    height: '',
+    // 表单标签宽度
+    labelWidth: '100px',
+    // 内联表单
+    inline: false
+  }
+  export default {
+    data() {
       return {
-        width: this.advanced_.width,
-        height: this.advanced_.height
+        // 是否显示高级查询
+        showAdvanced: false,
+        // 动态计算的高度
+        dynamicHeight: ''
       }
-    }
-  },
-  methods: {
-    query() {
-      this.$parent.page.index = 1
-      this.$parent.query()
     },
-    /** 表单重置 */
-    reset() {
-      if (this.$refs.normalForm) {
-        this.$refs.normalForm.reset()
-      }
-      if (this.$refs.advancedForm) {
-        this.$refs.advancedForm.reset()
-      }
-      this.$emit('reset')
+    props: {
+      /** 输入框的宽度 */
+      inputWidth: {
+        type: String,
+        default: '160px'
+      },
+      /** 查询模型 */
+      model: Object,
+      /** 验证规则 */
+      rules: Object,
+      /** 高级查询属性 */
+      advanced: Object,
+      /** 不显示按钮图标 */
+      noSearchButtonIcon: Boolean,
+      /** 不需要查询 */
+      noSearch: Boolean,
+      /**不显示查询按钮 */
+      noReset: Boolean,
+      /**显示导出按钮 */
+      exportEnabled: Boolean,
+      /**导出按钮权限编码 */
+      exportBtnCode: String
     },
-    validate(action) {
-      return this.$refs.normalForm.validate(action)
+    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
+        }
+      }
     },
-    /** 高级查询按钮点击事件 */
-    onAdvancedClick() {
-      this.showAdvanced = !this.showAdvanced
+    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
 
-      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'
-          }
+        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'
+      },
 
-          $box.style.left = left + 'px'
-          $box.style.top = y + height + 14 + 'px'
+      /** 高级查询按钮点击事件 */
+      onAdvancedClick() {
+        this.showAdvanced = !this.showAdvanced
 
-          // 设置高度
-          if (!this.advanced_.height) {
-            const boxHeader = $box.querySelector('.nm-box-header').offsetHeight
-            const boxFooter = $box.querySelector('.nm-box-footer').offsetHeight
-            let boxHeight = $box.querySelector('.nm-form').offsetHeight + boxHeader + boxFooter + 20
-            if (!this.advanced_.inline) {
-              boxHeight += 20
+        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.height = boxHeight + 'px'
-          }
-        })
+
+            $box.style.left = left + 'px'
+            $box.style.top = y + height + 14 + 'px'
+
+            // 设置高度
+            if (!this.advanced_.height) {
+              this.calculateAdvancedHeight()
+            }
+          })
+        }
+      },
+      onExport() {
+        this.$parent.triggerExport()
       }
     },
-    onExport() {
-      this.$parent.triggerExport()
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.$refs.normalForm.$el.addEventListener('keydown', e => {
-        if (e.keyCode === 13) {
-          this.query()
-        }
-      })
-      if (this.inputWidth) {
-        let inputs = this.$refs.normalForm.$el.querySelectorAll('.el-input__inner')
-        if (inputs) {
-          for (let i = 0; i < inputs.length; i++) {
-            inputs[i].style.width = this.inputWidth
+    mounted() {
+      this.$nextTick(() => {
+        this.$refs.normalForm.$el.addEventListener('keydown', e => {
+          if (e.keyCode === 13) {
+            this.query()
+          }
+        })
+        if (this.inputWidth) {
+          let inputs = this.$refs.normalForm.$el.querySelectorAll('.el-input__inner')
+          if (inputs) {
+            for (let i = 0; i < inputs.length; i++) {
+              inputs[i].style.width = this.inputWidth
+            }
           }
         }
-      }
-    })
+      })
+    }
   }
-}
 </script>

package/packages/components/list/components/select-column/index.vue

@@ -17,37 +17,37 @@
   </el-dropdown>
 </template>
 <script>
-export default {
-  data() {
-    return {
-      checkAll: false,
-      isIndeterminate: true,
-      selection: [],
-      visible: false
-    }
-  },
-  props: ['columns'],
-  methods: {
-    change() {
-      let checkedCount = this.selection.length
-      this.checkAll = checkedCount === this.columns.length
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length
-      this.handleEvent()
-    },
-    handleCheckAllChange(val) {
-      this.selection = val ? this.columns.map(item => item.name) : []
-      this.isIndeterminate = false
-      this.handleEvent()
-    },
-    handleEvent() {
-      this.columns.forEach(col => {
-        col.show = !this.selection.every(name => name !== col.name)
-      })
-      this.$emit('change')
+  export default {
+    data() {
+      return {
+        checkAll: false,
+        isIndeterminate: true,
+        selection: [],
+        visible: false
+      }
     },
-    onVisible(visible) {
-      this.visible = visible
+    props: ['columns'],
+    methods: {
+      change() {
+        let checkedCount = this.selection.length
+        this.checkAll = checkedCount === this.columns.length
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length
+        this.handleEvent()
+      },
+      handleCheckAllChange(val) {
+        this.selection = val ? this.columns.map(item => item.name) : []
+        this.isIndeterminate = false
+        this.handleEvent()
+      },
+      handleEvent() {
+        this.columns.forEach(col => {
+          col.show = !this.selection.every(name => name !== col.name)
+        })
+        this.$emit('change')
+      },
+      onVisible(visible) {
+        this.visible = visible
+      }
     }
   }
-}
 </script>