aldehyde 0.0.1

package/src/components/controls/action/utils.tsx

@@ -0,0 +1,122 @@
+import {ActionConfig, Comparator, DtmplData} from "../../tmpl/interface";
+import {RefObject} from "react";
+import {FormInstance} from "antd/lib/form/hooks/useForm";
+
+
+export default class ActionUtils {
+
+    static  isShow(actionConfig:ActionConfig, data:DtmplData[] |object[], formRef:RefObject<FormInstance>){
+
+        //所有data都必须满足条件才能显示
+        //let comparator=actionConfig.comparator;
+        let preFieldConfigs = actionConfig.preposes;
+        if (!preFieldConfigs || preFieldConfigs.length <= 0) {
+            return true;
+        }
+
+        let isShow = true;
+        if (formRef && formRef.current) {
+            for (let fieldConfig of preFieldConfigs) {
+                if (!fieldConfig) {
+                    continue;
+                }
+                let value = this.getFormRefValue(formRef, fieldConfig.id);
+                // if (value) {
+                    if (!this.comparator(fieldConfig.comparator, value, fieldConfig.defaultValue)) {
+                        isShow = false;
+                        break;
+                    }
+                //} else if (data) {
+                //     if (!isShow) {
+                //                 //         break;
+                //                 //     }
+                //                 //     for (let d1 of data) {
+                //                 //         if (d1 && d1['fieldMap']) {
+                //                 //             if (!this.comparator(fieldConfig.comparator, d1['fieldMap'][fieldConfig.id], fieldConfig.defaultValue)) {
+                //                 //                 isShow = false;
+                //                 //                 break;
+                //                 //             }
+                //                 //         } else  if (!this.comparator(fieldConfig.comparator, d1[fieldConfig.id], fieldConfig.defaultValue)){
+                //                 //             isShow = false;
+                //                 //             break;
+                //                 //         }else{
+                //                 //             isShow = false;
+                //                 //             break;
+                //                 //         }
+                //                 //     }
+                //                 // }
+            }
+        } else if (data) {
+                for (let d of data) {
+                    if (!isShow) {
+                        break;
+                    }
+                    if (!d ) {
+                        isShow = false;
+                        break;
+                    }
+
+                    for (let fieldConfig of preFieldConfigs) {
+                        if(d['fieldMap']){
+                            if (!this.comparator(fieldConfig.comparator, d['fieldMap'][fieldConfig.id], fieldConfig.defaultValue)) {
+                                isShow = false;
+                                break;
+                            }
+                        }else{
+                            if (!this.comparator(fieldConfig.comparator, d[fieldConfig.id], fieldConfig.defaultValue)) {
+                                isShow = false;
+                                break;
+                            }
+                        }
+
+                    }
+                }
+        } else {
+            isShow = false;
+        }
+        return isShow;
+    }
+    static comparator(comparator: Comparator, value: string, defaultValue: string){
+        let dvs: string[];
+
+        if(!comparator ){
+            comparator='equal';
+        }
+
+        if ( !defaultValue) {
+            return true;
+        }
+
+        if(!value){
+            return false;
+        }
+
+        switch (comparator) {
+            case "equal":
+                return value == defaultValue;
+            case "exclude":
+                (typeof (defaultValue) == 'string') ? dvs = defaultValue.split(',') : dvs = defaultValue;
+                return !dvs.includes(value);
+            case "includeOne":
+                (typeof (defaultValue) == 'string') ? dvs = defaultValue.split(',') : dvs = defaultValue;
+                return dvs.includes(value);
+            case "noGreater":
+                return value <= defaultValue;
+            case "noLess":
+                return value >= defaultValue;
+            case "unequal":
+                return value != defaultValue;
+        }
+    }
+
+    static getFormRefValue(formRef, key){
+
+        if (formRef && formRef.current) {
+            console.log("formRef.current.getFieldsValue",formRef.current.getFieldValue(key));
+            return formRef.current.getFieldValue(key) ;
+        } else {
+            return false;
+        }
+    }
+
+}

