aldehyde 0.0.1

package/src/components/controls/cquery/cquick-button.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import {Drawer, Space,Button,ButtonProps} from 'antd'
+import {CQueryConfig} from "../../tmpl/interface";
+import LtmplPage from "./../../module/ltmpl-page";
+import {
+    AlignLeftOutlined,
+    CalculatorOutlined,
+    DownloadOutlined,
+    EditOutlined,
+    EyeInvisibleOutlined,
+    EyeOutlined,
+    FundOutlined,
+    LineChartOutlined,
+    MenuOutlined,
+    PlusOutlined,
+    ReloadOutlined,
+    RetweetOutlined,
+    TableOutlined,
+    UploadOutlined,
+    CopyOutlined
+} from '@ant-design/icons';
+
+import DtmplPage from '../../module/dtmpl-page'
+import ModalDtmplEdit from "../../detail/edit/modal-dtmpl-edit";
+
+interface CquickButtonProps extends ButtonProps{
+    mainCode:string;
+    cQueryConfig:CQueryConfig;
+}
+
+interface CquickButtonState {
+    showDraw:boolean;
+}
+
+const outlinedMap={
+    EditOutlined:<EditOutlined/>
+};
+
+
+class CquickButton extends React.PureComponent<CquickButtonProps, CquickButtonState> {
+    state={
+        showDraw:false,
+    }
+
+
+
+
+    showDraw=(currentId:string)=>{
+        // console.log("点击了L2MenuQuickBar",currentId);
+        this.setState({
+            showDraw:true
+        })
+
+    }
+
+    closeDrawer=()=>{
+        this.setState({
+            showDraw:false
+        })
+    }
+
+
+    render() {
+        const {cQueryConfig,mainCode,type,...button}=this.props;
+        const {showDraw,} = this.state;
+
+        console.log("cQuery mainCode",mainCode);
+       let mcode=mainCode && mainCode.indexOf("@R@")>0?mainCode.split("@R@")[0]:mainCode;
+        return (
+            <>
+                {type=='text'?<span className={'cquickTextButton'} onClick={()=>{
+                this.setState({
+                    showDraw:!showDraw
+                })
+            }}>{cQueryConfig.title}</span> :<Button {...button} onClick={()=>{
+                    this.setState({
+                        showDraw:!showDraw
+                    })
+                }}>{outlinedMap[cQueryConfig.title]?outlinedMap[cQueryConfig.title]:cQueryConfig.title}</Button>}
+                {!showDraw?null:
+                    cQueryConfig.type=='edit'?
+                        <ModalDtmplEdit visible={showDraw} onCancel={()=>{
+                            this.setState({
+                                showDraw:false,
+                            })}}
+                             sourceId={cQueryConfig.id}
+                             code={mcode}
+                             onOk={this.closeDrawer}> </ModalDtmplEdit>:
+                        <Drawer
+                            placement={'left'}
+                            title="关联查询"
+                            closable={true}
+                            mask={false}
+                            onClose={this.closeDrawer}
+                            visible={showDraw}
+                            width={'calc(100% - 280px)'}
+                            style={{
+                                maxWidth: 1960,
+                            }}
+                            extra={
+                                <Space>
+                                    <Button  onClick={this.closeDrawer}>关闭</Button>
+                                </Space>
+                            }
+                        >
+                            {
+                                <LtmplPage  sourceId={cQueryConfig.id} mainCode={mcode}></LtmplPage>
+                            }
+                        </Drawer>
+                }
+
+            </>
+        );
+    }
+}
+
+export default CquickButton;

