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

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";
@@ -120,6 +121,8 @@ modules = {
       fieldSchemaMap: {},
       fieldSchemaData: [],
       eventConfig: {},
+      dynamicTableColumns: [],
+      dynamicColumnsPreloaded: false,
     };
   },
   watch: {
@@ -171,6 +174,12 @@ modules = {
   created: function () {
     if (!this.formModel[this.fieldKeyName])
       this.formModel[this.fieldKeyName] = [];
+    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);
+    }
     this.initRefList();
     // this.initConfig();
     this.initTableCustomEvent();
@@ -180,8 +189,10 @@ modules = {
   },
   mounted: async function () {
     this.handleOnMounted();
-    this.initColumnWidgetConfig(() => {
-      this.initTableList();
+    this.bootstrapDynamicColumnsBeforeInit().then(() => {
+      this.initColumnWidgetConfig(() => {
+        this.initTableList();
+      });
     });
   },
   beforeDestroy: function () {
@@ -218,27 +229,97 @@ modules = {
       let widget = this.getTableColumnWidget(obj);
       return widget ? this.getFieldKeyName(widget) : null;
     },
-    initColumnWidgetConfig(callback) {
-      let tableColumns = this.widget.options.tableColumns;
-      let requests = [];
+    collectColumnWidgetConfigRequests(tableColumns, options = {}) {
+      const { forceRefresh = false } = options;
+      const requests = [];
       this.loodHandleColumns(tableColumns, (row) => {
+        if (forceRefresh) {
+          this.resetColumnWidgetSyncFlag(row.widget);
+          this.resetColumnWidgetSyncFlag(row.editWidget);
+        }
         requests.push(this.handleColumnWidgetConfig(row.widget));
         requests.push(this.handleColumnWidgetConfig(row.editWidget));
         let widgetList = row.widgetList;
         if (widgetList && widgetList.length) {
           traverseAllWidgetsNew(widgetList, (widget) => {
+            if (forceRefresh) {
+              this.resetColumnWidgetSyncFlag(widget);
+            }
             requests.push(this.handleColumnWidgetConfig(widget));
           });
         }
       });
+      return requests.filter(Boolean);
+    },
+    resetColumnWidgetSyncFlag(widget) {
+      if (widget) {
+        widget._syncInited = false;
+      }
+    },
+    syncColumnWidgetFieldKey(columnRow, widget) {
+      if (!widget || !columnRow?.prop) {
+        return;
+      }
+      const prop = columnRow.prop;
+      if (Object.prototype.hasOwnProperty.call(widget.options, "keyName")) {
+        widget.options.keyName = prop;
+        widget.options.keyNameEnabled = true;
+      } else {
+        widget.options.name = prop;
+      }
+    },
+    syncEffectiveColumnWidgetFieldKeys(tableColumns) {
+      this.loodHandleColumns(tableColumns, (row) => {
+        this.syncColumnWidgetFieldKey(row, row.widget);
+        this.syncColumnWidgetFieldKey(row, row.editWidget);
+      });
+    },
+    initColumnWidgetConfig(callback, options = {}) {
+      const tableColumns =
+        options.columns ?? this.getEffectiveTableColumns();
+      const requests = this.collectColumnWidgetConfigRequests(
+        tableColumns,
+        options
+      );
       if (requests.length) {
         Promise.all(requests).then(() => {
-          callback();
+          callback && callback();
         });
       } else {
-        callback();
+        callback && callback();
       }
     },
+    refreshColumnWidgetConfig(options = {}) {
+      const tableColumns =
+        options.columns ?? this.getEffectiveTableColumns();
+      const forceRefresh = options.forceRefresh !== false;
+      return new Promise((resolve, reject) => {
+        const requests = this.collectColumnWidgetConfigRequests(tableColumns, {
+          forceRefresh,
+        });
+        const finish = () => {
+          this.initFieldSchemaData(true);
+          const $grid = this.getGridTable();
+          if ($grid?.refreshColumn) {
+            $grid.refreshColumn();
+          }
+          options.success && options.success();
+          resolve();
+        };
+        if (requests.length) {
+          Promise.all(requests).then(finish).catch((err) => {
+            options.fail && options.fail(err);
+            options.error && options.error(err);
+            reject(err);
+          });
+        } else {
+          finish();
+        }
+      });
+    },
+    reloadColumnWidgetOptions(options) {
+      return this.refreshColumnWidgetConfig(options);
+    },
     fillColumnWidgetOptionItems(widget, rows) {
       let widgetType = widget.type;
       let formScriptEnabledTypes = ["select", "checkbox", "radio"];
@@ -309,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;
         }
       });
@@ -609,15 +692,403 @@ modules = {
     getRowIndex: function (e) {
       return this.widget.options.tableData.lastIndexOf(e);
     },
-    setTableColumns: function (e) {
-      let t = this;
-      (this.widget.options.tableColumns = e),
-        this.$nextTick(function () {
-          t.$refs.dataTable.doLayout();
+    getTableColumns() {
+      return this.widget.options.tableColumns || [];
+    },
+    getDynamicTableColumnsFromScript() {
+      const script = this.widget.options.dynamicColumnsScript;
+      if (!script) {
+        return undefined;
+      }
+      const result = this.handleCustomEvent(script);
+      if (result === null || result === undefined) {
+        return undefined;
+      }
+      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 || [];
+      if (dynamicResult === undefined || dynamicResult === null) {
+        return staticCols;
+      }
+      if (Array.isArray(dynamicResult)) {
+        if (this.widget.options.dynamicColumnMode === "replace") {
+          return dynamicResult;
+        }
+        return staticCols.concat(dynamicResult);
+      }
+      if (dynamicResult.replace) {
+        return dynamicResult.columns || [];
+      }
+      if (dynamicResult.columns) {
+        return staticCols.concat(dynamicResult.columns);
+      }
+      return staticCols;
+    },
+    getEffectiveTableColumns() {
+      const staticColumns = this.widget.options.tableColumns || [];
+      const runtimeDynamic = this.dynamicTableColumns || [];
+      const scriptDynamic = this.getDynamicTableColumnsFromScript();
+      if (scriptDynamic !== undefined) {
+        return this.mergeDynamicTableColumns(staticColumns, scriptDynamic);
+      }
+      if (runtimeDynamic.length) {
+        if (this.widget.options.dynamicColumnMode === "replace") {
+          return runtimeDynamic;
+        }
+        return staticColumns.concat(runtimeDynamic);
+      }
+      return staticColumns;
+    },
+    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 tableColumns;
+      }
+      const savedColumns = this.widget.options.tableColumns;
+      this.widget.options.tableColumns = tableColumns;
+      formRef.handleTableColumnWidget(this.widget);
+      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,
+          ["columnConfig"],
+          [columnConfig]
+        );
+        return result !== false && result !== null;
+      }
+      return true;
+    },
+    applyTableColumnsReload() {
+      this.ensureEffectiveColumnWidgets();
+      const effectiveColumns = this.getEffectiveTableColumns();
+      return new Promise((resolve) => {
+        this.initColumnWidgetConfig(() => {
+          const columns = this.createColumns();
+          this.widgets = columns
+            .filter((column) => !!column?.params?.widget)
+            .map((column) => column.params.widget);
+          this.editWidgets = columns
+            .filter((column) => !!column?.params?.editWidget)
+            .map((column) => column.params.editWidget);
+          if (this.vxeOption) {
+            this.$set(this.vxeOption, "columns", columns);
+          }
+          const $grid = this.getGridTable();
+          if ($grid?.reloadColumn) {
+            const reloadResult = $grid.reloadColumn(columns);
+            const finish = () => {
+              this.initFieldSchemaData(true);
+              resolve(columns);
+            };
+            if (reloadResult?.then) {
+              reloadResult.then(finish).catch(finish);
+            } else {
+              finish();
+            }
+          } else {
+            resolve(columns);
+          }
+        }, { columns: effectiveColumns, forceRefresh: true });
+      });
+    },
+    reloadTableColumns(tableColumns) {
+      if (Array.isArray(tableColumns)) {
+        this.dynamicTableColumns = [];
+        this.widget.options.tableColumns = tableColumns;
+      }
+      return this.applyTableColumnsReload();
+    },
+    setTableColumns(tableColumns) {
+      return this.reloadTableColumns(tableColumns);
+    },
+    setTableColumn(tableColumns) {
+      return this.setTableColumns(tableColumns);
+    },
+    setDynamicTableColumns(tableColumns, options = {}) {
+      const { mode, deferReload } = options;
+      return this.assignDynamicTableColumns(tableColumns, { mode }).then(
+        (columns) => {
+          const shouldDeferReload =
+            deferReload === true ||
+            (deferReload !== false && !this.isTableColumnGridInitialized());
+          if (shouldDeferReload) {
+            return columns;
+          }
+          return this.applyTableColumnsReload().then(() => columns);
+        }
+      );
+    },
+    refreshTableColumns() {
+      return this.applyTableColumnsReload();
+    },
+    refreshColumnVisible() {
+      return this.refreshTableColumns();
+    },
+    normalizeDynamicColumnItem(item, index) {
+      if (!item || typeof item !== "object") {
+        return null;
+      }
+      const 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;
+      const widgetOptions = item.widgetOptions;
+      const editWidgetOptions = item.editWidgetOptions;
+
+      const normalized = {
+        ...item,
+        columnId: item.columnId || `${Date.now()}_${index}`,
+        prop,
+        label,
+        width: item.width ?? 150,
+        show: item.show !== false,
+        sortable: item.sortable !== false,
+        filterable: item.filterable !== false,
+        align: item.align || "left",
+        formatS,
+        editFormatS: editFormatS || undefined,
+        widgetOptions,
+        editWidgetOptions: editWidgetOptions || undefined,
+      };
+      delete normalized.columnOption;
+      delete normalized.editColumnOption;
+      return normalized;
+    },
+    normalizeDynamicColumns(columns) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      return columns
+        .map((item, index) => this.normalizeDynamicColumnItem(item, index))
+        .filter(Boolean);
+    },
+    buildDynamicColumnRequestData(options = {}) {
+      if (options.data !== undefined) {
+        return options.data;
+      }
+      const paramScript = this.widget.options.dynamicColumnScriptParam;
+      let customParam = {};
+      if (paramScript) {
+        customParam =
+          (this.handleCustomParam &&
+            this.handleCustomParam(paramScript)) ||
+          this.handleCustomEvent(paramScript) ||
+          {};
+      }
+      const formRef = this.getFormRef();
+      const reportTemplate = formRef.reportTemplate || {};
+      return {
+        formCode: reportTemplate.formCode,
+        formVersion: reportTemplate.formVersion,
+        taBm: this.fieldKeyName,
+        data: {
+          dataId: this.formDataId,
+          formData: this.globalModel?.formModel || {},
+          ...customParam,
+        },
+      };
+    },
+    convertDynamicColumnResponse(res, options = {}) {
+      const convertScript =
+        options.convertScript ?? this.widget.options.onDynamicColumnsConvert;
+      if (convertScript) {
+        const result = this.handleCustomEvent(convertScript, ["res"], [res]);
+        if (Array.isArray(result)) {
+          return this.normalizeDynamicColumns(result);
+        }
+        if (result?.columns) {
+          return this.normalizeDynamicColumns(result.columns);
+        }
+        return [];
+      }
+      const objx = res?.objx;
+      if (Array.isArray(objx)) {
+        return this.normalizeDynamicColumns(objx);
+      }
+      if (objx?.columns && Array.isArray(objx.columns)) {
+        return this.normalizeDynamicColumns(objx.columns);
+      }
+      if (objx?.tableColumns && Array.isArray(objx.tableColumns)) {
+        return this.normalizeDynamicColumns(objx.tableColumns);
+      }
+      return [];
+    },
+    loadDynamicColumnsFromApi(options = {}) {
+      const isLoading = options.isLoading ?? true;
+      const mode = options.mode ?? this.widget.options.dynamicColumnMode;
+      return this.requestDynamicColumnsFromApi({
+        ...options,
+        isLoading,
+      }).then(({ res, columns }) => {
+        return this.setDynamicTableColumns(columns, {
+          mode,
+          deferReload: options.deferReload,
+        }).then((resultColumns) => {
+          options.success && options.success(res, resultColumns);
+          return resultColumns;
         });
+      });
+    },
+    loadDynamicColumns(options) {
+      return this.loadDynamicColumnsFromApi(options);
+    },
+    fetchDynamicColumns(options) {
+      return this.loadDynamicColumnsFromApi(options);
+    },
+    resolveShouldAutoLoadDynamicColumns() {
+      const options = this.widget.options;
+      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;
+    },
+    assignDynamicTableColumns(tableColumns, options = {}) {
+      const { mode } = options;
+      if (mode) {
+        this.widget.options.dynamicColumnMode = mode;
+      }
+      this.dynamicTableColumns = Array.isArray(tableColumns)
+        ? tableColumns
+        : [];
+      this.ensureEffectiveColumnWidgets();
+      return Promise.resolve(this.dynamicTableColumns);
+    },
+    requestDynamicColumnsFromApi(options = {}) {
+      const scriptCode =
+        options.scriptCode ?? this.widget.options.dynamicColumnScriptCode;
+      if (!scriptCode) {
+        return Promise.reject(new Error("dynamicColumnScriptCode is required"));
+      }
+      const data = this.buildDynamicColumnRequestData(options);
+      const isLoading = options.isLoading ?? true;
+      return this.formHttp({
+        scriptCode,
+        data,
+        isLoading,
+        fail: options.fail,
+        error: options.error,
+      }).then((res) => {
+        const columns = this.convertDynamicColumnResponse(res, options);
+        options.onFetchSuccess && options.onFetchSuccess(res, columns);
+        return { res, columns };
+      });
+    },
+    bootstrapDynamicColumnsBeforeInit() {
+      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;
+          });
+      });
     },
