大厅来访预览

dminyi

2024-08-14 3872b60b0c1c631f76d5cc4ab34fd1bc590cda44

大厅来访预览

 gz-customerSystem/.gitignore

@@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

package-lock.json

 gz-customerSystem/src/api/appUrl.js

@@ -2,20 +2,20 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:25:57
 * @LastEditTime: 2024-08-12 09:26:56
 * @LastEditTime: 2024-08-13 14:17:29
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: api地址
 */
export const debug = {
    // web服务
    baseUrl: 'http://gz.hugeinfo.com.cn',
    // baseUrl: 'http://192.168.3.108:9002',
    // baseUrl: 'http://gz.hugeinfo.com.cn',
    baseUrl: 'http://192.168.3.108:9002',
    // baseUrl: 'http://mdqgnh.natappfree.cc',

    // 附件服务
    // fileUrl: 'http://192.168.3.108:9002',
    fileUrl: 'http://gz.hugeinfo.com.cn',
    fileUrl: 'http://192.168.3.108:9002',
    // fileUrl: 'http://gz.hugeinfo.com.cn',


    // 文件查看url 后面接附件编号

 gz-customerSystem/src/assets/images/index.js

@@ -33,6 +33,7 @@
import del from './del.png';
import question from './question.png';
import question1 from './question1.png';
import person from './person.png';

export {
    ledger_1,
@@ -60,5 +61,6 @@
    add,
    del,
    question,
    question1
    question1,
    person
};

 gz-customerSystem/src/assets/images/person.png

 gz-customerSystem/src/views/basicInformation/organization/index.jsx

@@ -1,400 +1,386 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 09:59:43
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-18 15:04:13
 * @LastEditTime: 2024-08-13 16:04:30
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-12 20:30:15
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
 * @Description: 来访登记
 * @Version: 1.0.0
 * @Description: 组织架构
 */

import React, { useState, useEffect } from "react";
import NewPage from '../../../components/NewPage';
import RegisterTab from '../../../components/registerTab';
import PersonCard from '../../../components/personCard';
import React, { useState, useEffect } from 'react';
import { Input, Menu, Tooltip, Space } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import Page from '../../../components/Page';
import { AddOrEditOrganization, DepartmentTable, PersonnelModal, AddOrEditDept } from '../../../components/basicInformation/organization';
import MyTree from '../../../components/MyTree';
import * as $$ from '../../../utils/utility';
import { add, question1 } from '../../../assets/images';
import { Row, Col, Space, Tooltip } from 'antd';
import { Form, Input, Button, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react';
import "@arco-design/web-react/dist/css/arco.css";
import TableView from '../../../components/TableView';

const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
const { Search } = Input;



function getCaseDataApi(submitData) {
    return $$.ax.request({ url: `caseInfo/getCaseInfo?id=${submitData}`, type: 'get', service: 'mediate' });
// 查询人员信息
function getPersonsApi(data) {
    return $$.ax.request({ url: 'ctUser/pageQuery', type: 'get', data, service: 'cust' });
}

// 获取组织结构
function getOrganizationApi() {
    return $$.ax.request({ url: 'ctUnit/listUnitTree', type: 'get', service: 'cust' });
}

// 新增 or 修改组织
function setOrganizationApi(data) {
    return $$.ax.request({ url: 'ctUnit/saveCtUnit', type: 'post', data, service: 'cust' });
}

// 删除组织
function delOrganizationApi(id) {
    return $$.ax.request({ url: `ctUnit/removeByIds?ids=${id}`, type: 'get', service: 'cust' });
}

// 获取部门详情
function getDepartmentDataApi(organizationId) {
    return $$.ax.request({ url: `ctUnit/getUnitAndDept?id=${organizationId}`, type: 'get', service: 'cust' });
}

// 新增 or 修改部门
function setDeptApi(data) {
    return $$.ax.request({ url: 'ctDept/saveCtDept', type: 'post', data, service: 'cust' });
}

// 删除部门
function delDeptApi(deptId) {
    return $$.ax.request({ url: `ctDept/removeByIds?ids=${deptId}`, type: 'get', service: 'cust' });
}

const Organization = () => {
    // 是否是新增 or 修改组织
    const [isAddOrEdit, setIsAddOrEdit] = useState(false);

    // 是否新增 or 修改部门
    const [isAddOrEditDept, setIsAddOrEditDept] = useState(false);

    // tabs当前选择的标签信息
    const [tabsActive, setTabsActive] = useState('1');
    const [visible, setVisible] = useState(false);
    const [selectedCity, setSelectedCity] = useState('Beijing');
    // 查看人员modal
    const [modalData, setModalData] = useState({ visible: false, title: '', data: [], total: 0 });

    const tabs = [
        { label: '事件登记', key: '1' },
        { label: '事件流转', key: '2' },
        { label: '办理反馈', key: '3' },
        { label: '申请结案', key: '4' },
        { label: '当事人评价', key: '5' },
        { label: '结案归档', key: '6', img1: true },
    // 组织数据
    const [organizationData, setOrganizationData] = useState([]);

    ];
    // 当前选择组织
    const [organizationActive, setOrganizationActive] = useState({});

    // 新增 or 修改组织数据
    const [organizationEditData, setOrganizationEditData] = useState({ active: {} });

    const fakeData = [
        {
            id: 3,
            perClassName: '申请方当事人',
            trueName: '蓝海科技有限公司',
            mobile: '13800000002',
            agentStatus: '1', // 无代理人
            company: true
        },
        {
            id: 1,
            perClassName: '申请方代理人',
            trueName: '王小明',
            mobile: '13800000001',
            agentStatus: '2', // 有代理人
            person: true
        },
        {
            id: 2,
            perClassName: '被申请方当事人',
            trueName: '蓝海科技有限公司',
            mobile: '13800000002',
            agentStatus: '1', // 无代理人
            person: true,
            Respondent: true
        },
    // 新增 or 修改部门数据
    const [deptEditData, setDeptEditData] = useState({});

    ];
    // 组织查询
    const [organizationSearch, setOrganizationSearch] = useState({ value: '', searchValue: '' });

    const fakeData1 = [
        {
            id: 1,
            caseNo: 'A20230101',
            judicNo: 'J20230101',
            perClassName: '自然人',
            inputUserName: '张三',
            mediateUserName: '李四',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
            returnUserName: '孙八',
            expireTime: '2023-08-10T08:00:00.000Z',
            processName: '进行中',
            otherMediator: '周九',
            canalName: '网络',
            judicResult: '通过',
            assistName: '吴十',
            mediTypeName: '民事调解',
            serieStatus: '1', // 1 表示非系列案，2 表示系列案
            // 更多字段...
        },
        // 更多数据...
    ];
    // 当前选择组织下的部门数据
    const [departmentData, setDepartmentData] = useState([]);

    // 列配置
    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
        },
        {
            title: '材料数量',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '材料名称',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '上传时间',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '操作',
            dataIndex: 'perClassName',
            key: 'perClassName',
            render: (text) => (
                <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
                    <div>查看</div>
                    <div>删除</div>
                    <div>下载</div>
                    <div>上传</div>
                </div>
            )
        },
        // 更多列配置...
    ];
    // 选择组织
    function handleOrganization(value) {
        getDepartmentData({ organizationId: value.id });
    }

    const options = [
        {
            value: 'beijing',
            label: 'Beijing',
            children: [
    // 组织查询
    function handleSearchOrganization(value) {
        setOrganizationSearch({ ...organizationSearch, searchValue: value });
    }

    // 点击删除组织
    async function handleDelOrganization(value) {
        if (value.children && value.children.length > 0) {
            $$.info({ type: 'warning', content: '该组织下存在下级组织, 不支持删除! 请先清空下级组织' });
            return false;
        }
        let visible = false;
        const res = await getDepartmentDataApi(value.id);
        if (res.type) {
            if (res.data.countCtDept) {
                $$.info({ type: 'warning', content: '该组织下存在部门, 不支持删除! 请先清空部门' });
                visible = true;
            }
        }
        if (!visible) {
            $$.modalInfo({
                content: `确认删除${value.name}吗?`,
                onOk: () => delOrganization({ organizationId: value.id }),
            });
        }
    }

    // 查看部门人员 or 关闭modal
    function handlePersonnelModal(record, visible) {
        if (visible) {
            getPersons({ unitId: record.unitId, deptId: record.id, page: 1, size: 10 }, record.name);
        } else {
            setModalData({ visible });
        }
    }

    // 获取人员信息
    async function getPersons(submitData, title) {
        global.setSpinning(true);
        const res = await getPersonsApi(submitData);
        global.setSpinning(false);
        if (res.type) {
            let resData = res.data || {};
            setModalData({
                visible: true,
                title: title || modalData.title,
                data: resData.ctUserPage?.content,
                total: resData.ctUserPage?.totalElements,
                search: { page: submitData.page, size: submitData.size, unitId: submitData.unitId, deptId: submitData.deptId },
            });
        }
    }

    // 获取组织数据
    async function getOrganization(firstLoading, reset) {
        global.setSpinning(true);
        const res = await getOrganizationApi();
        global.setSpinning(false);
        if (res.type) {
            let data = res.data || [],
                active = {};
                console.log(data, 'data');
            if (data.length > 0 && (firstLoading || reset)) {
                active = data[0];
            }
            setOrganizationData(data);
            if (data.length > 0) {
                if (firstLoading || reset) {
                    setOrganizationSearch({ value: '', searchValue: '' });
                }
                getDepartmentData({ organizationId: active.id ? active.id : organizationActive.id });
            }
        }
    }

    // 新增 or 修改组织
    async function setOrganization(submitType, values, form) {
        global.setSpinning(true);
        let data = {
            ...organizationEditData.active,
            ...values,
            id: organizationEditData.type === 'change' ? organizationEditData.active.id : '',
            parentId:
                organizationEditData.type === 'change'
                    ? organizationEditData.active.parentId
                    : organizationEditData.type === 'upAdd'
                    ? ''
                    : organizationEditData.active.id,
            childId: organizationEditData.type === 'upAdd' ? organizationEditData.active.id : '',
        };
        let submitData = data.id ? { ...organizationActive.active, ...data } : data;
        const res = await setOrganizationApi(submitData);
        global.setSpinning(false);
        if (res.type) {
            $$.infoSuccess({ content: '操作成功' });
            if (submitType === '1') {
                setIsAddOrEdit(false);
            } else {
                form.resetFields();
            }
            getOrganization();
        }
    }

    // 删除组织
    async function delOrganization({ organizationId }) {
        global.setSpinning(true);
        const res = await delOrganizationApi(organizationId);
        global.setSpinning(false);
        if (res.type) {
            $$.infoSuccess({ content: '删除成功!' });
            if (organizationId === organizationActive.id) {
                getOrganization('', 'reset');
            } else {
                getOrganization();
            }
        }
    }

    // 获取部门详情
    async function getDepartmentData({ organizationId }) {
        global.setSpinning(true);
        const res = await getDepartmentDataApi(organizationId);
        global.setSpinning(false);
        if (res.type) {
            setOrganizationActive(res.data);
            setDepartmentData(res.data.ctDepts || []);
        }
    }

    // 新增 or 修改部门
    async function setDept(submitType, values, form) {
        let submitData = {
            ...deptEditData,
            ...values,
            unitId: organizationActive.id,
            id: deptEditData.id === 'addOneDept' || deptEditData.id === 'addSubordinateDept' ? '' : deptEditData.id,
            parentId: deptEditData.id === 'addOneDept' ? '' : deptEditData.parentId,
        };
    global.setSpinning(true);
        const res = await setDeptApi(submitData);
        global.setSpinning(false);
        if (res.type) {
            $$.infoSuccess({ content: '操作成功' });
            if (submitType === '1') {
                setIsAddOrEditDept(false);
            } else {
                form.resetFields();
            }
            getDepartmentData({ organizationId: organizationActive.id });
        }
    }

    // 删除部门
    async function delDept({ deptId }) {
        global.setSpinning(true);
        const res = await delDeptApi(deptId);
        global.setSpinning(false);
        if (res.type) {
            $$.infoSuccess({ content: '删除成功' });
            getDepartmentData({ organizationId: organizationActive.id });
        }
    }

    useEffect(() => {
        getOrganization('firstLoading');
    }, []);

    // 组织操作
    const dropdownOptions = ({ num, value }) => (
        <Menu
            onClick={({ key }) => {
                console.log(key, value,'key','value')
                if (key === 'delete') {
                    handleDelOrganization(value);
                } else {
                    setOrganizationEditData({ type: key, active: value });
                    setIsAddOrEdit(true);
                }
            }}
        >
            {num === 1 && <Menu.Item key="upAdd">新增上级组织</Menu.Item>}
            <Menu.Item key="downAdd">新增下级组织</Menu.Item>
            <Menu.Item key="change">修改</Menu.Item>
            {num !== 1 && <Menu.Item key="delete">删除</Menu.Item>}
        </Menu>
    );

    function addOrEditBreadcrumb() {
        console.log('111111')
        let obj = isAddOrEdit
            ? {
                    title: organizationEditData.type === 'change' ? '修改组织' : organizationEditData.type === 'upAdd' ? '新增上级组织' : '新增下级组织',
              }
            : {
                    title: isAddOrEditDept === 'changeDept' ? '修改部门' : isAddOrEditDept === 'addOneDept' ? '新增部门' : '新增下级部门',
              };
        return {
            breadcrumbData: [
                { title: '基础信息管理' },
                {
                    value: 'Beijing',
                    label: 'Beijing',
                    children: [
                        {
                            value: 'chaoyang',
                            label: 'Chaoyang',
                        },
                    ],
                    title: '组织架构',
                    click: () => {
                        setIsAddOrEdit(false);
                        setIsAddOrEditDept(false);
                    },
                },
                obj,
            ],
        },
        {
            value: 'shanghai',
            label: 'Shanghai',
            children: [
                {
                    value: 'shanghaishi',
                    label: 'Shanghai',
                    children: [
                        {
                            value: 'huangpu',
                            label: 'Huangpu',
                        },
                    ],
                },
            ],
        },
    ];

    function onSelect(dateString, date) {
        console.log('onSelect', dateString, date);
            title:
                isAddOrEditDept === 'addSubordinateDept' || isAddOrEditDept === 'changeDept'
                    ? deptEditData.name
                    : isAddOrEditDept
                    ? organizationActive.name
                    : organizationEditData.active.name,
            handleReturn: () => {
                setIsAddOrEdit(false);
                setIsAddOrEditDept(false);
            },
        };
    }

    function onChange(dateString, date) {
        console.log('onChange: ', dateString, date);
    }

    function onOk(dateString, date) {
        console.log('onOk: ', dateString, date);
    }


    function handleCheckParty() {
        console.log('check party');
    }


    const onReload = () => {
        console.log('表格数据刷新');
    };


    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                }
            >
                <RegisterTab tabs={tabs} activeKey={tabsActive} onChange={(activeKey) => setTabsActive(activeKey)} style={{ background: '#fff' }} />
                {tabsActive === '1' &&
                    <div style={{ backgroundColor: '#fff', margin: '8px 16px 0px 16px', padding: '12px 16px 16px 16px' }}>
                        <Col span={24} style={{ display: 'flex', alignItems: 'center' }}>
                            <Space size='small'>
                                <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>当事人信息</h5>
                            </Space>
                        </Col>
                        <div style={{ display: 'flex' }}>
                            <div style={{ flex: 3 }}>
                                <PersonCard
                                    isCheck={true}
                                    partyType={'applicant'} // 这里设定为申请人
                                    data={fakeData}
                                    handleCheckParty={handleCheckParty}
        <Page
            pageHead={
                isAddOrEdit || isAddOrEditDept
                    ? addOrEditBreadcrumb()
                    : { breadcrumbData: [{ title: '基础信息管理' }, { title: '组织架构' }], title: '组织架构' }
            }
        >
            <div style={{ display: isAddOrEdit || isAddOrEditDept ? 'none' : '' }} className="organization">
                <div className="organization-bg">
                    <div className="organization-side">
                        <Space size="middle" className="organization-side-search">
                            <Search
                                placeholder="请搜索组织"
                                value={organizationSearch.value}
                                onChange={(e) => setOrganizationSearch({ ...organizationSearch, value: e.target.value })}
                                onSearch={handleSearchOrganization}
                            />
                            <Tooltip title="刷新">
                                <ReloadOutlined style={{ fontSize: 16 }} className="public-a" onClick={() => getOrganization('', 'reset')} />
                            </Tooltip>
                        </Space>
                        <div className="organization-side-tree">
                            {organizationData.length > 0 ? (
                                <MyTree
                                    active={organizationActive.id}
                                    keyStr="id"
                                    nameStr="name"
                                    data={organizationData}
                                    searchValue={organizationSearch.searchValue}
                                    dropdownOption={dropdownOptions}
                                    isChildren={true}
                                    handleClickTreeNode={handleOrganization}
                                />
                            </div>
                            <div style={{ flex: 1, }}>
                                <Tooltip
                                    title={(<Space direction='vertical '><div style={{ backgroundColor: '#1A6FB8', padding: '5px 12px', display: 'flex', justifyContent: 'center' }}>申请方</div><div style={{ backgroundColor: '#FA8C16', padding: '5px 12px', display: 'flex', justifyContent: 'center' }}>被申请方</div><div style={{ backgroundColor: '#3491FA', padding: '5px 12px', display: 'flex', justifyContent: 'center' }}>代理人</div></Space>)}
                                    placement="right" color='#ffff' overlayStyle={{}}>
                                    <div onClick={() => setVisible(true)} style={{ backgroundColor: '#E5E6EB', borderRadius: '50%', width: '64px', height: '64px' }}>
                                        <img src={add} alt="添加" style={{ width: '32px', margin: '16px' }} />
                                    </div>
                                </Tooltip>
                            </div>
                        </div>
                        <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                            <Space size='small'>
                                <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>纠纷基本情况</h5>
                            </Space>
                        </Col>
                        <Form
                            layout='vertical'
                        >
                            <Row gutter={[32, 0]}>
                                <Col span={8}>
                                    <FormItem label='事项等级' field='username' tooltip={<div className='question'>Username is required </div>} >
                                        <Select defaultValue='三级' placeholder='Select city' allowClear>
                                            {['一级', '二级', '三级', '四级'].map((option, index) => (
                                                <Option key={option} value={option}>
                                                    {option}
                                                </Option>
                                            ))}
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='来访时间' >
                                        <DatePicker
                                            style={{ width: '100%' }}
                                            format='YYYY-MM-DD HH:mm'
                                            onChange={onChange}
                                            onSelect={onSelect}
                                            onOk={onOk}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='来访人数（人）'>
                                        <Input placeholder='请填写' />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem
                                        label={(<div style={{ display: 'flex' }}>纠纷类型<div className="must">必填</div></div>)}>
                                        <Select initialValue='Beijing' placeholder='请选择' allowClear>
                                            {['邻里纠纷', '劳动争议纠纷', '劳动纠纷', '经济纠纷'].map((option, index) => (
                                                <Option key={option} value={option}>
                                                    {option}
                                                </Option>
                                            ))}
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生时间<div className="must">必填</div></div>)}>
                                        <DatePicker
                                            style={{ width: '100%' }}
                                            placeholder='请选择'
                                            format='YYYY-MM-DD HH:mm'
                                            onChange={onChange}
                                            onSelect={onSelect}
                                            onOk={onOk}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生地点<div className="must">必填</div></div>)}>
                                        <InputSearch
                                            searchButton='选择'
                                            defaultValue='Search content'
                                            placeholder='选择纠纷发生地的详细地址'
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='问题属地'>
                                        <Cascader
                                            placeholder='Please select ...'
                                            options={options}
                                            onChange={(value, option) => {
                                                console.log(value, option);
                                            }}
                                            defaultValue={['shanghai', 'shanghaishi', 'huangpu']}
                                            allowClear
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='涉及人数（人）'>
                                        <Input placeholder='请填写' />
                                    </FormItem>
                                </Col>

                                <Col span={8}>
                                    <FormItem label='涉及金额（元）'>
                                        <Input placeholder='请填写' />
                                    </FormItem>
                                </Col>
                                <Col span={24}>
                                    <FormItem
                                        label={<div style={{ display: 'flex' }}>事项概况<Tooltip title='1111'><img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} /></Tooltip><div className="must">必填</div><div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px' }}>识别上传材料</div></div>}
                                    >
                                        <Input.TextArea
                                            maxLength={2000}
                                            showWordLimit
                                            rows={5}
                                            placeholder='请填写问题发生的起因、过程和结果'
                                            wrapperStyle={{ width: '100%' }}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={24}>
                                    <FormItem
                                        label={<div style={{ display: 'flex' }}>申请请求<Tooltip title='1111'><img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} /></Tooltip><div className="must">必填</div><div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px' }}>识别上传材料</div></div>}
                                    >
                                        <Input.TextArea
                                            maxLength={2000}
                                            showWordLimit
                                            rows={5}
                                            placeholder='希望相关部门如何处理，建议分条描述，如请求1，请求2...'
                                            wrapperStyle={{ width: '100%' }}
                                        />
                                    </FormItem>
                                </Col>
                                <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#EFF8FF', borderRadius: '2px' }}>
                                    <FormItem label='是否重大矛盾纠纷' style={{ marginBottom: '-20px' }}>
                                        <RadioGroup options={['A', 'B']} style={{ marginBottom: 20 }} />
                                    </FormItem>
                                </div>
                            </Row>

                        </Form>
                        <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
                            <Space size='small'>
                                <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>事件材料</h5>
                            </Space>
                        </Col>
                        <TableView
                            columns={fakeColumns}
                            dataSource={fakeData1}
                            size="small"
                            rowKey="id"
                            bordered={true}
                            style={{ marginBottom: '60px' }}
                        />
                        <div className="dataSync-excel">
                            <Space size="large" style={{ margin: '4px 14px' }}>
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>保存信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>预览信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>提交信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>自行受理</Button>
                                <Button type='secondary'>返回上级页面</Button>
                            </Space>
                            ) : (
                                $$.MyEmpty({ description: '抱歉！暂无组织数据，请先添加组织', style: { margin: '50px auto' } })
                            )}
                        </div>
                    </div>

                }
            </NewPage>

        </div>
    )
}
                    <div className="organization-divider"></div>
                    {organizationData.length > 0 ? (
                        <DepartmentTable
                            organizationActive={organizationActive}
                            departmentData={departmentData}
                            handlePersonnelModal={handlePersonnelModal}
                            handleChangeIsAddOrEdit={(type, record) => {
                                setIsAddOrEditDept(type);
                                setDeptEditData(record || {});
                            }}
                            handleDelDept={delDept}
                        />
                    ) : (
                        $$.MyEmpty({ description: '抱歉！暂无组织数据，请先添加组织', style: { margin: '100px auto' } })
                    )}
                </div>
            </div>
            {/* 新增 or 修改组织page */}
            <AddOrEditOrganization
                isAddOrEdit={isAddOrEdit}
                type={organizationEditData.type}
                organizationActive={organizationEditData.active}
                handleFinishForm={setOrganization}
            />
            {/* 新增 or 修改部门page */}
            <AddOrEditDept
                isAddOrEditDept={isAddOrEditDept}
                deptActive={deptEditData}
                unMatchUsers={organizationActive.unMatchUsers || []}
                handleFinishForm={setDept}
            />
            {/*  查看人员Modal */}
            {modalData.visible && <PersonnelModal modalData={modalData} handlePersonnelModal={handlePersonnelModal} handleSearch={getPersons} />}
        </Page>
    );
};

