form 表单

import JInput from "./JInput";
import JUpload from "./JUpload";
import { Button, Grid } from "@material-ui/core";
import JToggle from './JToggle';
import PageLoading from './../layout/PageLoading';
import JSelect from './JSelect';

/***
 * @todo 内容输入对列.
 * @param {object} input 当前数据
 * @param {function} onChange (key,value)
 * @property key 传输标识.  key为NULL,则标识更新数据值.
 * @property value 当前传输的数据值.
 * @param {boolean} showLabel 是否显示标签,默认为TRUE
 * @param {object} center  是否居中展示 默认居中
 * @param {object} columns 展示参数,参数可选值如下
 * @property label 显示说明
 * @property type 类型,类型定义固定值.
 * @property append 追加的数据.
 * @property extra 追加的属性值.
 * @property def 默认值,如果存在的话
 * @property renderForm 自定义界面数据 (key,input,valueChange)
 * @property remark 备注说明等另起一行.
 * @property style 内容样式
 * @property labelStyle 标签样式
 * @property edit 是否显示编辑
 * @property required 是否必填.
 * @param {array} actions [{label,value,icon}]
 * @property label 显示的数据
 * @property value 默认的数据值.
 * 
 */
class JEdit extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            saving: false,  /***是否在保存中 */
            record: {},  /***state中的数据*/
        }
    }

    componentDidMount() {
        const { input } = this.props;
     
        this.setState({ loading: false, record: input });
    }

    // static getDerivedStateFromProps(nextProps) {
    //     /***只有定义了处理方法,才会更新数据 */
    //     if (nextProps && null != nextProps && undefined != nextProps.onChange) {
    //         return {
    //             input: undefined == nextProps.input ? {} : nextProps.input,
    //         }
    //     }
    //     return null;
    // }

    actionChange = (item) => {
        const { record } = this.state;
        //TODO 此处进行数据完整性校验.
        const { onChange, columns } = this.props;
        if (item.value == 0) {
            this.setState({ record: this.props.input });
            if(onChange){
                onChange(item.value, record, item);
            }
        } else {
          
            // debugger;//
            if (onChange) {
                for (const key in columns) {
                    if (columns.hasOwnProperty(key)) {
                        const element = columns[key];
                        if (undefined == record[key]) {
                            record[key] = element.def;
                        }
                    }
                } //此处添加默认值.

                //此处需要进行数据校验.
                onChange(item.value, record, item);
            }
        }
    }


    sync = (item, keyword) => {
        const { record } = this.state;//
        const { columns = {} } = this.props;
        const fix = columns[keyword];
        const fixType = fix.type;
        let app = {};
      
      
        if (fixType == JEdit.TOGGLE) {
            app[keyword] = item ? 1 : 0;
        } else if (fixType == JEdit.WEEK) {

        } else if (fixType == JEdit.SELECT) {
            app[keyword] = item.value;
        } else {
            app[keyword] = item;
        }
        let newRecord = { ...record, ...app };
        this.setState({ record: newRecord });
    }

    wrapForm = () => {  /***返回显示队列 */
        const { columns = {}, } = this.props;//
        let input = this.state.record;
        const result = [];
        for (const key in columns) {
            if (columns.hasOwnProperty(key)) {
                const element = columns[key];
                const { type = JEdit.TEXT,
                    append = [],
                    extra = {},
                    remark,
                    label,
                    required = false,
                    renderForm,
                    style,
                    labelStyle,
                    edit = true } = element;
                let fixValue = input[key];
                let innerView = null;//内部的界面数据.
                if (type == JEdit.TOGGLE) {
                    innerView = (<JToggle key={'input-' + key} name={key}
                        value={fixValue == 1 ? true : false}
                        placeholder={label} disabled={!edit} remark={remark}
                        required={required} onChange={this.sync}  {...extra}/>);
                } else if (type == JEdit.IMAGE) {
                    
                } else if (type == JEdit.SELECT) {
                    innerView = (<JSelect key={'input-' + key} name={key} 
                        placeholder={label} 
                        disabled={!edit} value={fixValue} 
                        remark={remark} required={required}
                       data={append}  onChange={this.sync}  {...extra}/>);
                } else if (type == JEdit.WEEK) {

                }else if (type == JEdit.NUMBER) {
                    innerView = (<JInput key={'input-' + key} name={key}
                    placeholder={label} disabled={!edit} value={fixValue} type='number'
                    remark={remark} required={required} onChange={this.sync}
                    {...extra} />);
                }else {
                    innerView = (<JInput key={'input-' + key} name={key}
                        placeholder={label} disabled={!edit} value={fixValue}
                        remark={remark} required={required} onChange={this.sync}
                        {...extra} />);
                }
                if (null != innerView)
                    result.push(innerView);
            }
        }
        return result;//
    }


    wrapTable = () => {
        const { columns = {}, wide = { xs: 12, md: 6 } } = this.props;
        const fix = this.wrapForm(columns);
        return fix.map((v, j) => {
            return (<Grid key={'form-g-' + j} item {...wide}>
                {v}
            </Grid>);
        });
    }

    renderActions = () => {
        const { actions = JEdit.def_actions } = this.props;
        return (<div style={{ margin: '1rem 0', display: 'flex', justifyContent: 'space-around' }}>
            {actions.map((v, j) => {
                const { extra = {} } = v;//
                return (
                    <Button variant="contained" style={{ margin: '0 2rem' }} color="primary" {...extra} onClick={() => {
                        this.actionChange(v);
                    }} key={`form-btn-${j}`}>{v.label}</Button>
                );
            })}
        </div>);
    }

    render() {
        const { loading } = this.state;//
        if (loading)
            return (<PageLoading />);
        const { center = true } = this.props;
        return (<Grid container spacing={2}
            alignContent="center" direction="column"
            justify={center ? 'center' : 'left'} >
            {this.wrapTable()}
            {this.renderActions()}
        </Grid>);
    }
}
JEdit.def_actions = [
    { label: '重置', value: 0 },
    { label: '保存', value: 1, extra: { primary: true, floated: 'right' } }
];
JEdit.PLAIN = "plain"; //展示值
JEdit.IMAGE = "image"; //图片
JEdit.FILE = "file"; //文件
JEdit.RADIO = "radio"; //单选
JEdit.TOGGLE = "toggle"; //toggle
JEdit.SELECT = "select"; //单选
JEdit.DATE_RANGE = "date_range";//日期时间段
JEdit.DATE = "date";  //日期 09-12
JEdit.TIME = "time";  //时间 02:34
JEdit.TIME_RANGE = "time_range"; //时间段 09:00-12:00
JEdit.TEXTAREA = "textarea"; //多行输入 
JEdit.NUMBER = "number"; //数字输入 
JEdit.TEXT = "text";  //文本输入
JEdit.TAGS = "tags";  //列表多选
JEdit.WEEK = "week"; //排列星期

