编辑分组及排序模态框

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

@@ -15,6 +15,12 @@
     .ant-card-extra{
         margin-left: 0.2rem;
     }
+   
+}
+.ant-card-body{
+    padding: 0 !important;
+    height: 15rem;
+    overflow-y: scroll;
 }
 .paneTitle{
     font-weight: bold;
@@ -66,5 +72,10 @@
           background: #FAFAFA;
         }
       }
+      tbody{
+          tr:hover{
+              background-color:#ededed ;
+          }
+      }
     }
   }

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

+import React, { useState, useEffect } from 'react';
+import { Modal, Card, Table, Button, Popconfirm, Spin, notification } from 'antd';
+
+import { LoadFieldsByGroup, LoadGroup } from '@/services/platform/bs'
+import { PlusOutlined } from '@ant-design/icons';
+import Sortable from 'sortablejs';
+import styles from './index.less'
+import { pick } from 'lodash';
+const AddModal = props => {
+    const [tableData, setTableData] = useState([])
+
+    const { callBackSubmit = () => { }, type, formObj, visible } = props;
+    const [loading, setLoading] = useState(false);
+    const [treeLoading, setTreeLoading] = useState(true)
+    const [groupName, setGroupName] = useState([])
+    const [selectData, setSelectData] = useState([])
+    const [pickData, setPickData] = useState([])
+    const [flag, setFlag] = useState(0); // 弹窗类型
+
+    // 提交
+    const onSubmit = () => {
+        form.validateFields().then(validate => {
+            if (validate) {
+                setLoading(true);
+                let obj = form.getFieldsValue();
+            }
+        });
+    };
+
+    const editor = (record) => {
+        setIsType('edit');
+        setIsVisible(true);
+        setItemData(record);
+    }
+    const Submit = prop => {
+        setIsVisible(false);
+        setFlag(flag + 1)
+    };
+    useEffect(() => {
+        if (type != '') {
+            setTreeLoading(true)
+            LoadGroup({
+                tableName: formObj.tableName
+            }).then(
+                res => {
+                    setTreeLoading(false)
+                    if (res.msg === 'Ok') {
+                        setTableData(res.data.root)
+                        let arr = []
+                        res.data.root.map(item => {
+                            arr.push(item.text == "<font color=\"grey\">(未分组)</font>" ? '(未分组)' : item.text)
+                        })
+                        LoadFieldsByGroup({ tableName: formObj.tableName, groupName: arr.join(",") }).then(respone => {
+                            if (respone.msg === 'Ok') {
+                                let data = handlerDatas(respone.data.root)
+                                setSelectData(data)
+                                console.log(selectData, '123');
+                            }
+                            draftSort()
+                        })
+                    }
+
+                }
+            )
+        }
+
+    }, [visible, flag]);
+
+    const add = () => {
+
+    }
+    const handlerDatas = (arr) => {
+        let obj = {};
+        arr.forEach((item, index) => {
+            let { Group } = item;
+            if (!obj[Group]) {
+                obj[Group] = {
+                    Group,
+                    children: []
+                }
+            }
+            obj[Group].children.push(item);
+        });
+        return Object.values(obj); // 最终输出
+    }
+
+    //拖拽初始化及逻辑
+    const draftSort = () => {
+        let el = document.getElementById('doctor-drag-list');
+        let listItem = document.getElementById('doctor-drag-listItem');
+        if (el && listItem) {
+            let sortable = Sortable.create(el, {
+                animation: 100, //动画参数
+                group: 'shared',
+                onEnd: function (evt) { //拖拽完毕之后发生，只需关注该事件
+
+                },
+                sort: false,// 设为false，禁止sort
+                // 元素从一个列表拖拽到另一个列表
+                onAdd: function (/**Event*/evt) {
+                    console.log(evt, '123');
+                    // let data = [...pickData]
+                    // data.splice(evt.oldIndex,1)
+                    // setPickData(data)
+                },
+            })
+            let sortable1 = Sortable.create(listItem, {
+                animation: 100, //动画参数
+                group: {
+                    name: 'shared',
+                    pull: 'clone',
+                    put: false // 不允许拖拽进这个列表
+                },
+                onEnd: function (evt) { //拖拽完毕之后发生，只需关注该事件
+
+                    let len = evt.from.children.length;
+                    for (let i = 0; i < len; i++) {
+
+
+                    }
+                },
+                onChoose: function (/**Event*/evt) {
+
+                    console.log(evt.oldIndex);
+                },
+                // 元素从一个列表拖拽到另一个列表
+                onAdd: function (/**Event*/evt) {
+                    console.log(evt, '123');
+                },
+            });
+        }
+
+    }
+    //删除表字段
+    const deleteChart = (record) => {
+
+    }
+    const pick = (name) => {
+        const data = selectData.filter(item => {
+            return item.Group === name
+        })
+        setPickData(data[0].children)
+    }
+    return (
+        <>
+            <Modal
+                title='字段配置'
+                bodyStyle={{ width: '100%', minHeight: '100px' }}
+                style={{ top: '50px', left: '50px' }}
+                width='50%'
+                destroyOnClose
+                maskClosable={false}
+                cancelText="取消"
+                okText="确认"
+                {...props}
+                onOk={() => onSubmit()}
+                confirmLoading={loading}
+                forceRender={true}
+                getContainer={false}
+            >
+                {visible && (
+                    <div style={{ display: 'flex' }}>
+                        <Card title="添加分组" bordered={true} extra={<PlusOutlined onClick={() => add} />} style={{ width: '50%' }}>
+                            <div className={styles.cardItem}>
+                                <div className={styles.cardContent}>
+                                    <div className={styles.doctorTable}>
+                                        <table>
+                                            <thead>
+                                                <tr>
+                                                    <td style={{ paddingLeft: '1rem' }}>组名称</td>
+                                                </tr>
+                                            </thead>
+                                            <tbody id='doctor-drag-list'>
+                                                {tableData && tableData.length > 0 ?
+                                                    tableData.map((item, index) => {
+                                                        return <tr onClick={() => pick(item.text)} drag-id={item.text} key={index} >
+                                                            <td><span title={item.text}>{item.text}</span></td>
+                                                        </tr>
+                                                    })
+                                                    : <tr></tr>
+                                                }
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </Card>
+                        <div className={styles.cardItem} style={{ width: '50%' }}>
+                            <div className={styles.cardContent}>
+                                <div className={styles.doctorTable}>
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <td style={{ paddingLeft: '1rem' }}>字段名</td>
+                                                <td style={{ paddingLeft: '1rem' }}>形态</td>
+                                            </tr>
+                                        </thead>
+                                        <tbody id='doctor-drag-listItem'>
+                                            {pickData && pickData.length > 0 ?
+                                                pickData.map((item, index) => {
+                                                    return <tr drag-name={item.Name} drag-shape={item.Shape} key={index} style={{ cursor: 'move' }} >
+                                                        <td><span title={item.Name}>{item.Name}</span></td>
+                                                        <td><span title={item.Shape}>{item.Shape}</span></td>
+                                                    </tr>
+                                                })
+                                                : <tr></tr>
+                                            }
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+                )}
+            </Modal>
+
+        </>
+    );
+};
+export default AddModal;

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

