aldehyde 0.0.1

package/src/components/table/column/column-selector.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import {Checkbox, Col, Row} from "antd";
+import {ColumnConfig,} from "../../tmpl/interface";
+import '../pagination.css';
+import {MenuOutlined} from '@ant-design/icons';
+import {SortableContainer, SortableElement, SortableHandle} from 'react-sortable-hoc';
+import {arrayMoveImmutable} from 'array-move';
+
+interface ColumnSelectorProps {
+    columns: ColumnConfig[],
+    hiddenColIds: string[],
+    ignoredColIds?: string[],
+    disabledColIds?:string[],
+    onChangeHiddenCols?: (hiddenColIds: string[]) => void;
+    onChangeColSort?: (columns: ColumnConfig[]) => void;
+};
+
+interface ColumnSelectorStat {
+
+};
+
+const SortableCheckbox = SortableElement(({value, index,disabledColIds}) => <Col key={index}  span={24}>
+    <Checkbox disabled={disabledColIds.includes(value.id)} value={value.id}><DragHandle/> {value.title}</Checkbox>
+</Col>);
+const DragHandle = SortableHandle(() => <MenuOutlined style={{cursor: 'grab', color: '#999'}}/>);
+const SortableGroupContainer = SortableContainer(({items, selected, onChange,disabledColIds}) => {
+    return <Checkbox.Group value={selected} onChange={onChange}>
+        <Row style={{width: '148px'}}>
+            {items.map((value, index) => (
+                <SortableCheckbox key={`item-${value.id}`} index={index} value={value} disabledColIds={disabledColIds}/>
+            ))}
+        </Row>
+    </Checkbox.Group>
+});
+
+class ColumnSelector extends React.PureComponent<ColumnSelectorProps, ColumnSelectorStat> {
+
+    static defaultProps = {
+        ignoredColIds: [],
+    }
+
+    onChange = (checkedValues) => {
+        const {onChangeHiddenCols, columns, ignoredColIds} = this.props;
+        console.log('checked = ', checkedValues);
+        const hiddenColIds = [];
+        for (let c of columns) {
+            if (checkedValues.length != 0 && !checkedValues.includes(c.id) && !ignoredColIds.includes(c.id)) {
+                hiddenColIds.push(c.id);
+            }
+        }
+        onChangeHiddenCols(hiddenColIds);
+    }
+    onSortEnd = ({oldIndex, newIndex}) => {
+        const {columns,onChangeColSort} = this.props;
+        if (oldIndex !== newIndex) {
+            const newData = arrayMoveImmutable([].concat(columns), oldIndex, newIndex).filter(
+                el => !!el,
+            );
+            console.log('Sorted items: ', newData);
+            onChangeColSort(newData);
+        }
+    };
+
+    render() {
+        const {hiddenColIds, columns,disabledColIds} = this.props;
+        const showColIds_str = [];
+        if (columns) {
+            for (let c of columns) {
+                if (!hiddenColIds || !hiddenColIds.includes(c.id)) {
+                    showColIds_str.push(c.id);
+                }
+            }
+        }
+        return <SortableGroupContainer disabledColIds={disabledColIds} helperClass={'row-dragging'}   items={columns} selected={showColIds_str} onChange={this.onChange}
+                                       onSortEnd={this.onSortEnd}/>
+    }
+}
+
+export default ColumnSelector;

package/src/components/table/column/index.css

@@ -0,0 +1,14 @@
+
+.row-dragging {
+    background: #fafafa;
+    border: 1px solid #ccc;
+    z-index: 1031;
+}
+
+.row-dragging div {
+    padding: 14px;
+}
+
+.row-dragging .drag-visible {
+    visibility: visible;
+}

package/src/components/table/index.css

@@ -0,0 +1,45 @@
+.editTableList .ant-upload-list-picture .ant-upload-list-item{
+    width:110px;
+}
+.SearchForm{
+    padding: 8px;
+    background:#fff;
+    box-shadow:0 0 5px rgb(187, 182, 182);
+    border-radius: 3px
+}
+.actTable button {
+    margin-right: 5px
+}
+.actTable a{
+    margin-right: 5px
+}
+.actTable h3{
+    font-size: 18px
+}
+
+.row-dragging {
+    background: #fafafa;
+    border: 1px solid #ccc;
+    z-index: 9999;
+}
+
+.row-dragging td {
+    padding: 14px;
+}
+
+.row-dragging .drag-visible {
+    visibility: visible;
+}
+
+.opsColumn {
+    min-width: 80px;
+}
+
+/*.collapse .ant-card-body {*/
+/*    padding:0px*/
+/*}*/
+
+/*.ant-card-head-title button{*/
+/*    font-size: 16px;*/
+/*    padding:0px;*/
+/*}*/