export default Organization;

 gz-customerSystem/src/views/basicInformation/organization/index.less

@@ -91,3 +91,5 @@
    background-color: @main-color;
}




 gz-customerSystem/src/views/register/index.less

New file
@@ -0,0 +1,64 @@
.line {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    height: 1px;
    transition: all 0.3s ease-in-out;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 1px;
        background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 1;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 1px;
        background-image: linear-gradient(currentColor 50%, transparent 50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 2;
    }
}

.left-line {
    width: 2%;
    top: 1px;
    background-color: #E5E6EB;
}

.middle-line {
    width: 3%;
    background-color: #1A6FB8;
    left: 1%;
}

.right-line {
    top: -1px;
    width: 95.97%;
    background-color: #E5E6EB;
    left: 4%;
}

.table {
    //width="100%" borderColor='#E5E6EB'

    width: 100%;
    border-color: #E5E6EB;

    &-title {
        color: #86909C;
    }
}

 gz-customerSystem/src/views/register/visit/index.jsx

@@ -1,18 +1,403 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 15:47:38
 * @Date: 2024-08-09 09:59:43
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-09 15:48:16
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\index.jsx
 * @Description: 大厅来访
 * @LastEditTime: 2024-08-13 16:05:42
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
 * @Description: 来访登记
 */
