aldehyde 0.0.2 → 0.0.3

package/src/components/detail/edit/row-edit-card.tsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import {Button, Card, FormInstance, Popconfirm, Popover, Space, Tooltip} from 'antd'
-import {CloseOutlined} from '@ant-design/icons'
-import {DtmplData, FieldGroupConfig} from "../../tmpl/interface";
-import FieldGroupForm from '../../form/field-group-form';
-import {ButtonType} from "antd/es/button";
-
-interface RowEditCardProps {
-    height?: any,
-    onCancel?: () => void,
-    onOk: (value: DtmplData,hidden:boolean) => void,
-    fieldGroupConfig: FieldGroupConfig,
-    dtmplData?: DtmplData,
-    okButtonType?: ButtonType,
-    okDanger?: boolean,
-    needConfirm?: boolean,
-}
-
-interface RowEditCardState {
-    isAdded:boolean,
-}
-
-export default class RowEditCard extends React.PureComponent<RowEditCardProps, RowEditCardState> {
-    formRef = React.createRef<FormInstance>();
-    static defaultProps = {
-        forceRender: true,
-        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
-        needConfirm: false,
-        okButtonType: 'primary',
-        okDanger: false,
-    }
-    state = {
-        isAdded:false,
-    }
-
-    async componentDidMount() {
-
-    }
-
-    async componentDidUpdate() {
-        //this.reset();
-    }
-
-    reset = () => {
-        // if (this.formRef.current) {
-        //     this.formRef.current.resetFields();
-        // }
-    }
-
-    onOk = () => {
-        this.setState({isAdded:false})
-        this.formRef.current.submit();
-
-    }
-    add = () => {
-        this.setState({isAdded:true})
-        this.formRef.current.submit();
-    }
-
-    getTitle = () => {
-        const {fieldGroupConfig, dtmplData} = this.props
-        let title = "";
-        title = fieldGroupConfig.title;
-        if (dtmplData) {
-            title = title + "【行编辑】";
-        } else {
-            title = title + "【新建一行】";
-        }
-        return title;
-    }
-
-    render() {
-        const {height, onOk, fieldGroupConfig, dtmplData, onCancel, okButtonType, needConfirm, okDanger} = this.props
-        const {isAdded} = this.state;
-
-        function okButton(onOk) {
-            return needConfirm ? okDanger ?
-                <Popconfirm
-                    placement="rightBottom"
-                    title={`确定要执行提交吗？`}
-                    onConfirm={onOk}
-                    okText="确定"
-                    cancelText="取消"
-                    okType={'danger'}
-                >
-                    <Button type={okButtonType} danger={true} size="small"
-                    >确定</Button>
-                </Popconfirm> :
-                <Popconfirm
-                    placement="rightBottom"
-                    title={`确定要执行提交吗？`}
-                    onConfirm={onOk}
-                    okText="确定"
-                    cancelText="取消"
-                >
-                    <Button size="small" type={okButtonType}
-                    >确定</Button>
-                </Popconfirm> :
-                <Button type={okButtonType} size="small" onClick={onOk}
-                >确定</Button>
-        }
-
-        return <Card
-            style={{width: 1000}}
-            title={this.getTitle()}
-            bodyStyle={{overflow: 'auto'}}
-            extra={<><Space size={[8, 0]}>
-                {/*<Button onClick={this.reset}>重置</Button>*/}
-                {okButton(this.onOk)}
-                {
-                    dtmplData?"":  <Tooltip placement="top" title="可连续添加">
-                        <Button type={'primary'} size={'small'} onClick={this.add}>添加</Button>
-                    </Tooltip>
-                }
-
-                {onCancel ? <Button onClick={onCancel}><CloseOutlined/></Button> : ""}
-            </Space></>}
-        >
-            <FieldGroupForm fieldGroupConfig={fieldGroupConfig} formRef={this.formRef}
-                            onFinish={(value)=>onOk(value,!isAdded)}
-                            dtmplData={dtmplData}> </FieldGroupForm>
-        </Card>
-    }
-
-}

