gz-customerSystem/src/assets/images/icon/casePerfection-legal-active.svg
@@ -1,13 +1,20 @@ <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_223_113601)"> <path d="M40 0H0V40H40V0Z" fill="white" fill-opacity="0.01"/> <path d="M3.33325 35H36.6666" stroke="#D1021C" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.6667 21.6667H8.33341C7.41294 21.6667 6.66675 22.4129 6.66675 23.3334V33.3334C6.66675 34.2539 7.41294 35.0001 8.33341 35.0001H11.6667C12.5872 35.0001 13.3334 34.2539 13.3334 33.3334V23.3334C13.3334 22.4129 12.5872 21.6667 11.6667 21.6667Z" stroke="#D1021C" stroke-width="1.66667" stroke-linejoin="round"/> <path d="M10 28.3333H10.8333" stroke="#D1021C" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M31.6666 3.33325H14.9999C14.0794 3.33325 13.3333 4.07944 13.3333 4.99992V33.3333C13.3333 34.2537 14.0794 34.9999 14.9999 34.9999H31.6666C32.5871 34.9999 33.3333 34.2537 33.3333 33.3333V4.99992C33.3333 4.07944 32.5871 3.33325 31.6666 3.33325Z" stroke="#D1021C" stroke-width="1.66667" stroke-linejoin="round"/> <path d="M21.6666 8.33325H18.3333V11.6666H21.6666V8.33325Z" fill="#D1021C"/> <path d="M28.3333 8.33325H25V11.6666H28.3333V8.33325Z" fill="#D1021C"/> <path d="M21.6666 14.1667H18.3333V17.5001H21.6666V14.1667Z" fill="#D1021C"/> <path d="M28.3333 14.1667H25V17.5001H28.3333V14.1667Z" fill="#D1021C"/> <path d="M28.3333 20H25V23.3333H28.3333V20Z" fill="#D1021C"/> <path d="M28.3333 25.8333H25V29.1666H28.3333V25.8333Z" fill="#D1021C"/> <path d="M3.33325 35H36.6666" stroke="#1A6FB8" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.6667 21.6667H8.33341C7.41294 21.6667 6.66675 22.4129 6.66675 23.3334V33.3334C6.66675 34.2539 7.41294 35.0001 8.33341 35.0001H11.6667C12.5872 35.0001 13.3334 34.2539 13.3334 33.3334V23.3334C13.3334 22.4129 12.5872 21.6667 11.6667 21.6667Z" stroke="#1A6FB8" stroke-width="1.66667" stroke-linejoin="round"/> <path d="M10 28.3333H10.8333" stroke="#1A6FB8" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M31.6666 3.33325H14.9999C14.0794 3.33325 13.3333 4.07944 13.3333 4.99992V33.3333C13.3333 34.2537 14.0794 34.9999 14.9999 34.9999H31.6666C32.5871 34.9999 33.3333 34.2537 33.3333 33.3333V4.99992C33.3333 4.07944 32.5871 3.33325 31.6666 3.33325Z" stroke="#1A6FB8" stroke-width="1.66667" stroke-linejoin="round"/> <path d="M21.6666 8.33325H18.3333V11.6666H21.6666V8.33325Z" fill="#1A6FB8"/> <path d="M28.3333 8.33325H25V11.6666H28.3333V8.33325Z" fill="#1A6FB8"/> <path d="M21.6666 14.1667H18.3333V17.5001H21.6666V14.1667Z" fill="#1A6FB8"/> <path d="M28.3333 14.1667H25V17.5001H28.3333V14.1667Z" fill="#1A6FB8"/> <path d="M28.3333 20H25V23.3333H28.3333V20Z" fill="#1A6FB8"/> <path d="M28.3333 25.8333H25V29.1666H28.3333V25.8333Z" fill="#1A6FB8"/> </g> <defs> <clipPath id="clip0_223_113601"> <rect width="40" height="40" fill="white"/> </clipPath> </defs> </svg> gz-customerSystem/src/assets/images/icon/casePerfection-organize-active.svg
@@ -1,7 +1,14 @@ <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M35 16.6666V36.6666H20H5V16.6666L20 3.33325L35 16.6666Z" stroke="#D1021C" stroke-width="1.66667" stroke-linejoin="round"/> <path d="M5 20H35" stroke="#D1021C" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.8335 11.6667V36.6667" stroke="#D1021C" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M29.1665 11.6667V36.6667" stroke="#D1021C" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M23.3332 26.6667H16.6665V36.6667H23.3332V26.6667Z" stroke="#D1021C" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <g clip-path="url(#clip0_223_115038)"> <path d="M35 16.6666V36.6666H20H5V16.6666L20 3.33325L35 16.6666Z" stroke="#1A6FB8" stroke-width="1.66667" stroke-linejoin="round"/> <path d="M5 20H35" stroke="#1A6FB8" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.8335 11.6667V36.6667" stroke="#1A6FB8" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M29.1665 11.6667V36.6667" stroke="#1A6FB8" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> <path d="M23.3332 26.6667H16.6665V36.6667H23.3332V26.6667Z" stroke="#1A6FB8" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> </g> <defs> <clipPath id="clip0_223_115038"> <rect width="40" height="40" fill="white"/> </clipPath> </defs> </svg> gz-customerSystem/src/assets/images/icon/casePerfection-person-active.svg
@@ -1,3 +1,10 @@ <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.16976 35.1927C4.16976 35.5465 4.46505 35.8333 4.82933 35.8333L35.1686 35.8334C35.5328 35.8334 35.8282 35.5466 35.8282 35.1928V34.4277C35.8433 34.1971 35.8742 33.0463 35.1157 31.7742C34.6373 30.972 33.9432 30.279 33.0523 29.7145C31.9747 29.0316 30.6037 28.5367 28.9456 28.2388C28.9333 28.2372 27.7038 28.0742 26.4442 27.7526C24.2508 27.1923 24.0591 26.6965 24.0578 26.6917C24.0449 26.6427 24.0262 26.5956 24.0023 26.5513C23.9844 26.4588 23.9401 26.1107 24.0248 25.1781C24.24 22.8092 25.5107 21.4092 26.5317 20.2844C26.8537 19.9297 27.1577 19.5946 27.392 19.266C28.4022 17.8485 28.496 16.2367 28.5002 16.1367C28.5002 15.9343 28.477 15.7679 28.4272 15.6137C28.3281 15.305 28.1415 15.1127 28.0052 14.9722L28.0043 14.9712C27.97 14.9359 27.9376 14.9024 27.9111 14.8717C27.901 14.8599 27.8742 14.8288 27.8986 14.6692C27.9882 14.0818 28.0421 13.59 28.0679 13.1214C28.1139 12.2866 28.1498 11.0381 27.9345 9.823C27.9079 9.6155 27.8622 9.39633 27.7912 9.13525C27.5637 8.29853 27.1982 7.58317 26.6903 6.99278C26.603 6.89776 24.4797 4.66075 18.3157 4.20176C17.4633 4.1383 16.6207 4.17248 15.7913 4.21487C15.5914 4.22476 15.3177 4.23832 15.0615 4.3047C14.4251 4.46956 14.2552 4.87294 14.2107 5.0987C14.1367 5.47265 14.2667 5.76354 14.3526 5.95606V5.95608V5.95611C14.3651 5.98401 14.3805 6.01852 14.3536 6.10839C14.2105 6.32998 13.9854 6.52975 13.7559 6.71902C13.6896 6.7754 12.1439 8.10815 12.0589 9.84916C11.8297 11.1732 11.8471 13.2362 12.1181 14.6621C12.1338 14.7408 12.1571 14.8574 12.1193 14.9362C11.8279 15.1973 11.4976 15.4933 11.4984 16.1687C11.5019 16.2367 11.5957 17.8485 12.606 19.266C12.84 19.5943 13.1438 19.9292 13.4656 20.2837L13.4663 20.2844V20.2845C14.4873 21.4093 15.7579 22.8092 15.9732 25.178C16.0578 26.1107 16.0135 26.4588 15.9956 26.5512C15.9717 26.5955 15.953 26.6426 15.9402 26.6916C15.9388 26.6964 15.7478 27.1907 13.5643 27.7497C12.3047 28.0723 11.0646 28.2372 11.0276 28.2425C9.41616 28.5145 8.05364 28.997 6.97792 29.6763C6.0901 30.2371 5.39461 30.9313 4.91073 31.7398C4.13763 33.0317 4.15853 34.2082 4.16976 34.4229V35.1927Z" stroke="#D1021C" stroke-width="1.66667" stroke-linejoin="round"/> <g clip-path="url(#clip0_223_118967)"> <path d="M4.16961 35.1927C4.16961 35.5465 4.4649 35.8333 4.82918 35.8333L35.1684 35.8334C35.5327 35.8334 35.828 35.5466 35.828 35.1928V34.4277C35.8432 34.1971 35.874 33.0463 35.1155 31.7742C34.6372 30.972 33.943 30.279 33.0522 29.7145C31.9745 29.0316 30.6036 28.5367 28.9454 28.2388C28.9332 28.2372 27.7037 28.0742 26.4441 27.7526C24.2507 27.1923 24.0589 26.6965 24.0577 26.6917C24.0448 26.6427 24.0261 26.5956 24.0022 26.5513C23.9843 26.4588 23.9399 26.1107 24.0247 25.1781C24.2398 22.8092 25.5105 21.4092 26.5315 20.2844C26.8535 19.9297 27.1576 19.5946 27.3918 19.266C28.4021 17.8485 28.4958 16.2367 28.5001 16.1367C28.5001 15.9343 28.4768 15.7679 28.4271 15.6137C28.3279 15.305 28.1413 15.1127 28.0051 14.9722L28.0042 14.9712C27.9698 14.9359 27.9374 14.9024 27.9109 14.8717C27.9008 14.8599 27.874 14.8288 27.8984 14.6692C27.9881 14.0818 28.0419 13.59 28.0678 13.1214C28.1138 12.2866 28.1497 11.0381 27.9343 9.823C27.9078 9.6155 27.8621 9.39633 27.791 9.13525C27.5635 8.29853 27.198 7.58317 26.6902 6.99278C26.6028 6.89776 24.4795 4.66075 18.3155 4.20176C17.4632 4.1383 16.6206 4.17248 15.7912 4.21487C15.5913 4.22476 15.3175 4.23832 15.0613 4.3047C14.4249 4.46956 14.2551 4.87294 14.2105 5.0987C14.1366 5.47265 14.2665 5.76354 14.3524 5.95606V5.95608V5.95611C14.3649 5.98401 14.3803 6.01852 14.3534 6.10839C14.2103 6.32998 13.9853 6.52975 13.7558 6.71902C13.6894 6.7754 12.1438 8.10815 12.0588 9.84916C11.8296 11.1732 11.8469 13.2362 12.1179 14.6621C12.1337 14.7408 12.1569 14.8574 12.1192 14.9362C11.8278 15.1973 11.4974 15.4933 11.4983 16.1687C11.5018 16.2367 11.5955 17.8485 12.6058 19.266C12.8398 19.5943 13.1437 19.9292 13.4654 20.2837L13.4662 20.2844V20.2845C14.4872 21.4093 15.7578 22.8092 15.973 25.178C16.0577 26.1107 16.0133 26.4588 15.9954 26.5512C15.9715 26.5955 15.9528 26.6426 15.94 26.6916C15.9387 26.6964 15.7477 27.1907 13.5642 27.7497C12.3045 28.0723 11.0644 28.2372 11.0274 28.2425C9.41601 28.5145 8.05349 28.997 6.97777 29.6763C6.08995 30.2371 5.39446 30.9313 4.91058 31.7398C4.13748 33.0317 4.15838 34.2082 4.16961 34.4229V35.1927Z" stroke="#1A6FB8" stroke-width="1.66667" stroke-linejoin="round"/> </g> <defs> <clipPath id="clip0_223_118967"> <rect width="40" height="40" fill="white"/> </clipPath> </defs> </svg> gz-customerSystem/src/views/register/index.less
@@ -122,5 +122,12 @@ justify-content: space-between; box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.25); z-index: 1; } } .applyDialog { .dialogTitle { margin-bottom: 8px; padding-left: 8px; } } gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
@@ -1,11 +1,172 @@ import React from 'react' import { Form, Input, Button, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react'; import React, { useState, useEffect, useRef, Fragment } from "react"; import * as $$ from '../../../../utils/utility'; import { Row, Col } from 'antd'; import { CheckOutlined, } from '@ant-design/icons'; import { caseperfection_person, caseperfection_person_active, caseperfection_legal, caseperfection_legal_active, caseperfection_organize, caseperfection_organize_active, } from '../../../../assets/images/icon'; import { Form, Input, Button, Radio, Select, DatePicker, Cascader, Upload, Message } from '@arco-design/web-react'; export default function applyDialog(props) { const FormItem = Form.Item; const Option = Select.Option; const InputSearch = Input.Search; export default function ApplyDialog(props) { const formRef = useRef(); const [perClass, setPerClass] = useState('09_01001-1') const personIconType = (v) => { switch (v) { case '09_01001-1': return [caseperfection_person, caseperfection_person_active]; case '09_01001-2': return [caseperfection_legal, caseperfection_legal_active]; case '09_01001-3': return [caseperfection_organize, caseperfection_organize_active]; } } //页面返回 const formType = (type) => { if (type === '09_01001-1') { //自然人 return ( <div> <div style={{ height: '590px', overflowY: 'scroll' }}> <> <Col span={24}> <FormItem label='身份证明材料' field='file' > <Upload drag multiple accept='image/*' action='/' onDrop={(e) => { }} tip='Only pictures can be uploaded' /> </FormItem> </Col> <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)} field='name' > <Input placeholder='请填写' /> </FormItem> </Col> <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)} field='phone' > <Input placeholder='请填写' /> </FormItem> </Col> <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)} field='zhengjian' > <Select placeholder='请选择' allowClear> {['居民身份证',].map((option, index) => ( <Option key={option} value={option}> {option} </Option> ))} </Select> </FormItem> </Col> <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)} rules={[{ required: true }]} field='peopleNumber' > <InputSearch searchButton='读取卡证' placeholder='请填写' /> </FormItem> </Col> <Col span={12}> <FormItem label='联系地址' field='money'> <Input placeholder='请填写' /> </FormItem> </Col> <Col span={12}> <FormItem label='户籍地址' field='money'> <Input placeholder='请填写' /> </FormItem> </Col> <Col span={12}> <FormItem label='工作单位' field='money'> <Input placeholder='请填写' /> </FormItem> </Col> <Col span={12}> <FormItem label='民族' field='民族' > <Select placeholder='请选择' allowClear> {['汉族',].map((option, index) => ( <Option key={option} value={option}> {option} </Option> ))} </Select> </FormItem> </Col> </> ) } } return ( <div className="applyDialog"> <div> <div className="dialogTitle">当事人类型</div> <Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}> {$$.options.personClass.map((x, t) => { return ( <Col span={8} key={t}> <div onClick={() => { setPerClass(x.value) }} className={`casePerfection-cardTab-tab ${x.value === perClass && 'casePerfection-cardTab-tabActive'}`} > <img src={x.value === perClass ? personIconType(x.value)[1] : personIconType(x.value)[0]} alt="" /> <div className="casePerfection-cardTab-tab-name">{x.label}</div> {x.value === perClass && ( <> <div className="casePerfection-cardTab-tab-triangle" /> <CheckOutlined className="casePerfection-cardTab-tab-check" /> </> )} </div> </Col> ); })} <Col span={24}> <Form ref={props.formRef} layout='vertical' requiredSymbol={false} initialValues={{ }}//默认值 > <Row gutter={[32, 0]}>{formType(perClass)}</Row> </Form> </Col> </Row> </div> <div className='dialogFooter'> <Button
