mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat: optinos 支持配置新增和编辑的弹框属性；修复编辑属性 popover 无法显示问题；去掉代码里遗漏的 component… (#5085)
* feat: optinos 支持配置新增和编辑的弹框属性；修复编辑属性 popover 无法显示问题；去掉代码里遗漏的 componentWillMount * 支持外部代码实现删除逻辑
This commit is contained in:
吴多益
GitHub
parent
e2c4afbc20
commit
1866899a73
@ -1111,6 +1111,56 @@ order: 2
|
||||
>
|
||||
> 如果同时配置了`source`和`addApi`，添加选项成功后会重新获取请求`source`接口
|
||||
|
||||
### 配置新增弹框其它属性
|
||||
|
||||
> 2.2.0 及以上版本
|
||||
|
||||
通过 `addDialog` 来控制弹框属性，比如通过 `size` 来调大，其它属性请参考 [dialog](../dialog) 的属性表
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"creatable": true,
|
||||
"addDialog": {
|
||||
"size": "lg"
|
||||
},
|
||||
"addControls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "label",
|
||||
"label": "选项标题"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "value",
|
||||
"label": "选项值"
|
||||
}
|
||||
],
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 编辑选项
|
||||
|
||||
部分选择器组件支持在前端编辑选项
|
||||
@ -1258,17 +1308,92 @@ order: 2
|
||||
>
|
||||
> 如果同时配置了`source`和`editApi`，添加选项成功后会重新获取请求`source`接口
|
||||
|
||||
### 配置编辑弹框其它属性
|
||||
|
||||
> 2.2.0 及以上版本
|
||||
|
||||
通过 `editDialog` 来控制弹框属性，比如通过 `size` 来调大，其它属性请参考 [dialog](../dialog) 的属性表
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"editable": true,
|
||||
"editDialog": {
|
||||
"size": "lg"
|
||||
},
|
||||
"editControls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "label",
|
||||
"label": "选项标题"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "value",
|
||||
"label": "选项值"
|
||||
}
|
||||
],
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 删除选项
|
||||
|
||||
部分选择器组件，支持在前端进行编辑选项操作
|
||||
配置 `removable: true` 支持删除选项，支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem
|
||||
|
||||
支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"removable": true,
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 配置删除接口 deleteApi
|
||||
|
||||
删除选项不支持在前端级别删除，我们认为是没有意义的，必须要配置`deleteApi`使用接口进行删除
|
||||
|
||||
配置`"removable": true`和`deleteApi`，支持在前端删除选项。
|
||||
配置 `deleteApi`使用接口进行删除
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
|
||||
@ -296,7 +296,7 @@ import {Renderer, ScopedContext} from 'amis';
|
||||
export class CustomRenderer extends React.Component {
|
||||
static contextType = ScopedContext;
|
||||
|
||||
componentWillMount() {
|
||||
constructor() {
|
||||
const scoped = this.context;
|
||||
scoped.registerComponent(this);
|
||||
}
|
||||
|
||||
@ -629,7 +629,7 @@ export default {
|
||||
{
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '单选',
|
||||
label: '下拉单选',
|
||||
inline: true,
|
||||
options: [
|
||||
{
|
||||
@ -639,6 +639,10 @@ export default {
|
||||
{
|
||||
label: '选项2',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '内容很长很长的选项，内容很长很长的选项',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -648,7 +652,7 @@ export default {
|
||||
{
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '单选禁用',
|
||||
label: '下拉单选禁用',
|
||||
disabled: true,
|
||||
inline: true,
|
||||
options: [
|
||||
|
||||
@ -135,6 +135,11 @@ export interface FormOptionsControl extends FormBaseControl {
|
||||
*/
|
||||
addControls?: Array<PlainObject>;
|
||||
|
||||
/**
|
||||
* 控制新增弹框设置项
|
||||
*/
|
||||
addDialog?: PlainObject;
|
||||
|
||||
/**
|
||||
* 是否可以新增
|
||||
*/
|
||||
@ -160,6 +165,12 @@ export interface FormOptionsControl extends FormBaseControl {
|
||||
*/
|
||||
editControls?: Array<PlainObject>;
|
||||
|
||||
/**
|
||||
* 控制编辑弹框设置项
|
||||
*/
|
||||
|
||||
editDialog?: PlainObject;
|
||||
|
||||
/**
|
||||
* 是否可删除
|
||||
*/
|
||||
@ -923,6 +934,7 @@ export function registerOptionsControl(config: OptionsConfig) {
|
||||
) {
|
||||
let {
|
||||
addControls,
|
||||
addDialog,
|
||||
disabled,
|
||||
labelField,
|
||||
onOpenDialog,
|
||||
@ -974,6 +986,7 @@ export function registerOptionsControl(config: OptionsConfig) {
|
||||
{
|
||||
type: 'dialog',
|
||||
title: createBtnLabel || `新增${optionLabel || '选项'}`,
|
||||
...addDialog,
|
||||
body: {
|
||||
type: 'form',
|
||||
api: addApi,
|
||||
@ -1065,6 +1078,7 @@ export function registerOptionsControl(config: OptionsConfig) {
|
||||
) {
|
||||
let {
|
||||
editControls,
|
||||
editDialog,
|
||||
disabled,
|
||||
labelField,
|
||||
onOpenDialog,
|
||||
@ -1100,6 +1114,7 @@ export function registerOptionsControl(config: OptionsConfig) {
|
||||
title: __('Options.editLabel', {
|
||||
label: optionLabel || __('Options.label')
|
||||
}),
|
||||
...editDialog,
|
||||
body: {
|
||||
type: 'form',
|
||||
api: editApi,
|
||||
@ -1169,6 +1184,7 @@ export function registerOptionsControl(config: OptionsConfig) {
|
||||
disabled,
|
||||
data,
|
||||
deleteApi,
|
||||
onDelete,
|
||||
env,
|
||||
formItem: model,
|
||||
source,
|
||||
@ -1198,17 +1214,22 @@ export function registerOptionsControl(config: OptionsConfig) {
|
||||
|
||||
// 通过 deleteApi 删除。
|
||||
try {
|
||||
if (!deleteApi) {
|
||||
throw new Error(__('Options.deleteAPI'));
|
||||
if (deleteApi) {
|
||||
const result = await env.fetcher(deleteApi!, ctx, {
|
||||
method: 'delete'
|
||||
});
|
||||
if (!result.ok) {
|
||||
env.notify('error', result.msg || __('deleteFailed'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const result = await env.fetcher(deleteApi!, ctx, {
|
||||
method: 'delete'
|
||||
});
|
||||
// 由外部代码实现删除逻辑
|
||||
if (onDelete) {
|
||||
onDelete(ctx);
|
||||
}
|
||||
|
||||
if (!result.ok) {
|
||||
env.notify('error', result.msg || __('deleteFailed'));
|
||||
} else if (source) {
|
||||
if (source) {
|
||||
this.reload();
|
||||
} else {
|
||||
const options = model.options.concat();
|
||||
|
||||
@ -86,8 +86,6 @@
|
||||
.#{$ns}PopOver.#{$ns}Select-popover {
|
||||
margin-top: px2rem(4px);
|
||||
.#{$ns}Select-menu {
|
||||
overflow-x: hidden;
|
||||
|
||||
.#{$ns}Select-option {
|
||||
height: px2rem(32px);
|
||||
line-height: px2rem(22px);
|
||||
@ -231,7 +229,6 @@
|
||||
max-height: px2rem(300px);
|
||||
padding-top: px2rem(4px);
|
||||
padding-bottom: px2rem(4px);
|
||||
overflow: auto;
|
||||
user-select: none;
|
||||
.#{$ns}Checkbox--sm > i {
|
||||
margin-top: px2rem(-3px);
|
||||
|
||||
@ -214,7 +214,7 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||
columns,
|
||||
types,
|
||||
pickerValue: currentDate.toArray(),
|
||||
uniqueTag: 0
|
||||
uniqueTag: new Date().valueOf()
|
||||
};
|
||||
|
||||
if (this.props.timeConstraints) {
|
||||
@ -222,10 +222,6 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({uniqueTag: new Date().valueOf()});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {timeFormat, selectedDate, viewDate, isEndDate} = this.props;
|
||||
const formatMap = {
|
||||
@ -738,13 +734,19 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||
className="rdtPrev"
|
||||
onClick={this.props.subtractTime(1, 'years')}
|
||||
>
|
||||
<Icon icon="right-double-arrow" className="icon date-icon-arrow-left" />
|
||||
<Icon
|
||||
icon="right-double-arrow"
|
||||
className="icon date-icon-arrow-left"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="rdtPrev"
|
||||
onClick={this.props.subtractTime(1, 'months')}
|
||||
>
|
||||
<Icon icon="right-arrow" className="icon date-icon-arrow-left" />
|
||||
<Icon
|
||||
icon="right-arrow"
|
||||
className="icon date-icon-arrow-left"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div className="rdtCenter">
|
||||
@ -769,10 +771,13 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||
<Icon icon="right-arrow" className="icon date-icon-arrow" />
|
||||
</a>
|
||||
<a className="rdtNext" onClick={this.props.addTime(1, 'years')}>
|
||||
<Icon icon="right-double-arrow" className="icon date-icon-arrow" />
|
||||
<Icon
|
||||
icon="right-double-arrow"
|
||||
className="icon date-icon-arrow"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className='header-line'></div>
|
||||
<div className="header-line"></div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -107,7 +107,7 @@ export class CustomTimeView extends React.Component<
|
||||
super(props);
|
||||
this.state = {
|
||||
...this.calculateState(this.props),
|
||||
uniqueTag: 0
|
||||
uniqueTag: new Date().valueOf()
|
||||
};
|
||||
|
||||
if (this.props.timeConstraints) {
|
||||
@ -118,10 +118,6 @@ export class CustomTimeView extends React.Component<
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({uniqueTag: new Date().valueOf()});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {timeFormat, selectedDate, viewDate, isEndDate} = this.props;
|
||||
const formatMap = {
|
||||
|
||||
@ -121,7 +121,7 @@ export default class CheckboxesControl extends React.Component<
|
||||
window.addEventListener('resize', this.updateBorderStyle);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.updateBorderStyle);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user