test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Picker 优化,支持值展示用模板

Browse Source
This commit is contained in:
liaoxuezhi 2019-07-04 19:13:46 +08:00
parent 855ddc674f
commit 6f10d38c90
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/components/_crud.scss
View File

@ -17,7 +17,7 @@
&-value {
cursor: pointer;
vertical-align: top;
vertical-align: middle;
user-select: none;
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
display: inline-block;
@ -59,7 +59,7 @@
user-select: none;
margin-left: $gap-xs;
margin-top: $gap-xs;
vertical-align: top;
vertical-align: middle;
}
&-toolbar-item {

3
src/renderers/CRUD.tsx
View File

@ -25,6 +25,7 @@ import {evalExpression, filter} from '../utils/tpl';
import {isValidApi, buildApi} from '../utils/api';
import omit = require('lodash/omit');
import find = require('lodash/find');
import Html from '../components/Html';
interface CRUDProps extends RendererProps {
api?: Api;
@ -1264,7 +1265,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
</span>
<span className={cx('Crud-valueLabel')}>
{labelTpl
? filter(labelTpl, item)
? (<Html html={filter(labelTpl, item)} />)
: getVariable(item, labelField || 'label') || getVariable(item, primaryField || 'id')}
</span>
</div>

15
src/renderers/Form/Picker.tsx
View File

@ -12,8 +12,10 @@ import {
Action
} from '../../types';
import find = require('lodash/find');
import {anyChanged, autobind} from '../../utils/helper';
import {anyChanged, autobind, getVariable} from '../../utils/helper';
import findIndex = require('lodash/findIndex');
import Html from '../../components/Html';
import { filter } from '../../utils/tpl';
export interface PickerProps extends OptionsControlProps {
modalMode: 'dialog' | 'drawer';
@ -172,6 +174,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
classPrefix: ns,
selectedOptions,
labelField,
labelTpl,
disabled
} = this.props;
return (
@ -181,7 +184,11 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
'is-disabled': disabled
})}>
<span data-tooltip="删除" data-position="bottom" className={`${ns}Picker-valueIcon`} onClick={this.removeItem.bind(this, index)}>×</span>
<span className={`${ns}Picker-valueLabel`}>{item[labelField || 'label']}</span>
<span className={`${ns}Picker-valueLabel`}>
{labelTpl
? (<Html html={filter(labelTpl, item)} />)
: getVariable(item, labelField || 'label') || getVariable(item, 'id')}
</span>
</div>
))}
</div>
@ -235,13 +242,13 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
className={`${ns}Picker-pickBtn`}
tooltip="点击选择"
tooltipContainer={env && env.getModalContainer ? env.getModalContainer() : undefined}
level="link"
level="info"
size="sm"
disabled={disabled}
onClick={this.open}
iconOnly
>
<i className="fa fa-crosshairs" />
选定
</Button>
{render('modal', {