rw-admin-ui 1.0.0

package/packages/basic-form/src/mixins/basic-form-item.js

@@ -0,0 +1,326 @@
+import { normalizeWidth as normalizeWidthUtil } from './basic-form-runtime-factory';
+
+export default {
+  methods: {
+    /**
+     * 合并生成最终传入表单控件的 props：
+     * - 支持 componentProps 为对象 / 函数两种形态
+     * - 在全局开关开启时，自动补齐 placeholder / clearable
+     * - 透传 globalSize，并为组件补齐 name
+     *
+     * @param {Object} schema 单个表单项 schema
+     * @returns {Object} 合并后的 props
+     */
+    getComponentPropsMerged(schema) {
+      // componentProps 可能是对象，也可能是函数（返回对象）
+      const componentPropsBase = schema.componentProps || {};
+      const componentPropsExtra = typeof schema.componentProps === 'function' ? (() => {
+        try {
+          return schema.componentProps({
+            schema: schema,
+            tableAction: this.tableAction || null,
+            formActionType: this.formActionType || null,
+            formModel: this.formModel
+          }) || {};
+        } catch (err) {
+          console.error('[ElBasicFormItem/getComponentPropsMerged] componentProps fn error:', err);
+          return {};
+        }
+      })() : {};
+
+      // 合并两份 props：后者覆盖前者同名字段
+      const mergedProps = { ...(typeof componentPropsBase === 'object' ? componentPropsBase : {}), ...(typeof componentPropsExtra === 'object' ? componentPropsExtra : {}) };
+
+      // 自动补齐 placeholder：仅对常见输入类组件生效
+      if (this.globalAutoSetPlaceHolder && mergedProps.placeholder == null) {
+        const component = schema.component;
+        if (component === 'Input' || component === 'InputNumber' || component === 'el-input') mergedProps.placeholder = '请输入';
+        if (component === 'Select' || component === 'el-select' || component === 'el-cascader') mergedProps.placeholder = '请选择';
+      }
+
+      // 自动补齐 clearable：仅对支持 clearable 的组件生效
+      if (this.globalAutoSetClearable && mergedProps.clearable == null) {
+        const component = schema.component;
+        const supportsClearable = (
+          component === 'Input' || component === 'el-input' ||
+          component === 'Select' || component === 'el-select' || component === 'ApiSelect' ||
+          component === 'TreeSelect' ||
+          component === 'Cascader' || component === 'el-cascader' || component === 'ApiCascader' ||
+          component === 'DatePicker' || component === 'MonthPicker' || component === 'RangePicker' || component === 'WeekPicker' || component === 'el-date-picker' ||
+          component === 'TimePicker' || component === 'el-time-picker'
+        );
+        if (supportsClearable) mergedProps.clearable = true;
+      }
+
+      // 全局 size 兜底
+      if (mergedProps.size == null && this.globalSize) mergedProps.size = this.globalSize;
+
+      // 为依赖 name 的组件补齐 name（例如表单自动补全/测试定位）
+      if (mergedProps.name == null && schema.field) mergedProps.name = schema.field;
+
+      // 兼容内部别名组件：把语义化组件名映射到真实输入类型
+      const component = schema.component;
+      if (component === 'InputPassword') mergedProps.type = mergedProps.type || 'password';
+      if (component === 'InputTextArea') mergedProps.type = mergedProps.type || 'textarea';
+      if (component === 'MonthPicker') mergedProps.type = mergedProps.type || 'month';
+      if (component === 'RangePicker') mergedProps.type = mergedProps.type || 'daterange';
+      if (component === 'WeekPicker') mergedProps.type = mergedProps.type || 'week';
+      return mergedProps;
+    },
+    /**
+     * 组装组件最终监听器：
+     * - 从 props 中提取 onXxx / change 等事件
+     * - 再叠加 schema.changeEvent 对应的自定义监听
+     *
+     * @param {Object} schema 单个表单项 schema
+     * @returns {Object} 监听器对象
+     */
+    finalListeners(schema) {
+      const mergedProps = this.getComponentPropsMerged(schema || {});
+      const listenersFromProps = this.extractEventListeners(mergedProps);
+      const listenersFromSchema = this.customListeners(schema);
+      return Object.assign({}, listenersFromProps, listenersFromSchema);
+    },
+    /**
+     * 从 props 中抽取事件监听器，避免与 v-bind 冲突：
+     * - 支持 onXxx（驼峰）自动转为 kebab-case
+     * - 同时兼容部分直接传入的事件名（如 change/blur/visibleChange 等）
+     *
+     * @param {Object} props 合并后的 props
+     * @returns {Object} listeners
+     */
+    extractEventListeners(props) {
+      const listeners = {};
+      const isFn = (valueCandidate) => typeof valueCandidate === 'function';
+      const camelToKebab = (camelCaseText) => camelCaseText.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+      try {
+        Object.keys(props || {}).forEach((key) => {
+          const val = props[key];
+          if (/^on[A-Z]/.test(key) && isFn(val)) {
+            const eventName = camelToKebab(key.slice(2));
+            listeners[eventName] = val;
+          }
+          if (isFn(val)) {
+            if (key === 'change' || key === 'blur' || key === 'focus' || key === 'clear') listeners[key] = val;
+            if (key === 'visibleChange') listeners['visible-change'] = val;
+            if (key === 'removeTag') listeners['remove-tag'] = val;
+            if (key === 'visible-change' || key === 'remove-tag') listeners[key] = val;
+          }
+        });
+      } catch (err) {
+        console.error('[ElBasicFormItem/extractEventListeners] error:', err);
+      }
+      return listeners;
+    },
+    /**
+     * 将 schema.component 规范为可渲染的组件 tag。
+     * @param {string} name schema.component
+     * @returns {string}
+     */
+    componentTag(name) {
+      const map = {
+        ApiCascader: 'el-api-cascader',
+        ApiSelect: 'el-api-select',
+        ApiTree: 'el-api-tree',
+        Cascader: 'el-cascader',
+        Checkbox: 'el-checkbox',
+        CheckboxButtonGroup: 'el-checkbox-group',
+        CheckboxGroup: 'el-checkbox-group',
+        ColorPicker: 'el-color-picker',
+        DatePicker: 'el-date-picker',
+        DateRangePicker: 'el-range-picker',
+        Divider: 'el-divider',
+        Input: 'el-input',
+        InputAutoComplete: 'el-autocomplete',
+        InputNumber: 'el-input-number',
+        InputPassword: 'el-input',
+        InputSearch: 'el-input',
+        InputTextArea: 'el-input',
+        MonthPicker: 'el-date-picker',
+        Radio: 'el-radio',
+        RadioButtonGroup: 'el-radio-group',
+        RadioGroup: 'el-radio-group',
+        RangePicker: 'el-date-picker',
+        Rate: 'el-rate',
+        Select: 'el-select',
+        Slider: 'el-slider',
+        Switch: 'el-switch',
+        TimePicker: 'el-time-picker',
+        Transfer: 'el-transfer',
+        TreeSelect: 'el-cascader',
+        Upload: 'el-upload',
+        WeekPicker: 'el-date-picker'
+      };
+      return map[name] || name || 'el-input';
+    },
+    /**
+     * 生成组件内部插槽内容：
+     * - options 生成 select/radio/checkbox 等的默认插槽
+     * - 支持 renderComponentContent() 返回自定义插槽渲染函数
+     * - 支持 schema.suffix 作为 suffix 插槽
+     *
+     * @param {Object} schema 单个表单项 schema
+     * @returns {Object} slots 映射
+     */
+    renderComponentContent(schema) {
+      const slots = schema && schema.renderComponentContent
+        ? (() => { try { return (schema.renderComponentContent({ model: this.formModel, field: schema.field }) || {}); } catch (err) { console.error('[ElBasicFormItem/renderComponentContent] renderComponentContent fn error:', err); return {}; } })()
+        : {};
+      const componentType = schema && schema.component;
+      const options = (schema && schema.options) || (schema && schema.componentProps && schema.componentProps.options) || [];
+      const createElement = this.$createElement;
+      const slotChildren = [];
+      if (Array.isArray(options) && options.length) {
+        if (componentType === 'Select') {
+          options.forEach(option => slotChildren.push(createElement('el-option', { props: { label: option.label, value: option.value, disabled: !!option.disabled } })));
+        }
+        if (componentType === 'RadioGroup') {
+          options.forEach(option => slotChildren.push(createElement('el-radio', { props: { label: option.value, disabled: !!option.disabled } }, option.label)));
+        }
+        if (componentType === 'RadioButtonGroup') {
+          options.forEach(option => slotChildren.push(createElement('el-radio-button', { props: { label: option.value, disabled: !!option.disabled } }, option.label)));
+        }
+        if (componentType === 'CheckboxGroup') {
+          options.forEach(option => slotChildren.push(createElement('el-checkbox', { props: { label: option.value, disabled: !!option.disabled } }, option.label)));
+        }
+        if (componentType === 'CheckboxButtonGroup') {
+          options.forEach(option => slotChildren.push(createElement('el-checkbox-button', { props: { label: option.value, disabled: !!option.disabled } }, option.label)));
+        }
+      }
+      if (slotChildren.length) slots.default = () => slotChildren;
+      if (schema && schema.suffix) {
+        const suffix = schema.suffix;
+        slots.suffix = typeof suffix === 'function' ? (ctx) => { try { return suffix(this.itemCtx); } catch (err) { console.error('[ElBasicFormItem/renderComponentContent] suffix fn error:', err); return null; } } : suffix;
+      }
+      return slots;
+    },
+    /**
+     * 将具名插槽解析为可传给 RenderVNode 的 renderFn。
+     * @param {Object} schema 单个表单项 schema
+     * @returns {Function | null}
+     */
+    resolveSlotRender(schema) {
+      const slotName = schema && schema.slot;
+      if (!slotName) return null;
+      const slotFn = this.findScopedSlot(slotName);
+      if (typeof slotFn === 'function') {
+        return (h) => {
+          try {
+            return slotFn(this.itemCtx);
+          } catch (err) {
+            console.error('[ElBasicFormItem/resolveSlotRender] slot fn error:', err);
+            return null;
+          }
+        };
+      }
+      return null;
+    },
+    /**
+     * 向上查找 $scopedSlots：支持外层组件通过具名 scoped slot 注入渲染。
+     * @param {string} name 插槽名
+     * @returns {Function | null}
+     */
+    findScopedSlot(name) {
+      let ctx = this;
+      while (ctx) {
+        const slots = ctx.$scopedSlots;
+        if (slots && typeof slots[name] === 'function') return slots[name];
+        ctx = ctx.$parent;
+      }
+      return null;
+    },
+    /**
+     * 标准化宽度：复用 runtime 的工具函数。
+     * @param {string | number | null | undefined} val
+     * @returns {string | null}
+     */
+    normalizeWidth(val) {
+      return normalizeWidthUtil(val);
+    },
+    /**
+     * 规范化单个表单项的 labelWidth。
+     * @param {string | number | null | undefined} val
+     * @returns {string | null}
+     */
+    normalizeItemLabelWidth(val) {
+      return this.normalizeWidth(val);
+    },
+    /**
+     * 计算最终 disabled：
+     * - globalDisabled 最高优先级
+     * - schema.disabled 支持布尔/函数
+     * - schema.dynamicDisabled 为函数（带 values）
+     * - 最后回退到 componentProps.disabled
+     *
+     * @param {Object} schema 单个表单项 schema
+     * @returns {boolean}
+     */
+    computeDisabled(schema) {
+      if (this.globalDisabled) return true;
+      if (schema && ('disabled' in schema)) {
+        try {
+          return this.evalMaybeFn(schema.disabled);
+        } catch (err) {
+          console.error('[ElBasicFormItem/computeDisabled] disabled eval error:', err);
+        }
+      }
+      if (typeof schema.dynamicDisabled === 'function') {
+        try {
+          return !!schema.dynamicDisabled({ values: this.formModel });
+        } catch (err) {
+          console.error('[ElBasicFormItem/computeDisabled] dynamicDisabled fn error:', err);
+          return !!(schema.componentProps && schema.componentProps.disabled);
+        }
+      }
+      return !!(schema.componentProps && schema.componentProps.disabled);
+    },
+    /**
+     * 兼容 schema 配置为“值或函数”：函数时传入 itemCtx。
+     * @param {any} val 值或函数
+     * @returns {boolean}
+     */
+    evalMaybeFn(val) {
+      if (typeof val === 'function') {
+        try {
+          const resultValue = val(this.itemCtx);
+          return !!resultValue;
+        } catch (err) {
+          console.error('[ElBasicFormItem/evalMaybeFn] fn error:', err);
+          return false;
+        }
+      }
+      return !!val;
+    },
+    /**
+     * 处理 schema.changeEvent 对应的自定义变更事件：
+     * - 将事件值写回 formModel[field]
+     *
+     * @param {Object} schema 单个表单项 schema
+     * @param {any} event 组件事件参数
+     */
+    onCustomChange(schema, event) {
+      if (!schema || !schema.changeEvent) return;
+      const fieldName = schema.field;
+      let value = event;
+      if (event && event.target && 'value' in event.target) value = event.target.value;
+      try {
+        this.$set(this.formModel, fieldName, value);
+      } catch (err) {
+        console.error('[ElBasicFormItem/onCustomChange] set value error:', err);
+      }
+    },
+    /**
+     * 根据 schema.changeEvent 生成监听器映射。
+     * @param {Object} schema 单个表单项 schema
+     * @returns {Object}
+     */
+    customListeners(schema) {
+      const eventName = schema && schema.changeEvent;
+      if (!eventName) return {};
+      const self = this;
+      const listeners = {};
+      listeners[eventName] = function(event) { self.onCustomChange(schema, event); };
+      return listeners;
+    }
+  }
+};

