aldehyde 0.0.4 → 0.0.5

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

@@ -0,0 +1,240 @@
+import React from 'react'
+import {FieldConfig, ViewOrEdit} from "../tmpl/interface";
+import {Alert, Input, Select, Spin, Checkbox,Radio} from "antd";
+import Rfield from "./rfield";
+import ControlTypeSupportor from "../tmpl/control-type-supportor";
+import DatePicker from './date-picker';
+import Steps from "./steps";
+import InputNumber from "./input-number";
+import InputRange from "./input-range";
+import AutoComplete from "./auto-complete";
+import loadable from "@loadable/component";
+import HCDataSource from "../tmpl/hc-data-source";
+import Upload from '../controls/upload';
+import Progress from './progress'
+
+import EntitySelect from "./entity-select/entity-select";
+import PopoverEntitySelect from './entity-select/popover-entity-select'
+import ColorPicker from './color-picker'
+// import EntitySelect from "./entity-select/inner-entity-select";
+// import ChemStruc from "./chemstruc/graph";
+const  CheckboxGroup=Checkbox.Group;
+const RadioGroup=Radio.Group;
+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});
+
+const {TextArea} = Input;
+
+interface EntryControlProps {
+    value?: any;
+    fieldConfig: FieldConfig;
+    onChange?: any;
+    id?:any;
+}
+
+function getOptions(mstrucId) {
+    const options = [];
+    const items = HCDataSource.getEnums(mstrucId);
+
+    if (items) {
+        items.map((item) => {
+            options.push({label: (item.order ? item.order + "." : "") + item.title, value: item.value})
+        })
+    }
+    return options;
+}
+
+
+function renderControl(id:any,fieldConfig: FieldConfig, fieldValue: any, onChange: any, width: any) {
+
+    let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
+
+    let entryControl = undefined;
+
+    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
+    let disabled: boolean = fieldConfig.disabled;
+
+    let viewOrEdit: ViewOrEdit = 'edit';
+    let controlProps = {
+       id, fieldConfig, itemType, viewOrEdit, onChange, disabled, value: fieldValue, style: {minWidth: 220, width: '100%'}
+    }
+
+    let antdControlProps = {
+        id, placeholder, disabled, value: fieldValue, onChange, style: {minWidth: 220, width: '100%'}
+    }
+
+    const unSupportControl = <Input
+        type="text"
+        placeholder={`暂未实现-${itemType}`}
+        disabled={true}
+    />;
+
+    switch (itemType) {
+        case 'int':
+        case 'decimal':
+        case 'float':
+        case 'double':
+        case 'intrange':
+        case 'decimalrange':
+            entryControl = <InputNumber
+                {...controlProps}
+            />
+            break;
+        case "text":
+            entryControl = <Input allowClear={true}
+                type="text"
+                {...antdControlProps}
+            />;
+            break;
+        case "range":
+            entryControl = <InputRange
+                // style={{width: scalableWidth}}
+                {...controlProps}
+            />;
+            break;
+        case 'select':
+            entryControl = <Select
+                {...antdControlProps}
+                notFoundContent="暂无选项"
+                allowClear={true}
+                showSearch
+                optionLabelProp={'value'}
+                optionFilterProp={'label'}
+                options={getOptions(fieldConfig.mstrucId)}
+            >
+            </Select>
+            break;
+        case 'multiselect':
+        case 'texttags':
+            entryControl = <Select
+                mode="multiple"
+                {...antdControlProps}
+                value={typeof (fieldValue) == 'string' ? fieldValue.split(',') : fieldValue}
+                notFoundContent="暂无选项"
+                allowClear={true}
+                showSearch
+                optionLabelProp={'value'}
+                optionFilterProp={'label'}
+                // filterOption={(input, option) => {
+                //     console.log('option', option);
+                //     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                // }
+                // }
+                showArrow={true}
+                options={getOptions(fieldConfig.mstrucId)}
+            >
+            </Select>
+            break;
+        case "checkbox":
+            entryControl = <CheckboxGroup {...antdControlProps} options={getOptions(fieldConfig.mstrucId)} value={typeof (fieldValue) == 'string' ? fieldValue.split(',') : fieldValue}  />
+            break;
+        case "radio":
+            entryControl = <RadioGroup {...antdControlProps} options={getOptions(fieldConfig.mstrucId)} value={typeof (fieldValue) == 'string' ? fieldValue.split(',')[0] : fieldValue}  />
+            break;
+        case 'date-YY':
+        case 'daterange-YY':
+        case 'date-M1':
+        case 'daterange-M1':
+        case 'date':
+        case 'daterange':
+        case 'datetime-HH':
+        case 'datetimerange-HH':
+        case 'datetime-mm':
+        case 'datetimerange-mm':
+        case 'datetime':
+        case 'datetimerange':
+            entryControl = <DatePicker  {...controlProps}/>;
+            break;
+        case 'time-HH':
+        case 'timerange-HH':
+        case 'time-mm':
+        case 'timerange-mm':
+        case 'time':
+        case 'timerange':
+            entryControl = <DatePicker  {...controlProps}/>;
+            break;
+        case 'textarea':
+            entryControl =
+                <TextArea rows={6} allowClear={true}
+                          {...antdControlProps}
+                />
+            break;
+        case 'html':
+            entryControl = <HtmlEditor viewOrEdit={'edit'}  {...controlProps}></HtmlEditor>;
+            break;
+        case 'steps':
+            entryControl = <Steps {...controlProps}/>
+            break;
+        case 'password':
+            entryControl = unSupportControl;
+            break;
+        case 'preselect':
+            entryControl = <AutoComplete {...controlProps} />
+            break;
+        case 'caselect':
+            entryControl = unSupportControl;
+            break;
+        case 'relation':
+            entryControl = unSupportControl;
+            break;
+        case 'file':
+        case 'video':
+        case 'picture':
+            entryControl = <Upload {...controlProps} />
+            break;
+        case 'chemstruc':
+            entryControl = <ChemStruc viewOrEdit={'edit'} {...controlProps}></ChemStruc>
+            //entryControl =unSupportControl
+            break;
+        case 'relselect':
+        case 'refselect':
+        case 'entity-select':
+            entryControl=<EntitySelect maxSelected={fieldConfig.max?fieldConfig.max:undefined} {...controlProps}  />
+            //  entryControl = <EntitySelect  {...controlProps} sourceName={'rcriteria'}></EntitySelect>
+            break;
+        case 'table-entity-select':
+            entryControl=<PopoverEntitySelect maxSelected={fieldConfig.max?fieldConfig.max:undefined} {...controlProps}  />
+            //  entryControl = <EntitySelect  {...controlProps} sourceName={'rcriteria'}></EntitySelect>
+            break;
+        case 'progress':
+            entryControl = <Progress {...controlProps}></Progress>
+            break;
+        case 'signature':
+            entryControl = <Signature {...controlProps}></Signature>
+            break;
+        case 'color':
+            entryControl = <ColorPicker {...controlProps}></ColorPicker>
+            break;
+        case 'hidden'://
+            entryControl = <Input
+                type="hidden"
+                value={fieldValue}
+                disabled={true}
+            />;
+            break;
+        default:
+            entryControl = unSupportControl
+            break;
+    }
+
+    return entryControl;
+
+}
+
+const EntryControl: React.FC<EntryControlProps> = (props) => {
+    const {fieldConfig, value, onChange,id} = props;
+    return renderControl(id,fieldConfig, value, onChange, null);
+}
+
+export default EntryControl;

