amis 1.8.0-beta.13 → 1.8.0-beta.15

package/src/WithStore.tsx

@@ -201,7 +201,7 @@ export function HocStoreFactory(renderer: {
             store.initData(
               extendObject(
                 props.data,
-                store.hasRemoteData
+                store.hasRemoteData || store.path === 'page'
                   ? {
                       ...store.data,
                       ...props.data

package/src/components/DatePicker.tsx

@@ -371,7 +371,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         value: normalizeValue(props.value, props.format)
       };
 
-      newState.inputValue = newState.value.format(this.props.inputFormat) || '';
+      newState.inputValue =
+        newState.value?.format(this.props.inputFormat) || '';
 
       this.setState(newState);
     }

package/src/components/Tree.tsx

@@ -210,7 +210,9 @@ export class TreeSelector extends React.Component<
 
   componentDidMount() {
     const {enableNodePath} = this.props;
-    this.props.onRef(this)
+
+    // onRef只有渲染器的情况才会使用
+    this.props.onRef?.(this);
     enableNodePath && this.expandLazyLoadNodes();
   }
 

package/src/renderers/Date.tsx

@@ -105,6 +105,8 @@ export class DateField extends React.Component<DateProps, DateState> {
 
     const value = getPropValue(this.props);
 
+    // 主要是给 fromNow 用的
+    let date;
     if (value) {
       let ISODate = moment(value, moment.ISO_8601);
       let NormalDate = moment(value, valueFormat);
@@ -114,6 +116,10 @@ export class DateField extends React.Component<DateProps, DateState> {
         : NormalDate.isValid()
         ? NormalDate.format(format)
         : false;
+
+      if (viewValue) {
+        date = viewValue as string;
+      }
     }
 
     if (fromNow) {
@@ -126,7 +132,14 @@ export class DateField extends React.Component<DateProps, DateState> {
       viewValue
     );
 
-    return <span className={cx('DateField', className)}>{viewValue}</span>;
+    return (
+      <span
+        className={cx('DateField', className)}
+        title={fromNow ? date : undefined}
+      >
+        {viewValue}
+      </span>
+    );
   }
 }
 

package/src/renderers/Form/TreeSelect.tsx

@@ -18,7 +18,12 @@ import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import Spinner from '../../components/Spinner';
 import ResultBox from '../../components/ResultBox';
-import {autobind, getTreeAncestors, isMobile, createObject} from '../../utils/helper';
+import {
+  autobind,
+  getTreeAncestors,
+  isMobile,
+  createObject
+} from '../../utils/helper';
 import {findDOMNode} from 'react-dom';
 import {normalizeOptions} from '../../components/Select';
 import {Action} from '../../types';
@@ -127,7 +132,7 @@ export default class TreeSelectControl extends React.Component<
     pathSeparator: '/'
   };
 
-  treeRef: any
+  treeRef: any;
 
   container: React.RefObject<HTMLDivElement> = React.createRef();
 
@@ -417,13 +422,8 @@ export default class TreeSelectControl extends React.Component<
 
   @autobind
   handleResultChange(value: Array<Option>) {
-    const {
-      joinValues,
-      extractValue,
-      delimiter,
-      valueField,
-      multiple
-    } = this.props;
+    const {joinValues, extractValue, delimiter, valueField, multiple} =
+      this.props;
 
     let newValue: any = Array.isArray(value) ? value.concat() : [];
 
@@ -452,9 +452,12 @@ export default class TreeSelectControl extends React.Component<
   async resultChangeEvent(value: any) {
     const {onChange, dispatchEvent, data} = this.props;
 
-    const rendererEvent = await dispatchEvent('change', createObject(data, {
-      value
-    }));
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value
+      })
+    );
 
     if (rendererEvent?.prevented) {
       return;

package/src/renderers/Nav.tsx

@@ -230,6 +230,7 @@ export interface NavigationProps
   onSelect?: (item: Link) => void | false;
   onToggle?: (item: Link, forceFold?: boolean) => void;
   onDragUpdate?: (dropInfo: IDropInfo) => void;
+  onOrderChange?: (res: Link[]) => void;
   togglerClassName?: string;
   links?: Array<Link>;
   loading?: boolean;
@@ -858,6 +859,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         }
       }
       this.props.updateConfig(links, 'update');
+      this.props.onOrderChange!(links);
       await this.saveOrder(
         mapTree(links, (link: Link) => {
           // 清除内部加的字段
@@ -871,6 +873,10 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
       );
     }
 
+    /**
+     * @description 在接口存在的时候，调用接口保存排序结果
+     * @param links 排序后的结果
+     */
     async saveOrder(links: Links) {
       const {saveOrderApi, env, data, reload} = this.props;
       if (saveOrderApi && isEffectiveApi(saveOrderApi)) {
@@ -880,7 +886,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
           {method: 'post'}
         );
         reload();
-      } else {
+      } else if (!this.props.onOrderChange) {
         env.alert('NAV saveOrderApi is required!');
       }
     }

package/src/renderers/Page.tsx

@@ -12,7 +12,12 @@ import {
   FunctionPropertyNames
 } from '../types';
 import {filter, evalExpression} from '../utils/tpl';
-import {isVisible, autobind, bulkBindFunctions} from '../utils/helper';
+import {
+  isVisible,
+  autobind,
+  bulkBindFunctions,
+  isObjectShallowModified
+} from '../utils/helper';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import Alert from '../components/Alert2';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
@@ -422,7 +427,9 @@ export default class Page extends React.Component<PageProps> {
       JSON.stringify(props.cssVars) !== JSON.stringify(prevProps.cssVars)
     ) {
       this.updateVarStyle();
-    } else if (props.defaultData !== prevProps.defaultData) {
+    } else if (
+      isObjectShallowModified(prevProps.defaultData, props.defaultData)
+    ) {
       store.reInitData(props.defaultData);
     }
   }

