编辑分组及排序模态框

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

@@ -16,13 +16,13 @@ const AddModal = props => {
     const [filed, setFiled] = useState({}); // 事件
     const [verification, setVerification] = useState([]);
     const [Shape, setShape] = useState('文本')
-    const [characteristics, setCharacteristics] = useState(['文本', '数值', '唯一值文本', '多行文本', '编码', '地址', '本人部门', '本人姓名', '本人ID', '选择器', '搜索选择器', '值选择器', '值复选器', '业务选择器', '可编辑值选择器', '平铺值选择器', '站点选择器', '人员选择器', '人员选择器新', '城市选择器', '台账选择器', '附近', '可预览附件', '图片', '可预览图片', '录音', '视频', '日期时间', '日期', '日期月份', '日期年份', '日期周', '时分秒', '设备选择', '坐标控件', '区域控件', '路径控件', '智能抄表', '二维码识别', '设备二维码', '位置坐标'])
+    const [characteristics, setCharacteristics] = useState(['文本', '数值', '唯一值文本', '多行文本', '编码', '地址', '本人部门', '本人姓名', '本人ID', '选择器', '搜索选择器', '值选择器', '值复选器', '业务选择器', '可编辑值选择器', '平铺值选择器', '站点选择器', '人员选择器', '人员选择器新', '城市选择器', '台账选择器', '附件', '可预览附件', '图片', '可预览图片', '录音', '视频', '日期时间', '日期', '日期月份', '日期年份', '日期周', '时分秒', '设备选择', '坐标控件', '区域控件', '路径控件', '智能抄表', '二维码识别', '设备二维码', '位置坐标'])
     const [visible, setVisible] = useState(false); // 弹窗
     const [isShow, setIsShow] = useState(false); // 弹窗
     const [type, setType] = useState(''); // 弹窗类型
     const [formObj, setFormObj] = useState({ rule: [], numerical: '' });
     const [characterValue, setCharacterValue] = useState('')
-    const [pramData, setPramData] = useState({ Unit: '', ExceptionEvent: '', Group: '', RowSpan: 0, ColSpan: 0, ReadOnly: false, EditableLater: false, ExceptionValue: '', Preset: '' })
+    const [pramData, setPramData] = useState({ Unit: '', ExceptionEvent: '', Group: '', RowSpan: 0, ColSpan: 0, ReadOnly: false, EditableLater: false, ExceptionValue: '', Preset: '', picture: false, must: false, coordinates: false })
     const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
     const { TextArea } = Input;
     const [form] = Form.useForm();
@@ -33,7 +33,24 @@ const AddModal = props => {
             if (validate) {
                 setLoading(true);
                 let obj = form.getFieldsValue();
-                UpdateFields([{ Unit: pramData.Unit || '', StoreType: "nvarchar(255)", Group: pramData.Group || '', ExceptionEvent: pramData.ExceptionEvent || '',RowSpan: pramData.RowSpan || 0, ColSpan: pramData.ColSpan || 0, ReadOnly: pramData.ReadOnly || false, EditableLater: pramData.EditableLater || false, ExceptionValue: pramData.ExceptionValue || '', Preset: pramData.Preset || '', ID: Number(itemData.ID), Name: obj.Name,Alias:obj.Alias, SyncEvent: obj.SyncEvent, ValidationRule: obj.ValidationRule, ExceptionEventFields: characterValue, Config: obj.Config }]).then(res => {
+                console.log('obj', obj);
+                let data = [{ Unit: pramData.Unit || '', StoreType: "nvarchar(255)", Group: pramData.Group || '', Shape, ExceptionEvent: pramData.ExceptionEvent || '', RowSpan: pramData.RowSpan || 0, ColSpan: pramData.ColSpan || 0, ReadOnly: pramData.ReadOnly || false, EditableLater: pramData.EditableLater || false, ExceptionValue: pramData.ExceptionValue || '', Preset: pramData.Preset || '', ID: Number(itemData.ID), Name: obj.Name, Alias: obj.Alias, SyncEvent: obj.SyncEvent, ValidationRule: obj.ValidationRule, ExceptionEventFields: characterValue }]
+
+                switch (Shape) {
+                    case '编码':
+                        data[0].Config = `${obj.code}.${obj.prefix ? obj.prefix : ''}`;
+                        break
+                    case '坐标控件':
+                        pramData.coordinates ? data[0].Config = '当前坐标' : data[0].Config = '';
+                        break
+                    case '图片': case '可预览图片':
+                        data[0].Preset = pramData.picture ? '拍照相册' : '';
+                        data[0].ValidationRule = pramData.must ? 'required' : ''
+                        break
+                    default:
+                        data[0].Config = obj.Config;
+                }
+                UpdateFields(data).then(res => {
                     setLoading(false);
                     if (res.msg === "Ok" || res.msg === "") {
                         form.resetFields();
@@ -67,14 +84,30 @@ const AddModal = props => {
                 res[1].msg === 'Ok' && setFieldName(res[1].data.root)
                 res[2].msg === 'Ok' && setEventList(res[2].data.root)
                 if (res[0].msg === 'Ok') {
-                    form.setFieldsValue({ ...res[0].data.root})
+                    form.setFieldsValue({ ...res[0].data.root })
                     if (res[0].data.root.ExceptionEventFields === '') {
                         setIsShow(false)
                     } else {
                         setIsShow(true)
                         setCharacterValue(res[0].data.root.ExceptionEventFields)
                     }
-                    setPramData({...res[0].data.root})
+                    setShape(res[0].data.root.Shape)
+                    let coordinates = false, picture = false, must = false
+                    switch (res[0].data.root.Shape) {
+                        case '坐标控件':
+                            res[0].data.root.Config === "当前坐标" ? coordinates = true : coordinates = false
+                            break
+                        case '图片': case '可预览图片':
+                            res[0].data.root.Preset === "拍照相册" ? picture = true : picture = false;
+                            res[0].data.root.ValidationRule === "required" ? must = true : must = false
+                            break
+                        case '编码':
+                            let code = res[0].data.root.Config.split(".")
+                            form.setFieldsValue({ code: code[0] || '', prefix: code[1] === "undefined" ? '' : code[1] });
+                            break
+
+                    }
+                    setPramData({ ...res[0].data.root, coordinates, must, picture })
                 }
 
                 // form.setFieldsValue({ ExceptionEvent: res[2].data.root[0].Name || '无' })
@@ -145,6 +178,7 @@ const AddModal = props => {
         } else {
             setIsShow(false)
             setFiled({})
+            setCharacterValue('')
         }
     }
     const getFieldData = (value) => {
@@ -195,18 +229,40 @@ const AddModal = props => {
         return tempObj
     }
     const handleCharacteristics = (value) => {
+        let data = { ...pramData }
         setShape(value)
+        data.must = false
+        data.coordinates = false
+        data.picture = false
+        data.Preset = ''
+        setPramData(data)
+        form.setFieldsValue({ ValidationRule: '' });
+        if (value.indexOf("日期") != -1 || value === "时分秒") {
+            form.setFieldsValue({ Config: undefined });
+        }
+
     }
     const onCharacterValue = (e) => {
         setCharacterValue(e.target.value)
     }
     const onChangeReady = (e, str) => {
         let data = { ...pramData }
-        if (str === 'ReadOnly') {
-            data.ReadOnly = e.target.checked
-        }
-        else {
+        switch (str) {
+            case 'ReadOnly':
+                data.ReadOnly = e.target.checked;
+                break;
+            case 'EditableLater':
                 data.EditableLater = e.target.checked
+                break;
+            case 'must':
+                data.must = e.target.checked
+                break;
+            case 'picture':
+                data.picture = e.target.checked
+                break;
+            case 'coordinates':
+                data.coordinates = e.target.checked
+                break;
         }
         setPramData(data)
     }
@@ -231,6 +287,24 @@ const AddModal = props => {
         }
         setPramData(data)
     }
+    const handleSeparator = (value) => {
+        let data = { ...pramData }
+        switch (value) {
+            case '6':
+                data.Preset = '是'
+                form.setFieldsValue({ Config: '是,否' });
+                break;
+            case '7':
+                data.Preset = '否'
+                form.setFieldsValue({ Config: '是,否' });
+                break;
+            case '8':
+                data.Preset = '否'
+                form.setFieldsValue({ Config: '否,是' });
+                break;
+        }
+        setPramData(data)
+    }
     return (
         <>
             <Modal
@@ -285,12 +359,7 @@ const AddModal = props => {
                                 <Radio value={2} >事件（上报时） → 工单</Radio>
                             </Radio.Group>
                         </Item>
-                        <Item
-                            label="配置"
-                            name="Config"
-                        >
-                            <TextArea allowClear />
-                        </Item>
+
                         <Item
                             label="形态"
                         >
@@ -302,6 +371,96 @@ const AddModal = props => {
                                 <div className={styles.unit}>宽：<Input style={{ width: '4rem' }} placeholder="" allowClear value={pramData.RowSpan} onChange={(e) => handleInput(e, 'RowSpan')} /></div>
                             </div>
                         </Item>
+                        {(() => {
+                            switch (Shape) {
+                                case '编码':
+                                    return <>
+                                        <Item
+                                            label="前缀"
+                                            name="prefix"
+                                        >
+                                            <Input style={{ width: '95%' }} placeholder="" allowClear />
+                                        </Item>
+                                        <Item
+                                            label="编码方式"
+                                            name="code"
+                                        >
+                                            <Radio.Group>
+                                                <Radio value='年份编码' style={{ marginRight: '0.5rem' }}>XJ-2019-000001（前缀-年份-六位编码）</Radio>
+                                                <Radio value='年月编码' style={{ marginRight: '0.5rem' }}>XJ-201909-000001（前缀-年份月份-六位编码）</Radio>
+                                                <Radio value='一般编码' defaultChecked >XJ00000001（前缀 八位编码）</Radio>
+                                            </Radio.Group>
+                                        </Item>
+                                    </>
+                                case '值选择器': case '值复选器': case '可编辑值选择器': case '平铺值选择器':
+                                    return <> <Item
+                                        label="可选值"
+                                        name="Config"
+                                    >
+                                        <TextArea allowClear />
+                                    </Item>
+                                        <Item
+                                            colon={false}
+                                            label=" "
+                                        >  <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                <span style={{ marginRight: '0.4rem' }}>以英文逗号为分隔符填写，或其他分隔符粘贴：</span>
+                                                <Select onChange={handleSeparator} style={{ width: '30%' }}>
+                                                    <Select.Option value='0'>以,分隔(英文逗号)</Select.Option>
+                                                    <Select.Option value='1'>以/分隔(正斜杠)</Select.Option>
+                                                    <Select.Option value='2'>以\\分隔(反斜杠)</Select.Option>
+                                                    <Select.Option value='3'>以、分隔(中文顿号)</Select.Option>
+                                                    <Select.Option value='4'>以;分隔(英文分号)</Select.Option>
+                                                    <Select.Option value='5'>以；分隔(中文分号)</Select.Option>
+                                                    <Select.Option value='6'>(是)/否</Select.Option>
+                                                    <Select.Option value='7'>是/(否)</Select.Option>
+                                                    <Select.Option value='8'>(否)/是</Select.Option>
+                                                </Select>
+                                            </div>
+
+                                        </Item>
+                                    </>
+                                case '图片': case '可预览图片':
+                                    return <Item
+                                        name="ReadOnly"
+                                        label="选项"
+                                    >
+                                        <div>
+                                            <Checkbox checked={pramData.picture} onChange={(e) => onChangeReady(e, 'picture')}>允许从相册选取</Checkbox>
+                                            <Checkbox checked={pramData.must} onChange={(e) => onChangeReady(e, 'must')}>必填字段</Checkbox>
+                                        </div>
+                                    </Item>
+                                case '日期时间': case '日期': case '日期月份': case '日期年份': case '日期周': case '时分秒':
+                                    return <Item
+                                        label="选项"
+                                        name="Config"
+                                    >
+                                        <Radio.Group style={{ marginTop: '0.3rem' }}>
+                                            <Radio value='默认为空' defaultChecked style={{ width: '18rem', marginBottom: '0.5rem' }}>默认为空</Radio>
+                                            <Radio value='' >默认为当前时间</Radio>
+                                            <Radio value='不可选择' style={{ width: '18rem' }}>锁定为当前时间(通过用户点击刷新)</Radio>
+                                            <Radio value='不超过当前时间' >不超过当前时间</Radio>
+                                        </Radio.Group>
+                                    </Item>
+                                case '坐标控件':
+                                    return <Item
+                                        label="选项"
+                                        name="Config"
+                                    >
+                                        <div>
+                                            <Checkbox value='当前坐标' style={{ marginRight: '0.2rem' }} checked={pramData.coordinates} onChange={(e) => onChangeReady(e, 'coordinates')}></Checkbox>锁定为当前位置坐标
+                                        </div>
+                                    </Item>
+                                default:
+                                    return <Item
+                                        label="配置"
+                                        name="Config"
+                                    >
+                                        <TextArea allowClear />
+                                    </Item>
+                            }
+                        }
+                        )()}
+                        {Shape === '图片' || Shape === '可预览图片' ? '' :
                             <Item
                                 label="预设值"
                             >
@@ -323,6 +482,7 @@ const AddModal = props => {
                                     </Tooltip>
                                 </div>
                             </Item>
+                        }
                         <Item
                             label="异常值"
                         >

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

@@ -64,3 +64,11 @@ get(`${PUBLISH_SERVICE}/CaseManage/LoadEventFields`, param);
 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);
+