package/src/components/detail/edit/row-editor.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import {Button, FormInstance, Popover, Tooltip} from 'antd'
-import {DtmplData, FieldGroupConfig} from "../../tmpl/interface";
-import {RenderFunction} from "antd/lib/tooltip";
-import RowEditCard from './row-edit-card'
-interface RowEditorProps {
-    buttonTitle?: string,
-    buttonIcon: React.ReactNode,
-    tooltipTitle?: React.ReactNode | RenderFunction;
-    fieldGroupConfig: FieldGroupConfig;
-    dtmplData?: DtmplData;
-    onOk:(value: DtmplData) => void,
-    buttonStyle?:object,
-}
-
-interface RowEditorState {
-    popoverVisible: boolean,
-}
-
-export default class RowEditor extends React.PureComponent<RowEditorProps, RowEditorState> {
-    formRef = React.createRef<FormInstance>();
-    static defaultProps = {
-        buttonIcon:undefined
-    }
-    state = {
-        popoverVisible: false,
-    }
-
-    async componentDidMount() {
-
-    }
-
-    async componentDidUpdate() {
-    }
-
-    // reset = () => {
-    //     if (this.formRef.current) {
-    //         this.formRef.current.resetFields();
-    //     }
-    // }
-
-    onOk = (value,hidden:boolean=true) => {
-        if(hidden){
-            this.setState({popoverVisible:false});
-        }
-
-       this.props.onOk(value);
-    }
-
-
-    render() {
-        const {popoverVisible}=this.state;
-        const {buttonIcon, buttonTitle, tooltipTitle, fieldGroupConfig, dtmplData,buttonStyle} = this.props;
-        return <Popover  destroyTooltipOnHide={true} placement="leftBottom" visible={popoverVisible}
-                        content={<RowEditCard fieldGroupConfig={fieldGroupConfig} dtmplData={dtmplData}
-                                              onCancel={()=>{
-                                                  this.setState({popoverVisible:false});}
-                                              }   onOk={this.onOk}></RowEditCard>} trigger="click">
-            <Tooltip placement="left" title={tooltipTitle}>
-                <Button
-                    style={buttonStyle}
-                    type='primary'
-                    icon={buttonIcon}
-                    size="small"
-                    onClick={() => {
-                        this.setState({popoverVisible:!popoverVisible});
-                    }}
-                >{buttonTitle?buttonTitle:""}</Button></Tooltip></Popover>
-    }
-
-}

package/src/components/detail/rightbar/index.css

@@ -1,35 +0,0 @@
-.rightBar{
-    background: #fff;
-    /*position: absolute;*/
-    /*right:10px;*/
-    /*top:80px;*/
-    border:1px solid #e8e8e8;
-    border-radius: 4px;
-    box-shadow: 2px 2px 10px rgba(0,0,0,.2);
-    height:200px;
-    /*max-height:181px;*/
-    /*min-height:80px;*/
-    min-width: 96px;
-    overflow:auto;
-}
-.rightBar::-webkit-scrollbar {
-    display: none;
-}
-.rightBar ul{
-    padding:0;
-    margin:0;
-}
-.rightBar li{
-    list-style-type: none;
-    cursor: pointer;
-    padding:3px 7px;
-    width:95px;
-    text-align: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-align: left;
-    overflow: hidden;
-}
-.rightBar li:hover{
-    background: #cfe3f5;
-}

package/src/components/detail/rightbar/index.tsx

@@ -1,76 +0,0 @@
-import React from 'react'
-import './index.css'
-import {DtmplConfig, TmplBase} from "../../tmpl/interface";
-import {Affix, Button} from "antd";
-
-interface RightBarProps {
-    parentId:string,
-    dtmplConfig: DtmplConfig,
-    positionRight?:number
-}
-
-
-interface RightBarState {
-
-}
-
-export default class RightBar extends React.PureComponent<RightBarProps, RightBarState> {
-
-    static defaultProps = {
-        positionRight:15,
-    }
-    scrollToAnchor = (anchor: TmplBase) => {
-        if (anchor) {
-            let anchorElement = document.getElementById(this.props.parentId+anchor.id);
-            if (anchorElement) {
-                anchorElement.scrollIntoView({behavior: "smooth", block: "end"})
-            }
-        }
-    }
-    scroll = (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        const list = document.getElementsByClassName("rightBar")[0]
-        if (list) {
-            const ul = list.getElementsByTagName("ul")[0]
-            ul.style.marginTop = ""
-        }
-    }
-
-    render() {
-        const {dtmplConfig,positionRight} = this.props
-        const cardList: TmplBase[] = [];
-
-        if(dtmplConfig){
-            dtmplConfig.groups.forEach(g => {
-                cardList.push({
-                    title: g.title,
-                    id: g.id,
-                });
-            })
-        }
-
-        if (dtmplConfig && dtmplConfig.premises && dtmplConfig.premises.length > 0) {
-            cardList.push({
-                id: dtmplConfig.premises[0].id, title: '默认字段',
-            });
-        }
-
-        // @ts-ignore
-        return (
-            cardList && cardList.length>3?
-            <Affix  style={{position: 'absolute',top:60,right: positionRight,}}  offsetTop={80}>
-                <div className={'rightBar'} onScroll={this.scroll}>
-                    <ul>
-                        {
-                            cardList ? cardList.map((item, index) =>
-                                <li onClick={() => this.scrollToAnchor(item)} key={index}>{item.title}</li>
-
-                            ) : ""
-                        }
-                    </ul>
-                </div>
-            </Affix>:""
-        )
-    }
-}