package/src/components/table/l2-act-table.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import {Card, Collapse, Table} from 'antd';
+import {MenuOutlined} from '@ant-design/icons';
+import "./index.css"
+import {LtmplConfigRes, TmplBaseProps} from "../tmpl/interface";
+import Units from "../units";
+import {SortableHandle} from 'react-sortable-hoc';
+import HCDataSource from "../tmpl/hc-data-source";
+import ActTable from './act-table'
+
+interface L2ActTableProps extends TmplBaseProps {
+    innerQueryKey: string;
+};
+
+interface L2ActTableStat {
+    ltmplConfigRes: LtmplConfigRes,
+    criteriaData:object,
+};
+
+
+class L2ActTable extends React.PureComponent<L2ActTableProps, L2ActTableStat> {
+    state = {
+        ltmplConfigRes: undefined,
+        criteriaData:{},
+    }
+
+    loadData = async (criteriaData:object) => {
+        const { sourceId} = this.props;
+        let ltmplConfigRes = await HCDataSource.requestL2LtmplConfig( sourceId);
+        this.setState({
+            ltmplConfigRes,
+            criteriaData
+        })
+    }
+
+    async componentDidMount() {
+        const {criteriaData} = this.state;
+        const { sourceId,innerQueryKey} = this.props;
+        criteriaData['innerQueryKey'] = innerQueryKey;
+        criteriaData['sourceId'] = sourceId;
+        this.loadData(criteriaData);
+    }
+
+    async componentDidUpdate(prevProps) {
+        const {sourceId, innerQueryKey} = this.props;
+        let {sourceId:preSourceId, innerQueryKey: preInnerQueryKey} = prevProps;
+        let {criteriaData} = this.state;
+        if (sourceId &&  sourceId != preSourceId){
+            let params={};
+            params['innerQueryKey'] = innerQueryKey;
+            params['sourceId'] = sourceId;
+            this.loadData(params);
+        }else if (innerQueryKey != preInnerQueryKey) {
+            let params={...criteriaData};
+            params['innerQueryKey'] = innerQueryKey;
+            this.setState({
+                criteriaData:params
+            })
+        }
+    }
+
+    doSearch = (params_) => {
+        const {sourceId, innerQueryKey} = this.props;
+        let criteriaData = {...params_}
+        //追加过滤条件，hiddenColIds，innerQueryKey
+        const {} = this.state;
+        criteriaData['innerQueryKey'] = innerQueryKey;
+        criteriaData['sourceId'] = sourceId;
+        this.setState({
+            criteriaData
+        })
+    }
+
+    render() {
+        let {ltmplConfigRes,criteriaData} = this.state;
+        let {sourceId} = this.props;
+        return (
+            ltmplConfigRes?
+                <ActTable doSearch={this.doSearch} level={'l2'} criteriaData={criteriaData} sourceId={sourceId}
+                          ltmplConfig={ltmplConfigRes.ltmplConfig} /> : ""
+         );
+    }
+}
+
+export default L2ActTable;

package/src/components/table/modal-select-table.tsx

