amis 1.4.1 → 1.4.2-beta.13

package/src/renderers/Form/InputFile.tsx

@@ -18,8 +18,10 @@ import {dataMapping} from '../../utils/tpl-builtin';
 import {
   SchemaApi,
   SchemaClassName,
-  SchemaTokenizeableString
+  SchemaTokenizeableString,
+  SchemaUrlPath
 } from '../../Schema';
+import merge from 'lodash/merge';
 
 /**
  * File 文件上传控件
@@ -88,6 +90,11 @@ export interface FileControlSchema extends FormBaseControl {
    */
   downloadUrl?: SchemaApi;
 
+  /**
+   * 模板下载地址
+   */
+  templateUrl?: SchemaApi;
+
   /**
    * 默认 `file`, 如果你不想自己存储，则可以忽略此属性。
    * @default file
@@ -275,6 +282,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     extractValue: false,
     delimiter: ',',
     downloadUrl: '', // '/api/file/'
+    templateUrl: '',
     useChunk: 'auto',
     chunkSize: 5 * 1024 * 1024, // 文件大于5M， 自动分块上传
     startChunkApi: '/api/upload/startChunk',
@@ -356,11 +364,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     if (value && value instanceof Blob) {
       files = [value as any];
     } else if (value) {
-      files = (Array.isArray(value)
-        ? value
-        : joinValues
-        ? `${(value as any)[valueField] || value}`.split(delimiter)
-        : [value as any]
+      files = (
+        Array.isArray(value)
+          ? value
+          : joinValues
+          ? `${(value as any)[valueField] || value}`.split(delimiter)
+          : [value as any]
       )
         .map(item => FileControl.valueToFile(item, props) as FileValue)
         .filter(item => item);
@@ -386,6 +395,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     this.uploadBigFile = this.uploadBigFile.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
     this.syncAutoFill = this.syncAutoFill.bind(this);
+    this.downloadTpl = this.downloadTpl.bind(this);
   }
 
   componentDidMount() {
@@ -402,11 +412,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       let files: Array<FileValue> = [];
 
       if (value) {
-        files = (Array.isArray(value)
-          ? value
-          : joinValues && typeof value === 'string'
-          ? value.split(delimiter)
-          : [value as any]
+        files = (
+          Array.isArray(value)
+            ? value
+            : joinValues && typeof value === 'string'
+            ? value.split(delimiter)
+            : [value as any]
         )
           .map(item => {
             let obj = FileControl.valueToFile(
@@ -532,7 +543,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     e.preventDefault();
     e.stopPropagation();
 
-    const {data, env, downloadUrl} = this.props;
+    const {downloadUrl} = this.props;
     const urlField = this.props.urlField || 'url';
     const valueField = this.props.valueField || 'value';
 
@@ -547,10 +558,23 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         ? downloadUrl
         : `${fileUrl}`;
 
+    this.handleApi(api, file);
+  }
+
+  downloadTpl(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.handleApi(this.props.templateUrl || '');
+  }
+
+  handleApi(api: SchemaApi, payload?: object) {
+    const {data, env} = this.props;
     if (api) {
       const ctx = createObject(data, {
-        ...file
+        ...payload
       });
+
       const apiObject = normalizeApi(api);
 
       if (apiObject.method?.toLowerCase() === 'get' && !apiObject.data) {
@@ -851,8 +875,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange} = this.props;
-    if (!isEmpty(autoFill)) {
+    const {autoFill, multiple, onBulkChange, data} = this.props;
+    if (!isEmpty(autoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
@@ -864,7 +888,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
             }
           : files[0]
       );
-      onBulkChange && onBulkChange(toSync);
+      Object.keys(toSync).forEach(key => {
+        if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
+          toSync[key] = merge({}, data[key], toSync[key]);
+        }
+      });
+      onBulkChange(toSync);
     }
   }
 
@@ -1163,7 +1192,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       classnames: cx,
       translate: __,
       render,
-      downloadUrl
+      downloadUrl,
+      templateUrl
     } = this.props;
     let {files, uploading, error} = this.state;
     const nameField = this.props.nameField || 'name';
@@ -1186,6 +1216,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
 
     return (
       <div className={cx('FileControl', className)}>
+        {templateUrl ? (
+          <a
+            className={cx('FileControl-templateInfo')}
+            onClick={this.downloadTpl.bind(this)}
+          >
+            <Icon icon="download" className="icon" />
+            <span>{__('File.downloadTpl')}</span>
+          </a>
+          ) : null}
+
         <DropZone
           disabled={disabled}
           key="drop-zone"
@@ -1223,13 +1263,15 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                       onClick={this.handleSelect}
                     >
                       <Icon icon="upload" className="icon" />
-                      {!multiple && files.length
-                        ? __('File.repick')
-                        : multiple && files.length
-                        ? __('File.continueAdd')
-                        : btnLabel
-                        ? btnLabel
-                        : __('File.upload')}
+                      <span>
+                        {!multiple && files.length
+                          ? __('File.repick')
+                          : multiple && files.length
+                          ? __('File.continueAdd')
+                          : btnLabel
+                          ? btnLabel
+                          : __('File.upload')}
+                      </span>
                     </Button>
                   ) : null}
 

package/src/renderers/Form/InputImage.tsx

@@ -29,6 +29,8 @@ import {
   SchemaUrlPath
 } from '../../Schema';
 import {filter} from '../../utils/tpl';
+import isPlainObject from 'lodash/isPlainObject';
+import merge from 'lodash/merge';
 
 /**
  * Image 图片上传控件
@@ -790,8 +792,8 @@ export default class ImageControl extends React.Component<
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange} = this.props;
-    if (!isEmpty(autoFill)) {
+    const {autoFill, multiple, onBulkChange, data} = this.props;
+    if (!isEmpty(autoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
@@ -803,7 +805,13 @@ export default class ImageControl extends React.Component<
             }
           : files[0]
       );
-      onBulkChange && onBulkChange(toSync);
+
+      Object.keys(toSync).forEach(key => {
+        if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
+          toSync[key] = merge({}, data[key], toSync[key]);
+        }
+      });
+      onBulkChange(toSync);
     }
   }
 
@@ -1377,7 +1385,6 @@ export default class ImageControl extends React.Component<
                                     fixedSize ? fixedSizeClassName : ''
                                   )}
                                 >
-                                  <p>{__('File.uploading')}</p>
                                   <div className={cx('ImageControl-progress')}>
                                     <span
                                       style={{
@@ -1390,6 +1397,7 @@ export default class ImageControl extends React.Component<
                                       )}
                                     />
                                   </div>
+                                  <p>{__('File.uploading')}</p>
                                 </div>
                               </>
                             ) : (
@@ -1524,7 +1532,10 @@ export default class ImageControl extends React.Component<
                             thumbRatio={thumbRatio}
                           />
                         ) : (
-                          <Icon icon="plus" className="icon" />
+                          <>
+                            <Icon icon="plus" className="icon" />
+                            <span>{__('File.upload')}</span>
+                          </>
                         )}
 
                         {isFocused ? (

package/src/renderers/Form/Item.tsx

@@ -314,7 +314,7 @@ export interface FormItemProps extends RendererProps {
     submitOnChange?: boolean,
     changeImmediately?: boolean
   ) => void;
-  onBulkChange: (
+  onBulkChange?: (
     values: {[propName: string]: any},
     submitOnChange?: boolean
   ) => void;
@@ -1089,7 +1089,8 @@ export const detectProps = [
   'items',
   'showCounter',
   'minLength',
-  'maxLength'
+  'maxLength',
+  'embed'
 ];
 
 export function asFormItem(config: Omit<FormItemConfig, 'component'>) {

package/src/renderers/Form/Options.tsx

@@ -48,6 +48,8 @@ import {
   SchemaObject,
   SchemaTokenizeableString
 } from '../../Schema';
+import isPlainObject from 'lodash/isPlainObject';
+import merge from 'lodash/merge';
 
 export {Option};
 
@@ -270,7 +272,8 @@ export function registerOptionsControl(config: OptionsConfig) {
       : [];
     static ComposedComponent = Control;
 
-    reaction?: () => void;
+    toDispose: Array<() => void> = [];
+
     input: any;
     mounted = false;
 
@@ -302,9 +305,18 @@ export function registerOptionsControl(config: OptionsConfig) {
           data
         );
 
-        this.reaction = reaction(
-          () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
-          () => this.mounted && this.forceUpdate()
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
+            () => this.mounted && this.forceUpdate()
+          )
+        );
+
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify(formItem.options),
+            () => this.mounted && this.syncAutoFill(formItem.tmpValue)
+          )
         );
         // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
         if (
@@ -432,14 +444,20 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     componentWillUnmount() {
       this.props.removeHook?.(this.reload, 'init');
-      this.reaction?.();
+      this.toDispose.forEach(fn => fn());
+      this.toDispose = [];
     }
 
     syncAutoFill(value: any) {
       const {autoFill, multiple, onBulkChange, data} = this.props;
       const formItem = this.props.formItem as IFormItemStore;
 
-      if (autoFill && !isEmpty(autoFill) && formItem.filteredOptions.length) {
+      if (
+        onBulkChange &&
+        autoFill &&
+        !isEmpty(autoFill) &&
+        formItem.filteredOptions.length
+      ) {
         const selectedOptions = formItem.getSelectedOptions(value);
         const toSync = dataMapping(
           autoFill,
@@ -471,7 +489,14 @@ export function registerOptionsControl(config: OptionsConfig) {
                 selectedOptions[0]
               )
         );
-        onBulkChange?.(toSync);
+
+        Object.keys(toSync).forEach(key => {
+          if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
+            toSync[key] = merge({}, data[key], toSync[key]);
+          }
+        });
+
+        onBulkChange(toSync);
       }
     }
 

package/src/renderers/Form/Picker.tsx

@@ -397,14 +397,15 @@ export default class PickerControl extends React.PureComponent<
       options,
       multiple,
       valueField,
-      embed
+      embed,
+      source
     } = this.props;
 
     return render('modal-body', this.state.schema, {
       value: selectedOptions,
       valueField,
       primaryField: valueField,
-      options: options,
+      options: source ? [] : options,
       multiple,
       onSelect: embed ? this.handleChange : undefined,
       ref: this.crudRef,

package/src/renderers/Form/Select.tsx

@@ -14,6 +14,9 @@ import {isEffectiveApi} from '../../utils/api';
 import {isEmpty, createObject, autobind} from '../../utils/helper';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {SchemaApi} from '../../Schema';
+import Spinner from '../../components/Spinner';
+import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
+import TransferDropDown from '../../components/TransferDropDown';
 
 /**
  * Select 下拉选择框。
@@ -28,11 +31,6 @@ export interface SelectControlSchema extends FormOptionsControl {
    */
   autoComplete?: SchemaApi;
 
