t20-common-lib 0.15.23 → 0.15.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.15.23",
+  "version": "0.15.24",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/dynamic-form/src/main.vue

@@ -1,87 +1,97 @@
 <template>
-  <T20-Form-Page>
-    <T20-page-header slot="header" :content="displayTitle" @back="$goBackCommon"></T20-page-header>
-    <N20-anchor v-model="action" position="right" nav-width="130">
-      <el-form
-        ref="dynamicForms"
-        class="label-width-16em"
-        :model="formData"
-        :rules="rules"
-        :validate-on-rule-change="false"
-        label-width="16em"
-        v-bind="formAttrs"
-      >
-        <N20-anchor-item
-          v-for="group in formGroups"
-          :key="group.prop"
-          :id="group.prop"
-          :title="group.unitName"
-          v-show="group.isShow !== 0"
-        >
-          <template v-if="group.unitType === 'FORM'">
-            <el-form-item
-              v-for="item in group.elements"
-              :key="`${group.prop}.${item.prop}.${item.elementType}`"
-              :label="item.label"
-              :prop="`${group.prop}.${item.prop}`"
-              v-show="item.isShow !== 0"
-              :class="item.className"
-            >
-              <component
-                :is="elementTypeChange[item.elementType] || item.elementType"
-                v-if="elementTypeChange[item.elementType]"
-                v-model="formData[group.prop][item.prop]"
-                :formData="formData"
-                :groupProp="group.prop"
-                :items="item"
-                :disabled="item.isEditable === 0"
-                :label.sync="formData[group.prop][item.nameProp]"
-                v-bind="item.props"
-                @change="(val, option) => $emit('change', { val, option, groupProp: group.prop, item, group })"
-                @dialogChange="obj => $emit('dialog-change', { obj: obj || {}, groupProp: group.prop, item, group })"
-              />
-              <slot
-                v-else-if="item.elementType === 'SLOT_ELEMENT'"
-                :name="item.prop"
-                :formData="formData"
-                :groupProp="group.prop"
-                :prop="item.prop"
-                :elementItem="item"
-                :value="formData[group.prop][item.prop]"
-              />
-            </el-form-item>
-          </template>
-        </N20-anchor-item>
-      </el-form>
+  <N20-anchor v-model="action" position="right" nav-width="130">
+    <el-form
+      ref="dynamicForms"
+      class="label-width-16em"
+      :model="formData"
+      :rules="rules"
+      :validate-on-rule-change="false"
+      label-width="16em"
+      v-bind="formAttrs"
+    >
       <N20-anchor-item
-        v-if="needFile"
-        key="fileuploadtable"
-        id="fileuploadtable"
-        :title="$lc('附件信息')"
+        v-for="group in formGroups"
+        :key="group.prop"
+        :id="group.prop"
+        :title="group.unitName"
+        v-show="group.isShow !== 0"
       >
-        <N20-file-upload-table
-          v-if="!needFileDIY"
-          :action="fileAction"
-          :table-data="fileUploadTableData"
-          :see-types="seeTypes"
-          :show-batch-upload="false"
-          :data-porp="dataPorp"
-          :upload-http-request="uploadRequest"
-          :readonly="uploadReadOnly"
-          @on-success="onSuccess"
-          @on-remove="onRemove"
-          @add-row="addRow"
-          @down-rows="downRows"
-          @delete-rows="deleteRows"
-        />
-        <slot v-else name="fileUploadTable"></slot>
+        <template v-if="group.unitType === 'FORM'">
+          <el-form-item
+            v-for="item in group.elements"
+            :key="`${group.prop}.${item.prop}.${item.elementType}`"
+            :label="item.label"
+            :prop="`${group.prop}.${item.prop}`"
+            v-show="item.isShow !== 0"
+            :class="item.className"
+          >
+            <component
+              :is="elementTypeChange[item.elementType] || item.elementType"
+              v-if="elementTypeChange[item.elementType]"
+              v-model="formData[group.prop][item.prop]"
+              :formData="formData"
+              :groupProp="group.prop"
+              :items="item"
+              :disabled="item.isEditable === 0"
+              :label.sync="formData[group.prop][item.nameProp]"
+              v-bind="item.props"
+              @change="
+                (val, option) =>
+                  $emit('change', {
+                    val,
+                    option,
+                    groupProp: group.prop,
+                    item,
+                    group,
+                  })
+              "
+              @dialogChange="
+                (obj) =>
+                  $emit('dialog-change', {
+                    obj: obj || {},
+                    groupProp: group.prop,
+                    item,
+                    group,
+                  })
+              "
+            />
+            <slot
+              v-else-if="item.elementType === 'SLOT_ELEMENT'"
+              :name="item.prop"
+              :formData="formData"
+              :groupProp="group.prop"
+              :prop="item.prop"
+              :elementItem="item"
+              :value="formData[group.prop][item.prop]"
+            />
+          </el-form-item>
+        </template>
       </N20-anchor-item>
