增加表字段附加表编辑框

src/pages/platformCenter/bsmanager/tablemanager/components/Field/add.jsx

-import React, { useState, useEffect } from 'react';
-import { Form, Modal, Input, Select, Radio, notification } from 'antd';
-
-import {
-  SetServiceConfig, GetAllConfig
-} from '@/services/webConfig/api';
-
-
-const { Option } = Select;
-const AddModal = props => {
-  const { callBackSubmit = () => { }, type, formObj, visible, listData } = props;
-  const [loading, setLoading] = useState(false);
-  const [form] = Form.useForm();
-  const { Item } = Form;
-  // 提交
-  const onSubmit = () => {
-    form.validateFields().then(validate => {
-      if (validate) {
-        setLoading(true);
-        let obj = form.getFieldsValue();
-        SetServiceConfig({
-          schemename: obj.schemename,
-          terminalType: type === 'add' ? 'web' : 'phone',
-          isBaseMap: 'false',
-          jsonCfg: type === 'add' ? JSON.stringify({ type: 'dynamic' }) : JSON.stringify({ isDefault: false })
-        })
-          .then(res => {
-            setLoading(false);
-            if (res.msg === "Ok") {
-              form.resetFields();
-              callBackSubmit();
-              notification.success({
-                message: '提示',
-                duration: 3,
-                description: '新增成功',
-              });
-
-            } else {
-              notification.error({
-                message: '提示',
-                duration: 3,
-                description: '新增失败',
-              });
-            }
-          })
-          .catch(err => {
-            notification.error({
-              message: '提示',
-              duration: 3,
-              description: '新增失败',
-            });
-            setLoading(false);
-          });
-
-      }
-    });
-  };
-
-
-  const onFinish = value => { };
-  useEffect(() => {
-    if (type != '') {
-      form.setFieldsValue({ ...formObj });
-    }
-
-  }, [visible]);
-
-
-  const layout = {
-    layout: 'horizontal',
-    labelCol: {
-      span: 4,
-    },
-    wrapperCol: {
-      span: 16,
-    },
-  };
-
-  const handleChange = (value) => {
-    form.setFieldsValue({ schemename: value });
-  }
-
-  return (
-    <Modal
-      title={`${type === 'add' ? '元数据发布' : '编辑'}`}
-      bodyStyle={{ width: '100%', minHeight: '100px' }}
-      style={{ top: '150px' }}
-      width="700px"
-      destroyOnClose
-      maskClosable={false}
-      cancelText="取消"
-      okText="确认"
-      {...props}
-      onOk={() => onSubmit()}
-      confirmLoading={loading}
-      forceRender={true}
-      getContainer={false}
-    >
-      {visible && (
-        <Form form={form} {...layout} onFinish={onFinish}>
-          <Item
-            label="表名"
-            name="tableName"
-            rules={[{ required: true, message: '请输入表名' }]}
-          >
-            <Input placeholder="请输入表名" allowClear />
-          </Item>
-          <Item
-            label="别名"
-            name="tableAlias"
-            rules={[{ required: true, message: '请输入别名' }]}
-          >
-            <Input placeholder="请输入别名" allowClear />
-          </Item>
-          <Item
-            label="样式"
-            name="tableStyle"
-            rules={[{ required: true, message: '请输入别名' }]}
-          >
-            <Radio.Group>
-              <Radio value='大'>大(3)</Radio>
-              <Radio value='中'>中(4)</Radio>
-              <Radio value='小'>小(4)</Radio>
-              <Radio value='较小'>较小(6)</Radio>
-            </Radio.Group>
-          </Item>
-          <Item
-            label="模板"
-            name="officeTmpl"
-            rules={[{ required: true, message: '请输入别名' }]}
-          >
-            <Input placeholder="请输入别名" allowClear />
-          </Item>
-          <Item
-            label="接口"
-            name="interfaceText"
-            rules={[{ required: true, message: '请输入别名' }]}
-          >
-            <Input placeholder="请输入别名" allowClear />
-          </Item>
-        </Form>
-      )}
-    </Modal>
-  );
-};
-export default AddModal;