package/src/components/controls/enum-badge/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {Badge} from "antd";
+import {VControlProps} from "../../tmpl/interface";
+import HCDataSource from "../../tmpl/hc-data-source";
+
+interface MenuBadgeProps extends VControlProps {
+
+
+}
+
+
+const MenuBadge: React.FC<MenuBadgeProps> = (props) => {
+
+    const {value, itemType, fieldConfig} = props;
+
+    let viewControl = undefined;
+
+    let color = HCDataSource.getEnumValueColor(fieldConfig.mstrucId, value);
+    viewControl = <span className="infoStyle">
+                      {value ?
+                          <Badge color={color ? color : 'green'} text={value}/>
+                          : null}
+            </span>
+
+    return viewControl;
+}
+
+export default MenuBadge;

package/src/components/controls/enum-tag/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Tag} from "antd";
+import {VControlProps} from "../../tmpl/interface";
+import HCDataSource from "../../tmpl/hc-data-source";
+
+interface EnumTagsProps extends VControlProps {
+
+
+}
+
+
+const EnumTags: React.FC<EnumTagsProps> = (props) => {
+
+    const {value, itemType, fieldConfig} = props;
+    let viewControl = undefined;
+    let tagList = [];
+    if (value) {
+        value.split(',').forEach(v => {
+            let color = HCDataSource.getEnumValueColor(fieldConfig.mstrucId, value);
+            tagList.push(<Tag key={v} color={color ? color : 'blue'}>{v}</Tag>)
+        })
+    }
+    viewControl = <span className="infoStyle">
+                                    {tagList}
+                                 </span>
+
+    return viewControl;
+}
+
+export default EnumTags;