package/src/components/controls/date-picker/index.tsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import {DatePicker as AntdDatePicker,TimePicker} from "antd";
+import moment from "moment";
+import {FieldConfig,EControlProps} from "../../tmpl/interface";
+import Units from "../../units";
+import TmplConfigAnalysis from './../../tmpl/tmpl-config-analysis'
+
+const {RangePicker} = AntdDatePicker;
+
+
+interface DataPickerProps extends EControlProps{
+
+}
+
+
+const DatePicker: React.FC<DataPickerProps> = (props) => {
+
+    const {id,value:propsValue, itemType, fieldConfig, onChange,style} = props;
+    let value=propsValue;
+    let format = Units.getMomentFormat(itemType);
+
+    const changeValue = (value) => {
+        if (onChange) {
+            onChange(value?moment(value).format(format):undefined);
+        }
+    }
+
+    const changeRangeValue = (value:any[]) => {
+        if (onChange) {
+            if(!value){
+                onChange(value);
+            }else if(value.length===2 && value[0] && value[1]){
+                onChange(moment(value[0]).format(format)+"~"+moment(value[1]).format(format));
+            }
+        }
+    }
+
+    // if(value && value.startsWith("$$current")){
+    //     switch (itemType) {
+    //         case 'daterange':
+    //         case 'datetimerange':
+    //             changeRangeValue(TmplConfigAnalysis.current(value,format));
+    //             break;
+    //         default:
+    //             changeValue(TmplConfigAnalysis.current(value,format)[0]);
+    //             break;
+    //     }
+    //
+    // }
+
+    let entryControl = undefined;
+
+    let momentValue;
+    switch (itemType) {
+        case 'date-YY':
+        case 'date-M1':
+        case 'date':
+            momentValue = value ? moment(value, format) : undefined;
+            let picker = itemType == 'date-YY' ? 'year' : itemType == 'date-M1' ? "month" : "date"
+            // @ts-ignore
+            entryControl = <AntdDatePicker
+                id={id}
+                style={{...style}}
+                picker={picker}
+                format={format}
+                value={momentValue}
+                disabled={fieldConfig.disabled}
+                onChange={changeValue}
+            />;
+            break;
+        case 'datetime-HH':
+        case 'datetime-mm':
+        case 'datetime':
+            momentValue = value ? moment(value, format) : undefined;
+            entryControl = <AntdDatePicker
+                id={id}
+                style={{...style}}
+                showTime={{format: Units.getDateTimeFormat(itemType)}}
+                picker='date'
+                format={format}
+                value={momentValue}
+                disabled={fieldConfig.disabled}
+                onChange={changeValue}
+            />;
+            break;
+        case 'daterange-YY':
+        case 'daterange-M1':
+        case 'daterange':
+            let v1 = value && value.indexOf("~") > 0 ? value.split("~")[0] : undefined
+            let v2 = value && value.indexOf("~") > 0 ? value.split("~")[1] : undefined
+            momentValue = [v1 ? moment(v1, format) : undefined, v2 ? moment(v2, format) : undefined];
+            picker = itemType == 'daterange-YY' ? 'year' : itemType == 'daterange-M1' ? "month" : "date"
+            // @ts-ignore
+            entryControl = <RangePicker id={id} picker={picker}
+                                        style={{...style}}
+                                        format={format}
+                                        value={momentValue}
+                                        disabled={fieldConfig.disabled}
+                                        onChange={changeRangeValue}/>;
+            break;
+        case 'datetimerange-HH':
+        case 'datetimerange-mm':
+        case 'datetimerange':
+            const v3 = value && value.indexOf("~") > 0 ? value.split("~")[0] : undefined
+            const v4 = value && value.indexOf("~") > 0 ? value.split("~")[1] : undefined
+            momentValue = [v3 ? moment(v3, format) : undefined, v4 ? moment(v4, format) : undefined];
+            entryControl = <RangePicker id={id} showTime={{format: Units.getDateTimeFormat(itemType)}}
+                                        format={format}
+                                        style={{...style}}
+                                        value={momentValue}
+                                        disabled={fieldConfig.disabled}
+                                        onChange={changeRangeValue}/>;
+            break;
+        case 'time-HH':
+        case 'time-mm':
+        case 'time':
+            momentValue = value ? moment(value, format) : undefined;
+            entryControl =
+                <TimePicker id={id} value={momentValue}
+                            style={{...style}}
+                            disabled={fieldConfig.disabled} onChange={changeValue}
+                            format={format}/>;
+            break;
+        case 'timerange-HH':
+        case 'timerange-mm':
+        case 'timerange':
+            const v5 = value && value.indexOf("~") > 0 ? value.split("~")[0] : undefined
+            const v6 = value && value.indexOf("~") > 0 ? value.split("~")[1] : undefined
+            momentValue = [v5 ? moment(v5, format) : undefined, v6 ? moment(v6, format) : undefined];
+            entryControl = <TimePicker.RangePicker id={id} value={momentValue}
+                                                   style={{...style}}
+                                                   disabled={fieldConfig.disabled}
+                                                   onChange={changeRangeValue} format={format}/>;
+            break;
+    }
+
+    return entryControl;
+
+}
+
+export default DatePicker;

