web-component-gallery 2.3.12 → 2.3.13

package/lib/form-comp/ACascaderMultiple.vue

@@ -45,7 +45,7 @@
                   <li
                     class="cascader-content-item cascader-content-item-check-all"
                     @click="handleCascaderAllItemClick(isCheckAll)"
-                    v-if="levelIndex === 0"
+                    v-if="levelIndex === 0 && showAll"
                   >
                     <Checkbox
                       :indeterminate="isIndeterminateAll"
@@ -148,6 +148,10 @@
         type: String,
         default: "全部"
       },
+      showAll: {
+        type: Boolean,
+        default: true
+      },
       noDataText: {
         type: String,
         default: "暂无数据"
@@ -417,6 +421,20 @@
       handleFocus() {
         this.isOpen = true;
         this.isClickOutSide = false;
+        this.$nextTick(() => {
+          if (!this.treeDataList.length || !this.treeDataList[0].length) return;
+          const childrenTag = this.selectOptionsConfig.children;
+          const first = this.treeDataList[0][0];
+          if (!first || !first[childrenTag] || !first[childrenTag].length) return;
+          const clearActive = list => list.forEach(item => {
+            item.$active = false;
+            if (item[childrenTag] && item[childrenTag].length) clearActive(item[childrenTag]);
+          });
+          clearActive(this.treeDataList[0]);
+          first.$active = true;
+          this.addHideSelectedList(first[childrenTag]);
+          this.$set(this, 'treeDataList', [this.treeDataList[0], first[childrenTag]]);
+        });
       },
       updatePostData() {
         const childrenTag = this.selectOptionsConfig.children;

package/lib/form-comp/style/ACascaderMultiple.less

@@ -1,5 +1,11 @@
  
 .gb-ant-select-multiple-cascader {
+    cursor: pointer;
+
+    .ant-select-selection {
+        cursor: pointer;
+    }
+
     .ant-select-dropdown-menu-item {
         display: none;
     }
@@ -7,9 +13,9 @@
     .cascader-content-item {
         .checkbox-text {
             padding-left: @padding-xs;
-            font-size: @font-size-sm;
+            font-size: @font-size-base;
             color: @text-color;
-            cursor: default;
+            cursor: pointer;
             flex: 1;
             text-align: left;
             .ellipsis();
@@ -99,6 +105,7 @@
                     margin-top: @padding-xs - 2;
                     align-items: center;
                     line-height: 1;
+                    cursor: pointer;
                     .flex-layout();
 
                     &:hover {

package/lib/model/Model.js

@@ -4,78 +4,82 @@ import _ from 'lodash'
 
 export default {
   name: 'WModel',
+  // 定义组件的双向绑定模型，prop 为 value，事件为 Change:Model
   model: {
     prop: 'value',
     event: 'Change:Model'
-  }, 
-  data() {
-    return {
-      formRules: {}
-    }
   },
+  
   props: {
+    // 表单绑定的数据对象
     value: {
       type: Object,
       default: () => ({})
-    }, 
-    /* Form布局方式 */
-    layout: { 
+    },
+    // 表单布局模式：'vertical' 或其他（水平布局）
+    layout: {
       type: String,
       default: 'vertical'
     },
-    /* 一行显示几个 PS:最多5个 */
+    // 布局尺寸配置，用于计算表单项宽度
     layoutSize: {
       type: Number,
       default: 4
     },
-    /* 表单项配置 */
-    formSetting: Array
+    // 表单配置项数组，定义每个表单项的属性
+    formSetting: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      // 存储动态生成的表单验证规则
+      formRules: {}
+    }
   },
+
   computed: {
+    // 双向绑定的 form 数据，获取时触发字段验证，设置时发射更新事件
     form: {
       get() {
-        /** 校验单独赋值延迟的字段 */
-        for (const k in this.value) {
-          Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k)
-        }
+        this.validateChangedFields()
         return this.value
       },
       set(value) {
-        this.$emit('Change:Model', value) 
+        this.$emit('Change:Model', value)
       }
     },
+
+    // 根据布局模式计算表单属性（labelCol, wrapperCol 等）
     formAttrs() {
       const baseAttrs = {
-        // 是否禁用表单，默认否
         disabled: false,
         ...this.$attrs
       }
-      
-      // 如果不是垂直布局，则添加标签列和包装列的配置
-      if (this.layout !== 'vertical') {
-        return {
-          labelCol: { span: 4 },
-          wrapperCol: { span: 20 },
-          ...baseAttrs
-        }
-      }
-      
-      return baseAttrs
+
+      return this.layout !== 'vertical'
+        ? { labelCol: { span: 4 }, wrapperCol: { span: 20 }, ...baseAttrs }
+        : baseAttrs
     },
+
+    // 动态生成当前可见表单项的验证规则
     dynamicFormRules() {
-      const formRules = {}
-      this.visibleFormItems
-          .forEach(node => {
-            // if (!node.rules || node.rules.length === 0) return
-            formRules[node.model] = setFormItemRule.call(this, node)
-          })
-      return formRules
+      return this.visibleFormItems.reduce((rules, node) => {
+        rules[node.model] = setFormItemRule.call(this, node)
+        return rules
+      }, {})
     },
+
+    // 过滤出未隐藏的表单项配置
     visibleFormItems() {
-      return this.formSetting.filter(settingItem => !settingItem.hidden)
+      return this.formSetting.filter(item => !item.hidden)
     }
   },
+
   watch: {
+    // 监听动态规则变化，同步到 formRules 以触发重新渲染
     dynamicFormRules: {
       handler(newRules) {
         this.formRules = newRules
@@ -83,81 +87,119 @@ export default {
       immediate: true
     }
   },
+
   mounted() {
+    // 将内部 FormModel 实例通过事件暴露给父组件
     this.$emit('update:refForm', this.$refs.FormModel)
   },
+
   methods: {
+    // 验证发生变化的字段
+    validateChangedFields() {
+      Object.keys(this.value).forEach(key => {
+        if (this.formRules[key] && this.$refs.FormModel) {
+          this.$refs.FormModel.validateField(key)
+        }
+      })
+    },
+
+    // 解析模型路径（支持嵌套如 'user.name'），返回父级、子级及是否嵌套标志
+    parseModelPath(modelPath) {
+      const parts = modelPath.split('.')
+      return {
+        parent: parts[0],
+        child: parts[1],
+        isNested: parts.length > 1
+      }
+    },
+
+    // 渲染单个表单项
     renderSingleFormItem(h, props) {
-      return setFormItem.call(this, h, this.form, props)
-    }, 
-    
+      const { parent, child, isNested } = this.parseModelPath(props.model)
+      const targetModel = isNested ? this.form[parent] : this.form
+      const finalModel = isNested ? child : parent
+
+      return setFormItem.call(this, h, targetModel, { ...props, model: finalModel }, {
+        prop: props.model
+      })
+    },
+
+    // 渲染动态多行表单项（适用于数组型数据）
     renderDynamicFormItems(h, dynamicModel, props) {
-      // multipleConfig为配置的动态项数据
-      return dynamicModel.map((modelItem, key) => {
-        // 为动态项时重新定义绑定key、prop等来进行检验
-        return props.multipleConfig.map((configItem) => {
+      return dynamicModel.map((modelItem, index) => 
+        props.multipleConfig.map(configItem => {
           const childAttrs = {
-            key,
-            prop: `${props.model}.${key}.${configItem.model}`,
+            key: index,
+            // 后续有空添加另一种形式（[0, 1, 2]）数组中仅一位，则省略configItem.model
+            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)
         })
-      })
-    }, 
-    
+      )
+    },
+
+    // 根据配置渲染表单项容器（支持单条或多条模式）
     setModelRender(h, props) {
-      const dynamicModel = this.form[props.model]
+      const { parent, isNested } = this.parseModelPath(props.model)
+      const dynamicModel = this.form[parent]
+
+      const containerStyle = getFormWidth.call(
+        this, 
+        props, 
+        this.layoutSize, 
+        props.multiple ? 0 : 24
+      )
+
       return (
-        <div 
-          class={props.multiple && ['MultipleForm']} 
-          {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize, props.multiple ? 0 : 24) } }}
+        <div
+          class={props.multiple && ['MultipleForm']}
+          {...{ attrs: { style: containerStyle } }}
         >
-          {/* 添加分层提示信息及其他隔层操作 */}
-          {this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props)}
-          {
-            // multiple为动态多项（使用场景：处理动态增减表单
-            dynamicModel instanceof Array && props.multiple 
-              ? this.renderDynamicFormItems(h, dynamicModel, props)
-              : this.renderSingleFormItem(h, props)
+          {this.$scopedSlots[`${props.model}Tips`]?.(props)}
+          {dynamicModel instanceof Array && props.multiple
+            ? this.renderDynamicFormItems(h, dynamicModel, props)
+            : this.renderSingleFormItem(h, props)
           }
-          {/* 使用场景：如另起一行添加其他额外信息及操作 */}
-          {this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)}
+          {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 => {
-            console.error('表单验证失败:', err)
-            this.$nextTick(() => {
-              const errorDiv = document.getElementsByClassName('has-error')
-              errorDiv[0].scrollIntoView({ 
-                behavior: "smooth",
-                block: "center"
-              })
-            })
-            reject()
-          })
+    }),
+
+    // 提交表单并处理验证错误
+    async formSubmit() {
+      try {
+        await this.$refs.FormModel.validate()
+      } catch (err) {
+        console.error('表单验证失败:', err)
+        this.scrollToFirstError()
+        throw err
+      }
+    },
+
+    // 滚动到第一个报错的表单项
+    scrollToFirstError() {
+      this.$nextTick(() => {
+        const errorElement = document.querySelector('.has-error')
+        errorElement?.scrollIntoView({ behavior: 'smooth', block: 'center' })
       })
     }
   },
+
   render(h) {
-    const {layout, formAttrs, setModelRender} = this
+    const { layout, formAttrs, setModelRender } = this
 
     return (
       <FormModel
         ref="FormModel"
-        class="FormModel" 
+        class="FormModel"
         props={{
           model: this.form,
           rules: this.formRules,
@@ -165,11 +207,8 @@ export default {
           ...formAttrs
         }}
       >
-        {
-          this.$slots.default ??
-          this.visibleFormItems.map(props => setModelRender(h, props))
-        } 
+        {this.$slots.default || this.visibleFormItems.map(props => setModelRender(h, props))}
       </FormModel>
     )
   }
-}
+}

package/lib/model/utils/render.js

@@ -8,90 +8,75 @@ const FormModelItem = FormModel.Item
  * @param {Object} child - 表单项配置
  * @param {number} layoutSize - 一行显示的表单项数量
  * @param {number} [gap=24] - 表单项间距
- * @returns {string} - 计算后的CSS样式
+ * @returns {string} CSS 样式字符串
  */
 export function getFormWidth(child, layoutSize, gap = 24) {
-  const width = (100 / layoutSize) * (child.size ?? 1)
-  if (this.layout === 'vertical') {
-    return `width: calc(${width}% - ${gap}px); margin-right: ${gap}px;`
-  }
-  return `width: ${width}%;`
+  const widthPercent = (100 / layoutSize) * (child.size ?? 1)
+  
+  return this.layout === 'vertical'
+    ? `width: calc(${widthPercent}% - ${gap}px); margin-right: ${gap}px;`
+    : `width: ${widthPercent}%;`
 }
 
 /**
  * 动态设置表单项验证规则
  * @param {Object} node - 当前表单项配置
  * @param {Object} [nodeParent={}] - 父表单项配置
- * @returns {Array} - 验证规则数组
+ * @returns {Array} 验证规则数组
  */
 export function setFormItemRule(node, nodeParent = {}) {
-  // 确定是否必填
-  const required = (node.required ?? nodeParent.required ?? this.formAttrs.required) ?? true
+  const required = node.required ?? nodeParent.required ?? this.formAttrs.required ?? true
   
-  // 生成提示信息
   const message = node.attrs?.placeholder || 
-    (/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') +
-    (node.label || '')
-
-  // 基础规则
-  const baseRules = []
+    `${/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入'}${node.label || ''}`
 
-  if (required) {
-    baseRules.push({
-      required,
-      message,
-      trigger: ['change', 'blur']
-    })
-  }
+  const baseRules = required ? [{
+    required,
+    message,
+    trigger: ['change', 'blur']
+  }] : []
 
-  // 合并自定义规则
-  const customRules = (node.rules || []).map(rule => {
-    if (rule.pattern && typeof rule.pattern === 'string') {
-      return { ...rule, pattern: new RegExp(rule.pattern) }
-    }
-    return rule
-  })
+  const customRules = (node.rules || []).map(rule =>
+    rule.pattern && typeof rule.pattern === 'string'
+      ? { ...rule, pattern: new RegExp(rule.pattern) }
+      : rule
+  )
 
   return [...baseRules, ...customRules]
-} 
+}
 
 /**
  * 动态渲染表单项
- * @param {Function} h - Vue的createElement函数
+ * @param {Function} h - Vue 的 createElement 函数
  * @param {Object} vModel - 表单数据对象
  * @param {Object} child - 表单项配置
  * @param {Object} [childAttrs] - 表单项属性
- * @returns {VNode} - 渲染结果
+ * @returns {VNode} 渲染结果
  */
-export function setFormItem(h, vModel, child, childAttrs) {
+export function setFormItem(h, vModel, child, childAttrs = {}) {
   const { layout, layoutSize, formAttrs, $scopedSlots } = this
+  const slotsName = `${childAttrs.parentModel || ''}${child.model}`
 
-  // 设置表单项属性
   const formItemAttrs = {
     key: child.model,
     prop: child.model,
-    colon: !(layout === 'inline'),
+    colon: layout !== 'inline',
     ...childAttrs
   }
 
-  // 生成插槽名称
-  const slotsName = (childAttrs?.parentModel ?? '') + child.model
+  const contentAttrs = {
+    disabled: childAttrs.disabled ?? formAttrs.disabled ?? false,
+    ...child.attrs
+  }
 
-  // 渲染标签
-  const renderLabel = customLabel => 
-    customLabel ? customLabel(vModel) : <span>{child.label}</span>
+  const renderLabel = () => 
+    child.customLabel ? child.customLabel(vModel) : <span>{child.label}</span>
 
-  // 渲染表单项内容
   const renderContent = () => {
     if ($scopedSlots[child.model]) {
       return $scopedSlots[child.model](child)
     }
     
-    const contentAttrs = {
-      disabled: childAttrs?.disabled ?? formAttrs.disabled ?? false,
-      ...child.attrs
-    }
-    
     return (
       <RenderComp
         v-model={vModel[child.model]}
@@ -109,13 +94,9 @@ export function setFormItem(h, vModel, child, childAttrs) {
       }}
       {...{ attrs: formItemAttrs }}
     >
-      <template slot="label">
-        {renderLabel(child.customLabel)}
-      </template>
-      {/* 当前表单项可slot进行单独开发配置 (目前仅支持非动态增减情况) */}
+      <template slot="label">{renderLabel()}</template>
       {renderContent()}
-      {/* 如若再某个model后需添加按钮等场景（例如地图的选址按钮 */}
       {$scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](formItemAttrs)}
     </FormModelItem>
   )
-}
+}

package/package.json

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

package/utils/Filter.js

@@ -463,7 +463,8 @@ export function transferData(data, format, options = {}) {
  * @param {Array} format - 格式配置
  *        - ['a', 'b', 'c'] - 默认转为 Number
  *        - [['a', 'b'], 'Number'] - 指定类型
- *        - [{ fields: ['a', 'b'], type: 'Number' }] - 对象配置
+ *        - [{ fields: ['a', 'b'], type: 'Number' }] - 单个对象配置
+ *        - [{ fields: ['a', 'b'], type: 'Number', defaultValue: 0 }, { fields: ['c'], type: 'String' }] - 多个对象配置
  * @param {Object} options - 配置选项
  * @returns {*} 转换后的数据
  */
@@ -472,11 +473,14 @@ function transferDataByFields(data, format, options) {
         return data ?? options.defaultValue
     }
 
+    // 解析数组配置
+    if (format.length === 0) return data
+
     let fields = []
     let type = 'Number' // 默认转为 Number
 
-    // 解析数组配置
-    if (format.length === 0) return data
+    // 对象处理：转换指定字段
+    const result = { ...data }
 
     // 形式 1: ['a', 'b', 'c'] - 默认转 Number
     if (typeof format[0] === 'string') {
@@ -489,18 +493,21 @@ function transferDataByFields(data, format, options) {
     }
     // 形式 3: [{ fields: ['a', 'b'], type: 'Number' }] - 对象配置
     else if (typeof format[0] === 'object') {
-        const config = format[0]
-        fields = config.fields || []
-        type = config.type || 'Number'
+        format.forEach(config => {
+            // 转换指定字段
+            for (const field of config.fields) {
+                if (field in result) {
+                    const fieldDefaultValue = config.defaultValue || options.defaultValue
+                    result[field] = transferData(result[field], config.type, fieldDefaultValue)
+                }
+            }
+        })
     }
 
     // 如果是数组，递归处理每个元素
     if (Array.isArray(data)) {
         return data.map(item => transferDataByFields(item, format, options))
     }
-
-    // 对象处理：转换指定字段
-    const result = { ...data }
     
     for (const field of fields) {
         if (field in result) {