haiwei-ui 1.3.0 → 1.3.2

package/packages/components/update-password/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <nm-form-dialog ref="form" title="修改密码" class="nm-update-password" width="400px" icon="password" :model="model" :rules="rules" :action="updatePassword" :visible.sync="visible_" success-msg-text="修改成功" @success="logout">
+  <nm-form-dialog ref="form" title="修改密码" class="nm-update-password" width="400px" icon="password" :model="model"
+    :rules="rules" :action="updatePassword" :visible.sync="visible_" success-msg-text="修改成功" @success="logout">
     <el-alert title="提示" type="warning" description="密码修改成功后，需要重新登录" show-icon :closable="false"></el-alert>
     <el-row>
       <el-col :span="18" :offset="2">
@@ -17,56 +18,57 @@
   </nm-form-dialog>
 </template>
 <script>
-  import visible from '../../mixins/components/visible.js'
-  import { mapState, mapActions } from 'vuex'
+import visible from '../../mixins/components/visible.js'
+import { mapState, mapActions } from 'vuex'
 
-  export default {
-    name: 'UpdatePassword',
-    mixins: [visible],
-    data() {
-      // 密码验证
-      const validator = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('请输入确认密码'))
-        } else if (value !== this.model.newPassword) {
-          callback(new Error('两次输入密码不一致!'))
-        } else {
-          callback()
-        }
+export default {
+  name: 'UpdatePassword',
+  mixins: [visible],
+  data() {
+    // 密码验证
+    const validator = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入确认密码'))
+      } else if (value !== this.model.newPassword) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
       }
-      return {
-        model: {
-          oldPassword: '',
-          newPassword: '',
-          confirmPassword: ''
-        },
-        rules: {
-          oldPassword: [{ required: true, message: '请输入原密码' }],
-          newPassword: [
-            { required: true, message: '请输入新密码' },
-            { min: 6, message: '密码长度不能小于6' }
-          ],
-          confirmPassword: [{ validator }]
-        }
+    }
+    return {
+      model: {
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      },
+      rules: {
+        oldPassword: [{ required: true, message: '请输入原密码' }],
+        newPassword: [
+          { required: true, message: '请输入新密码' },
+          { min: 6, message: '密码长度不能小于6' }
+        ],
+        confirmPassword: [{ validator }]
       }
-    },
-    computed: {
-      ...mapState('app/system', { updatePassword: s => s.actions.updatePassword })
-    },
-    methods: {
-      ...mapActions('app/system', ['logout'])
     }
+  },
+  computed: {
+    ...mapState('app/system', { updatePassword: s => s.actions.updatePassword })
+  },
+  methods: {
+    ...mapActions('app/system', ['logout'])
   }
+}
 </script>
 <style lang="scss" scoped>