package/src/components/controls/file-view/drawer-file-view.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import {Button, Drawer,Space} from 'antd'
+import {ReadOutlined,DownloadOutlined,CloseOutlined} from '@ant-design/icons'
+import FileViewer from 'react-file-viewer';
+// import { CustomErrorComponent } from 'custom-error';
+// import './index.css'
+import {FileValue} from "../../tmpl/interface";
+import HCService from "../../tmpl/hcservice-v3";
+
+interface DrawerFileViewProps {
+    file: FileValue,
+};
+
+interface DrawerFileViewState {
+    drawerVisible: boolean,
+
+};
+export default class DrawerFileView extends React.PureComponent<DrawerFileViewProps, DrawerFileViewState> {
+
+    state = {
+        drawerVisible: false
+    }
+
+    onError(e) {
+        console.log(e, 'error in file-viewer');
+    }
+
+    onClose = () => {
+        this.setState({drawerVisible: false})
+    }
+
+    render() {
+        const {file} = this.props;
+        const {drawerVisible} = this.state;
+        return <span className='labelcss'>
+                        <Button type={'link'} onClick={() => {
+                            this.setState({drawerVisible: true})
+                        }} size="small">{file.base.fileName}</Button>
+                <Button type={'text'} onClick={async () => {
+                        await HCService.download(file.base.path);
+                    }} size="small"><DownloadOutlined/></Button>
+            {drawerVisible ? <Drawer
+                title={file.base.fileName}
+                placement={'left'}
+                closable={false}
+                onClose={this.onClose}
+                width={'1200px'}
+                visible={drawerVisible}
+                extra={
+                <Space>
+                    <Button  onClick={async () => {
+                        await HCService.download(file.base.path);
+                    }} ><DownloadOutlined/></Button>
+                    <Button onClick={this.onClose}><CloseOutlined /></Button>
+                </Space>
+            }>
+                <FileViewer
+                    style={{width: '100%'}}
+                    fileType={file.base.type}
+                    filePath={HCService.getFileUrl(file.base.path)}
+                    errorComponent={undefined}
+                    onError={this.onError}/>
+            </Drawer> : null
+            }
+
+                      </span>;
+    }
+
+}