export default JEdit;

import JInput from "./JInput";
import JUpload from "./JUpload";
import { Button, Grid } from "@material-ui/core";
import JToggle from './JToggle';
import PageLoading from './../layout/PageLoading';
import JSelect from './JSelect';

/***
 * @todo 内容输入对列.
 * @param {object} input 当前数据
 * @param {function} onChange (key,value)
 * @property key 传输标识.  key为NULL,则标识更新数据值.
 * @property value 当前传输的数据值.
 * @param {boolean} showLabel 是否显示标签,默认为TRUE
 * @param {object} center  是否居中展示 默认居中
 * @param {object} columns 展示参数,参数可选值如下
 * @property label 显示说明
 * @property type 类型,类型定义固定值.
 * @property append 追加的数据.
 * @property extra 追加的属性值.
 * @property def 默认值,如果存在的话
 * @property renderForm 自定义界面数据 (key,input,valueChange)
 * @property remark 备注说明等另起一行.
 * @property style 内容样式
 * @property labelStyle 标签样式
 * @property edit 是否显示编辑
 * @property required 是否必填.
 * @param {array} actions [{label,value,icon}]
 * @property label 显示的数据
 * @property value 默认的数据值.
 * 
 */
class JEdit extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            saving: false,  /***是否在保存中 */
            record: {},  /***state中的数据*/
        }
    }

    componentDidMount() {
        const { input } = this.props;
     
        this.setState({ loading: false, record: input });
    }

    // static getDerivedStateFromProps(nextProps) {
    //     /***只有定义了处理方法,才会更新数据 */
    //     if (nextProps && null != nextProps && undefined != nextProps.onChange) {
    //         return {
    //             input: undefined == nextProps.input ? {} : nextProps.input,
    //         }
    //     }
    //     return null;
    // }

    actionChange = (item) => {
        const { record } = this.state;
        //TODO 此处进行数据完整性校验.
        const { onChange, columns } = this.props;
        if (item.value == 0) {
            this.setState({ record: this.props.input });
            if(onChange){
                onChange(item.value, record, item);
            }
        } else {
          
            // debugger;//
            if (onChange) {
                for (const key in columns) {
                    if (columns.hasOwnProperty(key)) {
                        const element = columns[key];
                        if (undefined == record[key]) {
                            record[key] = element.def;
                        }
                    }
                } //此处添加默认值.

                //此处需要进行数据校验.
                onChange(item.value, record, item);
            }
        }
    }


    sync = (item, keyword) => {
        const { record } = this.state;//
        const { columns = {} } = this.props;
        const fix = columns[keyword];
        const fixType = fix.type;
        let app = {};
      
      
        if (fixType == JEdit.TOGGLE) {
            app[keyword] = item ? 1 : 0;
        } else if (fixType == JEdit.WEEK) {

        } else if (fixType == JEdit.SELECT) {
            app[keyword] = item.value;
        } else {
            app[keyword] = item;
        }
        let newRecord = { ...record, ...app };
        this.setState({ record: newRecord });
    }

    wrapForm = () => {  /***返回显示队列 */
        const { columns = {}, } = this.props;//
        let input = this.state.record;
        const result = [];
        for (const key in columns) {
            if (columns.hasOwnProperty(key)) {
                const element = columns[key];
                const { type = JEdit.TEXT,
                    append = [],
                    extra = {},
                    remark,
                    label,
                    required = false,
                    renderForm,
                    style,
                    labelStyle,
                    edit = true } = element;
                let fixValue = input[key];
                let innerView = null;//内部的界面数据.
                if (type == JEdit.TOGGLE) {
                    innerView = (<JToggle key={'input-' + key} name={key}
                        value={fixValue == 1 ? true : false}
                        placeholder={label} disabled={!edit} remark={remark}
                        required={required} onChange={this.sync}  {...extra}/>);
                } else if (type == JEdit.IMAGE) {
                    
                } else if (type == JEdit.SELECT) {
                    innerView = (<JSelect key={'input-' + key} name={key} 
                        placeholder={label} 
                        disabled={!edit} value={fixValue} 
                        remark={remark} required={required}
                       data={append}  onChange={this.sync}  {...extra}/>);
                } else if (type == JEdit.WEEK) {

                }else if (type == JEdit.NUMBER) {
                    innerView = (<JInput key={'input-' + key} name={key}
                    placeholder={label} disabled={!edit} value={fixValue} type='number'
                    remark={remark} required={required} onChange={this.sync}
                    {...extra} />);
                }else {
                    innerView = (<JInput key={'input-' + key} name={key}
                        placeholder={label} disabled={!edit} value={fixValue}
                        remark={remark} required={required} onChange={this.sync}
                        {...extra} />);
                }
                if (null != innerView)
                    result.push(innerView);
            }
        }
        return result;//
    }


    wrapTable = () => {
        const { columns = {}, wide = { xs: 12, md: 6 } } = this.props;
        const fix = this.wrapForm(columns);
        return fix.map((v, j) => {
            return (<Grid key={'form-g-' + j} item {...wide}>
                {v}
            </Grid>);
        });
    }

    renderActions = () => {
        const { actions = JEdit.def_actions } = this.props;
        return (<div style={{ margin: '1rem 0', display: 'flex', justifyContent: 'space-around' }}>
            {actions.map((v, j) => {
                const { extra = {} } = v;//
                return (
                    <Button variant="contained" style={{ margin: '0 2rem' }} color="primary" {...extra} onClick={() => {
                        this.actionChange(v);
                    }} key={`form-btn-${j}`}>{v.label}</Button>
                );
            })}
        </div>);
    }

    render() {
        const { loading } = this.state;//
        if (loading)
            return (<PageLoading />);
        const { center = true } = this.props;
        return (<Grid container spacing={2}
            alignContent="center" direction="column"
            justify={center ? 'center' : 'left'} >
            {this.wrapTable()}
            {this.renderActions()}
        </Grid>);
    }
}
JEdit.def_actions = [
    { label: '重置', value: 0 },
    { label: '保存', value: 1, extra: { primary: true, floated: 'right' } }
];
JEdit.PLAIN = "plain"; //展示值
JEdit.IMAGE = "image"; //图片
JEdit.FILE = "file"; //文件
JEdit.RADIO = "radio"; //单选
JEdit.TOGGLE = "toggle"; //toggle
JEdit.SELECT = "select"; //单选
JEdit.DATE_RANGE = "date_range";//日期时间段
JEdit.DATE = "date";  //日期 09-12
JEdit.TIME = "time";  //时间 02:34
JEdit.TIME_RANGE = "time_range"; //时间段 09:00-12:00
JEdit.TEXTAREA = "textarea"; //多行输入 
JEdit.NUMBER = "number"; //数字输入 
JEdit.TEXT = "text";  //文本输入
JEdit.TAGS = "tags";  //列表多选
JEdit.WEEK = "week"; //排列星期