src/pages/platformCenter/bsmanager/tablemanager/components/Field/addTable.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Modal, Input, Select, Checkbox, Divider, notification } from 'antd';
+import { Form, Modal, Input, Select, Checkbox, Divider, notification, Row } from 'antd';
 
 import {
-    createTable,LoadTableFields
+    createTable, loadTableFields
 } from '@/services/platform/bs'
 
-
+import styles from './index.less'
 const { Option } = Select;
 const CheckboxGroup = Checkbox.Group;
 const editor = props => {
@@ -15,7 +15,7 @@ const editor = props => {
     const [form] = Form.useForm();
     const { Item } = Form;
     const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
-    const [plainOptions, setPlainOptions] = useState(['Apple', 'Pear', 'Orange']);//复选框所有内容
+    const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容
     const [indeterminate, setIndeterminate] = useState(true);
     const [isVisible, setIsVisible] = useState(true);
     const [checkAll, setCheckAll] = useState(false);
@@ -34,7 +34,6 @@ const editor = props => {
 
     // 提交
     const onSubmit = () => {
-
         form.validateFields().then(validate => {
             if (validate) {
                 setLoading(true);
@@ -44,14 +43,26 @@ const editor = props => {
                     ...obj
                 }).then(res => {
                     setLoading(false);
-                     console.log('res',res);
-                     console.log('res.msg === "Ok"',res.msg === "Ok");
                     if (res.msg === "Ok") {
-                      
+                        notification.success({
+                            message: '提示',
+                            duration: 1,
+                            description: '建表成功',
+                        });
                         setIsVisible(false)
+                        loadTableFields({ tableName: res.data.tableInfo.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)
+                                    }
+                                })
+                                setPlainOptions(newArr)
+                                setCheckedList(arr)
+                            }
                             setIsModalVisible(true)
-                        LoadTableFields({tableName:res.data.tableInfo.Name}).then(response=>{
-                            console.log('response',response);
                         })
                     } else {
                         form.resetFields();
@@ -63,7 +74,7 @@ const editor = props => {
                         });
                     }
                 }).catch(err => {
-                    console.log('err',err);
+                    console.log('err', err);
                     notification.error({
                         message: '提示',
                         duration: 3,
@@ -75,10 +86,16 @@ const editor = props => {
             }
         });
     };
+    useEffect(() => {
+        if (type != '') {
+            form.setFieldsValue({ tableType: '事件表' });
+        }
 
+    }, [visible]);
     const handleOk = () => {
         form.resetFields();
         callBackSubmit();
+        console.log();
         notification.success({
             message: '提示',
             duration: 3,
@@ -165,7 +182,15 @@ const editor = props => {
                     选择所有
                 </Checkbox>
                 <Divider />
-                <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
+                <div className={styles.field}>
+                    <Row>
+                        {
+                            plainOptions.length ? <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> : ''
+                        }
+                    </Row>
+                </div>
+
+
             </Modal>
         </>
     );

src/pages/platformCenter/bsmanager/tablemanager/components/Field/affiliateAdd.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd';
+
+import {
+    loadTableFields, addTables
+} from '@/services/platform/bs'
+import styles from './index.less'
+const CheckboxGroup = Checkbox.Group;
+const { Option } = Select;
+const AddModal = props => {
+    const { callBackSubmit = () => { }, type, visible, tableList } = props;
+    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 => {
+            fieldNames.push({fieldNames:item})
+        })
+        form.validateFields().then(validate => {
+            if (validate) {
+                setLoading(true);
+                let obj = form.getFieldsValue();
+                console.log({ tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames:checkedList });
+                addTables({ tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames:checkedList }).then(res => {
+                    setLoading(false);
+                    if (res.msg === "Ok") {
+                        form.resetFields();
+                        callBackSubmit();
+                        notification.success({
+                            message: '提示',
+                            duration: 3,
+                            description: '新增成功',
+                        });
+
+                    } else {
+                        notification.error({
+                            message: '提示',
+                            duration: 3,
+                            description: '新增失败',
+                        });
+                    }
+                })
+                    .catch(err => {
+                        notification.error({
+                            message: '提示',
+                            duration: 3,
+                            description: '新增失败',
+                        });
+                        setLoading(false);
+                    });
+
+            }
+        });
+    };
+
+
+    const onFinish = value => { };
+    useEffect(() => {
+        if (type != '') {
+            renderField(tableList[0].text)
+            form.setFieldsValue({
+                tableName: tableList[0].text
+            })
+
+        }
+
+    }, [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: {
+            span: 16,
+        },
+    };
+
+    const handleChange = (value) => {
+        renderField(value)
+    }
+
+    return (
+        <Modal
+            title={`${type === 'add' ? '元数据发布' : '编辑'}`}
+            bodyStyle={{ width: '100%', minHeight: '100px' }}
+            style={{ top: '150px' }}
+            width="700px"
+            destroyOnClose
+            maskClosable={false}
+            cancelText="取消"
+            okText="确认"
+            {...props}
+            onOk={() => onSubmit()}
+            confirmLoading={loading}
+            forceRender={true}
+            getContainer={false}
+        >
+            {visible && (
+                <Form form={form} {...layout} onFinish={onFinish}>
+                    <Item
+                        label="表名"
+                        name="tableName"
+                        rules={[{ required: true, message: '请选择表名' }]}
+                    >
+                        <Select onChange={handleChange} >
+                            {tableList.length ? tableList.map((item, index) => { return <Select.Option key={index} value={item.text}>{item.text}</Select.Option> }) : ''}
+                        </Select>
+                    </Item>
+                    <Item
+                        label="别名"
+                        name="tableAlias"
+                    >
+                        <Input allowClear />
+                    </Item>
+                    <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;

src/pages/platformCenter/bsmanager/tablemanager/components/Field/editor.jsx

@@ -5,8 +5,6 @@ import {
   SetServiceConfig
 } from '@/services/webConfig/api';
 
-
-const { Option } = Select;
 const AddModal = props => {
   const { callBackSubmit = () => { }, type, formObj, visible, listData } = props;
   const [loading, setLoading] = useState(false);
@@ -18,46 +16,13 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
-        SetServiceConfig({
-          schemename: obj.schemename,
-          terminalType: type === 'add' ? 'web' : 'phone',
-          isBaseMap: 'false',
-          jsonCfg: type === 'add' ? JSON.stringify({ type: 'dynamic' }) : JSON.stringify({ isDefault: false })
-        })
-          .then(res => {
-            setLoading(false);
-            if (res.msg === "Ok") {
-              form.resetFields();
-              callBackSubmit();
-              notification.success({
-                message: '提示',
-                duration: 3,
-                description: '新增成功',
-              });
 
-            } else {
-              notification.error({
-                message: '提示',
-                duration: 3,
-                description: '新增失败',
-              });
-            }
-          })
-          .catch(err => {
-            notification.error({
-              message: '提示',
-              duration: 3,
-              description: '新增失败',
-            });
-            setLoading(false);
-          });
 
       }
     });
   };
 
 
-  const onFinish = value => { };
   useEffect(() => {
     if (type != '') {
       form.setFieldsValue({ ...formObj });
@@ -97,7 +62,7 @@ const AddModal = props => {
       getContainer={false}
     >
       {visible && (
-        <Form form={form} {...layout} onFinish={onFinish}>
+        <Form form={form} {...layout} >
           <Item
             label="表名"
             name="tableName"

src/pages/platformCenter/bsmanager/tablemanager/components/Field/index.less

+.field{
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    max-height: 18rem;
+    overflow-y: scroll;
+    .ant-card{
+        width: 74%;
+        margin-left: 4rem;
+    }
+    .ant-card-head-title{
+        flex: none;
+    }
+    .ant-card-extra{
+        margin-left: 0.2rem;
+    }
+}
\ No newline at end of file

src/pages/platformCenter/bsmanager/tablemanager/index.jsx

@@ -13,10 +13,11 @@ import {
 } from 'antd';
 import { PlusCircleOutlined } from '@ant-design/icons';
 import PageContainer from '@/components/BasePageContainer';
-import { CM_Table_LoadTable,removeTable } from '@/services/platform/bs'
+import { CM_Table_LoadTable, removeTable, loadUnattachedTables } from '@/services/platform/bs'
 import styles from './index.less'
 import Editor from './components/Field/editor'
 import AddTablelList from './components/Field/addTable'
+import AffiliateAdd from './components/Field/affiliateAdd'
 const { Search } = Input;
 const { Option } = Select;
 const placeholder = "请输入表名"
@@ -27,30 +28,34 @@ const TableManager = () => {
     const [type, setType] = useState(''); // 弹窗类型
     const [formObj, setFormObj] = useState({});
     const [flag, setFlag] = useState(0); // 弹窗类型
-    const [searchValue,setSearchValue]=useState('')
+    const [searchValue, setSearchValue] = useState('')
     const [treeLoading, setTreeLoading] = useState(true)
-    
+    const [tableList, setTableList] = useState([])
     const columns = [
         {
             title: '名称',
             dataIndex: 'tableName',
             key: 'tableName',
             render: text => <a>{text}</a>,
+            width: '300px'
         },
         {
             title: '别名',
             dataIndex: 'tableAlias',
             key: 'tableAlias',
+            align: 'center'
         },
         {
             title: '表格样式',
             dataIndex: 'tableStyle',
             key: 'tableStyle',
+            align: 'center'
         },
         {
             title: '模板',
             dataIndex: 'officeTmpl',
             key: 'officeTmpl',
+            align: 'center',
             render: text => {
                 let dom = ReactHtmlParser(text)
                 return (<div>{dom}</div>)
@@ -60,11 +65,13 @@ const TableManager = () => {
             title: '字段数量',
             dataIndex: 'fieldCount',
             key: 'fieldCount',
+            align: 'center'
         },
         {
             title: '缺少字段',
             dataIndex: 'missingFieldCount',
             key: 'missingFieldCount',
+            align: 'center',
             render: text => {
                 let dom = ReactHtmlParser(text)
                 return (<div>{dom}</div>)
@@ -74,6 +81,7 @@ const TableManager = () => {
             title: '重复配置',
             dataIndex: 'repeatFieldCount',
             key: 'repeatFieldCount',
+            align: 'center',
             render: text => {
                 let dom = ReactHtmlParser(text)
                 return (<div>{dom}</div>)
@@ -83,31 +91,37 @@ const TableManager = () => {
             title: '未附加',
             dataIndex: 'extraFieldCount',
             key: 'extraFieldCount',
+            align: 'center'
         },
         {
             title: '分组数量',
             dataIndex: 'groupCount',
             key: 'groupCount',
+            align: 'center'
         },
         {
             title: '触发字段',
             dataIndex: 'exceptionFields',
             key: 'exceptionFields',
+            align: 'center'
         },
         {
             title: '触发事件',
             dataIndex: 'exceptionEvents',
             key: 'exceptionEvents',
+            align: 'center'
         },
         {
             title: '接口',
             dataIndex: 'interfaceText',
             key: 'interfaceText',
+            align: 'center'
         },
         {
             title: '操作',
             width: 250,
             ellipsis: true,
+            align: 'center',
             render: (text, record) => (
                 <Space>
                     <Button
@@ -151,24 +165,27 @@ const TableManager = () => {
 
     useEffect((record) => {
         loadTable(searchValue)
+        getField()
     }, [flag])
+
     //修改表名
     const changeDesc = (record) => {
         setType('edit');
         setVisible(true);
         setFormObj(record);
     }
+    //删除表
     const deleteChart = (record) => {
-        removeTable({tableID:record.tableID,removeFields:true}).then(res=>{
-            if (res.msg === 'Ok' ||res.msg === '') {
+        removeTable({ tableID: record.tableID, removeFields: true }).then(res => {
+            if (res.msg === 'Ok' || res.msg === '') {
                 notification.success({
                     message: '提示',
                     duration: 3,
                     description: '删除成功',
                 });
-                setFlag(flag+1)
+                setFlag(flag + 1)
             }
-            else{
+            else {
                 notification.error({
                     message: '提示',
                     duration: 3,
@@ -184,17 +201,34 @@ const TableManager = () => {
         setVisible(false);
         setFlag(flag + 1)
     };
+    //建表
     const AddTable = () => {
         setType('add');
         setVisible(true);
     }
-    const handleChange=(e)=>{
+    //附加表
+    const AffiliateAddTable = () => {
+        setType('affiliateAdd');
+        setVisible(true);
+    }
+    //搜索框改变时存储输入的值
+    const handleChange = (e) => {
         setSearchValue(e.target.value)
     }
+    //搜索
     const handleSearch = (text) => {
         loadTable(text)
         setSearchValue(text)
     }
+    const getField = () => {
+        loadUnattachedTables().then(res => {
+            if (res.data.root && res.data.root.length) {
+                setTableList(res.data.root)
+            }
+
+        })
+    }
+    //加载表
     const loadTable = (keyword) => {
         setTreeLoading(true)
         CM_Table_LoadTable({
@@ -222,14 +256,13 @@ const TableManager = () => {
                                 onSearch={handleSearch}
                                 onChange={handleChange}
                                 value={searchValue}
-                                // onChange={handleChange}
                                 enterButton
                                 style={{ width: "300px" }}
                             />
                         </div>
 
                         <Button type="primary" style={{ marginLeft: "10px" }} onClick={AddTable}>建表</Button>
-                        <Button type="primary" style={{ marginLeft: "10px" }} onClick={AddTable}>附加</Button>
+                        <Button type="primary" style={{ marginLeft: "10px" }} onClick={AffiliateAddTable}>附加</Button>
 
                     </div>
                     <div className={styles.table_container}>
@@ -259,6 +292,15 @@ const TableManager = () => {
                         callBackSubmit={onSubmit}
                     />
                 )}
+                {visible && type === 'affiliateAdd' && (
+                    <AffiliateAdd
+                        visible={visible}
+                        tableList={tableList}
+                        type={type}
+                        onCancel={() => setVisible(false)}
+                        callBackSubmit={onSubmit}
+                    />
+                )}
             </PageContainer>
         </Spin>
     )

src/services/platform/bs.jsx

@@ -11,10 +11,18 @@ export const removeTable = param =>
     get(`${PUBLISH_SERVICE}/CaseManage/RemoveTable`, param);
 
 
-//3.建立表
+//4.建立表
 export const createTable = param =>
     get(`${PUBLISH_SERVICE}/CaseManage/CreateTable`, param);
 
-//3.附加字段
+//5.附加字段
 export const loadTableFields = param =>
     get(`${PUBLISH_SERVICE}/CaseManage/LoadTableFields`, param);
+
+//6.附加表时加载未添加的表
+export const loadUnattachedTables = () =>
+    get(`${PUBLISH_SERVICE}/CaseManage/LoadUnattachedTables`);
+
+//7.附加表
+export const addTables = (param) =>
+    get(`${PUBLISH_SERVICE}/CaseManage/AddTables`,param);
\ No newline at end of file