web-component-gallery 2.0.21 → 2.0.23

package/lib/form-comp/ASelectCustom.vue

@@ -11,16 +11,16 @@
     <Select
       show-search
       :style="{ width: width || '100%' }"
-      :mode="mode"
+      :mode="mode" 
       :open="isSelectOpen"
       :placeholder="placeholder"
-      :filterOption="false"
+      :filterOption="listPageHandler ? false : filterOption"
       :getPopupContainer="tirggerNode => tirggerNode.parentNode"
       @select="handleSelect"
       @search="handleSearch"
       @popupScroll="handleScroll"
       v-bind="attrs"
-      v-model="childSelectedValue"
+      v-model="innerValue"
     >
       <!-- v-on="$listeners" -->
       <template v-for="(index, name) in $slots" v-slot:[name]>
@@ -28,16 +28,16 @@
       </template>
       <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
         <slot :name="name" v-bind="data"></slot>
-      </template>
+      </template> 
       <div slot="dropdownRender" slot-scope="menu">
-        <Checkbox v-if="mode" :checked="selectChecked" @change="handleSelectAll">全选</Checkbox>
+        <Checkbox v-if="mode" :checked="checkedAll" @change="handleSelectAll">全选</Checkbox>
         <v-nodes :vnodes="menu" />
         <div v-if="isLoadingMore" class="loading-more">
           <Icon type="loading" />
           加载中...
         </div>
       </div>
-      <SelectOption v-for="(item, index) in options" :key="index" :value="item[valueKey]">
+      <SelectOption v-for="(item, index) in innerOptions" :key="index" :value="item[valueKey]">
         {{ customLabel ? customLabelHandler(item) : item[labelKey] }}
       </SelectOption>
     </Select>
@@ -61,53 +61,72 @@ export default {
     Checkbox
   },
   props: {
+    // 基础配置
     value: {
       type: [String, Number, Array, Boolean, Object],
       default: undefined
     },
-    // 是否多选
     mode: String,
-    // 是否支持输入保留字符
     isInput: {
       type: Boolean,
       default: false
     },
-    // 提示文字
     placeholder: {
       type: String,
       default: '请选择'
     },
     width: String,
-    // 根据valueKey来进行自定义label
-    customLabel: String,
+
+    // 数据映射
     valueKey: {
       type: String,
       default: 'value'
     },
     labelKey: {
       type: String,
-      default: 'label'
+      default: 'label' 
     },
+    customLabel: String,
+
     // 数据源
     options: {
       type: Array,
-      default: () => ([])
+      default: () => []
+    },
+    listPageHandler: Function,
+
+    // 分页配置
+    pSize: {
+      type: Number,
+      default: 50
     },
-    // 分页页数
-    pSize: Number,
-    // 分页总数，如要实现完整分页功能要传递接口总数
-    pTotal: Number
+    searchKey: {
+      type: String,
+      default: 'keyword'
+    }
   },
+
   data() {
     return {
+      // 分页状态
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+
+      // 当前数据
+      innerOptions: [],
+      
+      // UI状态
       isSelectOpen: false,
-      currentPage: 1,
       isLoadingMore: false,
-      searchKeyword: ''
+      searchValue: ''
     }
   },