-    </N20-anchor>
-    <div slot="footer">
-      <el-button type="primary" @click="submit('SUBMIT')">{{ $lc('提交') }}</el-button>
-      <el-button @click="submit('SAVE')">{{ $lc('保存') }}</el-button>
-    </div>
-  </T20-Form-Page>
+    </el-form>
+    <N20-anchor-item
+      v-if="needFile"
+      key="fileuploadtable"
+      id="fileuploadtable"
+      :title="$lc('附件信息')"
+    >
+      <N20-file-upload-table
+        v-if="!needFileDIY"
+        :action="fileAction"
+        :table-data="fileUploadTableData"
+        :see-types="seeTypes"
+        :show-batch-upload="false"
+        :data-porp="dataPorp"
+        :upload-http-request="uploadRequest"
+        :readonly="uploadReadOnly"
+        @on-success="onSuccess"
+        @on-remove="onRemove"
+        @add-row="addRow"
+        @down-rows="downRows"
+        @delete-rows="deleteRows"
+      />
+      <slot v-else name="fileUploadTable"></slot>
+    </N20-anchor-item>
+  </N20-anchor>
 </template>
 
 <script>
@@ -89,73 +99,69 @@
  * fieldControlList：与 dynamicData 同时传入，仅在收到模版时按 fieldNo 与 elements[].prop
  * 合并一次 isShow、showName→label、isRequired；之后渲染均以合并后的 mergedTemplateBase 为唯一数据源。
  */
-import { fileUploadTableMixin } from '../mixins/fileUpload'
+import { fileUploadTableMixin } from "../mixins/fileUpload";
 // 复用 Demo 中的字段组件，按模板的 elementType 动态渲染
-const context = require.context('./components/', true, /\.vue$/)
-const demoComponents = {}
-context.keys().forEach(key => {
-  const component = context(key).default
-  if (!component || !component.name) return
-  demoComponents[component.name] = component
-})
+const context = require.context("./components/", true, /\.vue$/);
+const demoComponents = {};
+context.keys().forEach((key) => {
+  const component = context(key).default;
+  if (!component || !component.name) return;
+  demoComponents[component.name] = component;
+});
 
 export default {
-  name: 'DynamicForm',
+  name: "DynamicForm",
   components: {
-    ...demoComponents
+    ...demoComponents,
   },
   mixins: [fileUploadTableMixin],
   props: {
-    title: {
-      type: String,
-      default: ''
-    },
     dynamicData: {
       type: Object,
-      default: () => ({ units: [] })
+      default: () => ({ units: [] }),
     },
     // 表单数据由页面持有，通过 v-model(value/input) 双向同步
     value: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     /** 字段控制配置，与 dynamicData 一并传入；仅整合一次 */
     fieldControlList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     /** 是否展示附件锚点（默认关闭，不影响现有用法） */
     needFile: {
       type: Boolean,
-      default: true
+      default: true,
     },
     /** true 时使用 fileUploadTable 插槽自定义附件区 */
     needFileDIY: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /** 电子档案 / 上传参数，与 Demo DynamicForm uploadParam 一致 */
     uploadParam: {
       type: Object,
       default: () => ({
-        syscode: '060000000',
-        appno: '060500000',
-        bussValue: 'invest_041001001',
-        attno: 'invest_002',
-        bussId: null
-      })
+        syscode: "060000000",
+        appno: "060500000",
+        bussValue: "invest_041001001",
+        attno: "invest_002",
+        bussId: null,
+      }),
     },
     uploadReadOnly: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       // ElementUI 校验规则：key 形如 "groupProp.fieldProp"
       rules: {},
       // 右侧锚点当前定位项
