aldehyde 0.0.3 → 0.0.6

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>)
+
+    }
+
+}

package/src/components/controls/cquery/cquick-button.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import {Drawer, Space,Button,ButtonProps} from 'antd'
+import {CQueryConfig} from "../../tmpl/interface";
+import LtmplPage from "./../../module/ltmpl-page";
+import {
+    AlignLeftOutlined,
+    CalculatorOutlined,
+    DownloadOutlined,
+    EditOutlined,
+    EyeInvisibleOutlined,
+    EyeOutlined,
+    FundOutlined,
+    LineChartOutlined,
+    MenuOutlined,
+    PlusOutlined,
+    ReloadOutlined,
+    RetweetOutlined,
+    TableOutlined,
+    UploadOutlined,
+    CopyOutlined
+} from '@ant-design/icons';
+
+import DtmplPage from '../../module/dtmpl-page'
+import ModalDtmplEdit from "../../detail/edit/modal-dtmpl-edit";
+
+interface CquickButtonProps extends ButtonProps{
+    mainCode:string;
+    cQueryConfig:CQueryConfig;
+}
+
+interface CquickButtonState {
+    showDraw:boolean;
+}
+
+const outlinedMap={
+    EditOutlined:<EditOutlined/>
+};
+
+
+class CquickButton extends React.PureComponent<CquickButtonProps, CquickButtonState> {
+    state={
+        showDraw:false,
+    }
+
+
+
+
+    showDraw=(currentId:string)=>{
+        // console.log("点击了L2MenuQuickBar",currentId);
+        this.setState({
+            showDraw:true
+        })
+
+    }
+
+    closeDrawer=()=>{
+        this.setState({
+            showDraw:false
+        })
+    }
+
+
+    render() {
+        const {cQueryConfig,mainCode,type,...button}=this.props;
+        const {showDraw,} = this.state;
+
+        console.log("cQuery mainCode",mainCode);
+       let mcode=mainCode && mainCode.indexOf("@R@")>0?mainCode.split("@R@")[0]:mainCode;
+        return (
+            <>
+                {type=='text'?<span className={'cquickTextButton'} onClick={()=>{
+                this.setState({
+                    showDraw:!showDraw
+                })
+            }}>{cQueryConfig.title}</span> :<Button {...button} onClick={()=>{
+                    this.setState({
+                        showDraw:!showDraw
+                    })
+                }}>{outlinedMap[cQueryConfig.title]?outlinedMap[cQueryConfig.title]:cQueryConfig.title}</Button>}
+                {!showDraw?null:
+                    cQueryConfig.type=='edit'?
+                        <ModalDtmplEdit visible={showDraw} onCancel={()=>{
+                            this.setState({
+                                showDraw:false,
+                            })}}
+                             sourceId={cQueryConfig.id}
+                             code={mcode}
+                             onOk={this.closeDrawer} />:
+                        <Drawer
+                            placement={'left'}
+                            title="关联查询"
+                            closable={true}
+                            mask={false}
+                            onClose={this.closeDrawer}
+                            visible={showDraw}
+                            width={'calc(100% - 280px)'}
+                            style={{
+                                maxWidth: 1960,
+                            }}
+                            extra={
+                                <Space>
+                                    <Button  onClick={this.closeDrawer}>关闭</Button>
+                                </Space>
+                            }
+                        >
+                            {
+                                <LtmplPage  sourceId={cQueryConfig.id} mainCode={mcode}></LtmplPage>
+                            }
+                        </Drawer>
+                }
+
+            </>
+        );
+    }
+}
+
+export default CquickButton;