package/packages/basic-form/src/mixins/basic-form-runtime-factory.js

@@ -0,0 +1,352 @@
+import { formatDate, isDateObject } from 'rowinself-ui/src/utils/date-util';
+
+/**
+ * @typedef {Record<string, any>} Recordable
+ */
+
+/**
+ * @typedef {Object} BasicFormRuntimeFactoryOptions
+ * @property {(schemas: any[]) => any[]} [normalizeSchemas]
+ * @property {(schemas: any[]) => any[]} [flattenSchemas]
+ * @property {string} [logScope]
+ */
+
+/**
+ * 将宽度值标准化为 ElementUI 可识别的字符串。
+ * @param {string | number | null | undefined} val
+ * @returns {string | null}
+ */
+export function normalizeWidth(val) {
+  if (val === undefined || val === null) return null;
+  if (typeof val === 'number') return `${val}px`;
+  return val;
+}
+
+/**
+ * 根据组件类型推导缺省值。
+ * @param {any} component
+ * @returns {any}
+ */
+function inferDefaultValueByComponent(component) {
+  if (component === 'CheckboxGroup' || component === 'CheckboxButtonGroup' || component === 'Upload') return [];
+  if (component === 'Checkbox') return false;
+  if (component === 'InputNumber') return 0;
+  return undefined;
+}
+
+/**
+ * 兼容性获取 Promise 构造器。
+ * @returns {PromiseConstructor | null}
+ */
+function getPromiseCtor() {
+  try {
+    if (typeof window !== 'undefined' && window && window.Promise) return window.Promise;
+  } catch (err) {
+    return null;
+  }
+  return null;
+}
+
+/**
+ * 执行外部 hook（可同步/异步），成功后继续执行 next。
+ * @param {Function} hook
+ * @param {Function} next
+ * @param {string} logScope
+ * @param {string} hookName
+ */
+function runHookThen(hook, next, logScope, hookName) {
+  if (typeof hook !== 'function') {
+    next();
+    return;
+  }
+  const PromiseCtor = getPromiseCtor();
+  try {
+    if (PromiseCtor) {
+      PromiseCtor.resolve(hook())
+        .then(() => next())
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.error(`[${logScope}] ${hookName} rejected:`, err);
+        });
+      return;
+    }
+    hook();
+    next();
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error(`[${logScope}] ${hookName} error:`, err);
+  }
+}
+
+/**
+ * 生成 schema -> 初始值的映射。
+ * @param {any[]} schemaList
+ * @param {Recordable} formModel
+ * @returns {Recordable}
+ */
+function buildInitValues(schemaList, formModel) {
+  const next = {};
+  (schemaList || []).forEach((schemaItem) => {
+    if (!schemaItem || typeof schemaItem !== 'object' || !schemaItem.field) return;
+    let init = schemaItem.defaultValue !== undefined ? schemaItem.defaultValue : formModel[schemaItem.field];
+    if (init === undefined) init = inferDefaultValueByComponent(schemaItem.component);
+    next[schemaItem.field] = init;
+  });
+  return next;
+}
+
+/**
+ * 将 next 的字段增量同步到 internalModel（仅在未传入外部 model 时生效）。
+ * @param {any} vm Vue 实例
+ * @param {Recordable} next
+ */
+function syncInternalModel(vm, next) {
+  Object.keys(next).forEach((fieldName) => {
+    if (vm.internalModel[fieldName] === undefined) vm.$set(vm.internalModel, fieldName, next[fieldName]);
+  });
+  Object.keys(vm.internalModel).forEach((fieldName) => {
+    if (!(fieldName in next)) vm.$delete(vm.internalModel, fieldName);
+  });
+}
+
+/**
+ * 创建 runtime mixin：plain / sections 通过传入 schema 处理策略复用同一份运行时。
+ * @param {BasicFormRuntimeFactoryOptions} [options]
+ */
+export function createBasicFormRuntimeMixin(options) {
+  const normalizedOptions = options || {};
+  const normalizeSchemas = typeof normalizedOptions.normalizeSchemas === 'function'
+    ? normalizedOptions.normalizeSchemas
+    : (src) => (Array.isArray(src) ? src : []);
+  const flattenSchemas = typeof normalizedOptions.flattenSchemas === 'function'
+    ? normalizedOptions.flattenSchemas
+    : (src) => (Array.isArray(src) ? src : []);
+  const logScope = normalizedOptions.logScope || 'ElBasicForm';
+
+  return {
+    computed: {
+      effectiveSchemas() {
+        const base = (this.internalSchemas && this.internalSchemas.length) ? this.internalSchemas : (this.schemas || []);
+        const src = normalizeSchemas(base);
+
+        const list = (src || [])
+          .filter((schemaItem) => {
+            if (!schemaItem || typeof schemaItem !== 'object') return false;
+            if (typeof schemaItem.show === 'function') return !!schemaItem.show({ values: this.formModel });
+            if (typeof schemaItem.ifShow === 'function') return !!schemaItem.ifShow({ values: this.formModel });
+            return schemaItem.show !== false && schemaItem.ifShow !== false;
+          })
+          .map((schemaItem) => {
+            const baseColProps = ((this._baseColProps || this.baseColProps) || {});
+            const schemaColProps = schemaItem.colProps || {};
+            const mergedColProps = { ...baseColProps, ...schemaColProps };
+            return {
+              ...schemaItem,
+              disabled: (
+                'disabled' in schemaItem
+                  ? schemaItem.disabled
+                  : !!(schemaItem.componentProps && schemaItem.componentProps.disabled)
+              ),
+              colProps: mergedColProps
+            };
+          });
+
+        if (this.showAdvancedButton && !this.advancedOpen) {
+          const keep = Math.max(this.alwaysShowLines, this.autoAdvancedLine);
+          return list.slice(0, keep);
+        }
+        return list;
+      },
+      computedActionColOptions() { return this._actionColOptions || this.actionColOptions || null; },
+      computedShowAdvancedButton() { return !!this.showAdvancedButton; },
+      computedShowSubmitButton() { return this._showSubmitButton != null ? this._showSubmitButton : this.showSubmitButton; },
+      computedShowResetButton() { return this._showResetButton != null ? this._showResetButton : this.showResetButton; },
+      computedSubmitButtonOptions() { return this.submitButtonOptions || {}; },
+      computedResetButtonOptions() { return this.resetButtonOptions || {}; },
+      computedSubmitButtonText() { return this._submitButtonText || this.submitButtonText; },
+      computedResetButtonText() { return this._resetButtonText || this.resetButtonText; },
+      computedActionCustomButtons() { return this.actionButton || null; },
+      computedFormActionType() {
+        return {
+          setProps: this.setProps,
+          getFieldsValue: this.getFieldsValue,
+          setFieldsValue: this.setFieldsValue,
+          resetFields: this.resetFields,
+          validateFields: this.validateFields,
+          validate: this.validate,
+          submit: this.submit,
+          clearValidate: this.clearValidate,
+          scrollToField: this.scrollToField,
+          removeSchemaByField: this.removeSchemaByField,
+          appendSchemaByField: this.appendSchemaByField,
+          updateSchema: this.updateSchema
+        };
+      }
+    },
+    watch: {
+      schemas: {
+        immediate: true,
+        handler(val) {
+          const src = flattenSchemas(val || []);
+          const next = buildInitValues(src, this.formModel);
+          if (!this.model) syncInternalModel(this, next);
+        }
+      },
+      rules: {
+        immediate: true,
+        handler(val) {
+          this.formRules = val || {};
+        }
+      }
+    },
+    methods: {
+      normalizeWidth,
+      mapFieldToTime(values) {
+        const output = { ...values };
+        try {
+          (this.fieldMapToTime || []).forEach((item) => {
+            const [srcField, startField, endField, fmt] = item;
+            const val = output[srcField];
+            if (Array.isArray(val) && val.length >= 2) {
+              const startValue = isDateObject(val[0]) ? formatDate(val[0], fmt || 'yyyy-MM-dd') : val[0];
+              const endValue = isDateObject(val[1]) ? formatDate(val[1], fmt || 'yyyy-MM-dd') : val[1];
+              output[startField] = startValue;
+              output[endField] = endValue;
+              delete output[srcField];
+            }
+          });
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(`[${logScope}] mapFieldToTime error:`, err);
+        }
+        return output;
+      },
+      mergePayload(values) {
+        const extra = this._mergeDynamicData != null ? this._mergeDynamicData : (this.mergeDynamicData || {});
+        return { ...extra, ...values };
+      },
+      toggleAdvanced() {
+        this.advancedOpen = !this.advancedOpen;
+      },
+      getFieldsValue() { return { ...this.formModel }; },
+      setFieldsValue(values) {
+        Object.keys(values || {}).forEach((fieldName) => {
+          this.$set(this.formModel, fieldName, values[fieldName]);
+        });
+      },
+      resetFields() { this.reset(); },
+      validateFields(nameList) {
+        const ref = this.$refs.formRef;
+        if (!ref) return getPromiseCtor() ? getPromiseCtor().resolve(true) : true;
+        const PromiseCtor = getPromiseCtor();
+        if (PromiseCtor) {
+          return new PromiseCtor((resolve) => {
+            ref.validateField(nameList || [], (msg) => resolve(!msg));
+          });
+        }
+        let ok = true;
+        ref.validateField(nameList || [], (msg) => { ok = !msg; });
+        return ok;
+      },
+      validate(nameList) {
+        const ref = this.$refs.formRef;
+        if (!ref) return getPromiseCtor() ? getPromiseCtor().resolve(true) : true;
+        const PromiseCtor = getPromiseCtor();
+        if (PromiseCtor) {
+          return new PromiseCtor((resolve) => {
+            ref.validate((valid) => resolve(valid));
+          });
+        }
+        let ok = true;
+        ref.validate((valid) => { ok = !!valid; });
+        return ok;
+      },
+      clearValidate(name) {
+        const ref = this.$refs.formRef;
+        if (!ref) return;
+        ref.clearValidate(name);
+      },
+      scrollToField(name, options) {
+        const el = this.$el && this.$el.querySelector && this.$el.querySelector(`[for="${name}"]`);
+        const target = el || (this.$el && this.$el.querySelector && this.$el.querySelector(`.el-form-item__content [name='${name}']`));
+        if (target && target.scrollIntoView) target.scrollIntoView(options || { behavior: 'smooth', block: 'center' });
+      },
+      setProps(formProps) {
+        const nextProps = formProps || {};
+        if ('actionColOptions' in nextProps) this._actionColOptions = nextProps.actionColOptions;
+        if ('baseColProps' in nextProps) this._baseColProps = nextProps.baseColProps;
+        if ('mergeDynamicData' in nextProps) this._mergeDynamicData = nextProps.mergeDynamicData;
+        if ('autoSubmitOnEnter' in nextProps) this._autoSubmitOnEnter = nextProps.autoSubmitOnEnter;
+        if ('rulesMessageJoinLabel' in nextProps) this._rulesMessageJoinLabel = nextProps.rulesMessageJoinLabel;
+        if ('showSubmitButton' in nextProps) this._showSubmitButton = nextProps.showSubmitButton;
+        if ('showResetButton' in nextProps) this._showResetButton = nextProps.showResetButton;
+        if ('submitButtonText' in nextProps) this._submitButtonText = nextProps.submitButtonText;
+        if ('resetButtonText' in nextProps) this._resetButtonText = nextProps.resetButtonText;
+      },
+      removeSchemaByField(field) {
+        const names = Array.isArray(field) ? field : [field];
+        const src = (this.internalSchemas && this.internalSchemas.length) ? this.internalSchemas : (this.schemas || []);
+        this.internalSchemas = src.filter((schemaItem) => names.indexOf(schemaItem.field) === -1);
+      },
+      appendSchemaByField(schema, prefixField, first) {
+        const src = (this.internalSchemas && this.internalSchemas.length)
+          ? this.internalSchemas.slice()
+          : ((this.schemas || []).slice());
+        const item = { ...(schema || {}) };
+        if (first) {
+          src.unshift(item);
+        } else if (prefixField) {
+          const idx = src.findIndex((schemaItem) => schemaItem.field === prefixField);
+          if (idx !== -1) src.splice(idx + 1, 0, item);
+          else src.push(item);
+        } else {
+          src.push(item);
+        }
+        this.internalSchemas = src;
+      },
+      updateSchema(data) {
+        const src = (this.internalSchemas && this.internalSchemas.length)
+          ? this.internalSchemas.slice()
+          : ((this.schemas || []).slice());
+        const items = Array.isArray(data) ? data : [data];
+        const patchMap = Object.create(null);
+        items.forEach((patchSchema) => {
+          if (patchSchema && patchSchema.field) patchMap[patchSchema.field] = patchSchema;
+        });
+        this.internalSchemas = src.map((schemaItem) => (
+          patchMap[schemaItem.field] ? { ...schemaItem, ...patchMap[schemaItem.field] } : schemaItem
+        ));
+      },
+      submit() {
+        const ref = this.$refs.formRef;
+        if (!ref) return;
+        const doSubmit = () => {
+          const payload = this.mergePayload(this.mapFieldToTime({ ...this.formModel }));
+          this.$emit('submit', payload);
+        };
+        if (typeof this.submitFunc === 'function') {
+          runHookThen(this.submitFunc, doSubmit, logScope, 'submitFunc');
+          return;
+        }
+        ref.validate((valid) => { if (valid) doSubmit(); });
+      },
+      reset() {
+        const ref = this.$refs.formRef;
+        if (!ref) return;
+        const doReset = () => {
+          ref.resetFields();
+          const src = flattenSchemas(this.schemas || []);
+          const next = buildInitValues(src, {});
+          this.internalModel = { ...next };
+          this.$emit('reset', this.mergePayload(this.mapFieldToTime({ ...this.formModel })));
+        };
+        if (typeof this.resetFunc === 'function') {
+          runHookThen(this.resetFunc, doReset, logScope, 'resetFunc');
+          return;
+        }
+        doReset();
+      }
+    }
+  };
+}
+

package/packages/basic-form/src/mixins/basic-form-runtime-sections.js

@@ -0,0 +1,13 @@
+import { createBasicFormRuntimeMixin } from './basic-form-runtime-factory';
+import { flattenSchemasWithSections, normalizeSchemasWithSections } from './normalize-schemas-with-sections';
+
+/**
+ * sections 模式运行时：
+ * - 渲染阶段保留树形结构（用于分组展示）
+ * - 初始化/重置/提交等需要字段列表时，通过 flattenSchemasWithSections 扁平化抽取字段
+ */
+export default createBasicFormRuntimeMixin({
+  normalizeSchemas: normalizeSchemasWithSections,
+  flattenSchemas: flattenSchemasWithSections,
+  logScope: 'ElBasicFormSections'
+});