aldehyde 0.0.12 → 0.1.3

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 {}  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/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/form/dtmpl-form.tsx

@@ -0,0 +1,272 @@
+import React, {RefObject} from 'react'
+import {Button, Card, Form as AntdForm, message, Modal, Switch} from 'antd'
+import {DtmplBaseProps, DtmplConfig, DtmplData, FieldGroupConfig} from "../tmpl/interface";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import FormItemGroup from "./form-Item-group";
+import {FormInstance} from "antd/lib/form/hooks/useForm";
+import {ReloadOutlined} from '@ant-design/icons';
+import FieldViewGroup from "../detail/view/field-view-group";
+import RelationTable from "../table/relation-table";
+import './dtmpl-form.css';
+import CollapseCard from "../controls/collapse-card";
+
+export interface DtmplFormProps extends DtmplBaseProps {
+    parentId:string,
+    dtmplConfig: DtmplConfig,
+    dtmplData?:DtmplData,
+    formRef: RefObject<FormInstance>,
+    showConfirm: boolean,
+    onFinish: (code:string) => void,
+    onValuesChange?:()=>void,
+};
+
+interface DtmplFormStat {
+    loading: boolean,
+    dtmplData: DtmplData,
+    // changedGroupData:Map<number,DtmplData[]>
+};
+
+const confirm = Modal.confirm;
+
+export default class Form extends React.PureComponent<DtmplFormProps, DtmplFormStat> {
+    fuseMode: boolean = false;
+    premisestitle: string = "默认字段";
+
+    state = {
+        loading: true,
+        dtmplData: undefined,
+        // changedGroupData:new Map<number,DtmplData[]>()
+    }
+
+    async componentDidMount() {
+       await this.loadData();
+    }
+
+    async componentDidUpdate(preProps) {
+        // const { code,formRef} = this.props;
+        const { code:preCode} = preProps;
+        if(preProps!=this.props){
+            await this.loadData();
+        }
+        // this.props.onValuesChange();
+        //  if(code!=preCode || (!code && preCode)){
+        //     await this.loadData();
+        // }else{
+        //      formRef.current.resetFields();
+        //  }
+
+    }
+
+    loadData = async () => {
+        const { sourceId, code, formRef,dtmplData} = this.props;
+        if (code) {
+            this.setState({
+                loading: true,
+            })
+            const dtmplData_ = await HcserviceV3.requestDtmplData( sourceId, code, null);
+            this.setState({
+                dtmplData:dtmplData_,
+                //  changedGroupData:new Map<number,DtmplData[]>(),
+                loading: false,
+            })
+        }else if(dtmplData){
+            this.setState({
+                dtmplData,
+                //  changedGroupData:new Map<number,DtmplData[]>(),
+                loading: false,
+            })
+        }else{
+            this.setState({
+                dtmplData:{code:undefined,title:undefined,fieldMap:{},arrayMap:{}},
+                loading: false,
+            })
+        }
+        //debounce(formRef.current.resetFields();, 500);
+       setTimeout(()=>formRef.current.resetFields(),200)
+    }
+
+    doRefresh = async () => {
+        await this.loadData();
+        message.info("已刷新！")
+    }
+
+    onGroupChange = (fieldGroupConfig: FieldGroupConfig, selectdDatas: DtmplData[]) => {
+        const {dtmplData} = this.state;
+        dtmplData['arrayMap'][fieldGroupConfig.id] = selectdDatas;
+        let dtmplData_1 = {...dtmplData};
+
+        this.setState({
+            dtmplData: dtmplData_1,
+        })
+
+    }
+
+
+    changeFuseMode = (checked) => {
+        this.fuseMode = !checked;
+    }
+
+    postForm = async (result) => {
+        this.setState({
+            loading:true,
+        })
+        const {sourceId, code,dtmplData} = this.props;
+        if (code) { //有code是修改，没有是新增实体模板
+            result['唯一编码'] = code;
+        }else if(dtmplData && dtmplData.code){
+            result['唯一编码'] = dtmplData.code;
+        }
+        let res = await HcserviceV3.postDtmplData(sourceId, result, message);
+        this.setState({
+            loading:false,
+        })
+        if(res.status === "success"){
+            this.props.onFinish(res.code);
+        }
+    }
+
+    onSubmit = async (values: any) => {
+        const {showConfirm, code, dtmplConfig} = this.props;
+        const {dtmplData} = this.state;
+        console.log("from value:",values);
+        let resultCode = undefined;
+        const result = values;
+        for (let group of dtmplConfig.groups) {
+            if (group.type == 'relation') {
+                //添加关系标识
+                values[`${group.id}.$$flag$$`] = true;
+                //添加关系内容
+                let ds: DtmplData[] = dtmplData.arrayMap[group.id];
+                if (ds) {
+                    ds.forEach((d, index) => {
+                        values[`${group.id}[${index}].$$relation$$`] = d.relationLabel;
+                        if (d.editStatus || d.editStatus=='new') {
+                            for (let field of group.fields) {
+                                values[`${group.id}[${index}].${field.id}`] = d.fieldMap[field.id];
+                            }
+                        } else if(d.editStatus || d.editStatus=='changed'){
+                            values[`${group.id}[${index}].唯一编码`] = d.code;
+                            for (let field of group.fields) {
+                                values[`${group.id}[${index}].${field.id}`] = d.fieldMap[field.id];
+                            }
+                        }else{
+                            values[`${group.id}[${index}].唯一编码`] = d.code;
+                        }
+                    })
+                }
+            }
+        }
+        resultCode = await this.postForm(result);
+        // if (showConfirm) {
+        //     confirm({
+        //         title: '确定要保存修改吗',
+        //         okText: '确定',
+        //         okType: 'danger',
+        //         cancelText: '取消',
+        //         onOk: async () =>
+        //             await this.postForm(result)
+        //         ,
+        //     });
+        // } else {
+        //     resultCode = await this.postForm(result);
+        // }
+    }
+
+
+    fieldGroupList = () => {
+
+        const {dtmplConfig,parentId} = this.props;
+        const {dtmplData, loading} = 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];
+                        }
+                        return <RelationTable loading={loading} parentId={parentId}  key={item.id} fieldGroupConfig={item} value={data}
+                                              viewOrEdit={"edit"} onChange={this.onGroupChange}/>
+                    }
+                } else {//字段组
+                    return <CollapseCard
+                        title={item.title}
+                        key={item.id}
+                        id={parentId+item.id}
+                        className="hoverable"
+                        headStyle={{background: "#f2f4f5"}}
+                        loading={loading}
+                    >
+                        <FormItemGroup  fields={item?item.fields:undefined} valueMap={dtmplData ? dtmplData.fieldMap : undefined}
+                        ></FormItemGroup>
+                    </CollapseCard>
+                }
+            }
+        );
+    }
+
+    render() {
+        const {formRef, dtmplConfig,  sourceId, code,parentId,onValuesChange,dtmplData} = this.props;
+        if(!dtmplConfig){
+           return <Card>
+               {/*loading={loading}*/}
+           </Card>
+        }
+        const {buttons, premises} = dtmplConfig;
+        return (
+            <>
+                <Card bordered={false}
+                      key={"detailTitle"}
+                      className="hoverable pageHeader"
+                    // loading={loading}
+                >
+                    <h3>
+                        {code || (dtmplData && dtmplData.code)? "[编辑]":"[新增]"}
+                        <div className="fr">
+                            {buttons && buttons.includes('fusionMode') ?
+                                <Switch
+                                    checkedChildren="开"
+                                    unCheckedChildren="关"
+                                    style={{marginRight: 10}}
+                                    title="融合模式"
+                                    onChange={this.changeFuseMode}/>
+                                : ""}
+                            <Button
+                                className="hoverbig"
+                                title="刷新"
+                                onClick={this.doRefresh}
+                            ><ReloadOutlined/></Button>
+                        </div>
+                    </h3>
+                </Card>
+                <AntdForm scrollToFirstError={true} labelWrap={true}  ref={formRef} name="control-hooks"  onValuesChange={onValuesChange} onFinish={this.onSubmit}>
+                    <AntdForm.Item hidden={true} name={'actionId'}  ></AntdForm.Item>
+                    <AntdForm.Item hidden={true} name={'mainCode'}  ></AntdForm.Item>
+                    {this.fieldGroupList()}
+                </AntdForm>
+                {premises && premises.length > 0 ?
+                    <CollapseCard
+                        title={this.premisestitle}
+                        key={this.premisestitle}
+                        id={parentId+premises[0].id}
+                        className="hoverable"
+                        headStyle={{background: "#f2f4f5"}}
+                        // loading={loading}
+                    >
+                        <FieldViewGroup
+                            fields={premises}/>
+                    </CollapseCard>
+                    : ""
+                }
+            </>
+        );
+    }
+
+}
+
+