import React from 'react';

const Visit=()=>{
import React, { useState, useEffect } from "react";
import NewPage from '../../../components/NewPage';
import RegisterTab from '../../../components/registerTab';
import PersonCard from '../../../components/personCard';
import * as $$ from '../../../utils/utility';
import { add, question1 } from '../../../assets/images';
import { Row, Col, Space, Tooltip } from 'antd';
import { Form, Input, Button, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react';
import "@arco-design/web-react/dist/css/arco.css";
import TableView from '../../../components/TableView';
import Preview from './preview';
import '../index.less'

    return(
        <></>
    )
const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;



function getCaseDataApi(submitData) {
    return $$.ax.request({ url: `caseInfo/getCaseInfo?id=${submitData}`, type: 'get', service: 'mediate' });
}

export default Visit;


const Organization = () => {


    // tabs当前选择的标签信息
    const [tabsActive, setTabsActive] = useState('1');
    const [visible, setVisible] = useState(false);
    const [preview, setPreview] = useState(false);

    const tabs = [
        { label: '事件登记', key: '1' },
        { label: '事件流转', key: '2' },
        { label: '办理反馈', key: '3' },
        { label: '申请结案', key: '4' },
        { label: '当事人评价', key: '5' },
        { label: '结案归档', key: '6', img1: true },

    ];


    const fakeData = [
        {
            id: 3,
            perClassName: '申请方当事人',
            trueName: '蓝海科技有限公司',
            mobile: '13800000002',
            agentStatus: '1', // 无代理人
            company: true
        },
        {
            id: 1,
            perClassName: '申请方代理人',
            trueName: '王小明',
            mobile: '13800000001',
            agentStatus: '2', // 有代理人
            person: true
        },
        {
            id: 2,
            perClassName: '被申请方当事人',
            trueName: '蓝海科技有限公司',
            mobile: '13800000002',
            agentStatus: '1', // 无代理人
            person: true,
            Respondent: true
        },

    ];

    const fakeData1 = [
        {
            id: 1,
            caseNo: 'A20230101',
            judicNo: 'J20230101',
            perClassName: '自然人',
            inputUserName: '张三',
            mediateUserName: '李四',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
            returnUserName: '孙八',
            expireTime: '2023-08-10T08:00:00.000Z',
            processName: '进行中',
            otherMediator: '周九',
            canalName: '网络',
            judicResult: '通过',
            assistName: '吴十',
            mediTypeName: '民事调解',
            serieStatus: '1', // 1 表示非系列案，2 表示系列案
            // 更多字段...
        },
        // 更多数据...
    ];

    // 列配置
    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
        },
        {
            title: '材料数量',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '材料名称',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '上传时间',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '操作',
            dataIndex: 'perClassName',
            key: 'perClassName',
            render: (text) => (
                <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
                    <div>查看</div>
                    <div>删除</div>
                    <div>下载</div>
                    <div>上传</div>
                </div>
            )
        },
        // 更多列配置...
    ];

    const options = [
        {
            value: 'beijing',
            label: 'Beijing',
            children: [
                {
                    value: 'Beijing',
                    label: 'Beijing',
                    children: [
                        {
                            value: 'chaoyang',
                            label: 'Chaoyang',
                        },
                    ],
                },
            ],
        },
        {
            value: 'shanghai',
            label: 'Shanghai',
            children: [
                {
                    value: 'shanghaishi',
                    label: 'Shanghai',
                    children: [
                        {
                            value: 'huangpu',
                            label: 'Huangpu',
                        },
                    ],
                },
            ],
        },
    ];

    function onSelect(dateString, date) {
        console.log('onSelect', dateString, date);
    }

    function onChange(dateString, date) {
        console.log('onChange: ', dateString, date);
    }

    function onOk(dateString, date) {
        console.log('onOk: ', dateString, date);
    }


    function handleCheckParty() {
        console.log('check party');
    }


    const onReload = () => {
        console.log('表格数据刷新');
    };


    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                }
            >
                <RegisterTab tabs={tabs} activeKey={tabsActive} onChange={(activeKey) => setTabsActive(activeKey)} style={{ background: '#fff' }} />
                {tabsActive === '1' && !preview &&
                    <div style={{ backgroundColor: '#fff', margin: '8px 16px 0px 16px', padding: '12px 16px 16px 16px' }}>
                        <Col span={24} style={{ display: 'flex', alignItems: 'center' }}>
                            <Space size='small'>
                                <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
                            </Space>
                        </Col>
                        <div style={{ display: 'flex' }}>
                            <div style={{ flex: 3 }}>
                                <PersonCard
                                    isCheck={true}
                                    partyType={'applicant'} // 这里设定为申请人
                                    data={fakeData}
                                    handleCheckParty={handleCheckParty}
                                />
                            </div>
                            <div style={{ flex: 1, }}>
                                <Tooltip
                                    title={(<Space direction='vertical '><div style={{ backgroundColor: '#1A6FB8', padding: '5px 12px', display: 'flex', justifyContent: 'center' }}>申请方</div><div style={{ backgroundColor: '#FA8C16', padding: '5px 12px', display: 'flex', justifyContent: 'center' }}>被申请方</div><div style={{ backgroundColor: '#3491FA', padding: '5px 12px', display: 'flex', justifyContent: 'center' }}>代理人</div></Space>)}
                                    placement="right" color='#ffff' overlayStyle={{}}>
                                    <div onClick={() => setVisible(true)} style={{ backgroundColor: '#E5E6EB', borderRadius: '50%', width: '64px', height: '64px' }}>
                                        <img src={add} alt="添加" style={{ width: '32px', margin: '16px' }} />
                                    </div>
                                </Tooltip>
                            </div>
                        </div>
                        <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                            <Space size='small'>
                                <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5>
                            </Space>
                        </Col>
                        <Form
                            layout='vertical'
                        >
                            <Row gutter={[32, 0]}>
                                <Col span={8}>
                                    <FormItem label='事项等级' field='username' tooltip={<div className='question'>Username is required </div>} >
                                        <Select defaultValue='三级' placeholder='Select city' allowClear>
                                            {['一级', '二级', '三级', '四级'].map((option, index) => (
                                                <Option key={option} value={option}>
                                                    {option}
                                                </Option>
                                            ))}
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='来访时间' >
                                        <DatePicker
                                            style={{ width: '100%' }}
                                            format='YYYY-MM-DD HH:mm'
                                            onChange={onChange}
                                            onSelect={onSelect}
                                            onOk={onOk}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='来访人数（人）'>
                                        <Input placeholder='请填写' />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem
                                        label={(<div style={{ display: 'flex' }}>纠纷类型<div className="must">必填</div></div>)}>
                                        <Select initialValue='Beijing' placeholder='请选择' allowClear>
                                            {['邻里纠纷', '劳动争议纠纷', '劳动纠纷', '经济纠纷'].map((option, index) => (
                                                <Option key={option} value={option}>
                                                    {option}
                                                </Option>
                                            ))}
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生时间<div className="must">必填</div></div>)}>
                                        <DatePicker
                                            style={{ width: '100%' }}
                                            placeholder='请选择'
                                            format='YYYY-MM-DD HH:mm'
                                            onChange={onChange}
                                            onSelect={onSelect}
                                            onOk={onOk}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生地点<div className="must">必填</div></div>)}>
                                        <InputSearch
                                            searchButton='选择'
                                            defaultValue='Search content'
                                            placeholder='选择纠纷发生地的详细地址'
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='问题属地'>
                                        <Cascader
                                            placeholder='Please select ...'
                                            options={options}
                                            onChange={(value, option) => {
                                                console.log(value, option);
                                            }}
                                            defaultValue={['shanghai', 'shanghaishi', 'huangpu']}
                                            allowClear
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='涉及人数（人）'>
                                        <Input placeholder='请填写' />
                                    </FormItem>
                                </Col>

                                <Col span={8}>
                                    <FormItem label='涉及金额（元）'>
                                        <Input placeholder='请填写' />
                                    </FormItem>
                                </Col>
                                <Col span={24}>
                                    <FormItem
                                        label={<div style={{ display: 'flex' }}>事项概况<Tooltip title='1111'><img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} /></Tooltip><div className="must">必填</div><div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px' }}>识别上传材料</div></div>}
                                    >
                                        <Input.TextArea
                                            maxLength={2000}
                                            showWordLimit
                                            rows={5}
                                            placeholder='请填写问题发生的起因、过程和结果'
                                            wrapperStyle={{ width: '100%' }}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={24}>
                                    <FormItem
                                        label={<div style={{ display: 'flex' }}>申请请求<Tooltip title='1111'><img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} /></Tooltip><div className="must">必填</div><div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px' }}>识别上传材料</div></div>}
                                    >
                                        <Input.TextArea
                                            maxLength={2000}
                                            showWordLimit
                                            rows={5}
                                            placeholder='希望相关部门如何处理，建议分条描述，如请求1，请求2...'
                                            wrapperStyle={{ width: '100%' }}
                                        />
                                    </FormItem>
                                </Col>
                                <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#EFF8FF', borderRadius: '2px' }}>
                                    <FormItem label='是否重大矛盾纠纷' style={{ marginBottom: '-20px' }}>
                                        <RadioGroup options={['A', 'B']} style={{ marginBottom: 20 }} />
                                    </FormItem>
                                </div>
                            </Row>

                        </Form>
                        <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
                            <Space size='small'>
                                <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>事件材料</h5>
                            </Space>
                        </Col>
                        <TableView
                            columns={fakeColumns}
                            dataSource={fakeData1}
                            size="small"
                            rowKey="id"
                            bordered={true}
                            style={{ marginBottom: '60px' }}
                        />
                        <div className="dataSync-excel">
                            <Space size="large" style={{ margin: '4px 14px' }}>
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>保存信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => setPreview(true)}>预览信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>提交信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>自行受理</Button>
                                <Button type='secondary'>返回上级页面</Button>
                            </Space>
                        </div>
                    </div>

                }
                {preview && <Preview />}
            </NewPage>

        </div>
    )
}