package/src/components/detail/view/act-dtmpl-view.tsx

@@ -1,155 +0,0 @@
-import React from 'react'
-import {Button, Card, Tooltip} from 'antd'
-import {DtmplBaseProps, DtmplConfig, DtmplData} from "../../tmpl/interface";
-
-import {ReloadOutlined, ScheduleOutlined,EditOutlined} from '@ant-design/icons';
-import HCDataSource from "../../tmpl/hc-data-source";
-import '../dtmpl.css';
-import SnapshotTimeline from "./snapshot-timeline";
-import DtmplView from "./dtmpl-view";
-import Units from '../../units'
-import ActionUtils from "../../controls/action/utils";
-
-export interface ActDtmplViewProps extends DtmplBaseProps {
-    versionId?: number;
-};
-
-export interface ActDtmplViewStat {
-    loading: boolean,
-    dtmplConfig: DtmplConfig,
-    dtmplData: DtmplData,
-    premisesTitle: string,
-    snapshotVisible: boolean,
-    layout: object,
-    refreshCode: string,
-};
-
-class ActDtmplView extends React.PureComponent<ActDtmplViewProps, ActDtmplViewStat> {
-    static defaultProps = {
-        showRightNav: true,
-        rightBarPositionRight: 15,
-    }
-
-    state = {
-        loading: true,
-        dtmplConfig: undefined,
-        snapshotVisible: false,
-        dtmplData: undefined,
-        premisesTitle: "默认字段",
-        layout: {
-            labelCol: {span: 8},
-            wrapperCol: {span: 16},
-        },
-        refreshCode: undefined
-    }
-
-    async componentDidMount() {
-        const { sourceId, code, versionId} = this.props;
-        let dtmplConfig = await HCDataSource.requestDtmplConfig(sourceId);
-        this.setState({
-            dtmplConfig,
-        })
-    }
-
-    // async componentDidUpdate(prevProps) {
-    //     const {sourceName, sourceId, code, versionId} = this.props;
-    //     const {code: preCode, versionId: preVersionId} = prevProps;
-    //     if (code != preCode || (versionId && versionId != prevProps)) {
-    //         await this.loadData();
-    //     }
-    // }
-
-
-    //
-    // const layout = {
-    //     labelCol: {span: 8},
-    //     wrapperCol: {span: 16},
-    // };
-
-    doRefresh = async () => {
-        this.setState({
-            refreshCode: Units.getRandomNum(6)
-        })
-    };
-
-    goEdit = () => {
-        const {goDtmpl,code}=this.props;
-        goDtmpl(code);
-    }
-
-    showSnapshot = () => {
-
-        this.setState({
-                snapshotVisible: true,
-            }
-        )
-
-    }
-
-    onSnapshotClose = () => {
-
-        this.setState({
-                snapshotVisible: false,
-            }
-        )
-
-    }
-
-
-    toSnapshot = () => {
-
-    }
-
-    render() {
-        const {showRightNav, rightBarPositionRight, code,  sourceId,goDtmpl} = this.props;
-        const {dtmplConfig, premisesTitle, loading, dtmplData, layout, snapshotVisible,refreshCode} = this.state;
-        const buttons = dtmplConfig ? dtmplConfig.buttons : undefined;
-        const premises = dtmplConfig ? dtmplConfig.premises : undefined;
-        let showRightNav_ = showRightNav;
-        if (dtmplConfig && dtmplConfig.groups.length < 4) {
-            showRightNav_ = false;
-        }
-        return (
-            <div className={`detailPage ${showRightNav_ ? 'showRightNav' : 'noRightNav'}`}>
-                <Card bordered={false}
-                      key={"detailTitle"}
-                      className="hoverable pageHeader"
-                >
-                    <h3>
-                        {'详情'}
-                        <div className="fr">
-                            {buttons && buttons.includes("dtmplEdit") && goDtmpl && !dtmplConfig.editAction ?
-                                    <Button
-                                        className="hoverbig"
-                                        onClick={this.goEdit}>
-                                        <EditOutlined/>
-                                    </Button> : ""}
-                            {buttons && buttons.includes("history") ?
-                                <Tooltip title="数据快照">
-                                    <Button
-                                        className="hoverbig"
-                                        onClick={this.showSnapshot}>
-                                        <ScheduleOutlined/>
-                                    </Button></Tooltip> : ""}
-                            <Button
-                                className="hoverbig"
-                                title="刷新"
-                                onClick={this.doRefresh}
-                            ><ReloadOutlined/></Button>
-                            <SnapshotTimeline dtmplConfig={dtmplConfig} code={code} onClose={this.onSnapshotClose}
-                                              showSnapshot={this.toSnapshot} sourceId={sourceId}
-                                              visible={snapshotVisible}></SnapshotTimeline>
-                        </div>
-                    </h3>
-                </Card>
-                <DtmplView refreshCode={refreshCode} showRightNav={showRightNav_} rightBarPositionRight={rightBarPositionRight}
-                           dtmplConfig={dtmplConfig} sourceId={sourceId}
-                           code={code}></DtmplView>
-            </div>
-        );
-    }
-}
-
-
-export default ActDtmplView;
-

