细节修改

dminyi

2024-08-17 f62d77d4b1eb8b6a751d99fe761af2b056bb4ac1

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

@@ -1,16 +1,32 @@
import React, { useState, useEffect, useRef } from "react";
import { Row, Col, Space, Tooltip, Button } from 'antd';
import { Form, Input, Radio, Select, DatePicker, Cascader,Modal } from '@arco-design/web-react';
import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload } from '@arco-design/web-react';
import "@arco-design/web-react/dist/css/arco.css";
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 {
  question1, image, link,
  applyMaterials,
  applyMaterials_active,
  evidenceMaterials,
  evidenceMaterials_active,

} from '../../../../assets/images';
import { CheckOutlined, } from '@ant-design/icons';
import "@arco-design/web-react/dist/css/arco.css";
import TableView from '../../../../components/TableView';
import '../../index.less';
import ApplyDialog from "./applyDialog";
import FilesCheck from '../../../filesCheck';
import {
  IconFileAudio,
  IconClose,
  IconFaceFrownFill,
  IconUpload,
  IconLink,
} from '@arco-design/web-react/icon';


const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
const FormItem = Form.Item;
@@ -21,76 +37,127 @@
const VisitorRegister = (props) => {
  const [dialogType, setDialogType] = useState(0);//添加当事人的类型
  const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制




  const formRef = useRef();
  const [fakeData, setFakeData] = useState([
    // {
    //   id: 3,
    //   perClassName: '申请方当事人',
    //   trueName: '蓝海科技有限公司',
    //   mobile: '9144010188453Z',
    //   company: true,
    //   companyName: '张晓梅',//公司法人
    //   partyType: 'applicant',//申请人
    // },
    // {
    //   id: 1,
    //   perClassName: '申请方代理人',
    //   trueName: '王小明',
    //   mobile: '410106198802121125',
    //   person: true,
    //   personNumber: '13388888888',//联系方式
    //   partyType: 'applicant',
    // },
    // {
    //   id: 2,
    //   perClassName: '被申请方当事人',
    //   trueName: '大海科技有限公司',
    //   mobile: '13800000002',
    //   company: true,
    //   companyName: '郭小聪',//公司法人
    //   partyType: 'respondent',//被申请方
    //   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 [scanFile, setScanFile] = useState(false);
  const [filesList, setFilesList] = useState([]);
  const [scanImage, setScanImage] = useState(false);
  const [scaned, setScaned] = useState(false);
  const [upload, setUpLoad] = useState(false);
  const fakeData = [
    {
      id: 3,
      perClassName: '申请方当事人',
      trueName: '蓝海科技有限公司',
      mobile: '9144010188453Z',
      company: true,
      companyName: '张晓梅',//公司法人
      partyType: 'applicant',//申请人
    },
    {
      id: 1,
      perClassName: '申请方代理人',
      trueName: '王小明',
      mobile: '410106198802121125',
      person: true,
      personNumber: '13388888888',//联系方式
      partyType: 'applicant',
    },
    {
      id: 2,
      perClassName: '被申请方当事人',
      trueName: '大海科技有限公司',
      mobile: '13800000002',
      company: true,
      companyName: '郭小聪',//公司法人
      partyType: 'respondent',//被申请方
      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 [sourceType, setSourceType] = useState('09_01010-1');
  const [filesCheck, setFilesCheck] = useState(false);
  const [file, setFile] = useState();
  const [selectedAddress, setSelectedAddress] = useState('');
  const [fileTip, setFileTip] = useState('0');

  const addressOptions = [
    { label: '地址1', value: 'address1' },
    { label: '地址2', value: 'address2' },
    // 更多地址...
  ];


  const personIconType = (v) => {
    switch (v) {
      case '09_01010-1':
        return [applyMaterials, applyMaterials_active,
        ];
      case '09_01010-2':
        return [evidenceMaterials, evidenceMaterials_active];
    }
  }




  const formType = (type) => {
    if (type === '09_01010-1') {
      //自然人
      return (
        <>
          <Col span={24}>
            <FormItem
              field='file'

            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                height={158}
                onDrop={(e) => {
                }}
                onChange={(v) => { v.length > 0 && setFileTip(v.length); console.log(v, 'vvvvvvv') }}
                tip='支持png、 jpg、excel、word、pdf等格式的文件上传，每次上传大小不超过10M'
              />

            </FormItem>
            {fileTip && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>}
          </Col>
        </>
      )
    }
  }

  const peopleMap = {
    0: '申请方',
    1: '被申请方',
@@ -101,10 +168,10 @@
    {
      id: 1,
      caseNo: 'A20230101',
      judicNo: 'J20230101',
      perClassName: '自然人',
      judicNo: '申请材料',
      perClassName: '李晓明的纠纷化解申请表、身份证...',
      inputUserName: '张三',
      mediateUserName: '李四',
      mediateUserName: '2024-7-12 12:00',
      judgeName: '王五',
      mediator: '赵六',
      handlerUserName: '钱七',
@@ -119,6 +186,28 @@
      serieStatus: '1', // 1 表示非系列案，2 表示系列案
      // 更多字段...
    },
    {
      id: 2,
      caseNo: 'A20230101',
      judicNo: '证据材料',
      perClassName: '李晓明的纠纷化解申请表、身份证...',
      inputUserName: '张三',
      mediateUserName: '2024-7-12 12:00',
      judgeName: '王五',
      mediator: '赵六',
      handlerUserName: '钱七',
      returnUserName: '孙八',
      expireTime: '2023-08-10T08:00:00.000Z',
      processName: '进行中',
      otherMediator: '周九',
      canalName: '网络',
      judicResult: '通过',
      assistName: '吴十',
      mediTypeName: '民事调解',
      serieStatus: '1', // 1 表示非系列案，2 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];

@@ -128,36 +217,45 @@
      title: '序号',
      dataIndex: 'caseNo',
      key: 'caseNo',
      width: 60,
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '材料类型',
      dataIndex: 'judicNo',
      key: 'judicNo',
      width: 60,

    },
    {
      title: '材料数量',
      dataIndex: 'perClassName',
      dataIndex: 'inputUserName',
      key: 'perClassName',
      width: 180,

    },
    {
      title: '材料名称',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 180,

    },
    {
      title: '上传时间',
      dataIndex: 'perClassName',
      key: 'perClassName',
      dataIndex: 'mediateUserName',
      key: 'mediateUserName',
      width: 180,

    },
    {
      title: '操作',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 120,
      width: 200,
      render: (text) => (
        <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
          <div>查看</div>
          <div onClick={() => setFilesCheck(true)}>查看</div>
          <div>删除</div>
          <div>下载</div>
          <div onClick={() => setUpLoad(true)}>上传</div>
@@ -202,6 +300,33 @@
    },
  ];

  const options1 = [
    {
      value: 'jingjijiufen',
      label: '经济纠纷',
      children: [
        {
          value: 'laodongjiufen',
          label: '劳动纠纷',
        },
        {
          value: 'laodongzhengyijiufen',
          label: '劳动争议纠纷',
        },
      ],
    },
    {
      value: 'linlijiufen',
      label: '邻里纠纷',
      children: [
        {
          value: 'linlijiufen',
          label: '邻里纠纷',
        },
      ],
    },
  ];

  const handleCheckParty = () => {
    console.log('check party');
  }
@@ -218,21 +343,25 @@
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  }




  //添加申请人: 0、被申请人: 1、代理人: 2
  const handleAdd = (type) => {
    setDialogType(type)
    setAddVisabled(true)
  }

  function handleChangeFile() {
  }

  const handleAddressChange = (value) => {
    setSelectedAddress(value);
  };

  return (
    <div className='dataSync-page'>
      <Col span={24} style={{ display: 'flex', alignItems: 'center' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>当事人信息</h5>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
        </Space>
      </Col>
      <div style={{ margin: '16px 0' }}>
@@ -246,17 +375,18 @@
      </div>
      <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>纠纷基本情况</h5>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5>
        </Space>
      </Col>
      <Form
        ref={props.formRef}
        layout='vertical'
        requiredSymbol={false}
        scrollToFirstError={true}
        initialValues={{
          level: '三级',
          visitingTime: getFormattedDateTime(),
          isSerious: '否'
          isSerious: '否',
        }}//默认值
      >
        <Row gutter={[32, 0]}>
@@ -288,23 +418,26 @@
          <Col span={8}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>纠纷类型<div className="must">必填</div></div>)}
              rules={[{ required: true }]}
              rules={[{ message: '请选择纠纷类型', required: true }]}
              field='disputeType'
            >
              <Select initialValue='Beijing' placeholder='请选择' allowClear>
                {['邻里纠纷', '劳动争议纠纷', '劳动纠纷', '经济纠纷'].map((option, index) => (
                  <Option key={option} value={option}>
                    {option}
                  </Option>
                ))}
              </Select>
              <Cascader
                placeholder='请选择'
                options={options1}
                onChange={(value, option) => {
                  console.log(value, option);
                }}
                // defaultValue={['shanghai', 'shanghaishi', 'huangpu']}
                allowClear
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>纠纷发生时间<div className="must">必填</div></div>)}
              rules={[{ required: true }]}
              rules={[{ message: '请选择纠纷发生时间', required: true }]}
              field='disputeTime'

            >
              <DatePicker
                style={{ width: '100%' }}
@@ -317,24 +450,24 @@
          <Col span={8}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>纠纷发生地点<div className="must">必填</div></div>)}
              rules={[{ required: true }]}
              rules={[{ message: '请选择纠纷发生地点', required: true }]}
              field='disputeAddress'
            >
              <InputSearch
                searchButton='选择'
                placeholder='选择纠纷发生地的详细地址'
                searchButton='选择'
                readOnly={true} // 设置为只读，防止直接编辑
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label='问题属地' field='quesAddress'>
              <Cascader
                placeholder='Please select ...'
                placeholder='请选择'
                options={options}
                onChange={(value, option) => {
                  console.log(value, option);
                }}
                defaultValue={['shanghai', 'shanghaishi', 'huangpu']}
                allowClear
              />
            </FormItem>
@@ -362,6 +495,7 @@
              </div>
              }
              field='summarize'
              rules={[{ message: '请填写事项概况', required: true }]}
            >
              <Input.TextArea
                maxLength={2000}
@@ -380,10 +514,12 @@
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} />
                </Tooltip>
                <div className="must">必填</div>
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanImage(true)}>识别上传材料</div>
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div>
              </div>
              }
              field='apply'
              rules={[{ message: '请填写申请请求', required: true }]}

            >
              <Input.TextArea
                maxLength={2000}