export default Organization;

 gz-customerSystem/src/views/register/visit/preview.jsx

New file
@@ -0,0 +1,290 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-13 15:19:57
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-13 21:01:07
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx
 * @Description: 预览信息
 */
import React from "react";
import { Row, Col, Space } from 'antd';
import { person, question } from '../../../assets/images'
import '../index.less';
import TableView from '../../../components/TableView';



const Preview = () => {

    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
        },
        {
            title: '材料数量',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '材料名称',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '上传时间',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '操作',
            dataIndex: 'perClassName',
            key: 'perClassName',
            render: (text) => (
                <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
                    <div>查看</div>
                    <div>删除</div>
                    <div>下载</div>
                    <div>上传</div>
                </div>
            )
        },
        // 更多列配置...
    ];

    const fakeData1 = [
        {
            id: 1,
            caseNo: 'A20230101',
            judicNo: 'J20230101',
            perClassName: '自然人',
            inputUserName: '张三',
            mediateUserName: '李四',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
            returnUserName: '孙八',
            expireTime: '2023-08-10T08:00:00.000Z',
            processName: '进行中',
            otherMediator: '周九',
            canalName: '网络',
            judicResult: '通过',
            assistName: '吴十',
            mediTypeName: '民事调解',
            serieStatus: '1', // 1 表示非系列案，2 表示系列案
            // 更多字段...
        },
        // 更多数据...
    ];



    return (
        <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px 18px 16px 16px' }}>
            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
                <Space size='small'>
                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
                </Space>
            </Col>
            <div style={{ marginBottom: '8px' }}>申请方</div>
            <div className="line-container" style={{ marginBottom: '20px' }}>
                <div className="line left-line"></div>
                <div className="line middle-line"></div>
                <div className="line right-line"></div>
            </div>
            <table border="1" align="center" cellpadding="8" className="table">
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">姓名</th>
                    <td>豪豪豪</td>
                    <th bgcolor="#F7F8FA" className="table-title">联系方式</th>
                    <td>19</td>
                    <th bgcolor="#F7F8FA" className="table-title">性别</th>
                    <td>汉</td>
                    <td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
                        <img border="0" src={person} alt="" style={{ width: '100%', height: '100%' }} />
                    </td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">证件类型</th>
                    <td>19970000</td>
                    <th bgcolor="#F7F8FA" className="table-title">证件号码</th>
                    <td>团员</td>
                    <th bgcolor="#F7F8FA" className="table-title">民族</th>
                    <td>本科</td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">联系地址</th>
                    <td>网络工程</td>
                    <th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
                    <td>淮南师范学院</td>
                    <th bgcolor="#F7F8FA" className="table-title" rowspan="2" >是否有个人极端倾向</th>
                    <td rowspan="2" >237483</td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">工作单位</th>
                    <td>玩，拆，装</td>
                    <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
                    <td>皖</td>
                </tr>
            </table>
            <table border="1" align="center" cellpadding="8" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">姓名</th>
                    <td>豪豪豪</td>
                    <th bgcolor="#F7F8FA" className="table-title">联系方式</th>
                    <td>19</td>
                    <th bgcolor="#F7F8FA" className="table-title">性别</th>
                    <td>汉</td>
                    <td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
                        <img border="0" src={person} alt="" style={{ width: '100%', height: '100%' }} />
                    </td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">证件类型</th>
                    <td>19970000</td>
                    <th bgcolor="#F7F8FA" className="table-title">证件号码</th>
                    <td>团员</td>
                    <th bgcolor="#F7F8FA" className="table-title">民族</th>
                    <td>本科</td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">联系地址</th>
                    <td>网络工程</td>
                    <th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
                    <td>淮南师范学院</td>
                    <th bgcolor="#F7F8FA" className="table-title" >是否有个人极端倾向</th>
                    <td>237483</td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">工作单位</th>
                    <td>玩，拆，装</td>
                    <th bgcolor="#F7F8FA" className="table-title">委托关系</th>
                    <td>皖</td>
                    <th bgcolor="#F7F8FA" className="table-title">委托类型</th>
                    <td>皖</td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">代理对象</th>
                    <td>玩，拆，装</td>
                    <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
                    <td>皖</td>
                    <th bgcolor="#F7F8FA" className="table-title">代理人授权委托书</th>
                    <td>皖</td>
                </tr>

            </table>
            <div style={{ marginBottom: '8px' }}>被申请方</div>
            <div className="line-container" style={{ marginBottom: '20px' }}>
                <div className="line left-line"></div>
                <div className="line middle-line"></div>
                <div className="line right-line"></div>
            </div>
            <table border="1" align="center" cellpadding="8" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">企业名称</th>
                    <td>豪豪豪</td>
                    <th bgcolor="#F7F8FA" className="table-title">联系方式</th>
                    <td>19</td>
                    <th bgcolor="#F7F8FA" className="table-title">企业所在地</th>
                    <td>汉</td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">企业类型</th>
                    <td>19970000</td>
                    <th bgcolor="#F7F8FA" className="table-title">法定代表人</th>
                    <td>团员</td>
                    <th bgcolor="#F7F8FA" className="table-title">统一社会信用代码</th>
                    <td>本科</td>
                </tr>
                <tr>
                    <th bgcolor="#F7F8FA" className="table-title">住所</th>
                    <td>网络工程</td>
                    <th bgcolor="#F7F8FA" className="table-title">企业登记材料</th>
                    <td>淮南师范学院</td>
                    <th bgcolor="#F7F8FA" className="table-title" >法定代表人身份证明材料</th>
                    <td>237483</td>
                </tr>
            </table>
            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
                <Space size='small'>
                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5>
                </Space>
            </Col>
            <Row gutter={[16, 16]}>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>事项等级</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                    <div>3级</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>来访时间</div></div>
                    <div>2024-7-12 10:00</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>来访人数（人）</div></div>
                    <div>2</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>纠纷类型</div></div>
                    <div>市场监管/金融纠纷</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>纠纷发生时间</div></div>
                    <div>2024-7-11</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>纠纷发生地点</div></div>
                    <div>广州市天河区中山七路康王柏德来商业城</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>问题属地</div></div>
                    <div>广州市/天河区/棠下街道</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>涉及人数（人）</div></div>
                    <div>2</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>涉及金额（元）</div></div>
                    <div>20，000</div>
                </Col>
                <Col span={8}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>事项来源</div></div>
                    <div>大厅来访</div>
                </Col>
                <Col span={16}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>来访形式</div></div>
                    <div>来访</div>
                </Col>
                <Col span={24}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>事项概况</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                </Col>
                <Col span={24}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>事项申请</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                </Col>
                <Col span={16}>
                    <div style={{ display: 'flex' }}><div style={{ color: '#86909C' }}>是否重大矛盾纠纷</div></div>
                    <div>否</div>
                </Col>
            </Row>
            <TableView
                columns={fakeColumns}
                dataSource={fakeData1}
                size="small"
                rowKey="id"
                bordered={true}
                style={{ marginBottom: '60px' }}
            />

        </div>
    )
}

export default Preview