cloud-web-corejs 1.0.54-dev.677 → 1.0.54-dev.678

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

@@ -128,10 +128,14 @@
         >{{ i18nt("designer.setting.editAction") }}
       </el-button>
     </el-form-item>
-    <div class="dynamic-column-hint">
-      动态列来源<strong>二选一</strong>：前端列脚本（同步算列）或接口动态列（后端拉取）。同时配置时<strong>列脚本优先</strong>。
-    </div>
-    <div class="dynamic-column-block">
+    <el-form-item label="动态列来源">
+      <el-radio-group v-model="optionModel.dynamicColumnSourceType">
+        <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.dynamicColumnSourceType === 'script'" class="dynamic-column-block">
       <div class="form-section-label">前端列脚本</div>
       <div class="form-section-desc">不调接口，脚本直接 return 列配置</div>
       <div class="data-table-editor-subsection">
@@ -149,83 +153,78 @@
         </el-form-item>
       </div>
     </div>
-    <div class="dynamic-column-block">
+    <div v-if="optionModel.dynamicColumnSourceType === 'api'" 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 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>
+      </div>
+    </div>
+    <div v-if="optionModel.dynamicColumnSourceType !== '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" style="line-height: 1.4; max-width: 320px">
+                表格初始化加载动态列前执行。<br />
+                <code>return false</code> 时不加载；不配置则默认加载。
+              </div>
+              <i class="el-icon-info"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnLoadScript', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnLoadScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
         </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="动态列模式">
+    <el-form-item v-if="optionModel.dynamicColumnSourceType !== 'none'" label="动态列模式">
       <span slot="label">
         动态列模式
         <el-tooltip effect="light" placement="top">

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