@@ -0,0 +1,248 @@
+import React from 'react'
+import {Modal} from 'antd';
+import "./index.css"
+import {DtmplData, QueryKey, SelectConfig, SelectedRow, SourceName} from "../tmpl/interface";
+import TableUnits from "./table-util";
+import SupportInputTypes from '../tmpl/control-type-supportor';
+import HCDataSource from '../tmpl/hc-data-source';
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import QueryTable from './query-table';
+import CriteriaForm from "../form/criteria-form";
+import ViewControl from "../controls/view-control";
+import SelectedRowsCard from './selected-rows-card'
+
+interface ModelSelectTableProps {
+    maxSelectedRows: number,
+    visible: boolean,
+    sourceId: string,
+    exceptCodes?: string[],
+    onCancel: () => void,
+    onOK: (selectedRows: SelectedRow[]) => void,
+};
+
+interface ModelSelectTableStat {
+    selectConfig: SelectConfig;
+    columns: object[];
+    queryKey: QueryKey;
+    loading: boolean;
+    criteriaData: object;
+    selectedRows: SelectedRow[];
+};
+
+class ModelSelectTable extends React.PureComponent<ModelSelectTableProps, ModelSelectTableStat> {
+    state = {
+        selectConfig: undefined,
+        columns: undefined,
+        queryKey: undefined,
+        loading: true,
+        criteriaData: undefined,
+        disableCols: undefined,
+        selectedRows: [],
+    }
+
+    loadData = async (selectConfig: SelectConfig, criteriaData: object) => {
+
+        this.setState({
+            loading: true,
+        })
+
+        const {defaultPageSize} = selectConfig;
+
+        let pageInfo = {
+            pageNo: 1,
+            pageSize: defaultPageSize ? defaultPageSize : 10,
+            virtualEndPageNo: undefined,
+        }
+        const {sourceId, exceptCodes} = this.props;
+        /** 构建 dataSource **/
+            //构建过滤条件
+        let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey(sourceId, {exceptCodes, ...criteriaData, ...pageInfo});
+        this.setState({
+            queryKey,
+            criteriaData,
+            loading: false,
+        })
+    }
+
+    async componentDidMount() {
+        const { sourceId, visible} = this.props;
+        if (sourceId && visible) {
+            await this.loadData(await this.loadConfig(), {});
+        }
+    }
+
+    loadConfig = async () => {
+        const { sourceId, exceptCodes} = this.props;
+        this.setState({
+            loading: true,
+        })
+
+        let selectConfig = await HCDataSource.requestSelectConfig( sourceId);
+        /** 构建column **/
+        let columns = [];
+
+        let s = 0;
+        selectConfig.columns.forEach((item) => {
+            let column = {};
+            if (item.title != "操作") {
+                columns.push(column);
+            }
+            column['title'] = item.title;
+            column['dataIndex'] = item.id;
+            // column['ellipsis']= true;
+            s++;
+            let itemType = SupportInputTypes.getSupportControlType(item);
+            if (s < 10) {
+                TableUnits.sort(column, itemType);
+            }
+            //特殊列处理
+            //序号
+            if (item.title === "序号") {
+                //item.fixed='left';
+                column['render'] = (text, record, index) => (
+                    <label>{index + 1}</label>
+                )
+                item['sorter'] = undefined;
+            } else {
+                column['render'] = (text, record) => {
+                    return <ViewControl fieldConfig={item} value={record[item.id]} holderType={'table'} />
+                }
+            }
+        });
+        this.setState({
+            columns,
+            selectConfig,
+            loading: false,
+        })
+        return selectConfig;
+    }
+
+    async componentDidUpdate(prevProps) {
+        const {exceptCodes, visible} = this.props;
+        const {selectConfig, criteriaData, queryKey, loading} = this.state;
+        const {exceptCodes: preExceptCodes, visible: preVisible} = prevProps;
+        let config = selectConfig;
+        if (visible) {
+            if (!config) {
+                config = await this.loadConfig();
+            }
+            if (!queryKey && !loading) {
+                await this.loadData(config, criteriaData);
+            }
+        }
+    }
+
+    doSearch = async (params_) => {
+        const {selectConfig} = this.state;
+        let params = {...params_}
+        await this.loadData(selectConfig, params);
+    }
+
+    handleOk = () => {
+        this.props.onOK(this.state.selectedRows);
+        this.setState({
+            selectedRows: [],
+            queryKey: undefined,
+        })
+    }
+
+    handleCancel = () => {
+        this.setState({
+            // selectedRows: [],//暂不置空
+            queryKey: undefined,
+        })
+        this.props.onCancel();
+
+    }
+
+    changeRowSelection = (selectedRows_: SelectedRow[],selectedDatas?:DtmplData[], allRowKeys?: string[]) => {
+        console.log('changeRowSelection:', allRowKeys);
+        let {maxSelectedRows} = this.props;
+        if (allRowKeys) {
+            const {selectedRows} = this.state;
+            let selectedKeys = [];
+            let selectedRows_1: SelectedRow[] = [];
+            if (maxSelectedRows != 1) {
+                selectedRows_1.push(...selectedRows);
+            }
+            //先追加
+            let contains: boolean = false;
+            for (let s1 of selectedRows_) {
+                contains = false;
+                for (let s2 of selectedRows_1) {
+                    if (s1.code == s2.code) {
+                        contains = true;
+                    }
+                }
+                if (!contains) {
+                    selectedRows_1.push(s1);
+                }
+                selectedKeys.push(s1.code);
+            }
+            //再删除
+            let selectedRows_2: SelectedRow[] = [];
+            selectedRows_2.push(...selectedRows_1);
+            for (let row of selectedRows_1) {
+                if (allRowKeys.includes(row.code) && !selectedKeys.includes(row.code)) {
+                    for (let i in selectedRows_2) {
+                        let s = selectedRows_2[i];
+                        if (s.code == row.code) {
+                            selectedRows_2.splice(Number(i), 1);
+                        }
+                    }
+                }
+            }
+            this.setState({
+                selectedRows: selectedRows_2,
+            })
+        } else {
+            this.setState({
+                selectedRows: selectedRows_,
+            })
+        }
+    }
+
+
+    render() {
+        let {visible, maxSelectedRows} = this.props;
+        let {queryKey, columns, selectConfig, criteriaData, loading, selectedRows} = this.state;
+
+        if (!selectConfig) {
+            return <>
+            </>
+        }
+        let {buttons, criterias, jumps, actions} = selectConfig
+        let displayCriteriaCard: boolean = false;
+        if (buttons.includes('delete') || (buttons.includes('query') && criterias && criterias.length > 0) ||
+            (actions && actions.length > 0) || (jumps && jumps.length > 0)) {
+            displayCriteriaCard = true;
+        }
+
+        // const selectedTag=
+
+        return (
+            <Modal
+                visible={visible}
+                title={<SelectedRowsCard value={selectedRows} onChange={this.changeRowSelection}></SelectedRowsCard>}
+                style={{maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'}}
+                width={'1250px'}
+                destroyOnClose={true}
+                centered
+                bodyStyle={{height: 500, overflow: 'auto'}}
+                onCancel={this.handleCancel}
+                onOk={this.handleOk}
+            >
+                <div className="actTable">
+                    <CriteriaForm selectedRows={selectedRows} ltmplConfig={selectConfig} data={criteriaData}
+                                  doSearch={this.doSearch} loading={loading} />
+                    <QueryTable maxSelectedRows={maxSelectedRows} selectedRows={selectedRows} columns={columns}
+                                defaultPageSize={selectConfig.defaultPageSize}
+                                queryKey={queryKey}
+                                onChangeRowSelection={this.changeRowSelection}/>
+                </div>
+            </Modal>
+        );
+    }
+}
+
+export default ModelSelectTable;

package/src/components/table/pagination.css

@@ -0,0 +1,15 @@
+.seeTotal{
+    margin-right:20px;
+    text-decoration:underline;
+    cursor:pointer
+}
+.sewTotal{
+    margin-right:20px;
+    text-decoration:none;
+    cursor:auto;
+}
+.Pagination{
+    display:flex;
+    align-items: center;
+    margin-top:10px;
+}

package/src/components/table/pagination.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {PageInfo} from "../tmpl/interface";
+import {Pagination as AntdPagination} from 'antd';
+import './pagination.css';
+
+interface PaginationProps {
+    pageTo: (pageNo: number, pageSize: number) => void;
+    queryTotal: () => void;
+    pageInfo: PageInfo;
+    total: number;
+    touchEnd: boolean;
+};
+
+interface PaginationStat {
+
+};
+
+
+class Pagination extends React.PureComponent<PaginationProps, PaginationStat> {
+
+    render() {
+        const {queryTotal, pageInfo, total, pageTo, touchEnd} = this.props;
+
+        if(!pageInfo){
+            return <></>
+        }
+
+        let virtualTotal;
+        let myTotal;
+        let sewTotal: boolean = true;
+        let seeTotalTitle: string = "";
+
+        if (total &&  total >= 0) {
+            virtualTotal = total;
+            sewTotal = true;
+            if (total > 0) {
+                seeTotalTitle = `共${total}条`;
+            }
+        } else if (touchEnd ) {
+            sewTotal = false;
+            virtualTotal = pageInfo.virtualEndPageNo * pageInfo.pageSize+1;
+            seeTotalTitle = `点击查看总数`;
+        } else {//这里还有问题
+            sewTotal = false;
+            virtualTotal = pageInfo.virtualEndPageNo * pageInfo.pageSize + 1;
+            seeTotalTitle = `点击查看总数`;
+        }
+
+        return (virtualTotal<pageInfo.pageSize?"":
+            <div className='Pagination'>
+                        <span className={sewTotal ? 'sewTotal' : 'seeTotal'} onClick={queryTotal}>
+                            {seeTotalTitle}
+                        </span>
+                <AntdPagination
+                    style={{display: 'inline-block'}}
+                    showQuickJumper
+                    showSizeChanger
+                    pageSizeOptions={['5', '10', '20', '50', '100', '500']}
+                    defaultCurrent={1}
+                    current={pageInfo.pageNo}
+                    pageSize={pageInfo.pageSize}
+                    onChange={(page, pageSize) => pageTo(page, pageSize)}
+                    onShowSizeChange={(current, size) => pageTo(current, size)}
+                    hideOnSinglePage={total === 0 ? true : false}
+                    total={virtualTotal}
+                />
+            </div>
+        );
+    }
+}
+
+export default Pagination;