aldehyde 0.0.1

package/src/components/controls/signature/index.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import {Button, Col, Image, Modal, Popconfirm, Row} from "antd";
+import {VEControlProps} from "../../tmpl/interface";
+import SignatureCanvas from 'react-signature-canvas';
+import {HighlightOutlined} from '@ant-design/icons';
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+
+interface SignatureProps extends VEControlProps {
+
+}
+
+interface SignatureState {
+    modalVisible: boolean,
+    molFileLoaded: boolean,
+    trimmedDataURL:any,
+}
+
+export default class Signature extends React.PureComponent<SignatureProps, SignatureState> {
+
+    static defaultProps = {
+        viewOrEdit: 'view',
+
+    }
+
+    state = {
+        modalVisible: false,
+        molFileLoaded: false,
+        molFile: undefined,
+        trimmedDataURL:undefined,
+    }
+
+    componentDidMount() {
+        this.loadData();
+    }
+   signCanvas=undefined;
+
+    loadData = async () => {
+        const {value} = this.props
+        if (value) {
+            let val = JSON.parse(value);
+            let file
+            if (val.valid == true) {//此处要优化
+                if(/^image\/png;base64/.test(val.base.type)){
+                    file = await HcserviceV3.loadFileTxt(val.base.path);
+                }
+            } else if (val.valid == 'new') {
+                file = val.body;
+            } else {
+                file = undefined;
+            }
+            console.log('file:', file);
+
+            this.setState({
+                trimmedDataURL:file,
+            })
+        }
+    }
+
+    saveMolfile = async () => {
+        let value =  this.signCanvas.getTrimmedCanvas().toDataURL('image/png');
+        // let val=value.replace(/^data:image\/\w+;base64,/, "");
+        // let bytes = window.atob(val);
+        // // 处理异常,将ascii码小于0的转换为大于0
+        // let ab = new ArrayBuffer(bytes.length);
+        // // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
+        // let ia = new Uint8Array(ab);
+        // for (let i = 0; i < bytes.length; i++) {
+        //     ia[i] = bytes.charCodeAt(i);
+        // }
+        // let b= new Blob([ia], {
+        //     type: 'image/png'
+        // });
+
+        console.log('DataURL value:', value);
+        // let data =  this.signCanvas.toData();
+        // console.log('data data:', value);
+        this.triggerChange(value);
+        this.setState({
+            modalVisible: false,
+            trimmedDataURL:value,
+        })
+    }
+
+    triggerChange = (changedValue) => {
+        const {onChange} = this.props
+        if (onChange) {
+            onChange(JSON.stringify({valid: 'new', body: changedValue,suffix:'image/png;base64',fileName:'signature.png'}));
+        }
+    }
+
+
+    showView = async () => {
+        this.signCanvas.clear();
+        this.signCanvas.fromDataURL(this.state.trimmedDataURL);
+        this.setState({
+            modalVisible: true
+        })
+    }
+    onCancel = () => {
+        this.setState({
+            modalVisible: false,
+        })
+    }
+    onClear=()=>{
+        this.signCanvas.clear();
+    }
+
+    render() {
+        const {id,disabled, viewOrEdit, value,} = this.props
+        const {molFile,trimmedDataURL} = this.state
+        return (
+            <span id={id}>{trimmedDataURL?<Image
+                width={90}
+                src={trimmedDataURL}
+                preview={{
+                    src: trimmedDataURL,
+                }}
+            />:""}
+                {viewOrEdit == 'edit'?
+                <Button
+                        onClick={this.showView}>
+                        <HighlightOutlined/>编 辑
+                    </Button>:""
+                }
+
+                <Modal
+                    closable={false}
+                    visible={this.state.modalVisible}
+                    forceRender={true}
+                    centered
+                    style={{maxWidth: 'calc(100vw - 62px)', maxHeight: 'calc(100vw - 50px)'}}
+                    width={900}
+                    onCancel={() => {
+                        this.onCancel()
+                    }}
+                    footer={disabled ? [<Button key={1} onClick={() => {
+                        this.onCancel()
+                    }}>取消</Button>] : [<Button key={1} onClick={() => {
+                       this.onClear();
+                    }} >清除</Button>,<Popconfirm key={2} placement="top" title={"确定要取消本次编辑的数据吗？"}
+                                                   onConfirm={this.onCancel} okText="确定"
+                                                   cancelText="取消"><Button>取消</Button></Popconfirm>,
+                        <Button key={3} onClick={() => {
+                            this.saveMolfile();
+                        }} type='primary'>确定</Button>]}
+                    bodyStyle={{width: '900px'}}
+                >
+                    <Row style={{
+                        height: '430px',
+                        border: '1px solid #00f',
+                        maxWidth: '860px',
+                        maxHeight: 'calc(100vw - 80px)'
+                    }}>
+                        <Col key={1} span={24} style={{height: '400px'}}>
+                            <SignatureCanvas ref={( ref )  =>  { this.signCanvas=ref} } penColor='#000'　canvasProps={{ width:860,height:400,className: 'sigCanvas'}} ></SignatureCanvas>
+                        </Col>
+                    </Row>
+                </Modal>
+            </span>
+        );
+    }
+}

