aldehyde 0.0.4 → 0.0.5

package/src/components/controls/html-editor/tinymce.js

@@ -0,0 +1,55 @@
+import React from "react";
+import {Input} from "antd";
+import {Editor} from '@tinymce/tinymce-react';
+
+export default class HtmlEidtor extends React.Component {
+    //let [value,setValue] = useState();
+    state = {
+        value: undefined
+    }
+    componentDidMount() {
+        let {initialValue} = this.props;
+        this.setState({
+            value: initialValue
+        })
+    }
+
+    onChange = (content, editor) => {
+        console.log('Content was updated:', content);
+        this.setState({
+            value: content
+        })
+    }
+    onChange1 = (content, editor) => {
+        console.log('Content was updated11:', content);
+        this.setState({
+            value: content
+        })
+    }
+
+
+    render() {
+        let {initialValue} = this.props;
+        return <div>
+            {/*<Input style={{width:'220px'}} />*/}
+            <Editor
+                apiKey={'8htijpc1mghlxkfrfqr8puoylwqnv8nkth2hqvq709awthlo'}
+                initialValue={initialValue}
+                init={{
+                    height: 200,
+                    menubar: false,
+                    plugins: [
+                        'advlist autolink lists link image charmap print preview anchor',
+                        'searchreplace visualblocks code fullscreen',
+                        'insertdatetime media table paste code help wordcount'
+                    ],
+                    toolbar:
+                        'undo redo | formatselect | bold italic backcolor | \
+                        alignleft aligncenter alignright alignjustify | \
+                        bullist numlist outdent indent | removeformat | help'
+                }}
+                onEditorChange={this.props.onChange}
+            />
+        </div>
+    }
+}

package/src/components/controls/input-number/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import {InputNumber as AntdInputNumber,Space} from "antd";
+import {EControlProps} from "../../tmpl/interface";
+import Units from "../../units";
+
+interface InputNumberProps extends EControlProps {
+
+}
+
+const InputNumber: React.FC<InputNumberProps> = (props) => {
+
+    const {id,value, itemType, fieldConfig, onChange,style} = props;
+
+    let entryControl = undefined;
+
+    const changeValue = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+    }
+
+    let valObj=Units.splitValue(value);
+    let valueBegin=valObj['valueBegin'], valueEnd=valObj['valueEnd'];
+    let valueSingle=value || value==0   ?value:null;
+
+    const changeBeginValue = (value) => {
+        if (onChange) {
+            onChange(Units.concatValue(value,valueEnd));
+        }
+    }
+
+    const changeEndValue = (value) => {
+        if (onChange) {
+            onChange(Units.concatValue(valueBegin,value));
+        }
+    }
+
+    const changeInt = (e) => { //只允许输入整数
+            if ((e.target.value || e.target.value==0) && !isNaN(e.target.value)) {
+                e.target.value = parseInt(e.target.value)
+            } else {
+                e.target.value = null
+            }
+        }
+    ;
+
+    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
+    let disabled: boolean = fieldConfig.disabled;
+
+    let antdControlProps = {
+       id, placeholder, disabled,value
+    }
+
+    switch (itemType) {
+        case 'int':
+            entryControl = <AntdInputNumber   style={{...style}} min={fieldConfig.min} max={fieldConfig.max}
+                                            {...antdControlProps} value={valueSingle}
+                                            onKeyUp={changeInt} onChange={changeValue}
+            />
+            break;
+        case 'decimal':
+        case 'float':
+        case 'double':
+            entryControl = <AntdInputNumber style={{...style}}
+                {...antdControlProps} value={valueSingle} min={fieldConfig.min} max={fieldConfig.max}
+                // style={{width}}
+                step={0.1} onChange={changeValue}
+            />
+            break;
+        case 'intrange':
+            entryControl =
+                <Space>
+                <AntdInputNumber  min={fieldConfig.min} max={fieldConfig.max}
+                                            placeholder={`开始`} value={valueBegin}
+                                            onKeyUp={changeInt} onChange={changeBeginValue}
+            />~
+            <AntdInputNumber min={fieldConfig.min} max={fieldConfig.max}
+                             placeholder={`结束`} value={valueEnd}
+                             onKeyUp={changeInt} onChange={changeEndValue}
+            />
+                    </Space>;
+            break;
+        case 'decimalrange':
+            entryControl =
+                <Space>
+                    <AntdInputNumber min={fieldConfig.min} max={fieldConfig.max}
+                                     placeholder={`开始`} value={valueBegin}
+                                      onChange={changeBeginValue} step={0.1}
+                                     disabled={disabled}
+                    />~
+                    <AntdInputNumber min={fieldConfig.min} max={fieldConfig.max}
+                                     placeholder={`结束`} value={valueEnd} step={0.1}
+                                      onChange={changeEndValue}  disabled={disabled}
+                    />
+                </Space>;
+            break;
+    }
+    return entryControl;
+}
+
+export default InputNumber;