package/src/components/controls/auto-complete/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import {AutoComplete as AntdAutoComplete, Input} from "antd";
+import {EControlProps} from "../../tmpl/interface";
+import Units from "../../units";
+import HCDataSource from "../../tmpl/hc-data-source";
+
+const {TextArea} = Input;
+
+interface AutoCompleteProps extends EControlProps {
+
+}
+
+const AutoComplete: React.FC<AutoCompleteProps> = (props) => {
+
+    const {id,value, itemType, fieldConfig, onChange} = props;
+
+    let entryControl = undefined;
+
+    const changeValue = (value1) => {
+        if (onChange) {
+            let newvalue=undefined;
+            if (value1 === undefined) {
+                return "";
+            }
+            let bb = value1.startsWith("@@");
+            if (bb) {
+                newvalue= (value?value:"") + value1.substring(2, value1.length);
+            } else {
+                newvalue=value1;
+            }
+            onChange(newvalue);
+        }
+    }
+
+
+    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
+    let disabled: boolean = fieldConfig.disabled;
+
+    let antdControlProps = {
+      id, placeholder, disabled,
+    }
+
+    const getSelectArray = () => {
+        let data = HCDataSource.getEnums(fieldConfig.mstrucId);
+        if (!data) {
+            return [];
+        }
+        const options = []
+        data.map((item) => {
+            const option = {
+                value: "@@" + item.value,
+                label: item.title
+            };
+            options.push(option)
+            return false
+        })
+        //  debugger
+        return options
+    };
+
+    entryControl = <AntdAutoComplete
+        allowClear={true}
+        dropdownMatchSelectWidth={true}
+        options={getSelectArray()}
+        onChange={changeValue}
+        value={value}
+        //style={{width: scalableWidth}}
+    >
+        <TextArea
+            style={{
+                height: 150,
+            }}
+            {...antdControlProps}
+        />
+    </AntdAutoComplete>
+
+    return entryControl;
+}
+
+export default AutoComplete;

package/src/components/controls/cascader/index.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import Super from "../../tmpl/superagent"
+import {Cascader as AntdCascader} from 'antd'
+
+export default class Cascader extends React.Component{
+
+    state={
+        options:[]
+    }
+    handleChange=(value)=>{
+        let res=""
+        res=value.join("->")
+        console.log(res)
+        this.triggerChange(res)
+    }
+    triggerChange = (changedValue) => {
+        const { onChange } = this.props
+        if (onChange) {
+          onChange(changedValue);
+        }
+      }
+    requestLinkage=(optionKey)=>{ //第一级联动
+        const optGroupId=optionKey.split("@")[0]
+        const time=optionKey.split("@")[1]
+        Super.super({
+			url:`/meta/dict/cas_ops/${optGroupId}`,
+		}).then((res)=>{
+			const ops=[]
+            res.options.forEach((item)=>{
+                const op={}
+                op["value"]=item.title
+                op["label"]=item.title
+                op["key"]=item.id
+                op["isLeaf"]= false
+                ops.push(op)
+            })
+            this.setState({
+                options:ops,
+                time
+            })
+		})
+    }
+    loadData = (selectedOptions) => { //子集联动
+        const targetOption = selectedOptions[selectedOptions.length - 1]
+        targetOption.loading = true
+        this.setState({
+            time:this.state.time-1
+        })
+        if(selectedOptions && this.state.time>=1){
+            let id="";
+            selectedOptions.forEach((item)=>{
+                id=item.key
+            })
+            Super.super({
+                url:`v2/meta/dict/cas_ops/${id}`,
+            }).then((res)=>{
+                const ops=[]
+                const time=this.state.time
+                res.options.forEach((item)=>{
+                    let op={}
+                    op["value"]=item.title
+                    op["label"]=item.title
+                    op["key"]=item.id
+                    if(time===1){
+                        op["isLeaf"]= true
+                    }else{
+                        op["isLeaf"]= false
+                    }
+                    ops.push(op)
+                })
+                setTimeout(() => {
+                    targetOption.loading = false;
+                    targetOption.children =ops
+                    this.setState({
+                        options: [...this.state.options],
+                    });
+                }, 300);
+            })
+        }       
+      }
+    
+    render(){
+        const { optionGroupKey,fieldName }=this.props
+        return (
+            <AntdCascader
+                onClick={()=>this.requestLinkage(optionGroupKey)}
+                placeholder={`请选择${fieldName}`}
+                style={{width:220}}
+                options={this.state.options}
+                loadData={this.loadData}
+                displayRender={label=>label.join('->')}
+                getPopupContainer={trigger => trigger.parentNode}
+                onChange={this.handleChange}
+            />
+        )
+    }
+}

