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

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

@@ -30,6 +30,22 @@ 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,
@@ -120,6 +136,8 @@ modules = {
       fieldSchemaMap: {},
       fieldSchemaData: [],
       eventConfig: {},
+      dynamicTableColumns: [],
+      dynamicColumnsPreloaded: false,
     };
   },
   watch: {
@@ -171,6 +189,15 @@ 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);
+    }
+    if (this.widget.options.dynamicColumnAutoLoad === undefined) {
+      this.$set(this.widget.options, "dynamicColumnAutoLoad", false);
+    }
     this.initRefList();
     // this.initConfig();
     this.initTableCustomEvent();
@@ -180,8 +207,10 @@ modules = {
   },
   mounted: async function () {
     this.handleOnMounted();
-    this.initColumnWidgetConfig(() => {
-      this.initTableList();
+    this.bootstrapDynamicColumnsBeforeInit().then(() => {
+      this.initColumnWidgetConfig(() => {
+        this.initTableList();
+      });
     });
   },
   beforeDestroy: function () {
@@ -218,27 +247,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"];
@@ -609,15 +708,330 @@ 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.onDynamicColumns;
+      if (!script) {
+        return undefined;
+      }
+      const result = this.handleCustomEvent(script);
+      if (result === null || result === undefined) {
+        return undefined;
+      }
+      return result;
+    },
+    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;
+    },
+    ensureEffectiveColumnWidgets() {
+      const effectiveColumns = this.getEffectiveTableColumns();
+      const formRef = this.getFormRef();
+      if (!formRef?.handleTableColumnWidget) {
+        return;
+      }
+      const savedColumns = this.widget.options.tableColumns;
+      this.widget.options.tableColumns = effectiveColumns;
+      formRef.handleTableColumnWidget(this.widget);
+      this.syncEffectiveColumnWidgetFieldKeys(effectiveColumns);
+      this.widget.options.tableColumns = savedColumns;
+    },
+    getColumnVisible(columnConfig) {
+      if (columnConfig.show === false) {
+        return false;
+      }
+      if (columnConfig.columnShow) {
+        const result = this.handleCustomEvent(columnConfig.columnShow);
+        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 || `dynamicCol_${index}`;
+      const label = item.label || item.title || item.name || prop;
+      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;
+      }
+
+      return {
+        ...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,
+        columnOption,
+        editColumnOption,
+      };
+    },
+    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);
+    },
+    isDynamicColumnAutoLoadEnabled() {
+      const options = this.widget.options;
+      return !!(
+        options.dynamicColumnScriptEnabled &&
+        options.dynamicColumnScriptCode &&
+        options.dynamicColumnAutoLoad
+      );
+    },
+    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() {
+      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;
         });
     },
-    setTableColumn: function (e) {
-      this.setTableColumns(e);
+    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(() => {});
     },
     getTableData: function () {
       return this.widget.options.tableData;
@@ -709,7 +1123,7 @@ modules = {
     },
     createColumns() {
       let rowWidgetList = [];
-      let tableColumns = this.widget.options.tableColumns;
+      let tableColumns = this.getEffectiveTableColumns();
       let newColumns = [];
       if (!this.widget.options.hideGridCheckBox) {
         newColumns.push({
@@ -748,7 +1162,7 @@ modules = {
               : false,
             columnConfig: t,
           },
-          visible: t.show,
+          visible: this.getColumnVisible(t),
           slots: {},
         };
         applyColumnLabelIcon(col, t);
@@ -1114,6 +1528,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 +2132,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) {