gz-customerSystem/src/components/personCard/index.jsx | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/styles/public.less | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/index.less | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/visit/index.jsx | ●●●●● patch | view | raw | blame | history |
gz-customerSystem/src/components/personCard/index.jsx
@@ -18,7 +18,7 @@ * handleCheckParty, // 点击查看详情 * handleDeleteParty, // 删除当事人 */ const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty }) => { const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd }) => { return ( <Row gutter={[24, 16]}> @@ -68,11 +68,11 @@ <div className="dataSync-addBtn"> <Tooltip title={(<Space direction='vertical '> <div className="dataSync-btnApply" style={{ backgroundColor: '#1A6FB8' }}>申请方</div> <div className="dataSync-btnApply" style={{ backgroundColor: '#FA8C16' }}>被申请方</div> <div className="dataSync-btnApply" style={{ backgroundColor: '#3491FA' }}>代理人</div> <div className="dataSync-btnApply" style={{ backgroundColor: '#1A6FB8' }} onClick={() => {handleAdd(0)}}>申请方</div> <div className="dataSync-btnApply" style={{ backgroundColor: '#FA8C16' }} onClick={() => {handleAdd(1)}}>被申请方</div> <div className="dataSync-btnApply" style={{ backgroundColor: '#3491FA' }} onClick={() => {handleAdd(2)}}>代理人</div> </Space>)} placement={data.length % 3 === 0 ? 'left' : "right"} placement={data.length !== 0 && data.length % 3 === 0 ? 'left' : "right"} color='#ffff' overlayStyle={{}} > gz-customerSystem/src/styles/public.less
@@ -1,8 +1,10 @@ @import './theme.less'; @font-face { font-family: siYuanHeiTi; src: url('../assets/font/SourceHanSansCN-Regular-2.otf'); } @font-face { font-family: AlibabaPuHuiTi; src: url('../assets/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf'); @@ -94,9 +96,11 @@ height: 8px; background-color: #dfdfdf; } ::-webkit-scrollbar-track { background-color: @bg-color; } ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #dfdfdf; @@ -255,6 +259,7 @@ .public-span { position: relative; &::before { content: ''; position: absolute; @@ -742,3 +747,72 @@ color: #ffcf5c; font-size: 22px; } //字节弹窗 .arco-modal { border-radius: 0; width: 900px; .arco-modal-header { padding: 0 16px; .arco-modal-title { text-align: left; font-size: 16px; font-family: PingFang SC, PingFang SC-400; font-weight: 400; color: #1d2129; } } .arco-modal-content { padding: 16px; max-height: 700px; } .arco-modal-close-icon { width: 20px; height: 20px; background: #86909C; border-radius: 50%; top: 14px; right: 16px; .arco-icon { color: #fff; width: 16px; height: 16px; left: 2px; top: 2px; } &:hover { .arco-icon { color: #86909C; } } } } //弹窗底部按钮 .dialogFooter { width: 100%; margin-top: 16px; display: flex; justify-content: flex-start; align-items: center; .dialogPrimary { margin-right: 16px; } .dialogBack {} } .arco-btn-primary:not(.arco-btn-disabled) { background-color: @main-color; &:hover { background-color: @main-color; } } gz-customerSystem/src/views/register/index.less
@@ -99,10 +99,8 @@ } &-addBtn { // width: 150px; // display: flex; // justify-content: center; cursor: pointer; padding: 8px; } &-btnApply { @@ -123,5 +121,6 @@ align-items: center; justify-content: space-between; box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.25); z-index: 1; } } gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
New file @@ -0,0 +1,23 @@ import React from 'react' import { Form, Input, Button, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react'; export default function applyDialog(props) { return ( <div> <div style={{ height: '590px', overflowY: 'scroll' }}> </div> <div className='dialogFooter'> <Button type="primary" className="dialogPrimary" > 保存信息 </Button> <Button className="dialogBack"> 重置 </Button> </div> </div> ) } gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
File was renamed from gz-customerSystem/src/views/register/visit/visitorRegister.jsx @@ -1,14 +1,16 @@ import React, { useState, useEffect, useRef } from "react"; import PersonCard from '../../../components/personCard'; import * as $$ from '../../../utils/utility'; import { question1, image } from '../../../assets/images'; import { Row, Col, Space, Tooltip, Button } from 'antd'; import { Form, Input, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react'; import { Form, Input, Radio, Select, DatePicker, Cascader,Modal } from '@arco-design/web-react'; import "@arco-design/web-react/dist/css/arco.css"; import TableView from '../../../components/TableView'; import MyModal from '../../../components/MyModal'; import MyUpload from '../../../components/MyUpload'; import '../index.less'; import MyModal from '../../../../components/MyModal'; import MyUpload from '../../../../components/MyUpload'; import PersonCard from '../../../../components/personCard'; import * as $$ from '../../../../utils/utility'; import { question1,image } from '../../../../assets/images'; import "@arco-design/web-react/dist/css/arco.css"; import TableView from '../../../../components/TableView'; import '../../index.less'; import ApplyDialog from "./applyDialog"; const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; @@ -16,14 +18,13 @@ const InputSearch = Input.Search; function getCaseDataApi(submitData) { return $$.ax.request({ url: `caseInfo/getCaseInfo?id=${submitData}`, type: 'get', service: 'mediate' }); } const VisitorRegister = (props) => { const [dialogType, setDialogType] = useState(0);//添加当事人的类型 const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 const Organization = () => { const formRef = useRef(); const [scanFile, setScanFile] = useState(false); const [filesList, setFilesList] = useState([]); @@ -90,6 +91,11 @@ remark: [{ label: '精神障碍', color: '#C64FBE' }] }, ]; const peopleMap = { 0: '申请方', 1: '被申请方', 2: '代理人' } const fakeData1 = [ { @@ -196,13 +202,12 @@ }, ]; function handleCheckParty() { const handleCheckParty = () => { console.log('check party'); } //获取当前时间 function getFormattedDateTime() { const getFormattedDateTime = () => { let now = new Date(); let year = now.getFullYear(); let month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的,所以要+1 @@ -213,19 +218,10 @@ return `${year}-${month}-${day} ${hours}:${minutes}`; } //保存信息 const handleSubmit = async () => { if (formRef.current) { try { await formRef.current.validate((errors, values) => { console.log(errors, values); }); // Message.info('校验通过,提交成功!'); } catch (_) { console.log(formRef.current.getFieldsError()); // Message.error('校验失败,请检查字段!'); } } //添加申请人: 0、被申请人: 1、代理人: 2 const handleAdd = (type) => { setDialogType(type) setAddVisabled(true) } function handleChangeFile() { @@ -239,12 +235,13 @@ <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>当事人信息</h5> </Space> </Col> <div> <div style={{ margin: '16px 0' }}> <PersonCard isCheck={true} partyType={'applicant'} // 这里设定为申请人 data={fakeData} handleCheckParty={handleCheckParty} handleAdd={handleAdd} /> </div> <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}> @@ -253,7 +250,7 @@ </Space> </Col> <Form ref={formRef} ref={props.formRef} layout='vertical' requiredSymbol={false} initialValues={{ @@ -464,8 +461,20 @@ <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>上传完成</Button></div> </MyModal> <Modal title={'添加' + peopleMap[dialogType]} visible={addVisabled} onOk={() => setAddVisabled(false)} onCancel={() => setAddVisabled(false)} autoFocus={false} focusLock={true} footer={null} // style={{ width: '1000px' }} > <ApplyDialog /> </Modal> </div> ) } export default Organization; export default VisitorRegister; gz-customerSystem/src/views/register/visit/index.jsx
@@ -2,7 +2,7 @@ * @Author: dminyi 1301963064@qq.com * @Date: 2024-08-09 09:59:43 * @LastEditors: dminyi 1301963064@qq.com * @LastEditTime: 2024-08-14 15:30:40 * @LastEditTime: 2024-08-15 11:46:01 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx * @Description: 来访登记 */ @@ -13,9 +13,9 @@ import * as $$ from '../../../utils/utility'; import "@arco-design/web-react/dist/css/arco.css"; import '../index.less'; import { message, Space } from 'antd'; import { Space } from 'antd'; import {Button } from '@arco-design/web-react'; import VisitorRegister from './visitorRegister'; import VisitorRegister from './component/visitorRegister'; import Preview from './preview'; @@ -27,8 +27,9 @@ const Organization = () => { // tabs当前选择的标签信息 const [tabsActive, setTabsActive] = useState('1'); const formRef = useRef(); const [tabsActive, setTabsActive] = useState('1');// tabs当前选择的标签信息 const [isReview, setIsReview] = useState(false);//预览页面控制 const tabs = [ @@ -41,9 +42,21 @@ ]; //保存信息 //提交信息,需要校验规则 const handleSubmit = async () => { message.success({top:100, content: (<><span style={{fontSize:'16px',fontWeight:'bold'}}>登记成功</span><div>大厅来访登记成功</div></>),}) if (formRef.current) { formRef.current.validate(undefined, (errors, values) => { console.log(errors, values); }); } } //保存草稿信息,不需要校验规则 const handleSave = async () => { if (formRef.current) { const data = formRef.current.getFields() console.log(data); } } //预览信息 @@ -79,10 +92,10 @@ <RegisterTab tabs={tabs} activeKey={tabsActive} onChange={(activeKey) => setTabsActive(activeKey)} style={{ background: '#fff' }} /> {tabsActive === '1' && <Fragment> {isReview ? <Preview /> : <VisitorRegister />} {isReview ? <Preview /> : <VisitorRegister formRef={formRef} />} <div className="dataSync-excel"> <Space size="large" style={{ margin: '4px 14px' }}> <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} >保存信息</Button> <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存信息</Button> <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览信息</Button> <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交信息</Button> <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>