package/src/components/controls/input-range/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import {Input} from "antd";
+import {EControlProps} from "../../tmpl/interface";
+import Units from '../../units/'
+
+interface InputRangeProps extends EControlProps {
+
+}
+
+const InputRange: React.FC<InputRangeProps> = (props) => {
+
+    const {id,value, itemType, fieldConfig, onChange, style} = props;
+
+    let entryControl = undefined;
+
+
+    let valObj=Units.splitValue(value);
+    let valueBegin=valObj['valueBegin'], valueEnd=valObj['valueEnd'];
+    const changeBeginValue = ({ target: { value } }) => {
+        if (onChange) {
+            onChange(Units.concatValue(value,valueEnd));
+        }
+    }
+
+    const changeEndValue = ({ target: { value } }) => {
+        if (onChange) {
+            onChange(Units.concatValue(valueBegin,value));
+        }
+    }
+
+    let disabled: boolean = fieldConfig.disabled;
+    entryControl =
+        <Input.Group   compact>
+            <Input id={id} style={{ width: '45%' }} disabled={disabled} min={fieldConfig.min} max={fieldConfig.max}
+                   placeholder={`开始`} value={valueBegin}
+                   onChange={changeBeginValue}
+            />
+            ~
+            <Input style={{ width: '45%' }} disabled={disabled} min={fieldConfig.min} max={fieldConfig.max}
+                   placeholder={`结束`} value={valueEnd}
+                   onChange={changeEndValue}
+            />
+        </Input.Group>;
+
+    return entryControl;
+}
+
+export default InputRange;

package/src/components/controls/password-setter/index.css

@@ -0,0 +1,3 @@
+.setPass .ant-form-item{
+    margin-bottom: 0;
+}

