Skip to content

C
CivManage
Commit 1275fc0c authored by shaoan123's avatar shaoan123
Browse files
Options

编辑分组及排序模态框

parent f34301d9
Pipeline #30090 skipped with stages
        Hide whitespace changes
        Inline Side-by-side
        Showing with 461 additions and 38 deletions
        src/pages/platformCenter/bsmanager/tablemanager/components/Field/fieldEditor.jsx
        View file @ 1275fc0c
        ......@@ -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 {
        data.EditableLater = e.target.checked
        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,27 +371,118 @@ const AddModal = props => {
        <div className={styles.unit}>宽：<Input style={{ width: '4rem' }} placeholder="" allowClear value={pramData.RowSpan} onChange={(e) => handleInput(e, 'RowSpan')} /></div>
        </div>
        </Item>
        <Item
        label="预设值"
        >
        <div className={styles.listEvent}>
        <Input style={{ width: '40%', height: '1.8rem' }} value={pramData.Preset} onChange={(e) => handleInput(e, 'Preset')} 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>
        {(() => {
        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="预设值"
        >
        <div className={styles.listEvent}>
        <Input style={{ width: '40%', height: '1.8rem' }} value={pramData.Preset} onChange={(e) => handleInput(e, 'Preset')} 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="异常值"
        >
        ......
        src/pages/platformCenter/bsmanager/tablemanager/components/Field/index.less
        View file @ 1275fc0c
        ......@@ -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 0 → 100644
        View file @ 1275fc0c
        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
        View file @ 1275fc0c
        ......@@ -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
        View file @ 1275fc0c
        ......@@ -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);
        Markdown is supported
        0% or
        You are about to add 0 people to the discussion. Proceed with caution.
        Finish editing this message first!
        Please register or to comment