表字段里编辑模块攥写

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

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from 'react';
 import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd';
 
 import {
-    loadTableFields, addTables
+    loadTableFields, addTables, addFields
 } from '@/services/platform/bs'
 import styles from './index.less'
 const CheckboxGroup = Checkbox.Group;
 import qs from 'qs';
 const { Option } = Select;
 const AddModal = props => {
-    const { callBackSubmit = () => { }, type, visible, tableList } = props;
+    const { callBackSubmit = () => { }, type, visible, tableList, formObj } = props;
     const [loading, setLoading] = useState(false);
     const [form] = Form.useForm();
     const { Item } = Form;
@@ -39,17 +39,23 @@ const AddModal = props => {
         form.validateFields().then(validate => {
             if (validate) {
                 setLoading(true);
-                
+                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(',') }
+                }
                 let obj = form.getFieldsValue();
-                addTables({ tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames: checkedList.join(',')}).then(res => {
+                url(data).then(res => {
                     setLoading(false);
-                    if (res.msg === "Ok") {
+                    if (res.msg === "Ok" || res.msg === "") {
                         form.resetFields();
                         callBackSubmit();
                         notification.success({
                             message: '提示',
                             duration: 3,
-                            description: '新增成功',
+                            description: JSON.stringify(formObj) == '{}' ? '新增成功' : '表字段新增成功',
                         });
 
                     } else {
@@ -74,14 +80,15 @@ const AddModal = props => {
     };
 
 
-    const onFinish = value => { };
+
     useEffect(() => {
-        if (type != '') {
+        if (type != '' && JSON.stringify(formObj) == '{}') {
             renderField(tableList[0].text)
             form.setFieldsValue({
                 tableName: tableList[0].text
             })
-
+        } else if (type != '' && JSON.stringify(formObj) != '{}') {
+            renderField(formObj.tableName)
         }
 
     }, [visible]);
@@ -118,8 +125,8 @@ const AddModal = props => {
 
     return (
         <Modal
-            title='附加'
-            bodyStyle={{ width: '100%', minHeight: '100px' }}
+            title={JSON.stringify(formObj) == '{}' ? '附加表' : '附加字段'}
+            bodyStyle={{ width: '100%', minHeight: '200px' }}
             style={{ top: '150px' }}
             width="700px"
             destroyOnClose
@@ -133,22 +140,22 @@ const AddModal = props => {
             getContainer={false}
         >
             {visible && (
-                <Form form={form} {...layout} onFinish={onFinish}>
-                    <Item
+                <Form form={form} {...layout} >
+                    {JSON.stringify(formObj) == '{}' ? <><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 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>
+                        <Item
+                            label="别名"
+                            name="tableAlias"
+                        >
+                            <Input allowClear />
+                        </Item></> : <div className={styles.paneTitle}>{formObj.tableName}</div>}
                     <div className={styles.field}>
                         <Card title="字段名" extra={<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}> </Checkbox>} >
                             {

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

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Space, Divider, Radio, notification, Checkbox } from 'antd';
+import {
+  LoadEventType, LoadEventFields
+} from '@/services/platform/bs'
+import styles from './index.less'
+const AddModal = props => {
+  const { callBackSubmit = () => { }, type, formObj, visible } = props;
+  const [loading, setLoading] = useState(false);
+  const [value, setValue] = useState('');
+  const [checkValue, setCheckValue] = useState([]);
+  const [form] = Form.useForm();
+  const { Item } = Form;
+  // 提交
+  const onSubmit = () => {
+    type ==='rule'? callBackSubmit(`${value === '无' ||value === ''  ? '' : value + ','}${checkValue.join(',')}`):callBackSubmit();
+  };
+
+
+  useEffect(() => {
+    if (type != '' && type ==='rule') {
+      setValue(formObj.numerical)
+      setCheckValue(formObj.rule)
+      // getTableInfo({ tableName: formObj.tableName }).then(res => {
+      //   res.data.root && res.data.root.length && form.setFieldsValue({ ...res.data.root[0]})
+      //   setTableID(res.data.root[0].tableID)
+      // })
+    }
+    else{
+      LoadEventType().then(res=>{
+        console.log('res',res);
+      })
+    }
+
+  }, [visible]);
+
+
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 4,
+    },
+    wrapperCol: {
+      span: 16,
+    },
+  };
+
+  const handleChange = (e) => {
+    setValue(e.target.value)
+    if (e.target.value === '无') {
+      setCheckValue([])
+    }
+  }
+  const onChange = (e) => {
+    setCheckValue(e)
+    if(e.length&& value=='无'){
+      setValue('')
+    }
+  }
+  return (
+    <Modal
+      title={type ==='rule'?'选择验证规则':'字段集选择'}
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: '250px' }}
+      width="700px"
+      destroyOnClose
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+      forceRender={true}
+      getContainer={false}
+    >
+      {visible && type ==='rule'&& (
+        <>
+          <Radio.Group onChange={handleChange} value={value}>
+            <Space direction="vertical">
+              <Radio value='无'>无(清空选中)</Radio>
+              <Radio value='number'>数值(number)</Radio>
+              <Radio value='digits'>整数(digits)</Radio>
+              <Radio value='email'>邮箱(email)</Radio>
+              <Radio value='identity'>身份证号(identity)</Radio>
+              <Radio value='mobile'>手机号(mobile)</Radio>
+              <Radio value='bankAccount'>银行卡号(bankAccount)</Radio>
+              <Radio value='timeControl'>时间控制(timeControl)</Radio>
+            </Space>
+          </Radio.Group>
+          <Checkbox.Group style={{ width: '100%', marginTop: '1rem' }} onChange={onChange} value={checkValue}>
+            <Space direction="vertical">
+              <Checkbox value="required">必填(required)</Checkbox>
+              <Checkbox value="emphasis">强调(emphasis)</Checkbox>
+              <Checkbox value="sensitive">敏感(sensitive)</Checkbox>
+            </Space>
+          </Checkbox.Group>
+        </>
+      )}
+      {visible && type ==='characteristics'&&(
+        <div className={styles.listCard}>
+          <div className={styles.cardItem}>
+            <Divider orientation="left">待选字段列表</Divider>
+            <div className={styles.cardContent}></div>
+          </div>
+          <div className={styles.cardItem}>
+            <Divider orientation="left">已选字段列表</Divider>
+            <div className={styles.cardContent}></div>
+          </div>
+        </div>
+      )
+
+      }
+    </Modal>
+  );
+};
+export default AddModal;

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

 import React, { useState, useEffect } from 'react';
 import { Form, Modal, Input, Select, Radio, notification } from 'antd';
-
 import {
-  SetServiceConfig
-} from '@/services/webConfig/api';
+  getTableInfo,updateTable
+} from '@/services/platform/bs'
 
 const AddModal = props => {
-  const { callBackSubmit = () => { }, type, formObj, visible, listData } = props;
+  const { callBackSubmit = () => { }, type, formObj, visible } = props;
   const [loading, setLoading] = useState(false);
+  const [tableID, setTableID] = useState('');
   const [form] = Form.useForm();
   const { Item } = Form;
   // 提交
@@ -17,6 +17,32 @@ const AddModal = props => {
         setLoading(true);
         let obj = form.getFieldsValue();
 
+        updateTable({
+          interfaceName :obj.interfaceText,
+          tableID,
+          tableName :obj.tableName ,
+          tableStyle:obj.tableStyle,
+          alias:obj.tableAlias,
+          officeTmpl :obj.officeTmpl
+        }).then(res=>{
+          setLoading(false);
+          if (res.msg === "Ok" ||res.msg === "") {
+              form.resetFields();
+              callBackSubmit();
+              notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: '修改成功',
+              });
+
+          } else {
+              notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg,
+              });
+          }
+        })
 
       }
     });
@@ -25,7 +51,11 @@ const AddModal = props => {
 
   useEffect(() => {
     if (type != '') {
-      form.setFieldsValue({ ...formObj });
+      getTableInfo({ tableName: formObj.tableName }).then(res => {
+        res.data.root && res.data.root.length && form.setFieldsValue({ ...res.data.root[0]})
+        setTableID(res.data.root[0].tableID)
+      })
+
     }
 
   }, [visible]);
@@ -73,14 +103,13 @@ const AddModal = props => {
           <Item
             label="别名"
             name="tableAlias"
-            rules={[{ required: true, message: '请输入别名' }]}
           >
             <Input placeholder="请输入别名" allowClear />
           </Item>
           <Item
             label="样式"
             name="tableStyle"
-            rules={[{ required: true, message: '请输入别名' }]}
+            rules={[{ required: true, message: '请选择样式' }]}
           >
             <Radio.Group>
               <Radio value='大'>大(3)</Radio>
@@ -92,16 +121,14 @@ const AddModal = props => {
           <Item
             label="模板"
             name="officeTmpl"
-            rules={[{ required: true, message: '请输入别名' }]}
           >
-            <Input placeholder="请输入别名" allowClear />
+            <Input placeholder="请输入模板" allowClear />
           </Item>
           <Item
             label="接口"
             name="interfaceText"
-            rules={[{ required: true, message: '请输入别名' }]}
           >
-            <Input placeholder="请输入别名" allowClear />
+            <Input placeholder="请输入接口" allowClear />
           </Item>
         </Form>
       )}

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

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, Radio, Checkbox, notification, Tooltip } from 'antd';
+
+import {
+    getField,loadTableFields
+} from '@/services/platform/bs'
+import styles from './index.less'
+import ChangeAdd from './changeAdd'
+import { PlusSquareOutlined } from '@ant-design/icons';
+const AddModal = props => {
+    const { callBackSubmit = () => { }, isType, itemData, isVisible,formObj1 } = props;
+    const [loading, setLoading] = useState(false);
+    const [fieldName, setFieldName] = useState([]); // 弹窗
+    const [characteristics, setCharacteristics] = useState(['文本','数值','唯一值文本','多行文本','编码','地址','本人部门','本人姓名','本人ID','选择器','搜索选择器','值选择器','值复选器','业务选择器','可编辑值选择器','平铺值选择器','站点选择器','人员选择器','人员选择器新','城市选择器','台账选择器','附近','可预览附件','图片','可预览图片','录音','视频','日期时间','日期','日期月份','日期年份','日期周','时分秒','设备选择','坐标控件','区域控件','路径控件','智能抄表','二维码识别','设备二维码','位置坐标'])
+    const [visible, setVisible] = useState(false); // 弹窗
+    const [type, setType] = useState(''); // 弹窗类型
+    const [formObj, setFormObj] = useState({ rule: [], numerical: '' });
+    const { TextArea } = Input;
+    const [form] = Form.useForm();
+    const { Item } = Form;
+    // 提交
+    const onSubmit = () => {
+        form.validateFields().then(validate => {
+            if (validate) {
+                setLoading(true);
+                let obj = form.getFieldsValue();
+                updateTable({
+                    interfaceName: obj.interfaceText,
+                    tableID,
+                    tableName: obj.tableName,
+                    tableStyle: obj.tableStyle,
+                    alias: obj.tableAlias,
+                    officeTmpl: obj.officeTmpl
+                }).then(res => {
+                    setLoading(false);
+                    console.log(res.msg, 'res.msg');
+                    if (res.msg === "Ok" || res.msg === "") {
+                        form.resetFields();
+                        callBackSubmit();
+                        notification.success({
+                            message: '提示',
+                            duration: 3,
+                            description: '修改成功',
+                        });
+
+                    } else {
+                        notification.error({
+                            message: '提示',
+                            duration: 3,
+                            description: res.msg,
+                        });
+                    }
+                })
+
+            }
+        });
+    };
+
+
+    useEffect(() => {
+        if (isType != '') {
+            let req1 = getField({ fieldID: itemData.ID })
+            let req2 = loadTableFields({ tableName: formObj1.tableName })
+            Promise.all([req1,req2]).then(res=>{
+                res[0].msg==='Ok' && form.setFieldsValue({ ...res[0].data.root })
+                res[1].msg==='Ok' && setFieldName(res[1].data.root)
+            })
+        }
+
+    }, [isVisible]);
+
+
+
+    const layout = {
+        layout: 'horizontal',
+        labelCol: {
+            span: 4,
+        },
+        wrapperCol: {
+            span: 16,
+        },
+    };
+
+    const handleChange = (value) => {
+        form.setFieldsValue({ schemename: value });
+    }
+    const onChange = () => {
+
+    }
+
+    const onOK = prop => {
+        setVisible(false);
+        form.setFieldsValue({ ValidationRule: prop });
+    };
+    const add = (type) => {
+        let obj = form.getFieldsValue();
+        let data = { ...formObj }
+        if (obj.ValidationRule) {
+            let arr = obj.ValidationRule.split(",")
+            arr.map(item => {
+                switch (item) {
+                    case 'required':
+                        data.rule.push(item);
+                        break;
+                    case 'emphasis':
+                        data.rule.push(item);
+                        break;
+                    case 'sensitive':
+                        data.rule.push(item);
+                        break;
+                    default:
+                        data.numerical = item
+                }
+            })
+        }else{
+            data ={ rule: [], numerical: '' }
+        }
+        setFormObj(data)
+        setType(type);
+        setVisible(true);
+    }
+    return (
+        <>
+            <Modal
+                title='修改'
+                bodyStyle={{ width: '100%', minHeight: '100px' }}
+                style={{ top: '150px' }}
+                width="700px"
+                destroyOnClose
+                maskClosable={false}
+                cancelText="取消"
+                okText="确认"
+                {...props}
+                visible={isVisible}
+                onOk={() => onSubmit()}
+                confirmLoading={loading}
+                forceRender={true}
+                getContainer={false}
+            >
+                {isVisible && (
+                    <Form form={form} {...layout} >
+                        <Item
+                            label="字段名"
+                            name="Name"
+                            rules={[{ required: true, message: '请输入表名' }]}
+                        >
+                            <Select onChange={handleChange}>
+                                {fieldName.length ? fieldName.map((item, index) => { return <Select.Option key={index} value={item.fieldID}>{item.fieldName}</Select.Option>; }) : ''}
+                            </Select>
+                        </Item>
+                        <Item
+                            label="别名"
+                            name="Alias"
+                        >
+                            <Input placeholder="请输入别名" allowClear />
+                        </Item>
+                        <Item
+                            label="属性"
+                        >
+                            <Checkbox onChange={onChange}>只读</Checkbox>
+                            <Checkbox onChange={onChange}>允许补正(事后修改)</Checkbox>
+                        </Item>
+                        <Item
+                            label="同步"
+                            name="tableStyle"
+                        >
+                            <Radio.Group>
+                                <Radio value='大' style={{ marginRight: '0.5rem' }}>不同步</Radio>
+                                <Radio value='中' style={{ marginRight: '0.5rem' }}>工单 → 事件</Radio>
+                                <Radio value='小'>事件（上报时） → 工单</Radio>
+                            </Radio.Group>
+                        </Item>
+                        <Item
+                            label="形态"
+                        >
+                            <div className={styles.listEvent}>
+                                <Select style={{ width: '42%' }} onChange={handleChange}>
+                                    {characteristics.length ? characteristics.map((item, index) => { return <Select.Option key={index} value={item}>{item}</Select.Option>; }) : ''}
+                                </Select>
+                                <div className={styles.unit}>单位：<Input style={{ width: '5rem' }} placeholder="" allowClear /></div>
+                                <div className={styles.unit}>宽：<Input style={{ width: '4rem' }} placeholder="" allowClear /></div>
+                            </div>
+                        </Item>
+
+                        <Item
+                            label="配置"
+                            name="tableStyle"
+                        >
+                            <TextArea allowClear />
+                        </Item>
+                        <Item
+                            label="异常值"
+                        >
+                            <div className={styles.listEvent}>
+                                <Input style={{ width: '40%', height: '1.8rem' }} placeholder="" allowClear />
+                                <Item
+                                    style={{ marginLeft: '1rem' }}
+                                    label="触发事件"
+                                    name="tableStyle"
+                                    style={{ margin: '0 0 0 1rem' }}
+                                >
+                                    <Select style={{ width: '10.8rem' }} onChange={handleChange}>
+                                        {fieldName.length ? fieldName.map((item, index) => { return <Select.Option key={index} value={item.text}>{item.text}</Select.Option>; }) : ''}
+                                    </Select>
+                                </Item>
+                            </div>
+                        </Item>
+                        <Item
+                            label="预设值"
+                        >
+                            <div className={styles.listEvent}>
+                                <Input style={{ width: '40%', height: '1.8rem' }} placeholder="" allowClear />
+                                <Item
+                                    style={{ marginLeft: '1rem' }}
+                                    label="验证"
+                                    name="ValidationRule"
+                                    style={{ margin: '0 0 0 1rem' }}
+                                >
+                                    <Input style={{ width: '95%' }} placeholder="" allowClear />
+                                </Item>
+                                <Tooltip title="选择验证规则">
+                                    <PlusSquareOutlined
+                                        onClick={() => add('rule')}
+                                        style={{ fontSize: '24px', color: '#1890FF', display: 'flex', alignItems: 'center' }}
+                                    />
+                                </Tooltip>
+                            </div>
+                        </Item>
+
+                        <Item
+                            label="字段集"
+                        >
+                            <div className={styles.listEvent}>
+                                <Input style={{ width: '93%' }} placeholder="" allowClear />
+                                <Tooltip title="字符集选择">
+                                    <PlusSquareOutlined
+                                        onClick={() => add('characteristics')}
+                                        style={{ fontSize: '24px', color: '#1890FF', display: 'flex', alignItems: 'center', marginLeft: '0.5rem' }}
+                                    />
+                                </Tooltip>
+                            </div>
+
+                        </Item>
+                    </Form>
+                )}
+            </Modal>
+            <ChangeAdd
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                callBackSubmit={onOK}
+                type={type}
+                formObj={formObj} />
+        </>
+    );
+};
+export default AddModal;

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

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Space, Table, Button, Popconfirm, Spin, notification } from 'antd';
+
+import { reloadTableFields, removeFields } from '@/services/platform/bs'
+import FieldEditor from './fieldEditor'
+
+const AddModal = props => {
+    const [tableData, setTableData] = useState([])
+    const [changeData, setChangeData] = useState([])
+    const { callBackSubmit = () => { }, type, formObj, visible } = props;
+    const [loading, setLoading] = useState(false);
+    const [treeLoading, setTreeLoading] = useState(true)
+    const [form] = Form.useForm();
+    const [flag, setFlag] = useState(0); // 弹窗类型
+    const [isVisible, setIsVisible] = useState(false); // 弹窗
+    const [isType, setIsType] = useState(''); // 弹窗类型
+    const [itemData, setItemData] = useState({});
+    const { Item } = Form;
+    // 提交
+    const onSubmit = () => {
+        form.validateFields().then(validate => {
+            if (validate) {
+                setLoading(true);
+                let obj = form.getFieldsValue();
+            }
+        });
+    };
+    const columns = [
+        {
+            title: '字段名',
+            dataIndex: 'name',
+            key: 'name',
+            render: text => <a>{text}</a>,
+        },
+        {
+            title: '别名',
+            dataIndex: 'alias',
+            key: 'alias',
+            align: 'center'
+        },
+        {
+            title: '字段类型',
+            dataIndex: 'storeType',
+            key: 'storeType',
+            align: 'center'
+        },
+        {
+            title: '形态',
+            dataIndex: 'shape',
+            key: 'shape',
+            align: 'center',
+        },
+        {
+            title: '单位',
+            dataIndex: 'unit',
+            key: 'unit',
+            align: 'center'
+        },
+        {
+            title: '配置',
+            dataIndex: 'config',
+            key: 'config',
+            align: 'center'
+        },
+        {
+            title: '预设值',
+            dataIndex: 'preset',
+            key: 'preset',
+            align: 'center'
+        },
+        {
+            title: '高',
+            dataIndex: 'rowSpan',
+            key: 'rowSpan',
+            align: 'center'
+        },
+        {
+            title: '宽',
+            dataIndex: 'colSpan',
+            key: 'colSpan',
+            align: 'center'
+        },
+        {
+            title: '只读',
+            dataIndex: 'readOnly',
+            key: 'readOnly',
+            align: 'center'
+        },
+        {
+            title: '验证规则',
+            dataIndex: 'validationRule',
+            key: 'validationRule',
+            align: 'center'
+        },
+
+        {
+            title: '补正',
+            dataIndex: 'editableLater',
+            key: 'editableLater',
+            align: 'center'
+        },
+        {
+            title: '同步',
+            dataIndex: 'syncEvent',
+            key: 'syncEvent',
+            align: 'center'
+        },
+        {
+            title: '异常值',
+            dataIndex: 'exceptionValue',
+            key: 'exceptionValue',
+            align: 'center'
+        },
+        {
+            title: '触发事件',
+            dataIndex: 'exceptionEvent',
+            key: 'exceptionEvent',
+            align: 'center'
+        },
+        {
+            title: '事件字段',
+            dataIndex: 'exceptionEventFields',
+            key: 'exceptionEventFields',
+            align: 'center'
+        },
+        {
+            title: '操作',
+            width: 250,
+            ellipsis: true,
+            align: 'center',
+            render: (text, record) => (
+                <Space>
+                    <Button
+                        type="primary"
+                        size="small"
+                        onClick={() => {
+                            editor(record);
+                        }}
+                    >
+                        编辑
+                </Button>
+                    <div onClick={e => e.stopPropagation()}>
+                        <Popconfirm
+                            title="是否删除该字段？"
+                            okText="确认"
+                            cancelText="取消"
+                            onConfirm={() => {
+                                deleteChart(record);
+                            }}
+                        >
+                            <Button size="small" danger>
+                                删除
+                    </Button>
+                        </Popconfirm>
+                    </div>
+                </Space>
+            ),
+        },
+
+    ];
+    const editor = (record) => {
+        setIsType('edit');
+        setIsVisible(true);
+        setItemData(record);
+    }
+    const Submit = prop => {
+        setIsVisible(false);
+        setFlag(flag + 1)
+    };
+    useEffect(() => {
+        if (type != '') {
+            setTreeLoading(true)
+            reloadTableFields({
+                tableName: formObj.tableName
+            }).then(
+                res => {
+                    setTreeLoading(false)
+                    if (res.msg === 'Ok') {
+                        setTableData(res.data.root)
+                    }
+                }
+            )
+        }
+
+    }, [visible,flag]);
+
+
+    const layout = {
+        layout: 'horizontal',
+        labelCol: {
+            span: 4,
+        },
+        wrapperCol: {
+            span: 16,
+        },
+    };
+
+    const handleChange = (value) => {
+        form.setFieldsValue({ schemename: value });
+    }
+    //删除表字段
+    const deleteChart = (record) => {
+        removeFields({ fieldIDs: record.ID }).then(res => {
+            if (res.msg === 'Ok' || res.msg === '') {
+                notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '删除成功',
+                });
+                setFlag(flag + 1)
+            }
+            else {
+                notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: res.msg,
+                });
+            }
+        })
+    }
+    return (
+        <>
+            <Modal
+                title='字段配置'
+                bodyStyle={{ width: '100%', minHeight: '100px' }}
+                style={{ top: '50px', left: '50px' }}
+                width='90%'
+                destroyOnClose
+                maskClosable={false}
+                cancelText="取消"
+                okText="确认"
+                {...props}
+                onOk={() => onSubmit()}
+                confirmLoading={loading}
+                forceRender={true}
+                getContainer={false}
+            >
+                {visible && (
+                    <Spin tip="loading..." spinning={treeLoading}>
+                        <Table
+                            columns={columns}
+                            dataSource={tableData}
+                            //pagination={{ pageSize: 10 }}
+                            scroll={{ x: 'max-content', y: 'calc(100vh - 238px)' }}
+                            size="small"
+                            rowKey={(record, index) => `complete${record.tableID}${index}`}
+                            pagination={{
+                                showTotal: (total, range) =>
+                                    `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                                pageSizeOptions: [10, 20, 50, 100],
+                                defaultPageSize: 20,
+                                showQuickJumper: true,
+                                showSizeChanger: true,
+                            }}
+                        />
+                    </Spin>
+                )}
+            </Modal>
+            <FieldEditor
+                isVisible={isVisible}
+                isType={isType}
+                itemData={itemData}
+                formObj1={formObj}
+                onCancel={() => setIsVisible(false)}
+                callBackSubmit={Submit}></FieldEditor>
+        </>
+    );
+};
+export default AddModal;

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

@@ -3,7 +3,7 @@
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
-    max-height: 18rem;
+    max-height: 20rem;
     overflow-y: scroll;
     .ant-card{
         width: 74%;
@@ -15,4 +15,30 @@
     .ant-card-extra{
         margin-left: 0.2rem;
     }
-}
\ No newline at end of file
+}
+.paneTitle{
+    font-weight: bold;
+    font-size: 18px;
+    margin: 0 0 0.5rem 4rem;
+}
+.listEvent{
+    display: flex;
+
+}
+.unit{
+    display: flex;
+    margin-left: 1.1rem;
+    align-items: center;
+
+}
+.listCard{
+    display: flex;
+    .cardItem{
+        width: 50%;
+        padding: 0.5rem;
+    }
+    .cardContent{
+        height: 18rem;
+        border: 1px solid #99bbe8;
+    }
+}

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

@@ -9,15 +9,17 @@ import {
     Select,
     Popconfirm,
     notification,
-    Spin
+    Spin,
+    Tooltip
 } from 'antd';
-import { PlusCircleOutlined } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, FontColorsOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import PageContainer from '@/components/BasePageContainer';
 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'
+import FieldsConfig from './components/Field/fieldsConfig'
 const { Search } = Input;
 const { Option } = Select;
 const placeholder = "请输入表名"
@@ -36,26 +38,30 @@ const TableManager = () => {
             title: '名称',
             dataIndex: 'tableName',
             key: 'tableName',
+            width: 200,
             render: text => <a>{text}</a>,
-            width: '300px'
+
         },
         {
             title: '别名',
             dataIndex: 'tableAlias',
             key: 'tableAlias',
-            align: 'center'
+            align: 'center',
+            width: 200,
         },
         {
             title: '表格样式',
             dataIndex: 'tableStyle',
             key: 'tableStyle',
-            align: 'center'
+            align: 'center',
+            width: 150,
         },
         {
             title: '模板',
             dataIndex: 'officeTmpl',
             key: 'officeTmpl',
             align: 'center',
+            width: 50,
             render: text => {
                 let dom = ReactHtmlParser(text)
                 return (<div>{dom}</div>)
@@ -115,7 +121,8 @@ const TableManager = () => {
             title: '接口',
             dataIndex: 'interfaceText',
             key: 'interfaceText',
-            align: 'center'
+            align: 'center',
+            width: 250,
         },
         {
             title: '操作',
@@ -124,24 +131,24 @@ const TableManager = () => {
             align: 'center',
             render: (text, record) => (
                 <Space>
-                    <Button
-                        type="primary"
-                        size="small"
-                        onClick={() => {
-                            changeDesc(record);
-                        }}
-                    >
-                        修改
-                </Button>
-                    <Button
-                        type="primary"
-                        size="small"
-                        onClick={() => {
-                            editor(record);
-                        }}
-                    >
-                        编辑字段
-                </Button>
+                    <Tooltip title="修改">
+                        <EditOutlined
+                            onClick={() => changeDesc(record)}
+                            style={{ fontSize: '20px', color: '#1890FF' }}
+                        />
+                    </Tooltip>
+                    <Tooltip title="字段配置">
+                        <FontColorsOutlined
+                            onClick={() => fieldsConfig(record)}
+                            style={{ fontSize: '16px', color: '#1890FF' }}
+                        />
+                    </Tooltip>
+                    <Tooltip title="附加">
+                        <PlusSquareOutlined
+                            onClick={() => add(record)}
+                            style={{ fontSize: '16px', color: '#1890FF' }}
+                        />
+                    </Tooltip>
                     <div onClick={e => e.stopPropagation()}>
                         <Popconfirm
                             title="是否删除该表？"
@@ -151,9 +158,11 @@ const TableManager = () => {
                                 deleteChart(record);
                             }}
                         >
-                            <Button size="small" danger>
-                                删除
-                    </Button>
+                            <Tooltip title="删除">
+                                <DeleteOutlined
+                                    style={{ fontSize: '16px', color: '#e86060' }}
+                                />
+                            </Tooltip>
                         </Popconfirm>
                     </div>
                 </Space>
@@ -168,6 +177,12 @@ const TableManager = () => {
         getField()
     }, [flag])
 
+    //附加
+    const add = (record) => {
+        setFormObj(record);
+        setType('affiliateAdd');
+        setVisible(true);
+    }
     //修改表名
     const changeDesc = (record) => {
         setType('edit');
@@ -194,9 +209,7 @@ const TableManager = () => {
             }
         })
     }
-    const editor = (record) => {
-
-    }
+ 
     const onSubmit = prop => {
         setVisible(false);
         setFlag(flag + 1)
@@ -209,6 +222,13 @@ const TableManager = () => {
     //附加表
     const AffiliateAddTable = () => {
         setType('affiliateAdd');
+        setFormObj({});
+        setVisible(true);
+    }
+    //字段配置
+    const fieldsConfig = (record) => {
+        setFormObj(record);
+        setType('config');
         setVisible(true);
     }
     //搜索框改变时存储输入的值
@@ -233,7 +253,7 @@ const TableManager = () => {
         setTreeLoading(true)
         CM_Table_LoadTable({
             _version: 9999,
-            filter: keyword
+            filter: keyword || ''
         }).then(
             res => {
                 setTreeLoading(false)
@@ -270,17 +290,18 @@ const TableManager = () => {
                             columns={columns}
                             dataSource={tableData}
                             //pagination={{ pageSize: 10 }}
-                            scroll={{ x: 'max-content', y: 'calc(100vh - 238px)' }}
+                            scroll={{ x: 'max-content', y: 'calc(100vh - 228px)' }}
                             size="small"
+                            style={{height:'8rem'}}
                             rowKey={(record, index) => `complete${record.tableID}${index}`}
                             pagination={{
                                 showTotal: (total, range) =>
-                                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                                    `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                                 pageSizeOptions: [10, 20, 50, 100],
                                 defaultPageSize: 20,
                                 showQuickJumper: true,
                                 showSizeChanger: true,
-                              }}
+                            }}
                         />
                     </div>
                 </div>
@@ -307,6 +328,16 @@ const TableManager = () => {
                         type={type}
                         onCancel={() => setVisible(false)}
                         callBackSubmit={onSubmit}
+                        formObj={formObj}
+                    />
+                )}
+                {visible && type === 'config' && (
+                    <FieldsConfig
+                        visible={visible}
+                        type={type}
+                        formObj={formObj}
+                        onCancel={() => setVisible(false)}
+                        callBackSubmit={onSubmit}
                     />
                 )}
             </PageContainer>

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

