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

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

@@ -0,0 +1,322 @@
+import { generateId } from "../../../../components/xform/utils/util";
+
+/**
+ * 表格布局容器(table/h5-table)专用混入。
+ *
+ * 提供两类「布局表格」特有能力(动态字段状态控制已统一收敛到表单设置，见 formDynamicFieldMixin)：
+ *  1. 后台字段定义(dynamicSchemaEnabled)：字段定义由后台查询下发，运行时生成并插入到行布局中。
+ *  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];
+    },
+
+    /* ------------------- 后台字段定义模式(行布局容器) ------------------- */
+    initDynamicSchema() {
+      if (this.designState || !this.widget) return;
+      const options = this.widget.options || {};
+      if (!options.dynamicSchemaEnabled || !this.supportsRowLayout()) return;
+      this.$nextTick(() => {
+        this.loadDynamicSchema();
+      });
+    },
+
+    loadDynamicSchema() {
+      const options = this.widget.options;
+      if (
+        this.designState
+        || !options.dynamicSchemaEnabled
+        || !options.dynamicSchemaScriptCode
+        || !this.supportsRowLayout()
+      ) {
+        return Promise.resolve();
+      }
+      const extra = this.handleCustomEvent(options.dynamicSchemaScriptParam) || {};
+      return new Promise((resolve) => {
+        this.formHttp({
+          scriptCode: options.dynamicSchemaScriptCode,
+          isLoading: false,
+          data: {
+            formData: this.formModel,
+            ...extra,
+          },
+          success: (res) => {
+            const defs = this.resolveSchemaDefs(res);
+            this.buildDynamicRows(defs);
+            this.$nextTick(() => resolve());
+          },
+          fail: () => resolve(),
+          error: () => resolve(),
+        });
+      });
+    },
+
+    resolveSchemaDefs(res) {
+      const options = this.widget.options;
+      let defs = [];
+      if (options.dynamicSchemaConvert) {
+        const result = this.handleCustomEvent(
+          options.dynamicSchemaConvert,
+          ["res"],
+          [res]
+        );
+        if (Array.isArray(result)) {
+          defs = result;
+        } else if (result && Array.isArray(result.fields)) {
+          defs = result.fields;
+        }
+      } else {
+        const objx = res && res.objx;
+        if (Array.isArray(objx)) {
+          defs = objx;
+        } else if (objx && Array.isArray(objx.fields)) {
+          defs = objx.fields;
+        } else if (objx && Array.isArray(objx.columns)) {
+          defs = objx.columns;
+        }
+      }
+      return defs || [];
+    },
+
+    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);
+    },
+
+    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 = def.keyName || def.field || def.name;
+      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.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.options && typeof def.options === "object") {
+        Object.keys(def.options).forEach((k) => {
+          widget.options[k] = def.options[k];
+        });
+      }
+      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/table-item.vue

@@ -6,7 +6,7 @@
       <table :ref="widget.id" class="table-layout table-d-box" :class="[customClass,widget.options.styleTableClass]"
              :style="tableStyle">
         <tbody>
-        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
+        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id" v-show="isRowVisible(rowIdx)">
           <template v-for="(colWidget, colIdx) in row.cols">
             <table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
                              :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget" :tableParam="tableParam"
@@ -32,11 +32,12 @@ import refMixin from "../../../../components/xform/form-render/refMixin"
 import ContainerItemWrapper from './container-item-wrapper'
 import TableCellItem from './table-cell-item'
 import containerItemMixin from "./containerItemMixin";