package/src/components/controls/chemstruc/graph.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import {Button, Col, Modal, Popconfirm, Row} from 'antd';
+import {RemoteStructServiceProvider} from 'ketcher-core'
+// import { StandaloneStructServiceProvider } from 'ketcher-standalone'
+import {Editor} from "ketcher-react";
+import 'miew/dist/Miew.min.css'
+import 'ketcher-react/dist/index.css'
+import './index.css'
+import HcserviceV3 from '../../tmpl/hcservice-v3'
+import {VEControlProps} from '../../tmpl/interface'
+import {DeploymentUnitOutlined} from '@ant-design/icons';
+
+interface ChemStrucProps extends VEControlProps {
+
+}
+
+interface ChemStrucState {
+    modalVisible: boolean,
+    molFileLoaded: boolean,
+    molFile: any,
+}
+
+export default class ChemStruc extends React.PureComponent<ChemStrucProps, ChemStrucState> {
+
+    static defaultProps = {
+        viewOrEdit: 'view',
+    }
+
+    state = {
+        modalVisible: false,
+        molFileLoaded: false,
+        molFile: undefined,
+    }
+
+    componentDidMount() {
+
+    }
+
+    //
+    // async componentDidUpdate(prevProps, prevState, snapshot) {
+    //     const {value} = this.props
+    //     const {value:preValue} = prevProps;
+    //
+    //     if(Object.entries(value).toString() != Object.entries(preValue).toString()){
+    //         await this.loadData();
+    //     }
+    // }
+
+
+    loadData = async () => {
+        const {value} = this.props
+        if (value) {
+            let val = JSON.parse(value);
+            let molFile
+            if (val.valid == true) {//此处要优化
+                molFile = await HcserviceV3.loadFileTxt(val.base.path);
+            } else if (val.valid == 'new') {
+                molFile = val.body;
+            } else {
+                molFile = undefined;
+            }
+            console.log('molFile:', molFile);
+            // urilib.resolve('');
+            global.ketcher.setMolecule(molFile);
+            this.setState({
+                molFile,
+            })
+        }
+    }
+
+    saveMolfile = async () => {
+        let value = await global.ketcher.getKet();
+        //let value = await global.ketcher.getGraphAsync();
+        console.log('ket value:', value);
+        this.triggerChange(value);
+        this.setState({
+            modalVisible: false,
+        })
+    }
+
+    triggerChange = (changedValue) => {
+        const {onChange} = this.props
+        if (onChange) {
+            onChange(JSON.stringify({valid: 'new', body: changedValue}));
+        }
+    }
+
+
+    showView = async () => {
+        await this.loadData();
+        this.setState({
+            modalVisible: true
+        })
+    }
+    onCancel = () => {
+        this.setState({
+            modalVisible: false,
+        })
+    }
+
+    render() {
+        const {disabled, viewOrEdit, value} = this.props
+        const {molFile} = this.state
+        const structServiceProvider = new RemoteStructServiceProvider("")
+        return (
+            <>
+                <Button
+                    onClick={this.showView}>
+                    <DeploymentUnitOutlined/> {viewOrEdit == 'view' ? '查 看' : ' 编 辑'}
+                </Button>
+                <Modal
+                    closable={false}
+                    visible={this.state.modalVisible}
+                    forceRender={true}
+                    centered
+                    style={{maxWidth: 'calc(100vw - 62px)', maxHeight: 'calc(100vw - 50px)'}}
+                    width={1200}
+                    onCancel={() => {
+                        this.onCancel()
+                    }}
+                    footer={disabled ? [<Button key={1} onClick={() => {
+                        this.onCancel()
+                    }}>取消</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: '1200px'}}
+                >
+                    <Row style={{
+                        height: '430px',
+                        border: '1px solid #00f',
+                        maxWidth: 'calc(100vw - 92px)',
+                        maxHeight: 'calc(100vw - 80px)'
+                    }}>
+                        <Col key={1} span={24} style={{height: '430px'}}>
+                            <Editor onInit={async (ketcher) => {
+                                global.ketcher = ketcher;
+                                //await ketcher.setMolecule(await HcserviceV3.loadFileTxt(value.base.path));
+                            }} staticResourcesUrl={"ketcher"} structServiceProvider={structServiceProvider}
+                                    errorHandler={undefined}/>
+                            {/*<Editor staticResourcesUrl={"ketcher"} structServiceProvider={structServiceProvider}   />*/}
+                        </Col>
+                    </Row>
+                </Modal>
+            </>
+        );
+    }
+}

package/src/components/controls/chemstruc/index.css