@@ -23,7 +23,9 @@
             }
         }
     }
-    .table_container{
-        
-    }
+
+}
+.table_container{
+    width: 100%;
+    height: calc(100% - 100px);
 }
\ No newline at end of file

src/services/platform/bs.jsx

@@ -25,8 +25,39 @@ export const loadUnattachedTables = () =>
 
 //7.附加表
 export const addTables = (param) =>
-    get(`${PUBLISH_SERVICE}/CaseManage/AddTables`,param);
+    get(`${PUBLISH_SERVICE}/CaseManage/AddTables`, param);
 
 //8.添加表字段
 export const addFields = (param) =>
-    get(`${PUBLISH_SERVICE}/CaseManage/AddFields`,param);
\ No newline at end of file
+    get(`${PUBLISH_SERVICE}/CaseManage/AddFields`, param);
+
+
+//9.获取表信息
+export const getTableInfo = (param) =>
+    get(`${PUBLISH_SERVICE}/CaseManage/GetTableInfo`, param);
+
+//10.更新表信息
+export const updateTable = (param) =>
+    get(`${PUBLISH_SERVICE}/CaseManage/UpdateTable`, param);
+    
+//11.加载表字段
+export const reloadTableFields = (param) =>
+    get(`${PUBLISH_SERVICE}/CaseManage/ReloadTableFields`, param);
+
+//12.根据字段ID查询字段信息
+export const getField = (param) =>
+get(`${PUBLISH_SERVICE}/CaseManage/GetField`, param);
+
+//13.删除表字段
+export const removeFields = (param) =>
+get(`${PUBLISH_SERVICE}/CaseManage/RemoveFields`, param);
+
+//14.加载事件类型
+export const LoadEventType = (param) =>
+get(`${PUBLISH_SERVICE}/CaseManage/LoadEventType`, param);
+
+
+export const LoadEventFields = (param) =>
+get(`${PUBLISH_SERVICE}/CaseManage/LoadEventFields`, param);
+
+