aldehyde 0.0.12 → 0.1.1

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

@@ -0,0 +1,155 @@
+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 '../../../aldehyde/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/aldehyde/detail/view/dtmpl-view.tsx

@@ -0,0 +1,143 @@
+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 '../../../aldehyde/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/aldehyde/detail/view/field-view-group.tsx

@@ -0,0 +1,73 @@
+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>
+        )
+    }
+}

package/src/aldehyde/detail/view/snapshot-timeline.tsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import {Button, Drawer, Timeline} from 'antd'
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import '../dtmpl.css';
+import {DtmplConfig, SourceName} from "../../../aldehyde/tmpl/interface";
+import Units from '../../../aldehyde/units';
+import DtmplView from "./dtmpl-view";
+
+export interface SnapshotTimelineProps {
+    sourceId: string;
+    code: string;
+    showSnapshot?: (id: number) => void;
+    onClose: () => void;
+    visible: boolean;
+    dtmplConfig: DtmplConfig;
+};
+
+export interface SnapshotTimelineStat {
+    list: any[],
+    loading: boolean,
+    current?: number;
+};
+
+class SnapshotTimeline extends React.PureComponent<SnapshotTimelineProps, SnapshotTimelineStat> {
+    static defaultProps = {}
+
+    state = {
+        list: undefined,
+        loading: false,
+        current: undefined,
+    }
+
+    async componentDidMount() {
+
+    }
+
+    async componentDidUpdate(prevProps) {
+        const {visible} = this.props;
+        const {list} = this.state;
+        if (visible && !list) {
+            this.loadData();
+        }
+    }
+
+    loadData = async () => {
+        const {sourceId, code, showSnapshot} = this.props;
+        const {current} = this.state;
+        if (code) {
+            this.setState({
+                loading: true,
+            })
+            const list = await HcserviceV3.requestVersionList( sourceId, code);
+            this.setState({
+                list, current: !current && list.length > 0 ? list[0].code : current,
+                loading: false,
+            })
+        }
+    }
+
+    onChange = (code: number) => {
+        const {showSnapshot} = this.props;
+        this.setState({
+            current: code
+        })
+        showSnapshot(code);
+    }
+
+    detailHistory = () => {
+        const {list, current} = this.state;
+        let detailHistory
+        if (list.length > 0) {
+            detailHistory = list.map((item, index) => {
+                const isCurrentItem = (current ? item.code === current : false);
+                const color = isCurrentItem ? "red" : "blue";
+                return <Timeline.Item color={color} key={index}>
+                    {Units.formateDate(item.time)}<br/>
+                    {`` + item.userName}
+                    {isCurrentItem ? "" : <Button
+                        style={{marginLeft: 10}}
+                        type="primary"
+                        size="small"
+                        onClick={() => this.onChange(item.code)}
+                    >查看</Button>
+                    }
+                </Timeline.Item>
+            })
+
+            return detailHistory;
+        }
+    }
+
+    render() {
+        const {visible, onClose, dtmplConfig, sourceId,  code} = this.props;
+        const {list, current} = this.state;
+        return (
+            <>
+                <Drawer
+                    title="快照列表"
+                    closable={true}
+                    onClose={onClose}
+                    visible={visible}
+                    width={350}
+                >
+                    {list && list.length > 0 ? <Timeline mode="alternate">
+                        {this.detailHistory()}
+                    </Timeline> : "暂无历史记录"}
+                </Drawer>
+                <Drawer
+                    placement={'left'}
+                    title="快照查看"
+                    closable={true}
+                    mask={false}
+                    onClose={onClose}
+                    visible={visible}
+                    width={'calc(100% - 380px)'}
+                    style={{
+                        maxWidth: 1960,
+                    }}
+                >
+                    <DtmplView showRightNav={false} dtmplConfig={dtmplConfig} sourceId={sourceId}
+                                code={code} versionId={current}></DtmplView>
+                </Drawer>
+            </>
+        );
+    }
+}
+
+
+export default SnapshotTimeline;
+