Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 66x | import React, { ReactElement, useEffect, useState } from 'react';
import { FormProps, RecordProps, SaveRecordProps, TableMetaProps } from "@props/RecordProps";
import { fetchDomainMeta, fetchFormIdAndExtInfoByName, fetchFormIdAndExtInfoByType, fetchListOfRelateDomainData } from '@utils/FetchUtils';
//import { useTranslation } from 'react-i18next';
import { emptyMethod } from '@utils/Constants';
import CardSearchResultCell from '../fullTextSearchList/CardSearchResultCell';
import { LargeSpin } from '../../components';
import './objectsDetailList.less';
import { FetchRelateDomainProps } from '@utils/FetchUtilsProps';
interface ObjectsDetailListProps {
domainName: string;
zIndex: number;
record: SaveRecordProps;
column: TableMetaProps
ownerClass: string;
}
// 以 card 形式显示的对象列表
const ObjectsDetailList = (props: ObjectsDetailListProps): ReactElement => {
const { zIndex, record, column, ownerClass, domainName } = props;
const { elementType, extInfo, key } = column;
const { displayForm } = ((extInfo == null) ? { displayForm: "" } : extInfo);
const { id } = record;
const [data, setData] = useState<Array<RecordProps>>([]);
const [formId, setFormId] = useState<number>();
const [columns, setColumns] = useState<Array<TableMetaProps>>([] as TableMetaProps[]);
const [contentDisplayColumns, setContentDisplayColumns] = useState<Array<TableMetaProps>>([]);
const [updateFormId, setUpdateFormId] = useState<number>(-1);
//const { t } = useTranslation();
useEffect(() => {
if (elementType != null) {
fetchFormIdAndExtInfoByType(elementType, 'Update')
.then((res: FormProps) => {
setUpdateFormId(res.id);
})
.catch(e => console.error(`Failed to fetch update form Id of ${elementType}: ${e}`));
}
}, [elementType]);
useEffect(() => {
// formId == null 才请求是为了避免重复请求
if (elementType != null && formId == null) {
const listFormIsEmpty = (displayForm == null || displayForm === '');
if(listFormIsEmpty) {
fetchFormIdAndExtInfoByType(domainName, "RELATED_DETAIL_LIST").then(res => {
setFormId(res.id);
});
} else {
fetchFormIdAndExtInfoByName(domainName, displayForm).then(res => {
setFormId(res.id);
});
}
}
}, [elementType, formId, displayForm, domainName]);
useEffect(() => {
if (formId != null && elementType != null) {
fetchDomainMeta(domainName, formId).then((meta: Array<TableMetaProps>) => {
setColumns(meta);
setContentDisplayColumns(meta.filter(c => c.groupName?.startsWith('contentDisplayGroup')));
return meta;
});
}
}, [formId, elementType, domainName]);
useEffect(() => {
//1. Get list of related data
const params = {
domainName: ownerClass,
columnName: key,
ownerId: id,
max: 9999,
ownerClass,
ownerClassColumnName: key,
useCache: false,
current: 1,
};
fetchListOfRelateDomainData(params as FetchRelateDomainProps).then((res) => {
const { data } = res;
if(data.length > 0) {
const firstData = data[0];
if('displaySequence' in firstData) {
data.sort((a, b) => a.displaySequence - b.displaySequence);
}
}
setData(data);
});
//2. Get form groups
}, [record, id, key, ownerClass]);
const elems: Array<ReactElement> = data.map((d: RecordProps): ReactElement => {
return (<CardSearchResultCell
key={d.id.toString()}
record={d}
domainName={domainName}
contentDisplayColumns={contentDisplayColumns}
updateFormId={updateFormId}
changeCallback={emptyMethod}
columns={columns}
zIndex={zIndex}
layout="horizontal"
onlyShowAbstract={false}
/>);
});
return (contentDisplayColumns.length === 0)? (<LargeSpin />) : (<>{elems}</>);
};
export default ObjectsDetailList;
|