cloud-web-corejs 1.0.54-dev.703 → 1.0.54-dev.704

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

@@ -1,95 +1,163 @@
 <template>
   <div class="table-dynamic-field-editor">
-    <!-- 后台字段(动态生成)：字段定义本身由后台查询下发 -->
-    <el-divider class="custom-divider">
-      后台字段
-      <el-tooltip effect="light" placement="top">
-        <div slot="content" class="field-tip-content">
-          字段「显隐/必填/只读/禁用/取值」等动态规则请到「表单设置 -
-          动态字段规则」统一配置
-        </div>
-        <i class="el-icon-info label-tip-icon"></i>
-      </el-tooltip>
-    </el-divider>
-
-    <el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">
+        动态字段
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            字段「显隐/必填/只读/禁用/取值」等动态规则请到「表单设置 -
+            动态字段规则」统一配置
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </el-divider>
+    </el-form-item>
+    <el-form-item label="动态字段来源">
+      <el-radio-group v-model="optionModel.dynamicSchemaSourceType">
+        <el-radio label="none">无</el-radio>
+        <el-radio label="script">前端字段脚本</el-radio>
+        <el-radio label="api">接口动态字段</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <div
+      v-if="optionModel.dynamicSchemaSourceType === 'script'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        前端字段脚本
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            不调接口，脚本直接 return 字段定义数组或 { fields: [...] }
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="字段脚本">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editEventHandler('dynamicSchemaScript', defaultEventParams)"
+          >
+            <span>{{ optionModel.dynamicSchemaScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div
+      v-if="optionModel.dynamicSchemaSourceType === 'api'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        接口动态字段
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            打开表单时请求后台脚本，返回字段定义（格式与数据表格动态列一致，详见
+            docs/后台字段（动态生成）JSON 说明.md）
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="脚本编码">
+          <el-input
+            v-model="optionModel.dynamicSchemaScriptCode"
+            clearable
+            placeholder="scriptCode 或 formCode/scriptCode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <span slot="label">
+            额外参数
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                格式： return { bizType: this.formModel.type }
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicSchemaScriptParam', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicSchemaScriptParam }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+        <el-form-item>
+          <span slot="label">
+            转换脚本
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                可选。入参 res，返回标准定义数组；不填时默认取
+                res.objx（数组）或 res.objx.fields / res.objx.columns
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editDynamicSchemaConvert"
+          >
+            <span>{{ dynamicSchemaConvertDisplay }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div
+      v-if="optionModel.dynamicSchemaSourceType !== 'none'"
+      class="dynamic-column-block"
+    >
+      <div class="data-table-editor-subsection">
+        <el-form-item>
+          <span slot="label">
+            加载条件
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                表单初始化加载动态字段前执行。<br />
+                <code>return false</code> 时不加载；不配置则默认加载。
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicSchemaLoadScript', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicSchemaLoadScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <el-form-item v-if="optionModel.dynamicSchemaSourceType !== 'none'">
       <span slot="label">
-        启用后台字段
+        生成模式
         <el-tooltip effect="light" placement="top">
           <div slot="content" class="field-tip-content">
-            字段由后台查询下发，无需在设计器预先配置
+            对<strong>生效的动态字段</strong>与静态字段的合并方式：<br />
+            追加 — 静态字段 + 动态字段；替换 — 仅动态字段；锚点插入 —
+            插到占位行位置。
           </div>
           <i class="el-icon-info label-tip-icon"></i>
         </el-tooltip>
       </span>
-      <el-switch v-model="optionModel.dynamicSchemaEnabled"></el-switch>
+      <el-select v-model="optionModel.dynamicSchemaMode" style="width: 100%">
+        <el-option label="追加到静态字段" value="append"></el-option>
+        <el-option label="替换静态字段" value="replace"></el-option>
+        <el-option label="锚点插入" value="anchor"></el-option>
+      </el-select>
     </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>
-        <span slot="label">
-          额外参数
-          <el-tooltip effect="light" placement="top">
-            <div slot="content" class="field-tip-content">
-              与数据表格动态列一致：return { bizType: this.formModel.type }，固定附带
-              formData
-            </div>
-            <i class="el-icon-info label-tip-icon"></i>
-          </el-tooltip>
-        </span>
-        <a
-          href="javascript:void(0);"
-          class="a-link link-oneLind"
-          @click="editSchemaScriptParam"
-        >
-          <span>{{ optionModel.dynamicSchemaScriptParam }}</span>
-          <i class="el-icon-edit"></i>
-        </a>
-      </el-form-item>
-      <el-form-item>
-        <span slot="label">
-          转换脚本
-          <el-tooltip effect="light" placement="top">
-            <div slot="content" class="field-tip-content">
-              可选。入参 res，返回标准定义数组或 { fields/columns: [...] }；不填时默认取
-              res.objx（数组）或 res.objx.fields / res.objx.columns
-            </div>
-            <i class="el-icon-info label-tip-icon"></i>
-          </el-tooltip>
-        </span>
-        <a
-          href="javascript:void(0);"
-          class="a-link link-oneLind"
-          @click="editSchemaConvert"
-        >
-          <span>{{ optionModel.dynamicSchemaConvert }}</span>
-          <i class="el-icon-edit"></i>
-        </a>
-      </el-form-item>
-      <el-form-item>
-        <span slot="label">
-          生成模式
-          <el-tooltip effect="light" placement="top">
-            <div slot="content" class="field-tip-content">
-              追加=保留已配字段并在其后生成；替换=清空已配行后全部由后台生成；锚点插入=插到设计期某占位行位置
-            </div>
-            <i class="el-icon-info label-tip-icon"></i>
-          </el-tooltip>
-        </span>
-        <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>
-      </el-form-item>
-
+    <template v-if="optionModel.dynamicSchemaSourceType !== 'none'">
       <template v-if="optionModel.dynamicSchemaMode === 'anchor'">
         <el-form-item>
           <span slot="label">
@@ -103,7 +171,6 @@
           </span>
           <el-select
             v-model="optionModel.dynamicSchemaAnchorRowId"
-            size="mini"
             style="width: 100%"
             placeholder="选择设计期的占位行"
           >
@@ -116,21 +183,21 @@
           </el-select>
         </el-form-item>
         <el-form-item label="插入位置">
-          <el-radio-group
+          <el-select
             v-model="optionModel.dynamicSchemaAnchorPosition"
-            size="mini"
+            style="width: 100%"
           >
-            <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-option label="替换占位行" value="replace"></el-option>
+            <el-option label="之前" value="before"></el-option>
+            <el-option label="之后" value="after"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
           <span slot="label">
             继承行布局
             <el-tooltip effect="light" placement="top">
               <div slot="content" class="field-tip-content">
-                开启后生成行沿用占位行的单元格数量/宽度/跨列，否则按"每行列数"平铺
+                开启后生成行沿用占位行的单元格数量/宽度/跨列，否则按「每行列数」平铺
               </div>
               <i class="el-icon-info label-tip-icon"></i>
             </el-tooltip>
@@ -140,111 +207,32 @@
           ></el-switch>
         </el-form-item>
       </template>
-
       <el-form-item
-        label="每行列数"
         v-if="
           optionModel.dynamicSchemaMode !== 'anchor' ||
           !optionModel.dynamicSchemaInheritLayout
         "
+        label="每行列数"
       >
         <el-input-number
           v-model="optionModel.dynamicSchemaColumns"
           :min="1"
           :max="12"
-          size="mini"
+          controls-position="right"
+          style="width: 100%"
         ></el-input-number>
       </el-form-item>
     </template>
-
-    <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";
+import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
 
 export default {
   name: "table-dynamicField-editor",
-  mixins: [i18n],
+  mixins: [i18n, eventMixin],
   props: {
     designer: Object,
     selectedWidget: Object,
@@ -252,13 +240,30 @@ export default {
   },
   data() {
     return {
-      scriptParamDialogVisible: false,
-      convertDialogVisible: false,
-      editingScriptParam: "",
-      editingConvert: "",
+      tableConfigParams: ["dataId", "formCode"],
+      defaultEventParams: ["dataId", "formCode"],
     };
   },
+  created() {
+    if (this.optionModel.dynamicSchemaSourceType === undefined) {
+      const legacyEnabled = this.optionModel.dynamicSchemaEnabled;
+      this.$set(
+        this.optionModel,
+        "dynamicSchemaSourceType",
+        legacyEnabled ? "api" : "none"
+      );
+    }
+    if (this.optionModel.dynamicSchemaScript === undefined) {
+      this.$set(this.optionModel, "dynamicSchemaScript", null);
+    }
+    if (this.optionModel.dynamicSchemaLoadScript === undefined) {
+      this.$set(this.optionModel, "dynamicSchemaLoadScript", null);
+    }
+  },
   computed: {
+    dynamicSchemaConvertDisplay() {
+      return this.optionModel.dynamicSchemaConvert || "";
+    },
     rowOptions() {
       const rows = (this.selectedWidget && this.selectedWidget.rows) || [];
       return rows.map((row, idx) => {
@@ -275,43 +280,8 @@ export default {
     },
   },
   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;
+    editDynamicSchemaConvert() {
+      this.editEventHandler("dynamicSchemaConvert", ["res"]);
     },
     collectFields(list, out) {
       (list || []).forEach((w) => {
@@ -337,6 +307,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.data-table-editor-subsection {
+  margin: 0 0 4px 8px;
+  padding-left: 12px;
+  border-left: 2px solid #ebeef5;
+}
+
+.form-section-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 22px;
+  margin-bottom: 8px;
+}
+
 .label-tip-icon {
   margin-left: 4px;
   color: #909399;
@@ -349,4 +333,12 @@ export default {
   line-height: 1.4;
   max-width: 320px;
 }
+
+.dynamic-column-block {
+  margin-bottom: 12px;
+}
+
+.dynamic-column-block .data-table-editor-subsection {
+  margin-top: 0;
+}
 </style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-cascader/cascader-multiple-editor.vue

@@ -1,7 +1,12 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.multiple')">
-    <el-switch v-model="optionModel.multiple"></el-switch>
-  </el-form-item>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.multiple')">
+      <el-switch v-model="optionModel.multiple"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('平铺选项')">
+      <el-switch v-model="optionModel.flatCollapseTags"></el-switch>
+    </el-form-item>
+  </div>
 </template>
 
 <script>

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

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

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

@@ -31,8 +31,12 @@ export const containers = [
       customClass: "",
       styleTableClass: "",
       fullWidth: false,
-      // 后台字段定义模式：字段本身由后台查询下发(适用于字段不固定、无法在设计器预配的场景)
-      dynamicSchemaEnabled: false,
+      // 动态字段来源：none=不加载，script=前端字段脚本，api=接口动态字段
+      dynamicSchemaSourceType: "none",
+      // 前端字段脚本：直接 return 字段定义数组或 { fields: [...] }
+      dynamicSchemaScript: null,
+      // 加载条件：return false 时不加载；不配置则默认加载
+      dynamicSchemaLoadScript: null,
       // 后台脚本编码(支持 "formCode/scriptCode")，返回标准字段定义数组
       dynamicSchemaScriptCode: null,
       // 额外请求参数(JSON 字符串)
@@ -3688,6 +3692,7 @@ export const advancedFields = [
       clearable: true,
       filterable: false,
       multiple: false,
+      flatCollapseTags: false,
       checkStrictly: false, //可选择任意一级选项，默认不开启
       showAllLevels: true, //显示完整路径
       dsEnabled: false, // 是否使用数据源数据