@@ -394,7 +530,7 @@
              />
            </FormItem>
          </Col>
          <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#EFF8FF', borderRadius: '2px' }}>
          <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#EFF8FF', borderRadius: '2px', marginTop: '4px' }}>
            <FormItem
              label='是否重大矛盾纠纷'
              style={{ marginBottom: '-20px' }}
@@ -408,7 +544,7 @@
      </Form>
      <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>事件材料</h5>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>事件材料</h5>
        </Space>
      </Col>
      <TableView
@@ -417,50 +553,125 @@
        size="small"
        rowKey="id"
        bordered={true}
        style={{ marginBottom: '60px' }}
        style={{ marginBottom: '65px' }}
      />

      <MyModal width={1200} visible={scanFile} onCancel={() => setScanFile(false)} footer={false} title='识别上传材料'>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>选择图片</div>
        <MyUpload
          ledgerType={true}
          fileId={'10001'}
          handleChangeFile={(type, info, apiResult) => {
            handleChangeFile(type, info, apiResult);
          }}
          accept="XLS、XLSX"
          formatType='格式支持XLS、XLSX'
          fileType="22_00018-504"
          fileList={filesList}
          fileIcon={true}
        />
      <Modal style={{ width: '1200px' }} visible={scanFile} onCancel={() => setScanFile(false)} title='识别上传材料' centered footer={null}>
        <Form
          ref={props.formRef}
          layout='vertical'
          requiredSymbol={false}
          initialValues={{
          }}//默认值
          style={{ marginTop: '4px' }}
        >
          <FormItem
            label='选择图片'
            field='file'
          >
            <Upload
              drag
              multiple
              accept='image/*'
              // action='/'
              onDrop={(e) => {
              }}
              tip='支持png、 jpg、pdf等格式文件上传，每次上传大小不超过10M'
              showUploadList={{
                // Please dont remove this comment
                fileIcon: <IconLink style={{ color: '#1D2129' }} />,
              }}
              onChange={(info, currentFile) => {
                console.log(currentFile, info, 'info', 'currentFile')
                if (info.length > 0) {
                  setScanImage(true);
                }
                setFile({
                  ...currentFile,
                  url: URL.createObjectURL(currentFile.originFile),

      </MyModal>
      <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围'>
        <img src={image} alt="" style={{ margin: '20px 0px' }} />
        <div><Button type="primary" onClick={() => setScaned(true)}>开始识别</Button></div>
      </MyModal>
      <MyModal width={1200} visible={scaned} onCancel={() => setScaned(false)} footer={false} title='识别上传材料'>
                });

              }}
              onSuccess={() => setScanImage(true)}
            />
            {/* <img src={file?.url} alt=""/> */}
          </FormItem>

        </Form>

      </Modal>
      <Modal style={{ width: '944px' }} visible={scanImage} onCancel={() => setScanImage(false)} footer={null} title='选择识别范围' centered>
        <img
          src={file?.url}
          alt=""
          style={{
            display: 'block',       // 确保图片在容器中居中显示
            margin: 'auto',         // 居中显示
            maxWidth: '100%',       // 图片最大宽度为容器宽度的100%
            maxHeight: '100%',      // 图片最大高度为容器高度的100%
            objectFit: 'contain',   // 图片缩放以适应容器，保持原图比例
          }}
        />
        <div><Button type="primary" onClick={() => setScaned(true)} style={{ marginTop: '20px' }}>开始识别</Button></div>
      </Modal>
      <Modal style={{ width: '1200px' }} visible={scaned} onCancel={() => setScaned(false)} footer={null} title='识别上传材料' centered>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <Input.TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
          defaultValue='识别内容'
          onChange={(v) => console.log(v, 'vvvvvv')}
        />
        <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>使用文字</Button></div>
      </MyModal>
      <MyModal width={1200} visible={upload} onCancel={() => setUpLoad(false)} footer={false} title='识别上传材料'>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <Input.TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
        />
        <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>上传完成</Button></div>
      </MyModal>
      
        <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => { setScanFile(false); setScanImage(false); setScaned(false) }}>使用文字</Button></div>
      </Modal>
      <Modal style={{ width: '512px' }} visible={upload} onCancel={() => setUpLoad(false)} footer={null} title='上传材料' centered>
        <div style={{ paddingTop: '8px' }}>
          <Row gutter={[30, 24]}>
            {$$.options.sourceType.map((x, t) => {
              return (
                <Col span={12} key={t}>
                  <div
                    onClick={() => { setSourceType(x.value) }}
                    className={`casePerfection-cardTab-tab ${x.value === sourceType && 'casePerfection-cardTab-tabActive'}`}
                  >
                    <img src={x.value === sourceType ? personIconType(x.value)?.[1] : personIconType(x.value)?.[0]} alt="" style={{ width: '40px', height: '40px' }} />
                    <div className="casePerfection-cardTab-tab-name">{x.label}</div>
                    {x.value === sourceType && (
                      <>
                        <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={{
                }}//默认值
                style={{ position: 'relative' }}
              >

                <Row gutter={[32, 0]}>{formType(sourceType)}</Row>
              </Form>
            </Col>
            <Button type="primary" style={{ marginTop: '-20px', marginLeft: '16px' }}>上传完成</Button>
          </Row>
        </div>

      </Modal>
      <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered>
        <div className="mediationWindow-modal-main" style={{ display: 'flex' }}>
          <FilesCheck />
        </div>
      </Modal>
      <Modal
        title={'添加' + peopleMap[dialogType]}
        visible={addVisabled}