affiliateAdd.jsx 6.13 KB
Newer Older
1 2 3 4
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd';

import {
5
    loadTableFields, addTables, addFields
6 7 8
} from '@/services/platform/bs'
import styles from './index.less'
const CheckboxGroup = Checkbox.Group;
9
import qs from 'qs';
10 11
const { Option } = Select;
const AddModal = props => {
12
    const { callBackSubmit = () => { }, type, visible, tableList, formObj } = props;
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();
    const { Item } = Form;
    const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容
    const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
    const [indeterminate, setIndeterminate] = useState(true);
    const [checkAll, setCheckAll] = useState(false);


    const onChange = list => {
        setCheckedList(list);
        setIndeterminate(!!list.length && list.length < plainOptions.length);
        setCheckAll(list.length === plainOptions.length);
    };

    const onCheckAllChange = e => {
        setCheckedList(e.target.checked ? plainOptions : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked);
    };
    // 提交
    const onSubmit = () => {
        let fieldNames = [];
        (checkedList || []).map(item => {
37
            fieldNames.push({ fieldNames: item })
38 39 40
        })
        form.validateFields().then(validate => {
            if (validate) {
shaoan123's avatar
shaoan123 committed
41
                let obj = form.getFieldsValue();
42
                setLoading(true);
43 44 45 46 47 48 49 50
                let data = {}, url = JSON.stringify(formObj) == '{}' ? addTables : addFields
                if (JSON.stringify(formObj) == '{}') {
                    data = { tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames: checkedList.join(',') }
                }
                else {
                    data = { tableName: formObj.tableName, fieldNames: checkedList.join(',') }
                }
                url(data).then(res => {
51
                    setLoading(false);
52
                    if (res.msg === "Ok" || res.msg === "") {
53 54 55 56 57
                        form.resetFields();
                        callBackSubmit();
                        notification.success({
                            message: '提示',
                            duration: 3,
58
                            description: JSON.stringify(formObj) == '{}' ? '新增成功' : '表字段新增成功',
59 60 61 62 63 64
                        });

                    } else {
                        notification.error({
                            message: '提示',
                            duration: 3,
65
                            description: res.msg,
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
                        });
                    }
                })
                    .catch(err => {
                        notification.error({
                            message: '提示',
                            duration: 3,
                            description: '新增失败',
                        });
                        setLoading(false);
                    });

            }
        });
    };


83

84
    useEffect(() => {
85
        if (type != '' && JSON.stringify(formObj) == '{}') {
86 87 88 89
            renderField(tableList[0].text)
            form.setFieldsValue({
                tableName: tableList[0].text
            })
90 91
        } else if (type != '' && JSON.stringify(formObj) != '{}') {
            renderField(formObj.tableName)
92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
        }

    }, [visible]);

    const renderField = (name) => {
        loadTableFields({ tableName: name }).then(response => {
            if (response.data.root.length) {
                let arr = [], newArr = []
                response.data.root.map(item => {
                    newArr.push(item.fieldName)
                    if (item.isCheck) {
                        arr.push(item.fieldName)
                    }
                })
                setCheckAll(false)
                setPlainOptions(newArr)
                setCheckedList(arr)
            }
        })
    }
    const layout = {
        layout: 'horizontal',
        labelCol: {
            span: 4,
        },
        wrapperCol: {
shaoan123's avatar
shaoan123 committed
118
            span: 18,
119 120 121 122 123 124 125 126 127
        },
    };

    const handleChange = (value) => {
        renderField(value)
    }

    return (
        <Modal
128 129
            title={JSON.stringify(formObj) == '{}' ? '附加表' : '附加字段'}
            bodyStyle={{ width: '100%', minHeight: '200px' }}
130 131 132 133 134 135 136 137 138 139 140 141 142
            style={{ top: '150px' }}
            width="700px"
            destroyOnClose
            maskClosable={false}
            cancelText="取消"
            okText="确认"
            {...props}
            onOk={() => onSubmit()}
            confirmLoading={loading}
            forceRender={true}
            getContainer={false}
        >
            {visible && (
143 144
                <Form form={form} {...layout} >
                    {JSON.stringify(formObj) == '{}' ? <><Item
145 146 147 148
                        label="表名"
                        name="tableName"
                        rules={[{ required: true, message: '请选择表名' }]}
                    >
149 150
                        <Select onChange={handleChange}>
                            {tableList.length ? tableList.map((item, index) => { return <Select.Option key={index} value={item.text}>{item.text}</Select.Option>; }) : ''}
151 152
                        </Select>
                    </Item>
153 154 155 156 157 158
                        <Item
                            label="别名"
                            name="tableAlias"
                        >
                            <Input allowClear />
                        </Item></> : <div className={styles.paneTitle}>{formObj.tableName}</div>}
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
                    <div className={styles.field}>
                        <Card title="字段名" extra={<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}> </Checkbox>} >
                            {
                                plainOptions.length ? <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> : ''
                            }

                        </Card>
                    </div>

                </Form>
            )}
        </Modal>
    );
};
export default AddModal;