web-component-gallery 2.0.22 → 2.0.24

package/lib/form-comp/ASelectCustom.vue

@@ -11,33 +11,33 @@
     <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-on="$listeners"
+      v-model="innerValue"
     >
-      <!-- v-on="$listeners" -->
       <template v-for="(index, name) in $slots" v-slot:[name]>
         <slot :name="name" />
       </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,77 @@ export default {
     Checkbox
   },
   props: {
+    // 基础配置
     value: {
       type: [String, Number, Array, Boolean, Object],
       default: undefined
     },
-    // 是否多选
     mode: String,
-    // 是否支持输入保留字符
+    width: 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: () => []
+    },
+    initLoad: {
+      type: Boolean,
+      default: true
+    },
+    listPageParams: Object,
+    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 +139,7 @@ export default {
         this.$emit('input', val)
       }
     },
-    attrs() {
+    attrs() { 
       return {
         allowClear: true,
         showSearch: true,
@@ -123,95 +147,143 @@ 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.initLoad && 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.listPageParams,
+          [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/model/Model.js

@@ -7,7 +7,7 @@ export default {
   model: {
     prop: 'value',
     event: 'Change:Model'
-  },
+  }, 
   data() {
     return {
       formRules: {}
@@ -17,7 +17,7 @@ export default {
     value: {
       type: Object,
       default: () => ({})
-    },
+    }, 
     /* Form布局方式 */
     layout: { 
       type: String,
@@ -32,17 +32,7 @@ export default {
       }
     },
     /* 表单项配置 */
-    formSetting: {
-      type: Array,
-      default: () => [],
-      validator: value => {
-        return value.every(item => {
-          return typeof item === 'object' && 
-                 'model' in item && 
-                 'type' in item
-        })
-      }
-    }
+    formSetting: Array
   },
   computed: {
     form: {
@@ -57,6 +47,16 @@ export default {
         this.$emit('Change:Model', value) 
       }
     },
+    formAttrs() {
+      const attr =
+        this.layout === 'vertical' ?
+        this.$attrs :
+        {
+          ...getDefaultFormAttrs(),
+          ...this.$attrs
+        }
+      return attr
+    },
     filterSetting() {
       return this.formSetting.filter(settingItem => !settingItem.hidden)
     }
@@ -82,36 +82,43 @@ export default {
       }
     },
     
-    renderSingleFormItem(props) {
+    renderSingleFormItem(h, 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)
+    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(props) {
+    setModelRender(h, props) {
       const dynamicModel = this.form[props.model]
       return (
         <div 
           class={props.multiple && ['MultipleForm']} 
-          {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize, props.multiple ? 24 : 0) } }}
+          {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize, props.multiple ? 0 : 24) } }}
         >
+          {/* 添加分层提示信息及其他隔层操作 */}
           {this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props)}
           {
+            // multiple为动态多项（使用场景：处理动态增减表单
             dynamicModel instanceof Array && props.multiple 
-              ? this.renderDynamicFormItems(props)
-              : this.renderSingleFormItem(props)
+              ? this.renderDynamicFormItems(h, dynamicModel, props)
+              : this.renderSingleFormItem(h, props)
           }
+          {/* 使用场景：如另起一行添加其他额外信息及操作 */}
           {this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)}
         </div>
       )
@@ -119,7 +126,7 @@ export default {
     
     getFormWidth: _.memoize(function(props, layoutSize, multiple) {
       return getFormWidth.call(this, props, layoutSize, multiple ? 24 : 0)
-    }),
+    }), 
     
     formSubmit() {
       return new Promise((resolve, reject) => {
@@ -138,7 +145,7 @@ export default {
       })
     }
   },
-  render() {
+  render(h) {
     const {layout, formAttrs, setModelRender} = this
 
     return (
@@ -154,7 +161,7 @@ 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

@@ -9,13 +9,11 @@ const FormModelItem = FormModel.Item
  * @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)}%;`
+  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}%;`
 }
 
 /**
@@ -80,9 +78,7 @@ export function setFormItem(h, vModel, child, childAttrs) {
 
   // 渲染表单项内容
   const renderContent = () => {
-    if ($scopedSlots[child.model]) {
-      return $scopedSlots[child.model](child)
-    }
+    if ($scopedSlots[child.model]) return $scopedSlots[child.model](child)
     return (
       <RenderComp
         v-model={vModel[child.model]}
@@ -103,7 +99,9 @@ export function setFormItem(h, vModel, child, childAttrs) {
       <template slot="label">
         {renderLabel(child.customLabel)}
       </template>
+      {/* 当前表单项可slot进行单独开发配置 (目前仅支持非动态增减情况) */}
       {renderContent()}
+      {/* 如若再某个model后需添加按钮等场景（例如地图的选址按钮 */}
       {$scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](formItemAttrs)}
     </FormModelItem>
   )

package/package.json

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