-      action: '',
+      action: "",
       formAttrs: {},
       // dynamicData + fieldControlList 合并后的模版快照；applyFieldStates 均从此克隆，不再直接用原始 dynamicData
       mergedTemplateBase: null,
@@ -167,41 +173,38 @@ export default {
       isApplyingLinkage: false,
       // 模板字段类型 -> 组件名映射；后续扩展新组件时在这里补
       elementTypeChange: {
-        SELECT: 'Select',
-        SELECT_LAZY: 'LazySelect',
-        SELECT_SCROLL_LOAD: 'ScrollLoadSelect',
-        DIALOG: 'Dialog',
-        INPUT: 'Input',
-        AMOUNT: 'Amount',
-        RATE: 'Rate',
-        RADIO: 'RadioGroup',
-        CHECKBOX: 'CheckboxGroup',
-        TEXTAREA: 'Textarea',
-        DATE: 'Date',
-        DATE_RANGE: 'DateRange',
-        DMY: 'DMY',
-        AMOUNT_RANGE: 'AmountRange',
-        RATE_RANGE: 'AmountRange',
-        UNIT_TREE_SELECT: 'unitTreeSelect',
-        SELECT_TREE: 'SelectTree'
-      }
-    }
+        SELECT: "Select",
+        SELECT_LAZY: "LazySelect",
+        SELECT_SCROLL_LOAD: "ScrollLoadSelect",
+        DIALOG: "Dialog",
+        INPUT: "Input",
+        AMOUNT: "Amount",
+        RATE: "Rate",
+        RADIO: "RadioGroup",
+        CHECKBOX: "CheckboxGroup",
+        TEXTAREA: "Textarea",
+        DATE: "Date",
+        DATE_RANGE: "DateRange",
+        DMY: "DMY",
+        AMOUNT_RANGE: "AmountRange",
+        RATE_RANGE: "AmountRange",
+        UNIT_TREE_SELECT: "unitTreeSelect",
+        SELECT_TREE: "SelectTree",
+      },
+    };
   },
   computed: {
     formData: {
       get() {
-        return this.value || {}
+        return this.value || {};
       },
       set(val) {
-        this.$emit('input', val || {})
-      }
-    },
-    displayTitle() {
-      return this.title || this.$lc('动态表单')
+        this.$emit("input", val || {});
+      },
     },
     formGroups() {
-      return this.runtimeTemplate?.units || []
-    }
+      return this.runtimeTemplate?.units || [];
+    },
   },
   watch: {
     // 模板变更时重建表单模型和规则，保证页面与模板一致
@@ -209,252 +212,310 @@ export default {
       immediate: true,
       deep: true,
       handler() {
-        this.rules = {}
-        this.initializeFromTemplate()
-      }
+        this.rules = {};
+        this.initializeFromTemplate();
+      },
     },
     value: {
       immediate: true,
       deep: true,
       handler() {
-        if (this.isApplyingLinkage) return
+        if (this.isApplyingLinkage) return;
         // 编辑场景下 value 可能由页面先行组装，等模板就绪后仅补齐缺失字段，不覆盖已传数据。
-        if (!this.formGroups.length) return
-        this.ensureFormDataShape()
-      }
-    }
+        if (!this.formGroups.length) return;
+        this.ensureFormDataShape();
+      },
+    },
   },
   methods: {
     ensureFormDataShape() {
-      let changed = false
-      if (!this.formData || typeof this.formData !== 'object' || Array.isArray(this.formData)) {
-        this.formData = {}
-        changed = true
+      let changed = false;
+      if (
+        !this.formData ||
+        typeof this.formData !== "object" ||
+        Array.isArray(this.formData)
+      ) {
+        this.formData = {};
+        changed = true;
       }
-      const formUnits = this.formGroups || []
-      formUnits.forEach(group => {
-        if (!['FORM', 'UNIT_FORM'].includes(group.unitType)) return
-        if (!this.formData[group.prop] || typeof this.formData[group.prop] !== 'object' || Array.isArray(this.formData[group.prop])) {
-          this.$set(this.formData, group.prop, {})
-          changed = true
+      const formUnits = this.formGroups || [];
+      formUnits.forEach((group) => {
+        if (!["FORM", "UNIT_FORM"].includes(group.unitType)) return;
+        if (
+          !this.formData[group.prop] ||
+          typeof this.formData[group.prop] !== "object" ||
+          Array.isArray(this.formData[group.prop])
+        ) {
+          this.$set(this.formData, group.prop, {});
+          changed = true;
         }
-        ;(group.elements || []).forEach(item => {
-          if (!item.prop) return
-          if (!Object.prototype.hasOwnProperty.call(this.formData[group.prop], item.prop)) {
-            this.$set(this.formData[group.prop], item.prop, item.defaultValue ?? '')
-            changed = true
+        (group.elements || []).forEach((item) => {
+          if (!item.prop) return;
+          if (
+            !Object.prototype.hasOwnProperty.call(
+              this.formData[group.prop],
+              item.prop
+            )
+          ) {
+            this.$set(
+              this.formData[group.prop],
+              item.prop,
+              item.defaultValue ?? ""
+            );
+            changed = true;
           }
-        })
-      })
+        });
+      });
       if (changed) {
-        this.$emit('input', { ...this.formData })
+        this.$emit("input", { ...this.formData });
       }
     },
     /**
      * 将 fieldControlList 合并进模版克隆（fieldNo 对应 elements[].prop）
      */
     mergeFieldControlIntoTemplate(templateClone) {
-      const list = this.fieldControlList
-      if (!templateClone?.units || !Array.isArray(list) || list.length === 0) return templateClone
-      const byFieldNo = Object.create(null)
-      list.forEach(row => {
-        if (row && row.fieldNo != null && row.fieldNo !== '') byFieldNo[row.fieldNo] = row
-      })
-      ;(templateClone.units || []).forEach(group => {
-        ;(group.elements || []).forEach(item => {
-          if (!item.prop) return
-          const cfg = byFieldNo[item.prop]
-          if (!cfg) return
+      const list = this.fieldControlList;
+      if (!templateClone?.units || !Array.isArray(list) || list.length === 0)
+        return templateClone;
+      const byFieldNo = Object.create(null);
+      list.forEach((row) => {
+        if (row && row.fieldNo != null && row.fieldNo !== "")
+          byFieldNo[row.fieldNo] = row;
+      });
+      (templateClone.units || []).forEach((group) => {
+        (group.elements || []).forEach((item) => {
+          if (!item.prop) return;
+          const cfg = byFieldNo[item.prop];
+          if (!cfg) return;
           if (cfg.isShow !== undefined && cfg.isShow !== null) {
-            item.isShow = this.templateShowOrEditable(cfg.isShow)
+            item.isShow = this.templateShowOrEditable(cfg.isShow);
           }
-          if (cfg.showName != null && String(cfg.showName).trim() !== '') {
-            item.label = cfg.showName
+          if (cfg.showName != null && String(cfg.showName).trim() !== "") {
+            item.label = cfg.showName;
           }
           if (cfg.isRequired !== undefined && cfg.isRequired !== null) {
-            item.isRequired = this.templateRequired(cfg.isRequired)
+            item.isRequired = this.templateRequired(cfg.isRequired);
           }
-        })
-      })
-      return templateClone
+        });
+      });
+      return templateClone;
     },
     // 基于模板初始化：分组锚点、默认值、必填规则
     initializeFromTemplate() {
-      this.linkageFieldOverrides = {}
-      const raw = JSON.parse(JSON.stringify(this.dynamicData || { units: [] }))
-      this.mergedTemplateBase = this.mergeFieldControlIntoTemplate(raw)
-      this.runtimeTemplate = JSON.parse(JSON.stringify(this.mergedTemplateBase))
-      this.action = this.formGroups.length > 0 ? this.formGroups[0].prop : ''
-      this.ensureFormDataShape()
-      this.formGroups.forEach(group => {
-        ;(group.elements || []).forEach(item => {
-          this.setFieldRule(group.prop, item)
-        })
-      })
-      this.applyFieldStates()
+      this.linkageFieldOverrides = {};
+      const raw = JSON.parse(JSON.stringify(this.dynamicData || { units: [] }));
+      this.mergedTemplateBase = this.mergeFieldControlIntoTemplate(raw);
+      this.runtimeTemplate = JSON.parse(
+        JSON.stringify(this.mergedTemplateBase)
+      );
+      this.action = this.formGroups.length > 0 ? this.formGroups[0].prop : "";
+      this.ensureFormDataShape();
+      this.formGroups.forEach((group) => {
+        (group.elements || []).forEach((item) => {
+          this.setFieldRule(group.prop, item);
+        });
+      });
+      this.applyFieldStates();
     },
     setFieldRule(groupProp, item) {
       this.$set(this.rules, `${groupProp}.${item.prop}`, [
         {
           required: item.isRequired === 1 && item.isShow !== 0,
-          message: `${item.elementType === 'SELECT' ? this.$lc('请选择') : this.$lc('请输入')}${item.label}`,
-          trigger: ['blur', 'change']
-        }
-      ])
+          message: `${
+            item.elementType === "SELECT"
+              ? this.$lc("请选择")
+              : this.$lc("请输入")
+          }${item.label}`,
+          trigger: ["blur", "change"],
+        },
+      ]);
     },
     /**
      * 仅接受 boolean，用于联动 API（setFieldShow 等）显式传入 true/false。
      */
     toFlag(value) {
       if (value !== true && value !== false) {
-        throw new TypeError('[DynamicForm] toFlag 仅接受 true 或 false')
+        throw new TypeError("[DynamicForm] toFlag 仅接受 true 或 false");
       }
-      return value ? 1 : 0
+      return value ? 1 : 0;
     },
     /** 模板 JSON 中 0 | 1 转为运行时 isShow / isEditable（0 隐藏/禁用，非 0 为 1） */
     templateShowOrEditable(v) {
-      return v === 0 ? 0 : 1
+      return v === 0 ? 0 : 1;
     },
     /** 模板 JSON 中 isRequired：仅 1 为必填 */
     templateRequired(v) {
-      return v === 1 ? 1 : 0
+      return v === 1 ? 1 : 0;
     },
     getGroup(groupProp) {
-      return this.formGroups.find(group => group.prop === groupProp) || null
+      return this.formGroups.find((group) => group.prop === groupProp) || null;
     },
     getField(groupProp, fieldProp) {
-      const group = this.getGroup(groupProp)
-      if (!group) return null
-      return (group.elements || []).find(item => item.prop === fieldProp) || null
+      const group = this.getGroup(groupProp);
+      if (!group) return null;
+      return (
+        (group.elements || []).find((item) => item.prop === fieldProp) || null
+      );
     },
     setGroupShow(groupProp, visible) {
-      const group = this.getGroup(groupProp)
-      if (!group) return
-      this.$set(group, 'isShow', this.toFlag(visible))
+      const group = this.getGroup(groupProp);
+      if (!group) return;
+      this.$set(group, "isShow", this.toFlag(visible));
     },
     setFieldShow(groupProp, fieldProp, visible) {
-      const field = this.getField(groupProp, fieldProp)
-      if (!field) return
-      this.$set(field, 'isShow', this.toFlag(visible))
-      this.setFieldRule(groupProp, field)
+      const field = this.getField(groupProp, fieldProp);
+      if (!field) return;
+      this.$set(field, "isShow", this.toFlag(visible));
+      this.setFieldRule(groupProp, field);
     },
     setFieldRequired(groupProp, fieldProp, required) {
-      const field = this.getField(groupProp, fieldProp)
-      if (!field) return
-      this.$set(field, 'isRequired', this.toFlag(required))
-      this.setFieldRule(groupProp, field)
+      const field = this.getField(groupProp, fieldProp);
+      if (!field) return;
+      this.$set(field, "isRequired", this.toFlag(required));
+      this.setFieldRule(groupProp, field);
     },
     setFieldEditable(groupProp, fieldProp, editable) {
-      const field = this.getField(groupProp, fieldProp)
-      if (!field) return
-      this.$set(field, 'isEditable', this.toFlag(editable))
+      const field = this.getField(groupProp, fieldProp);
+      if (!field) return;
+      this.$set(field, "isEditable", this.toFlag(editable));
     },
     setFieldValue(groupProp, fieldProp, value) {
-      const sourceFormData = this.formData && typeof this.formData === 'object' ? this.formData : {}
-      if (!sourceFormData[groupProp] || typeof sourceFormData[groupProp] !== 'object' || Array.isArray(sourceFormData[groupProp])) {
-        this.$set(sourceFormData, groupProp, {})
+      const sourceFormData =
+        this.formData && typeof this.formData === "object" ? this.formData : {};
+      if (
+        !sourceFormData[groupProp] ||
+        typeof sourceFormData[groupProp] !== "object" ||
+        Array.isArray(sourceFormData[groupProp])
+      ) {
+        this.$set(sourceFormData, groupProp, {});
       }
-      this.$set(sourceFormData[groupProp], fieldProp, value)
-      this.$emit('input', sourceFormData)
+      this.$set(sourceFormData[groupProp], fieldProp, value);
+      this.$emit("input", sourceFormData);
     },
     /**
      * 场景4：与 value 配套的展示字段（模板里的 nameProp），用于下拉等回显名称。
      */
     setFieldLabelValue(groupProp, fieldProp, labelText) {
-      const field = this.getField(groupProp, fieldProp)
-      if (!field || !field.nameProp) return
-      this.setFieldValue(groupProp, field.nameProp, labelText)
+      const field = this.getField(groupProp, fieldProp);
+      if (!field || !field.nameProp) return;
+      this.setFieldValue(groupProp, field.nameProp, labelText);
     },
     /**
      * 场景4：覆盖字段的 options（如下拉数据源随 A 变化）。
      */
     setFieldOptions(groupProp, fieldProp, options) {
       if (!Array.isArray(options)) {
-        throw new TypeError('[DynamicForm] setFieldOptions 第三个参数须为数组')
+        throw new TypeError("[DynamicForm] setFieldOptions 第三个参数须为数组");
       }
-      const field = this.getField(groupProp, fieldProp)
-      if (!field) return
-      this.$set(field, 'options', options)
-      this.patchLinkageOverride(groupProp, fieldProp, { options })
+      const field = this.getField(groupProp, fieldProp);
+      if (!field) return;
+      this.$set(field, "options", options);
+      this.patchLinkageOverride(groupProp, fieldProp, { options });
     },
     /**
      * 场景5：切换字段渲染的 elementType（如 INPUT / SELECT），须在 elementTypeChange 中已注册。
      */
     setFieldElementType(groupProp, fieldProp, elementType) {
-      if (typeof elementType !== 'string' || !elementType) {
-        throw new TypeError('[DynamicForm] setFieldElementType 须传入非空字符串')
+      if (typeof elementType !== "string" || !elementType) {
+        throw new TypeError(
+          "[DynamicForm] setFieldElementType 须传入非空字符串"
+        );
       }
       if (!this.elementTypeChange[elementType]) {
-        throw new TypeError(`[DynamicForm] 未注册的 elementType: ${elementType}`)
+        throw new TypeError(
+          `[DynamicForm] 未注册的 elementType: ${elementType}`
+        );
       }
-      const field = this.getField(groupProp, fieldProp)
-      if (!field) return
-      this.$set(field, 'elementType', elementType)
-      this.patchLinkageOverride(groupProp, fieldProp, { elementType })
-      this.setFieldRule(groupProp, field)
+      const field = this.getField(groupProp, fieldProp);
+      if (!field) return;
+      this.$set(field, "elementType", elementType);
+      this.patchLinkageOverride(groupProp, fieldProp, { elementType });
+      this.setFieldRule(groupProp, field);
     },
     patchLinkageOverride(groupProp, fieldProp, patch) {
       if (!this.linkageFieldOverrides[groupProp]) {
-        this.$set(this.linkageFieldOverrides, groupProp, {})
+        this.$set(this.linkageFieldOverrides, groupProp, {});
       }
-      const prev = this.linkageFieldOverrides[groupProp][fieldProp] || {}
-      this.$set(this.linkageFieldOverrides[groupProp], fieldProp, { ...prev, ...patch })
+      const prev = this.linkageFieldOverrides[groupProp][fieldProp] || {};
+      this.$set(this.linkageFieldOverrides[groupProp], fieldProp, {
+        ...prev,
+        ...patch,
+      });
     },
     /** 模板每次从 mergedTemplateBase 克隆后，把联动里改过的 options / elementType 写回对应字段 */
     applyLinkageOverrides() {
-      Object.keys(this.linkageFieldOverrides || {}).forEach(groupProp => {
-        const fields = this.linkageFieldOverrides[groupProp]
-        Object.keys(fields || {}).forEach(fieldProp => {
-          const patch = fields[fieldProp]
-          const item = this.getField(groupProp, fieldProp)
-          if (!item || !patch) return
+      Object.keys(this.linkageFieldOverrides || {}).forEach((groupProp) => {
+        const fields = this.linkageFieldOverrides[groupProp];
+        Object.keys(fields || {}).forEach((fieldProp) => {
+          const patch = fields[fieldProp];
+          const item = this.getField(groupProp, fieldProp);
+          if (!item || !patch) return;
           if (patch.options !== undefined) {
-            this.$set(item, 'options', patch.options)
+            this.$set(item, "options", patch.options);
           }
           if (patch.elementType !== undefined) {
-            this.$set(item, 'elementType', patch.elementType)
+            this.$set(item, "elementType", patch.elementType);
           }
-        })
-      })
+        });
+      });
     },
     applyFieldStates() {
-      if (!this.mergedTemplateBase?.units) return
-      this.isApplyingLinkage = true
-      const nextTemplate = JSON.parse(JSON.stringify(this.mergedTemplateBase))
-      this.rules = {}
-      ;(nextTemplate.units || []).forEach(group => {
-        group.isShow = this.templateShowOrEditable(group.isShow)
-        ;(group.elements || []).forEach(item => {
-          item.isShow = this.templateShowOrEditable(item.isShow)
-          item.isRequired = this.templateRequired(item.isRequired)
-          item.isEditable = this.templateShowOrEditable(item.isEditable)
-        })
-      })
-      this.runtimeTemplate = nextTemplate
-      this.applyLinkageOverrides()
-      this.formGroups.forEach(group => {
-        ;(group.elements || []).forEach(item => {
-          this.setFieldRule(group.prop, item)
-        })
-      })
+      if (!this.mergedTemplateBase?.units) return;
+      this.isApplyingLinkage = true;
+      const nextTemplate = JSON.parse(JSON.stringify(this.mergedTemplateBase));
+      this.rules = {};
+      (nextTemplate.units || []).forEach((group) => {
+        group.isShow = this.templateShowOrEditable(group.isShow);
+        (group.elements || []).forEach((item) => {
+          item.isShow = this.templateShowOrEditable(item.isShow);
+          item.isRequired = this.templateRequired(item.isRequired);
+          item.isEditable = this.templateShowOrEditable(item.isEditable);
+        });
+      });
+      this.runtimeTemplate = nextTemplate;
+      this.applyLinkageOverrides();
+      this.formGroups.forEach((group) => {
+        (group.elements || []).forEach((item) => {
+          this.setFieldRule(group.prop, item);
+        });
+      });
       this.$nextTick(() => {
         // 模板重建后统一清理校验态，避免规则变化导致页面出现历史校验提示。
-        if (this.$refs.dynamicForms && typeof this.$refs.dynamicForms.clearValidate === 'function') {
-          this.$refs.dynamicForms.clearValidate()
+        if (
+          this.$refs.dynamicForms &&
+          typeof this.$refs.dynamicForms.clearValidate === "function"
+        ) {
+          this.$refs.dynamicForms.clearValidate();
         }
-        this.isApplyingLinkage = false
-      })
-    },
-    // 第一步仅做模板渲染校验，提交逻辑后续步骤再扩展
-    async submit(operate) {
-      const valid = await this.$refs.dynamicForms.validate()
-      if (!valid) return
-      const payload = { formData: this.formData, operate }
+        this.isApplyingLinkage = false;
+      });
+    },
+    /**
+     * 触发表单校验；通过后由返回值携带表单数据与附件（与 needFile 一致时含已落档行）。
+     * @returns {Promise<{ valid: false, formData: object } | { valid: true, formData: object, operate?: string, fileUploadTableData?: array }>}
+     */
+    async validate() {
+      const formRef = this.$refs.dynamicForms;
+      if (!formRef || typeof formRef.validate !== "function") {
+        return { valid: false, formData: this.formData };
+      }
+      const pass = await new Promise((resolve) => {
+        formRef.validate((valid) => resolve(valid));
+      });
+      if (!pass) {
+        return { valid: false, formData: this.formData };
+      }
+      const result = {
+        valid: true,
+        formData: this.formData,
+      };
       if (this.needFile) {
-        payload.fileUploadTableData = (this.fileUploadTableData || []).filter(t => t.beid)
+        result.fileUploadTableData = (this.fileUploadTableData || []).filter(
+          (t) => t.beid
+        );
       }
-      this.$emit('submit', payload)
-    }
-  }
-}
+      return result;
+    },
+  },
+};
 </script>

