React From 表單

import React, { PureComponent } from 'react';
import './styles.less';
import { connect } from 'react-redux'
import { Table, Divider, Tag, Button, message, Popconfirm } from 'antd';
import _ from 'loadsh'
import qs from 'qs'
import defaultImg from '@/static/error.png'
import { get } from '@/utils'
import request from '@/utils'
import ModalGo from './model'
// import { requestx } from '@/utils'
// import Loding from './loding'


export default @connect(state => ({
    table_Data: state.table_Data
}), {
    getTableData: items => ({
        type: 'TBALE_DATA',
        payload: items
    })
})
class extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            visible: false,
            title: '', // 編輯 添加 標題
            btnName: '', // 按鈕 提示文字
            editData: [], // 點擊編輯的回顯 數據
        }
        this.datas()
    }

    // 圖片報錯  顯示 默認圖片
    errorImg = e => {
        e.target.setAttribute('src', defaultImg)
    }

    // 獲取全部數據
    datas = () => {
        const { getTableData } = this.props
        get('/api/banner/list')
            .then(res => {
                getTableData(res)
            })
    }

    // 刪除 確定
    confirm = items => {
        request('/api/banner/delete', qs.stringify({ id: items.id }))
            .then(res => {
                // if (res.data.code === 200) {
                message.success('刪除成功')
                // }
                this.datas()
            })
    }

    // 點擊編輯按鈕
    edit = items => {
        this.setState({
            visible: true,
            title: '編輯',
            btnName: '保存',
            editData: items
        })

    }

    // 點擊添加按鈕 顯示
    addData = () => {
        this.setState({
            visible: true,
            title: '添加',
            btnName: '點擊添加',
            editData: []
        })
    }

    // 接受回調函數 關閉model
    visStatus = v => {
        this.setState({
            visible: v
        })
    }

    // 點擊下載
    download = () => {
        const { table_Data } = this.props
        const blob = new Blob([JSON.stringify(table_Data)], { type: 'text/plain' }) //{type : 'application/json'}
        let a = document.createElement('a')
        let url = URL.createObjectURL(blob)
        a.href = url
        a.download = '表格數據'
        a.click()
        setTimeout(() => {
            //刪除創建的URL
            window.URL.revokeObjectURL(url)
        }, 0)

    }



    render() {
        // const { table_Data } = this.props
        const table_Data = _.get(this.props, 'table_Data', '暫無數據...')

        const { visible, title, btnName, editData } = this.state
        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: '130px',
                ellipsis: true,
            },
            {
                title: '名稱',
                dataIndex: 'title',
                key: 'Title',
                ellipsis: true,
            },
            {
                title: '圖片',
                dataIndex: 'bannerUrl',
                key: 'bannerUrl',
                render: (tags, items) => (
                    <img src={items.bannerUrl} onError={this.errorImg} />
                ),
            }, {
                title: '描述',
                dataIndex: 'mark',
                key: 'mark',
                width: '150px',
                ellipsis: true,
            }, {
                title: '排序',
                dataIndex: 'sort',
                key: 'sort',
                width: '100px',
                ellipsis: true,
                sorter: (a, b) => a.sort - b.sort,
            },
            {
                title: '狀態',
                key: 'status',
                dataIndex: 'status',
                render: (tags, items) => (
                    <span>
                        {items.status == 0 ? <Tag color="red">禁用</Tag> : <Tag color="green">啓用</Tag>}
                    </span>
                ),
            },
            {
                title: '操作',
                key: 'action',
                width: '230px',
                render: (text, record) => (
                    <span>
                        <Button type="primary" onClick={() => this.edit(record)}>編輯</Button>
                        <Divider type="vertical" />
                        <Popconfirm title="確定刪除 ？" okText="Yes" cancelText="No" onConfirm={() => this.confirm(record)}>
                            <Button type="danger" >刪除</Button>
                        </Popconfirm>
                    </span>
                ),
            },
        ];
        return (
            <div className='homeRightTable'>
                {/* 添加 */}
                <Button type="primary" onClick={this.addData}>
                    添加
                </Button>

                <Button type="danger" onClick={() => this.download()} style={{ marginLeft: '20px' }}>
                    下載
                </Button>

                {/* 對話框 */}
                <ModalGo
                    visible={visible}  // 控制 開關
                    title={title}     //標題
                    visibleStatus={this.visStatus}    //關閉 model
                    btnName={btnName}  //btn 文字提示
                    editData={editData}
                />

                <Table columns={columns} dataSource={table_Data} rowKey={v => v.id} />
            </div>
        );
    }
}