-  .nm-update-password {
-    .el-alert {
-      margin-top: -5px;
-      margin-bottom: 10px;
-      line-height: 15px;
-    }
-    .el-visible__footer {
-      line-height: 15px;
-    }
+.nm-update-password {
+  .el-alert {
+    margin-top: -5px;
+    margin-bottom: 10px;
+    line-height: 15px;
+  }
+
+  .el-visible__footer {
+    line-height: 15px;
   }
+}
 </style>

package/packages/mixins/components/select.js

@@ -104,6 +104,16 @@ export default {
         this.options = options
         this.loading = false
 
+        // 检查当前值是否在新加载的选项中
+        if (this.value_ && options.length > 0) {
+          const found = this.findOptionByValue(this.value_)
+          if (found) {
+            console.log('【nm-select】refresh后找到匹配选项:', found.label, '->', found.value)
+          } else {
+            console.warn('【nm-select】refresh后未找到匹配选项，当前值:', this.value_)
+          }
+        }
+
         if (this.checkedFirst && !this.hasInit && options.length > 0) {
           this.onChange(options[0].value)
           this.hasInit = true
@@ -183,15 +193,21 @@ export default {
         console.log('【nm-select】value 变化:', oldVal, '->', newVal)
         this.value_ = newVal
         
-        // 如果新值不为空，且选项数据已加载，检查新值是否在选项中
-        if (newVal && this.options.length > 0) {
-          const found = this.findOptionByValue(newVal)
-          if (!found) {
-            console.warn('【nm-select】值', newVal, '不在当前选项列表中，尝试重新加载选项数据')
-            // 值不在当前选项中，重新加载选项数据
-            this.refresh()
+        // 如果新值不为空，检查新值是否在选项中
+        if (newVal) {
+          // 如果选项数据已加载，立即检查
+          if (this.options.length > 0) {
+            const found = this.findOptionByValue(newVal)
+            if (!found) {
+              console.warn('【nm-select】值', newVal, '不在当前选项列表中，尝试重新加载选项数据')
+              // 值不在当前选项中，重新加载选项数据
+              this.refresh()
+            } else {
+              console.log('【nm-select】找到匹配选项:', found.label, '->', found.value)
+            }
           } else {
-            console.log('【nm-select】找到匹配选项:', found.label, '->', found.value)
+            console.log('【nm-select】选项数据尚未加载，等待refresh后检查')
+            // 选项数据尚未加载，将在refresh方法中检查
           }
         }
       }

package/packages/styles/components/box/_index.scss

@@ -8,7 +8,7 @@
   border-style: solid;
   border-top: 1px solid $border-color2;
 
-  > #{$prefix}box-header {
+  >#{$prefix}box-header {
     padding: 0 5px;
     display: flex;
     align-items: stretch;
@@ -62,10 +62,12 @@
 
         &.is-disabled {
           cursor: not-allowed;
+
           span {
             color: #c0c4cc;
           }
         }
+
         &:not(.is-disabled):hover {
           color: $text-color1;
           transform: scale(1.2);
@@ -74,21 +76,21 @@
     }
   }
 
-  > #{$prefix}box-dialog {
+  >#{$prefix}box-dialog {
     position: relative;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
     @include flex-column();
     flex-grow: 1;
 
-    > #{$prefix}box-content {
+    >#{$prefix}box-content {
       position: relative;
       padding: 10px;
       flex-grow: 1;
       box-sizing: border-box;
     }
 
-    > #{$prefix}box-footer {
+    >#{$prefix}box-footer {
       padding: 0 10px;
       flex-shrink: 0;
       flex-grow: 0;
@@ -113,8 +115,8 @@
   }
 
   &.has-height {
-    > #{$prefix}box-dialog {
-      > #{$prefix}box-content {
+    >#{$prefix}box-dialog {
+      >#{$prefix}box-content {
         position: absolute;
         padding-left: 0;
         padding-right: 0;
@@ -124,8 +126,8 @@
         #{$prefix}box-wrapper {
           height: 100%;
 
-          > &-scrollbar {
-            > .el-scrollbar__wrap {
+          >&-scrollbar {
+            >.el-scrollbar__wrap {
               padding-left: 10px;
               padding-right: 10px;
             }
@@ -147,13 +149,13 @@
   &.page {
     height: 100%;
 
-    > #{$prefix}box-dialog {
+    >#{$prefix}box-dialog {
       padding: 0;
 
-      > #{$prefix}box-content {
+      >#{$prefix}box-content {
         padding: 0;
 
-        > #{$prefix}box-wrapper {
+        >#{$prefix}box-wrapper {
           position: absolute;
           width: 100%;
           height: 100%;
@@ -167,11 +169,11 @@
   }
 
   &.no-padding {
-    > #{$prefix}box-dialog {
-      > #{$prefix}box-content {
+    >#{$prefix}box-dialog {
+      >#{$prefix}box-content {
         padding: 0 !important;
 
-        > #{$prefix}box-wrapper {
+        >#{$prefix}box-wrapper {
           .el-scrollbar__view {
             padding: 0 !important;
           }
@@ -209,4 +211,4 @@
       font-weight: 600;
     }
   }
-}
+}

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

@@ -1,227 +0,0 @@
-<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>