From 5985afbb3372881cf867ed32eed5bec8434e8182 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Tue, 13 Aug 2024 09:32:51 +0800 Subject: [PATCH] 来访登记 --- gz-customerSystem/src/views/basicInformation/organization/index.jsx | 722 ++++++++++++++++++++++++++++--------------------------- 1 files changed, 368 insertions(+), 354 deletions(-) diff --git a/gz-customerSystem/src/views/basicInformation/organization/index.jsx b/gz-customerSystem/src/views/basicInformation/organization/index.jsx index 86858dc..67d987c 100644 --- a/gz-customerSystem/src/views/basicInformation/organization/index.jsx +++ b/gz-customerSystem/src/views/basicInformation/organization/index.jsx @@ -1,386 +1,400 @@ /* - * @Company: hugeInfo - * @Author: ldh - * @Date: 2022-02-18 15:04:13 - * @LastEditTime: 2024-08-06 15:57:16 + * @Author: dminyi 1301963064@qq.com + * @Date: 2024-08-09 09:59:43 * @LastEditors: dminyi 1301963064@qq.com - * @Version: 1.0.0 - * @Description: 组织架构 + * @LastEditTime: 2024-08-12 20:30:15 + * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx + * @Description: 来访登记 */ -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 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'; -const { Search } = Input; +const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 +const FormItem = Form.Item; +const Option = Select.Option; +const InputSearch = Input.Search; -// 查询人员信息 -function getPersonsApi(data) { - return $$.ax.request({ url: 'ctUser/pageQuery', type: 'get', data, service: 'cust' }); + + +function getCaseDataApi(submitData) { + return $$.ax.request({ url: `caseInfo/getCaseInfo?id=${submitData}`, type: 'get', service: 'mediate' }); } -// 获取组织结构 -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); - // 查看人员modal - const [modalData, setModalData] = useState({ visible: false, title: '', data: [], total: 0 }); + // tabs当前选择的标签信息 + const [tabsActive, setTabsActive] = useState('1'); + const [visible, setVisible] = useState(false); + const [selectedCity, setSelectedCity] = useState('Beijing'); - // 组织数据 - const [organizationData, setOrganizationData] = useState([]); + const tabs = [ + { label: '事件登记', key: '1' }, + { label: '事件流转', key: '2' }, + { label: '办理反馈', key: '3' }, + { label: '申请结案', key: '4' }, + { label: '当事人评价', key: '5' }, + { label: '结案归档', key: '6', img1: true }, - // 当前选择组织 - const [organizationActive, setOrganizationActive] = useState({}); + ]; - // 新增 or 修改组织数据 - const [organizationEditData, setOrganizationEditData] = useState({ active: {} }); - // 新增 or 修改部门数据 - const [deptEditData, setDeptEditData] = useState({}); + 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 [organizationSearch, setOrganizationSearch] = useState({ value: '', searchValue: '' }); + ]; - // 当前选择组织下的部门数据 - const [departmentData, setDepartmentData] = useState([]); + 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 表示系列案 + // 更多字段... + }, + // 更多数据... + ]; - // 选择组织 - function handleOrganization(value) { - getDepartmentData({ organizationId: value.id }); - } + // 列配置 + 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 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: '基础信息管理' }, + const options = [ + { + value: 'beijing', + label: 'Beijing', + children: [ { - title: '组织架构', - click: () => { - setIsAddOrEdit(false); - setIsAddOrEditDept(false); - }, + value: 'Beijing', + label: 'Beijing', + children: [ + { + value: 'chaoyang', + label: 'Chaoyang', + }, + ], }, - obj, ], - title: - isAddOrEditDept === 'addSubordinateDept' || isAddOrEditDept === 'changeDept' - ? deptEditData.name - : isAddOrEditDept - ? organizationActive.name - : organizationEditData.active.name, - handleReturn: () => { - setIsAddOrEdit(false); - setIsAddOrEditDept(false); - }, - }; + }, + { + 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 ( - <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 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} /> - ) : ( - $$.MyEmpty({ description: '抱歉!暂无组织数据,请先添加组织', style: { margin: '50px auto' } }) - )} + </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> </div> </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> - ); -}; + + } + </NewPage> + + </div> + ) +} export default Organization; -- Gitblit v1.8.0