package/src/components/controls/entity-select/entity-select.tsx

@@ -0,0 +1,277 @@
+import * as React from 'react'
+import {Button, Select, Spin} from 'antd'
+import {EControlProps, PageInfo, QueryData, QueryKey, SelectConfig, SourceName} from "../../tmpl/interface";
+import {SearchOutlined} from '@ant-design/icons';
+import debounce from 'lodash/debounce';
+import './index.css';
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import HCDataSource from "../../tmpl/hc-data-source";
+
+interface InnerEntitySelectProps extends EControlProps {
+    maxSelected?: number,
+    onEntityClick?: (code: string) => void,
+};
+
+interface InnerEntitySelectState {
+    titleId: string,
+    optionCacheKey: string,
+    pageNo:number,
+    loading: boolean,
+};
+
+type OptionCache = {
+    queryKey: QueryKey,
+    pageInfo: PageInfo,
+    touchEnd: boolean,
+    options: any,
+    searchValue: string,
+}
+
+type LoadDataSource = {
+    options: any[],
+    touchEnd: boolean,
+
+}
+
+export default class EntitySelect extends React.PureComponent<InnerEntitySelectProps, InnerEntitySelectState> {
+
+    static defaultProps = {
+        maxSelected: 100,
+    }
+
+    state = {
+        titleId: undefined,
+        optionCacheKey: undefined,
+        pageNo:1,
+        loading: false,
+    }
+
+    //没有过滤值的
+    optionsCache: Map<string, OptionCache> = new Map();
+    selectConfig: SelectConfig = undefined;
+
+    toOption = (code: string, title: string, onEntityClick) => {
+        let option = {
+            value: code + '@R@' + title,
+            showlabel: onEntityClick ? <Button size={'small'} style={{padding: '0px'}} type="link" title=""
+                                               onClick={(e) => {
+                                                   e.stopPropagation();
+                                                   onEntityClick(code);
+                                               }}>{title}
+            </Button> : title,
+            label: title,
+        };
+        return option;
+    }
+
+    toOptions = (value, onEntityClick) => {
+        let options: object[] = [];
+        console.log('options value', value);
+
+        let valueArray: string[];
+        if (value instanceof Array) {
+            valueArray = value;
+        } else {
+            if (value) {
+                valueArray = [value];
+            } else {
+                valueArray = [];
+            }
+        }
+
+        for (let v of valueArray) {
+                if (v) {
+                    let vs = v.split("@R@");
+                    options.push(this.toOption(vs[0], vs[1], onEntityClick));
+                }
+        }
+        console.log('options', options);
+        return options;
+    }
+
+    fetchNextPage = async () => {
+
+        const {optionCacheKey, titleId} = this.state;
+        let optionCache = this.optionsCache.get(optionCacheKey);
+        let pageInfo = optionCache.pageInfo;
+        if (!optionCache.touchEnd) {
+            pageInfo.pageNo = pageInfo.pageNo + 1;
+            let dataSource = await this.loadData(optionCache.queryKey.key, {...pageInfo}, titleId);
+            if (dataSource) {
+                optionCache.options = [...optionCache.options, ...dataSource.options];
+                optionCache.touchEnd = dataSource.touchEnd;
+            }
+            this.setState({
+                pageNo:pageInfo.pageNo,
+            })
+        }
+    }
+
+    fetchOptions = async (searchText) => {
+        const { fieldConfig} = this.props;
+
+        this.setState({
+            loading: true,
+        })
+        let optionCacheKey = "withoutValue";
+        //先从缓存里拿
+        if (searchText) {
+            optionCacheKey = searchText;
+        }
+        let titleId = this.state.titleId;
+        let optionCache = this.optionsCache.get(optionCacheKey);
+        if (!optionCache) {
+            if (!this.selectConfig) {
+                this.selectConfig = await HCDataSource.requestSelectConfig( fieldConfig.id);
+            }
+            let pageInfo = {
+                pageNo: 1,
+                pageSize: 4,
+                virtualEndPageNo: undefined,
+            };
+            let selectConfig = this.selectConfig;
+            titleId = selectConfig.columns[1].id;
+            //得到第一个过滤条件
+            let firstCriteria = selectConfig.criterias[0];
+            let formItemName = 'undefinedCriteria';
+            if (firstCriteria) {
+                formItemName = 'c_' + firstCriteria.id;
+            }
+            const {defaultPageSize} = selectConfig;
+            if (defaultPageSize) {
+                pageInfo.pageSize = defaultPageSize;
+            }
+
+            /** 构建 dataSource **/
+                //构建过滤条件
+            let criteriaData = {};
+            criteriaData[formItemName] = searchText;
+            let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey( fieldConfig.id, {...criteriaData, ...pageInfo});
+            let sourceData = await this.loadData(queryKey.key, pageInfo, titleId);
+            optionCache = {
+                options: sourceData.options,
+                pageInfo,
+                queryKey,
+                searchValue: searchText,
+                touchEnd: sourceData.touchEnd
+            };
+            this.optionsCache.set(optionCacheKey, optionCache);
+            this.setState({
+                optionCacheKey,
+                titleId,
+                loading: false,
+            })
+        } else {
+            if (this.state.optionCacheKey == optionCacheKey && optionCacheKey == 'withoutValue') {
+                this.setState({
+                    loading: false,
+                    optionCacheKey,
+                })
+            } else {
+                debounce(() => {
+                    this.setState({
+                        loading: false,
+                        optionCacheKey,
+                    })
+                }, 500)();
+            }
+
+        }
+
+    }
+
+    onChange = (values: any[]) => {
+        if (values && values.length > this.props.maxSelected) {
+            console.log('selected value:', values);
+            let newValues = [...values];
+            newValues.shift();
+            this.onChange(newValues);
+        } else {
+            this.props.onChange(values);
+        }
+    }
+
+
+    loadData = async (queryKey: string, pageInfo: PageInfo, titleId: string): Promise<LoadDataSource> => {
+        const {onEntityClick} = this.props;
+
+        let queryData: QueryData = await HcserviceV3.requestQueryData(queryKey, pageInfo);
+        let options: object[] = [];
+        pageInfo = queryData.pageInfo;
+        queryData.entities.forEach((item, index) => {
+            //先得到第一个
+            let title = item.fieldMap[titleId];
+            let option = this.toOption(item.code, title, onEntityClick);
+            options.push(option);
+        })
+        return {options, touchEnd: queryData.touchEnd};
+    }
+
+    debounceFetcher = () => {
+        const loadOptions = (val) => {
+            this.fetchOptions(val);
+        };
+        return debounce(loadOptions, 800);
+    };
+
+    debounceFetchNextPage = () => {
+        // this.setState({
+        //     loading: true,
+        // })
+        debounce(this.fetchNextPage, 200)();
+        // this.setState({
+        //     loading: false,
+        // })
+    }
+
+
+    render() {
+        const {id,value,  fieldConfig, onChange, style,  maxSelected, onEntityClick} = this.props;
+        const {optionCacheKey, loading} = this.state;
+        let initOptions = this.toOptions(value, onEntityClick);
+        let exists;
+        let properOptions = [...initOptions];
+        if (optionCacheKey) {
+            for (let option of this.optionsCache.get(optionCacheKey).options) {
+                exists = false;
+                for (let init of initOptions) {
+                    if (init['value'] == option['value']) {
+                        exists = true;
+                    }
+                }
+                if (!exists) {
+                    properOptions.push(option);
+                }
+            }
+        }
+
+        return <Select
+            id={id}
+            style={{...style}}
+            onChange={this.onChange}
+            value={value}
+            mode="multiple"
+            placeholder={`请选择${fieldConfig.title}`}
+            notFoundContent={loading ? <Spin size={'small'}></Spin> : "无数据"}
+            allowClear={true}
+            showArrow={true}
+            suffixIcon={<SearchOutlined/>}
+            onSearch={this.debounceFetcher()}
+            onClick={() => {
+                debounce(this.fetchOptions, 100)(undefined)
+            }}
+            options={loading ? [] : properOptions}
+            onPopupScroll={(e) => {
+                const {target} = e;
+                // console.log("target['scrollTop'] + target['offsetHeight']",target['scrollTop'] + target['offsetHeight']+1);
+                // console.log("target['scrollHeight']",target['scrollHeight']);
+                // target.scrollTop + target.offsetHeight === target.scrollHeight  判断是否滑动到底部
+                if (target['scrollTop'] + target['offsetHeight'] + 1 >= target['scrollHeight']) {
+                    this.debounceFetchNextPage();
+                }
+            }}>
+        </Select>
+    }
+}
+
+