package/src/components/controls/steps/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {Select, Steps as AntdSteps} from "antd";
+import {VEControlProps} from "../../tmpl/interface";
+import Units from "../../units";
+import HCDataSource from "../../tmpl/hc-data-source";
+
+const {Step} = AntdSteps;
+
+
+interface StepsProps extends VEControlProps {
+
+
+}
+
+
+const Steps: React.FC<StepsProps> = ({viewOrEdit = 'view', ...props}) => {
+
+    const {value, itemType, fieldConfig, onChange} = props;
+
+    let entryControl = undefined;
+
+    const changeValue = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+    }
+
+    let enumItems = HCDataSource.getEnums(fieldConfig.mstrucId);
+    let currentIndex = undefined;
+    for (let i in enumItems) {
+        if (value == enumItems[i].value) {
+            currentIndex = parseInt(i);
+        }
+    }
+
+    if ((fieldConfig.disabled || viewOrEdit=='view') ) {
+        entryControl = <AntdSteps current={currentIndex} size="small">
+            {enumItems.map(item => (
+                <Step key={item.value} title={item.title}/>
+            ))}
+        </AntdSteps>
+    } else {
+        entryControl = <Select
+            placeholder={`请选择${fieldConfig.title}`}
+            notFoundContent="暂无选项"
+            allowClear={true}
+            showSearch
+            value={value}
+            onChange={changeValue}
+        >
+            {Units.getSelectOptions(enumItems)}
+        </Select>
+    }
+
+    return entryControl;
+}
+
+export default Steps;

package/src/components/controls/text/ellipsis-text.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import Units from "../../units";
+import {Button, Popover,Card} from "antd";
+
+interface EllipsisTextProps {
+    isHtml?:boolean;
+    value:string;
+    showMax?:number;
+    maxWidth?:string;
+}
+
+interface EllipsisTextState {
+}
+
+export default class EllipsisText extends React.PureComponent<EllipsisTextProps, EllipsisTextState> {
+
+    state={
+    }
+
+    static defaultProps={
+        isHtml:false,
+        showMax:20,
+        maxWidth:"1024px"
+    }
+
+    toString=(value)=>{
+        if(value){
+            return  value.toString();
+        }else{
+            return value;
+        }
+    }
+
+    viewButton=()=>{
+        const {value,isHtml,maxWidth}=this.props
+        return <>
+            <Popover overlayStyle={{maxWidth}}  placement="leftBottom"  trigger="click" content={
+                // <Card bodyStyle={{padding:'0px'}}>
+                <>
+                    {isHtml?<div  style={{padding:'6px'}} dangerouslySetInnerHTML={{__html: value}} ></div>:<div style={{padding:'6px'}}>{value}</div>}
+
+                    </>
+                // </Card>
+            } >
+                <Button type={"link"}  size={'small'}
+                >查看</Button> </Popover>
+        </>
+    }
+
+    render(){
+        const {value,isHtml,showMax}=this.props;
+        var text=this.toString(value);
+        if(isHtml){
+            var re = new RegExp('<[^<>]+>', 'g');
+            text = value.replace(re, "");
+        }
+
+        let style = Units.getLongTextStyle(text.substring(0,showMax));
+       return <>
+               { text.length<=showMax?<span className="infoStyle" style={style}>{text}</span>:
+                   <span className="infoStyle" style={style}>{text.substring(0,showMax)}...
+                       {this.viewButton()}
+                   </span>
+               }
+           </>
+
+       ;
+    }
+
+}