-    setTableColumn: function (e) {
-      this.setTableColumns(e);
+    tryAutoLoadDynamicColumns() {
+      if (this.dynamicColumnsPreloaded) {
+        return Promise.resolve();
+      }
+      return this.resolveShouldAutoLoadDynamicColumns().then((shouldLoad) => {
+        if (!shouldLoad) {
+          return;
+        }
+        return this.loadDynamicColumnsFromApi({ isLoading: true }).catch(() => {});
+      });
     },
     getTableData: function () {
       return this.widget.options.tableData;
@@ -709,7 +1180,9 @@ modules = {
     },
     createColumns() {
       let rowWidgetList = [];
-      let tableColumns = this.widget.options.tableColumns;
+      let tableColumns = this.attachTableColumnWidgets(
+        this.getEffectiveTableColumns()
+      );
       let newColumns = [];
       if (!this.widget.options.hideGridCheckBox) {
         newColumns.push({
@@ -748,7 +1221,7 @@ modules = {
               : false,
             columnConfig: t,
           },
-          visible: t.show,
+          visible: this.getColumnVisible(t),
           slots: {},
         };
         applyColumnLabelIcon(col, t);
@@ -1114,6 +1587,7 @@ modules = {
       let dataTableConfig = formRef.$attrs.dataTableOption || {};
       this.dataTableConfig = dataTableConfig;
 
+      this.ensureEffectiveColumnWidgets();
       let columns = this.createColumns();
       this.widgets = columns
         .filter((column) => !!column?.params?.widget)
@@ -1717,11 +2191,13 @@ modules = {
       }
       this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
         this.vxeOption = opts;
-        if (!isQueryTable) {
-          setTimeout(() => {
-            this.loadAccessData(1);
-          }, 20);
-        }
+        this.tryAutoLoadDynamicColumns().finally(() => {
+          if (!isQueryTable) {
+            setTimeout(() => {
+              this.loadAccessData(1);
+            }, 20);
+          }
+        });
       });
     },
     loodHandleColumns(columns, callback) {
@@ -1826,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;
         }
       }