aldehyde 0.0.12 → 0.1.1

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

@@ -0,0 +1,92 @@
+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 {
+
+};
+
+interface SortableElementProps {
+    index:number,
+    value:string,
+    disabledColIds:string[]
+};
+
+interface SortableContainerProps {
+    selected:string[],
+    items:ColumnConfig[],
+    disabledColIds:string[],
+    onChange:(checkedValues:[])=>void
+};
+
+const SortableCheckbox = SortableElement<SortableElementProps>(({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<SortableContainerProps>(({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/aldehyde/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 "../../aldehyde/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/aldehyde/table/select-table.tsx

@@ -0,0 +1,247 @@
+import React from 'react'
+import "./index.css"
+import {DtmplData, QueryKey, SelectConfig,SelectedRow} 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 "../../aldehyde/form/criteria-form";
+import ViewControl from "../controls/view-control";
+
+interface SelectTableProps {
+    maxSelectedRows?: number,
+    sourceId: string,
+    selectedRows: SelectedRow[];
+    selectedDatas?: DtmplData[];
+    // onCancel: () => void,
+    // onOK: (selectedRows: SelectedRow[]) => void,
+    onChange?: (selectedRows: SelectedRow[], selectedDatas: DtmplData[]) => void;
+};
+
+interface SelectTableStat {
+    selectConfig: SelectConfig;
+    columns: object[];
+    queryKey: QueryKey;
+    loading: boolean;
+    criteriaData: object;
+};
+
+class SelectTable extends React.PureComponent<SelectTableProps, SelectTableStat> {
+    static defaultProps = {
+        maxSelectedRows: 1000,
+        selectedDatas:[],
+    }
+    state = {
+        selectConfig: undefined,
+        columns: undefined,
+        queryKey: undefined,
+        loading: true,
+        criteriaData: undefined,
+        disableCols: undefined,
+    }
+
+    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} = this.props;
+        /** 构建 dataSource **/
+            //构建过滤条件
+        let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey(sourceId, {...criteriaData, ...pageInfo});
+        this.setState({
+            queryKey,
+            criteriaData,
+            loading: false,
+        })
+    }
+
+    async componentDidMount() {
+        const {sourceId} = this.props;
+        // if (sourceName && visible) {
+        //  if (sourceName) {
+        await this.loadData(await this.loadConfig(), {});
+        // }
+    }
+
+    loadConfig = async () => {
+        const {sourceId} = 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 holderType={'table'} fieldConfig={item} value={record[item.id]}/>
+                }
+            }
+        });
+        this.setState({
+            columns,
+            selectConfig,
+            loading: false,
+        })
+        return selectConfig;
+    }
+
+    async componentDidUpdate(prevProps) {
+        const {} = 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 selectedRows_new: SelectedRow[];
+        let selectedDatas_new: DtmplData[] = [];
+        const {selectedRows, selectedDatas, onChange, maxSelectedRows} = this.props;
+        if (allRowKeys) {
+            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);
+                        }
+                    }
+                }
+            }
+            selectedRows_new = selectedRows_2;
+        } else {
+            selectedRows_new = selectedRows_;
+        }
+        let selectedDatas_1: DtmplData[] = [...selectedDatas, ...selectedDatas_];
+        for (let s of selectedRows_new) {
+            for (let d of selectedDatas_1) {
+                if (d.code == s.code) {
+                    selectedDatas_new.push(d);
+                }
+            }
+        }
+        onChange(selectedRows_new, selectedDatas_new);
+    }
+
+
+    render() {
+        let {maxSelectedRows, selectedRows, selectedDatas} = this.props;
+        let {queryKey, columns, selectConfig, criteriaData, loading} = 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;
+        }
+        return (
+            // <Card
+            //     // title={<SelectedRowsCard value={selectedRows} onChange={this.changeRowSelection}></SelectedRowsCard>}
+            //     style={{width: 1100,maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'}}
+            //     // onOk={this.handleOk}
+            // >
+            <div className="actTable"
+                // style={{width: 1100,maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)',overflow:'auto'}}
+            >
+                <CriteriaForm selectedRows={selectedRows} selectedDatas={selectedDatas} 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>
+            // </Card>
+        );
+    }
+}
+
+export default SelectTable;

package/src/aldehyde/table/stat/restat.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import {Button, Card, Form as AntdForm, FormInstance, Popconfirm, Popover, Space, Tooltip} from "antd";
+import {CalculatorOutlined, CloseOutlined} from "@ant-design/icons"
+import {FieldConfig,} from "../../tmpl/interface";
+import '../pagination.css';
+import FormItemGroup from "../../../aldehyde/form/form-Item-group";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+interface RestatProps {
+    onfinish: () => void;
+    fields: FieldConfig[];
+    value?: object;
+    sourceId:string;
+};
+
+interface RestatStat {
+    popoverVisible: boolean;
+    loading:boolean,
+};
+
+class Restat extends React.PureComponent<RestatProps, RestatStat> {
+
+    static defaultProps = {}
+    state = {
+        popoverVisible: false,
+        loading:false,
+    }
+    formRef = React.createRef<FormInstance>();
+    onRestat =async (val) => {
+        const {sourceId,onfinish}=this.props;
+        this.setState({
+            loading:true,
+        })
+       await HcserviceV3.increCalc(sourceId,val);
+        this.setState({
+            loading:false,
+        })
+       onfinish();
+    }
+
+    render() {
+        const {popoverVisible,loading} = this.state;
+        const {fields, value} = this.props;
+        return <Popover visible={popoverVisible}
+                        content={
+                            <Card loading={loading}
+                                style={{width: 1000}}
+                                title={"重新统计"}
+                                bodyStyle={{overflow: 'auto'}}
+                                extra={<><Space size={[8, 0]}>
+                                    {
+                                     <Button type={"primary"} onClick={()=>{
+                                         this.formRef.current.submit();
+                                     }}
+                                        >确定</Button>
+                                   }
+                                    {<Button onClick={() => {
+                                        this.setState({popoverVisible: false});
+                                    }}><CloseOutlined/></Button>
+                                    }
+                                </Space></>}
+                            >
+                                <AntdForm labelWrap={true} ref={this.formRef} name="control-hooks" onFinish={this.onRestat}>
+                                    <FormItemGroup nameAttr={'id'} fields={fields}
+                                                   valueMap={value}></FormItemGroup>
+                                </AntdForm>
+                            </Card>}
+
+                        placement="bottomLeft"
+                        trigger="click">
+            <Tooltip title={'重新统计'}><Button onClick={() => {
+                this.setState({popoverVisible: !popoverVisible});
+            }}>
+                <CalculatorOutlined/>
+            </Button></Tooltip>
+        </Popover>
+    }
+}
+
+export default Restat;