+
   computed: {
-    childSelectedValue: {
+    innerValue: {
       get() {
         return this.value
       },
@@ -115,7 +134,7 @@ export default {
         this.$emit('input', val)
       }
     },
-    attrs() {
+    attrs() { 
       return {
         allowClear: true,
         showSearch: true,
@@ -123,95 +142,142 @@ export default {
       }
     },
     hasMore() {
-      return this.options.length < this.pTotal
+      return this.innerOptions.length < this.pagination.total
     },
-    selectChecked: {
-      get() {
-        return this.childSelectedValue?.length === this.options?.length
+    checkedAll() {
+      return this.innerValue?.length === this.innerOptions?.length
+    }
+  },
+
+  watch: {
+    options: {
+      handler(newVal) {
+        this.innerOptions = [...newVal]
       },
-      set(val) {
-        this.$emit('input', val)
-      }
+      immediate: true
     }
   },
+
   created() {
-    this.debouncedSearch = debounce(this.handleSearch, 800)
-    this.debouncedLoadMore = debounce(this.loadMoreData, 300)
+    this.debouncedSearch = debounce(this.handleSearch, 800, { leading: true, trailing: false })
+    this.debouncedLoadMore = debounce(this.loadMoreData, 300, { leading: false, trailing: true })
   },
+
   mounted() {
-    document.addEventListener('click', this.bodyCloseMenus)
+    this.pagination.size = this.pSize
+    this.fetchData()
+    document.addEventListener('click', this.handleDocumentClick)
   },
+
   beforeDestroy() {
-    document.removeEventListener('click', this.bodyCloseMenus)
+    document.removeEventListener('click', this.handleDocumentClick)
+    // 清理debounce定时器
+    this.debouncedSearch.cancel()
+    this.debouncedLoadMore.cancel()
   },
+
   methods: {
+    async fetchData() {
+      if (!this.listPageHandler) return
+      
+      try {
+        this.isLoadingMore = true
+        const { total, records } = await this.listPageHandler({
+          ...this.pagination,
+          [this.searchKey]: this.searchValue
+        })
+
+        this.pagination.current === 1 ?
+        this.innerOptions = [...records] :
+        this.innerOptions = [...this.innerOptions, ...records]
+
+        this.pagination.total = total
+      } catch (error) {
+        this.pagination.current--
+        console.error('分页加载失败:', error)
+      } finally {
+        this.isLoadingMore = false
+      }
+    },
+
     // 下拉滚动加载更多
     handleScroll(e) {
       const { scrollTop, scrollHeight, clientHeight } = e.target
       const reachBottom = scrollTop + clientHeight >= scrollHeight - 10
       if (reachBottom && !this.isLoadingMore && this.hasMore) this.debouncedLoadMore()
     },
-    // 搜索事件
+
+    // 搜索事件处理
     handleSearch(value) {
-      this.isInput && (this.childSelectedValue = value)
-      this.searchKeyword = value
-      this.currentPage = 1
-
-      // 根据是否有分页决定emit参数格式
-      this.$emit('search', this.pTotal ? {
-        keyword: value,
-        current: this.currentPage,
-        size: this.pSize
-      } : value)
-    },
-    // 点击选择器外内容下拉回收
-    bodyCloseMenus(e) {
+      this.searchValue = value
+      this.pagination.current = 1
+
+      this.fetchData()
+    },
+
+    // 本地搜索
+    filterOption(input, option) {
+      this.isInput && (this.innerValue = input)
+      return option.componentOptions.children[0].text
+        .toLowerCase()
+        .indexOf(input.toLowerCase()) >= 0
+    },
+
+    // 点击选择器外内容关闭下拉
+    handleDocumentClick(e) {
       if (this.$refs.main && !this.$refs.main.contains(e.target)) this.isSelectOpen = false
     },
-    // 自定义label显示
+
+    // 安全的自定义label处理
     customLabelHandler(item) {
+      if (!this.customLabel) return item[this.labelKey]
+      
       try {
-        // 使用函数式替代eval
-        const func = new Function('item', `return ${this.customLabel}`)
-        return func(item)
+        // 使用安全的模板字符串解析
+        const template = this.customLabel
+          .replace(/{{([^{}]+)}}/g, (match, key) => {
+            const path = key.trim().split('.')
+            let value = item
+            for (const p of path) {
+              if (value == null) return ''
+              value = value[p]
+            }
+            return value == null ? '' : value
+          })
+        return template
       } catch (e) {
         console.error('自定义label解析错误:', e)
         return item[this.labelKey]
       }
     },
-    // 选中全部
-    handleSelectAll(event) {
-      const isChecked = event.target.checked
-      const selectOptions = isChecked ? this.options.map(item => item[this.valueKey]) : []
-      this.$emit('input', selectOptions)
+
+    // 选中全部选项
+    handleSelectAll({target}) {
+      const selectOptions = target.checked
+        ? this.innerOptions.map(item => item[this.valueKey])
+        : []
+
       this.isSelectOpen = false
+      this.$emit('input', selectOptions)
     }, 
-    // 选中事件
+
+    // 选中单个选项
     handleSelect(value, option) {
       if (!value) return
+
       this.isSelectOpen = false
-      const selectedOption = this.options.find(item => item[this.valueKey] === value)
+      const selectedOption = this.innerOptions.find(
+        item => item[this.valueKey] === value
+      )
       selectedOption && this.$emit('select', value, selectedOption)
     },
-    // 加载更多
-    loadMoreData() {
+
+    // 加载更多数据
+    async loadMoreData() {
       if (this.isLoadingMore || !this.hasMore) return
       
-      this.isLoadingMore = true
-      this.currentPage++
-      
-      try {
-        this.$emit('load-more', {
-          keyword: this.searchKeyword,
-          current: this.currentPage,
-          size: this.pSize
-        })
-      } catch (error) {
-        this.currentPage--
-        console.error('加载更多失败:', error)
-      } finally {
-        this.isLoadingMore = false
-      }
+      this.pagination.current++
+      await this.fetchData()
     }
   }
 }

package/lib/modal/style/index.less

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

package/lib/model/Model.js

@@ -1,12 +1,13 @@
 import { FormModel } from 'ant-design-vue'
 import { getFormWidth, setFormItemRule, setFormItem } from './utils/render'
+import _ from 'lodash'
 
 export default {
   name: 'WModel',
   model: {
     prop: 'value',
     event: 'Change:Model'
-  },
+  }, 
   data() {
     return {
       formRules: {}
@@ -16,7 +17,7 @@ export default {
     value: {
       type: Object,
       default: () => ({})
-    },
+    }, 
     /* Form布局方式 */
     layout: { 
       type: String,
@@ -39,7 +40,7 @@ export default {
         /** 校验单独赋值延迟的字段 */
         for (const k in this.value) {
           Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k)
-        } 
+        }
         return this.value
       },
       set(value) {
@@ -47,15 +48,13 @@ export default {
       }
     },
     formAttrs() {
-      let attr = {
-        labelCol: { span: 4 },
-        wrapperCol: { span: 20 },
-        ...this.$attrs
-      }
-      this.layout === 'vertical' && (
-        delete attr.labelCol,
-        delete attr.wrapperCol
-      )
+      const attr =
+        this.layout === 'vertical' ?
+        this.$attrs :
+        {
+          ...getDefaultFormAttrs(),
+          ...this.$attrs
+        }
       return attr
     },
     filterSetting() {
@@ -76,58 +75,77 @@ export default {
     this.$emit('update:refForm', this.$refs.FormModel)
   },
   methods: {
-    /** 包含单表单项，多表单项，动态增减表单项合并处理 */
-    setModelRender(props) {
+    getDefaultFormAttrs() {
+      return {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 20 }
+      }
+    },
+    
+    renderSingleFormItem(h, props) {
+      return setFormItem.call(this, h, this.form, props)
+    }, 
+    
+    renderDynamicFormItems(h, dynamicModel, props) {
+      // multipleConfig为配置的动态项数据
+      return dynamicModel.map((modelItem, key) => {
+        // 为动态项时重新定义绑定key、prop等来进行检验
+        props.multipleConfig.map((configItem) => {
+          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, modelItem, configItem, childAttrs)
+        })
+      })
+    },
+    
+    setModelRender(h, 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 ? 0 : 24) } }}
+        >
+          {/* 添加分层提示信息及其他隔层操作 */}
           {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)
+            // multiple为动态多项（使用场景：处理动态增减表单
+            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)}
         </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"
+              })
+            })
+          })
       })
     }
   },
