//lodop打印模板维护
import React from 'react';
import {
    Card, Input, Row, Col, Button, Divider, Table, message, Form, Select, Modal,
} from 'antd';
import { $http } from '../../containers/config/https';
import '../../assets/css/App.css'
import { getLodop } from '../lodop/Common/LodopFuncs.js';
import store from 'store';
const FormItem = Form.Item;
let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
var curTemplateDetail = "";

import CommonPagination from 'components/pagination/index';
import 'pages/common/style/publicStyle.less';

const FormHandel = Form.create()(
    class PrintTableMain extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                visible: false,
                hospID: '',
                hospData: [],
                rowId: '',
                data: [],
                page: 1,
                pageSize: 10,
                total: 0,
                curTemplateDetail: '',
                tableData: [],
                tableRowId: '',
                tablePage: 1,
                tablePageSize: 10,
                tableTotal: 0,
                newCode: '',
                newDesc: '',
                newPrinter: '',
                newPrintPageSize: '',
                loading: false,
                tableLoading: false,
                showTemplateFlag: 0,
            }
            // 表格的表头数据
            this.columns = [
                {
                    key: 'code',
                    title: '代码',
                    dataIndex: 'code',
                    width: "20%",
                    align: 'center'
                }, {
                    key: 'desc',
                    title: '描述',
                    dataIndex: 'desc',
                    width: "30%",
                    align: 'center'
                }, {
                    key: 'printer',
                    title: '打印机名称',
                    dataIndex: 'printer',
                    width: "25%",
                    align: 'center'
                }, {
                    key: 'printPageSize',
                    title: '纸张名称',
                    dataIndex: 'printPageSize',
                    width: "25%",
                    align: 'center'
                }];

            // 表格的表头数据
            this.tableColumns = [
                {
                    key: 'hospDesc',
                    title: '医院',
                    dataIndex: 'hospDesc',
                    width: "40%",
                    align: 'center'
                }, {
                    key: 'code',
                    title: '代码',
                    dataIndex: 'code',
                    width: "30%",
                    align: 'center'
                }, {
                    key: 'desc',
                    title: '描述',
                    dataIndex: 'desc',
                    width: "30%",
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 10,
                    align: "center",
                    width: 150,
                    render: (text, record) => (
                        <span>
                            <span className='span' style={{ position: 'relative' }}>
                                导入
                            <input id='file' style={{
                                    width: '36px', height: '20px', position: 'absolute', top: 0, opacity: '0', left: 0
                                }} type="file" onChange={(e) => { this.handleUpload(e, record) }} />
                            </span>

                            {/* 分割线 */}
                            <Divider type="vertical" />
                            <span className='span' style={{position: "absolute", zIndex: 10}} onClick={() => this.ExportData(record)}>导出</span>
                        </span>
                    ),
                }
            ];
        }

        componentDidMount() {
            this.loadInfo();//获取下拉框信息
            // // 初始化列表数据
            this.handleAllQuery();
        }
        //导出数据
        ExportData = (v) => {
            let data = {
                params: [{
                    hospID: v.hospID,
                    ID: v.ID,
                }]
            }
            $http.post('urlS', this, {
                code: "01040200",
                data: data,
                success: function (res) {
                    if (res.errorCode == 0 && res.result && res.result.data) {
                        // document.getElementById("ifile").src= res.result.filePath;
                        message.success('正在导出...');
                        this.download(res.result.fileName, res.result.data)
                    } else {
                        message.error('导出失败')
                    }
                }
            });
        };

        download = (filename, text) => {
            var element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            element.setAttribute('download', filename);
            element.style.display = 'none';
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);
        };
        // TXTData=()=>{
        //     var input = document.createElement('input')
        //     input.setAttribute('type', 'file')
        //     input.click()
        //     // document.getElementById('file').addEventListener('change', this.handleUpload, false);
        // }

        handleUpload = (e, g) => {
            // console.log('123',g);
            const reader = new FileReader();
            // 用readAsText读取TXT文件内容
            reader.readAsText(e.target.files[0]);
            reader.onload = function (e) {
                // console.log(e.target.result); 　　 //读取结果保存在字符串中
                // let my_str = e.target.result;　　　　//直接保存全部数据为一个字符串
                // let my_arr = my_str.split(/[\s\n]/); 　　//按空格和换行符切割字符串，并保存在数组中
                var data = {
                    params: [{
                        value: e.target.result ? e.target.result : '',
                        hospID: g.hospID,
                        ID: g.ID,

                    }]
                };
                $http.post('urlS', this, {
                    code: "01040199",
                    data: data,
                    success: function (res) {
                        if (res.errorCode === '0') {
                            message.success(res.errorMessage)
                        }
                    }
                });
            }.bind(this);


        };
        //获取下拉框信息
        loadInfo() {
            var params = [{}]
            $http.post('urlS', this, {
                code: "02010008",
                data: params,
                success: function (res) {
                    if (res.errorCode === '0') {
                        for (var j = 0; j < res.hospital.length; j++) {
                            this.state.hospData.push(<Select.Option value={res.hospital[j].id} key={j}>{res.hospital[j].descripts}</Select.Option>)
                        }
                    }
                }
            });
        }

        //处理多个input的公共方法
        onChangeInput(name, e) {
            this.setState({
                [name]: e.target.value
            })
        }

        ///处理多个select下拉的公共方法
        selectOnChange = (name, value, option) => {
            if (value) {
                this.setState({
                    [name]: value,
                }, () => {
                    // this.handleAllQueryTable();
                })
            } else {
                this.setState({
                    [name]: '',
                }, () => {
                    this.handleAllQueryTable();
                })
            }
        }

        //查询
        handleAllQuery = () => {
            this.setState({
                rowId: '',
                page: 1,
                data: [],
            }, () => {
                this.handleQuery();
            })
        }

        // 查询
        handleQuery = () => {
            this.setState({ loading: true })
            let data = {}
            data = {
                params: [{
                    code: this.state.code,
                    desc: this.state.desc,
                }],
                pagination: [{
                    pageSize: this.state.pageSize,
                    currentPage: this.state.page,
                    sort: "ID",
                    dir: "desc"
                }]
            }
            $http.post('urlS', this, {
                code: '01040081',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 && res.result) {
                        for (var i = 0; i < res.result.rows.length; i++) {
                            res.result.rows[i].key = i
                        }
                        this.props.form.resetFields();
                        this.setState({ data: res.result.rows, total: res.result.total, tableRowId: '', tableData: [], rowId: '', code: '', desc: '', loading: false })
                        message.success(res.errorMessage);
                    } else {
                        this.setState({ loading: false })
                    }
                }
            })
        }

        //保存
        handleSave = () => {
            if (this.state.code === "") {
                message.warning("代码不能为空!");
                return;
            }
            if (this.state.desc === "") {
                message.warning("描述不能为空!");
                return;
            }
            let data = {};
            data = {
                params: [{
                    ID: this.state.rowId,
                    code: this.state.code,
                    desc: this.state.desc,
                    printer: this.state.printer,
                    printPageSize: this.state.printPageSize,
                }]
            }
            $http.post('urlS', this, {
                code: '01040079',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success('保存成功');
                        this.Clear();
                        this.handleQuery();
                    } else {

                    }
                }
            })
        }

        //加载模板信息
        loadDesignTable = (method) => {
            let data = {};
            data = {
                params: [{
                    ID: this.state.tableRowId ? this.state.tableRowId : this.state.rowId,
                }]
            }
            $http.post('urlS', this, {
                code: "01040083",
                data: data,
                success: function (res) {
                    if (res.errorCode === '0') {
                        curTemplateDetail = res.result;      //全局变量记录当前模板内容，用于判断模板是否改变，提示是否保存
                        LODOP = getLodop();
                        eval(res.result);
                        setTimeout(() => { eval(method()); }, 200);
                    }
                }
            });
        }

        //打印设计
        handleEditTable = () => {
            if ((this.state.rowId === "") && (this.state.tableRowId === "")) {
                message.warning('请先选择模板记录再编辑模板!');
                return;
            }
            //加载模板
            this.loadDesignTable(this.editTable);
        }

        //打印设计
        editTable = () => {
            let thisPointer = this;
            if (LODOP.CVERSION) {
                //  更新显示模板标志
                this.setState({
                    showTemplateFlag: 1
                })
                CLODOP.On_Return = (TaskID, Value) => {
                    //  更新显示模板标志
                    this.setState({
                        showTemplateFlag: 0
                    })
                    if (curTemplateDetail === Value) { return; }
                    else {
                        if (curTemplateDetail != "") {
                            Modal.confirm({
                                title: '保存模板',
                                content: '模板已修改，是否保存???',
                                okText: '保存',
                                cancelText: '取消',
                                onOk() {
                                    thisPointer.SaveTemplate(Value);
                                },
                                onCancel() {
                                    return;
                                },
                            });
                        } else {
                            thisPointer.SaveTemplate(Value);
                        }
                    }
                    curTemplateDetail = "";
                };
            }
            LODOP.PRINT_DESIGN();
        }

        //保存模板信息
        SaveTemplate = (value) => {
            let data = {};
            data = {
                params: [{
                    ID: this.state.tableRowId ? this.state.tableRowId : this.state.rowId,
                    value: value,
                }]
            }
            $http.post('urlS', this, {
                code: "01040082",
                data: data,
                success: function (res) {
                    if (res.errorCode === '0') {
                        message.success(res.errorMessage);
                        this.handleAllQueryTable();
                    }
                }
            });
        }

        //删除
        Delete = () => {
            let data = {};
            data = {
                params: [{
                    ID: this.state.rowId,
                }]
            }
            $http.post('urlS', this, {
                code: "01040080",
                data: data,
                success: function (res) {
                    if (res.errorCode === '0') {
                        message.success(res.errorMessage);
                        this.props.form.resetFields();
                        this.setState({
                            rowId: "",
                            code: '',
                            desc: '',
                            visible: false,
                        }, () => {
                            this.handleAllQuery();
                        })
                    }
                }
            });
        }

        //删除
        handleDelete = () => {
            if (this.state.rowId === "") {
                message.warning("请先选择模板记录再做删除操作!");
                return;
            }
            let thisPointer = this;
            Modal.confirm({
                title: '删除模板',
                content: '是否真的需要删除模板???',
                okText: '删除',
                cancelText: '取消',
                onOk() {
                    thisPointer.Delete();
                },
                onCancel() {
                    return;
                },
            });
        }


        //另存为新模板
        handleSaveAsNew = () => {
            if (this.state.rowId === "") {
                message.warning("请先选择模板记录再做另存操作!");
                return;
            }
            this.setState({
                visible: true,
            })
        }

        //另存新模板
        handleCreate = () => {
            if (this.state.rowId === "") {
                message.warning("请先选择模板记录再做另存操作!");
                return;
            }
            if (this.state.newCode === "") {
                message.warning("模板代码是必填!");
                return;
            }
            if (this.state.newDesc === "") {
                message.warning("模板名称是必填!");
                return;
            }
            let data = {};
            data = {
                params: [{
                    ID: this.state.tableRowId ? this.state.tableRowId : this.state.rowId,
                    newCode: this.state.newCode,
                    newDesc: this.state.newDesc,
                    newPrinter: this.state.newPrinter,
                    newPrintPageSize: this.state.newPrintPageSize,
                }]
            }
            $http.post('urlS', this, {
                code: "01040092",
                data: data,
                success: function (res) {
                    if (res.errorCode === '0') {
                        message.success(res.errorMessage);
                        this.props.form.resetFields();
                        this.setState({
                            rowId: "",
                            code: '',
                            desc: '',
                            visible: false,
                        }, () => {
                            this.handleAllQuery();
                        })
                    }
                }
            });
        }

        //关闭弹框
        handleCancel = () => {
            this.setState({
                visible: false,
            })
        }


        //查询
        handleAllQueryTable = () => {
            this.setState({
                tableRowId: '',
                tablePage: 1,
                tableData: [],
            }, () => {
                this.handleQueryTable();
            })
        }

        // 查询
        handleQueryTable = () => {
            this.setState({ tableLoading: true });
            let data = {}
            data = {
                params: [{
                    tableID: this.state.rowId,
                    hospID: this.state.hospID ? this.state.hospID : '',
                }],
                pagination: [{
                    pageSize: this.state.tablePageSize,
                    currentPage: this.state.tablePage,
                    sort: "ID",
                    dir: "desc"
                }]
            }
            $http.post('urlS', this, {
                code: '01040084',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 && res.result) {
                        for (var i = 0; i < res.result.rows.length; i++) {
                            res.result.rows[i].key = i
                        }
                        this.setState({ tableData: res.result.rows, tableTotal: res.result.total, tableLoading: false })
                        //message.success(res.errorMessage);
                    } else {
                        this.setState({ tableLoading: false });
                    }
                }
            })
        }

        // 删除模板
        handleDeleteTable = () => {
            if (this.state.tableRowId === "") {
                message.warning("请先选择记录再做删除操作!");
                return;
            }
            let thisPointer = this;
            Modal.confirm({
                title: '删除模板',
                content: '是否真的需要删除模板???',
                okText: '删除',
                cancelText: '取消',
                onOk() {
                    thisPointer.deleteTable();
                },
                onCancel() {
                    return;
                },
            });
        }

        //删除
        deleteTable = () => {
            let data = {};
            data = {
                params: [{
                    ID: this.state.tableRowId,
                }]
            }
            $http.post('urlS', this, {
                code: '01040085',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success('删除成功');
                        this.handleAllQueryTable();
                    } else {

                    }
                }
            })
        }

        //另存
        handleSaveAs = () => {
            if (this.state.tableRowId === "") {
                message.warning("请先选择记录再做另存操作!");
                return;
            }
            if (this.state.hospID === "") {
                message.warning("请先选择医院再做另存操作!");
                return;
            }
            let data = {};
            data = {
                params: [{
                    ID: this.state.tableRowId,
                    hospID: this.state.hospID,
                }]
            }
            $http.post('urlS', this, {
                code: '01040086',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success('保存成功');
                        this.handleAllQueryTable();
                    } else {

                    }
                }
            })
        }

        Clear = () => {
            curTemplateDetail = "";
            this.setState({
                rowId: "",
                code: "",
                desc: "",
                printer: '',
                printPageSize: '',
                hospID: "",
                data: [],
            });
            this.props.form.resetFields();
        }

        // 页码改变的回调，参数是改变后的页码及每页条数
        PageChange = (page, pageSize) => {
            this.props.form.resetFields();
            this.setState({ page: page, pageSize: pageSize, rowId: "", code: '', desc: '', }, () => {
                // 重新调用查询方法
                this.handleQuery();
            });
        }

        // 条数改变的回调
        onShowSizeChange = (current, size) => {
            this.props.form.resetFields();
            this.setState({ page: current, pageSize: size, rowId: "", code: '', desc: '', }, () => {
                // 重新调用查询方法
                this.handleQuery();
            });
        }

        // 显示分页总条数
        showTotal(total) {
            return `共 ${total} 条`;
        }

        onClickRow = (record) => {
            if (this.state.showTemplateFlag === 1) {
                return;
            }
            return {
                onClick: () => {
                    curTemplateDetail = "";
                    this.props.form.resetFields();
                    if ((this.state.rowId === "") || (this.state.rowId !== record.ID)) {
                        this.setState({
                            rowId: record.ID,
                            code: record.code,
                            desc: record.desc,
                            printer: record.printer,
                            printPageSize: record.printPageSize,
                            tableRowId: '',
                        }, () => {
                            this.handleAllQueryTable();
                        });
                    } else {
                        this.setState({
                            rowId: '',
                            code: '',
                            desc: '',
                            printer: '',
                            printPageSize: '',
                            curTemplateDetail: '',
                            tableRowId: '',
                        }, () => {
                            this.handleAllQueryTable();
                        });
                    }
                }
            }
        }

        setRowClassName = (record) => {
            return record.ID === this.state.rowId ? 'clickRowStyle' : '';
        }

        // 页码改变的回调，参数是改变后的页码及每页条数
        PageChangeTable = (page, pageSize) => {
            this.setState({ tablePage: page, pageSize: tablePageSize }, () => {
                // 重新调用查询方法
                //this.handleQuery();
            });
        }

        // 条数改变的回调
        onShowSizeChangeTable = (current, size) => {
            this.setState({ tablePage: current, tablePageSize: size }, () => {
                // 重新调用查询方法
                //this.handleQuery();
            });
        }

        onClickRowTable = (record) => {
            if (this.state.showTemplateFlag === 1) {
                return;
            }
            return {
                onClick: () => {
                    if (this.state.tableRowId === "") {
                        this.setState({
                            tableRowId: record.ID,
                        });
                    } else {
                        if (this.state.tableRowId !== record.ID) {
                            this.setState({
                                tableRowId: record.ID,
                            });
                        } else {
                            this.setState({
                                tableRowId: '',
                            });
                        }
                    }
                }
            }
        }

        setTableRowClassName = (record) => {
            return record.ID === this.state.tableRowId ? 'clickRowStyle' : '';
        }

        render() {
            const { getFieldDecorator } = this.props.form;
            let formItemLayout = {
                labelCol: { span: 7 },
                wrapperCol: { span: 17 }
            };
            return (
                <div>
                    <Form>
                        <Row>
                            <Card
                                size="small"
                                title="Lodop打印模板维护"
                                className="catd-head-bg-img"
                                bodyStyle={{ padding: '0px' }}
                            >
                                <Col span={13}>
                                    <Card
                                        bodyStyle={{ padding: '8px' }}
                                    >
                                        <Row>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label='代码'>
                                                    {getFieldDecorator('Code', {
                                                        initialValue: this.state.code,
                                                        rules: [{ required: false, message: '代码是必填项,请选择！' }]
                                                    })(
                                                        <Input
                                                            allowClear={true}
                                                            onChange={this.onChangeInput.bind(this, "code")}
                                                            onPressEnter={() => this.handleAllQuery()}
                                                        />
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label='描述'>
                                                    {getFieldDecorator('Desc', {
                                                        initialValue: this.state.desc,
                                                        rules: [{ required: false, message: '描述是必填项,请选择！' }]
                                                    })(
                                                        <Input
                                                            allowClear={true}
                                                            onChange={this.onChangeInput.bind(this, "desc")}
                                                            onPressEnter={() => this.handleAllQuery()}
                                                        />
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem>
                                                    <Button style={{ marginLeft: '40px', background: 'rgba(100,169,130,1)', color: '#ffffff' }} onClick={this.handleAllQuery}>查询</Button>
                                                    <Button style={{ marginLeft: '40px', background: 'rgba(100,169,130,1)', color: '#ffffff' }} onClick={this.handleSave}>保存</Button>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label='打印机名称'>
                                                    {getFieldDecorator('Printer', {
                                                        initialValue: this.state.printer,
                                                        rules: [{ required: false, message: '代码是必填项,请选择！' }]
                                                    })(
                                                        <Input
                                                            allowClear={true}
                                                            onChange={this.onChangeInput.bind(this, "printer")}
                                                        />
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label='纸张名称'>
                                                    {getFieldDecorator('PrintPageSize', {
                                                        initialValue: this.state.printPageSize,
                                                        rules: [{ required: false, message: '描述是必填项,请选择！' }]
                                                    })(
                                                        <Input
                                                            allowClear={true}
                                                            onChange={this.onChangeInput.bind(this, "printPageSize")}
                                                        />
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem>
                                                    <Button style={{ marginLeft: '40px', background: 'rgba(100,169,130,1)', color: '#ffffff' }} onClick={this.handleSaveAsNew}>另存</Button>
                                                    <Button style={{ marginLeft: '40px', background: 'rgba(255,0,0,1)', color: '#ffffff' }} onClick={this.handleDelete}>删除</Button>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col span={24}>
                                                <Table
                                                    dataSource={this.state.data}
                                                    columns={this.columns}
                                                    rowClassName={this.setRowClassName}
                                                    pagination={false}
                                                    bordered
                                                    onRow={this.onClickRow}
                                                    scroll={{ y: store.getState().tableHeight.y - 30 }}
                                                    style={{ height: (store.getState().tableHeight.y + 25) }}
                                                />
                                                {/* 分页: total--总条数  defaultCurrent--默认的当前页 hideOnSinglePage--只有一页时隐藏分页器 */}
                                                {/* <Pagination
                                                    showTotal={() => this.showTotal(this.state.total)}
                                                    size="small"
                                                    showQuickJumper
                                                    showSizeChanger
                                                    defaultCurrent={1}
                                                    current={this.state.page}
                                                    total={this.state.total}
                                                    onChange={this.PageChange}
                                                    onShowSizeChange={this.onShowSizeChange}
                                                    style={{textAlign: "right", marginTop: '15px'}}
                                                /> */}
                                                <CommonPagination size="small" current={this.state.page} total={this.state.total} search="search"
                                                    onShowSizeChange={this.onShowSizeChange} complete={true} dataSource={this.state.data}
                                                    loading={this.state.loading} onChange={this.PageChange} />
                                            </Col>
                                        </Row>
                                    </Card>
                                </Col>
                                <Col span={11}>
                                    <Card
                                        bodyStyle={{ padding: '8px' }}
                                    >
                                        <Row style={{ marginTop: '5px' }}>
                                            <Col span={8}>
                                                医院：<Select
                                                    style={{ width: '80%' }}
                                                    allowClear
                                                    optionFilterProp="children"
                                                    value={this.state.hospID}
                                                    onChange={this.selectOnChange.bind(this, "hospID")}
                                                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                                >
                                                    {this.state.hospData}
                                                </Select>
                                            </Col>
                                            <Col span={16}>
                                                <Button style={{ marginLeft: '20px' }} onClick={this.handleSaveAs}>另存为医院模板</Button>
                                                <Button style={{ marginLeft: '30px', background: 'rgba(100,169,130,1)', color: '#ffffff' }} onClick={this.handleAllQueryTable}>查询</Button>
                                                <Button style={{ marginLeft: '30px', background: 'rgba(100,169,130,1)', color: '#ffffff' }} onClick={this.handleEditTable}>编辑模板</Button>
                                                <Button style={{ marginLeft: '30px', background: 'rgba(255,0,0,1)', color: '#ffffff' }} onClick={this.handleDeleteTable}>删除模板</Button>
                                            </Col>
                                        </Row>
                                        <Row style={{ marginTop: '13px' }}>
                                            <Col span={24}>
                                                <Table
                                                    dataSource={this.state.tableData}
                                                    columns={this.tableColumns}
                                                    rowClassName={this.setTableRowClassName}
                                                    pagination={false}
                                                    bordered
                                                    onRow={this.onClickRowTable}
                                                    scroll={{ y: store.getState().tableHeight.y + 40 }}
                                                    style={{ height: (store.getState().tableHeight.y + 75) }}
                                                />
                                                {/* 分页: total--总条数  defaultCurrent--默认的当前页 hideOnSinglePage--只有一页时隐藏分页器 */}
                                                {/* <Pagination
                                                    showTotal={() => this.showTotal(this.state.tableTotal)}
                                                    size="small"
                                                    showQuickJumper
                                                    showSizeChanger
                                                    defaultCurrent={1}
                                                    current={this.state.tablePage}
                                                    total={this.state.tableTotal}
                                                    onChange={this.PageSizeTable}
                                                    onShowSizeChange={this.onShowSizeChangeTable}
                                                    style={{textAlign: "right", marginTop: '15px'}}
                                                /> */}
                                                <CommonPagination size="small" current={this.state.tablePage} total={this.state.tableTotal} search="search"
                                                    onShowSizeChange={this.onShowSizeChangeTable} complete={true} dataSource={this.state.tableData}
                                                    loading={this.state.tableLoading} onChange={this.PageSizeTable} />
                                            </Col>
                                        </Row>
                                    </Card>
                                </Col>
                            </Card>
                        </Row>
                        <Modal
                            visible={this.state.visible}
                            title="另存为新模板"
                            okText="确定"
                            onCancel={this.handleCancel}
                            onOk={this.handleCreate}
                            maskClosable={false}
                            centered={true}
                        >
                            <Row>
                                <Col span={20}>
                                    <FormItem {...formItemLayout} label='模板代码'>
                                        {getFieldDecorator('newCode', {
                                            initialValue: this.state.newCode,
                                            rules: [{ required: true, message: '模板代码是必填项,请选择！' }]
                                        })(
                                            <Input
                                                onChange={this.onChangeInput.bind(this, "newCode")}
                                            />
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} label='模板名称'>
                                        {getFieldDecorator('newDesc', {
                                            initialValue: this.state.newDesc,
                                            rules: [{ required: true, message: '模板名称是必填项,请选择！' }]
                                        })(
                                            <Input
                                                onChange={this.onChangeInput.bind(this, "newDesc")}
                                            />
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} label='打印机名称'>
                                        {getFieldDecorator('newPrinter', {
                                            initialValue: this.state.newPrinter,
                                            rules: [{ required: false, message: '打印机名称是必填项,请选择！' }]
                                        })(
                                            <Input
                                                onChange={this.onChangeInput.bind(this, "newPrinter")}
                                            />
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} label='纸张名称'>
                                        {getFieldDecorator('newPrintPageSize', {
                                            initialValue: this.state.newPrintPageSize,
                                            rules: [{ required: false, message: '纸张名称是必填项,请选择！' }]
                                        })(
                                            <Input
                                                onChange={this.onChangeInput.bind(this, "newPrintPageSize")}
                                            />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Modal>
                    </Form>
                </div>
            )
        }
    }
)
export default FormHandel;
