cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

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

@@ -1,129 +1,177 @@
-<template>
-  <container-item-wrapper
-    :widget="widget"
-    :class="widget.options.isFullscreen ? 'full-height' : ''"
-  >
-    <div :key="widget.id" class="tab-container mHeight" v-show="!widget.options.hidden">
-      <!-- 高度默认 auto(跟随内容)：没在属性面板配 height 就不设。
-           原来兜底成固定 300px，内容多了内部滚动、少了留白，装详情内容模块时尤其别扭 -->
-      <el-tabs
-        v-model="activeTabName"
-        :type="widget.displayType"
-        :ref="widget.id"
-        :class="[customClass, widget.options.tabClass]"
-        :style="{
-          height: widget.options.isFullscreen ? '' : widget.options.height,
-        }"
-      >
-        <el-tab-pane
-          v-for="tab in visibleTabs"
-          :key="tab.options.name"
-          :label="getI18nLabel(tab.options.label)"
-          :disabled="tab.options.disabled"
-          :name="tab.options.name"
-        >
-          <template v-for="(subWidget, swIdx) in tab.widgetList">
-            <template v-if="'container' === subWidget.category">
-              <component
-                :is="subWidget.type + '-item'"
-                :widget="subWidget"
-                :key="subWidget.id || swIdx"
-                :parent-list="tab.widgetList"
-                :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" />
-                </template>
-              </component>
-            </template>
-            <template v-else>
-              <component
-                :is="subWidget.type + '-widget'"
-                :field="subWidget"
-                :key="subWidget.id || swIdx"
-                :parent-list="tab.widgetList"
-                :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" />
-                </template>
-              </component>
-            </template>
-          </template>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-  </container-item-wrapper>
-</template>
-
-<script>
-import emitter from "../../../../components/xform/utils/emitter";
-import i18n from "../../../../components/xform/utils/i18n";
-import refMixin from "../../../../components/xform/form-render/refMixin";
-import ContainerItemWrapper from "./container-item-wrapper";
-import containerItemMixin from "./containerItemMixin";
-import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
-
-export default {
-  name: "tab-item",
-  componentName: "ContainerItem",
-  mixins: [emitter, i18n, refMixin, containerItemMixin],
-  components: {
-    ContainerItemWrapper,
-    ...FieldComponents,
-  },
-  props: {
-    widget: Object,
-  },
-  inject: ["refList", "sfRefList", "globalModel"],
-  data() {
-    return {
-      activeTabName: "",
-    };
-  },
-  computed: {
-    visibleTabs() {
-      return this.widget.tabs.filter((tp) => {
-        return !tp.options.hidden;
-      });
-    },
-  },
-  created() {
-    this.initRefList();
-  },
-  mounted() {
-    this.initActiveTab();
-  },
-  beforeDestroy() {
-    this.unregisterFromRefList();
-  },
-  methods: {
-    initActiveTab() {
-      if (this.widget.type === "tab" && this.widget.tabs.length > 0) {
-        let activePanes = this.widget.tabs.filter((tp) => {
-          return tp.options.active === true;
-        });
-        if (activePanes.length > 0) {
-          this.activeTabName = activePanes[0].options.name;
-        } else {
-          this.activeTabName = this.widget.tabs[0].options.name;
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-  /* 内容区高度跟随内容。原来写死 min-height:312px，会把上面 height:auto 的效果整个抵消掉
-     （无论内容多少都至少 312px）。这里只留一个小兜底，保证空标签页不塌成一条线。 */
-  ::v-deep .mHeight .el-tabs .el-tabs__content{min-height:60px}
-</style>
+<template>
+  <container-item-wrapper
+    :widget="widget"
+    :class="widget.options.isFullscreen ? 'full-height' : ''"
+  >
+    <div :key="widget.id" class="tab-container mHeight" v-show="!widget.options.hidden">
+      <!-- 高度默认 auto(跟随内容)：没在属性面板配 height 就不设。
+           原来兜底成固定 300px，内容多了内部滚动、少了留白，装详情内容模块时尤其别扭 -->
+      <el-tabs
+        v-model="activeTabName"
+        :type="widget.displayType"
+        :ref="widget.id"
+        :class="[customClass, widget.options.tabClass]"
+        :style="{
+          height: widget.options.isFullscreen ? '' : widget.options.height,
+        }"
+        @tab-click="handleTabClick"
+      >
+        <el-tab-pane
+          v-for="tab in visibleTabs"
+          :key="tab.options.name"
+          :label="getI18nLabel(tab.options.label)"
+          :disabled="tab.options.disabled"
+          :name="tab.options.name"
+          :lazy="lazyRender"
+        >
+          <template v-for="(subWidget, swIdx) in tab.widgetList">
+            <template v-if="'container' === subWidget.category">
+              <component
+                :is="subWidget.type + '-item'"
+                :widget="subWidget"
+                :key="subWidget.id || swIdx"
+                :parent-list="tab.widgetList"
+                :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" />
+                </template>
+              </component>
+            </template>
+            <template v-else>
+              <component
+                :is="subWidget.type + '-widget'"
+                :field="subWidget"
+                :key="subWidget.id || swIdx"
+                :parent-list="tab.widgetList"
+                :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" />
+                </template>
+              </component>
+            </template>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </container-item-wrapper>
+</template>
+
+<script>
+import emitter from "../../../../components/xform/utils/emitter";
+import i18n from "../../../../components/xform/utils/i18n";
+import refMixin from "../../../../components/xform/form-render/refMixin";
+import ContainerItemWrapper from "./container-item-wrapper";
+import containerItemMixin from "./containerItemMixin";
+import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
+
+export default {
+  name: "tab-item",
+  componentName: "ContainerItem",
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  components: {
+    ContainerItemWrapper,
+    ...FieldComponents,
+  },
+  props: {
+    widget: Object,
+  },
+  inject: ["refList", "sfRefList", "globalModel"],
+  data() {
+    return {
+      activeTabName: "",
+    };
+  },
+  computed: {
+    visibleTabs() {
+      return this.widget.tabs.filter((tp) => {
+        return !tp.options.hidden;
+      });
+    },
+    /* 懒渲染(P0-1,内存优化)：开启后每个页签内容首次激活才挂载、激活后保留(element 的
+       el-tab-pane lazy 语义，即"保守版")，未激活页签不建组件、不发数据请求。
+       默认关闭——校验(el-form 只认已挂载的 form-item)和跨页签 getWidgetRef 在未激活页签
+       上都会失效，必须逐模板审计后由设计器显式开启(见 docs/2026-09 低配电脑渲染进程崩溃内存优化方案.md)。 */
+    lazyRender() {
+      return this.widget.options.lazyRender === true;
+    },
+  },
+  watch: {
+    visibleTabs(tabs) {
+      const formRef = this.getFormRef();
+      if (
+        formRef
+        && formRef.isFieldControlEnabled()
+        && !tabs.some(tab => tab.options.name === this.activeTabName)
+      ) {
+        this.activeTabName = tabs.length ? tabs[0].options.name : "";
+      }
+    },
+    /* onTabChange：任何激活页签变化(用户点击 + 脚本 activeTab()/隐藏重置等程序化切换)。
+       initActiveTab 在 mounted 的首次赋值不算切换(oldName 为空)，避免打开详情即触发联动。 */
+    activeTabName(name, oldName) {
+      if (!oldName) return;
+      if (this.widget.options.onTabChange) {
+        new Function("name", "oldName", this.widget.options.onTabChange).call(
+          this,
+          name,
+          oldName
+        );
+      }
+    },
+  },
+  created() {
+    this.initRefList();
+    this.handleOnCreated();
+  },
+  mounted() {
+    // 先定初始激活页签再跑 onMounted：懒渲染下脚本里读 activeTabName 时已是最终值
+    this.initActiveTab();
+    this.handleOnMounted();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    initActiveTab() {
+      if (this.widget.type === "tab" && this.widget.tabs.length > 0) {
+        let activePanes = this.widget.tabs.filter((tp) => {
+          return tp.options.active === true;
+        });
+        if (activePanes.length > 0) {
+          this.activeTabName = activePanes[0].options.name;
+        } else {
+          this.activeTabName = this.widget.tabs[0].options.name;
+        }
+      }
+    },
+    /* onTabClick：仅用户点击页签头(element 原生事件，disabled 页签不会触发)。
+       实参对齐编辑器声明；此刻新页签内容(懒渲染)尚未挂载，取新页签内部组件 ref 会拿不到。 */
+    handleTabClick(tab) {
+      if (this.widget.options.onTabClick) {
+        new Function("name", "index", "label", this.widget.options.onTabClick).call(
+          this,
+          tab.name,
+          tab.index != null ? Number(tab.index) : null,
+          tab.label
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  /* 内容区高度跟随内容。原来写死 min-height:312px，会把上面 height:auto 的效果整个抵消掉
+     （无论内容多少都至少 312px）。这里只留一个小兜底，保证空标签页不塌成一条线。 */
+  ::v-deep .mHeight .el-tabs .el-tabs__content{min-height:60px}
+</style>

package/src/components/xform/form-render/fieldControlEngine.js

@@ -0,0 +1,218 @@
+import isEqual from "lodash/isEqual";
+
+export const STATE_KEYS = ["visible", "required", "readonly", "disabled"];
+const TRANSPARENT = ["grid-col", "table-cell", "h5-table-cell"];
+const ISOLATED = ["vf-dialog", "vf-drawer"];
+const ROW_CONTAINERS = ["data-table", "sub-form", "grid-sub-form", "list-h5"];
+
+export function readFieldState(widget) {
+  const options = widget.options || {};
+  const state = { visible: !options.hidden };
+  if (widget.formItemFlag) {
+    state.required = !!options.required;
+    state.readonly = !!options.readonly;
+    state.disabled = !!options.disabled;
+  }
+  return state;
+}
+
+export function writeStateOptions(options, state) {
+  STATE_KEYS.forEach(key => {
+    if (typeof state[key] === "boolean") {
+      options[key === "visible" ? "hidden" : key] = key === "visible" ? !state[key] : state[key];
+    }
+  });
+}
+
+// 设计器和运行时共用同一范围；明细行由独立作用域处理，不混入主表 key。
+export function collectFieldControlTargets(list) {
+  const entries = [];
+  const keys = new Set();
+  const walk = (widgets, parent, depth) => {
+    (widgets || []).forEach(widget => {
+      if (!widget || !widget.options || ISOLATED.includes(widget.type)) return;
+      const container = widget.category === "container";
+      let entry = parent;
+      if ((container && !TRANSPARENT.includes(widget.type)) || (!container && widget.formItemFlag)) {
+        const key = container ? widget.options.name
+          : ((widget.options.keyNameEnabled && widget.options.keyName) || widget.options.name);
+        if (key) {
+          if (keys.has(key)) throw new Error("动态规则目标名称重复：" + key);
+          keys.add(key);
+          entry = { key, widget, parent, depth, isContainer: container, refKey: widget.options.name };
+          entries.push(entry);
+        }
+      }
+      if (!container || ROW_CONTAINERS.includes(widget.type)) return;
+      const nextDepth = entry === parent ? depth : depth + 1;
+      const children = [];
+      (widget.rows || []).forEach(row => children.push(...(row.cols || [])));
+      ["cols", "tabs", "panes", "widgetList", "buttonWidgetList"].forEach(key => {
+        if (Array.isArray(widget[key])) children.push(...widget[key]);
+      });
+      walk(children, entry, nextDepth);
+    });
+  };
+  walk(list, null, 0);
+  return entries;
+}
+
+export function fieldControlTreeOptions(list) {
+  return collectFieldControlTargets(list).map(entry => ({
+    value: entry.key,
+    baseLabel: entry.widget.options.label || entry.key,
+    isContainer: entry.isContainer,
+    hasName: true,
+    type: entry.widget.type,
+    depth: entry.depth,
+  }));
+}
+
+export function normalizeState(state, label = "") {
+  if (!state || typeof state !== "object" || Array.isArray(state)) {
+    throw new Error("动态规则状态格式错误：" + label);
+  }
+  const result = {};
+  STATE_KEYS.forEach(key => {
+    const value = state[key];
+    if (value === undefined || value === null || value === "") return;
+    if (typeof value !== "boolean") throw new Error("动态规则状态必须为布尔值：" + label + "." + key);
+    result[key] = value;
+  });
+  return result;
+}
+
+export function normalizeLocalRules(rules) {
+  if (!Array.isArray(rules)) throw new Error("动态规则必须为数组");
+  return rules.map(rule => {
+    if (!rule || !Array.isArray(rule.conditions) || !Array.isArray(rule.targets)) {
+      throw new Error("动态规则缺少条件或目标");
+    }
+    if (rule.logic && !["and", "or"].includes(rule.logic)) throw new Error("动态规则条件逻辑无效");
+    return {
+      ...rule,
+      targets: rule.targets.map(target => {
+        if (!target.field) throw new Error("请选择动态规则目标");
+        return { field: target.field, ...normalizeState(target, target.field) };
+      }),
+    };
+  });
+}
+
+export function commitLocalFieldRules(rules, widgetList) {
+  const list = Array.isArray(rules) ? rules : [];
+  if (!list.length) return [];
+  const options = fieldControlTreeOptions(widgetList || []);
+  const targets = new Set(options.map(item => item.value));
+  const fields = new Set(options.filter(item => !item.isContainer).map(item => item.value));
+  const normalized = normalizeLocalRules(list);
+  normalized.forEach(rule => {
+    rule.conditions.forEach(condition => {
+      if (!fields.has(condition.field)) throw new Error("条件字段不存在或不支持：" + condition.field);
+    });
+    rule.targets.forEach(target => {
+      if (!targets.has(target.field)) throw new Error("目标不存在或不支持：" + target.field);
+    });
+  });
+  return normalized;
+}
+
+export function evaluateCondition(condition, model) {
+  if (!condition || !condition.field) throw new Error("请选择动态规则条件字段");
+  const actual = model[condition.field];
+  const expected = condition.value;
+  const empty = value => value === undefined || value === null || value === ""
+    || (Array.isArray(value) && value.length === 0);
+  const operators = {
+    eq: () => String(actual) === String(expected),
+    ne: () => String(actual) !== String(expected),
+    empty: () => empty(actual),
+    notEmpty: () => !empty(actual),
+    in: () => String(expected == null ? "" : expected).split(",").map(x => x.trim()).filter(Boolean).includes(String(actual)),
+    nin: () => !operators.in(),
+    includes: () => Array.isArray(actual) ? actual.map(String).includes(String(expected))
+      : String(actual == null ? "" : actual).includes(String(expected)),
+  };
+  if (["gt", "ge", "lt", "le"].includes(condition.operator)) {
+    if (empty(actual) || empty(expected) || typeof actual === "boolean" || Array.isArray(actual)) return false;
+    const a = Number(actual);
+    const b = Number(expected);
+    if (!Number.isFinite(a) || !Number.isFinite(b)) return false;
+    return { gt: a > b, ge: a >= b, lt: a < b, le: a <= b }[condition.operator];
+  }
+  if (!operators[condition.operator]) throw new Error("动态规则操作符无效：" + condition.operator);
+  return operators[condition.operator]();
+}
+
+export function computeFieldStates(rules, baseline, model) {
+  const states = Object.create(null);
+  Object.keys(baseline).forEach(key => { states[key] = { ...baseline[key] }; });
+  normalizeLocalRules(rules).forEach(rule => {
+    rule.targets.forEach(target => {
+      if (!Object.prototype.hasOwnProperty.call(states, target.field)) {
+        throw new Error("动态规则目标不存在或不支持：" + target.field);
+      }
+    });
+    // 先检查所有条件，避免短路计算掩盖配置错误。
+    const matches = rule.conditions.map(condition => evaluateCondition(condition, model));
+    const match = !matches.length || (rule.logic === "or" ? matches.some(Boolean) : matches.every(Boolean));
+    if (match) rule.targets.forEach(target => Object.assign(states[target.field], normalizeState(target)));
+  });
+  return states;
+}
+
+export function resolveScriptStates(fieldStates, baseline, allowValue) {
+  if (!fieldStates || typeof fieldStates !== "object" || Array.isArray(fieldStates)) {
+    throw new Error("后台动态规则缺少有效的 fieldStates");
+  }
+  const states = Object.create(null);
+  const effects = Object.create(null);
+  Object.keys(baseline).forEach(key => { states[key] = { ...baseline[key] }; });
+  Object.keys(fieldStates).forEach(key => {
+    if (!Object.prototype.hasOwnProperty.call(states, key)) throw new Error("动态规则目标不存在或不支持：" + key);
+    const state = fieldStates[key];
+    Object.assign(states[key], normalizeState(state, key));
+    if (Object.prototype.hasOwnProperty.call(state, "value")) {
+      if (!allowValue) throw new Error("动态规则返回了 value，请先明确启用自动赋值：" + key);
+      effects[key] = { value: state.value };
+    }
+    if (state.options !== undefined) {
+      if (!Array.isArray(state.options)) throw new Error("动态选项必须为数组：" + key);
+      effects[key] = { ...effects[key], options: state.options };
+    }
+  });
+  return { states, effects };
+}
+
+export function isEntryVisible(entry) {
+  for (let current = entry; current; current = current.parent) {
+    if (current.widget.options.hidden) return false;
+  }
+  return true;
+}
+
+export function applyFieldState(entry, state, getRef) {
+  const widget = entry.widget;
+  const ref = getRef(entry.refKey);
+  const target = ref && (ref.field === widget || ref.widget === widget) ? ref : null;
+  const setters = { visible: "setHidden", required: "setRequired", readonly: "setReadonly", disabled: "setDisabled" };
+  STATE_KEYS.forEach(key => {
+    if (typeof state[key] !== "boolean" || (entry.isContainer && key !== "visible")) return;
+    const option = key === "visible" ? "hidden" : key;
+    const value = key === "visible" ? !state[key] : state[key];
+    if (widget.options[option] !== value || (target && ["hidden", "disabled", "readonly"].includes(option) && target[option] !== value)) {
+      if (target && typeof target[setters[key]] === "function") target[setters[key]](value);
+      else widget.options[option] = value;
+    }
+  });
+}
+
+export function sameValue(a, b) {
+  return isEqual(a, b);
+}
+
+export function resolveRunMode(config, hasWf) {
+  const mode = config.dynamicFieldRunMode || "auto";
+  if (!["auto", "initialOnly", "continuous"].includes(mode)) throw new Error("动态规则执行方式无效");
+  return mode === "auto" ? (hasWf ? "initialOnly" : "continuous") : mode;
+}