cloud-web-corejs 1.0.54-dev.73 → 1.0.54-dev.730

package/src/components/xform/form-render/container-item/dynamicFieldMixin.js

@@ -0,0 +1,416 @@
+import { generateId } from "../../../../components/xform/utils/util";
+import {
+  buildDynamicSchemaRequestData,
+  extractDynamicSchemaItems,
+  getDynamicSchemaOption,
+  normalizeDynamicFieldKey,
+  resolveDynamicSchemaResponse,
+} from "../../utils/dynamicSchemaUtil";
+
+/**
+ * 表格布局容器(table/h5-table)专用混入。
+ *
+ * 提供两类「布局表格」特有能力(动态字段状态控制已统一收敛到表单设置，见 formDynamicFieldMixin)：
+ *  1. 动态字段(dynamicSchemaSourceType)：字段定义由脚本或接口下发，运行时生成并插入到行布局中。
+ *  2. 行折叠(默认行为)：整行字段均隐藏时折叠该行(响应式，随字段显隐自动更新)。
+ *
+ * 依赖宿主组件已混入：containerItemMixin(formModel/formHttp/handleCustomEvent/designState)
+ * 与 refMixin(getFormRef)。
+ */
+const dynamicFieldMixin = {
+  data() {
+    return {
+      // anchor=replace 时被隐藏的占位行 id(响应式，驱动 rowHiddenMap 重算)
+      anchorHiddenRowId: null,
+    };
+  },
+  created() {
+    // 后台动态生成的行 id 集合(用于去重/清理)
+    this._generatedRowIds = [];
+  },
+  mounted() {
+    this.initDynamicSchema();
+  },
+  computed: {
+    // 行折叠状态：rowIdx -> true(折叠/隐藏)。响应式依赖字段 hidden 与 anchorHiddenRowId
+    // 行折叠为默认行为：整行字段均隐藏时自动折叠，避免布局空洞
+    rowHiddenMap() {
+      const map = {};
+      if (!this.supportsRowLayout()) return map;
+      const rows = this.widget.rows || [];
+      rows.forEach((row, rowIdx) => {
+        if (this.anchorHiddenRowId && row.id === this.anchorHiddenRowId) {
+          map[rowIdx] = true;
+          return;
+        }
+        const fields = [];
+        (row.cols || []).forEach((cell) => {
+          if (cell.merged) return;
+          this.collectFieldsDeep(cell.widgetList || [], fields);
+        });
+        if (!fields.length) {
+          map[rowIdx] = false;
+          return;
+        }
+        map[rowIdx] = fields.every((w) => !!w.options.hidden);
+      });
+      return map;
+    },
+  },
+  methods: {
+    // 容器是否为行布局(table/h5-table)
+    supportsRowLayout() {
+      return Array.isArray(this.widget && this.widget.rows);
+    },
+
+    isRowVisible(rowIdx) {
+      return !this.rowHiddenMap[rowIdx];
+    },
+
+    /* ------------------- 后台字段定义模式(行布局容器) ------------------- */
+    getDynamicSchemaSourceType() {
+      const options = this.widget.options || {};
+      const sourceType = getDynamicSchemaOption(options, "sourceType");
+      if (sourceType) {
+        return sourceType;
+      }
+      // 兼容旧配置：dynamicSchemaEnabled
+      if (options.dynamicSchemaEnabled) {
+        return "api";
+      }
+      return "none";
+    },
+
+    resolveShouldInitDynamicSchema() {
+      const source = this.getDynamicSchemaSourceType();
+      if (source === "none") {
+        return Promise.resolve(false);
+      }
+      const options = this.widget.options;
+      if (source === "api" && !getDynamicSchemaOption(options, "scriptCode")) {
+        return Promise.resolve(false);
+      }
+      if (source === "script" && !getDynamicSchemaOption(options, "frontendScript")) {
+        return Promise.resolve(false);
+      }
+      const script = getDynamicSchemaOption(options, "loadScript");
+      if (!script) {
+        return Promise.resolve(true);
+      }
+      const formRef = this.getFormRef();
+      if (!formRef || formRef.designState) {
+        return Promise.resolve(false);
+      }
+      try {
+        const result = this.handleCustomEvent(script);
+        if (result === false || result === null) {
+          return Promise.resolve(false);
+        }
+        return Promise.resolve(true);
+      } catch (e) {
+        return Promise.resolve(false);
+      }
+    },
+
+    initDynamicSchema() {
+      if (this.designState || !this.widget) return;
+      if (!this.supportsRowLayout()) return;
+      if (this.getDynamicSchemaSourceType() === "none") return;
+      this.$nextTick(() => {
+        this.resolveShouldInitDynamicSchema().then((shouldInit) => {
+          if (shouldInit) {
+            this.loadDynamicSchema();
+          }
+        });
+      });
+    },
+
+    loadDynamicSchema() {
+      if (this.designState || !this.supportsRowLayout()) {
+        return Promise.resolve();
+      }
+      const source = this.getDynamicSchemaSourceType();
+      if (source === "script") {
+        return this.loadDynamicSchemaFromScript();
+      }
+      if (source === "api") {
+        return this.loadDynamicSchemaFromApi();
+      }
+      return Promise.resolve();
+    },
+
+    loadDynamicSchemaFromScript() {
+      const script = getDynamicSchemaOption(this.widget.options, "frontendScript");
+      if (!script) {
+        return Promise.resolve();
+      }
+      try {
+        const result = this.handleCustomEvent(script);
+        const defs = this.normalizeSchemaScriptResult(result);
+        this.buildDynamicRows(defs);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.resolve();
+      }
+    },
+
+    normalizeSchemaScriptResult(result) {
+      if (result === null || result === undefined) {
+        return [];
+      }
+      return extractDynamicSchemaItems(result);
+    },
+
+    loadDynamicSchemaFromApi() {
+      const options = this.widget.options;
+      if (!getDynamicSchemaOption(options, "scriptCode")) {
+        return Promise.resolve();
+      }
+      const requestData = buildDynamicSchemaRequestData(
+        this.formModel,
+        getDynamicSchemaOption(options, "scriptParam"),
+        this.handleCustomEvent.bind(this)
+      );
+      return new Promise((resolve) => {
+        this.formHttp({
+          scriptCode: getDynamicSchemaOption(options, "scriptCode"),
+          isLoading: false,
+          data: requestData,
+          success: (res) => {
+            const defs = this.resolveSchemaDefs(res);
+            this.buildDynamicRows(defs);
+            this.$nextTick(() => resolve());
+          },
+          fail: () => resolve(),
+          error: () => resolve(),
+        });
+      });
+    },
+
+    resolveSchemaDefs(res) {
+      return resolveDynamicSchemaResponse(
+        res,
+        getDynamicSchemaOption(this.widget.options, "convert"),
+        this.handleCustomEvent.bind(this)
+      );
+    },
+
+    buildDynamicRows(defs) {
+      const options = this.widget.options;
+      const formRef = this.getFormRef ? this.getFormRef() : null;
+      if (!formRef || !Array.isArray(defs) || !Array.isArray(this.widget.rows)) {
+        return;
+      }
+
+      this.removeGeneratedRows();
+      this.anchorHiddenRowId = null;
+
+      const widgets = [];
+      defs.forEach((def) => {
+        const w = this.createFieldWidgetFromDef(def, formRef);
+        if (w) widgets.push({ widget: w, colspan: def.colspan || 1 });
+      });
+
+      const mode = options.dynamicSchemaMode || "append";
+      let anchorIdx = -1;
+      let cellTemplates = null;
+      if (mode === "anchor" && options.dynamicSchemaAnchorRowId) {
+        anchorIdx = (this.widget.rows || []).findIndex(
+          (r) => r.id === options.dynamicSchemaAnchorRowId
+        );
+        if (anchorIdx > -1 && options.dynamicSchemaInheritLayout) {
+          const anchorRow = this.widget.rows[anchorIdx];
+          cellTemplates = (anchorRow.cols || []).filter((c) => !c.merged);
+          if (!cellTemplates.length) cellTemplates = null;
+        }
+      }
+
+      const rows = cellTemplates
+        ? this.layoutByTemplate(widgets, cellTemplates)
+        : this.layoutByColumns(
+            widgets,
+            Math.max(1, parseInt(options.dynamicSchemaColumns, 10) || 4)
+          );
+
+      if (mode === "replace") {
+        this.widget.rows.splice(0, this.widget.rows.length, ...rows);
+      } else if (mode === "anchor" && anchorIdx > -1) {
+        const position = options.dynamicSchemaAnchorPosition || "replace";
+        if (position === "before") {
+          this.widget.rows.splice(anchorIdx, 0, ...rows);
+        } else if (position === "after") {
+          this.widget.rows.splice(anchorIdx + 1, 0, ...rows);
+        } else {
+          this.anchorHiddenRowId = this.widget.rows[anchorIdx].id;
+          this.widget.rows.splice(anchorIdx + 1, 0, ...rows);
+        }
+      } else {
+        this.widget.rows.push(...rows);
+      }
+      this._generatedRowIds = rows.map((r) => r.id);
+      this.afterDynamicSchemaBuilt(widgets, formRef);
+    },
+
+    afterDynamicSchemaBuilt(widgets, formRef) {
+      if (!formRef || !widgets || !widgets.length) return;
+      widgets.forEach(({ widget }) => {
+        if (widget && widget.formItemFlag && formRef.buildDataFromWidget) {
+          formRef.buildDataFromWidget(widget);
+        }
+      });
+      this.$nextTick(() => {
+        if (formRef.hanldeCommonWidget2) {
+          formRef.hanldeCommonWidget2();
+        }
+      });
+    },
+
+    layoutByColumns(widgets, colCount) {
+      const rows = [];
+      let current = null;
+      let used = 0;
+      widgets.forEach((item) => {
+        const span = Math.min(colCount, item.colspan || 1);
+        if (!current || used + span > colCount) {
+          current = {
+            id: "table-row-dyn-" + generateId(),
+            merged: false,
+            cols: [],
+          };
+          rows.push(current);
+          used = 0;
+        }
+        current.cols.push(this.buildDynCell(item.widget, { colspan: span }));
+        used += span;
+      });
+      return rows;
+    },
+
+    layoutByTemplate(widgets, cellTemplates) {
+      const rows = [];
+      const perRow = cellTemplates.length;
+      for (let i = 0; i < widgets.length; i += perRow) {
+        const row = {
+          id: "table-row-dyn-" + generateId(),
+          merged: false,
+          cols: [],
+        };
+        for (let j = 0; j < perRow; j++) {
+          const tpl = cellTemplates[j];
+          const item = widgets[i + j];
+          row.cols.push(
+            this.buildDynCell(item ? item.widget : null, {
+              colspan: (tpl.options && tpl.options.colspan) || 1,
+              cellWidth: (tpl.options && tpl.options.cellWidth) || "",
+              cellHeight: (tpl.options && tpl.options.cellHeight) || "",
+              customClass: (tpl.options && tpl.options.customClass) || "",
+            })
+          );
+        }
+        rows.push(row);
+      }
+      return rows;
+    },
+
+    buildDynCell(fieldWidget, opt) {
+      const cellId = "table-cell-dyn-" + generateId();
+      return {
+        id: cellId,
+        type: "table-cell",
+        category: "container",
+        internal: true,
+        merged: false,
+        widgetList: fieldWidget ? [fieldWidget] : [],
+        options: {
+          name: cellId,
+          cellWidth: opt.cellWidth || "",
+          cellHeight: opt.cellHeight || "",
+          colspan: opt.colspan || 1,
+          rowspan: 1,
+          customClass: opt.customClass || "",
+        },
+      };
+    },
+
+    createFieldWidgetFromDef(def, formRef) {
+      if (!def) return null;
+      const type = def.type || "input";
+      const template = formRef.getFieldWidgetByType(type);
+      if (!template) return null;
+      const key = normalizeDynamicFieldKey(def);
+      if (!key) return null;
+      const widget = formRef.copyNewFieldWidget(template);
+      widget.options.name = key;
+      widget.options.keyName = key;
+      widget.options.keyNameEnabled = true;
+      if (def.label !== undefined) widget.options.label = def.label;
+      if (def.options && typeof def.options === "object") {
+        Object.keys(def.options).forEach((k) => {
+          widget.options[k] = def.options[k];
+        });
+      }
+      if (def.required !== undefined) widget.options.required = !!def.required;
+      if (def.readonly !== undefined) widget.options.readonly = !!def.readonly;
+      if (def.disabled !== undefined) widget.options.disabled = !!def.disabled;
+      if (def.hidden !== undefined) widget.options.hidden = !!def.hidden;
+      if (def.defaultValue !== undefined) {
+        widget.options.defaultValue = def.defaultValue;
+      }
+      if (def.placeholder !== undefined && "placeholder" in widget.options) {
+        widget.options.placeholder = def.placeholder;
+      }
+      if (Array.isArray(def.optionItems) && "optionItems" in widget.options) {
+        widget.options.optionItems = def.optionItems;
+      }
+      if (def.tableField !== undefined) {
+        widget.tableField = def.tableField;
+      } else if (
+        widget.hasOwnProperty("tableField") &&
+        !widget.tableField
+      ) {
+        widget.tableField = widget.id;
+      }
+      if (def.submitFlag !== undefined) {
+        widget.options.submitFlag = !!def.submitFlag;
+      }
+      return widget;
+    },
+
+    removeGeneratedRows() {
+      if (!this._generatedRowIds || !this._generatedRowIds.length) return;
+      if (!Array.isArray(this.widget.rows)) {
+        this._generatedRowIds = [];
+        return;
+      }
+      const ids = this._generatedRowIds;
+      for (let i = this.widget.rows.length - 1; i >= 0; i--) {
+        if (ids.indexOf(this.widget.rows[i].id) > -1) {
+          this.widget.rows.splice(i, 1);
+        }
+      }
+      this._generatedRowIds = [];
+    },
+
+    collectFieldsDeep(list, out) {
+      (list || []).forEach((w) => {
+        if (!w) return;
+        if (w.category === "container") {
+          if (Array.isArray(w.rows)) {
+            w.rows.forEach((row) =>
+              this.collectFieldsDeep((row && row.cols) || [], out)
+            );
+          }
+          ["cols", "tabs", "widgetList", "panes", "buttonWidgetList"].forEach(
+            (k) => {
+              if (Array.isArray(w[k])) this.collectFieldsDeep(w[k], out);
+            }
+          );
+        } else if (w.formItemFlag) {
+          out.push(w);
+        }
+      });
+    },
+  },
+};
+
+export default dynamicFieldMixin;

