cloud-web-corejs 1.1.0-dev.18 → 1.1.0-dev.20

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

@@ -108,6 +108,7 @@ const dynamicFieldMixin = {
         }
         return Promise.resolve(true);
       } catch (e) {
+        if (formRef.isFieldControlV2 && formRef.isFieldControlV2()) return Promise.reject(e);
         return Promise.resolve(false);
       }
     },
@@ -116,6 +117,12 @@ const dynamicFieldMixin = {
       if (this.designState || !this.widget) return;
       if (!this.supportsRowLayout()) return;
       if (this.getDynamicSchemaSourceType() === "none") return;
+      const formRef = this.getFormRef();
+      if (formRef && formRef.isFieldControlV2 && formRef.isFieldControlV2()) {
+        const task = this.$nextTick().then(() => this.resolveShouldInitDynamicSchema())
+          .then(shouldInit => shouldInit ? this.loadControlledDynamicSchema() : undefined);
+        return formRef.trackFieldControlSchema(task, () => this.loadDynamicSchema(), this);
+      }
       this.$nextTick(() => {
         this.resolveShouldInitDynamicSchema().then((shouldInit) => {
           if (shouldInit) {
@@ -125,7 +132,54 @@ const dynamicFieldMixin = {
       });
     },
 
+    loadControlledDynamicSchema() {
+      const formRef = this.getFormRef();
+      const runtime = formRef.getFieldControlRuntime();
+      const sequence = (this._dynamicSchemaRun || 0) + 1;
+      this._dynamicSchemaRun = sequence;
+      const current = () => this._dynamicSchemaRun === sequence &&
+        formRef.getFieldControlRuntime() === runtime && !runtime.destroyed && !this._isDestroyed;
+      const build = result => {
+        if (current()) this.buildDynamicRows(result);
+        return this.$nextTick();
+      };
+      const options = this.widget.options;
+      if (this.getDynamicSchemaSourceType() === "script") {
+        const code = getDynamicSchemaOption(options, "frontendScript");
+        if (!code) return Promise.reject(new Error("请配置动态字段脚本"));
+        return Promise.resolve().then(() => this.handleCustomEvent(code))
+          .then(result => build(this.normalizeSchemaScriptResult(result)));
+      }
+      const scriptCode = getDynamicSchemaOption(options, "scriptCode");
+      if (!scriptCode) return Promise.reject(new Error("请配置动态字段接口编码"));
+      return new Promise((resolve, reject) => {
+        try {
+          const task = this.formHttp({
+            scriptCode,
+            isLoading: false,
+            data: buildDynamicSchemaRequestData(this.formModel,
+              getDynamicSchemaOption(options, "scriptParam"), this.handleCustomEvent.bind(this)),
+            success: response => {
+              if (!current()) { resolve(); return; }
+              try { Promise.resolve(build(this.resolveSchemaDefs(response))).then(resolve, reject); }
+              catch (error) { reject(error); }
+            },
+            fail: () => current() ? reject(new Error("动态字段加载失败，请重试")) : resolve(),
+            error: error => current() ? reject(error) : resolve(),
+          });
+          if (task && task.catch) task.catch(reject);
+        } catch (error) { reject(error); }
+      });
+    },
+
     loadDynamicSchema() {
+      const formRef = this.getFormRef && this.getFormRef();
+      if (!this.designState && this.supportsRowLayout() &&
+          this.getDynamicSchemaSourceType() !== "none" &&
+          formRef && formRef.isFieldControlV2 && formRef.isFieldControlV2()) {
+        return formRef.trackFieldControlSchema(this.loadControlledDynamicSchema(),
+          () => this.loadDynamicSchema(), this);
+      }
       if (this.designState || !this.supportsRowLayout()) {
         return Promise.resolve();
       }

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

@@ -1,129 +1,138 @@
-<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,
+        }"
+      >
+        <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;
+      });
+    },
+  },
+  watch: {
+    visibleTabs(tabs) {
+      const formRef = this.getFormRef();
+      if (formRef && formRef.isFieldControlV2 && formRef.isFieldControlV2() &&
+          !tabs.some(tab => tab.options.name === this.activeTabName)) {
+        this.activeTabName = tabs.length ? tabs[0].options.name : "";
+      }
+    },
+  },
+  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>

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

@@ -0,0 +1,200 @@
+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 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;
+}