web-component-gallery 2.0.21 → 2.0.22

package/lib/modal/style/index.less

@@ -59,5 +59,6 @@
     }
     &-body {
         flex: 1;
+        min-height: 0;
     } 
 }

package/lib/model/Model.js

@@ -1,5 +1,6 @@
 import { FormModel } from 'ant-design-vue'
 import { getFormWidth, setFormItemRule, setFormItem } from './utils/render'
+import _ from 'lodash'
 
 export default {
   name: 'WModel',
@@ -31,7 +32,17 @@ export default {
       }
     },
     /* 表单项配置 */
-    formSetting: Array
+    formSetting: {
+      type: Array,
+      default: () => [],
+      validator: value => {
+        return value.every(item => {
+          return typeof item === 'object' && 
+                 'model' in item && 
+                 'type' in item
+        })
+      }
+    }
   },
   computed: {
     form: {
@@ -39,25 +50,13 @@ export default {
         /** 校验单独赋值延迟的字段 */
         for (const k in this.value) {
           Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k)
-        } 
+        }
         return this.value
       },
       set(value) {
         this.$emit('Change:Model', value) 
       }
     },
-    formAttrs() {
-      let attr = {
-        labelCol: { span: 4 },
-        wrapperCol: { span: 20 },
-        ...this.$attrs
-      }
-      this.layout === 'vertical' && (
-        delete attr.labelCol,
-        delete attr.wrapperCol
-      )
-      return attr
-    },
     filterSetting() {
       return this.formSetting.filter(settingItem => !settingItem.hidden)
     }
@@ -76,54 +75,66 @@ export default {
     this.$emit('update:refForm', this.$refs.FormModel)
   },
   methods: {
-    /** 包含单表单项，多表单项，动态增减表单项合并处理 */
+    getDefaultFormAttrs() {
+      return {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 20 }
+      }
+    },
+    
+    renderSingleFormItem(props) {
+      return setFormItem.call(this, h, this.form, props)
+    },
+    
+    renderDynamicFormItems(props) {
+      return props.multipleConfig.map((configItem, key) => {
+        const childAttrs = {
+          key,
+          prop: `${props.model}.${key}.${configItem.model}`,
+          style: getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),
+          rules: setFormItemRule.call(this, configItem, props),
+          parentModel: props.model
+        }
+        return setFormItem.call(this, h, this.form[props.model][key], configItem, childAttrs)
+      })
+    },
+    
     setModelRender(props) {
       const dynamicModel = this.form[props.model]
       return (
-        /** 
-         * multiple为动态多项
-         * multipleConfig为配置的动态项数据 */
-        <div class={props.multiple && ['MultipleForm']} {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize, false) } }}>
-          {/* 使用场景：添加分层提示信息及其他隔层操作 */}
+        <div 
+          class={props.multiple && ['MultipleForm']} 
+          {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize, props.multiple ? 24 : 0) } }}
+        >
           {this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props)}
           {
-            /** 处理动态增减表单 */
-            dynamicModel instanceof Array && props.multiple ? 
-            dynamicModel.map( (modelItem, index) => 
-              props.multipleConfig.map( (configItem, key) => {
-                /** 为动态项时重新定义绑定key、prop等来进行检验 */
-                /** 目前还有一个动态项layoutSize排版问题 */
-                const childAttrs = {
-                  key: index,
-                  prop: `${props.model}.${index}.${configItem.model}`,
-                  style: getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),
-                  rules: setFormItemRule.call(this, configItem, props),
-                  parentModel: props.model
-                }
-                return setFormItem.call(this, h, modelItem, configItem, childAttrs)
-              } )
-            ) : 
-            setFormItem.call(this, h, this.form, props)
+            dynamicModel instanceof Array && props.multiple 
+              ? this.renderDynamicFormItems(props)
+              : this.renderSingleFormItem(props)
           }
-          {/* 使用场景：如另起一行添加其他额外信息及操作 */}
           {this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)}
         </div>
       )
     },
-    /** 提交测验 */
+    
+    getFormWidth: _.memoize(function(props, layoutSize, multiple) {
+      return getFormWidth.call(this, props, layoutSize, multiple ? 24 : 0)
+    }),
+    
     formSubmit() {
       return new Promise((resolve, reject) => {
         this.$refs.FormModel.validate()
-                  .then(resolve)
-                  .catch(err => 
-                    this.$nextTick(() => {
-                      const errorDiv = document.getElementsByClassName('has-error')
-                      errorDiv[0].scrollIntoView({ 
-                        behavior: "smooth",
-                        block: "center"
-                      })
-                    })
-                  )
+          .then(resolve)
+          .catch(err => {
+            console.error('表单验证失败:', err)
+            this.$nextTick(() => {
+              const errorDiv = document.getElementsByClassName('has-error')
+              errorDiv[0].scrollIntoView({ 
+                behavior: "smooth",
+                block: "center"
+              })
+            })
+          })
       })
     }
   },
@@ -148,4 +159,4 @@ export default {
       </FormModel>
     )
   }
-}
+}

package/lib/model/utils/render.js

@@ -3,82 +3,107 @@ import RenderComp from '../../form-comp/RenderComp.vue'
 
 const FormModelItem = FormModel.Item
 