package/src/aldehyde/form/form-Item-group.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import {Col, Form, Row} from 'antd'
+import 'moment/locale/zh-cn';
+import {FieldConfig, FieldGroupConfig} from "../tmpl/interface";
+import EntryControl from "../controls/entry-control";
+import Units from '../units'
+
+
+
+const FormItem = Form.Item
+
+export interface FieldGroupProps {
+    fields: FieldConfig[],
+    nameAttr?:string,
+    valueMap: object,
+    width?: number,
+};
+
+interface FieldGroupState {
+    fileList: any,
+};
+
+export default class FormItemGroup extends React.PureComponent<FieldGroupProps, FieldGroupState> {
+
+    static defaultProps={
+        nameAttr:'id',
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            fileList: [],
+        }
+    }
+
+    initFormList = () => {
+        const {fields, valueMap,nameAttr} = this.props
+        const formItemList = [];
+
+        if ( fields && 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==0 ) ? fieldValue : item.defaultValue ? Units.configParamTrans(item.defaultValue): undefined;
+
+                console.log("表单值：",valueMap[item.id],fieldValue);
+
+                const fieldKey = item.id + Math.random() * 100;
+                let formItem=null;
+                if(item.extControlType=='hidden'){
+                    formItem= <FormItem hidden={true}
+                                        initialValue={fieldValue}
+                                        name={item[nameAttr]} key={item.id}>
+                        <EntryControl value={fieldValue} fieldConfig={item} />
+                    </FormItem>
+                }else{
+                     formItem = <FormItem  label={item.title} name={item[nameAttr]} key={item.id}
+                                               labelCol={item.colNum == 1 ? {span: 6} : {span: 3}}
+                                               wrapperCol={item.colNum == 1 ? {span: 15} : {span: 19}}
+                                               tooltip={item.tip}
+                                               initialValue={fieldValue}
+                                               style={{ margin: 4}}
+                                               rules={item.required ? [{
+                                                   required: true, message: `请选择${title}`,
+                                               }] : undefined}>
+                        <EntryControl value={fieldValue} fieldConfig={item} />
+                    </FormItem>
+                }
+                formItemList.push(formItem);
+            });
+        }
+
+        const colList = [];
+
+        for (let i = 0; i < formItemList.length; i = i + 1) {
+            let colNum = fields[i].colNum;
+            if(fields[i].extControlType=='hidden'){
+                colNum=0;
+            }
+            let col = <Col key={i} span={12 * colNum}>
+                {formItemList[i]}
+            </Col>
+            colList.push(col);
+        }
+
+        const row =
+            <Row gutter={[16, 8]} key={1}>
+                {colList}
+            </Row>
+        return row;
+    }
+
+    render() {
+        return (
+            this.initFormList()
+        )
+    }
+}