package/src/components/controls/file-view/index.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react'
+import {Button, Col, Image, Row,Space} from 'antd'
+import {ReadOutlined} from '@ant-design/icons'
+import FileViewer from 'react-file-viewer';
+import DrawerFileView from './drawer-file-view'
+// import { CustomErrorComponent } from 'custom-error';
+// import './index.css'
+import {FieldConfig} from "../../tmpl/interface";
+import {DownloadOutlined} from '@ant-design/icons';
+import HCService from "../../tmpl/hcservice-v3";
+import Player from "griffith";
+
+interface FileViewProps {
+    fieldConfig: FieldConfig,
+    value: any,
+    width?: number,
+};
+
+interface FileViewState {
+    urlData:string
+
+};
+export default class FileView extends React.PureComponent<FileViewProps, FileViewState> {
+
+    state={
+        urlData:undefined,
+    }
+
+    loadData= async ()=>{
+        const {value}=this.props;
+        let jsonFile=this.getJsonValue(value);
+        if(jsonFile){
+            if(/^image\/\w+;base64/.test(jsonFile.base.type)){
+                this.setState({
+                    urlData :await HCService.loadFileTxt(jsonFile.base.path)
+                })
+            }
+        }
+
+    }
+    componentDidMount() {
+        this.loadData();
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const {value}=this.props;
+        const {value:preValue}=this.props;
+        if(value!=preValue){
+            this.loadData();
+        }
+    }
+
+    getJsonValue=(file)=>{
+        let jsonFile;
+        if (!file) {
+            return undefined;
+        } else if (typeof (file) == 'string') {
+            jsonFile = JSON.parse(file);
+        }
+        return jsonFile;
+    }
+
+    packFile2Show =  (file) => {
+        const {urlData}=this.state;
+        let jsonFile=this.getJsonValue(file);
+        if (jsonFile) {
+                if ("new" == jsonFile.valid) {
+                    return jsonFile.fileName
+                } else if ("delete" == jsonFile.valid) {
+                    return undefined;
+                } else if (['png', 'jpg', 'jpeg', 'gif', 'PNG', 'JPG', 'JPEG', 'GIF', 'svg', 'SVG'].includes(jsonFile.base.type)) {
+                    return <Image
+                        width={90}
+                        src={jsonFile.icon.type ? HCService.getFileUrl(jsonFile.icon.path) : HCService.getFileUrl(jsonFile.base.path)}
+                        preview={{
+                            src: HCService.getFileUrl(jsonFile.base.path),
+                        }}
+                    />
+                } else if (urlData) {
+                   // let urlValue = await HCService.loadFileTxt(jsonFile.base.path)
+                    return <Image
+                        width={90}
+                        src={urlData}
+                        preview={{
+                            src: urlData,
+                        }}
+                    />
+                } else if (['mp4', 'MP4', 'mov', 'MOV', 'avi', 'AVI', 'WMV', 'wmv'].includes(jsonFile.base.type)) {
+                    let sources = {
+                        ld: {
+                            play_url: HCService.getFileUrl(jsonFile.base.path),
+                        }
+                    }
+                    return (<Row align={'middle'}>
+                        <Col style={{height: '60px', width: '300px'}}>
+                            <Player locale={'zh-Hans'} sources={sources} id={jsonFile.base.fileName}/>
+                        </Col>
+                    </Row>)
+                }else if ([ 'xlsx', 'docx','csv','webm','bmp'].includes(jsonFile.base.type)){
+                    // return <span className='labelcss'>
+                    //     <Button onClick={async () => {
+                    //         await HCService.openfile(jsonFile.base.path);
+                    //     }} size="small"><ReadOutlined />{jsonFile.base.fileName}</Button>
+                    //
+                    //     <FileViewer
+                    //         fileType={jsonFile.base.type}
+                    //         filePath={HCService.getFileUrl(jsonFile.base.path)}
+                    //         errorComponent={undefined}
+                    //         onError={this.onError}/>
+                    //   </span>
+                    return <DrawerFileView file={jsonFile} ></DrawerFileView>
+                }
+                else if ([ 'pdf','txt'].includes(jsonFile.base.type)){
+                    return <span className='labelcss'>
+                        {/*<a href={this.getFileUrl(file.base.path)}>{file.base.fileName}</a>*/}
+                        <Button type={'link'} onClick={async () => {
+                            await HCService.openfile(jsonFile.base.path);
+                        }} size="small">{jsonFile.base.fileName}</Button>
+                         <Button type={'text'}  onClick={async () => {
+                             await HCService.download(jsonFile.base.path);
+                         }} size="small"><DownloadOutlined/></Button>
+                      </span>
+                }
+                else {
+                    return <Space className='labelcss'>
+                        {/*<a href={this.getFileUrl(file.base.path)}>{file.base.fileName}</a>*/}
+                        <Button type={'link'} onClick={async () => {
+                            await HCService.download(jsonFile.base.path);
+                        }} size="small">{jsonFile.base.fileName}</Button>
+                        <Button type={'text'}  onClick={async () => {
+                            await HCService.download(jsonFile.base.path);
+                        }} size="small"><DownloadOutlined/></Button>
+                      </Space>
+                }
+        } else {
+            return undefined;
+        }
+
+    }
+
+    render() {
+        return <>{this.packFile2Show(this.props.value)}</>;
+    }
+
+}

package/src/components/controls/html-editor/draft.tsx

