aldehyde 0.0.1

package/src/components/table/query-table.tsx

@@ -0,0 +1,331 @@
+import React from 'react'
+import {Card, Collapse, Descriptions, List, Table} from 'antd';
+import "./index.css"
+import {
+    ActTableViewModel,
+    DtmplData,
+    FieldConfig,
+    PageInfo,
+    QueryData,
+    QueryKey,
+    SelectedRow,
+} from "../tmpl/interface";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import Pagination from './pagination';
+import {TableRowSelection} from "antd/lib/table/interface";
+import {SortableContainer, SortableElement} from "react-sortable-hoc";
+import {arrayMoveImmutable} from 'array-move';
+import ViewControl from "../controls/view-control";
+
+const {Panel} = Collapse;
+const SortableItem = SortableElement(props => <tr {...props} />);
+const SortableBody = SortableContainer(props => <tbody {...props} />);
+
+
+interface CacheData {
+    dataSource: object[];
+    pageInfo: PageInfo;
+}
+
+interface QueryTableProps {
+    viewModels?: ActTableViewModel[];
+    defaultPageSize?: number;
+    columns: any[];
+    queryKey: QueryKey;
+    onChangeRowSelection?: (selectedRows: SelectedRow[],selectedDatas: DtmplData[], allRowKeys: string[]) => void;
+    maxSelectedRows?: number;
+    selectedRows?: SelectedRow[];
+    hiddenRowCodes?: string[],
+    viewModel?: string;
+    columnConfigs?: FieldConfig[];
+};
+
+
+interface QueryTableStat {
+    queryDataCache: Map<string, CacheData>;
+    pageInfo: PageInfo;
+    dataSource: object[];
+    loading: boolean;
+    touchEnd: boolean;
+    total: number;
+};
+
+class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
+
+    static defaultProps = {
+        hiddenRowCodes: [],
+        selectedRows: [],
+        viewModels: ['table']
+    }
+
+    state = {
+        queryDataCache: undefined,
+        pageInfo: undefined,
+        dataSource: undefined,
+        loading: true,
+        touchEnd: undefined,
+        total: undefined,
+    }
+
+    async componentDidMount() {
+        const {columns, queryKey, defaultPageSize} = this.props;
+        let pageInfo = {
+            pageNo: 1,
+            pageSize: defaultPageSize ? defaultPageSize : 10,
+            virtualEndPageNo: undefined,
+        }
+        if (queryKey) {
+            await this.loadData(queryKey.key, pageInfo);
+        }
+    }
+
+    componentWillUnmount() {
+        this.setState = ()=>false;
+    }
+
+    async componentDidUpdate(prevProps) {
+        const {queryKey: preQueryKey} = prevProps;
+        const {columns, queryKey, defaultPageSize} = this.props;
+        if (queryKey && preQueryKey?.key != queryKey.key) {
+            let pageInfo = {
+                pageNo: 1,
+                pageSize: defaultPageSize ? defaultPageSize : 10,
+                virtualEndPageNo: undefined,
+            }
+            await this.loadData(queryKey.key, pageInfo, true);
+        }
+    }
+
+    DraggableContainer = props => (
+        <SortableBody
+            useDragHandle
+            disableAutoscroll
+            helperClass="row-dragging"
+            onSortEnd={this.onSortEnd}
+            {...props}
+        />
+    );
+
+    DraggableBodyRow = ({className, style, ...restProps}) => {
+        const {dataSource} = this.state;
+        if (dataSource) {
+            //let ds=  this.getUnHidenDataSource();
+            // function findIndex base on Table rowKey props and should always be a right array index
+            // @ts-ignore
+            const index = dataSource.findIndex(x => x.key === restProps['data-row-key']);
+            return <SortableItem key={index} index={index} {...restProps} />;
+        } else {
+            return <></>
+        }
+
+    };
+
+    onSortEnd = ({oldIndex, newIndex}) => {
+        const {dataSource} = this.state;
+        if (oldIndex !== newIndex) {
+            const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
+                el => !!el,
+            );
+            console.log('Sorted items: ', newData);
+            this.setState({dataSource: newData});
+        }
+    };
+
+    loadData = async (queryKey: string, pageInfo: PageInfo, cleanCache?: boolean) => {
+        this.setState({
+            loading: true,
+        })
+
+        let {queryDataCache} = this.state;
+        let queryCache: Map<string, CacheData>;
+        if (cleanCache || !queryDataCache) {
+            queryCache = new Map<string, CacheData>();
+        } else {
+            queryCache = queryDataCache;
+        }
+        if (queryCache.has(pageInfo.pageNo + "_" + pageInfo.pageSize)) {
+            let cacheData = queryCache.get(pageInfo.pageNo + "_" + pageInfo.pageSize);
+            this.setState({
+                dataSource: cacheData.dataSource,
+                pageInfo: cacheData.pageInfo,
+                loading: false,
+            })
+        } else {
+            let queryData: QueryData = await HcserviceV3.requestQueryData(queryKey, pageInfo);
+            let dataSource: object[] = [];
+            pageInfo = queryData.pageInfo;
+            queryData.entities.forEach((item, index) => {
+                let row = {
+                    key: item.code,
+                    code: item.code,//增加code,为了删除操作
+                    ...item.fieldMap,
+                    index,
+                };
+                dataSource.push(row);
+            })
+            let touchEnd = queryData.touchEnd;
+            //缓存数据
+            queryCache.set(pageInfo.pageNo + "_" + pageInfo.pageSize, {dataSource, pageInfo});
+            this.setState({
+                dataSource,
+                pageInfo,
+                queryDataCache: queryCache,
+                touchEnd,
+                loading: false,
+                total: undefined,
+            })
+        }
+    }
+
+    pageTo = async (pageNo: number, pageSize: number) => {
+        let pageInfo = {
+            pageNo,
+            pageSize: pageSize ? pageSize : 10,
+            virtualEndPageNo: undefined,
+        }
+        const {queryKey} = this.props;
+        await this.loadData(queryKey.key, pageInfo);
+    }
+
+    queryTotal = async () => {
+        const {queryKey} = this.props;
+        let total = await HcserviceV3.requestQueryCount(queryKey.key);
+        this.setState({
+            total
+        });
+    }
+
+    getRowSelection = () => {
+
+        const {columns, onChangeRowSelection, selectedRows, maxSelectedRows} = this.props;
+        let {dataSource} = this.state;
+        let selectedRowKeys = [];
+
+        for (let row of selectedRows) {
+            selectedRowKeys.push(row.code);
+        }
+        const allRowKeys: string[] = [];
+        if (dataSource) {
+            for (let d of dataSource) {
+                allRowKeys.push(d.code);
+            }
+        }
+
+        const rowSelection: TableRowSelection<any> = {
+            fixed: true,
+            type: maxSelectedRows == 1 ? 'radio' : 'checkbox',
+            selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+                console.log('selectedRowKeys:', selectedRowKeys);
+                console.log('selectedRows:', selectedRows);
+                let selectedRows_: SelectedRow[] = [];
+                let selectedDatas: DtmplData[] = [];
+                let titleColId = null;
+                columns.forEach((col) => {
+                    if (col.title != '序号' && titleColId == null) {
+                        titleColId = col.dataIndex;
+                        return;
+                    }
+                })
+                selectedRows.forEach((item) => {
+                    selectedRows_.push({code: item.code, title: item[titleColId]});
+                    selectedDatas.push(item);
+                })
+                if (onChangeRowSelection) {
+                    onChangeRowSelection(selectedRows_,selectedDatas, allRowKeys);
+                }
+            }
+        }
+        return rowSelection;
+
+    }
+
+    getUnHidenDataSource = () => {
+        const {dataSource} = this.state;
+        const {hiddenRowCodes} = this.props;
+        let ds: object[] = [];
+        if (dataSource) {
+            for (let d of dataSource) {
+                if (!hiddenRowCodes.includes(d.code)) {
+                    ds.push(d);
+                }
+            }
+        }
+
+        return ds;
+    }
+
+    initViewList = (data) => {
+        console.log("data:",data);
+        const {columns, columnConfigs} = this.props
+        const formItemList = [];
+        if (columnConfigs.length > 0) {
+            columnConfigs.forEach((item, index) => {
+                if (item.id != '10000' && item.title != '操作' && item.id != '20000' ) {
+                    const title = item.title;
+                    let fieldValue = data ? data[item.id] : undefined;
+                    if(title=='序号'){
+                        fieldValue=data.index;
+                    }
+                    //fieldValue 没有值时不能为null 要为 undefined。antd input所限制
+                    fieldValue = fieldValue ? fieldValue : item.defaultValue ? item.defaultValue : undefined;
+                    const fieldKey = item.id + Math.random() * 100;
+
+                    const formItem = <Descriptions.Item label={item.title} key={index}
+                                                        className='labelcss'
+                    >
+                        <ViewControl holderType={'table'} value={fieldValue} fieldConfig={item}/>
+                    </Descriptions.Item>
+                    formItemList.push(formItem);
+                }
+            });
+        }
+        return formItemList;
+
+    }
+
+    render() {
+        const {columns, viewModels} = this.props;
+        const {pageInfo, touchEnd, total, loading} = this.state;
+        return (
+            <>
+                {viewModels.includes('table') ?
+                    <Table
+                        rowSelection={this.getRowSelection()}
+                        columns={columns ? columns : []}
+                        dataSource={this.getUnHidenDataSource()}
+                        bordered
+                        pagination={false}
+                        style={{display: columns ? "block" : "none"}}
+                        loading={loading}
+                        components={{
+                            body: {
+                                wrapper: this.DraggableContainer,
+                                row: this.DraggableBodyRow,
+                            },
+                        }}
+                    >
+                    </Table> : ""}
+                <Pagination touchEnd={touchEnd} pageInfo={pageInfo} pageTo={this.pageTo} queryTotal={this.queryTotal}
+                            total={total}/>
+                {viewModels.includes('verticalList') ?
+                    <Card style={{marginTop: '10px'}}>
+                        <List
+                            dataSource={this.getUnHidenDataSource()}
+                            renderItem={item => (
+                                <List.Item key={item['id']}>
+                                    <Card><Descriptions column={4}>
+                                        {this.initViewList(item)}
+                                    </Descriptions></Card>
+                                </List.Item>
+                            )}
+                        />
+                    </Card> : ""
+                }
+            </>
+        );
+    }
+
+}
+
+export default QueryTable;