feat：更改当事人组件

zhangyongtian

2024-08-30 558043a024fccd7ebb86b6927ae12757922c24c8

 gz-customerSystem/src/views/register/visit/component/agentDialog.jsx

@@ -1,10 +1,11 @@
import React, { useState, useEffect, useRef, Fragment } from "react";
import { Row, Col, Space } from 'antd';
import { Form, Input, Button, Radio, Select, Checkbox, Upload } from '@arco-design/web-react';
import KeyVisits from "./keyVisits";
import KeyVisits from "@/components/personCard/KeyVisits";
import {
  IconLink,
} from '@arco-design/web-react/icon';
import * as $$ from '@/utils/utility';

const FormItem = Form.Item;
const Option = Select.Option;
@@ -14,21 +15,58 @@

export default function AgentDialog(props) {
  const formRef = useRef();
  const [visitList, setVisitList] = useState([])

  useEffect(() => {
    if (props.editData) {
      //编辑
      formRef.current.setFieldsValue({
        ...props.editData
      })
      console.log(props);
      //过滤代理人
      setVisitList(props.fakeData.filter(item => {
        if (props.editData.perType === '24_00006-1') {
          return item.perType === '15_020008-1'
        } else {
          return item.perType === '15_020008-2'
        }
      }))
    } else {
      //过滤代理人
      setVisitList(props.fakeData.filter(item => {
        if (props.dialogType === '24_00006-1') {
          return item.perType === '15_020008-1'
        } else {
          return item.perType === '15_020008-2'
        }
      }))
    }
  }, [])

  //保存信息
  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()
        if (!errors) {
          const fieldValue = formRef.current.getFields()
          if (props.editData) {
            props.handleAddParty({
              ...fieldValue
            })
          } else {
            props.handleAddParty({
              ...fieldValue,
              perType: props.dialogType,
              perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
            })
          }
          props.onClose()
        }
      });
    }
  }

  return (
    <div className="applyDialog">
      <div style={{ height: '590px', overflowY: 'scroll' }}>
@@ -40,6 +78,7 @@
              requiredSymbol={false}
              initialValues={{
              }}//默认值
              scrollToFirstError
            >
              <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>
                <Col span={24}>
@@ -89,7 +128,7 @@
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)}
                    field='personNumber'
                    field='mobile'
                    rules={[
                      { required: true, message: '请输入联系方式' },
                      { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' },
@@ -101,16 +140,17 @@
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)}
                    field='docType'
                    field='certiType'
                    rules={[{ required: true, message: '请选择证件类型' }]}
                  >
                    <Select placeholder='请选择' allowClear>
                      {['居民身份证',].map((option, index) => (
                        <Option key={option} value={option}>
                          {option}
                        </Option>
                      ))}
                    </Select>
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.cardType}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('certiTypeName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
@@ -120,7 +160,7 @@
                      { 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'
                    field='certiNo'
                  >
                    <InputSearch
                      searchButton='读取卡证'
@@ -129,32 +169,38 @@
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem label='联系地址' field='money'>
                  <FormItem label='联系地址' field='addr'>
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem label='户籍地址' field='money'>
                  <FormItem label='户籍地址' field='placeAddr'>
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem label='工作单位' field='money'>
                  <FormItem label='工作单位' field='workUnit'>
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='民族'
                    field='minzu'
                    field='nation'
                  >
                    <Select placeholder='请选择' allowClear>
                      {['汉族',].map((option, index) => (
                        <Option key={option} value={option}>
                          {option}
                        </Option>
                      ))}
                    </Select>
                    <Select
                      placeholder='请选择'
                      allowClear
                      showSearch
                      options={$$.options.nation}
                      filterOption={(inputValue, option) =>
                        option.props.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0 ||
                        option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
                      }
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('nationName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
@@ -164,63 +210,77 @@
                  >
                    <RadioGroup
                      type='button'
                      options={$$.options.sex}
                      onChange={(value, options) => {
                        if (value) {
                          formRef.current.setFieldValue('sexName', value === '09_00003-1' ? '男' : '女')
                        } else {
                          formRef.current.setFieldValue('sexName', '')
                        }
                      }}
                    >
                      <Radio value='0'>男</Radio>
                      <Radio value='1'>女</Radio>
                    </RadioGroup>
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='是否极具个人极端倾向'
                    field='isBad'
                    field='extreme'
                  >
                    <RadioGroup>
                      <Radio value='0'>否</Radio>
                      <Radio value='1'>是</Radio>
                      <Radio value={0}>否</Radio>
                      <Radio value={1}>是</Radio>
                    </RadioGroup>
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='委托关系'
                    field='weituo'
                    field='agentRelate'
                  >
                    <Select placeholder='请选择' allowClear>
                      {['亲属',].map((option, index) => (
                        <Option key={option} value={option}>
                          {option}
                        </Option>
                      ))}
                    </Select>
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.agentType}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('agentRelateName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='委托类型'
                    field='type'
                    field='agentType'
                  >
                    <Select placeholder='请选择' allowClear>
                      {['一般授权代理',].map((option, index) => (
                        <Option key={option} value={option}>
                          {option}
                        </Option>
                      ))}
                    </Select>
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.agentType}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('agentTypeName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>代理对象<div className="must">必填</div></div>)}
                    rules={[{ required: true }]}
                    field='dailimap'
                    rules={[{ required: true, message: '请选择代理对象' }]}
                    field='personId'
                  >
                    <CheckboxGroup
                      direction='vertical'
                      options={props.fakeData.map(x => ({
                        label: <span>{x.trueName}&nbsp;&nbsp;<span style={{ color: '#86909c' }}>({x.perClassName})</span></span>,
                      options={visitList.map(x => ({
                        label: <span>{x.trueName}&nbsp;&nbsp;<span style={{ color: '#86909c' }}>({x.perTypeName})</span></span>,
                        value: x.id,
                      }))}
                      onChange={(value) => {
                        if (value) {
                          const personList = visitList.filter(item => value.indexOf(item.id) != -1).map(item => item.trueName)
                          formRef.current.setFieldValue('personNameList', personList)
                        }
                      }}
                    >
                    </CheckboxGroup>
                  </FormItem>
@@ -241,7 +301,7 @@
          className="dialogPrimary"
          onClick={handleSave}
        >
          保存信息
          保存
        </Button>
        <Button className="dialogBack">
          重置