@@ -0,0 +1,161 @@
+
+import * as React from 'react'
+import {Card} from "antd";
+import {VEControlProps} from "../../tmpl/interface";
+// 核心
+import { EditorState, convertToRaw,convertFromRaw, ContentState } from 'draft-js'
+import { Editor } from 'react-draft-wysiwyg'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+// draft 转换为 html
+import draftToHtml from 'draftjs-to-html'
+// html 转换为 draft
+import htmlToDraft from 'html-to-draftjs'
+
+interface DraftProps extends VEControlProps {
+    getHtml?:any;
+}
+
+interface DraftState  {
+    editorState:boolean;
+}
+
+export default class Draft extends React.PureComponent<DraftProps, DraftState>{
+
+   state={
+       editorState:EditorState.createEmpty(),
+   }
+
+    componentDidMount() {
+        // 如果从后台读取接口存储的有值，读取过来转换为富文本格式默认显示
+        if (this.props.value) {
+            this.toDraft(this.props.value)
+        }
+    }
+
+    onEditorStateChange = (editorState) => {
+        //this.toHtml(editorState)
+
+        this.setState({
+            editorState
+        })
+    }
+
+    editorChange = value => {
+        console.log('html:',draftToHtml(value))
+        if (this.props.onChange) {
+            this.props.onChange(draftToHtml(value));
+        }
+    }
+
+    // // 转换为 html
+    // toHtml = value => {
+    //     let templateContent = draftToHtml(convertToRaw(value.getCurrentContent()))
+    //
+    //     if (this.props.getHtml) {
+    //         // 输出已经编辑好的html
+    //         this.props.getHtml(templateContent)
+    //     }
+    //
+    // }
+
+    // 转换为 Draft
+
+    toDraft = value => {
+        const blocksFromHtml = htmlToDraft(value);
+        const { contentBlocks, entityMap } = blocksFromHtml;
+        const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
+        const editorState = EditorState.createWithContent(contentState);
+        console.log("editorState:",editorState)
+        this.setState({
+            editorState
+        })
+    }
+
+    // imgFileupOnChange = (files) => {
+    //     // 返回值 files 就是上传的文件，控件会默认 Promise 返回，否则无法抓到返回的已上传图片链接
+    //     return new Promise(
+    //         (resolve, rejects) => {
+    //             // 使用 form 表单的形式进行配置，具体参数根据接口来
+    //             let formData = new FormData()
+    //
+    //             formData.append('File', files)
+    //             formData.append('FileType', 'Thumbnail')
+    //             formData.append('IsLogin', true)
+    //             formData.append('Description', '')
+    //
+    //             new Ajax({
+    //                 // 这里是配置自己的图片上传链接
+    //                 url: `/api/file/upload`,
+    //                 method: 'post',
+    //                 headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    //                 data: formData
+    //
+    //             })
+    //                 .start()
+    //                 .then(res => (res = res.data))
+    //                 .then(res => {
+    //                     if (res.Status === 0) {
+    //
+    //                         // Message.success('上传成功!')
+    //                         resolve({ data: { link: res.Result } })
+    //                     } else {
+    //                         // Message.fail('上传失败!')
+    //
+    //                     }
+    //                 })
+    //         }
+    //     )
+    //
+    //
+    // }
+
+     changeValue = (value) => {
+
+    }
+
+
+    render(){
+        const {viewOrEdit,disabled} = this.props;
+
+        const {editorState}=this.state;
+        let entryControl = undefined;
+
+
+
+        const setToolbar = {
+            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'remove', 'history'],
+            colorPicker: {
+                // 图标可以自定义，如果使用默认就注释掉
+                // icon: 'https://-------',
+                className: undefined,
+                component: undefined,
+                popupClassName: undefined,
+                // 图片选项卡自定义
+                colors: ['rgb(97,189,109)', 'rgb(26,188,156)', 'rgb(84,172,210)', 'rgb(44,130,201)',
+                    'rgb(147,101,184)', 'rgb(71,85,119)', 'rgb(204,204,204)', 'rgb(65,168,95)', 'rgb(0,168,133)',
+                    'rgb(61,142,185)', 'rgb(41,105,176)', 'rgb(85,57,130)', 'rgb(40,50,78)', 'rgb(0,0,0)',
+                    'rgb(247,218,100)', 'rgb(251,160,38)', 'rgb(235,107,86)', 'rgb(226,80,65)', 'rgb(163,143,132)',
+                    'rgb(239,239,239)', 'rgb(255,255,255)', 'rgb(250,197,28)', 'rgb(243,121,52)', 'rgb(209,72,65)',
+                    'rgb(184,49,47)', 'rgb(124,112,107)', 'rgb(209,213,216)', 'rgb(0,0,0)'],
+            },
+        }
+
+        entryControl= <Card style={{width:'100%'}} bodyStyle={{padding:'2px',minHeight:'280px'}}>
+            <Editor
+                readOnly={disabled}
+                toolbarHidden={viewOrEdit=='view'? true: false}
+                editorState={editorState}
+                wrapperClassName="contract-template-add-wrapper"
+                editorClassName="contract-template-editor"
+                onEditorStateChange={this.onEditorStateChange}
+                onChange={this.editorChange}
+                toolbar={setToolbar}
+            />
+        </Card>
+
+
+
+        return entryControl;
+
+    }
+}