-/** 根据layoutSize来进行距离及大小切分 */
-export function getFormWidth(child, layoutSize, gap = true) { 
-  if (this.layout === 'vertical')
-    return `flex: 0 1 calc((${(100 / layoutSize) * (child.size ?? 1)}% - 24px)); ${gap && 'margin-right:24px;'}`
+/**
+ * 根据布局大小计算表单宽度
+ * @param {Object} child - 表单项配置
+ * @param {number} layoutSize - 一行显示的表单项数量
+ * @param {number} [gap=24] - 表单项间距
+ * @returns {string} - 计算后的CSS样式
+ */
+export function getFormWidth(child, layoutSize, gap = 24) {
+  if (this.layout === 'vertical') {
+    const width = (100 / layoutSize) * (child.size ?? 1)
+    return `flex: 0 1 calc(${width}% - ${gap}px); margin-right: ${gap}px;`
+  }
   return `flex: 0 1 ${(100 / layoutSize) * (child.size ?? 1)}%;`
-} 
+}
 
-/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */
+/**
+ * 动态设置表单项验证规则
+ * @param {Object} node - 当前表单项配置
+ * @param {Object} [nodeParent={}] - 父表单项配置
+ * @returns {Array} - 验证规则数组
+ */
 export function setFormItemRule(node, nodeParent = {}) {
+  // 确定是否必填
   const required = (node.required ?? nodeParent.required ?? this.formAttrs.required) ?? true
- 
-  /** node.placeholder与组件内的提示文字位置不对等 */
-  const message =
-    node.attrs?.placeholder ||
+  
+  // 生成提示信息
+  const message = node.attrs?.placeholder || 
     (/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') +
-      (node.label || '')
+    (node.label || '')
 
-  const rules = [
+  // 基础规则
+  const baseRules = [
     {
       required,
       message,
-      trigger: ['change', 'blur'] 
+      trigger: ['change', 'blur']
+    }
+  ]
+
+  // 合并自定义规则
+  const customRules = (node.rules || []).filter(rule => {
+    if (rule.pattern) {
+      rule.pattern = new RegExp(rule.pattern)
     }
-  ].concat(
-    (node.rules || []).filter(i => {
-      i.pattern && (i.pattern = new RegExp(i.pattern))
-      return i
-    }))
+    return rule
+  })
 
-  return rules
+  return [...baseRules, ...customRules]
 }
 
-/** 动态渲染表单项 */
+/**
+ * 动态渲染表单项
+ * @param {Function} h - Vue的createElement函数
+ * @param {Object} vModel - 表单数据对象
+ * @param {Object} child - 表单项配置
+ * @param {Object} [childAttrs] - 表单项属性
+ * @returns {VNode} - 渲染结果
+ */
 export function setFormItem(h, vModel, child, childAttrs) {
-      
   const {layout, layoutSize, $scopedSlots} = this
 
-  let formItemAttrs = 
-    childAttrs ??
-    {
-      key: child.model,
-      prop: child.model,
-      colon: !(layout == 'inline') 
-    }
+  // 设置表单项属性
+  const formItemAttrs = childAttrs ?? {
+    key: child.model,
+    prop: child.model,
+    colon: !(layout === 'inline')
+  }
+
+  // 生成插槽名称
+  const slotsName = (childAttrs?.parentModel ?? '') + child.model
 
-  const slotsName = 
-        (childAttrs?.parentModel ?? '') + child.model
+  // 渲染标签
+  const renderLabel = customLabel => 
+    customLabel ? customLabel(vModel) : <span>{child.label}</span>
 
-  const {label, customLabel} = child
+  // 渲染表单项内容
+  const renderContent = () => {
+    if ($scopedSlots[child.model]) {
+      return $scopedSlots[child.model](child)
+    }
+    return (
+      <RenderComp
+        v-model={vModel[child.model]}
+        component={child.is}
+        {...{ on: child.event, attrs: child.attrs }}
+      />
+    )
+  }
 
   return (
     <FormModelItem
       class={[
-        { FormLineVertical: child.size === layoutSize && layout === 'vertical' },
-        { FormLine: child.size === layoutSize }
+        { 'FormLineVertical': child.size === layoutSize && layout === 'vertical' },
+        { 'FormLine': child.size === layoutSize }
       ]}
       {...{ attrs: formItemAttrs }}
     >
       <template slot="label">
-        {
-          customLabel ? 
-          customLabel(vModel) : 
-          <span>{label}</span>
-        }
+        {renderLabel(child.customLabel)}
       </template>
-      {/* 当前表单项可slot进行单独开发配置 (目前仅支持非动态增减情况) */}
-      {$scopedSlots[child.model] ? (
-        $scopedSlots[child.model](child)
-      ) : (
-        <RenderComp
-          v-model={vModel[child.model]} 
-          component={child.is}
-          {...{ on: child.event, attrs: child.attrs }}
-        />
-      )} 
-      {/* 如若再某个model后需添加按钮等场景（例如地图的选址按钮 */}
+      {renderContent()}
       {$scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](formItemAttrs)}
     </FormModelItem>
   )

package/lib/table/index.vue

@@ -153,11 +153,11 @@ export default {
   }, 
   watch: {
     paginationParams(newValue) {
-      this.pagination = { ...newValue }
+      this.pagination = { ...this.pagination, ...newValue }
     }
   },
   mounted() {
-    this.pagination = { ...this.paginationParams }
+    this.pagination = { ...this.pagination, ...this.paginationParams }
     // 监听父级高度
     this.initResizeObserver()
     const scrollTimer = setTimeout(() => {
@@ -196,8 +196,8 @@ export default {
         16 - // 基础间距
         tableTitleHeight -
         headerHeight -
-        20 // 浮动空间缓冲
-      /** 20为获取高度时抹掉的小数点后两位的浮动空间(存在叠加多个获取错误的情况) */
+        24 // 浮动空间缓冲
+      /** 24为获取高度时抹掉的小数点后两位的浮动空间(存在叠加多个获取错误的情况) */
     },
     /** 根据高度判断dom元素是否加载 进行删除 */
     removeDomElement() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [