cloud-web-corejs 1.0.54-dev.675 → 1.0.54-dev.676

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.675",
+  "version": "1.0.54-dev.676",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

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

@@ -128,63 +128,119 @@
         >{{ i18nt("designer.setting.editAction") }}
       </el-button>
     </el-form-item>
+    <div class="dynamic-column-hint">
+      动态列来源<strong>二选一</strong>：前端列脚本（同步算列）或接口动态列（后端拉取）。同时配置时<strong>列脚本优先</strong>。
+    </div>
+    <div class="dynamic-column-block">
+      <div class="form-section-label">前端列脚本</div>
+      <div class="form-section-desc">不调接口，脚本直接 return 列配置</div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="列脚本">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnsScript', defaultEventParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnsScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div class="dynamic-column-block">
+      <div class="form-section-label">接口动态列</div>
+      <div class="form-section-desc">打开表单时请求后端脚本，返回列配置</div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="启用">
+          <el-switch
+            v-model="optionModel.dynamicColumnScriptEnabled"
+          ></el-switch>
+        </el-form-item>
+        <template v-if="optionModel.dynamicColumnScriptEnabled">
+          <el-form-item label="脚本编码">
+            <el-input
+              v-model="optionModel.dynamicColumnScriptCode"
+              clearable
+              placeholder="如 getDynamicColumns"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="请求参数">
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="
+                editEventHandler('dynamicColumnScriptParam', tableConfigParams)
+              "
+            >
+              <span>{{ optionModel.dynamicColumnScriptParam }}</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" style="line-height: 1.4; max-width: 320px">
+                  将接口返回的
+                  <code>res</code> 转为列数组；不配置则按平台默认结构解析。
+                </div>
+                <i class="el-icon-info"></i>
+              </el-tooltip>
+            </span>
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="editEventHandler('onDynamicColumnsConvert', ['res'])"
+            >
+              <span>{{ optionModel.onDynamicColumnsConvert }}</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" style="line-height: 1.4; max-width: 320px">
+                  启用后打开表单时<strong>默认</strong>自动请求动态列。<br />
+                  同步：仅写 <code>return false</code> /
+                  <code>return null</code> 跳过。<br />
+                  异步：先写异步逻辑，末尾
+                  <code>return false</code>；条件满足时调用
+                  <code>done()</code>（无参）。
+                </div>
+                <i class="el-icon-info"></i>
+              </el-tooltip>
+            </span>
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="editEventHandler('dynamicColumnAutoLoadScript', ['done'])"
+            >
+              <span>{{ optionModel.dynamicColumnAutoLoadScript }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+        </template>
+      </div>
+    </div>
     <el-form-item label="动态列模式">
+      <span slot="label">
+        动态列模式
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" style="line-height: 1.4; max-width: 320px">
+            对<strong>生效的动态列</strong>与静态列的合并方式：<br />
+            追加 — 静态列 + 动态列；替换 — 仅动态列。
+          </div>
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+      </span>
       <el-select v-model="optionModel.dynamicColumnMode" style="width: 100%">
         <el-option label="追加到静态列" value="append"></el-option>
         <el-option label="替换静态列" value="replace"></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="启用接口动态列">
-      <el-switch
-        v-model="optionModel.dynamicColumnScriptEnabled"
-        @change="handleDynamicColumnScriptEnabledChange"
-      ></el-switch>
-    </el-form-item>
-    <div
-      v-if="optionModel.dynamicColumnScriptEnabled"
-      class="data-table-editor-subsection"
-    >
-      <el-form-item label="脚本编码">
-        <el-input
-          v-model="optionModel.dynamicColumnScriptCode"
-          clearable
-          placeholder="如 getDynamicColumns"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="请求参数">
-        <a
-          href="javascript:void(0);"
-          class="a-link link-oneLind"
-          @click="editEventHandler('dynamicColumnScriptParam', tableConfigParams)"
-        >
-          <span>{{ optionModel.dynamicColumnScriptParam }}</span>
-          <i class="el-icon-edit"></i>
-        </a>
-      </el-form-item>
-      <el-form-item label="转换脚本">
-        <a
-          href="javascript:void(0);"
-          class="a-link link-oneLind"
-          @click="editEventHandler('onDynamicColumnsConvert', ['res'])"
-        >
-          <span>{{ optionModel.onDynamicColumnsConvert }}</span>
-          <i class="el-icon-edit"></i>
-        </a>
-      </el-form-item>
-      <el-form-item>
-        <span slot="label">
-          加载后自动请求
-          <el-tooltip
-            effect="light"
-            placement="top"
-            content="默认开启。打开表单时先请求动态列，再一次性渲染完整表格。"
-          >
-            <i class="el-icon-info"></i>
-          </el-tooltip>
-        </span>
-        <el-switch v-model="optionModel.dynamicColumnAutoLoad"></el-switch>
-      </el-form-item>
-    </div>
     <el-form-item label="自定义表格配置">
       <a
         href="javascript:void(0);"
@@ -616,6 +672,7 @@ export default {
       },
       defaultCheckedKeys: [],
       tableConfigParams: ["dataId", "formCode"],
+      defaultEventParams: ["dataId", "formCode"],
       showExportItemColumnsDialog: false,
     };
   },
@@ -668,11 +725,6 @@ export default {
     }
   },
   methods: {
-    handleDynamicColumnScriptEnabledChange(enabled) {
-      if (enabled) {
-        this.$set(this.optionModel, "dynamicColumnAutoLoad", true);
-      }
-    },
     dragSort: function () {
       var e = this.$refs.singleTable.$el.querySelectorAll(
           ".el-table__body-wrapper > table > tbody"
@@ -1008,9 +1060,34 @@ export default {
 }
 
 .form-section-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 22px;
+}
+
+.form-section-desc {
+  font-size: 12px;
+  color: #909399;
+  line-height: 18px;
+  margin: 2px 0 8px 8px;
+}
+
+.dynamic-column-hint {
   font-size: 12px;
   color: #606266;
-  line-height: 22px;
-  margin-bottom: 8px;
+  line-height: 1.5;
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  background: #f4f4f5;
+  border-radius: 4px;
+}
+
+.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/container-data-table/table-column-dialog.vue

@@ -972,6 +972,7 @@ export default {
 
       eventParamsMap: {
         footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
+        columnShow: "columnShow(dataId,formCode,columnConfig) {",
       },
 
       showColumnRenderDialog: false,

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

@@ -256,7 +256,6 @@ const EVENT_PROPERTIES = {
   onCheckboxChange: "onCheckboxChange-editor",
   onSearchTable: "onSearchTable-editor",
   onResetTable: "onResetTable-editor",
-  onDynamicColumns: "onDynamicColumns-editor",
 
   //tree事件
   onNodeClick: "onNodeClick-editor",

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

@@ -234,13 +234,13 @@ export const containers = [
       onCellDblclick: "",
       onSearchTable: "",
       onResetTable: "",
-      onDynamicColumns: "",
+      dynamicColumnsScript: null,
       dynamicColumnMode: "append",
       dynamicColumnScriptEnabled: false,
       dynamicColumnScriptCode: null,
       dynamicColumnScriptParam: null,
       onDynamicColumnsConvert: null,
-      dynamicColumnAutoLoad: false,
+      dynamicColumnAutoLoadScript: null,
       accessType: "1",
       accessUrl: null,
       accessReturnType: "1",

package/src/components/xform/form-render/container-item/data-table-mixin.js

@@ -13,6 +13,7 @@ import {
   deepClone,
   loopHandleWidget,
   columnFormatMap,
+  getColumnWidgetOptions,
   traverseAllWidgetsNew,
 } from "../../../../components/xform/utils/util";
 import { applyColumnLabelIcon } from "../../../../components/xform/utils/tableColumnHelper";
@@ -30,22 +31,6 @@ const baseRefUtil = {
   getReportGlobalMap,
 };
 
-const DYNAMIC_COLUMN_EDIT_FORMATS = [
-  "editInput",
-  "editNumber",
-  "editDate",
-  "editSelect",
-  "editSearch",
-  "editAttachment",
-  "editDelete",
-  "editButton",
-  "addSiblingEditRow",
-  "addChildTreeRow",
-  "moveUpRow",
-  "moveDownRow",
-  "removeTreeRow",
-];
-
 modules = {
   mixins: [
     baseRefUtil.emitter,
@@ -195,9 +180,6 @@ modules = {
     if (this.widget.options.dynamicColumnScriptEnabled === undefined) {
       this.$set(this.widget.options, "dynamicColumnScriptEnabled", false);
     }
-    if (this.widget.options.dynamicColumnAutoLoad === undefined) {
-      this.$set(this.widget.options, "dynamicColumnAutoLoad", false);
-    }
     this.initRefList();
     // this.initConfig();
     this.initTableCustomEvent();
@@ -408,19 +390,21 @@ modules = {
       let formRef = this.getFormRef();
       this.widget.options.tableColumns.forEach((row) => {
         let type = columnFormatMap[row.formatS];
-        if (type && row.columnOption && !row.widget) {
+        let widgetOptions = getColumnWidgetOptions(row);
+        if (type && widgetOptions && !row.widget) {
           let fieldWidget = formRef.copyNewFieldWidget(
             formRef.getFieldWidgetByType(type)
           );
-          fieldWidget.options = row.columnOption;
+          fieldWidget.options = widgetOptions;
           row.widget = fieldWidget;
         }
         let type2 = columnFormatMap[row.editFormatS];
-        if (type2 && row.editColumnOption && !row.editWidget) {
+        let editWidgetOptions = getColumnWidgetOptions(row, true);
+        if (type2 && editWidgetOptions && !row.editWidget) {
           let fieldWidget = formRef.copyNewFieldWidget(
             formRef.getFieldWidgetByType(type2)
           );
-          fieldWidget.options = row.editColumnOption;
+          fieldWidget.options = editWidgetOptions;
           row.editWidget = fieldWidget;
         }
       });
@@ -712,7 +696,7 @@ modules = {
       return this.widget.options.tableColumns || [];
     },
     getDynamicTableColumnsFromScript() {
-      const script = this.widget.options.onDynamicColumns;
+      const script = this.widget.options.dynamicColumnsScript;
       if (!script) {
         return undefined;
       }
@@ -720,7 +704,28 @@ modules = {
       if (result === null || result === undefined) {
         return undefined;
       }
-      return result;
+      return this.normalizeDynamicColumnResult(result);
+    },
+    normalizeDynamicColumnResult(result) {
+      if (result === null || result === undefined) {
+        return result;
+      }
+      if (Array.isArray(result)) {
+        return this.normalizeDynamicColumns(result);
+      }
+      if (typeof result !== "object") {
+        return result;
+      }
+      const normalized = { ...result };
+      if (Array.isArray(result.columns)) {
+        normalized.columns = this.normalizeDynamicColumns(result.columns);
+      }
+      if (Array.isArray(result.tableColumns)) {
+        normalized.tableColumns = this.normalizeDynamicColumns(
+          result.tableColumns
+        );
+      }
+      return normalized;
     },
     mergeDynamicTableColumns(staticColumns, dynamicResult) {
       const staticCols = staticColumns || [];
@@ -756,24 +761,40 @@ modules = {
       }
       return staticColumns;
     },
-    ensureEffectiveColumnWidgets() {
-      const effectiveColumns = this.getEffectiveTableColumns();
+    attachTableColumnWidgets(tableColumns) {
+      if (!Array.isArray(tableColumns) || !tableColumns.length) {
+        return tableColumns;
+      }
+      this.loodHandleColumns(tableColumns, (row) => {
+        if (row.formatS && columnFormatMap[row.formatS] && !row.editFormatS) {
+          row.editFormatS = row.formatS;
+        }
+      });
       const formRef = this.getFormRef();
       if (!formRef?.handleTableColumnWidget) {
-        return;
+        return tableColumns;
       }
       const savedColumns = this.widget.options.tableColumns;
-      this.widget.options.tableColumns = effectiveColumns;
+      this.widget.options.tableColumns = tableColumns;
       formRef.handleTableColumnWidget(this.widget);
-      this.syncEffectiveColumnWidgetFieldKeys(effectiveColumns);
       this.widget.options.tableColumns = savedColumns;
+      return tableColumns;
+    },
+    ensureEffectiveColumnWidgets() {
+      const effectiveColumns = this.getEffectiveTableColumns();
+      this.attachTableColumnWidgets(effectiveColumns);
+      this.syncEffectiveColumnWidgetFieldKeys(effectiveColumns);
     },
     getColumnVisible(columnConfig) {
       if (columnConfig.show === false) {
         return false;
       }
       if (columnConfig.columnShow) {
-        const result = this.handleCustomEvent(columnConfig.columnShow);
+        const result = this.handleCustomEvent(
+          columnConfig.columnShow,
+          ["columnConfig"],
+          [columnConfig]
+        );
         return result !== false && result !== null;
       }
       return true;
@@ -849,26 +870,14 @@ modules = {
         return null;
       }
       const prop =
-        item.prop || item.field || item.name || item.key || `dynamicCol_${index}`;
-      const label = item.label || item.title || item.name || prop;
+        item.prop ?? item.field ?? item.name ?? item.key ?? undefined;
+      const label = item.label ?? item.title ?? undefined;
       let formatS = item.formatS || item.format || null;
       let editFormatS = item.editFormatS || null;
-      let columnOption = item.columnOption;
-      let editColumnOption = item.editColumnOption;
-
-      // 接口列字段与设计器一致；未配 editFormatS 时，从 formatS（edit*）兼容复制
-      if (
-        !editFormatS &&
-        formatS &&
-        DYNAMIC_COLUMN_EDIT_FORMATS.includes(formatS)
-      ) {
-        editFormatS = formatS;
-      }
-      if (editFormatS && !editColumnOption && columnOption) {
-        editColumnOption = columnOption;
-      }
+      const widgetOptions = item.widgetOptions;
+      const editWidgetOptions = item.editWidgetOptions;
 
-      return {
+      const normalized = {
         ...item,
         columnId: item.columnId || `${Date.now()}_${index}`,
         prop,
@@ -880,9 +889,12 @@ modules = {
         align: item.align || "left",
         formatS,
         editFormatS: editFormatS || undefined,
-        columnOption,
-        editColumnOption,
+        widgetOptions,
+        editWidgetOptions: editWidgetOptions || undefined,
       };
+      delete normalized.columnOption;
+      delete normalized.editColumnOption;
+      return normalized;
     },
     normalizeDynamicColumns(columns) {
       if (!Array.isArray(columns)) {
@@ -965,13 +977,59 @@ modules = {
     fetchDynamicColumns(options) {
       return this.loadDynamicColumnsFromApi(options);
     },
-    isDynamicColumnAutoLoadEnabled() {
+    resolveShouldAutoLoadDynamicColumns() {
       const options = this.widget.options;
-      return !!(
-        options.dynamicColumnScriptEnabled &&
-        options.dynamicColumnScriptCode &&
-        options.dynamicColumnAutoLoad
-      );
+      if (!options.dynamicColumnScriptEnabled || !options.dynamicColumnScriptCode) {
+        return Promise.resolve(false);
+      }
+      const script = options.dynamicColumnAutoLoadScript;
+      if (!script) {
+        return Promise.resolve(true);
+      }
+      const formRef = this.getFormRef();
+      if (!formRef || formRef.designState) {
+        return Promise.resolve(false);
+      }
+      return new Promise((resolve) => {
+        let settled = false;
+        const finishLoad = () => {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          resolve(true);
+        };
+        const finishSkip = () => {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          resolve(false);
+        };
+        const done = finishLoad;
+        try {
+          const result = formRef.handleCustomEvent(script, ["done"], [done]);
+          if (settled) {
+            return;
+          }
+          if (result === null || result === false) {
+            if (result === null) {
+              finishSkip();
+              return;
+            }
+            // return false：异步 defer 等待 done()；未调用则视为跳过
+            setTimeout(() => {
+              if (!settled) {
+                finishSkip();
+              }
+            }, 0);
+            return;
+          }
+          finishLoad();
+        } catch (e) {
+          finishSkip();
+        }
+      });
     },
     isTableColumnGridInitialized() {
       return !!this.vxeOption;
@@ -1008,30 +1066,29 @@ modules = {
       });
     },
     bootstrapDynamicColumnsBeforeInit() {
-      if (!this.isDynamicColumnAutoLoadEnabled()) {
-        return Promise.resolve();
-      }
-      this.dynamicColumnsPreloaded = true;
-      const mode = this.widget.options.dynamicColumnMode;
-      return this.requestDynamicColumnsFromApi({ isLoading: true })
-        .then(({ columns }) => this.assignDynamicTableColumns(columns, { mode }))
-        .catch(() => {
-          this.dynamicColumnsPreloaded = false;
-        });
+      return this.resolveShouldAutoLoadDynamicColumns().then((shouldLoad) => {
+        if (!shouldLoad) {
+          return;
+        }
+        this.dynamicColumnsPreloaded = true;
+        const mode = this.widget.options.dynamicColumnMode;
+        return this.requestDynamicColumnsFromApi({ isLoading: true })
+          .then(({ columns }) => this.assignDynamicTableColumns(columns, { mode }))
+          .catch(() => {
+            this.dynamicColumnsPreloaded = false;
+          });
+      });
     },
     tryAutoLoadDynamicColumns() {
       if (this.dynamicColumnsPreloaded) {
         return Promise.resolve();
       }
-      const options = this.widget.options;
-      if (
-        !options.dynamicColumnScriptEnabled ||
-        !options.dynamicColumnScriptCode ||
-        !options.dynamicColumnAutoLoad
-      ) {
-        return Promise.resolve();
-      }
-      return this.loadDynamicColumnsFromApi({ isLoading: true }).catch(() => {});
+      return this.resolveShouldAutoLoadDynamicColumns().then((shouldLoad) => {
+        if (!shouldLoad) {
+          return;
+        }
+        return this.loadDynamicColumnsFromApi({ isLoading: true }).catch(() => {});
+      });
     },
     getTableData: function () {
       return this.widget.options.tableData;
@@ -1123,7 +1180,9 @@ modules = {
     },
     createColumns() {
       let rowWidgetList = [];
-      let tableColumns = this.getEffectiveTableColumns();
+      let tableColumns = this.attachTableColumnWidgets(
+        this.getEffectiveTableColumns()
+      );
       let newColumns = [];
       if (!this.widget.options.hideGridCheckBox) {
         newColumns.push({
@@ -2243,7 +2302,8 @@ modules = {
       let result = vailColumns
         .filter((item) => {
           return (
-            item.formatS === "editSearch" && item.columnOption.multipleChoices
+            item.formatS === "editSearch" &&
+            getColumnWidgetOptions(item)?.multipleChoices
           );
         })
         .map((item) => item.prop); */

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

@@ -22,6 +22,7 @@ import {
   loopHandleWidget,
   traverseAllWidgetsNew,
   columnFormatMap,
+  getColumnWidgetOptions,
 } from "../../../components/xform/utils/util";
 import {
   containers,
@@ -995,8 +996,9 @@ modules = {
                 loopDo(item);
               });
             } else {
-              if (t.columnOption) {
-                toDo2(null, t.columnOption);
+              const opts = getColumnWidgetOptions(t);
+              if (opts) {
+                toDo2(null, opts);
               }
             }
           };
@@ -1121,8 +1123,9 @@ modules = {
               loopDo(item);
             });
           } else {
-            if (t.columnOption) {
-              handleWfConfigData(null, t.columnOption);
+            const opts = getColumnWidgetOptions(t);
+            if (opts) {
+              handleWfConfigData(null, opts);
             }
           }
         };
@@ -2207,7 +2210,8 @@ modules = {
                     fieldDesc: item.label + "ID",
                     fieldName: item.prop,
                   });
-                  let vabSearchName = item?.columnOption?.vabSearchName;
+                  let vabSearchName =
+                    getColumnWidgetOptions(item)?.vabSearchName;
                   if (vabSearchName) {
                     itemFields.push({
                       fieldDesc: item.label,
@@ -2707,22 +2711,24 @@ modules = {
         if (row.editWidget) {
           return row.editWidget;
         }
-        if (row.editColumnOption) {
+        const editWidgetOptions = getColumnWidgetOptions(row, true);
+        if (editWidgetOptions) {
           let fieldWidget = this.copyNewFieldWidget(
             this.getFieldWidgetByType(type)
           );
-          fieldWidget.options = row.editColumnOption;
+          fieldWidget.options = editWidgetOptions;
           return fieldWidget;
         }
       } else {
         if (row.widget) {
           return row.widget;
         }
-        if (row.columnOption) {
+        const widgetOptions = getColumnWidgetOptions(row);
+        if (widgetOptions) {
           let fieldWidget = this.copyNewFieldWidget(
             this.getFieldWidgetByType(type)
           );
-          fieldWidget.options = row.columnOption;
+          fieldWidget.options = widgetOptions;
           return fieldWidget;
         }
       }