cloud-web-corejs 1.0.54-dev.78 → 1.0.54-dev.781

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

@@ -0,0 +1,285 @@
+/**
+ * 动态字段规则引擎(纯逻辑，无 Vue 上下文)。
+ *
+ * 供「表单级动态规则(form-setting)」与「容器级动态字段(container-item)」共用：
+ *  - 目标收集：字段 + 命名容器，建立 目标key -> { widget, refKey, isContainer } 映射与设计基线
+ *  - 规则计算：本地条件/逻辑求值，输出每个目标的最终状态
+ *  - 状态落地：通过 getWidgetRef 应用到运行时组件，无 ref 时回退改 schema
+ */
+import {
+  traverseFieldWidgets,
+  traverseContainerWidgets,
+  traverseFieldWidgetsOfContainer,
+} from "../../../../components/xform/utils/util";
+
+// 布局内格容器，不作为可控目标
+const EXCLUDED_CONTAINER_TYPES = ["grid-col", "table-cell", "h5-table-cell"];
+
+export function getModelKey(w) {
+  return (w.options.keyNameEnabled && w.options.keyName) || w.options.name;
+}
+
+function addFieldTo(map, baseline, w) {
+  if (!w || !w.options) return;
+  const key = getModelKey(w);
+  if (!key) return;
+  map[key] = { widget: w, refKey: w.options.name, isContainer: false };
+  baseline[key] = {
+    visible: !w.options.hidden,
+    required: !!w.options.required,
+    readonly: !!w.options.readonly,
+    disabled: !!w.options.disabled,
+  };
+}
+
+function addContainerTo(map, baseline, w) {
+  if (!w || !w.options || !w.options.name) return;
+  if (EXCLUDED_CONTAINER_TYPES.indexOf(w.type) > -1) return;
+  const key = w.options.name;
+  if (map[key]) return;
+  map[key] = { widget: w, refKey: key, isContainer: true };
+  baseline[key] = { visible: !w.options.hidden };
+}
+
+// 整个表单范围：字段 + 命名容器(跳过弹窗/抽屉内部)
+export function buildFormTargetMap(widgetList) {
+  const map = {};
+  const baseline = {};
+  traverseFieldWidgets(widgetList || [], (w) => addFieldTo(map, baseline, w));
+  traverseContainerWidgets(
+    widgetList || [],
+    (w) => addContainerTo(map, baseline, w),
+    true
+  );
+  return { map, baseline };
+}
+
+// 单个容器范围：容器内字段 + 命名子容器
+export function buildContainerTargetMap(container) {
+  const map = {};
+  const baseline = {};
+  traverseFieldWidgetsOfContainer(container, (w) => addFieldTo(map, baseline, w));
+  collectNamedContainersInContainer(container).forEach((w) =>
+    addContainerTo(map, baseline, w)
+  );
+  return { map, baseline };
+}
+
+// 递归收集指定容器内「命名的子容器」
+export function collectNamedContainersInContainer(root) {
+  const out = [];
+  const walk = (w, isRoot) => {
+    if (!w || w.category !== "container") return;
+    if (
+      !isRoot
+      && w.options
+      && w.options.name
+      && EXCLUDED_CONTAINER_TYPES.indexOf(w.type) === -1
+    ) {
+      out.push(w);
+    }
+    if (Array.isArray(w.rows)) {
+      w.rows.forEach((row) => {
+        (row.cols || []).forEach((cell) => walk(cell, false));
+      });
+    }
+    ["cols", "tabs", "widgetList", "panes", "buttonWidgetList"].forEach((k) => {
+      if (Array.isArray(w[k])) w[k].forEach((c) => walk(c, false));
+    });
+  };
+  walk(root, true);
+  return out;
+}
+
+/* ------------------- 层级下拉选项(供设计器) ------------------- */
+// 构建带层级的目标候选(字段 + 容器)，按表单树 DFS 顺序输出，附带 depth。
+// 布局内格(grid-col/table-cell 等)不单独成节点，仅作为透明层向下展开。
+function makeTreeBuilder() {
+  const nodes = [];
+  const visitList = (list, depth) => {
+    (list || []).forEach((w) => visit(w, depth));
+  };
+  const visitChildren = (w, depth) => {
+    if (Array.isArray(w.rows)) {
+      w.rows.forEach((row) => visitList((row && row.cols) || [], depth));
+    }
+    ["cols", "tabs", "widgetList", "panes", "buttonWidgetList"].forEach((k) => {
+      if (Array.isArray(w[k])) visitList(w[k], depth);
+    });
+  };
+  const visit = (w, depth) => {
+    if (!w) return;
+    if (w.category === "container") {
+      // 布局内格：透明展开，深度不变
+      if (EXCLUDED_CONTAINER_TYPES.indexOf(w.type) > -1) {
+        visitChildren(w, depth);
+        return;
+      }
+      const name = w.options && w.options.name;
+      nodes.push({
+        value: name || "__c_" + w.id,
+        baseLabel: (w.options && (w.options.label || name)) || w.type,
+        depth,
+        isContainer: true,
+        hasName: !!name,
+        type: w.type,
+      });
+      visitChildren(w, depth + 1);
+    } else if (w.formItemFlag) {
+      const key = getModelKey(w);
+      if (!key) return;
+      nodes.push({
+        value: key,
+        baseLabel: (w.options.label || key) + " (" + key + ")",
+        depth,
+        isContainer: false,
+        hasName: true,
+        type: w.type,
+      });
+    }
+  };
+  return { nodes, visitList, visitChildren };
+}
+
+// 整个表单范围的层级候选
+export function buildWidgetTreeOptions(rootList) {
+  const b = makeTreeBuilder();
+  b.visitList(rootList || [], 0);
+  return b.nodes;
+}
+
+// 单个容器范围的层级候选(不含容器自身，从其子级开始)
+export function buildContainerTreeOptions(container) {
+  const b = makeTreeBuilder();
+  if (container) b.visitChildren(container, 0);
+  return b.nodes;
+}
+
+/* ------------------- 规则计算 ------------------- */
+export function computeLocalStates(rules, baseline, formModel) {
+  const list = rules || [];
+  const states = {};
+  const ensure = (key) => {
+    if (!states[key]) {
+      const base = baseline[key] || { visible: true };
+      states[key] = Object.assign({}, base);
+    }
+    return states[key];
+  };
+  // 先把所有规则涉及的目标置为基线，未命中时即还原
+  list.forEach((rule) => {
+    (rule.targets || []).forEach((t) => t.field && ensure(t.field));
+  });
+  list.forEach((rule) => {
+    if (!evalRule(rule, formModel)) return;
+    (rule.targets || []).forEach((t) => {
+      if (!t.field) return;
+      const s = ensure(t.field);
+      if (t.visible !== undefined && t.visible !== null) s.visible = !!t.visible;
+      if (t.required !== undefined && t.required !== null) {
+        s.required = !!t.required;
+      }
+      if (t.readonly !== undefined && t.readonly !== null) {
+        s.readonly = !!t.readonly;
+      }
+      if (t.disabled !== undefined && t.disabled !== null) {
+        s.disabled = !!t.disabled;
+      }
+    });
+  });
+  return states;
+}
+
+export function evalRule(rule, model) {
+  const conds = (rule && rule.conditions) || [];
+  if (!conds.length) return true;
+  if (rule.logic === "or") {
+    return conds.some((c) => evalCondition(c, model));
+  }
+  return conds.every((c) => evalCondition(c, model));
+}
+
+export function evalCondition(cond, model) {
+  if (!cond || !cond.field) return false;
+  const actual = model ? model[cond.field] : undefined;
+  const expected = cond.value;
+  const isEmpty = (v) =>
+    v === undefined
+    || v === null
+    || v === ""
+    || (Array.isArray(v) && v.length === 0);
+  const toList = (v) =>
+    String(v == null ? "" : v)
+      .split(",")
+      .map((s) => s.trim())
+      .filter((s) => s !== "");
+  switch (cond.operator) {
+    case "eq":
+      return String(actual) === String(expected);
+    case "ne":
+      return String(actual) !== String(expected);
+    case "gt":
+      return Number(actual) > Number(expected);
+    case "lt":
+      return Number(actual) < Number(expected);
+    case "ge":
+      return Number(actual) >= Number(expected);
+    case "le":
+      return Number(actual) <= Number(expected);
+    case "in":
+      return toList(expected).includes(String(actual));
+    case "nin":
+      return !toList(expected).includes(String(actual));
+    case "includes":
+      return Array.isArray(actual)
+        ? actual.map(String).includes(String(expected))
+        : String(actual == null ? "" : actual).indexOf(String(expected)) > -1;
+    case "empty":
+      return isEmpty(actual);
+    case "notEmpty":
+      return !isEmpty(actual);
+    default:
+      return false;
+  }
+}
+
+/* ------------------- 状态落地 ------------------- */
+// entry: { widget, refKey, isContainer }；getWidgetRef: (name) => 运行时组件ref
+export function applyTargetState(entry, state, getWidgetRef) {
+  if (!entry || !state) return;
+  const widget = entry.widget;
+  const isContainer = entry.isContainer;
+  const ref = getWidgetRef ? getWidgetRef(entry.refKey) : null;
+  const hasVisible = state.visible !== undefined && state.visible !== null;
+  if (ref) {
+    if (hasVisible && ref.setHidden) ref.setHidden(!state.visible);
+    if (isContainer) return;
+    if (state.required !== undefined && state.required !== null && ref.setRequired) {
+      ref.setRequired(!!state.required);
+    }
+    if (state.readonly !== undefined && state.readonly !== null && ref.setReadonly) {
+      ref.setReadonly(!!state.readonly);
+    }
+    if (state.disabled !== undefined && state.disabled !== null && ref.setDisabled) {
+      ref.setDisabled(!!state.disabled);
+    }
+    if (state.options !== undefined && state.options !== null && ref.setOptions) {
+      ref.setOptions(state.options);
+    }
+    if (state.value !== undefined && ref.setValue) {
+      ref.setValue(state.value);
+    }
+  } else {
+    if (hasVisible) widget.options.hidden = !state.visible;
+    if (isContainer) return;
+    if (state.required !== undefined && state.required !== null) {
+      widget.options.required = !!state.required;
+    }
+    if (state.readonly !== undefined && state.readonly !== null) {
+      widget.options.readonly = !!state.readonly;
+    }
+    if (state.disabled !== undefined && state.disabled !== null) {
+      widget.options.disabled = !!state.disabled;
+    }
+  }
+}

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;