package/src/renderers/Service.tsx

@@ -14,7 +14,13 @@ import {
   str2AsyncFunction
 } from '../utils/api';
 import {Spinner} from '../components';
-import {autobind, isEmpty, isVisible, qsstringify} from '../utils/helper';
+import {
+  autobind,
+  isEmpty,
+  isObjectShallowModified,
+  isVisible,
+  qsstringify
+} from '../utils/helper';
 import {
   BaseSchema,
   SchemaApi,
@@ -185,7 +191,7 @@ export default class Service extends React.Component<ServiceProps> {
       this.socket = this.fetchWSData(props.ws, store.data);
     }
 
-    if (props.defaultData !== prevProps.defaultData) {
+    if (isObjectShallowModified(prevProps.defaultData, props.defaultData)) {
       store.reInitData(props.defaultData);
     }
 

package/src/renderers/Table/exportExcel.ts

@@ -0,0 +1,289 @@
+/**
+ * 导出 Excel 功能
+ */
+
+import {filter} from '../../utils/tpl';
+import './ColumnToggler';
+import {TableStore} from '../../store/table';
+import {saveAs} from 'file-saver';
+import {getVariable, removeHTMLTag, createObject} from '../../utils/helper';
+import {
+  isPureVariable,
+  resolveVariableAndFilter
+} from '../../utils/tpl-builtin';
+import {BaseSchema} from '../../Schema';
+import {toDataURL, getImageDimensions} from '../../utils/image';
+import {TplSchema} from '../Tpl';
+import {MappingSchema} from '../Mapping';
+import {getSnapshot} from 'mobx-state-tree';
+import {DateSchema} from '../Date';
+import moment from 'moment';
+import type {TableProps, ExportExcelToolbar} from './index';
+
+/**
+ * 将 url 转成绝对地址
+ */
+const getAbsoluteUrl = (function () {
+  let link: HTMLAnchorElement;
+  return function (url: string) {
+    if (!link) link = document.createElement('a');
+    link.href = url;
+    return link.href;
+  };
+})();
+
+export async function exportExcel(
+  ExcelJS: any,
+  props: TableProps,
+  toolbar: ExportExcelToolbar
+) {
+  const {store, env, classnames: cx, translate: __, data} = props;
+  let columns = store.filteredColumns || [];
+
+  let rows = [];
+  let tmpStore;
+  let filename = 'data';
+  // 支持配置 api 远程获取
+  if (typeof toolbar === 'object' && toolbar.api) {
+    const res = await env.fetcher(toolbar.api, data);
+    if (!res.data) {
+      env.notify('warning', __('placeholder.noData'));
+      return;
+    }
+    if (Array.isArray(res.data)) {
+      rows = res.data;
+    } else {
+      rows = res.data.rows || res.data.items;
+    }
+    // 因为很多方法是 store 里的，所以需要构建 store 来处理
+    tmpStore = TableStore.create(getSnapshot(store));
+    tmpStore.initRows(rows);
+    rows = tmpStore.rows;
+  } else {
+    rows = store.rows;
+  }
+
+  if (typeof toolbar === 'object' && toolbar.filename) {
+    filename = filter(toolbar.filename, data, '| raw');
+  }
+
+  if (rows.length === 0) {
+    env.notify('warning', __('placeholder.noData'));
+    return;
+  }
+
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet('sheet', {
+    properties: {defaultColWidth: 15}
+  });
+  worksheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1}];
+
+  let exportColumnNames = toolbar.columns;
+
+  if (isPureVariable(exportColumnNames)) {
+    exportColumnNames = resolveVariableAndFilter(
+      exportColumnNames,
+      data,
+      '| raw'
+    );
+  }
+
+  // 自定义导出列配置
+  if (toolbar.exportColumns && Array.isArray(toolbar.exportColumns)) {
+    columns = toolbar.exportColumns;
+  }
+
+  const filteredColumns = exportColumnNames
+    ? columns.filter(column => {
+        const filterColumnsNames = exportColumnNames!;
+        if (column.name && filterColumnsNames.indexOf(column.name) !== -1) {
+          return true;
+        }
+        return false;
+      })
+    : columns;
+
+  const firstRowLabels = filteredColumns.map(column => {
+    return column.label;
+  });
+  const firstRow = worksheet.getRow(1);
+  firstRow.values = firstRowLabels;
+  worksheet.autoFilter = {
+    from: {
+      row: 1,
+      column: 1
+    },
+    to: {
+      row: 1,
+      column: firstRowLabels.length
+    }
+  };
+  // 用于 mapping source 的情况
+  const remoteMappingCache: any = {};
+  // 数据从第二行开始
+  let rowIndex = 1;
+  for (const row of rows) {
+    rowIndex += 1;
+    const sheetRow = worksheet.getRow(rowIndex);
+    let columIndex = 0;
+    for (const column of filteredColumns) {
+      columIndex += 1;
+      const name = column.name!;
+      const value = getVariable(row.data, name);
+      if (typeof value === 'undefined' && !(column as TplSchema).tpl) {
+        continue;
+      }
+      // 处理合并单元格
+      if (name in row.rowSpans) {
+        if (row.rowSpans[name] === 0) {
+          continue;
+        } else {
+          // start row, start column, end row, end column
+          worksheet.mergeCells(
+            rowIndex,
+            columIndex,
+            rowIndex + row.rowSpans[name] - 1,
+            columIndex
+          );
+        }
+      }
+
+      const type = (column as BaseSchema).type || 'plain';
+      // TODO: 这里很多组件都是拷贝对应渲染的逻辑实现的，导致
+      if (type === 'image' && value) {
+        try {
+          const imageData = await toDataURL(value);
+          const imageDimensions = await getImageDimensions(imageData);
+          let imageWidth = imageDimensions.width;
+          let imageHeight = imageDimensions.height;
+          // 限制一下图片高宽
+          const imageMaxSize = 100;
+          if (imageWidth > imageHeight) {
+            if (imageWidth > imageMaxSize) {
+              imageHeight = (imageMaxSize * imageHeight) / imageWidth;
+              imageWidth = imageMaxSize;
+            }
+          } else {
+            if (imageHeight > imageMaxSize) {
+              imageWidth = (imageMaxSize * imageWidth) / imageHeight;
+              imageHeight = imageMaxSize;
+            }
+          }
+          const imageMatch = imageData.match(/data:image\/(.*);/);
+          let imageExt = 'png';
+          if (imageMatch) {
+            imageExt = imageMatch[1];
+          }
+          // 目前 excel 只支持这些格式，所以其它格式直接输出 url
+          if (imageExt != 'png' && imageExt != 'jpeg' && imageExt != 'gif') {
+            sheetRow.getCell(columIndex).value = value;
+            continue;
+          }
+          const imageId = workbook.addImage({
+            base64: imageData,
+            extension: imageExt
+          });
+          const linkURL = getAbsoluteUrl(value);
+          worksheet.addImage(imageId, {
+            // 这里坐标位置是从 0 开始的，所以要减一
+            tl: {col: columIndex - 1, row: rowIndex - 1},
+            ext: {
+              width: imageWidth,
+              height: imageHeight
+            },
+            hyperlinks: {
+              tooltip: linkURL
+            }
+          });
+        } catch (e) {
+          console.warn(e.stack);
+        }
+      } else if (type == 'link') {
+        const linkURL = getAbsoluteUrl(value);
+        sheetRow.getCell(columIndex).value = {
+          text: value,
+          hyperlink: linkURL
+        };
+      } else if (type === 'mapping') {
+        // 拷贝自 Mapping.tsx
+        let map = (column as MappingSchema).map;
+        const source = (column as MappingSchema).source;
+        if (source) {
+          let sourceValue = source;
+          if (isPureVariable(source)) {
+            sourceValue = resolveVariableAndFilter(
+              source as string,
+              data,
+              '| raw'
+            );
+          }
+
+          const mapKey = JSON.stringify(source);
+          if (mapKey in remoteMappingCache) {
+            map = remoteMappingCache[mapKey];
+          } else {
+            const res = await env.fetcher(sourceValue, data);
+            if (res.data) {
+              remoteMappingCache[mapKey] = res.data;
+              map = res.data;
+            }
+          }
+        }
+
+        if (typeof value !== 'undefined' && map && (map[value] ?? map['*'])) {
+          const viewValue =
+            map[value] ??
+            (value === true && map['1']
+              ? map['1']
+              : value === false && map['0']
+              ? map['0']
+              : map['*']); // 兼容平台旧用法：即 value 为 true 时映射 1 ，为 false 时映射 0
+          sheetRow.getCell(columIndex).value = removeHTMLTag(viewValue);
+        } else {
+          sheetRow.getCell(columIndex).value = removeHTMLTag(value);
+        }
+      } else if (type === 'date') {
+        let viewValue;
+        const {
+          fromNow,
+          format = 'YYYY-MM-DD',
+          valueFormat = 'X'
+        } = column as DateSchema;
+        if (value) {
+          let ISODate = moment(value, moment.ISO_8601);
+          let NormalDate = moment(value, valueFormat);
+
+          viewValue = ISODate.isValid()
+            ? ISODate.format(format)
+            : NormalDate.isValid()
+            ? NormalDate.format(format)
+            : false;
+        }
+
+        if (fromNow) {
+          viewValue = moment(value).fromNow();
+        }
+        if (viewValue) {
+          sheetRow.getCell(columIndex).value = viewValue;
+        }
+      } else {
+        if ((column as TplSchema).tpl) {
+          sheetRow.getCell(columIndex).value = removeHTMLTag(
+            filter((column as TplSchema).tpl, createObject(data, row.data))
+          );
+        } else {
+          sheetRow.getCell(columIndex).value = value;
+        }
+      }
+    }
+  }
+
+  const buffer = await workbook.xlsx.writeBuffer();
+
+  if (buffer) {
+    var blob = new Blob([buffer], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    });
+    saveAs(blob, filename + '.xlsx');
+  }
+}