amis 1.3.5-beta.7 → 1.4.0

package/src/renderers/Form/InputImage.tsx

@@ -110,6 +110,16 @@ export interface ImageControlSchema extends FormBaseControl {
         scalable?: boolean;
       };
 
+  /**
+   * 裁剪后的图片类型
+   */
+  cropFormat?: string;
+
+  /**
+   * 裁剪后的质量
+   */
+  cropQuality?: number;
+
   /**
    * 是否允许二次裁剪。
    */
@@ -862,14 +872,19 @@ export default class ImageControl extends React.Component<
   }
 
   handleCrop() {
-    this.cropper.getCroppedCanvas().toBlob((file: File) => {
-      this.addFiles([file]);
-      this.setState({
-        cropFile: undefined,
-        locked: false,
-        lockedReason: ''
-      });
-    });
+    const {cropFormat, cropQuality} = this.props;
+    this.cropper.getCroppedCanvas().toBlob(
+      (file: File) => {
+        this.addFiles([file]);
+        this.setState({
+          cropFile: undefined,
+          locked: false,
+          lockedReason: ''
+        });
+      },
+      cropFormat || 'image/png',
+      cropQuality || 1
+    );
   }
 
   cancelCrop() {

package/src/renderers/Form/InputTable.tsx

@@ -30,6 +30,26 @@ export interface TableControlSchema
    */
   addable?: boolean;
 
+  /**
+   * 可复制新增
+   */
+  copyable?: boolean;
+
+  /**
+   * 复制按钮文字
+   */
+  copyBtnLabel?: string;
+
+  /**
+   * 复制按钮图标
+   */
+  copyBtnIcon?: string;
+
+  /**
+   * 是否显示复制按钮
+   */
+  copyAddBtn?: boolean;
+
   /**
    * 是否可以拖拽排序
    */
@@ -41,12 +61,12 @@ export interface TableControlSchema
   addApi?: SchemaApi;
 
   /**
-   * 新增按钮
+   * 新增按钮文字
    */
   addBtnLabel?: string;
 
   /**
-   * 新增图标
+   * 新增按钮图标
    */
   addBtnIcon?: string;
 
@@ -73,12 +93,12 @@ export interface TableControlSchema
   /**
    * 更新按钮名称
    */
-  updateBtnLabel?: string;
+  editBtnLabel?: string;
 
   /**
    * 更新按钮图标
    */
-  updateBtnIcon?: string;
+  editBtnIcon?: string;
 
   /**
    * 确认按钮文字
@@ -172,7 +192,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     placeholder: '空',
     scaffold: {},
     addBtnIcon: 'plus',
-    updateBtnIcon: 'pencil',
+    copyBtnIcon: 'copy',
+    editBtnIcon: 'pencil',
     deleteBtnIcon: 'minus',
     confirmBtnIcon: 'check',
     cancelBtnIcon: 'close',
@@ -188,6 +209,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'showAddBtn',
     'addable',
     'removable',
+    'copyable',
     'editable',
     'addApi',
     'updateApi',
@@ -423,6 +445,26 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     return onAction && onAction(action, ctx, ...rest);
   }
 
+  copyItem(index: number) {
+    const {needConfirm} = this.props;
+    const items = this.state.items.concat();
+
+    items.splice(index + 1, 0, items[index]);
+    index = Math.min(index + 1, items.length - 1);
+    this.setState(
+      {
+        items
+      },
+      () => {
+        if (needConfirm === false) {
+          this.emitValue();
+        } else {
+          this.startEdit(index, true);
+        }
+      }
+    );
+  }
+
   addItem(index: number) {
     const {needConfirm, scaffold, columns} = this.props;
     const items = this.state.items.concat();
@@ -653,6 +695,38 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       });
     }
 
+    if (props.copyable && props.showCopyBtn !== false) {
+      btns.push({
+        children: ({
+          key,
+          rowIndex,
+          offset
+        }: {
+          key: any;
+          rowIndex: number;
+          offset: number;
+        }) =>
+          ~this.state.editIndex && needConfirm !== false ? null : (
+            <Button
+              classPrefix={ns}
+              size="sm"
+              key={key}
+              level="link"
+              tooltip={__('Table.copyRow')}
+              tooltipContainer={
+                env && env.getModalContainer ? env.getModalContainer : undefined
+              }
+              onClick={this.copyItem.bind(this, rowIndex + offset, undefined)}
+            >
+              {props.copyBtnLabel ? <span>{props.copyBtnLabel}</span> : null}
+              {props.copyBtnIcon ? (
+                <Icon icon={props.copyBtnIcon} className="icon" />
+              ) : null}
+            </Button>
+          )
+      });
+    }
+
     if (props.needConfirm === false) {
       columns = columns.map(column => {
         const quickEdit = column.quickEdit;
@@ -716,11 +790,16 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 }
                 onClick={() => this.startEdit(rowIndex + offset)}
               >
-                {props.updateBtnLabel ? (
-                  <span>{props.updateBtnLabel}</span>
+                {props.updateBtnLabel || props.editBtnLabel ? (
+                  <span>{props.updateBtnLabel || props.editBtnLabel}</span>
                 ) : null}
-                {props.updateBtnIcon ? (
-                  <Icon icon={props.updateBtnIcon} className="icon" />
+                {/* 兼容之前的写法 */}
+                {typeof props.updateBtnIcon !== 'undefined' ? (
+                  props.updateBtnIcon ? (
+                    <Icon icon={props.updateBtnIcon} className="icon" />
+                  ) : null
+                ) : props.editBtnIcon ? (
+                  <Icon icon={props.editBtnIcon} className="icon" />
                 ) : null}
               </Button>
             )