package/packages/dynamic-form-detail/src/main.vue

@@ -1,24 +1,5 @@
 <template>
-  <N20-page class="dynamic-form-detail">
-    <!--
-      使用规范（与 DynamicForm 同一套 dynamicData）：
-      1. value 与 DynamicForm 提交的 formData 结构一致：{ [groupProp]: { [fieldProp]: 值 } }。
-      2. 下拉、弹窗等需要展示中文时：须在提交数据中同时写入模板里的 nameProp 对应字段；展示页优先显示 nameProp。
-      3. 未配置 nameProp 且无法从 options 反查时，直接展示存证值（代码/ id）。
-      4. SLOT_ELEMENT 由具名插槽 item.prop 自行渲染。
-      5. 附件：needFile / uploadParam 等与 DynamicForm 一致；详情默认 uploadReadOnly=true。
-      6. 子表、审批流等业务区由外层页面编排，或用 append 插槽扩展。
-    -->
-    <T20-page-header
-      v-if="showPageHeader"
-      slot="header"
-      @back="onBack"
-      :content="title"
-    >
-      <template slot="headerButtons">
-        <slot name="headerButtons" />
-      </template>
-    </T20-page-header>
+  <div class="dynamic-form-detail">
     <N20-expandable-pane
       v-for="group in formGroups"
       :key="group.prop"
