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

合并单元格透传

Browse Source
This commit is contained in:
2betop 2019-12-24 19:51:47 +08:00
parent 635d0f5005
commit 24b8bc3058
1 changed files with 65 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/renderers/Form/Table.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'; import React from "react";
import {FormItem, FormControlProps} from './Item'; import { FormItem, FormControlProps } from "./Item";
import cx from 'classnames'; import cx from "classnames";
import Button from '../../components/Button'; import Button from "../../components/Button";
import {createObject, isObjectShallowModified} from '../../utils/helper'; import { createObject, isObjectShallowModified } from "../../utils/helper";
import {RendererData, Action, Api, Payload} from '../../types'; import { RendererData, Action, Api, Payload } from "../../types";
import {isEffectiveApi} from '../../utils/api'; import { isEffectiveApi } from "../../utils/api";
import {filter} from '../../utils/tpl'; import { filter } from "../../utils/tpl";
import omit = require('lodash/omit'); import omit = require("lodash/omit");
import {dataMapping} from '../../utils/tpl-builtin'; import { dataMapping } from "../../utils/tpl-builtin";
import findIndex = require('lodash/findIndex'); import findIndex = require("lodash/findIndex");
export interface TableProps extends FormControlProps { export interface TableProps extends FormControlProps {
placeholder?: string; placeholder?: string;
@ -44,29 +44,29 @@ export interface TableState {
export default class FormTable extends React.Component<TableProps, TableState> { export default class FormTable extends React.Component<TableProps, TableState> {
static defaultProps = { static defaultProps = {
placeholder: '空', placeholder: "空",
scaffold: {}, scaffold: {},
addBtnIcon: 'fa fa-plus', addBtnIcon: "fa fa-plus",
updateBtnIcon: 'fa fa-pencil', updateBtnIcon: "fa fa-pencil",
deleteBtnIcon: 'fa fa-minus', deleteBtnIcon: "fa fa-minus",
confirmBtnIcon: 'fa fa-check', confirmBtnIcon: "fa fa-check",
cancelBtnIcon: 'fa fa-times', cancelBtnIcon: "fa fa-times",
valueField: '' valueField: ""
}; };
static propsList: Array<string> = [ static propsList: Array<string> = [
'onChange', "onChange",
'name', "name",
'columns', "columns",
'label', "label",
'scaffold', "scaffold",
'showAddBtn', "showAddBtn",
'addable', "addable",
'removable', "removable",
'editable', "editable",
'addApi', "addApi",
'updateApi', "updateApi",
'deleteApi' "deleteApi"
]; ];
entries: Map<any, number>; entries: Map<any, number>;
@ -100,7 +100,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
} }
validate(): any { validate(): any {
const {value, minLength, maxLength} = this.props; const { value, minLength, maxLength } = this.props;
if (minLength && (!Array.isArray(value) || value.length < minLength)) { if (minLength && (!Array.isArray(value) || value.length < minLength)) {
return `组合表单成员数量不够，低于最小的设定${minLength}个，请添加更多的成员。`; return `组合表单成员数量不够，低于最小的设定${minLength}个，请添加更多的成员。`;
@ -115,7 +115,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
return Promise.all(subForms.map(item => item.validate())).then( return Promise.all(subForms.map(item => item.validate())).then(
values => { values => {
if (~values.indexOf(false)) { if (~values.indexOf(false)) {
return '内部表单验证失败'; return "内部表单验证失败";
} }
return; return;
@ -126,9 +126,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
} }
doAction(action: Action, ctx: RendererData, ...rest: Array<any>) { doAction(action: Action, ctx: RendererData, ...rest: Array<any>) {
const {onAction, value, valueField, env, onChange, editable} = this.props; const { onAction, value, valueField, env, onChange, editable } = this.props;
if (action.actionType === 'add') { if (action.actionType === "add") {
const rows = Array.isArray(value) ? value.concat() : []; const rows = Array.isArray(value) ? value.concat() : [];
if (action.payload) { if (action.payload) {
@ -159,13 +159,13 @@ export default class FormTable extends React.Component<TableProps, TableState> {
return this.addItem(rows.length - 1); return this.addItem(rows.length - 1);
} }
} else if ( } else if (
action.actionType === 'remove' || action.actionType === "remove" ||
action.actionType === 'delete' action.actionType === "delete"
) { ) {
if (!valueField) { if (!valueField) {
return env.alert('请配置 valueField'); return env.alert("请配置 valueField");
} else if (!action.payload) { } else if (!action.payload) {
return env.alert('action 上请配置 payload, 否则不清楚要删除哪个'); return env.alert("action 上请配置 payload, 否则不清楚要删除哪个");
} }
const rows = Array.isArray(value) ? value.concat() : []; const rows = Array.isArray(value) ? value.concat() : [];
@ -191,7 +191,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
} }
addItem(index: number, payload: any = this.props.scaffold) { addItem(index: number, payload: any = this.props.scaffold) {
const {value, onChange} = this.props; const { value, onChange } = this.props;
let newValue = Array.isArray(value) ? value.concat() : []; let newValue = Array.isArray(value) ? value.concat() : [];
newValue.splice(index + 1, 0, { newValue.splice(index + 1, 0, {
...payload ...payload
@ -249,7 +249,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
} }
if (remote && !remote.ok) { if (remote && !remote.ok) {
env.notify('error', remote.msg || '保存失败'); env.notify("error", remote.msg || "保存失败");
return; return;
} else if (remote && remote.ok) { } else if (remote && remote.ok) {
item = { item = {
@ -268,7 +268,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
} }
cancelEdit() { cancelEdit() {
const {value, onChange} = this.props; const { value, onChange } = this.props;
if (this.state.isCreateMode) { if (this.state.isCreateMode) {
let newValue = Array.isArray(value) ? value.concat() : []; let newValue = Array.isArray(value) ? value.concat() : [];
@ -300,7 +300,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
const ctx = createObject(data, item); const ctx = createObject(data, item);
if (isEffectiveApi(deleteApi, ctx)) { if (isEffectiveApi(deleteApi, ctx)) {
const confirmed = await env.confirm( const confirmed = await env.confirm(
deleteConfirmText ? filter(deleteConfirmText, ctx) : '确认要删除？' deleteConfirmText ? filter(deleteConfirmText, ctx) : "确认要删除？"
); );
if (!confirmed) { if (!confirmed) {
// 如果不确认，则跳过！ // 如果不确认，则跳过！
@ -310,7 +310,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
const result = await env.fetcher(deleteApi, ctx); const result = await env.fetcher(deleteApi, ctx);
if (!result.ok) { if (!result.ok) {
env.notify('error', '删除失败'); env.notify("error", "删除失败");
return; return;
} }
} }
@ -340,7 +340,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
let btns = []; let btns = [];
if (props.addable && props.showAddBtn !== false) { if (props.addable && props.showAddBtn !== false) {
btns.push({ btns.push({
children: ({key, rowIndex}: {key: any; rowIndex: number}) => children: ({ key, rowIndex }: { key: any; rowIndex: number }) =>
~this.state.editIndex ? null : ( ~this.state.editIndex ? null : (
<Button <Button
classPrefix={ns} classPrefix={ns}
@ -363,19 +363,19 @@ export default class FormTable extends React.Component<TableProps, TableState> {
if (props.editable) { if (props.editable) {
columns = columns.map(column => { columns = columns.map(column => {
const quickEdit = const quickEdit =
!isCreateMode && column.hasOwnProperty('quickEditOnUpdate') !isCreateMode && column.hasOwnProperty("quickEditOnUpdate")
? column.quickEditOnUpdate ? column.quickEditOnUpdate
: column.quickEdit; : column.quickEdit;
return quickEdit === false return quickEdit === false
? omit(column, ['quickEdit']) ? omit(column, ["quickEdit"])
: { : {
...column, ...column,
quickEdit: { quickEdit: {
type: 'text', type: "text",
...quickEdit, ...quickEdit,
saveImmediately: true, saveImmediately: true,
mode: 'inline' mode: "inline"
} }
}; };
}); });
@ -413,7 +413,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
}); });
btns.push({ btns.push({
children: ({key, rowIndex}: {key: any; rowIndex: number}) => children: ({ key, rowIndex }: { key: any; rowIndex: number }) =>
this.state.editIndex === rowIndex ? ( this.state.editIndex === rowIndex ? (
<Button <Button
classPrefix={ns} classPrefix={ns}
@ -437,7 +437,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
}); });
btns.push({ btns.push({
children: ({key, rowIndex}: {key: any; rowIndex: number}) => children: ({ key, rowIndex }: { key: any; rowIndex: number }) =>
this.state.editIndex === rowIndex ? ( this.state.editIndex === rowIndex ? (
<Button <Button
classPrefix={ns} classPrefix={ns}
@ -497,10 +497,10 @@ export default class FormTable extends React.Component<TableProps, TableState> {
if (btns.length) { if (btns.length) {
columns.push({ columns.push({
type: 'operation', type: "operation",
buttons: btns, buttons: btns,
width: 100, width: 100,
label: '操作' label: "操作"
}); });
} }
@ -512,7 +512,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
diff: Array<object> | object, diff: Array<object> | object,
rowIndexes: Array<number> | number rowIndexes: Array<number> | number
) { ) {
const {onChange, value} = this.props; const { onChange, value } = this.props;
const newValue = Array.isArray(value) ? value.concat() : []; const newValue = Array.isArray(value) ? value.concat() : [];
@ -549,9 +549,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
} }
handleSaveTableOrder(moved: Array<object>, rows: Array<object>) { handleSaveTableOrder(moved: Array<object>, rows: Array<object>) {
const {onChange} = this.props; const { onChange } = this.props;
onChange(rows.map((item: object) => ({...item}))); onChange(rows.map((item: object) => ({ ...item })));
} }
removeEntry(entry: any) { removeEntry(entry: any) {
@ -562,7 +562,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
getEntryId(entry: any) { getEntryId(entry: any) {
if (entry === this.state.editting) { if (entry === this.state.editting) {
return 'editting'; return "editting";
} else if (!this.entries.has(entry)) { } else if (!this.entries.has(entry)) {
this.entries.set(entry, this.entityId++); this.entries.set(entry, this.entityId++);
} }
@ -580,15 +580,16 @@ export default class FormTable extends React.Component<TableProps, TableState> {
placeholder, placeholder,
draggable, draggable,
addable, addable,
columnsTogglable columnsTogglable,
combineNum
} = this.props; } = this.props;
return ( return (
<div className={cx('form-control-table', className)}> <div className={cx("form-control-table", className)}>
{render( {render(
'body', "body",
{ {
type: 'table', type: "table",
placeholder, placeholder,
columns: this.state.columns, columns: this.state.columns,
affixHeader: false affixHeader: false
@ -601,7 +602,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
items: (Array.isArray(value) && value.length items: (Array.isArray(value) && value.length
? value ? value
: addable && showAddBtn !== false : addable && showAddBtn !== false
? [{__isPlaceholder: true}] ? [{ __isPlaceholder: true }]
: [] : []
).map((value: any, index: number) => ).map((value: any, index: number) =>
index === this.state.editIndex ? this.state.editting : value index === this.state.editIndex ? this.state.editting : value
@ -611,7 +612,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
onSaveOrder: this.handleSaveTableOrder, onSaveOrder: this.handleSaveTableOrder,
buildItemProps: this.buildItemProps, buildItemProps: this.buildItemProps,
quickEditFormRef: this.subFormRef, quickEditFormRef: this.subFormRef,
columnsTogglable: columnsTogglable columnsTogglable: columnsTogglable,
combineNum: combineNum
} }
)} )}
</div> </div>
@ -621,6 +623,6 @@ export default class FormTable extends React.Component<TableProps, TableState> {
@FormItem({ @FormItem({
test: /(^|\/)form(?:\/.+)?\/control\/table$/, test: /(^|\/)form(?:\/.+)?\/control\/table$/,
name: 'table-control' name: "table-control"
}) })
export class TableControlRenderer extends FormTable {} export class TableControlRenderer extends FormTable {}