package/src/components/xform/form-render/container-item/grid-col-item.vue

@@ -5,7 +5,7 @@
       <template v-for="(subWidget, swIdx) in widget.widgetList">
         <template v-if="'container' === subWidget.category">
           <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget">
+                          :index-of-parent-list="swIdx" :parent-widget="widget" :tableParam="tableParam" :formItemProp="formItemProp">
             <!-- 递归传递插槽！！！ -->
             <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
               <slot :name="slot" v-bind="scope"/>
@@ -14,7 +14,7 @@
         </template>
         <template v-else>
           <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
-                        :index-of-parent-list="swIdx" :parent-widget="widget">
+                        :index-of-parent-list="swIdx" :parent-widget="widget" :tableParam="tableParam" :formItemProp="formItemProp">
             <!-- 递归传递插槽！！！ -->
             <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
               <slot :name="slot" v-bind="scope"/>
@@ -54,7 +54,14 @@
         type: String,
         default: null
       },
-
+      tableParam: {
+        type: Object,
+        default: null,
+      },
+      formItemProp: {
+        type: String,
+        default: null,
+      },
     },
     inject: ['refList', 'globalModel', 'previewState'],
     data() {

package/src/components/xform/form-render/container-item/grid-item.vue

@@ -7,7 +7,7 @@
       <template v-for="(colWidget, colIdx) in widget.cols">
         <grid-col-item :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
                        :index-of-parent-list="colIdx" :parent-widget="widget"
-                       :col-height="widget.options.colHeight">
+                       :col-height="widget.options.colHeight" :tableParam="tableParam" :formItemProp="formItemProp">
           <!-- 递归传递插槽！！！ -->
           <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
             <slot :name="slot" v-bind="scope"/>