package/src/components/controls/upload/index.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import {Button, Upload as AntdUpload, message, Modal} from 'antd'
+import {UploadOutlined} from '@ant-design/icons';
+import HcserviceV3 from "./../../tmpl/hcservice-v3"
+import {EControlProps,FileValue} from "../../tmpl/interface";
+import Super from "../../tmpl/superagent";
+import {UploadFile} from "antd/es/upload/interface";
+import Units from '../../units'
+interface UploadProps extends EControlProps{
+
+}
+
+interface UploadState {
+
+}
+
+
+export default class Upload extends React.PureComponent<UploadProps, UploadState>{
+
+    state={
+
+    }
+
+    // handleRemove=(info)=>{
+    //     Modal.confirm({
+    //         title: "删除提示",
+    //         content: "您确定删除此图片吗？",
+    //         okText: "确认",
+    //         cancelText: "取消",
+    //         onOk: () => {
+    //             let fileList = []
+    //             this.props.onChange(JSON.stringify({valid:'delete'}));
+    //         },
+    //         onCancel: () => {
+    //             return false;
+    //         }
+    //     });
+    //
+    //     return false;
+    // }
+    handleRemove=(info)=>{
+        this.props.onChange(JSON.stringify({valid:'delete'}));
+    }
+      handleChange= async (info)=>{
+        console.log('file change:',info);
+
+        if (info.file.status=='done'){
+            let newFile:FileValue={
+                valid:'new',
+                fileKey:info.file.response.fileKey,
+                fileName:info.file.originFileObj.name,
+            }
+            const {onChange} = this.props
+            onChange(JSON.stringify(newFile));
+        }
+    }
+    // triggerChange = (changedValue) => {
+    //     onChange(changedValue);
+    //     if (onChange) {
+    //       onChange(changedValue);
+    //     }
+    //   }
+
+    beforeUpload=(file)=>{
+
+        const isLt5M = file.size / 1024 / 1024 < 40;
+        if (!isLt5M) {
+            message.error('超过40M限制 不允许上传~')
+            return false
+        }else{
+            return true
+        }
+
+    }
+
+    render(){
+        const {id,itemType,disabled,value}=this.props
+        let fileList:UploadFile[]=[];
+        if(value){
+            let value_1:FileValue=value;
+            if(typeof value_1=='string'){
+                value_1=JSON.parse(value);
+            }
+            if(value_1.valid===true){
+                fileList.push( {
+                    uid: '-1',
+                    name: value_1.base.fileName,
+                    status: 'done',
+                    url: Units.api()+'/v3/files'+value_1.base.path+`?@token=${Units.getLocalStorge("hydrocarbonToken")}&disposition=attachment`,
+                })
+            }else if(value_1.valid=='new'){
+                fileList.push({
+                    uid: '-2',
+                    name: value_1.fileName,
+                });
+            }
+        }
+
+        return (
+            <div>                                           
+                <AntdUpload id={id}
+                    maxCount={1}
+                    accept={itemType==='picture'?".png, .jpg, .jpeg":itemType==='video'?".mp4":undefined}
+                    listType={itemType =='picture'?'picture':'text'}
+                    fileList={fileList.length==0?undefined:fileList}
+                    disabled={disabled}
+                    name={'file'}
+                    headers={Super.getHeaderObj()}
+                    action={HcserviceV3.postFileAction}
+                    beforeUpload={this.beforeUpload}
+                    onChange={this.handleChange}
+                    onRemove={this.handleRemove}
+                >
+                {fileList && fileList.length>=1?"":
+                    <Button  disabled={disabled}>
+                        <UploadOutlined /> {disabled?"无需上传":'点击上传'}
+                    </Button>}                                                                                                                                                   
+                </AntdUpload>
+            </div>
+        )
+    }
+}

package/src/components/controls/view-control.tsx