package/src/renderers/Json.tsx

@@ -97,6 +97,15 @@ export class JSONField extends React.Component<JSONProps, object> {
       }
     }
 
+    let jsonThemeValue = jsonTheme;
+    if (isPureVariable(jsonTheme)) {
+      jsonThemeValue = resolveVariableAndFilter(
+        jsonTheme,
+        this.props.data,
+        '| raw'
+      );
+    }
+
     // JsonView 只支持对象，所以不是对象格式需要转成对象格式。
     if (data && ~['string', 'number'].indexOf(typeof data)) {
       data = {
@@ -112,7 +121,7 @@ export class JSONField extends React.Component<JSONProps, object> {
           <JsonView
             name={false}
             src={data}
-            theme={(jsonTheme as any) ?? 'rjv-default'}
+            theme={(jsonThemeValue as any) ?? 'rjv-default'}
             shouldCollapse={this.shouldExpandNode}
             enableClipboard={false}
             iconStyle="square"

package/src/renderers/Page.tsx

@@ -371,6 +371,8 @@ export default class Page extends React.Component<PageProps> {
       JSON.stringify(props.cssVars) !== JSON.stringify(prevProps.cssVars)
     ) {
       this.updateVarStyle();
+    } else if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
     }
   }
 

package/src/renderers/Service.tsx

@@ -7,7 +7,12 @@ import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Scoped, {ScopedContext, IScopedContext} from '../Scoped';
 import {observer} from 'mobx-react';
-import {isApiOutdated, isEffectiveApi} from '../utils/api';
+import {
+  buildApi,
+  isApiOutdated,
+  isEffectiveApi,
+  str2AsyncFunction
+} from '../utils/api';
 import {Spinner} from '../components';
 import {autobind, isEmpty, isVisible, qsstringify} from '../utils/helper';
 import {
@@ -40,6 +45,11 @@ export interface ServiceSchema extends BaseSchema {
    */
   ws?: string;
 
+  /**
+   * 通过调用外部函数来获取数据
+   */
+  dataProvider?: string | Function;
+
   /**
    * 内容区域
    */
@@ -111,6 +121,8 @@ export default class Service extends React.Component<ServiceProps> {
   // 主要是用于关闭 socket
   socket: any;
 
+  dataProviderUnsubscribe?: Function;
+
   static defaultProps: Partial<ServiceProps> = {
     messages: {
       fetchFailed: 'fetchFailed'
@@ -130,6 +142,8 @@ export default class Service extends React.Component<ServiceProps> {
     this.initInterval = this.initInterval.bind(this);
     this.afterDataFetch = this.afterDataFetch.bind(this);
     this.afterSchemaFetch = this.afterSchemaFetch.bind(this);
+    this.runDataProvider = this.runDataProvider.bind(this);
+    this.dataProviderSetData = this.dataProviderSetData.bind(this);
   }
 
   componentDidMount() {
@@ -168,12 +182,21 @@ export default class Service extends React.Component<ServiceProps> {
       if (this.socket) {
         this.socket.close();
       }
-      this.socket = store.fetchWSData(props.ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(props.ws, store.data);
+    }
+
+    if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
+    }
+
+    if (props.dataProvider !== prevProps.dataProvider) {
+      this.runDataProvider();
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
+    this.runDataProviderUnsubscribe();
     clearTimeout(this.timer);
     if (this.socket && this.socket.close) {
       this.socket.close();
@@ -189,6 +212,7 @@ export default class Service extends React.Component<ServiceProps> {
       ws,
       initFetch,
       initFetchOn,
+      dataProvider,
       store,
       messages: {fetchSuccess, fetchFailed}
     } = this.props;
@@ -212,8 +236,82 @@ export default class Service extends React.Component<ServiceProps> {
     }
 
     if (ws) {
-      this.socket = store.fetchWSData(ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(ws, store.data);
     }
+
+    if (dataProvider) {
+      this.runDataProvider();
+    }
+  }
+
+  // 使用外部函数获取数据
+  async runDataProvider() {
+    this.runDataProviderUnsubscribe();
+    const {dataProvider, store} = this.props;
+    let dataProviderFunc = dataProvider;
+
+    if (typeof dataProvider === 'string' && dataProvider) {
+      dataProviderFunc = str2AsyncFunction(dataProvider, 'data', 'setData')!;
+    }
+    if (typeof dataProviderFunc === 'function') {
+      const unsubscribe = await dataProviderFunc(
+        store.data,
+        this.dataProviderSetData
+      );
+      if (typeof unsubscribe === 'function') {
+        this.dataProviderUnsubscribe = unsubscribe;
+      }
+    }
+  }
+
+  // 运行销毁外部函数的方法
+  runDataProviderUnsubscribe() {
+    if (typeof this.dataProviderUnsubscribe === 'function') {
+      try {
+        this.dataProviderUnsubscribe();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+
+  // 外部函数回调更新数据
+  dataProviderSetData(data: any) {
+    if (!this.mounted) {
+      return;
+    }
+    const {store} = this.props;
+    store.updateData(data, undefined, false);
+    store.setHasRemoteData();
+  }
+
+  // 使用 websocket 获取使用，因为有异步所以放这里而不是 store 实现
+  fetchWSData(ws: string | Api, data: any) {
+    const {env, store} = this.props;
+    const wsApi = buildApi(ws, data);
+
+    env.wsFetcher(
+      wsApi,
+      (data: any) => {
+        let returndata = data;
+        if ('status' in data && 'data' in data) {
+          returndata = data.data;
+          if (data.status !== 0) {
+            store.updateMessage(data.msg, true);
+            env.notify('error', data.msg);
+            return;
+          }
+        }
+        store.updateData(returndata, undefined, false);
+        store.setHasRemoteData();
+        // 因为 WebSocket 只会获取纯数据，所以没有 msg 之类的
+        this.afterDataFetch({ok: true, data: returndata});
+      },
+      (error: any) => {
+        store.updateMessage(error, true);
+        env.notify('error', error);
+      }
+    );
   }
 
   afterDataFetch(result: any) {

package/src/renderers/Steps.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {BaseSchema} from '../Schema';
+import {BaseSchema, SchemaCollection} from '../Schema';
 import Steps, {StepStatus} from '../components/Steps';
 import {
   RemoteOptionsProps,
@@ -14,12 +14,12 @@ export type StepSchema = {
   /**
    * 标题
    */
-  title: string;
+  title: string | SchemaCollection;
 
   /**
    * 子标题
    */
-  subTitle?: string;
+  subTitle?: string | SchemaCollection;
 
   /**
    * 图标
@@ -31,7 +31,7 @@ export type StepSchema = {
   /**
    * 描述
    */
-  description?: string;
+  description?: string | SchemaCollection;
 } & Omit<BaseSchema, 'type'>;
 
 export interface StepsSchema extends BaseSchema {
@@ -82,7 +82,8 @@ export function StepsCmpt(props: StepsProps) {
     mode,
     data,
     source,
-    config
+    config,
+    render
   } = props;
   
   const stepsRow =
@@ -90,7 +91,9 @@ export function StepsCmpt(props: StepsProps) {
     config ||
     steps ||
     [];
-
+  const resolveRender = (val?: string | SchemaCollection) => typeof val === 'string'
+    ? filter(val, data)
+    : val && render('inner', val);
   const value = getPropValue(props) ?? 0;
   const resolveValue =
     typeof value === 'string' && isNaN(+value)
@@ -105,9 +108,9 @@ export function StepsCmpt(props: StepsProps) {
     return {
       ...step,
       status: stepStatus,
-      title: filter(step.title, data),
-      subTitle: filter(step.subTitle || step.value, data),
-      description: filter(step.description, data)
+      title: resolveRender(step.title),
+      subTitle: resolveRender(step.subTitle),
+      description: resolveRender(step.description)
     }
   });
 

package/src/renderers/Table/TableBody.tsx

@@ -24,7 +24,7 @@ export interface TableBodyProps extends LocaleProps {
     item: IRow,
     props: any
   ) => React.ReactNode;
-  onCheck: (item: IRow) => void;
+  onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
   onQuickChange?: (
     item: IRow,
     values: object,

package/src/renderers/Table/TableContent.tsx

@@ -32,7 +32,7 @@ export interface TableContentProps extends LocaleProps {
     item: IRow,
     props: any
   ) => React.ReactNode;
-  onCheck: (item: IRow) => void;
+  onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
   onQuickChange?: (
     item: IRow,
     values: object,

package/src/renderers/Table/index.tsx

@@ -35,6 +35,7 @@ import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
 import {TableContent} from './TableContent';
 import {
   BaseSchema,
+  SchemaApi,
   SchemaClassName,
   SchemaObject,
   SchemaTokenizeableString,
@@ -346,6 +347,12 @@ export interface TableProps extends RendererProps {
   reUseRow?: boolean;
 }
 
+type ExportExcelToolbar = SchemaNode & {
+  api?: SchemaApi;
+  columns?: string[];
+  filename?: string;
+};
+
 /**
  * 将 url 转成绝对地址
  */
@@ -682,8 +689,14 @@ export default class Table extends React.Component<TableProps, object> {
     onAction(e, action, ctx);
   }
 
-  handleCheck(item: IRow) {
-    item.toggle();
+  handleCheck(item: IRow, value: boolean, shift?: boolean) {
+    const {store} = this.props;
+    if (shift) {
+      store.toggleShift(item);
+    } else {
+      item.toggle();
+    }
+
     this.syncSelected();
   }
 
@@ -2004,7 +2017,7 @@ export default class Table extends React.Component<TableProps, object> {
     );
   }
 
-  renderExportExcel(toolbar: SchemaNode) {
+  renderExportExcel(toolbar: ExportExcelToolbar) {
     const {
       store,
       env,
@@ -2028,8 +2041,8 @@ export default class Table extends React.Component<TableProps, object> {
             let tmpStore;
             let filename = 'data';
             // 支持配置 api 远程获取
-            if (typeof toolbar === 'object' && (toolbar as Schema).api) {
-              const res = await env.fetcher((toolbar as Schema).api, data);
+            if (typeof toolbar === 'object' && toolbar.api) {
+              const res = await env.fetcher(toolbar.api, data);
               if (!res.data) {
                 env.notify('warning', __('placeholder.noData'));
                 return;
@@ -2047,8 +2060,8 @@ export default class Table extends React.Component<TableProps, object> {
               rows = store.rows;
             }
 
-            if (typeof toolbar === 'object' && (toolbar as Schema).filename) {
-              filename = filter((toolbar as Schema).filename, data, '| raw');
+            if (typeof toolbar === 'object' && toolbar.filename) {
+              filename = filter(toolbar.filename, data, '| raw');
             }
 
             if (rows.length === 0) {
@@ -2062,7 +2075,17 @@ export default class Table extends React.Component<TableProps, object> {
             });
             worksheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1}];
 
-            const firstRowLabels = columns.map(column => {
+            const filteredColumns = toolbar.columns
+              ? columns.filter(column => {
+                  const filterColumnsNames = toolbar.columns!;
+                  if (filterColumnsNames.indexOf(column.name) !== -1) {
+                    return true;
+                  }
+                  return false;
+                })
+              : columns;
+
+            const firstRowLabels = filteredColumns.map(column => {
               return column.label;
             });
             const firstRow = worksheet.getRow(1);
@@ -2077,14 +2100,15 @@ export default class Table extends React.Component<TableProps, object> {
                 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;
-              const cols = columns as any[]; // 为啥 ts 4.4 得这么做？
-              for (const column of cols) {
+              for (const column of filteredColumns) {
                 columIndex += 1;
                 const name = column.name!;
                 const value = getVariable(row.data, name);
@@ -2170,7 +2194,30 @@ export default class Table extends React.Component<TableProps, object> {
                   };
                 } else if (type === 'mapping') {
                   // 拷贝自 Mapping.tsx
-                  const map = (column as MappingSchema).map;
+                  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 &&
@@ -2183,9 +2230,10 @@ export default class Table extends React.Component<TableProps, object> {
                         : value === false && map['0']
                         ? map['0']
                         : map['*']); // 兼容平台旧用法：即 value 为 true 时映射 1 ，为 false 时映射 0
-                    sheetRow.getCell(columIndex).value = viewValue;
+                    sheetRow.getCell(columIndex).value =
+                      removeHTMLTag(viewValue);
                   } else {
-                    sheetRow.getCell(columIndex).value = value;
+                    sheetRow.getCell(columIndex).value = removeHTMLTag(value);
                   }
                 } else {
                   if ((column as TplSchema).tpl) {

package/src/store/modal.ts

@@ -24,6 +24,10 @@ export const ModalStore = ServiceStore.named('ModalStore')
       setFormData(obj: any) {
         self.form = obj;
       },
+      reset() {
+        self.form = {};
+        self.reInitData({}, true);
+      },
 
       setResizeCoord(value: number) {
         self.resizeCoord = value;

package/src/store/service.ts

@@ -140,24 +140,6 @@ export const ServiceStore = iRendererStore
       }
     });
 
-    const fetchWSData = (ws: string, afterDataFetch: (data: any) => any) => {
-      const env = getEnv(self);
-
-      env.wsFetcher(
-        ws,
-        (data: any) => {
-          self.updateData(data, undefined, false);
-          setHasRemoteData();
-          // 因为 WebSocket 只会获取纯数据，所以没有 msg 之类的
-          afterDataFetch({ok: true, data: data});
-        },
-        (error: any) => {
-          updateMessage(error, true);
-          env.notify('error', error);
-        }
-      );
-    };
-
     const setHasRemoteData = () => {
       self.hasRemoteData = true;
     };
@@ -505,7 +487,6 @@ export const ServiceStore = iRendererStore
       markBusying,
       fetchInitData,
       fetchData,
-      fetchWSData,
       reInitData,
       updateMessage,
       clearMessage,