fix: subTable

This commit is contained in:
chenos 2021-03-26 12:14:16 +08:00
parent 47f4cb4d13
commit 38e9b2c96c
5 changed files with 49 additions and 15 deletions

View File

@ -30,12 +30,14 @@ function transform({value, multiple, labelField, valueField = 'id'}) {
} }
export function DrawerSelectComponent(props) { export function DrawerSelectComponent(props) {
const { __parent, size, schema = {}, disabled, viewName, target, multiple, filter, resourceName, associatedKey, labelField, valueField = 'id', value, onChange } = props; const { __parent, size, schema = {}, disabled, viewName, target, multiple, filter, resourceName, associatedKey, valueField = 'id', value, onChange } = props;
const labelField = props.labelField || schema.labelField;
const [selectedKeys, selectedValue] = transform({value, multiple, labelField, valueField }); const [selectedKeys, selectedValue] = transform({value, multiple, labelField, valueField });
const [selectedRowKeys, setSelectedRowKeys] = useState(multiple ? selectedKeys : [selectedKeys]); const [selectedRowKeys, setSelectedRowKeys] = useState(multiple ? selectedKeys : [selectedKeys]);
const [selectedRows, setSelectedRows] = useState(selectedValue); const [selectedRows, setSelectedRows] = useState(selectedValue);
const [options, setOptions] = useState(selectedValue); const [options, setOptions] = useState(selectedValue);
const { title = '' } = schema; const { title = '' } = schema;
console.log({schema})
return ( return (
<> <>
<Select <Select

View File

@ -25,17 +25,17 @@ export function generateIndex(): string {
} }
export default function Table(props: SimpleTableProps) { export default function Table(props: SimpleTableProps) {
const { schema = {}, associatedKey, value, onChange, __parent } = props; const { schema = {}, associatedKey, value, onChange, __index } = props;
console.log({props, associatedKey, schema, __parent})
const { collection_name, name } = schema; const { collection_name, name } = schema;
const viewName = `${collection_name}.${name}.${schema.viewName||'table'}`; const viewName = `${collection_name}.${name}.${schema.viewName||'table'}`;
console.log({props, associatedKey, schema, __index, viewName, schema})
return ( return (
<> <>
<View <View
__parent={__parent} // __parent={__parent}
data={value} data={value}
onChange={onChange} onChange={onChange}
associatedKey={associatedKey} associatedKey={__index}
viewName={viewName} viewName={viewName}
type={'subTable'} type={'subTable'}
/> />

View File

@ -121,10 +121,10 @@ export function Form(props: any) {
associatedKey, associatedKey,
resourceKey, resourceKey,
}} }}
effects={($, { setFieldState }) => { effects={($, { setFormState, setFieldState, getFieldState }) => {
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => { $(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
setFieldState('*', state => { setFieldState('*', state => {
set(state.props, 'x-component-props.__parent', __parent); set(state.props, 'x-component-props.__index', resourceKey);
}) })
}) })
}} }}

View File

@ -76,8 +76,8 @@ export function SubTable(props: any) {
const { const {
fields = [], fields = [],
actions = [], actions: defaultActions = [],
details = [], details: defaultDetails = [],
paginated = true, paginated = true,
defaultPerPage = 10, defaultPerPage = 10,
// rowKey = 'id', // rowKey = 'id',
@ -90,6 +90,14 @@ export function SubTable(props: any) {
filter: schemaFilter = {}, filter: schemaFilter = {},
} = schema; } = schema;
let actions = defaultActions;
let details = defaultDetails;
if (!onChange) {
actions = [];
details = [];
}
const cloneFields = cloneDeep(fields) as any[]; const cloneFields = cloneDeep(fields) as any[];
let draggable = !!schema.draggable; let draggable = !!schema.draggable;
@ -235,6 +243,16 @@ export function SubTable(props: any) {
pagination={false} pagination={false}
onChange={(pagination, filters, sorter, extra) => { onChange={(pagination, filters, sorter, extra) => {
}}
components={{
body: {
row: ({className, ...others}) => {
if (!details.length) {
return <tr className={className} {...others}/>
}
return <tr className={className ? `${className} row-clickable` : 'row-clickable'} {...others}/>
},
}
}} }}
expandable={expandable} expandable={expandable}
onRow={(data, index) => ({ onRow={(data, index) => ({
@ -248,6 +266,9 @@ export function SubTable(props: any) {
) { ) {
return; return;
} }
if (!details.length) {
return;
}
Drawer.open({ Drawer.open({
title: details.length > 1 ? undefined : data[labelField], title: details.length > 1 ? undefined : data[labelField],
bodyStyle: { bodyStyle: {
@ -261,12 +282,14 @@ export function SubTable(props: any) {
resourceName={resourceName} resourceName={resourceName}
onFinish={async (values) => { onFinish={async (values) => {
let data = [...dataSource]; let data = [...dataSource];
console.log({values});
data[index] = values; data[index] = values;
data = data.map((v: any, i) => { data = data.map((v: any, i) => {
return {...v, [sortField]: i}; return {...v, [sortField]: i};
}); });
mutate(data); mutate(data);
onChange && await onChange(data); onChange && await onChange(data);
console.log({values, data});
resolve(); resolve();
}} }}
onReset={resolve} onReset={resolve}

View File

@ -219,14 +219,23 @@ export function RealtionField(props: any) {
} }
export function SubTableField(props: any) { export function SubTableField(props: any) {
const { schema: { children }, value } = props; const { data, schema, schema: { name, children, collection_name }, value } = props;
console.log(value);
if (!Array.isArray(value)) { if (!Array.isArray(value)) {
return null; return null;
} }
const viewName = `${collection_name}.${name}.${schema.viewName||'table'}`;
console.log({value, viewName, schema});
return ( return (
<div className={'sub-table-field'}> <div className={'sub-table-field'}>
<Table size={'small'} columns={fields2columns(children)} dataSource={value} pagination={false}/> <View
// __parent={__parent}
data={value}
// onChange={onChange}
associatedKey={data.id}
viewName={viewName}
type={'subTable'}
/>
{/* <Table size={'small'} columns={fields2columns(children)} dataSource={value} pagination={false}/> */}
</div> </div>
); );
} }
@ -247,8 +256,8 @@ export function LinkToField(props: any) {
} }
export function LinkToFieldLink(props) { export function LinkToFieldLink(props) {
const { isArr, itemIndex, ctx, parent, schema, schema: { title, labelField, viewName, name, target, collection_name } } = props; const { data, isArr, itemIndex, ctx, parent, schema, schema: { title, labelField, viewName, name, target, collection_name } } = props;
const [data, setData] = useState(props.data||{}); // const [data, setData] = useState(props.data||{});
return ( return (
<span className={'link-to-field-tag'}> <span className={'link-to-field-tag'}>
<a onClick={(e) => { <a onClick={(e) => {
@ -270,7 +279,7 @@ export function LinkToFieldLink(props) {
const parentData = {...parent}; const parentData = {...parent};
set(parentData, isArr ? [name, itemIndex] : [name], values); set(parentData, isArr ? [name, itemIndex] : [name], values);
items[index] = parentData; items[index] = parentData;
setData(values); // setData(values);
mutate(items); mutate(items);
onChange(items); onChange(items);
resolve(); resolve();