-  /**
-   * 是否可以搜索值
-   */
-  searchable?: boolean;
-
   /**
    * 可以自定义菜单展示。
    */
@@ -42,6 +40,51 @@ export interface SelectControlSchema extends FormOptionsControl {
    * 边框模式，全边框，还是半边框，或者没边框。
    */
   borderMode?: 'full' | 'half' | 'none';
+
+  /**
+   * 勾选展示模式
+   */
+  selectMode?: 'table' | 'group' | 'tree' | 'chained' | 'associated';
+
+  /**
+   * 当 selectMode 为 associated 时用来定义左侧的选项
+   */
+  leftOptions?: Array<Option>;
+
+  /**
+   * 当 selectMode 为 associated 时用来定义左侧的选择模式
+   */
+  leftMode?: 'tree' | 'list';
+
+  /**
+   * 当 selectMode 为 associated 时用来定义右侧的选择模式
+   */
+  rightMode?: 'table' | 'list' | 'tree' | 'chained';
+
+  /**
+   * 搜索结果展示模式
+   */
+  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
+
+  /**
+   * 当 selectMode 为 table 时定义表格列信息。
+   */
+  columns?: Array<any>;
+
+  /**
+   * 当 searchResultMode 为 table 时定义表格列信息。
+   */
+  searchResultColumns?: Array<any>;
+
+  /**
+   * 可搜索？
+   */
+  searchable?: boolean;
+
+  /**
+   * 搜索 API
+   */
+  searchApi?: SchemaApi;
 }
 
 export interface SelectProps extends OptionsControlProps {
@@ -220,6 +263,18 @@ export default class SelectControl extends React.Component<SelectProps, any> {
     reload && reload();
   }
 
+  option2value() {}
+
+  renderOtherMode() {
+    const {selectMode, ...rest} = this.props;
+    return (
+      <TransferDropdownRenderer
+        {...rest}
+        selectMode={selectMode === 'group' ? 'list' : selectMode}
+      />
+    );
+  }
+
   render() {
     let {
       autoComplete,
@@ -241,6 +296,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       render,
       menuTpl,
       borderMode,
+      selectMode,
       ...rest
     } = this.props;
 
@@ -250,25 +306,110 @@ export default class SelectControl extends React.Component<SelectProps, any> {
 
     return (
       <div className={cx(`${classPrefix}SelectControl`, className)}>
-        <Select
-          {...rest}
-          borderMode={borderMode}
-          placeholder={placeholder}
-          multiple={multiple || multi}
-          ref={this.inputRef}
+        {['table', 'list', 'group', 'tree', 'chained', 'associated'].includes(
+          selectMode
+        ) ? (
+          this.renderOtherMode()
+        ) : (
+          <Select
+            {...rest}
+            borderMode={borderMode}
+            placeholder={placeholder}
+            multiple={multiple || multi}
+            ref={this.inputRef}
+            value={selectedOptions}
+            options={options}
+            loadOptions={
+              isEffectiveApi(autoComplete) ? this.lazyloadRemote : undefined
+            }
+            creatable={creatable}
+            searchable={searchable || !!autoComplete}
+            onChange={this.changeValue}
+            loading={loading}
+            noResultsText={noResultsText}
+            renderMenu={menuTpl ? this.renderMenu : undefined}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+export interface TransferDropDownProps
+  extends OptionsControlProps,
+    Omit<
+      TransferControlSchema,
+      | 'type'
+      | 'options'
+      | 'inputClassName'
+      | 'className'
+      | 'descriptionClassName'
+    > {
+  borderMode?: 'full' | 'half' | 'none';
+}
+
+class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
+  render() {
+    const {
+      className,
+      classnames: cx,
+      selectedOptions,
+      sortable,
+      loading,
+      searchable,
+      searchResultMode,
+      showArrow,
+      deferLoad,
+      disabled,
+      selectTitle,
+      selectMode,
+      multiple,
+      columns,
+      leftMode,
+      borderMode
+    } = this.props;
+
+    // 目前 LeftOptions 没有接口可以动态加载
+    // 为了方便可以快速实现动态化，让选项的第一个成员携带
+    // LeftOptions 信息
+    let {options, leftOptions, leftDefaultValue} = this.props;
+    if (
+      selectMode === 'associated' &&
+      options &&
+      options.length === 1 &&
+      options[0].leftOptions &&
+      Array.isArray(options[0].children)
+    ) {
+      leftOptions = options[0].leftOptions;
+      leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
+      options = options[0].children;
+    }
+
+    return (
+      <>
+        <TransferDropDown
+          selectMode={selectMode}
+          className={className}
           value={selectedOptions}
+          disabled={disabled}
           options={options}
-          loadOptions={
-            isEffectiveApi(autoComplete) ? this.lazyloadRemote : undefined
-          }
-          creatable={creatable}
-          searchable={searchable || !!autoComplete}
-          onChange={this.changeValue}
-          loading={loading}
-          noResultsText={noResultsText}
-          renderMenu={menuTpl ? this.renderMenu : undefined}
+          onChange={this.handleChange}
+          option2value={this.option2value}
+          sortable={sortable}
+          searchResultMode={searchResultMode}
+          onSearch={searchable ? this.handleSearch : undefined}
+          showArrow={showArrow}
+          onDeferLoad={deferLoad}
+          selectTitle={selectTitle}
+          multiple={multiple}
+          columns={columns}
+          leftMode={leftMode}
+          leftOptions={leftOptions}
+          borderMode={borderMode}
         />
-      </div>
+
+        <Spinner overlay key="info" show={loading} />
+      </>
     );
   }
 }