@@ -12,7 +12,7 @@ import {
     Spin,
     Tooltip
 } from 'antd';
-import { EditOutlined, DeleteOutlined, FontColorsOutlined, PlusSquareOutlined } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, FontColorsOutlined, PlusSquareOutlined,SortDescendingOutlined } from '@ant-design/icons';
 import PageContainer from '@/components/BasePageContainer';
 import { CM_Table_LoadTable, removeTable, loadUnattachedTables } from '@/services/platform/bs'
 import styles from './index.less'
@@ -20,6 +20,7 @@ import Editor from './components/Field/editor'
 import AddTablelList from './components/Field/addTable'
 import AffiliateAdd from './components/Field/affiliateAdd'
 import FieldsConfig from './components/Field/fieldsConfig'
+import LoadGroup from './components/Field/loadGroup'
 const { Search } = Input;
 const { Option } = Select;
 const placeholder = "请输入表名"
@@ -149,6 +150,12 @@ const TableManager = () => {
                             style={{ fontSize: '16px', color: '#1890FF' }}
                         />
                     </Tooltip>
+                    <Tooltip title="分组与排序">
+                        <SortDescendingOutlined
+                            onClick={() => sort(record)}
+                            style={{ fontSize: '16px', color: '#1890FF' }}
+                        />
+                    </Tooltip>
                     <div onClick={e => e.stopPropagation()}>
                         <Popconfirm
                             title="是否删除该表？"
@@ -231,6 +238,12 @@ const TableManager = () => {
         setType('config');
         setVisible(true);
     }
+    //分组与排序
+    const sort = (record)=>{
+        setFormObj(record);
+        setType('sort');
+        setVisible(true);
+    }
     //搜索框改变时存储输入的值
     const handleChange = (e) => {
         setSearchValue(e.target.value)
@@ -340,6 +353,15 @@ const TableManager = () => {
                         callBackSubmit={onSubmit}
                     />
                 )}
+                   {visible && type === 'sort' && (
+                    <LoadGroup
+                        visible={visible}
+                        type={type}
+                        formObj={formObj}
+                        onCancel={() => setVisible(false)}
+                        callBackSubmit={onSubmit}
+                    />
+                )}
             </PageContainer>
         </Spin>
     )

src/services/platform/bs.jsx

@@ -63,4 +63,12 @@ get(`${PUBLISH_SERVICE}/CaseManage/LoadEventFields`, param);
 //16.更改字段信息
 export const UpdateFields = (data) =>
 post(`${PUBLISH_SERVICE}/CaseManage/UpdateFields`, data);
+
+//17.分组与调序，根据表名加载分组
+export const LoadGroup = (param) =>
+get(`${PUBLISH_SERVICE}/CaseManage/LoadGroup`, param);
+
+//18.根据分组名加载字段集
+export const LoadFieldsByGroup = (param) =>
+get(`${PUBLISH_SERVICE}/CaseManage/LoadFieldsByGroup`, param);