@@ -0,0 +1,28 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.chemstruc-edit-upload{
+  width: 230px;
+}
+
+.ant-upload-list-picture-card-container,
+.ant-upload-select-picture-card{
+  width: 66px!important;
+  height:66px!important;
+}
+/*控制ketcher的选择工具栏的显示层级，modal为1000，所以此处为1020*/
+.ToolbarMultiToolItem-module_portal__yDg5_{
+  z-index: 1020!important;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/components/controls/collapse-card/index.css

@@ -0,0 +1,9 @@
+
+.collapse .ant-card-body {
+    padding:0px
+}
+
+.ant-card-head-title button{
+    font-size: 16px;
+    padding:0px;
+}

package/src/components/controls/collapse-card/index.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import {Button, Card} from 'antd'
+import './index.css'
+import {DownOutlined, RightOutlined} from '@ant-design/icons';
+import {CardProps} from "antd/lib/card";
+
+interface CollapseCardProps extends CardProps {
+    initCollapse?: boolean,
+};
+
+interface CollapseCardState {
+    collapse: boolean
+};
+export default class CollapseCard extends React.PureComponent<CollapseCardProps, CollapseCardState> {
+
+    state = {
+        collapse: false,
+    }
+
+    componentDidMount() {
+        const {initCollapse} = this.props;
+        this.setState({
+            collapse: initCollapse,
+        })
+    }
+
+    componentDidUpdate(prevProps) {
+        const {initCollapse} = this.props;
+        if (this.props != prevProps) {
+            this.setState({
+                collapse: initCollapse,
+            })
+        }
+    }
+
+    cardTitle = () => {
+        const {title} = this.props;
+        const {collapse} = this.state;
+        if (collapse) {
+            return <Button type="text" onClick={() => {
+                this.setState({collapse: false})
+            }}><RightOutlined/>{title}</Button>
+        } else {
+            return <Button type="text" onClick={() => {
+                this.setState({collapse: true})
+            }}><DownOutlined/>{title}</Button>
+        }
+    }
+
+    render() {
+        const {collapse} = this.state;
+            const { extra, title, className,initCollapse, ...other } = this.props;
+        return <Card {...other} extra={collapse ? "" : extra}
+                     className={`${className} ${collapse ? 'collapse' : ""}`} title={this.cardTitle()}>
+            {collapse ? "" : this.props.children}
+        </Card>;
+    }
+
+}

package/src/components/controls/color-picker/index.css

@@ -0,0 +1,27 @@
+
+.color {
+    width: 108px;
+    height: 24px;
+    border-radius: 2px;
+    display: inline-block;
+    /*background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,*/
+}
+.swatch {
+    padding: 5px;
+    background: #fff;
+    border-radius: 1px;
+    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
+    display: inline-block;
+    cursor: pointer;
+}
+.popover{
+    position: absolute;
+    z-index: 2;
+}
+.cover{
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+}

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import {AutoComplete as AntdAutoComplete, Button, Card, Form as AntdForm, Input, Popover, Space} from "antd";
+import {CloseOutlined,CloseCircleOutlined} from '@ant-design/icons'
+import {VEControlProps} from "../../tmpl/interface";
+import './index.css'
+import FormItemGroup from "../../form/form-Item-group";
+import Swatches from 'react-color'
+
+const {TextArea} = Input;
+
+interface PickerProps extends VEControlProps {
+
+}
+
+interface PickerState  {
+    displayColorPicker:boolean
+}
+
+export default class CollapseCard extends React.PureComponent<PickerProps, PickerState> {
+
+    state = {
+        displayColorPicker:false,
+    }
+
+    componentDidMount() {
+
+        this.setState({
+
+        })
+    }
+
+    componentDidUpdate(prevProps) {
+        const {} = this.props;
+        if (this.props != prevProps) {
+            this.setState({
+
+            })
+        }
+    }
+
+    handleChange=(value)=>{
+        if(value && value.hex){
+            this.props.onChange(value.hex);
+        }else{
+            this.props.onChange("");
+        }
+
+    }
+
+    render() {
+        const {displayColorPicker} = this.state;
+        const {value,viewOrEdit,  ...other } = this.props;
+
+       return (viewOrEdit=='view'? <div className={ 'color' } style={{background:value}}>{value}</div> :
+           <Popover visible={displayColorPicker}
+                    content={
+                        <Card
+                              style={{width: 320}}
+                              title={"颜色选择"}
+                              bodyStyle={{overflow: 'auto'}}
+                              extra={<><Space size={[8, 0]}>
+                                  {<Button onClick={() => {
+                                      this.setState({displayColorPicker: false});
+                                  }}><CloseOutlined/></Button>
+                                  }
+                              </Space></>}
+                        >
+                            <Swatches
+                                color={ value }
+                                      onChange={ this.handleChange } />
+                        </Card>
+                    }
+           >
+               <div>
+                   <span onClick={ ()=>{
+                       this.setState({displayColorPicker: !displayColorPicker});
+                   } }  className={ 'color' } style={{background:value,cursor:'pointer'}} >{value?value :
+                       <Button type={'link'}>选择颜色</Button>}</span>
+                   <span>{value?<Button type={'text'} onClick={()=>{this.handleChange(undefined)}}>
+                       <CloseCircleOutlined />
+                   </Button>:""}</span>
+               </div>
+
+        </Popover>)
+
+    }
+
+}