package/src/components/controls/entity-select/index.css

@@ -0,0 +1,6 @@
+.entity-select-popover{
+  /*padding: 4px;*/
+}
+.entity-select-popover .ant-popover-inner-content {
+  padding: 4px;
+}

package/src/components/controls/entity-select/popover-entity-select.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react'
+import {Button, Popover, Select} from 'antd'
+import {EControlProps, SelectedRow, SourceName} from "../../tmpl/interface";
+import {SearchOutlined} from '@ant-design/icons';
+import SelectTable from '../../table/select-table'
+import './index.css'
+
+interface EntitySelectProps extends EControlProps {
+    maxSelected?: number,
+    onEntityClick?: (code: string) => void,
+};
+
+interface EntitySelectState {
+
+};
+
+export default class EntitySelect extends React.PureComponent<EntitySelectProps, EntitySelectState> {
+
+    static defaultProps = {
+        maxSelected: 100,
+    }
+
+    state = {}
+
+    onClick = () => {
+        this.setState({
+            showSelectTable: true,
+        })
+    }
+
+    onSelect = (selectedRows: SelectedRow[]) => {
+        const {value, onChange} = this.props;
+        let newValue = [];
+        if (selectedRows) {
+            for (let row of selectedRows) {
+                newValue.push(row.code + '@R@' + row.title);
+            }
+        }
+        onChange(newValue);
+    }
+
+
+    render() {
+        const {id,value, itemType, fieldConfig, onChange, style, maxSelected, onEntityClick} = this.props;
+        const {} = this.state;
+        let selectedRows: SelectedRow[] = [];
+        let relationOptions = []
+
+        let valueArray: string[];
+        if (value instanceof Array) {
+            valueArray = value;
+        } else {
+            if (value) {
+                valueArray = [value];
+            } else {
+                valueArray = [];
+            }
+        }
+
+        valueArray.forEach((v) => {
+                if (v.indexOf('@R@') > 0) {
+                    let vs = v.split('@R@');
+                    selectedRows.push({code: vs[0], title: vs[1]});
+                    relationOptions.push({
+                        value: v,
+                        label: onEntityClick ? <Button size={'small'} style={{padding: '0px'}} type="link" title=""
+                                                       onClick={(e) => {
+                                                           e.stopPropagation();
+                                                           onEntityClick(vs[0]);
+                                                       }}>{vs[1]}
+                        </Button> : vs[1]
+                    });
+                }
+            })
+
+        return <>
+            <Popover overlayClassName={'-popover'} placement="bottom" color={'#f0f0f0'}
+                     overlayStyle={{maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)',}}
+                     overlayInnerStyle={{padding: '0px'}}
+                // getPopupContainer={(triggerNode) => {
+                //        return triggerNode.parentNode;}}
+                     content={<div style={{
+                         height: 300,
+                         backgroundColor: '#fafafa',
+                         overflow: 'auto',
+                         borderStyle: 'solid',
+                         borderRadius: '6px',
+                         borderWidth: '0px',
+                         borderColor: '#8c8c8c'
+                     }}><SelectTable maxSelectedRows={maxSelected} selectedRows={selectedRows} sourceId={fieldConfig.id}
+                                      onChange={this.onSelect}></SelectTable></div>}
+                     trigger="click">
+                <Select id={id} style={{...style}}
+                        value={value}
+                        mode="multiple"
+                        placeholder={`请选择${fieldConfig.title}`}
+                        notFoundContent="请选择"
+                        allowClear={true}
+                        showArrow={true}
+                        suffixIcon={<SearchOutlined/>}
+                        dropdownStyle={{display: 'none'}}
+                        onChange={(value) => {
+                            onChange(value)
+                        }
+                        }
+                        options={relationOptions}
+                >
+                </Select>
+            </Popover>
+        </>;
+    }
+}