+import dynamicFieldMixin from "./dynamicFieldMixin";
 
 export default {
   name: "table-item",
   componentName: 'ContainerItem',
-  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  mixins: [emitter, i18n, refMixin, containerItemMixin, dynamicFieldMixin],
   components: {
     ContainerItemWrapper,
     TableCellItem,
@@ -52,9 +53,6 @@ export default {
   },
   created() {
     this.initRefList()
-  },
-  mounted() {
-
   },
   beforeDestroy() {
     this.unregisterFromRefList()

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

@@ -0,0 +1,131 @@
+/**
+ * 表单级「动态字段规则」运行时混入(挂载于 VFormRender 根组件)。
+ *
+ * 配置来源：formConfig.dynamicFieldEnabled / dynamicFieldSourceType / dynamicFieldRules /
+ *           dynamicFieldScriptCode / dynamicFieldScriptParam(额外参数) / dynamicFieldTriggerFields
+ * 作用范围：整个表单内任意字段 / 命名容器的 显隐/必填/只读/禁用/取值。
+ *
+ * 依赖根组件(indexMixin)已提供：formConfig、widgetList、formModel、getWidgetRef、formHttp。
+ */
+import {
+  buildFormTargetMap,
+  computeLocalStates,
+  applyTargetState,
+} from "./container-item/dynamicFieldEngine";
+
+export default {
+  created() {
+    // 目标key -> { widget, refKey, isContainer }
+    this._fdfMap = {};
+    // 设计期基线，未命中规则时还原
+    this._fdfBaseline = {};
+    this._fdfWatcher = null;
+    this._fdfTimer = null;
+    this._fdfInited = false;
+  },
+  watch: {
+    showFormContent(val) {
+      // 表单内容渲染(字段ref注册)完成后再初始化
+      if (val && !this._fdfInited) {
+        this.$nextTick(() => this.initFormDynamicFields());
+      }
+    },
+  },
+  beforeDestroy() {
+    if (this._fdfWatcher) {
+      this._fdfWatcher();
+      this._fdfWatcher = null;
+    }
+    if (this._fdfTimer) {
+      clearTimeout(this._fdfTimer);
+      this._fdfTimer = null;
+    }
+  },
+  methods: {
+    initFormDynamicFields() {
+      const cfg = this.formConfig || {};
+      if (!cfg.dynamicFieldEnabled) return;
+      this._fdfInited = true;
+      const { map, baseline } = buildFormTargetMap(this.widgetList);
+      this._fdfMap = map;
+      this._fdfBaseline = baseline;
+      this.applyFormDynamicFields();
+      this.setupFormDynamicWatcher();
+    },
+
+    applyFormDynamicFields() {
+      const cfg = this.formConfig || {};
+      if (!cfg.dynamicFieldEnabled) return;
+      if (cfg.dynamicFieldSourceType === "script") {
+        this.applyFormScriptStates();
+      } else {
+        const states = computeLocalStates(
+          cfg.dynamicFieldRules || [],
+          this._fdfBaseline,
+          this.formModel
+        );
+        Object.keys(states).forEach((key) =>
+          this.applyFormFieldState(key, states[key])
+        );
+      }
+    },
+
+    applyFormFieldState(targetKey, state) {
+      const entry = this._fdfMap[targetKey];
+      if (!entry) return;
+      applyTargetState(entry, state, (name) => this.getWidgetRef(name));
+    },
+
+    setupFormDynamicWatcher() {
+      const cfg = this.formConfig || {};
+      if (cfg.dynamicFieldSourceType === "script") {
+        const triggers = cfg.dynamicFieldTriggerFields || [];
+        if (!triggers.length) return;
+        this._fdfWatcher = this.$watch(
+          () =>
+            triggers
+              .map((f) => this.formModel && this.formModel[f])
+              .join("\u0001"),
+          () => this.debouncedFormApply()
+        );
+      } else {
+        this._fdfWatcher = this.$watch(
+          () => this.formModel,
+          () => this.debouncedFormApply(),
+          { deep: true }
+        );
+      }
+    },
+
+    debouncedFormApply() {
+      if (this._fdfTimer) clearTimeout(this._fdfTimer);
+      this._fdfTimer = setTimeout(() => this.applyFormDynamicFields(), 120);
+    },
+
+    applyFormScriptStates() {
+      const cfg = this.formConfig || {};
+      if (!cfg.dynamicFieldScriptCode) return;
+      const extra = this.handleCustomEvent(cfg.dynamicFieldScriptParam) || {};
+      this.formHttp({
+        scriptCode: cfg.dynamicFieldScriptCode,
+        isLoading: false,
+        data: {
+          formData: this.formModel,
+          ...extra,
+        },
+        success: (res) => {
+          const result = (res && res.objx) || {};
+          const fieldStates = result.fieldStates || {};
+          Object.keys(this._fdfBaseline).forEach((key) => {
+            if (!fieldStates[key]) {
+              this.applyFormFieldState(key, this._fdfBaseline[key]);
+            }
+          });
+          Object.keys(fieldStates).forEach((key) =>
+            this.applyFormFieldState(key, fieldStates[key])
+          );
+        },
+      });
+    },
+  },
+};

package/src/components/xform/form-render/index.vue

@@ -113,6 +113,7 @@
 import "./container-item/index";
 import FieldComponents from "../../../components/xform/form-designer/form-widget/field-widget/index";
 import indexMixin from "../../../components/xform/form-render/indexMixin";
+import formDynamicFieldMixin from "../../../components/xform/form-render/formDynamicFieldMixin";
 
 export default {
   name: "VFormRender",
@@ -135,7 +136,7 @@ export default {
         "../../../components/xform/form-designer/form-widget/dialog/fileReferenceDialog.vue"
       )
   },
-  mixins: [indexMixin],
+  mixins: [indexMixin, formDynamicFieldMixin],
 };
 </script>
 

package/src/components/xform/mixins/defaultHandle.js

@@ -1,4 +1,6 @@
 import moment from "moment";
+import { saveUserLog } from "@base/api/user";
+import settingConfig from "@/settings";
 
 let modules = {};
 modules = {
@@ -81,6 +83,32 @@ modules = {
       };
       return reqData;
     },
+    onAfterSaveHandle(reqData, res, response) {
+      //保存成功后处理
+      this.writeSaveLog(reqData, res, response); //写入保存日志
+    },
+    writeSaveLog(reqData, res, response) {
+      //写入保存日志
+      if (settingConfig.formSaveLogEnabled && res.type === "success") {
+        let responseConfig = response.config || {};
+        let formRef = this.getFormRef ? this.getFormRef() : this;
+        let reportTemplate = formRef ? formRef.reportTemplate : null;
+        if (!reportTemplate) return;
+        let isAdd = !formRef.dataId;
+        let formName = reportTemplate?.formName;
+        let formCode = reportTemplate?.formCode;
+        let action = isAdd ? "新增成功" : "更新成功";
+        let content = `${formName}(${formCode}),${action}`;
+        let path = responseConfig.url.replace(responseConfig.baseURL, "");
+        saveUserLog({
+          data: {
+            path: path,
+            businessCode: content,
+            content: content,
+          },
+        });
+      }
+    },
     saveDefaultHandle(option) {
       let formRef = this.getFormRef ? this.getFormRef() : this;
       let formConfig = formRef.formConfig;
@@ -98,6 +126,10 @@ modules = {
       formRef.validate((valid) => {
         if (valid) {
           let reqData = this.getReqFormData();
+          let callback = (res, response) => {
+            this.onAfterSaveHandle(reqData, res, response); //保存成功后处理
+            option?.callback && option.callback(res); //回调
+          };
           this.formHttp({
             // url: "/" + reportTemplate.serviceName + "/form_ins/saveUpdate",
             scriptCode: scriptCode,
@@ -119,6 +151,7 @@ modules = {
               });
             },
             ...config,
+            callback: callback,
           });
         }
       });

package/src/components/xform/utils/util.js

@@ -880,6 +880,13 @@ export function getDefaultFormConfig() {
     otherTabList: [],
     customListTabLabel: null,
     globalConfig: null,
+    // 表单级动态字段规则：按本地规则/后台脚本动态控制整个表单内任意字段/容器的显隐/必填/只读/禁用/取值
+    dynamicFieldEnabled: false,
+    dynamicFieldSourceType: "local",
+    dynamicFieldRules: [],
+    dynamicFieldScriptCode: null,
+    dynamicFieldScriptParam: null,
+    dynamicFieldTriggerFields: [],
   };
 }