// Model
import React from 'react';
import rquest from '@/utils'
import { connect } from 'react-redux'
import qs from 'qs'
import {
    Modal,
    Form,
    Input,
    Icon,
    Button,
    Upload,
    Radio,
    InputNumber,
    message,

} from 'antd';
import { get } from '../../utils';

// 對話框
export default @connect(state => ({

}), {
    getData: () => ({
        type: 'TBALE_DATA',
        payload: get('/api/banner/list')
    })
})
@Form.create({
    name: 'register',
    mapPropsToFields(props) {
        
        return Object.entries(props.editData).reduce((v0, [k, v]) => {
            v0[k] = Form.createFormField({
                value: v,
            })
            return v0
        }, {})
		// return {
       //     name: Form.createFormField({
       //         value: props.data.name,
        //    }),
       // }
    }

})
class extends React.Component {

    state = {
        visible: false,
        confirmDirty: false,
        autoCompleteResult: [],
        value: 1,
        bannerUrl: '',
        disalblex: false, // 點擊確定按鈕  loding
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    // 關閉model
    handleCancel = () => {
        this.props.visibleStatus(false)
    };

    // 點擊 提交
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const { bannerUrl } = this.state
                const { getData, btnName, editData } = this.props
                if (btnName === '點擊添加') {
                    this.setState({
                        disalblex: true,
                    });

                    setTimeout(() => {
                        this.setState({
                            disalblex: false,
                        });
                    }, 2000);


                    rquest('/api/banner/add', qs.stringify({
                        ...values,
                        bannerUrl
                    }))
                        .then(res => {
                            console.log(res);

                            if (res) {
                                message.success('添加成功')
                                this.handleCancel()  //關閉
                                getData()  //獲取數據
                            }

                        })
                } else {
                    rquest('/api/banner/update', qs.stringify({
                        ...values,
                        bannerUrl,
                        id: editData.id
                    }))
                        .then(res => {
                            // if (res.data.code === 200) {
                            message.success('編輯成功')
                            this.handleCancel()  //關閉
                            getData()  //獲取數據
                            // }
                        })
                }


            }
        });
    };

    // 自定義 校驗
    validatorFun = (rule, value, callback) => {
    	// 	數字和字母組合
    	//  /^[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*$/ 
        const reg = /^(?![A-Za-z0-9]+$)[\u4e00-\u9fa5A-Za-z0-9]*$/
        if (value && !value.match(reg)) {
            callback('請輸入至少一個漢字');
        }
        callback()
    }
    // 圖片上傳
    normFile = e => {
        // console.log('Upload event:', e.file.response);
        if (e.file.response) {
            this.setState({
                bannerUrl: e.file.response.data.url
            })
        }
        return e && e.fileList;
    };


    // 狀態
    onChange = e => {
        this.setState({
            value: e.target.value,
        });
    };


    render() {
        
        const { visible, title, btnName } = this.props
        const { getFieldDecorator } = this.props.form;
        const { disalblex } = this.state

        const formItemLayout = {
            labelCol: {
                xs: { span: 9 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 14,
                    offset: 6,
                },
            },
        };




        return (
            <div>

                <Modal
                    title={title}
                    visible={visible}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                        <Form.Item label="標題">
                            {getFieldDecorator('title', {
                                rules: [
                                    {
                                        validator: this.validatorFun
                                    },
                                    {
                                        required: true,
                                        message: '請輸入標題 !',
                                    },
                                ],
                            })(<Input />)}
                        </Form.Item>

                        <Form.Item label="上傳圖片" extra="">
                            {getFieldDecorator('upload', {
                                valuePropName: 'fileList',
                                getValueFromEvent: this.normFile,
                            })(
                                <Upload name="file" action="http://49.235.147.95:3001/api/uploadFile" listType='picture'>
                                    <Button>
                                        <Icon type="upload" /> 上傳圖片
                                     </Button>
                                </Upload>,
                            )}
                        </Form.Item>

                        <Form.Item label="狀態" >
                            {getFieldDecorator('status', {

                            })(
                                <Radio.Group >
                                    <Radio value={1}>啓用</Radio>
                                    <Radio value={0}>禁用</Radio>
                                </Radio.Group>
                            )}
                        </Form.Item>

                        <Form.Item label="排序">
                            {getFieldDecorator('sort', { initialValue: 3 })(<InputNumber />)}
                        </Form.Item>

                        <Form.Item label="描述信息">
                            {getFieldDecorator('mark', {})(<Input.TextArea rows={4} />)}
                        </Form.Item>

                        <Form.Item {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit" disabled={disalblex}>
                                {btnName}
                            </Button>

                            <Button className='resetBtn' style={{ marginLeft: '30px' }}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}