package/src/components/detail/view/dtmpl-view.tsx

@@ -1,143 +0,0 @@
-import React from 'react'
-import {Button, Card} from 'antd'
-import {DtmplBaseProps, DtmplConfig, DtmplData, FieldGroupConfig} from "../../tmpl/interface";
-import RelationTable from "../../table/relation-table";
-import FieldViewGroup from './field-view-group';
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import RightBar from "../rightbar";
-import '../dtmpl.css';
-import {HolderOutlined}  from '@ant-design/icons';
-import Units from '../../units';
-import CollapseCard from "../../controls/collapse-card";
-import CqueryButtonBar from "../button/cquery-button-bar";
-
-export interface DtmplViewProps extends DtmplBaseProps {
-    versionId?: number;
-    dtmplConfig: DtmplConfig,
-    refreshCode?:string,
-};
-
-export interface DtmplViewStat {
-    id?:string;
-    loading: boolean,
-    dtmplData: DtmplData,
-    premisesTitle: string,
-    layout: object,
-};
-
-class DtmplView extends React.PureComponent<DtmplViewProps, DtmplViewStat> {
-    static defaultProps = {
-        showRightNav: true,
-    }
-
-    state = {
-        loading: true,
-        id:'dtmplView'+Units.getRandomNum(6),
-        snapshotVisible: false,
-        dtmplData: undefined,
-        premisesTitle: "默认字段",
-        layout: {
-            labelCol: {span: 8},
-            wrapperCol: {span: 16},
-        },
-    }
-
-    async componentDidMount() {
-        await this.loadData();
-    }
-
-    async componentDidUpdate(prevProps) {
-        const { sourceId, code, versionId,refreshCode} = this.props;
-        const {code: preCode, versionId: preVersionId,refreshCode:preRefreshCode} = prevProps;
-        if (code != preCode || (versionId && versionId != prevProps.versionId) || (refreshCode && refreshCode!=preRefreshCode)) {
-            await this.loadData();
-        }
-    }
-
-    loadData = async () => {
-        const { sourceId, code, versionId} = this.props;
-        if (code) {
-            this.setState({
-                loading: true,
-            })
-            const dtmplData = await HcserviceV3.requestDtmplData( sourceId, code, versionId);
-            this.setState({
-                dtmplData, loading:false,
-            })
-        }
-    }
-
-    fieldGroupList = () => {
-        const {dtmplConfig} = this.props;
-        const { dtmplData, loading,id} = this.state;
-
-        let groups: FieldGroupConfig[] = [];
-        if (dtmplConfig) {
-            groups = dtmplConfig.groups;
-        }
-        return groups.map((item) => {
-                if (item.type == 'relation') {//关系
-                    if (item.fields) {
-                        let data: DtmplData[] = undefined;
-                        if (dtmplData) {
-                            data = dtmplData.arrayMap[item.id];
-                        }
-                        // console.log("dtmplData", dtmplData );
-                        // console.log("dtmplData data", data );
-                        // console.log("initCollapsed", dtmplData && (!data || data.length<=0));
-                        return <RelationTable initCollapse={ dtmplData && (!data || data.length<=0)} loading={loading} parentId={id} key={item.id} fieldGroupConfig={item} value={data}
-                                              viewOrEdit={"view"}/>
-                    }
-                } else {//字段组
-                    return <CollapseCard
-                        title={item.title}
-                        key={item.id}
-                        id={id+item.id}
-                        className="hoverable"
-                        headStyle={{background: "#f2f4f5"}}
-                        loading={loading}
-                    >
-                        <FieldViewGroup fields={item.fields} valueMap={dtmplData ? dtmplData.fieldMap : undefined}
-                                        width={220}></FieldViewGroup>
-                    </CollapseCard>
-                }
-
-            }
-        );
-    }
-
-    render() {
-        const {showRightNav, rightBarPositionRight, code,  sourceId,dtmplConfig} = this.props;
-        const {premisesTitle, loading, dtmplData, layout, snapshotVisible,id} = this.state;
-        const premises = dtmplConfig ? dtmplConfig.premises : undefined;
-
-        return (
-            <div>
-                {this.fieldGroupList()}
-                {premises && premises.length > 0 ?
-                    <CollapseCard
-                        // title={<Button type="text"><HolderOutlined />{premisesTitle}</Button>}
-                        title={premisesTitle}
-                        key={premisesTitle}
-                        id={id+premises[0].id}
-                        className="hoverable"
-                        headStyle={{background: "#f2f4f5"}}
-                        loading={loading}
-                    >
-                        <FieldViewGroup
-                            fields={premises}/>
-                    </CollapseCard>
-                    : ""
-                }
-                {showRightNav ?
-                    <RightBar parentId={id} positionRight={rightBarPositionRight} dtmplConfig={dtmplConfig}/> : ""
-                }
-                <CqueryButtonBar  dtmplConfig={dtmplConfig} mainCode={code}></CqueryButtonBar>
-            </div>
-        );
-    }
-}
-
-
-export default DtmplView;
-

