fix: subTable
This commit is contained in:
parent
47f4cb4d13
commit
38e9b2c96c
@ -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
|
||||||
|
@ -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'}
|
||||||
/>
|
/>
|
||||||
|
@ -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);
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
|
@ -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}
|
||||||
|
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user