cloud-web-corejs 1.0.54-dev.685 → 1.0.54-dev.687

package/src/components/xform/form-designer/setting-panel/property-editor/container-table/table-dynamicField-editor.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="table-dynamic-field-editor">
+    <!-- 后台字段(动态生成)：字段定义本身由后台查询下发 -->
+    <el-divider class="custom-divider">后台字段（动态生成）</el-divider>
+
+    <el-form-item label="启用后台字段">
+      <el-switch v-model="optionModel.dynamicSchemaEnabled"></el-switch>
+      <div class="tip-text">字段由后台查询下发，无需在设计器预先配置</div>
+    </el-form-item>
+
+    <template v-if="optionModel.dynamicSchemaEnabled">
+      <el-form-item label="脚本编码">
+        <el-input
+          v-model="optionModel.dynamicSchemaScriptCode"
+          size="mini"
+          placeholder="scriptCode 或 formCode/scriptCode"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="额外参数">
+        <a
+          href="javascript:void(0);"
+          class="a-link link-oneLind"
+          @click="editSchemaScriptParam"
+        >
+          <span>{{ optionModel.dynamicSchemaScriptParam }}</span>
+          <i class="el-icon-edit"></i>
+        </a>
+        <div class="tip-text">
+          格式： return { bizType:
+          formModel.type }
+        </div>
+      </el-form-item>
+      <el-form-item label="转换脚本">
+        <a
+          href="javascript:void(0);"
+          class="a-link link-oneLind"
+          @click="editSchemaConvert"
+        >
+          <span>{{ optionModel.dynamicSchemaConvert }}</span>
+          <i class="el-icon-edit"></i>
+        </a>
+        <div class="tip-text">
+          可选。入参 res，返回标准字段定义数组；不填时默认取 res.objx（数组）或
+          res.objx.fields / res.objx.columns
+        </div>
+      </el-form-item>
+      <el-form-item label="生成模式">
+        <el-radio-group v-model="optionModel.dynamicSchemaMode" size="mini">
+          <el-radio-button label="append">追加</el-radio-button>
+          <el-radio-button label="replace">替换</el-radio-button>
+          <el-radio-button label="anchor">锚点插入</el-radio-button>
+        </el-radio-group>
+        <div class="tip-text">
+          追加=保留已配字段并在其后生成；替换=清空已配行后全部由后台生成；锚点插入=插到设计期某占位行位置
+        </div>
+      </el-form-item>
+
+      <template v-if="optionModel.dynamicSchemaMode === 'anchor'">
+        <el-form-item label="占位锚点行">
+          <el-select
+            v-model="optionModel.dynamicSchemaAnchorRowId"
+            size="mini"
+            style="width: 100%"
+            placeholder="选择设计期的占位行"
+          >
+            <el-option
+              v-for="r in rowOptions"
+              :key="r.value"
+              :label="r.label"
+              :value="r.value"
+            ></el-option>
+          </el-select>
+          <div class="tip-text">建议预留一个空行作为占位锚点</div>
+        </el-form-item>
+        <el-form-item label="插入位置">
+          <el-radio-group
+            v-model="optionModel.dynamicSchemaAnchorPosition"
+            size="mini"
+          >
+            <el-radio-button label="replace">替换占位行</el-radio-button>
+            <el-radio-button label="before">之前</el-radio-button>
+            <el-radio-button label="after">之后</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="继承行布局">
+          <el-switch
+            v-model="optionModel.dynamicSchemaInheritLayout"
+          ></el-switch>
+          <div class="tip-text">
+            开启后生成行沿用占位行的单元格数量/宽度/跨列，否则按"每行列数"平铺
+          </div>
+        </el-form-item>
+      </template>
+
+      <el-form-item
+        label="每行列数"
+        v-if="
+          optionModel.dynamicSchemaMode !== 'anchor' ||
+          !optionModel.dynamicSchemaInheritLayout
+        "
+      >
+        <el-input-number
+          v-model="optionModel.dynamicSchemaColumns"
+          :min="1"
+          :max="12"
+          size="mini"
+        ></el-input-number>
+      </el-form-item>
+    </template>
+
+    <div class="tip-text scope-tip">
+      字段「显隐/必填/只读/禁用/取值」等动态规则请到「表单设置 -
+      动态字段规则」统一配置
+    </div>
+
+    <el-dialog
+      title="额外参数"
+      :visible.sync="scriptParamDialogVisible"
+      v-if="scriptParamDialogVisible"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+    >
+      <div class="cont">
+        <code-editor
+          :mode="'javascript'"
+          :readonly="false"
+          v-model="editingScriptParam"
+          ref="schemaScriptParamEditor"
+        ></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          @click="scriptParamDialogVisible = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="saveSchemaScriptParam"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="转换脚本"
+      :visible.sync="convertDialogVisible"
+      v-if="convertDialogVisible"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+    >
+      <div class="cont">
+        <code-editor
+          :mode="'javascript'"
+          :readonly="false"
+          v-model="editingConvert"
+          ref="schemaConvertEditor"
+        ></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          @click="convertDialogVisible = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="saveSchemaConvert"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+
+export default {
+  name: "table-dynamicField-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      scriptParamDialogVisible: false,
+      convertDialogVisible: false,
+      editingScriptParam: "",
+      editingConvert: "",
+    };
+  },
+  computed: {
+    rowOptions() {
+      const rows = (this.selectedWidget && this.selectedWidget.rows) || [];
+      return rows.map((row, idx) => {
+        const fields = [];
+        (row.cols || []).forEach((cell) => {
+          this.collectFields(cell.widgetList || [], fields);
+        });
+        const names = fields
+          .map((w) => w.options.label || w.options.name)
+          .filter((n) => !!n);
+        const preview = names.length ? names.join("、") : "空行";
+        return { label: "第" + (idx + 1) + "行：" + preview, value: row.id };
+      });
+    },
+  },
+  methods: {
+    editSchemaScriptParam() {
+      this.editingScriptParam = this.optionModel.dynamicSchemaScriptParam || "";
+      this.scriptParamDialogVisible = true;
+    },
+    saveSchemaScriptParam() {
+      if (!this.validateEditor("schemaScriptParamEditor")) return;
+      this.optionModel.dynamicSchemaScriptParam = this.editingScriptParam;
+      this.scriptParamDialogVisible = false;
+    },
+    editSchemaConvert() {
+      this.editingConvert = this.optionModel.dynamicSchemaConvert || "";
+      this.convertDialogVisible = true;
+    },
+    saveSchemaConvert() {
+      if (!this.validateEditor("schemaConvertEditor")) return;
+      this.optionModel.dynamicSchemaConvert = this.editingConvert;
+      this.convertDialogVisible = false;
+    },
+    validateEditor(refName) {
+      const editor = this.$refs[refName];
+      if (!editor) return true;
+      const codeHints = editor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (codeHints && codeHints.length > 0) {
+        codeHints.forEach((chItem) => {
+          if (chItem.type === "error") {
+            syntaxErrorFlag = true;
+          }
+        });
+        if (syntaxErrorFlag) {
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
+          return false;
+        }
+      }
+      return true;
+    },
+    collectFields(list, out) {
+      (list || []).forEach((w) => {
+        if (!w) return;
+        if (w.category === "container") {
+          if (Array.isArray(w.rows)) {
+            w.rows.forEach((row) =>
+              this.collectFields((row && row.cols) || [], out)
+            );
+          }
+          ["cols", "tabs", "widgetList", "panes", "buttonWidgetList"].forEach(
+            (k) => {
+              if (Array.isArray(w[k])) this.collectFields(w[k], out);
+            }
+          );
+        } else if (w.formItemFlag) {
+          out.push(w);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tip-text {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+  margin-top: 2px;
+}
+
+.scope-tip {
+  margin-top: 10px;
+}
+</style>

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -107,6 +107,7 @@ const COMMON_PROPERTIES = {
   detailPaneContainer: "detail-pane-editor",
   vabSearchField: "vabSearchField-editor",
   fullWidth: "table-fullWidth-editor",
+  dynamicSchemaEnabled: "table-dynamicField-editor",
   dataTable: "data-table-editor",
   accessUrl: "accessUrl-editor",
   formulaEnabled: "formulaEnabled-editor",

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -31,6 +31,24 @@ export const containers = [
       customClass: "",
       styleTableClass: "",
       fullWidth: false,
+      // 后台字段定义模式：字段本身由后台查询下发(适用于字段不固定、无法在设计器预配的场景)
+      dynamicSchemaEnabled: false,
+      // 后台脚本编码(支持 "formCode/scriptCode")，返回标准字段定义数组
+      dynamicSchemaScriptCode: null,
+      // 额外请求参数(JSON 字符串)
+      dynamicSchemaScriptParam: null,
+      // 转换脚本：将后台响应转成标准字段定义数组(可选，入参 res)
+      dynamicSchemaConvert: null,
+      // 自动布局每行列数
+      dynamicSchemaColumns: 4,
+      // 生成模式：append=追加到已配行之后，replace=替换全部行，anchor=按设计期占位行定位插入
+      dynamicSchemaMode: "append",
+      // anchor 模式：占位锚点行的 id(设计期某一行)
+      dynamicSchemaAnchorRowId: null,
+      // anchor 模式：插入位置 replace=替换占位行 / before=占位行之前 / after=占位行之后
+      dynamicSchemaAnchorPosition: "replace",
+      // anchor 模式：是否继承占位行的列布局(单元格数量/宽度/跨列)，否则按 dynamicSchemaColumns 平铺
+      dynamicSchemaInheritLayout: true,
       ...defaultWfConfig,
     },
   },

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;
+    }
+  }
+}