package/src/aldehyde/index.tsx

@@ -0,0 +1,30 @@
+import ActTable  from './table/act-table';
+import SelectTable  from './table/select-table';
+import Loginit from './login/login';
+import DtmplRoute from './routable/dtmpl-route';
+import ImportRoute from './routable/import-route';
+import LtmplRoute from "./routable/ltmpl-route";
+import DtmplPage from './module/dtmpl-page';
+import LtmplPage from './module/ltmpl-page';
+import Menu2layers from './layout/menu/menu-2layers';
+import Block from './layout/menu/block';
+import UserBar from './layout/menu/user-bar';
+import ResetPassword from "./layout/menu/reset-password";
+import Footer from './layout/footer';
+import EntryControl from './controls/entry-control';
+import ViewControl from "./controls/view-control";
+import ProgramConfig from './units';
+import HydrocarbonService from "./tmpl/hcservice-v3";
+import QuickEntrance from './welcome/quick-entrance'
+import Workbench from './welcome/workbench';
+import PopoverEntitySelect from "./controls/entity-select/popover-entity-select";
+import DatePicker from "./controls/date-picker";
+import ModalDtmplEdit from "./detail/edit/modal-dtmpl-edit";
+import {RouterCompProps} from "./tmpl/interface";
+import "antd/dist/antd.css"
+import "../style/common.css"
+import "../style/coverstyle.css"
+export {ActTable,SelectTable,Loginit,DtmplRoute,ImportRoute,LtmplRoute,DtmplPage,LtmplPage,Menu2layers,Block,UserBar,
+    ResetPassword,Footer,EntryControl,ViewControl,ProgramConfig,HydrocarbonService,QuickEntrance,Workbench,PopoverEntitySelect
+,DatePicker,ModalDtmplEdit,RouterCompProps}
+