@@ -235,12 +235,12 @@ export const containers = [
       onSearchTable: "",
       onResetTable: "",
       dynamicColumnsScript: null,
+      dynamicColumnSourceType: "none",
       dynamicColumnMode: "append",
-      dynamicColumnScriptEnabled: false,
       dynamicColumnScriptCode: null,
       dynamicColumnScriptParam: null,
       onDynamicColumnsConvert: null,
-      dynamicColumnAutoLoadScript: null,
+      dynamicColumnLoadScript: null,
       accessType: "1",
       accessUrl: null,
       accessReturnType: "1",

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

@@ -123,6 +123,8 @@ modules = {
       eventConfig: {},
       dynamicTableColumns: [],
       dynamicColumnsPreloaded: false,
+      dynamicColumnsInitResolved: false,
+      dynamicColumnsInitSkipped: false,
     };
   },
   watch: {
@@ -177,8 +179,8 @@ modules = {
     if (!this.widget.options.dynamicColumnMode) {
       this.$set(this.widget.options, "dynamicColumnMode", "append");
     }
-    if (this.widget.options.dynamicColumnScriptEnabled === undefined) {
-      this.$set(this.widget.options, "dynamicColumnScriptEnabled", false);
+    if (this.widget.options.dynamicColumnSourceType === undefined) {
+      this.$set(this.widget.options, "dynamicColumnSourceType", "none");
     }
     this.initRefList();
     // this.initConfig();
@@ -695,7 +697,13 @@ modules = {
     getTableColumns() {
       return this.widget.options.tableColumns || [];
     },
+    getDynamicColumnSourceType() {
+      return this.widget.options.dynamicColumnSourceType || "none";
+    },
     getDynamicTableColumnsFromScript() {
+      if (this.getDynamicColumnSourceType() !== "script") {
+        return undefined;
+      }
       const script = this.widget.options.dynamicColumnsScript;
       if (!script) {
         return undefined;
@@ -746,12 +754,16 @@ modules = {
       }
       return staticCols;
     },
-    getEffectiveTableColumns() {
+    getEffectiveTableColumns(forceDynamic = false) {
       const staticColumns = this.widget.options.tableColumns || [];
       const runtimeDynamic = this.dynamicTableColumns || [];
-      const scriptDynamic = this.getDynamicTableColumnsFromScript();
-      if (scriptDynamic !== undefined) {
-        return this.mergeDynamicTableColumns(staticColumns, scriptDynamic);
+      const applyScriptDynamic =
+        forceDynamic || !this.shouldSkipDynamicColumnsOnInit();
+      if (applyScriptDynamic) {
+        const scriptDynamic = this.getDynamicTableColumnsFromScript();
+        if (scriptDynamic !== undefined) {
+          return this.mergeDynamicTableColumns(staticColumns, scriptDynamic);
+        }
       }
       if (runtimeDynamic.length) {
         if (this.widget.options.dynamicColumnMode === "replace") {
@@ -780,11 +792,16 @@ modules = {
       this.widget.options.tableColumns = savedColumns;
       return tableColumns;
     },
-    ensureEffectiveColumnWidgets() {
-      const effectiveColumns = this.getEffectiveTableColumns();
+    ensureEffectiveColumnWidgets(forceDynamic = false) {
+      const effectiveColumns = this.getEffectiveTableColumns(forceDynamic);
       this.attachTableColumnWidgets(effectiveColumns);
       this.syncEffectiveColumnWidgetFieldKeys(effectiveColumns);
     },
+    shouldSkipDynamicColumnsOnInit() {
+      return (
+        this.dynamicColumnsInitResolved && this.dynamicColumnsInitSkipped
+      );
+    },
     getColumnVisible(columnConfig) {
       if (columnConfig.show === false) {
         return false;
@@ -800,8 +817,8 @@ modules = {
       return true;
     },
     applyTableColumnsReload() {
-      this.ensureEffectiveColumnWidgets();
-      const effectiveColumns = this.getEffectiveTableColumns();
+      this.ensureEffectiveColumnWidgets(true);
+      const effectiveColumns = this.getEffectiveTableColumns(true);
       return new Promise((resolve) => {
         this.initColumnWidgetConfig(() => {
           const columns = this.createColumns();
@@ -859,11 +876,8 @@ modules = {
         }
       );
     },
-    refreshTableColumns() {
-      return this.applyTableColumnsReload();
-    },
     refreshColumnVisible() {
-      return this.refreshTableColumns();
+      return this.applyTableColumnsReload();
     },
     normalizeDynamicColumnItem(item, index) {
       if (!item || typeof item !== "object") {
@@ -955,7 +969,19 @@ modules = {
       }
       return [];
     },
-    loadDynamicColumnsFromApi(options = {}) {
+    loadDynamicColumns(options = {}) {
+      const source = this.getDynamicColumnSourceType();
+      if (source === "script") {
+        return this.applyTableColumnsReload().then((columns) => {
+          options.success && options.success(null, columns);
+          return columns;
+        });
+      }
+      if (source !== "api") {
+        const columns = this.getEffectiveTableColumns(true);
+        options.success && options.success(null, columns);
+        return Promise.resolve(columns);
+      }
       const isLoading = options.isLoading ?? true;
       const mode = options.mode ?? this.widget.options.dynamicColumnMode;
       return this.requestDynamicColumnsFromApi({
@@ -971,18 +997,19 @@ modules = {
         });
       });
     },
-    loadDynamicColumns(options) {
-      return this.loadDynamicColumnsFromApi(options);
-    },
-    fetchDynamicColumns(options) {
-      return this.loadDynamicColumnsFromApi(options);
-    },
-    resolveShouldAutoLoadDynamicColumns() {
+    resolveShouldInitDynamicColumns() {
+      const source = this.getDynamicColumnSourceType();
+      if (source === "none") {
+        return Promise.resolve(false);
+      }
       const options = this.widget.options;
-      if (!options.dynamicColumnScriptEnabled || !options.dynamicColumnScriptCode) {
+      if (source === "api" && !options.dynamicColumnScriptCode) {
         return Promise.resolve(false);
       }
-      const script = options.dynamicColumnAutoLoadScript;
+      if (source === "script" && !options.dynamicColumnsScript) {
+        return Promise.resolve(false);
+      }
+      const script = options.dynamicColumnLoadScript;
       if (!script) {
         return Promise.resolve(true);
       }
@@ -990,46 +1017,15 @@ modules = {
       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();
+      try {
+        const result = this.handleCustomEvent(script);
+        if (result === false || result === null) {
+          return Promise.resolve(false);
         }
-      });
+        return Promise.resolve(true);
+      } catch (e) {
+        return Promise.resolve(false);
+      }
     },
     isTableColumnGridInitialized() {
       return !!this.vxeOption;
@@ -1066,28 +1062,33 @@ modules = {
       });
     },
     bootstrapDynamicColumnsBeforeInit() {
-      return this.resolveShouldAutoLoadDynamicColumns().then((shouldLoad) => {
-        if (!shouldLoad) {
+      return this.resolveShouldInitDynamicColumns().then((shouldInit) => {
+        this.dynamicColumnsInitResolved = true;
+        this.dynamicColumnsInitSkipped = !shouldInit;
+        if (!shouldInit) {
+          return;
+        }
+        if (this.getDynamicColumnSourceType() !== "api") {
           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;
-          });
+        return this.loadDynamicColumns({ isLoading: true }).catch(() => {
+          this.dynamicColumnsPreloaded = false;
+        });
       });
     },
     tryAutoLoadDynamicColumns() {
-      if (this.dynamicColumnsPreloaded) {
+      if (
+        this.dynamicColumnsPreloaded ||
+        this.getDynamicColumnSourceType() !== "api"
+      ) {
         return Promise.resolve();
       }
-      return this.resolveShouldAutoLoadDynamicColumns().then((shouldLoad) => {
+      return this.resolveShouldInitDynamicColumns().then((shouldLoad) => {
         if (!shouldLoad) {
           return;
         }
-        return this.loadDynamicColumnsFromApi({ isLoading: true }).catch(() => {});
+        return this.loadDynamicColumns({ isLoading: true }).catch(() => {});
       });
     },
     getTableData: function () {
@@ -1886,6 +1887,9 @@ modules = {
         isQueryAllPage,
         exportItemConfig,
         vform: true,
+        ...(this.getDynamicColumnSourceType() !== "none"
+          ? { visibleSync: false }
+          : {}),
         ...(dataTableConfig.otherConfig || {}),
         config: {
           height: height,