@@ -70,29 +51,13 @@
       />
       <slot v-else name="fileUploadTable"></slot>
     </N20-expandable-pane>
-    <N20-expandable-pane v-if="showApprovalProgress" :title="$l('审批进度')">
-      <el-button slot="tips" size="mini" plain @click="imgV = true">{{ $l('流程图查看') }}</el-button>
-      <N20-approve-card :procInstId="processInstanceId" />
-      <el-dialog
-        v-drag
-        :title="$l('查看流程')"
-        :visible.sync="imgV"
-        width="65%"
-        class="p-a-0"
-        append-to-body
-        top="10vh"
-      >
-        <N20-approval-img class="text-c p-a" style="height: 70vh; overflow: auto" />
-      </el-dialog>
-    </N20-expandable-pane>
-    <N20-approval-buttons v-if="showApprovalFooter" slot="footer" />
-    <slot name="append" />
-  </N20-page>
+  </div>
 </template>
 
 <script>
 /**
  * 只读展示：与 DynamicForm 共用 dynamicData / fieldControlList 合并规则。
+ * 页面壳（N20-page、顶栏、审批区等）由业务页自行编排。
  */
 import { fileUploadTableMixin } from '../../dynamic-form/mixins/fileUpload'
 
@@ -112,21 +77,6 @@ export default {
       type: Object,
       default: () => ({})
     },
