From 53f077224f4e49e7f372c37ab2001e91751c0ba1 Mon Sep 17 00:00:00 2001
From: zhou999 <zhousq809@163.com>
Date: Fri, 19 Aug 2022 13:17:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E8=B5=B0=E6=9F=A5=E9=97=AE=E9=A2=98-transf?=
 =?UTF-8?q?er=E8=A1=A8=E6=A0=BC=E6=A8=A1=E5=BC=8F=E4=B8=8B=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E6=95=88=E6=9E=9C=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=20amis-saas-5964?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: I7f64d63b5a14bd0a3506ddc97437d58a97ed22fa
---
 .../amis-editor/src/plugin/Form/Transfer.tsx  | 48 +++++++++++++++----
 .../src/renderer/TransferTableControl.tsx     | 22 +++------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/packages/amis-editor/src/plugin/Form/Transfer.tsx b/packages/amis-editor/src/plugin/Form/Transfer.tsx
index b77e9e52d..460266b13 100644
--- a/packages/amis-editor/src/plugin/Form/Transfer.tsx
+++ b/packages/amis-editor/src/plugin/Form/Transfer.tsx
@@ -37,7 +37,8 @@ export class TransferPlugin extends BasePlugin {
         value: 'caocao'
       }
     ],
-    selectMode: 'list'
+    selectMode: 'list',
+    resultListModeFollowSelect: false
   };
   previewSchema: any = {
     type: 'form',
@@ -213,8 +214,19 @@ export class TransferPlugin extends BasePlugin {
                   }
                 ],
                 onChange: (value: any, origin: any, item: any, form: any) => {
-                  form.setValueByName('options', undefined);
-                  form.setValueByName('value', "");
+                  form.setValues({
+                    options: undefined,
+                    columns: undefined,
+                    value: '',
+                    valueTpl: ''
+                  });
+                  // 主要解决直接设置value、valueTpl为undefined配置面板不生效问题，所以先设置''，后使用setTimout设置为undefined
+                  setTimeout(() => {
+                    form.setValues({
+                      value: undefined,
+                      valueTpl: undefined
+                    });
+                  }, 100);
                 }
               },
 
@@ -225,10 +237,26 @@ export class TransferPlugin extends BasePlugin {
 
               {
                 type: 'ae-transferTableControl',
-                name: 'options',
                 label: '数据',
                 visibleOn: 'data.selectMode === "table"',
-                mode: 'normal'
+                mode: 'normal',
+                // 自定义change函数
+                onValueChange: (
+                  type: 'options' | 'columns',
+                  data: any,
+                  onBulkChange: Function
+                ) => {
+                  if (type === 'options') {
+                    onBulkChange(data);
+                  }
+                  else if (type === 'columns') {
+                    const columns = data.columns;
+                    if (data.columns.length > 0) {
+                      data.valueTpl = `\${${columns[0].name}}`;
+                    }
+                    onBulkChange(data);
+                  }
+                }
               },
 
               getSchemaTpl('treeOptionControl', {
@@ -241,7 +269,8 @@ export class TransferPlugin extends BasePlugin {
               }),
 
               getSchemaTpl('menuTpl', {
-                label: tipedLabel('模板', '左侧选项渲染模板，支持JSX，变量使用\\${xx}')
+                label: tipedLabel('模板', '左侧选项渲染模板，支持JSX，变量使用\\${xx}'),
+                visibleOn: 'data.selectMode !== "table"',
               }),
 
               getSchemaTpl('formulaControl', {
@@ -262,10 +291,9 @@ export class TransferPlugin extends BasePlugin {
                 inputClassName: 'items-center',
                 options: [
                   {label: '列表形式', value: false},
-                  {label: '跟随左侧', value: true},
+                  {label: '跟随左侧', value: true}
                 ],
               },
-
               getSchemaTpl('switch', {
                 label: tipedLabel(
                   '可检索',
@@ -273,7 +301,6 @@ export class TransferPlugin extends BasePlugin {
                 ),
                 name: 'resultSearchable'
               }),
-          
               getSchemaTpl('sortable', {
                 label: '支持排序',
                 mode: 'horizontal',
@@ -287,7 +314,8 @@ export class TransferPlugin extends BasePlugin {
 
               getSchemaTpl('menuTpl', {
                 name: 'valueTpl',
-                label: tipedLabel('模板', '结果选项渲染模板，支持JSX，变量使用\\${xx}')
+                label: tipedLabel('模板', '结果选项渲染模板，支持JSX，变量使用\\${xx}'),
+                visibleOn: '!(data.selectMode === "table" && data.resultListModeFollowSelect)',
               }),
 
               getSchemaTpl('formulaControl', {
diff --git a/packages/amis-editor/src/renderer/TransferTableControl.tsx b/packages/amis-editor/src/renderer/TransferTableControl.tsx
index 2c5185720..3c13e0e20 100644
--- a/packages/amis-editor/src/renderer/TransferTableControl.tsx
+++ b/packages/amis-editor/src/renderer/TransferTableControl.tsx
@@ -300,7 +300,7 @@ const renderInput = (
 export default class TransferTableOption extends React.Component<OptionControlProps, {}> {
 
     addColumns() {
-        const { columns = [{ type: 'text', name: 'label' }] } = this.props.data;
+        const { columns = [{ type: 'text' }] } = this.props.data;
         return {
             type: 'action',
             actionType: 'dialog',
@@ -312,6 +312,7 @@ export default class TransferTableOption extends React.Component<OptionControlPr
                 closeOnEsc: true,
                 closeOnOutside: false,
                 showCloseButton: true,
+                onConfirm: (...args: Array<any>) => this.handleChange(args[2].columns, 'columns'),
                 body: [
                     {
                         name: 'columns',
@@ -322,7 +323,6 @@ export default class TransferTableOption extends React.Component<OptionControlPr
                         addButtonText: '新增一列',
                         draggable: false,
                         value: columns,
-                        onChange: (value: Array<Option>) => this.handleColumnsChange(value),
                         items: [
                             {
                                 type: 'input-text',
@@ -406,6 +406,7 @@ export default class TransferTableOption extends React.Component<OptionControlPr
                     closeOnOutside: false,
                     showCloseButton: true,
                     size: columns.length >= 6 ? 'md' : '',
+                    onConfirm: (...args: Array<any>) => this.handleChange(args[2].options, 'options'),
                     body: [{
                         name: 'options',
                         type: 'combo',
@@ -413,7 +414,6 @@ export default class TransferTableOption extends React.Component<OptionControlPr
                         draggable: true,
                         addButtonText: '新增',
                         value: options,
-                        onChange: (value: Array<Option>) => this.handleRowsChange(value),
                         items: [
                             ...columns.map((item: Option) => renderInput(item.name, item.label ?? '')),
                             renderInput('value', '值', true)
@@ -425,19 +425,11 @@ export default class TransferTableOption extends React.Component<OptionControlPr
     }
 
     @autobind
-    handleColumnsChange(value: Array<Option>) {
+    handleChange(value: Array<Option>, type: 'options' | 'columns') {
         const { data } = this.props;
-        const { onBulkChange } = this.props;
-        data.columns = value.map(item => omit(item, 'id'));
-        onBulkChange && onBulkChange(data);
-    }
-
-    @autobind
-    handleRowsChange(value: Array<Option>) {
-        const { data } = this.props;
-        const { onBulkChange } = this.props;
-        data.options = value;
-        onBulkChange && onBulkChange(data);
+        const { onBulkChange, onValueChange } = this.props;
+        data[type] = value;
+        onValueChange && onValueChange(type, data, onBulkChange);
     }
 
     render() {