@aspire-ui/element-component-pro 1.0.15 → 1.0.16

package/dist/index.d.ts

@@ -1714,10 +1714,7 @@ declare const _default: {
         removeSchemaByField: (field: string | string[]) => Promise<void>;
         setProps: (props: Partial<import('./types').ProFormProps>) => Promise<void>;
         getComponentInstance: (field: string) => import('vue').ComponentPublicInstance | null;
-        getFieldOptions: (field: string) => Array<{
-            label: string;
-            value: unknown;
-        }>;
+        getFieldOptions: import('./types').GetFieldOptions;
         isFieldLoading: (field: string) => boolean;
     }> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{
         disabled: {
@@ -1966,10 +1963,7 @@ declare const _default: {
         removeSchemaByField: (field: string | string[]) => Promise<void>;
         setProps: (props: Partial<import('./types').ProFormProps>) => Promise<void>;
         getComponentInstance: (field: string) => import('vue').ComponentPublicInstance | null;
-        getFieldOptions: (field: string) => Array<{
-            label: string;
-            value: unknown;
-        }>;
+        getFieldOptions: import('./types').GetFieldOptions;
         isFieldLoading: (field: string) => boolean;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         submit: (values: Record<string, unknown>) => void;

package/dist/style.css

@@ -1 +1 @@
-.ecp-pro-table[data-v-f3d27813]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-f3d27813] .el-table{width:100%!important}.ecp-pro-table__header[data-v-f3d27813]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-f3d27813]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-f3d27813]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-f3d27813]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-f3d27813]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-f3d27813]{width:100%}.ecp-pro-table__pagination[data-v-f3d27813]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-f3d27813]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-48d7960b]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-48d7960b]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-48d7960b]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-48d7960b]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-48d7960b]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-7ee469dc]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-7ee469dc]{margin-bottom:16px}.ecp-pro-form_col[data-v-7ee469dc]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-7ee469dc]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-7ee469dc]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-7ee469dc]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-656036f6]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-656036f6]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-656036f6]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-656036f6]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-656036f6],.ecp-pro-descriptions__toggle[data-v-656036f6]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-656036f6]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-656036f6]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-656036f6]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-656036f6]{overflow:hidden}.ecp-pro-descriptions__body[data-v-656036f6]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-656036f6]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-656036f6]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__content[data-v-656036f6]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-656036f6]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-656036f6]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-656036f6]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-656036f6]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-656036f6]{flex-direction:column}.ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto}}.ecp-pro-table-form__form[data-v-44aa7592] .el-form-item{margin-bottom:0}.ecp-pro-table-form__cell-item[data-v-44aa7592]{width:100%}.ecp-pro-table-form__cell-item[data-v-44aa7592] .el-form-item__content{margin-left:0!important;line-height:normal}.ecp-pro-table-form__fixed-label[data-v-44aa7592]{color:#303133;font-size:14px}.ecp-pro-table-form__req[data-v-44aa7592]{color:#f56c6c;margin-right:2px}.ecp-pro-table-form__th-text[data-v-44aa7592]{font-weight:500;color:#606266}.ecp-pro-table-form__action-title[data-v-44aa7592]{margin-right:8px;font-size:13px;color:#606266}.ecp-pro-table-form__add-btn[data-v-44aa7592]{padding:0;font-size:14px}.ecp-pro-table-form__del-btn[data-v-44aa7592]{padding:0;color:#909399}.ecp-pro-table-form__del-btn[data-v-44aa7592]:not(:disabled){color:#409eff}.ecp-pro-table-form .ecp-pro-table-form__header-cell{background:#f5f7fa!important}
+.ecp-pro-table[data-v-f3d27813]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-f3d27813] .el-table{width:100%!important}.ecp-pro-table__header[data-v-f3d27813]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-f3d27813]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-f3d27813]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-f3d27813]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-f3d27813]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-f3d27813]{width:100%}.ecp-pro-table__pagination[data-v-f3d27813]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-f3d27813]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-48d7960b]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-48d7960b]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-48d7960b]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-48d7960b]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-48d7960b]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-80bac8be]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-80bac8be]{margin-bottom:16px}.ecp-pro-form_col[data-v-80bac8be]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-80bac8be]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-80bac8be]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-80bac8be]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-656036f6]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-656036f6]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-656036f6]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-656036f6]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-656036f6],.ecp-pro-descriptions__toggle[data-v-656036f6]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-656036f6]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-656036f6]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-656036f6]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-656036f6]{overflow:hidden}.ecp-pro-descriptions__body[data-v-656036f6]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-656036f6]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-656036f6]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__content[data-v-656036f6]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-656036f6]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-656036f6]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-656036f6]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-656036f6]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-656036f6]{flex-direction:column}.ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto}}.ecp-pro-table-form__form[data-v-44aa7592] .el-form-item{margin-bottom:0}.ecp-pro-table-form__cell-item[data-v-44aa7592]{width:100%}.ecp-pro-table-form__cell-item[data-v-44aa7592] .el-form-item__content{margin-left:0!important;line-height:normal}.ecp-pro-table-form__fixed-label[data-v-44aa7592]{color:#303133;font-size:14px}.ecp-pro-table-form__req[data-v-44aa7592]{color:#f56c6c;margin-right:2px}.ecp-pro-table-form__th-text[data-v-44aa7592]{font-weight:500;color:#606266}.ecp-pro-table-form__action-title[data-v-44aa7592]{margin-right:8px;font-size:13px;color:#606266}.ecp-pro-table-form__add-btn[data-v-44aa7592]{padding:0;font-size:14px}.ecp-pro-table-form__del-btn[data-v-44aa7592]{padding:0;color:#909399}.ecp-pro-table-form__del-btn[data-v-44aa7592]:not(:disabled){color:#409eff}.ecp-pro-table-form .ecp-pro-table-form__header-cell{background:#f5f7fa!important}

package/dist/types/index.d.ts

@@ -28,12 +28,19 @@ export interface ScrollToFieldOptions {
     /** 行内对齐 */
     inline?: ScrollLogicalPosition;
 }
+export interface ProFormFieldOption {
+    label: string;
+    value: unknown;
+}
+export interface GetFieldOptions {
+    (field: string): ProFormFieldOption[];
+    (field: string, raw: false): ProFormFieldOption[];
+    (field: string, raw: true): unknown[];
+}
 /** ApiSelect 暴露的实例类型 */
 export interface ApiSelectInstance {
-    options: Array<{
-        label: string;
-        value: unknown;
-    }>;
+    options: ProFormFieldOption[];
+    rawOptions: unknown[];
     loading: boolean;
     fetchOptions: () => Promise<void>;
 }
@@ -53,11 +60,8 @@ export interface FormActionType {
     setProps: (props: Partial<ProFormProps>) => Promise<void>;
     /** 获取指定字段的组件实例 */
     getComponentInstance: (field: string) => ComponentPublicInstance | null;
-    /** 获取 api-select 字段的 options */
-    getFieldOptions: (field: string) => Array<{
-        label: string;
-        value: unknown;
-    }>;
+    /** 获取 api-select 字段的 options，raw=true 时返回接口原始列表数据 */
+    getFieldOptions: GetFieldOptions;
     /** 获取 api-select 字段的加载状态 */
     isFieldLoading: (field: string) => boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspire-ui/element-component-pro",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
   "type": "module",
   "main": "./dist/element-component-pro.umd.js",

package/src/ProForm/ApiSelect.vue

@@ -34,6 +34,7 @@ defineEmits<{ (e: 'input', value: unknown): void; (e: 'change', value: unknown):
 
 const loading = ref(false)
 const options = ref<Array<{ label: string; value: unknown }>>([])
+const rawOptions = ref<unknown[]>([])
 const cachedParams = ref<string>('')
 
 const onVisibleChange = (visible: boolean) => {
@@ -55,6 +56,7 @@ const fetchOptions = async () => {
       : ((res as Record<string, unknown>)?.list as unknown[]) ??
       ((res as Record<string, unknown>)?.data as unknown[]) ??
       []
+    rawOptions.value = raw
     const labelKey = props.labelField ?? 'label'
     const valueKey = props.valueField ?? 'value'
     options.value = raw.map((item: unknown) => {
@@ -72,6 +74,7 @@ const fetchOptions = async () => {
 
 defineExpose({
   options,
+  rawOptions,
   loading,
   fetchOptions,
 })
@@ -84,12 +87,14 @@ watch(() => props.api, () => {
     fetchOptions()
   } else {
     options.value = []
+    rawOptions.value = []
   }
 }, { deep: true }
 )
 watch(() => props.params, () => {
   if (props.lazy) {
     options.value = []
+    rawOptions.value = []
   } else {
     fetchOptions()
   }

package/src/ProForm/ProForm.vue

@@ -422,15 +422,18 @@ const getComponentInstance = (field: string): ComponentPublicInstance | null =>
   return fieldInstanceMap.value.get(field) ?? null
 }
 
-/** 获取 api-select 字段的 options */
-const getFieldOptions = (field: string): Array<{ label: string; value: unknown }> => {
+/** 获取 api-select 字段的 options，raw=true 时返回接口原始数据 */
+function getFieldOptions(field: string): Array<{ label: string; value: unknown }>
+function getFieldOptions(field: string, raw: false): Array<{ label: string; value: unknown }>
+function getFieldOptions(field: string, raw: true): unknown[]
+function getFieldOptions(field: string, raw = false): Array<{ label: string; value: unknown }> | unknown[] {
   const instance = fieldInstanceMap.value.get(field)
   if (!instance) return []
   const apiSelectInstance = instance as unknown as ApiSelectInstance
-  if (apiSelectInstance?.options) {
-    return apiSelectInstance.options
+  if (raw) {
+    return apiSelectInstance?.rawOptions ?? []
   }
-  return []
+  return apiSelectInstance?.options ?? []
 }
 
 /** 获取 api-select 字段的加载状态 */

package/src/ProForm/useForm.ts

@@ -24,6 +24,9 @@ export interface UseFormReturn {
   appendSchemaByField: (schema: ProFormSchema, prefixField?: string, first?: boolean) => Promise<void>
   removeSchemaByField: (field: string | string[]) => Promise<void>
   setProps: (props: Partial<ProFormProps>) => Promise<void>
+  getComponentInstance: FormActionType['getComponentInstance']
+  getFieldOptions: FormActionType['getFieldOptions']
+  isFieldLoading: FormActionType['isFieldLoading']
 }
 
 export function useForm(props?: UseFormPropsReactive): [UseFormReturn['register'], Omit<UseFormReturn, 'register'>] {
@@ -92,6 +95,21 @@ export function useForm(props?: UseFormPropsReactive): [UseFormReturn['register'
     await formAction.value?.setProps(formProps)
   }
 
+  const getComponentInstance: FormActionType['getComponentInstance'] = (field) =>
+    formAction.value?.getComponentInstance(field) ?? null
+
+  function getFieldOptions(field: string): Array<{ label: string; value: unknown }>
+  function getFieldOptions(field: string, raw: false): Array<{ label: string; value: unknown }>
+  function getFieldOptions(field: string, raw: true): unknown[]
+  function getFieldOptions(field: string, raw = false): Array<{ label: string; value: unknown }> | unknown[] {
+    if (!formAction.value) return []
+    if (raw) return formAction.value.getFieldOptions(field, true)
+    return formAction.value.getFieldOptions(field)
+  }
+
+  const isFieldLoading: FormActionType['isFieldLoading'] = (field) =>
+    formAction.value?.isFieldLoading(field) ?? false
+
   const result: UseFormReturn = {
     register,
     formAction,
@@ -107,6 +125,9 @@ export function useForm(props?: UseFormPropsReactive): [UseFormReturn['register'
     appendSchemaByField,
     removeSchemaByField,
     setProps,
+    getComponentInstance,
+    getFieldOptions,
+    isFieldLoading,
   }
 
   return [register, result]

package/src/types/index.ts

@@ -32,9 +32,21 @@ export interface ScrollToFieldOptions {
   inline?: ScrollLogicalPosition
 }
 
+export interface ProFormFieldOption {
+  label: string
+  value: unknown
+}
+
+export interface GetFieldOptions {
+  (field: string): ProFormFieldOption[]
+  (field: string, raw: false): ProFormFieldOption[]
+  (field: string, raw: true): unknown[]
+}
+
 /** ApiSelect 暴露的实例类型 */
 export interface ApiSelectInstance {
-  options: Array<{ label: string; value: unknown }>
+  options: ProFormFieldOption[]
+  rawOptions: unknown[]
   loading: boolean
   fetchOptions: () => Promise<void>
 }
@@ -55,8 +67,8 @@ export interface FormActionType {
   setProps: (props: Partial<ProFormProps>) => Promise<void>
   /** 获取指定字段的组件实例 */
   getComponentInstance: (field: string) => ComponentPublicInstance | null
-  /** 获取 api-select 字段的 options */
-  getFieldOptions: (field: string) => Array<{ label: string; value: unknown }>
+  /** 获取 api-select 字段的 options，raw=true 时返回接口原始列表数据 */
+  getFieldOptions: GetFieldOptions
   /** 获取 api-select 字段的加载状态 */
   isFieldLoading: (field: string) => boolean
 }