feat: 提交申请人弹窗静态样式

zhangyongtian

2024-08-15 fc0865e15e6476a3688c437c624a6089c74d6f75

 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