优化表字段模块

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

 import React, { useEffect, useState } from 'react'
-import ReactHtmlParser from 'react-html-parser'
+import classnames from 'classnames';
 import {
     // Tree,
     Table,
@@ -26,7 +26,7 @@ const { Search } = Input;
 const { Option } = Select;
 const placeholder = "请输入表名"
 
-const TableManager = () => {
+const TableManager = (props) => {
     const history = useHistory();
     const [visible, setVisible] = useState(false); // 弹窗
     const [type, setType] = useState(''); // 弹窗类型
@@ -38,10 +38,15 @@ const TableManager = () => {
     const [groupArr, setGroupArr] = useState([])
     const [allData, setAllData] = useState([])
     const [tableData, setTableData] = useState([])
-
+    const [select, setSelect] = useState([])
+    const [selectTableName, setSelectTableName] = useState({})
     useEffect((record) => {
         loadTable(searchValue)
         getField()
+        if (props.history.location.state) {
+            let template = props.history.location.state.template
+            setSelectTableName(template)
+        }
     }, [flag])
 
     //附加
@@ -93,10 +98,10 @@ const TableManager = () => {
         setVisible(true);
     }
     //字段配置
-    const fieldsConfig = (record,e) => {
+    const fieldsConfig = (record, e) => {
         e.stopPropagation()
         setFormObj(record);
-        history.push(`/platformCenter/bsmanger/filedConfig/${record.tableName}`)
+        history.push({ pathname: `/platformCenter/bsmanger/filedConfig/${record.tableName}`, state: { template: record } })
         // setType('config');
         // setVisible(true);
     }
@@ -139,12 +144,13 @@ const TableManager = () => {
                     Object.keys(groupData).map((item, index) => {
                         newArr.push({ type: item, key: index })
                     })
-                    console.log('groupData',groupData);
+                    console.log('groupData', groupData);
                     setAllData(groupData)
                     setGroupArr(newArr)
+                    setSelect(newArr)
                 }
             }
-        ).catch(e=>{
+        ).catch(e => {
             setTreeLoading(true)
         })
     }
@@ -177,7 +183,7 @@ const TableManager = () => {
         }
         for (let keys in tempObj) {
             let arr = []
-            tempObj[keys].map((item,index) => {
+            tempObj[keys].map((item, index) => {
                 tempObj[keys] = arr;
                 item.key = index
                 arr.push(item)
@@ -185,6 +191,8 @@ const TableManager = () => {
         }
         return tempObj
     }
+    const setRowClassName = record =>
+        Object.entries(record).toString() === Object.entries(selectTableName).toString() ? styles.clickRowStyle : '';
     const expandedRowRender = (item) => {
         const columns1 = [
             {
@@ -192,7 +200,7 @@ const TableManager = () => {
                 dataIndex: 'tableName',
                 key: 'tableName',
                 width: 300,
-                render: (text,record) => <a onClick={e=>fieldsConfig(record,e)}>{text}</a>,
+                render: (text, record) => <div onClick={e => fieldsConfig(record, e)}>{text}</div>,
 
             },
             {
@@ -200,31 +208,28 @@ const TableManager = () => {
                 dataIndex: 'tableAlias',
                 key: 'tableAlias',
                 align: 'center',
-                width: 200,
             },
             {
                 title: '表格样式',
                 dataIndex: 'tableStyle',
                 key: 'tableStyle',
-                align: 'center',
-                width: 150,
+                align: 'center'
             },
             {
                 title: '字段数量',
                 dataIndex: 'fieldCount',
                 key: 'fieldCount',
                 align: 'center',
-                width: 200,
             },
             {
                 title: '缺少字段',
                 dataIndex: 'missingFieldCount',
                 key: 'missingFieldCount',
                 align: 'center',
-                width: 200,
                 render: text => {
-                    let dom = ReactHtmlParser(text)
-                    return (<div>{dom}</div>)
+                    return (<div className={classnames({
+                        [styles.lack]:text!=='(无)' ,
+                    })} >{text}</div>)
                 }
             },
             {
@@ -232,18 +237,15 @@ const TableManager = () => {
                 dataIndex: 'extraFieldCount',
                 key: 'extraFieldCount',
                 align: 'center',
-                width: 200,
             },
             {
                 title: '分组数量',
                 dataIndex: 'groupCount',
                 key: 'groupCount',
                 align: 'center',
-                width: 200,
             },
             {
                 title: '操作',
-                width: 250,
                 ellipsis: true,
                 key: 'tableID',
                 align: 'center',
@@ -257,7 +259,7 @@ const TableManager = () => {
                         </Tooltip>
                         <Tooltip title="字段配置">
                             <FontColorsOutlined
-                                onClick={e => fieldsConfig(record,e)}
+                                onClick={e => fieldsConfig(record, e)}
                                 style={{ fontSize: '16px', color: '#1890FF' }}
                             />
                         </Tooltip>
@@ -295,19 +297,89 @@ const TableManager = () => {
 
         ];
 
-        return <Table columns={columns1} dataSource={allData[item.type]} pagination={false} />;
+        return <Table columns={columns1} bordered size="small" onRow={record => {
+            return {
+                onDoubleClick: event => {
+                    event.stopPropagation()
+                    history.push({ pathname: `/platformCenter/bsmanger/filedConfig/${record.tableName}`, state: { template: record } })
+                },
+                onClick: event => {
+                    event.stopPropagation()
+                    setSelectTableName(record)
+                }, // 点击行
+            }
+        }}
+            rowClassName={setRowClassName}
+            showHeader={false} dataSource={allData[item.type]} pagination={false} />;
     };
 
     const columns = [
         {
-            title: '类型', dataIndex: 'type', key: 'type',
+            title: '名称', dataIndex: 'type', key: 'type',
             render: text => {
-                return (<div style={{ color: '#3764a0' }}>{text}({allData&&allData[text]?allData[text].length:0}个)</div>)
+                return (<a style={{ fontWeight:'bold' }}>{text}({allData && allData[text] ? allData[text].length : 0}个)</a>)
+            },
+            width: 260,
+        },
+        {
+            title: '别名',
+            dataIndex: 'tableAlias',
+            key: 'tableAlias',
+            align: 'center',
+        },
+        {
+            title: '表格样式',
+            dataIndex: 'tableStyle',
+            key: 'tableStyle',
+            align: 'center',
+        },
+        {
+            title: '字段数量',
+            dataIndex: 'fieldCount',
+            key: 'fieldCount',
+            align: 'center',
+        },
+        {
+            title: '缺少字段',
+            dataIndex: 'missingFieldCount',
+            key: 'missingFieldCount',
+            align: 'center',
+            render: text => {
+                return (<div>{text}</div>)
             }
         },
+        {
+            title: '未附加',
+            dataIndex: 'extraFieldCount',
+            key: 'extraFieldCount',
+            align: 'center',
+        },
+        {
+            title: '分组数量',
+            dataIndex: 'groupCount',
+            key: 'groupCount',
+            align: 'center',
+
+        },
+        {
+            title: '操作',
+            dataIndex: 'title',
+            key: 'title',
+            align: 'center',
+
+        },
 
     ];
-    
+    const onUnfold = (expanded, record) => {
+        const data = [...select]
+        let index = data.indexOf(record)
+        if (expanded) {
+            data.push(record)
+        } else {
+            data.splice(index, 1)
+        }
+        setSelect(data)
+    }
     return (
         <Spin tip="loading..." spinning={treeLoading}>
             <PageContainer>
@@ -330,7 +402,7 @@ const TableManager = () => {
                         <Button type="primary" style={{ marginLeft: "10px" }} onClick={AffiliateAddTable}>附加</Button>
 
                     </div>
-                    <div  style={{ width: '100vm', height: 'calc(100vh - 150px) ', background: '#ffffff' }}>
+                    <div style={{ width: '100vm', height: 'calc(100vh - 150px) ', background: '#ffffff' }}>
                         {/* <Table
                             columns={columns}
                             dataSource={tableData}
@@ -352,18 +424,15 @@ const TableManager = () => {
                             className="components-table-demo-nested"
                             columns={columns}
                             expandable={{ expandedRowRender }}
-                            showHeader={false}
+                            expandedRowKeys={select.map(item => item.key)} //展开的行
+                            expandRowByClick={true}
+                            defaultExpandAllRows={true}
                             dataSource={groupArr}
+                            scroll={{ y: 'calc(100vh - 200px)' }}
                             size="small"
+                            pagination={false}
+                            onExpand={onUnfold}
                             style={{ height: '8rem' }}
-                            pagination={{
-                                showTotal: (total, range) =>
-                                    `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-                                pageSizeOptions: [10, 20, 50, 100],
-                                defaultPageSize: 20,
-                                showQuickJumper: true,
-                                showSizeChanger: true,
-                            }}
                         />
                     </div>
                 </div>
@@ -393,7 +462,7 @@ const TableManager = () => {
                         formObj={formObj}
                     />
                 )}
-           
+
                 {visible && type === 'sort' && (
                     <LoadGroup
                         visible={visible}

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

@@ -2,6 +2,24 @@
     display: flex;
     flex-direction: column;
     width: 100vm;
+    border: 1px solid #f0f0f0;
+    .lack{
+        background-color: rgb(255, 255, 0);
+        color: rgb(255, 0, 0);
+    }
+    .ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
+        margin-left: 0;
+    }
+    .ant-table.ant-table-bordered > .ant-table-container{
+        border: none;
+    }
+    .ant-table-thead tr th{
+        font-weight: 600;
+        color:rgba(0,0,0,0.85);
+    }
+    .clickRowStyle{
+        background: #cfe7fd;
+    }
     .operate_bar {
         width: 100%;
         height: 60px;

src/pages/platformCenter/dimensionsConfig/dimensionsConfig.less

@@ -3,7 +3,9 @@
 
     background-color: #ffffff;
     display: flex;
-  
+    .ant-table {
+        min-height: 15rem !important;
+      }
     padding: 0.8rem;
     .ant-table-thead tr th {
         font-weight: 600;
@@ -98,9 +100,7 @@
         cursor: pointer; 
     }
 }
-.ant-table {
-    min-height: 15rem !important;
-  }
+
   .cardsList{
     display: flex;
     flex-wrap: wrap;

src/pages/platformCenter/filedConfig/filedConfig.jsx

@@ -24,7 +24,8 @@ const AddModal = props => {
     const [isVisible, setIsVisible] = useState(false); // 弹窗
     const [isType, setIsType] = useState(''); // 弹窗类型
     const [itemData, setItemData] = useState({});
-
+    const [select, setSelect] = useState([])
+    const [selectTableName, setSelectTableName] = useState({})
     const editor = record => {
         setIsType('edit');
         setIsVisible(true);
@@ -41,8 +42,9 @@ const AddModal = props => {
                 title: '字段名',
                 dataIndex: 'name',
                 key: 'name',
-                width: 150,
-                render: text => <a>{text}</a>,
+                width: 190,
+                align: 'left',
+                render: text => <div style={{paddingLeft:'2rem'}}>{text}</div>,
             },
             {
                 title: '别名',
@@ -72,7 +74,7 @@ const AddModal = props => {
                 align: 'center',
                 width: 200,
             },
-    
+
             {
                 title: '只读',
                 dataIndex: 'readOnly',
@@ -122,19 +124,89 @@ const AddModal = props => {
             },
         ];
 
-        return <Table columns={columns} dataSource={allData[item.type]} pagination={false} />;
+        return <Table columns={columns} onRow={record => {
+            return {
+                onDoubleClick: event => {
+                    event.stopPropagation()
+                    editor(record);
+                },
+                onClick: event => {
+                    event.stopPropagation()
+                    setSelectTableName(record)
+                }, // 点击行
+            }
+        }} bordered rowClassName={setRowClassName} showHeader={false} dataSource={allData[item.type]} pagination={false} />;
     };
-
+    const setRowClassName = (record) =>
+        Object.entries(record).toString() === Object.entries(selectTableName).toString() ? styles.clickRowStyle : '';
     const columns = [
+
         {
-            title: '类型', dataIndex: 'type', key: 'type',
+            title: '字段名',
+            dataIndex: 'type',
+            key: 'type',
+            align: 'left',
+            width: 150,
             render: text => {
-                return (<div style={{ color: '#3764a0' }}>{text}(共{allData[text].length}条)</div>)
+                return (<a >{text}(共{allData[text] ? allData[text].length : ''}条)</a>)
             }
+
+        },
+        {
+            title: '别名',
+            dataIndex: 'alias',
+            key: 'alias',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '字段类型',
+            dataIndex: 'storeType',
+            key: 'storeType',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '形态',
+            dataIndex: 'shape',
+            key: 'shape',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '配置',
+            dataIndex: 'config',
+            key: 'config',
+            align: 'center',
+            width: 200,
+        },
+
+        {
+            title: '只读',
+            dataIndex: 'readOnly',
+            key: 'readOnly',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '同步',
+            dataIndex: 'syncEvent',
+            key: 'syncEvent',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '操作',
+            width: 250,
+            ellipsis: true,
+            key: 'title',
+            align: 'center',
+
         },
 
     ];
     useEffect(() => {
+
         if (props.match.params.id) {
             setFormObj(props.match.params.id)
             setTreeLoading(true);
@@ -143,13 +215,14 @@ const AddModal = props => {
             }).then(res => {
                 setTreeLoading(false);
                 if (res.msg === 'Ok') {
-                    let arr =formateArrDataA(res.data.root,'group')
+                    let arr = formateArrDataA(res.data.root, 'group')
                     let newArr = []
                     Object.keys(arr).map((item, index) => {
-                        newArr.push({ type: item, key: index,id:index })
+                        newArr.push({ type: item, key: index, id: index })
                     })
                     setAllData(arr);
                     setTableData(newArr);
+                    setSelect(newArr)
                 }
             });
         }
@@ -183,7 +256,7 @@ const AddModal = props => {
         }
         for (let keys in tempObj) {
             let arr = []
-            tempObj[keys].map((item,index) => {
+            tempObj[keys].map((item, index) => {
                 tempObj[keys] = arr;
                 item.key = index
                 arr.push(item)
@@ -212,40 +285,46 @@ const AddModal = props => {
     };
     // 返回上一级
     const back = () => {
-        history.push('/platformCenter/bsmanger/tablemanger')
+        let template = props.history.location.state.template
+        history.push({ pathname: '/platformCenter/bsmanger/tablemanger', state: { template } })
+    }
+    const onUnfold = (expanded, record) => {
+        const data = [...select]
+        let index = data.indexOf(record)
+        if (expanded) {
+            data.push(record)
+        } else {
+            data.splice(index, 1)
+        }
+        setSelect(data)
     }
     return (
-        <div style={{ width: '100vm', height: 'calc(100vh - 100px) ', background: '#ffffff' }}>
-            <Spin tip="loading..." spinning={treeLoading}>
-            <div className={styles.config}><div className={styles.title}>{formObj}(字段配置)</div> <Button type="primary"  onClick={back}>返回</Button></div>  
+
+        <><Spin tip="loading..." spinning={treeLoading}>
+            <div className={styles.containerBox}>
+                <div className={styles.config}><div className={styles.title}>{formObj}(字段配置)</div> <Button type="primary" onClick={back}>返回</Button></div>
                 <Table
                     columns={columns}
                     dataSource={tableData}
                     expandable={{ expandedRowRender }}
-                    showHeader={false}
-                    // pagination={{ pageSize: 10 }}
-                    scroll={{  y: '45rem' }}
                     size="small"
                     rowKey='id'
-                    pagination={{
-                        showTotal: (total, range) =>
-                            `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-                        pageSizeOptions: [10, 20, 50, 100],
-                        defaultPageSize: 20,
-                        showQuickJumper: true,
-                        showSizeChanger: true,
-                    }}
-                />
-            </Spin>
-            <FieldEditor
+                    expandedRowKeys={select.map(item => item.key)} //展开的行
+                    expandRowByClick={true}
+                    defaultExpandAllRows={true}
+                    pagination={false}
+                    scroll={{ y: 'calc(100vh - 186px)' }}
+                    size="small"
+                    onExpand={onUnfold} />
+            </div>
+        </Spin><FieldEditor
                 isVisible={isVisible}
                 isType={isType}
                 itemData={itemData}
                 formObj1={formObj}
                 onCancel={() => setIsVisible(false)}
-                callBackSubmit={Submit}
-            />
-        </div>
+                callBackSubmit={Submit} /></>
+
     );
 };
 export default AddModal;

src/pages/platformCenter/filedConfig/index.less

@@ -22,6 +22,20 @@
     }
    
 }
+.containerBox {
+    width: 100vm;
+    height: calc(100vh - 90px) ;
+    background: #ffffff;
+    .ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
+        margin-left: 0;
+    }
+    .ant-table.ant-table-bordered > .ant-table-container{
+        border: none;
+    }
+    .clickRowStyle{
+        background: #cfe7fd;
+    }
+}
 
 .paneTitle{
     font-weight: bold;
@@ -93,6 +107,7 @@
       .title{
           font-size: 18px;
           color: rgba(0, 114, 255, 1);
+          font-weight: bold;
       }
 
   }

src/pages/platformCenter/schemeConfig/SchemeConfig.less

 .container{
     width: 100%;
-
     background-color: #ffffff;
-    display: flex;
-  
     padding: 0.8rem;
+    display: flex;
+    .ant-table {
+        min-height: 15rem !important;
+      }
     .ant-table-thead tr th {
         font-weight: 600;
         color: rgba(0, 0, 0, 0.85);
@@ -97,9 +98,7 @@
         cursor: pointer; 
     }
 }
-.ant-table {
-    min-height: 15rem !important;
-  }
+
   .cardsList{
     display: flex;
     flex-wrap: wrap;

src/pages/platformCenter/schemeDetail/schemeDetail.jsx

@@ -193,7 +193,6 @@ const EditModal = props => {
                 WebTemplateID: fv.web_template,
                 PushGroup: fv.to_person ? fv.to_person.toString() : ''
             }
-            console.log(b)
             InsertMessageConfig(b).then(
                 res => {
                     if (res.code === 0) {
@@ -215,7 +214,6 @@ const EditModal = props => {
                             )
                         } else {
                             message.success("保存成功")
-
                         }
                     }
                     else {

src/pages/platformCenter/standingBook/standingBook.jsx

@@ -74,21 +74,21 @@ const standingBook = props => {
             dataIndex: 'fields',
             key: 'fields',
             align: 'center',
-            width: 100,
+
         },
         {
             title: '检索字段',
             dataIndex: 'searchFields',
             key: 'searchFields',
             align: 'center',
-            width: 100,
+  
         },
         {
             title: '添加字段',
             dataIndex: 'addFields',
             key: 'addFields',
             align: 'center',
-            width: 100,
+         
         },
 
         {
@@ -96,21 +96,21 @@ const standingBook = props => {
             dataIndex: 'editFields',
             key: 'editFields',
             align: 'center',
-            width: 100,
+    
         },
         {
             title: '前端字段',
             dataIndex: 'webFields',
             key: 'webFields',
             align: 'center',
-            width: 100,
+       
         },
         {
             title: '手持字段',
             dataIndex: 'mobileFields',
             key: 'mobileFields',
             align: 'center',
-            width: 100,
+    
         },
         {
             title: '操作',
@@ -270,11 +270,11 @@ const standingBook = props => {
                                 </Tooltip>
                                 <hr style={{ width: '100%', color: '#eeecec' }} />
                                 {
-                                    tableData.length && (tableData.map((item, index) => {
+                                    tableData.length>0 && (tableData.map((item, index) => {
                                         return <div className={classnames({
                                             [styles.listItem]: true,
                                             [styles.pickItem]: item === pickItem,
-                                        })} onClick={e => setPickItem(item)} key={index}>{item}({allData[item] ? allData[item].length : ''}条) {item === pickItem ? <RightOutlined /> : ''} </div>
+                                        })} onClick={e => setPickItem(item)} key={index}>{item}（{allData[item] ? allData[item].length : ''}） {item === pickItem ? <RightOutlined /> : ''} </div>
                                     })
                                     )}
                             </div></> : ''}
@@ -308,7 +308,6 @@ const standingBook = props => {
                               onDoubleClick: event => {event.stopPropagation(); editor(record)}, //双击
                             };
                           }}
-                
                         columns={columns}
                         dataSource={allData[pickItem]}
                         // loading={tableLoading}

src/pages/platformCenter/standingBook/standingBook.less

@@ -99,7 +99,7 @@
         }
         .orgContainer{
             height: calc(100vh - 74px);
-            width: 340px;
+            width: 240px;
             left: 0;
             top: 0;
             overflow-x: hidden;