package/src/components/controls/password-setter/index.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import {Modal, Input, Form, message} from 'antd'
+import {LockOutlined} from '@ant-design/icons';
+import './index.css'
+
+export default class SetPasswords extends React.Component {
+
+    handleOk = () => {
+        const {oldPass} = this.props
+        this.props.form.validateFields({force: true}, (err, values) => { //提交再次验证
+            if (!err) {
+                if (oldPass === values.oldpass) {
+                    this.props.setNewPass(values.newpass)
+                } else {
+                    message.error("原登录密码不正确！")
+                }
+            }
+
+        })
+    }
+    compareToFirstPassword = (rule, value, callback) => {
+        const form = this.props.form;
+        if (value && value !== form.getFieldValue('newpass')) {
+            callback('请输入相同的密码!');
+        } else {
+            callback();
+        }
+    }
+
+    render() {
+        const {showSetPass, handleCancel} = this.props
+        return (
+            <Modal
+                title="修改密码"
+                visible={showSetPass}
+                onOk={this.handleOk}
+                destroyOnClose
+                onCancel={handleCancel}
+                className="setPass"
+                maskClosable={false}
+            >
+                <Form style={{width: "100%"}}>
+                    <Form.Item label={"原登录密码"} name='oldpass' rules={[{required: true, message: '请输入原登录密码!'}]}>
+                        <Input
+                            prefix={<LockOutlined/>}
+                            placeholder="请输入原登录密码"
+                            type="password"
+                        />,
+                    </Form.Item>
+                    <Form.Item label={"新登录密码"} name='oldpass'> rules={[{required: true, message: '请输入新登录密码!'}]}
+                        <Input
+                            prefix={<LockOutlined/>}
+                            type="password"
+                            placeholder="请输入新登录密码"
+                        />,
+                    </Form.Item>
+                    <Form.Item label={"确认密码"}> name='apass' rules={[{required: true, message: '确认密码!'},
+                        {validator: this.compareToFirstPassword,}
+                    ]}
+                        <Input
+                            prefix={<LockOutlined/>}
+                            type="password"
+                            placeholder="确认密码"
+                        />
+                    </Form.Item>
+                </Form>
+            </Modal>
+        )
+    }
+}

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

@@ -0,0 +1,61 @@
+import React from 'react'
+import {InputNumber as AntdInputNumber,Progress as AntdProgress,Space} from "antd";
+import {EControlProps,VEControlProps} from "../../tmpl/interface";
+import Units from "../../units";
+
+interface ProgressProps extends VEControlProps {
+
+}
+
+const Progress: React.FC<ProgressProps> = (props) => {
+
+    const {value, itemType, fieldConfig, onChange,style,viewOrEdit} = props;
+
+    let val=0;
+
+    if (!value ) {
+        val=0;
+    }else{
+        if(isNaN(value)){
+           val= value;
+        }else {
+            val=value.toString();
+        }
+    }
+
+    const changeValue = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+    }
+
+    const changeInt = (e) => { //只允许输入整数
+            if (e.target.value && !isNaN(e.target.value)) {
+                e.target.value = parseInt(e.target.value)
+            } else {
+                e.target.value = 0
+            }
+        }
+    ;
+
+    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
+    let disabled: boolean = fieldConfig.disabled;
+
+    let antdControlProps = {
+        placeholder, disabled,value
+    }
+
+    let entryControl;
+
+    if(viewOrEdit=='view' || fieldConfig.disabled){
+        entryControl= <AntdProgress width={90}  percent={val} />
+    }else{
+        entryControl = <AntdInputNumber style={{...style}} min={0} max={100}
+                                        {...antdControlProps}
+                                        onKeyUp={changeInt} onChange={changeValue}
+        />
+    }
+    return entryControl;
+}
+
+export default Progress;

package/src/components/controls/relation-existion/index.css

@@ -0,0 +1,4 @@
+
+.ant-popover-inner-content {
+  padding: 4px;
+}