-    /** 顶栏标题 */
-    title: {
-      type: String,
-      default: ''
-    },
-    /** 是否显示页面头 */
-    showPageHeader: {
-      type: Boolean,
-      default: true
-    },
-    /** 返回事件：默认调用 $goBackCommon；传 false 则仅抛出 back 事件 */
-    autoBack: {
-      type: Boolean,
-      default: true
-    },
     /** 是否展示附件区（与 DynamicForm 一致） */
     needFile: {
       type: Boolean,
@@ -152,27 +102,12 @@ export default {
     uploadReadOnly: {
       type: Boolean,
       default: true
-    },
-    /** 是否展示审批进度 */
-    showApprovalProgress: {
-      type: Boolean,
-      default: false
-    },
-    /** 是否展示审批按钮（同时需 orderId + taskId） */
-    showApprovalFooter: {
-      type: Boolean,
-      default: false
-    },
-    processInstanceId: {
-      type: [String, Number],
-      default: ''
     }
   },
   data() {
     return {
       mergedTemplateBase: null,
-      runtimeTemplate: { units: [] },
-      imgV: false
+      runtimeTemplate: { units: [] }
     }
   },
   computed: {
@@ -199,12 +134,6 @@ export default {
     }
   },
   methods: {
-    onBack() {
-      this.$emit('back')
-      if (this.autoBack !== false && typeof this.$goBackCommon === 'function') {
-        this.$goBackCommon()
-      }
-    },
     rowValue(groupProp, fieldProp) {
       const g = this.formData[groupProp]
       if (!g || typeof g !== 'object') return undefined