package/src/components/detail/view/field-view-group.tsx

@@ -1,73 +0,0 @@
-import React from 'react'
-import {Col,Row,Descriptions} from 'antd';
-import {FieldConfig, FieldGroupConfig} from "../../tmpl/interface";
-import ViewControl from './../../controls/view-control';
-
-
-interface FieldViewGroupProps {
-    fields: FieldConfig[],
-    valueMap?: object,
-    width?: number,
-};
-
-interface FieldViewGroupState {
-    fileList: any,
-};
-
-export default class FieldViewGroup extends React.PureComponent<FieldViewGroupProps, FieldViewGroupState> {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            fileList: [],
-        }
-    }
-
-    initViewList = () => {
-        const {fields, valueMap} = this.props
-        const formItemList = [];
-
-        if (fields.length > 0) {
-            fields.forEach((item, index) => {
-                const title = item.title;
-                let fieldValue = valueMap?valueMap[item.id]:undefined;
-                //fieldValue 没有值时不能为null 要为 undefined。antd input所限制
-                fieldValue = fieldValue ? fieldValue : item.defaultValue ? item.defaultValue : undefined;
-                const fieldKey = item.id + Math.random() * 100;
-
-                if(item.extControlType!='hidden'){
-                    const formItem = <Descriptions.Item  label={item.title} span={item.colNum} key={index}
-                                                         className='labelcss'
-                    >
-                        <ViewControl holderType={'descriptions'} value={fieldValue} fieldConfig={item}/>
-                    </Descriptions.Item>
-                    formItemList.push(formItem);
-                }
-            });
-        }
-        return formItemList;
-        // const colList = [];
-        //
-        // for (let i = 0; i < formItemList.length; i = i + 1) {
-        //     let colNum = fields[i].colNum;
-        //     let col = <Col span={12 * colNum}>
-        //         {formItemList[i]}
-        //     </Col>
-        //     colList.push(col);
-        // }
-        //
-        // const row =
-        //     <Row gutter={[16, 8]} key={1}>
-        //         {colList}
-        //     </Row>
-        //return row;
-    }
-
-    render() {
-        return (
-            <Descriptions column={2}>
-                {this.initViewList()}
-            </Descriptions>
-        )
-    }
-}