package/src/components/controls/relation-existion/index.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import {Popover, Select} from 'antd'
+import {EControlProps, SelectedRow} from "../../tmpl/interface";
+import {SearchOutlined} from '@ant-design/icons';
+import SelectTable from '../../table/select-table'
+import './index.css'
+
+interface RelationExistionProps extends EControlProps {
+
+};
+
+interface RelationExistionState {
+    showSelectTable: boolean;
+};
+
+export default class RelationExistion extends React.PureComponent<RelationExistionProps, RelationExistionState> {
+
+    state = {
+        showSelectTable: false,
+    }
+
+    onClick = () => {
+        this.setState({
+            showSelectTable: true,
+        })
+    }
+
+    onClear = () => {
+        const { onChange} = this.props;
+        onChange([]);
+    }
+
+    onDeselect=(val:string)=>{
+        const {value, onChange} = this.props;
+        let newValue = [];
+        if (value) {
+            for (let v of value) {
+                if(val!=v){
+                    newValue.push(v);
+                }
+            }
+        }
+        onChange(newValue);
+    }
+
+    onSelect = (selectedRows: SelectedRow[]) => {
+        const {value, onChange} = this.props;
+        let newValue = [];
+        if (selectedRows) {
+            for (let row of selectedRows) {
+                newValue.push(row.code+ '@R@' +row.title  );
+            }
+        }
+        onChange(newValue);
+        // this.setState({
+        //     showSelectTable: false,
+        // })
+    }
+
+
+    render() {
+        const {id,value, itemType, fieldConfig, onChange, style} = this.props;
+        const {showSelectTable} = this.state;
+        let selectedRows: SelectedRow[] = [];
+        let relationOptions = []
+        if (value) {
+            value.forEach((v) => {
+                if (v.indexOf('@R@') > 0) {
+                    let vs=v.split('@R@');
+                    selectedRows.push({code: vs[0], title:vs[1]});
+                    relationOptions.push({value: v, label: vs[1]});
+                }
+            })
+        }
+        return <>
+            <Popover placement="bottom" color={'#f0f0f0'} overlayStyle={{maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)',} }
+                     overlayInnerStyle={{padding:'0px'}}
+                     // getPopupContainer={(triggerNode) => {
+                     //        return triggerNode.parentNode;}}
+                     content={<div style={{height:300,backgroundColor:'#fafafa',overflow:'auto',borderStyle:'solid',borderRadius:'6px',
+                         borderWidth:'0px',borderColor:'#8c8c8c'}}><SelectTable selectedRows={selectedRows} sourceId={fieldConfig.id}  onChange={this.onSelect}></SelectTable></div>}
+                     trigger="click">
+            <Select id={id} style={{...style}}
+                    value={value}
+                    mode="multiple"
+                    placeholder={`请选择${fieldConfig.title}`}
+                    notFoundContent="请选择"
+                    allowClear={true}
+                    showArrow={true}
+                    suffixIcon={<SearchOutlined/>}
+                    dropdownStyle={{display: 'none'}}
+                    onChange={(value)=>{
+                        onChange(value)}
+                    }
+                    options={relationOptions}
+            >
+            </Select>
+            </Popover>
+            {/*<ModelSelectTable*/}
+            {/*    maxSelectedRows={fieldConfig.max ? fieldConfig.max - (exceptCodes.length > 0 ? exceptCodes.length : 0) : 100}*/}
+            {/*    visible={showSelectTable}*/}
+            {/*    onOK={this.onSelect} onCancel={() => {*/}
+            {/*    this.setState({showSelectTable: false})*/}
+            {/*}} sourceName={'rcriteria'} exceptCodes={exceptCodes}*/}
+            {/*    sourceId={fieldConfig.id}></ModelSelectTable>*/}
+        </>;
+    }
+}

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

@@ -0,0 +1,4 @@
+
+.buttons {
+  max-width: 300px;
+}

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

@@ -0,0 +1,161 @@
+import * as React from 'react'
+import {Button, Popover, Space} from 'antd'
+import {VControlProps} from "../../tmpl/interface";
+import ModalDtmplView from '../../detail/view/modal-dtmpl-view'
+import './index.css'
+
+interface RfieldProps extends VControlProps {
+};
+
+interface RfieldState {
+    showDtmplView: boolean;
+    showSelectTable: boolean;
+    selectedCodes: string[];
+    openCode: string;
+};
+
+export default class Rfield extends React.PureComponent<RfieldProps, RfieldState> {
+
+    state = {
+        showDtmplView: false,
+        showSelectTable: false,
+        selectedCodes: undefined,
+        openCode: undefined,
+    }
+
+
+    showRfieldDtmplView = (code) => {
+        this.setState({
+            openCode: code,
+            showDtmplView: true,
+        })
+    }
+
+    hiddenDtmplView = () => {
+        this.setState({
+            showDtmplView: false,
+        })
+    }
+
+    handleRFieldSelect = (id: string) => {
+
+    }
+
+    deleteRFieldValue = (id: string) => {
+
+    }
+
+    showCount = () => {
+        const {value} = this.props;
+        let valueArray: string[];
+        let vStr = "";
+        if (value instanceof Array) {
+            valueArray = value;
+            let i: number = 0;
+            for (let val of valueArray) {
+                i++;
+                let isRValue = val ? val.indexOf('@R@') > 0 : false;
+                let valueShow = isRValue ? val.split('@R@')[1] : val;
+                vStr = vStr + valueShow;
+                if (vStr.length >= 20) {
+                    break;
+                }
+            }
+            return i;
+        } else {
+            return 1;
+        }
+    }
+
+    needMore = () => {
+        const {value} = this.props;
+        let showCount = this.showCount();
+        let allCount = 0;
+        if (value instanceof Array) {
+            allCount = value.length;
+        } else {
+            allCount = 1;
+        }
+        if (allCount > showCount) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    getValue = (count?: number) => {
+        const {fieldConfig, value,} = this.props;
+        const {buttons} = fieldConfig;
+        let valueArray: string[];
+        if (value instanceof Array) {
+            if (count && count > 0 && value.length > count) {
+                valueArray = value.slice(0, count);
+            } else {
+                valueArray = value;
+            }
+        } else {
+            if (value) {
+                valueArray = [value];
+            } else {
+                valueArray = [];
+            }
+        }
+        let dom;
+        if (buttons && buttons.includes('detail')) {
+            dom = <Space key={count?(count+1):1} size={[0, 4]} wrap>
+                {valueArray.map((val,index) => {
+                    let isRValue = val ? val.indexOf('@R@') > 0 : false;
+                    let valueShow = isRValue ? val.split('@R@')[1] : val;
+                    let code = !val ? undefined : val.split('@R@')[0];
+                    return isRValue ? <Button key={index}  type="link" title=""
+                                              onClick={() => {
+                                                  this.showRfieldDtmplView(code)
+                                              }}>{valueShow}
+                    </Button> : <span key={index}>{valueShow}
+                        </span>;
+                })
+                }
+            </Space>;
+        } else {
+            dom = <Space key={count?(count+2):2} size={[8, 16]} wrap>
+                {valueArray.map((val,index) => {
+                    let isRValue = val ? val.indexOf('@R@') > 0 : false;
+                    let valueShow = isRValue ? val.split('@R@')[1] : val;
+                    let code = !val ? undefined : val.split('@R@')[0];
+                    return <span key={index}>{valueShow}
+                        </span>;
+                })
+                }
+            </Space>
+        }
+
+        return dom;
+    }
+
+    render() {
+        const {fieldConfig, value, itemType} = this.props;
+        const {showDtmplView, openCode} = this.state;
+        const {buttons} = fieldConfig;
+
+        // let isRValue = value ? value.indexOf('@R@') > 0 : false;
+        // let valueShow = isRValue ? value.split('@R@')[1] : "";
+        // let code = !value ? undefined : value.split('@R@')[0];
+        let showDom = this.getValue(this.showCount());
+        return <>
+            <Space key={3} size={[8, 16]} wrap style={{minWidth:'80px'}}>
+            {showDom}
+            {this.needMore() ?
+                <Popover overlayStyle={{maxWidth: '400px'}} placement="leftBottom" trigger="click"
+                         content={this.getValue()}>
+                    <Button key={'more'}  type={"link"} size={'small'}
+                    >更多...</Button>
+                </Popover> : null
+            }
+            {buttons && buttons.includes('detail') ?
+                <ModalDtmplView key={'mdv'} visible={showDtmplView} onCancel={this.hiddenDtmplView}
+                                sourceId={fieldConfig.id}
+                                code={openCode}> </ModalDtmplView> : ""}
+            </Space>
+        </>;
+    }
+}