@@ -0,0 +1,177 @@
+import React from 'react'
+import {Alert, Badge, Input, Spin, Tag} from "antd";
+import loadable from "@loadable/component";
+import {ControlHolderType, EnumItem, FieldConfig, ViewOrEdit} from "../tmpl/interface";
+import ControlTypeSupportor from '../tmpl/control-type-supportor';
+import EnumTags from './enum-tag';
+import EnumBadge from './enum-badge';
+import Steps from "./steps";
+import Units from './../units';
+import FileView from '../controls/file-view';
+import Rfield from "./rfield";
+import moment from "moment";
+import Progress from './progress'
+import ColorPicker from "./color-picker";
+import EllipsisText from './text/ellipsis-text'
+//import ChemStruc from "./chemstruc/graph";
+// import HtmlEditor from "../HtmlEditor/tinymce";
+const Loading = <Spin tip="Loading...">
+    <Alert
+        message="正在加载数据。。。"
+        description="初次访问加载数据较多，可能需要几秒或几分钟，请耐心等待！！"
+        type="info"
+    />
+</Spin>;
+const Signature = loadable(() =>
+    import("./signature"), {fallback: Loading});
+const ChemStruc = loadable(() =>
+    import("./chemstruc/graph"), {fallback: Loading});
+const HtmlEditor = loadable(() =>
+    import("./html-editor/draft"), {fallback: Loading});
+
+
+
+interface FieldViewControlProps {
+    value?: any;
+    fieldConfig: FieldConfig;
+    holderType:ControlHolderType;
+}
+
+function renderControl(fieldConfig: FieldConfig, fieldValue: any,pHolderType:ControlHolderType, width: any) {
+
+    let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
+    let holderType:ControlHolderType=pHolderType;
+    if(!holderType){
+        holderType="descriptions";
+    }
+
+    const colNum = fieldConfig.colNum;
+    let scalableWidth = width;
+    if (colNum == 2) {
+        scalableWidth = width * colNum * 1.52;
+    }
+    let viewControl = undefined;
+
+    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
+    let disabled: boolean = fieldConfig.disabled;
+    let value = fieldValue ? fieldValue : fieldConfig.defaultValue ? fieldConfig.defaultValue : "";
+    let viewOrEdit:ViewOrEdit='view';
+    let controlProps = {
+        fieldConfig, itemType, value,viewOrEdit,
+    }
+
+    const unSupportControl =
+        <span className="infoStyle">{`暂未完成-${itemType}`}</span>;
+
+    switch (itemType) {
+        case 'int':
+        case 'decimal':
+        case 'float':
+        case 'double':
+        case 'intrange':
+        case 'decimalrange':
+        case "range":
+            viewControl = <span className="infoStyle">{value}</span>
+            break;
+        case 'date-YY':
+        case 'date-M1':
+        case 'date':
+        case 'datetime-HH':
+        case 'datetime-mm':
+        case 'datetime':
+        case 'time-HH':
+        case 'time-mm':
+        case 'time':
+            viewControl = <span className="infoStyle">{value ? moment(value).format(Units.getMomentFormat(itemType)) : undefined}</span>
+            break;
+        case 'daterange-YY':
+        case 'daterange-M1':
+        case 'daterange':
+        case 'datetimerange-HH':
+        case 'datetimerange-mm':
+        case 'datetimerange':
+        case 'timerange-HH':
+        case 'timerange-mm':
+        case 'timerange':
+            viewControl = <span className="infoStyle">{value}</span>
+            break;
+        case 'text':
+        case 'textarea':
+        case 'preselect':
+            if(holderType=='table'){
+                viewControl=<EllipsisText maxWidth={'400px'} isHtml={false} value={value} ></EllipsisText>
+            }else{
+                viewControl = <span className="infoStyle">{value}</span>
+            }
+            break;
+        case 'select':
+        case 'radio':
+            viewControl = <EnumBadge {...controlProps}/>
+            break;
+        case 'multiselect':
+        case 'checkbox':
+            viewControl = <EnumTags {...controlProps} />
+            break;
+        case 'html':
+            if(holderType=='table'){
+                viewControl=<EllipsisText isHtml={true} value={value} ></EllipsisText>
+            }else{
+                viewControl=<div dangerouslySetInnerHTML={{__html: value}} ></div>;
+            }
+            break;
+        case 'steps':
+            viewControl = <Steps {...controlProps}/>
+            break;
+        case 'password':
+            viewControl = unSupportControl;
+            break;
+        case 'caselect':
+            viewControl = unSupportControl;
+            break;
+        case 'relation':
+            viewControl = unSupportControl
+            break;
+        case 'file':
+        case 'picture':
+        case 'video':
+            viewControl = <FileView {...controlProps}></FileView>
+            break;
+        case 'chemstruc':
+            viewControl = <ChemStruc  {...controlProps}></ChemStruc>
+            //viewControl = unSupportControl
+            break;
+        case 'relselect':
+        case 'refselect':
+        case 'entity-select':
+        case 'table-entity-select':
+            viewControl = <Rfield {...controlProps}/>;
+            break;
+        case 'progress':
+            viewControl=<Progress {...controlProps}></Progress>
+            break;
+        case 'signature':
+            viewControl=<Signature {...controlProps}></Signature>
+            break;
+        case 'color':
+            viewControl = <ColorPicker {...controlProps}></ColorPicker>
+            break;
+        case 'hidden'://
+            viewControl = <Input
+                type="hidden"
+                value={fieldValue}
+                disabled={true}
+            />;
+            break;
+        default:
+            viewControl =unSupportControl;
+            break;
+    }
+    return viewControl;
+}
+
+const ViewControl: React.FC<FieldViewControlProps> = (props) => {
+    const {fieldConfig, value,holderType} = props;
+    return renderControl(fieldConfig, value, holderType,null);
+}
+
+export default ViewControl;