-  render() {
+  render(h) {
     const {layout, formAttrs, setModelRender} = this
 
     return (
@@ -143,9 +161,9 @@ export default {
       >
         {
           this.$slots.default ??
-          this.filterSetting.map(props => setModelRender(props))
+          this.filterSetting.map(props => setModelRender(h, props))
         } 
       </FormModel>
     )
   }
-}
+}

package/lib/model/utils/render.js

@@ -3,81 +3,104 @@ 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;'}`
-  return `flex: 0 1 ${(100 / layoutSize) * (child.size ?? 1)}%;`
-} 
+/**
+ * 根据布局大小计算表单宽度
+ * @param {Object} child - 表单项配置
+ * @param {number} layoutSize - 一行显示的表单项数量
+ * @param {number} [gap=24] - 表单项间距
+ * @returns {string} - 计算后的CSS样式
+ */ 
+export function getFormWidth(child, layoutSize, gap = 24) {
+  const width = (100 / layoutSize) * (child.size ?? 1)
+  if (this.layout === 'vertical') return `flex: 0 1 calc(${width}% - ${gap}px); margin-right: ${gap}px;`
+  return `flex: 0 1 ${width}%;`
+}
 
-/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */
+/**
+ * 动态设置表单项验证规则
+ * @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 }}
-        />
-      )} 
+      {renderContent()}
       {/* 如若再某个model后需添加按钮等场景（例如地图的选址按钮 */}
       {$scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](formItemAttrs)}
     </FormModelItem>