export default JEdit;

 

import JInput from "./JInput";

import JUpload from "./JUpload";

import { Button, Grid } from "@material-ui/core";

import JToggle from './JToggle';

import PageLoading from './../layout/PageLoading';

import JSelect from './JSelect';

/***

* @todo 内容输入对列.

* @param{object}input 当前数据

* @param{function}onChange (key,value)

* @property key 传输标识. key为NULL,则标识更新数据值.

* @property value 当前传输的数据值.

* @param{boolean}showLabel 是否显示标签,默认为TRUE

* @param{object}center 是否居中展示 默认居中

* @param{object}columns 展示参数,参数可选值如下

* @property label 显示说明

* @property type 类型,类型定义固定值.

* @property append 追加的数据.

* @property extra 追加的属性值.

* @property def 默认值,如果存在的话

* @property renderForm 自定义界面数据 (key,input,valueChange)

* @property remark 备注说明等另起一行.

* @property style 内容样式

* @property labelStyle 标签样式

* @property edit 是否显示编辑

* @property required 是否必填.

* @param{array}actions [{label,value,icon}]

* @property label 显示的数据

* @property value 默认的数据值.

*

*/

class JEdit extends React.Component {

constructor(props) {

super(props);

this.state = {

loading: true,

saving: false, /***是否在保存中 */

record: {}, /***state中的数据*/

}

}

componentDidMount() {

const { input } = this.props;

 

this.setState({ loading: false, record: input });

}

// static getDerivedStateFromProps(nextProps) {

// /***只有定义了处理方法,才会更新数据 */

// if (nextProps && null != nextProps && undefined != nextProps.onChange) {

// return {

// input: undefined == nextProps.input ? {} : nextProps.input,

// }

// }

// return null;

// }

actionChange = (item) => {

const { record } = this.state;

//TODO 此处进行数据完整性校验.

const { onChange, columns } = this.props;

if (item.value == 0) {

this.setState({ record: this.props.input });

if(onChange){

onChange(item.value, record, item);

}

} else {

 

// debugger;//

if (onChange) {

for (const key in columns) {

if (columns.hasOwnProperty(key)) {

const element = columns[key];

if (undefined == record[key]) {

record[key] = element.def;

}

}

} //此处添加默认值.

//此处需要进行数据校验.

onChange(item.value, record, item);

}

}

}

sync = (item, keyword) => {

const { record } = this.state;//

const { columns = {} } = this.props;

const fix = columns[keyword];

const fixType = fix.type;

let app = {};

 

 

if (fixType == JEdit.TOGGLE) {

app[keyword] = item ? 1 : 0;

} else if (fixType == JEdit.WEEK) {

} else if (fixType == JEdit.SELECT) {

app[keyword] = item.value;

} else {

app[keyword] = item;

}

let newRecord = { ...record, ...app };

this.setState({ record: newRecord });

}

wrapForm = () => { /***返回显示队列 */

const { columns = {}, } = this.props;//

let input = this.state.record;

const result = [];

for (const key in columns) {

if (columns.hasOwnProperty(key)) {

const element = columns[key];

const { type = JEdit.TEXT,

append = [],

extra = {},

remark,

label,

required = false,

renderForm,

style,

labelStyle,

edit = true } = element;

let fixValue = input[key];

let innerView = null;//内部的界面数据.

if (type == JEdit.TOGGLE) {

innerView = (<JToggle key={'input-' + key} name={key}

value={fixValue == 1 ? true : false}

placeholder={label} disabled={!edit} remark={remark}

required={required} onChange={this.sync} {...extra}/>);

} else if (type == JEdit.IMAGE) {

 

} else if (type == JEdit.SELECT) {

innerView = (<JSelect key={'input-' + key} name={key}

placeholder={label}

disabled={!edit} value={fixValue}

remark={remark} required={required}

data={append} onChange={this.sync} {...extra}/>);

} else if (type == JEdit.WEEK) {

}else if (type == JEdit.NUMBER) {

innerView = (<JInput key={'input-' + key} name={key}

placeholder={label} disabled={!edit} value={fixValue} type='number'

remark={remark} required={required} onChange={this.sync}

{...extra} />);

}else {

innerView = (<JInput key={'input-' + key} name={key}

placeholder={label} disabled={!edit} value={fixValue}

remark={remark} required={required} onChange={this.sync}

{...extra} />);

}

if (null != innerView)

result.push(innerView);

}

}

return result;//

}

wrapTable = () => {

const { columns = {}, wide = { xs: 12, md: 6 } } = this.props;

const fix = this.wrapForm(columns);

return fix.map((v, j) => {

return (<Grid key={'form-g-' + j} item {...wide}>

{v}

</Grid>);

});

}

renderActions = () => {

const { actions = JEdit.def_actions } = this.props;

return (<div style={{ margin: '1rem 0', display: 'flex', justifyContent: 'space-around' }}>

{actions.map((v, j) => {

const { extra = {} } = v;//

return (

<Button variant="contained" style={{ margin: '0 2rem' }} color="primary" {...extra} onClick={() => {

this.actionChange(v);

}} key={`form-btn-${j}`}>{v.label}</Button>

);

})}

</div>);

}

render() {

const { loading } = this.state;//

if (loading)

return (<PageLoading />);

const { center = true } = this.props;

return (<Grid container spacing={2}

alignContent="center" direction="column"

justify={center ? 'center' : 'left'} >

{this.wrapTable()}

{this.renderActions()}

</Grid>);

}

}

JEdit.def_actions = [

{ label: '重置', value: 0 },

{ label: '保存', value: 1, extra: { primary: true, floated: 'right' } }

];

JEdit.PLAIN = "plain"; //展示值

JEdit.IMAGE = "image"; //图片

JEdit.FILE = "file"; //文件

JEdit.RADIO = "radio"; //单选

JEdit.TOGGLE = "toggle"; //toggle

JEdit.SELECT = "select"; //单选

JEdit.DATE_RANGE = "date_range";//日期时间段

JEdit.DATE = "date"; //日期 09-12

JEdit.TIME = "time"; //时间 02:34

JEdit.TIME_RANGE = "time_range"; //时间段 09:00-12:00

JEdit.TEXTAREA = "textarea"; //多行输入

JEdit.NUMBER = "number"; //数字输入

JEdit.TEXT = "text"; //文本输入

JEdit.TAGS = "tags"; //列表多选

JEdit.WEEK = "week"; //排列星期

export default JEdit;