From 811e2053360a317cf866ec6ed225ff1b49cba54e Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Mon, 19 Aug 2024 19:53:33 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 34 +++++-- gz-customerSystem/src/views/register/visit/component/agentDialog.jsx | 48 ++++++++++-- gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 98 +++++++----------------- gz-customerSystem/src/components/personCard/index.jsx | 37 +++++++-- 4 files changed, 120 insertions(+), 97 deletions(-) diff --git a/gz-customerSystem/src/components/personCard/index.jsx b/gz-customerSystem/src/components/personCard/index.jsx index 30a1438..fbc1e78 100644 --- a/gz-customerSystem/src/components/personCard/index.jsx +++ b/gz-customerSystem/src/components/personCard/index.jsx @@ -19,40 +19,59 @@ * handleDeleteParty, // 删除当事人 */ const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd }) => { - + let isAgent = false + const typeList = data.map(item => { + return item.partyType + })//获取有多少申请人和被申请人 + if (typeList.indexOf(0) != -1 && typeList.indexOf(1) != -1) { + isAgent = true + } return ( <Row gutter={[24, 16]}> {data.map((x, t) => ( <Col span={7} key={t}> <div className="public-personCard" style={{ cursor: 'pointer' }}> <div - className={`public-personCard-card public-personCard-card-${x.partyType === 'applicant' ? 'blue' : 'orange'}`} + className={`public-personCard-card public-personCard-card-${x.partyType === 0 ? 'blue' : 'orange'}`} onClick={() => handleCheckParty(x)} > {x.trueName.substr(0, 1)} <div className="public-personCard-card-check">查看</div> - <img src={del} alt='' style={{ width: '16px', height: '16px', position: 'absolute', top: '-8px', left: '56px' }} /> + <img + src={del} + alt='' + style={{ width: '16px', height: '16px', position: 'absolute', top: '-8px', left: '56px' }} + onClick={(event) => { handleDeleteParty(event, x) }} + /> </div> <div className="public-personCard-content"> <div className="public-personCard-title"> <Text style={{ maxWidth: '80%', paddingRight: '8px' }} ellipsis={{ tooltip: x.trueName }}> {x.trueName} </Text> - <Text ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${x.partyType === 'applicant' ? 'blue' : 'orange'}`}> + <Text ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${x.partyType === 0 ? 'blue' : 'orange'}`}> {x.perClassName} </Text> </div> { - x.person && + x.perClass === '09_01001-1' && <> <div>证件号码:{x.mobile}</div> <div>联系方式:{x.personNumber}</div> </> } - {x.company && + { + x.perClass === '09_01001-2' && <> <div>统一社会信用代码:{x.mobile}</div> <div>法定代表人:{x.companyName}</div> + </> + } + { + x.perClass === '09_01001-3' && + <> + <div>组织机构代码:{x.mobile}</div> + <div>机构代表人:{x.companyName}</div> </> } <Space style={{ display: 'flex', flexWrap: 'wrap' }}> @@ -68,9 +87,9 @@ <div className="dataSync-addBtn"> <Tooltip title={(<Space direction='vertical '> - <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> + <div className="dataSync-btnApply" style={{ backgroundColor: '#1A6FB8' }} onClick={() => { handleAdd(0) }}>申请方</div> + <div className="dataSync-btnApply" style={{ backgroundColor: '#FA8C16' }} onClick={() => { handleAdd(1) }}>被申请方</div> + {isAgent && <div className="dataSync-btnApply" style={{ backgroundColor: '#3491FA' }} onClick={() => { handleAdd(2) }}>代理人</div>} </Space>)} placement={data.length !== 0 && data.length % 3 === 0 ? 'left' : "right"} color='#ffff' diff --git a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx index 684f9a7..0f92863 100644 --- a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx +++ b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx @@ -13,13 +13,29 @@ const CheckboxGroup = Checkbox.Group; export default function AgentDialog(props) { + const formRef = useRef(); + + //保存信息 + const handleSave = () => { + if (formRef.current) { + formRef.current.validate(undefined, (errors, values) => { + props.handleAddParty({ + ...values, + // partyType: props.dialogType, + // perClass: perClass, + // perClassName: props.dialogType === 0 ? '申请方代理人' : '被申请方当事人' + }) + props.onClose() + }); + } + } return ( <div className="applyDialog"> <div style={{ height: '590px', overflowY: 'scroll' }}> <Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}> <Col span={24}> <Form - ref={props.formRef} + ref={formRef} layout='vertical' requiredSymbol={false} initialValues={{ @@ -64,7 +80,8 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)} - field='name' + field='trueName' + rules={[{ required: true, message: '请输入姓名' }]} > <Input placeholder='请填写' /> </FormItem> @@ -72,7 +89,11 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)} - field='phone' + field='personNumber' + rules={[ + { required: true, message: '请输入联系方式' }, + { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' }, + ]} > <Input placeholder='请填写' /> </FormItem> @@ -80,7 +101,8 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)} - field='zhengjian' + field='docType' + rules={[{ required: true, message: '请选择证件类型' }]} > <Select placeholder='请选择' allowClear> {['居民身份证',].map((option, index) => ( @@ -94,8 +116,11 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)} - rules={[{ required: true }]} - field='peopleNumber' + rules={[ + { required: true, message: '请输入证件号码' }, + { match: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X)$/, message: '请输入正确的证件号码' } + ]} + field='mobile' > <InputSearch searchButton='读取卡证' @@ -190,7 +215,14 @@ rules={[{ required: true }]} field='dailimap' > - <CheckboxGroup direction='vertical' options={['张三丰', '广东好又多贸易有限公司', '广东科贸创意有限公司']} /> + <CheckboxGroup + direction='vertical' + options={props.fakeData.map(x => ({ + label: <span>{x.trueName} <span style={{ color: '#86909c' }}>({x.perClassName})</span></span>, + value: x.id, + }))} + > + </CheckboxGroup> </FormItem> </Col> </Row> @@ -207,7 +239,7 @@ <Button type="primary" className="dialogPrimary" - // onClick={handleSave} + onClick={handleSave} > 保存信息 </Button> diff --git a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx index 582ff74..57e321f 100644 --- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx +++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx @@ -28,7 +28,7 @@ const formRef = useRef(); const [perClass, setPerClass] = useState('09_01001-1'); const [visible, setVisible] = useState(false); - + const personIconType = (v) => { switch (v) { @@ -69,7 +69,7 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)} - field='name' + field='trueName' rules={[{ required: true, message: '请输入姓名' }]} > <Input placeholder='请填写' /> @@ -78,8 +78,11 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)} - field='phone' - rules={[{ required: true, message: '请输入联系方式' }]} + field='personNumber' + rules={[ + { required: true, message: '请输入联系方式' }, + { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' }, + ]} > <Input placeholder='请填写' /> </FormItem> @@ -102,8 +105,11 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)} - rules={[{ required: true, message: '请输入证件号码' }]} - field='peopleNumber' + rules={[ + { required: true, message: '请输入证件号码' }, + { match: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X)$/, message: '请输入正确的证件号码' } + ]} + field='mobile' > <InputSearch searchButton='读取卡证' @@ -207,7 +213,7 @@ <FormItem label={isLegal ? '企业名称' : '机构名称'} rules={[{ required: true }]} - field='peopleNumber' + field='trueName' > <InputSearch searchButton='选择' @@ -217,7 +223,7 @@ </FormItem> </Col> <Col span={12}> - <FormItem label='联系方式' field='money'> + <FormItem label='联系方式' field='phoneNumber'> <Input placeholder='请填写' /> </FormItem> </Col> @@ -227,12 +233,12 @@ </FormItem> </Col> <Col span={12}> - <FormItem label={isLegal ? '统一社会信用代码' : '组织机构代码'} field='money'> + <FormItem label={isLegal ? '统一社会信用代码' : '组织机构代码'} field='mobile'> <Input placeholder='请填写' /> </FormItem> </Col> <Col span={12}> - <FormItem label={isLegal ? '法定代表人' : '机构代表人'} field='money'> + <FormItem label={isLegal ? '法定代表人' : '机构代表人'} field='companyName'> <Input placeholder='请填写' /> </FormItem> </Col> @@ -264,7 +270,13 @@ const handleSave = () => { if (formRef.current) { formRef.current.validate(undefined, (errors, values) => { - console.log(errors, values); + props.handleAddParty({ + ...values, + partyType: props.dialogType, + perClass: perClass, + perClassName: props.dialogType === 0 ? '申请方当事人' : '被申请方当事人' + }) + props.onClose() }); } } diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index c5d0d1b..68bf76c 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -33,68 +33,7 @@ const VisitorRegister = (props) => { const [dialogType, setDialogType] = useState(0);//添加当事人的类型 const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 - const [fakeData, setFakeData] = useState([ - { - id: 3, - perClassName: '申请方当事人', - trueName: '蓝海科技有限公司', - mobile: '9144010188453Z', - company: true, - companyName: '张晓梅',//公司法人 - partyType: 'applicant',//申请人 - type: 0,//申请人: 0、被申请人: 1、代理人: 2 - }, - // { - // id: 1, - // perClassName: '申请方代理人', - // trueName: '王小明', - // mobile: '410106198802121125', - // person: true, - // personNumber: '13388888888',//联系方式 - // partyType: 'applicant', - // }, - { - id: 2, - perClassName: '被申请方当事人', - trueName: '大海科技有限公司', - mobile: '13800000002', - company: true, - companyName: '郭小聪',//公司法人 - partyType: 'respondent',//被申请方 - type: 1, - remark: [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }] - }, - // { - // id: 2, - // perClassName: '被申请方代理人', - // trueName: '张三', - // mobile: '13800000002', - // person: true, - // personNumber: '13399999999',//联系方式 - // partyType: 'respondent', - // remark: [{ label: '精神障碍', color: '#C64FBE' }] - // }, - // { - // id: 2, - // perClassName: '被申请方代理人', - // trueName: '张三', - // mobile: '13800000002', - // person: true, - // personNumber: '13399999999',//联系方式 - // partyType: 'respondent', - // remark: [{ label: '精神障碍', color: '#C64FBE' }] - // }, - // { - // id: 2, - // perClassName: '被申请方代理人', - // trueName: '张三', - // mobile: '13800000002', - // person: true, - // personNumber: '13399999999',//联系方式 - // partyType: 'respondent', - // remark: [{ label: '精神障碍', color: '#C64FBE' }] - // }, - ]);//当事人信息数据 + const [fakeData, setFakeData] = useState([]);//当事人信息数据 const [scanFile, setScanFile] = useState(false); const [filesList, setFilesList] = useState([]); const [scanImage, setScanImage] = useState(false); @@ -107,6 +46,7 @@ const [fileTip, setFileTip] = useState('0'); const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制 const [mapView, setMapView] = useState(false); + const [flagId, setFlagId] = useState(0);//赋予当事人唯一id,用于删除 const formRef = useRef(); @@ -127,9 +67,6 @@ return [evidenceMaterials, evidenceMaterials_active]; } } - - - const formType = (type) => { if (type === '09_01010-1') { @@ -399,7 +336,7 @@ //查看 const handleCheckParty = (value) => { console.log(value); - setDialogType(value.type) + setDialogType(value.partyType) setDetailVisabled(true) } @@ -430,8 +367,22 @@ setSelectedAddress(value); }; + //添加当事人 + const handleAddParty = (value) => { + console.log(value); + setFakeData([...fakeData, { + ...value, + id: flagId + }]) + setFlagId(flagId + 1) + } - + //删除当事人 + const handleDeleteParty = (event, value) => { + event.stopPropagation(); + const filterData = fakeData.filter(item => item.id !== value.id) + setFakeData(filterData) + } return ( @@ -449,6 +400,7 @@ data={fakeData} handleCheckParty={handleCheckParty} handleAdd={handleAdd} + handleDeleteParty={handleDeleteParty} /> </div> <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}> @@ -763,7 +715,11 @@ focusLock={true} footer={null} > - <ApplyDialog /> + <ApplyDialog + dialogType={dialogType} + onClose={() => setAddVisabled(false)} + handleAddParty={handleAddParty} + /> </Modal> <Modal title={'添加代理人'} @@ -774,7 +730,11 @@ focusLock={true} footer={null} > - <AgentDialog /> + <AgentDialog + handleAddParty={handleAddParty} + onClose={() => setAgentVisible(false)} + fakeData={fakeData} + /> </Modal> <Modal title={'查看' + peopleMap[dialogType]} -- Gitblit v1.8.0