fix:走查问题-transfer表格模式下选中效果显示异常 amis-saas-5964

Change-Id: I7f64d63b5a14bd0a3506ddc97437d58a97ed22fa
This commit is contained in:
zhou999 2022-08-19 13:17:10 +08:00
parent 7f70f61ea5
commit 53f077224f
2 changed files with 45 additions and 25 deletions

View File

@ -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', {

View File

@ -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() {