流转办理

dminyi

2024-08-30 2124f180870958abfdba12658c4ebcc514953f11

流转办理

 gz-customerSystem/src/assets/images/down.png

 gz-customerSystem/src/assets/images/fold.png

 gz-customerSystem/src/assets/images/index.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2023-04-24 16:12:00
 * @LastEditTime: 2024-08-28 10:47:07
 * @LastEditTime: 2024-08-30 10:47:30
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description:
@@ -49,6 +49,8 @@
import transfer from "./transfer.png";
import empty from "./empty.png";
import feedback from "./feedback.png";
import fold from "./fold.png";
import down from "./down.png"

export {
  ledger_1,
@@ -93,4 +95,6 @@
  transfer,
  empty,
  feedback,
  fold,
  down
};

 gz-customerSystem/src/components/WantUserTag/Handling.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 20:43:25
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 20:55:24
 * @LastEditTime: 2024-08-30 10:27:25
 * @FilePath: \gzDyh\gz-customerSystem\src\components\WantUserTag\Handling.jsx
 * @Description: 经办人
 */
@@ -16,10 +16,10 @@
  return (
    <div className="wantUserTag">
      <div className="wantUserTag-wantHandleUser">
        <div className="wantUserTag-wantUser-right">{name}</div>
        <Typography.Link className="wantUserTag-wantHandleUser-close" onClick={() => onClose(value)}>
          <CloseOutlined style={{width:'11px',height:'13px'}}/>
        </Typography.Link>
        <div className="wantUserTag-wantHandleUser-right">{name}</div>
        <div onClick={() => onClose(value)} className="wantUserTag-wantHandleUser-icon">
          <CloseOutlined />
        </div>
      </div>
    </div>
  );

 gz-customerSystem/src/components/WantUserTag/index.less

@@ -34,8 +34,16 @@
        display:flex;
        padding: 5px 8px;
        border: 1px solid rgba(229,230,235,1);
        align-items: center;
        border-radius: 2px;

        &-right {
            margin-left: 8px;
        }

        &-icon{
            color: #1D2129;
        }
    }

    &-green {

 gz-customerSystem/src/views/register/index.less

@@ -282,15 +282,64 @@
        display: flex;
        flex-direction: row;
        column-gap: 8px;
        /* margin: 8px 16px 22px; */
        margin: 0px 8px 22px 16px;
        // height: 100vh;


        &-left {
            flex: 3 1 0%;
            background-color: rgb(255, 255, 255);
            padding: 12px 0px 12px 16px;
            margin-bottom: -25px;

            &-record {
                border: 1px solid #D9D9D9;
                border-radius: 8px;
                margin-right: 16px;
                margin-top: 8px;

                &-top {
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    background-color: #FAFAFA;
                    border-radius: 8px;


                    &-icon {
                        width: 12px;
                        height: 12px;
                        margin-right: 12px;
                    }

                    &-remark {
                        border: 1px solid #FFD591;
                        padding: 0px 8px;
                        color: #FA8C16;
                        background-color: #FFF7E6;
                        border-radius: 4px;
                        margin-left: 8px;
                    }

                    &-hostOrg{
                        border: 1px solid #89C2E3;
                        padding: 0px 8px;
                        color: #1A6FB8;
                        background-color: #E8F8FF;
                        border-radius: 4px;
                        margin-left: 8px;

                    }
                }

                &-bottom {
                    margin: 16px 12px;

                    &-table {
                        border: 1px solid #d9d9d9;
                        width: 100%;
                    }
                }
            }
        }

        &-right {
@@ -298,6 +347,13 @@
            background-color: rgb(255, 255, 255);
        }
    }
}

.Form{
    padding: 12px 16px 16px 16px;
    border: 1px dashed #1a6fb8;
    border-radius: 10px;
    margin-top: 16px;
}

.tabs-container .arco-tabs-header {
@@ -317,6 +373,6 @@
    width: 82px;
}

.progress{
.progress {
    margin: 16px 0px 0px 16px;
}

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

New file
@@ -0,0 +1,134 @@
import React, { useState, useEffect } from 'react';
import { Typography, Button } from 'antd';
import { CheckOutlined, } from '@ant-design/icons';
import { Form, Input, Modal,Upload } from '@arco-design/web-react';
import { IconLink } from '@arco-design/web-react/icon';


const { TextArea } = Input;
const { Text } = Typography;

const DocumentScanner = ({
  visible,
  onCancel,
  onConfirm,
  formRef,
}) => {
  const [scanImage, setScanImage] = useState(false);
  const [scaned, setScaned] = useState(false);
  const [fileView, setFileView] = useState(null);

  useEffect(() => {
    if (!visible) {
      setScanImage(false);
      setScaned(false);
      setFileView(null);
    }
  }, [visible]);

  const handleUploadChange = (info) => {
    if (info.fileList.length > 0) {
      setScanImage(true);
    }
    setFileView({
      ...info.fileList[0],
      url: URL.createObjectURL(info.fileList[0].originFile),
    });
  };

  const handleStartRecognition = () => {
    setScaned(true);
    setScanImage(false);
  };

  const handleUseText = (text) => {
    onConfirm(text);
    onCancel(); // 关闭弹窗
  };

  return (
    <>
      <Modal
        style={{ width: '1200px' }}
        visible={visible && !scanImage && !scaned}
        onCancel={onCancel}
        title='识别上传材料'
        centered
        footer={null}
      >
        <Form
          ref={formRef}
          layout='vertical'
          requiredSymbol={false}
          style={{ marginTop: '4px' }}
        >
          <Form.Item label='选择图片' name='file'>
            <Upload
              drag
              limit={1}
              accept='image/*'
              onDrop={() => {}}
              tip='支持png、jpg、pdf等格式文件上传，每次上传大小不超过10M'
              showUploadList={{
                fileIcon: <IconLink style={{ color: '#1D2129' }} />,
              }}
              onChange={handleUploadChange}
            >
              <Text>点击或者拖拽文件到这里</Text>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        style={{ width: '944px' }}
        visible={visible && scanImage}
        onCancel={() => setScanImage(false)}
        footer={null}
        title='选择识别范围'
        centered
      >
        <img
          src={fileView?.url}
          alt=""
          style={{
            display: 'block',
            margin: 'auto',
            maxWidth: '100%',
            maxHeight: '100%',
            objectFit: 'contain',
          }}
        />
        <div style={{ marginTop: '20px' }}>
          <Button type="primary" onClick={handleStartRecognition}>
            开始识别
          </Button>
        </div>
      </Modal>
      <Modal
        style={{ width: '1200px' }}
        visible={visible && scaned}
        onCancel={() => setScaned(false)}
        footer={null}
        title='识别上传材料'
        centered
      >
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
          defaultValue='识别内容'
          onChange={(e) => handleUseText(e.target.value)}
        />
        <div style={{ marginTop: '24px' }}>
          <Button type="primary" onClick={() => handleUseText('识别内容')}>
            使用文字
          </Button>
        </div>
      </Modal>
    </>
  );
};

export default DocumentScanner;

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

@@ -13,11 +13,9 @@
import TableView from '@/components/TableView'
import { question, register, Matter, transfer } from '../../../../assets/images'
import * as $$ from '@/utils/utility';
import { Tabs, Typography, Steps } from '@arco-design/web-react';
import { Typography, Steps } from '@arco-design/web-react';
import "@arco-themes/react-gzzz/css/arco.css";
import { IconCalendar, IconClockCircle, IconUser } from '@arco-design/web-react/icon';
import Handle from './handle'
const TabPane = Tabs.TabPane;

const style = {
  // textAlign: 'center',

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

@@ -1,12 +1,14 @@
import React, { useState } from 'react';
import { Steps } from '@arco-design/web-react';
import React, { useState, useRef } from 'react';
import { Col, Space, Row, Tooltip, Button } from 'antd';
import { register, empty } from '../../../../assets/images'
import { Form, Input, Empty, Tabs, Typography, Modal } from '@arco-design/web-react';
import { register, fold, down, empty, link } from '../../../../assets/images';
import { Form, Input, Tabs, Typography, Empty } from '@arco-design/web-react';
import { question1, } from '@/assets/images';
import ProgressStep from '../../../../components/ProgressStep/VisitStep'
import SelectObjModal from '../../../../components/SelectObjModal/selectPerson'
import WantUserTag from '../../../../components/WantUserTag/Handling'
import ProgressStep from '../../../../components/ProgressStep/VisitStep';
import SelectObjModal from '../../../../components/SelectObjModal/selectPerson';
import WantUserTag from '../../../../components/WantUserTag/Handling';
import { scan } from '@/assets/images/icon'
import DocumentScanner from './FileUpLoad'


const InputSearch = Input.Search;
const FormItem = Form.Item;
@@ -22,24 +24,120 @@
const Handle = () => {
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [wantUser, setWantUser] = useState({});
  // const [scanFile, setScanFile] = useState(false);

  const tabs = [
    { index: '1', label: '承办部门' },
    { index: '2', label: '配合部门' },
  ];

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const hideModal = () => {
    setIsModalVisible(false);
  };
  const formRef = useRef(null);

  const handleTabChange = (newTabIndex) => {
    setSelectedTab(newTabIndex);
  };

  const [records, setRecords] = useState([
    {
      id: 1,
      date: '2024 - 7 - 1 10:00',
      location: '天河区棠下街综治中心',
      remark: '配合部门',
      showView: false,
      details: [
        {
          title: '操作人',
          content: (
            <div style={{ display: 'flex' }}>
              <div>李晓明</div>
              <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
            </div>
          ),
        },
        {
          title: '办理意见',
          content: (
            <div>
              调解开始，我首先安抚双方情绪，确保对话在一个平和的氛围中展开。随后，我引导王先生详细说明了他的财务困境及还款意愿，同时让银行代表理解其处境，强调长期合作的重要性。经过反复沟通，银行同意调整还款计划，降低利率，并给予王先生一定的宽限期。王先生则承诺按新计划履行还款义务，双方最终达成一致，签署了调解协议。
            </div>
          ),
        },
        {
          title: '办理附件',
          content: (
            <a href="your-link-here.html" target="_blank">
              <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
            </a>
          ),
        },
      ],
    },
    {
      id: 2,
      date: '2024 - 7 - 2 14:00',
      location: '天河区天河南街道办事处',
      remark: '承办部门',
      showView: false,
      details: [
        {
          title: '操作人',
          content: (
            <div style={{ display: 'flex' }}>
              <div>张伟</div>
              <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
            </div>
          ),
        },
        {
          title: '办理意见',
          content: (
            <div>
              在本次协调会议中，我们成功解决了双方之间的纠纷，确保了所有参与方的利益得到了妥善处理。通过深入交流，各方达成了共识，同意采取一系列措施来解决现存的问题。
            </div>
          ),
        },
        {
          title: '办理附件',
          content: '广州市天河区天河南路200号',
        },
      ],
    },
  ]);



  const toggleView = (id) => {
    setRecords(records.map(record => {
      if (record.id === id) {
        return {
          ...record,
          showView: !record.showView,
        };
      }
      return record;
    }));
  };


  const [scannerVisible, setScannerVisible] = useState(false);

  const handleConfirm = (text) => {
    console.log('识别完成:', text);
    setScannerVisible(false);
  };

  const openScanner = () => {
    setScannerVisible(true);
    formRef.current?.resetFields();
    formRef.current?.setFieldsValue({});
  };

  const onCancel = () => {
    setScannerVisible(false);
  };



  return (
    <>
@@ -110,23 +208,81 @@
              </Col>
              <Col span={24}>
                <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                <Empty
                  icon={
                    <div
                      style={{
                        display: 'flex',
                        // width: 160,
                        justifyContent: 'center',
                      }}
                {records.length > 0 ?
                  <div>
                    {records.map(record => (
                      <div key={record.id} className='container-bottom-left-record'>
                        <div className='container-bottom-left-record-top'>
                          {
                            record.showView ? (
                              <img src={down} alt='' style={{ width: '18px', marginRight: '6px' }} onClick={() => toggleView(record.id)} />
                            ) : (
                              <img src={fold} alt='' className='container-bottom-left-record-top-icon' onClick={() => toggleView(record.id)} />
                            )
                          }
                          <div>{`${record.date} ${record.location}`}</div>
                          <div className={`container-bottom-left-record-top-${record.remark === '配合部门' ? 'remark' : 'hostOrg'}`}>{record.remark}</div>
                        </div>
                        <div className='container-bottom-left-record-bottom' style={{ display: record.showView ? 'block' : 'none' }}>
                          <table border="1" cellpadding="8" className='container-bottom-left-record-bottom-table'>
                            {record.details.map(detail => (
                              <tr key={detail.title}>
                                <th bgcolor="#F7F8FA" className="table-title" width="120">{detail.title}</th>
                                <td>{detail.content}</td>
                              </tr>
                            ))}
                          </table>
                        </div>
                      </div>
                    ))}
                  </div>
                  :
                  <Empty
                    icon={
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'center',
                          marginBottom: '100px'
                        }}
                      >
                        <img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
                      </div>
                    }
                    description='暂无数据'
                  />
                }
                <div className='Form'>
                  <Col span={24} style={{ marginBottom: '8px' }}>
                    <Space size='small'>
                      <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5>
                    </Space>
                  </Col>
                  <Col span={24}>
                    <FormItem
                      label={<div style={{ display: 'flex' }}>
                        办理意见
                        <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                        <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={openScanner}>识别材料</div>
                      </div>
                      }
                      field='caseDes'
                      rules={[{ message: '请填写事项概况', required: true }]}
                    >
                      <img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
                    </div>
                  }
                  description='暂无数据'
                />
                      <Input.TextArea
                        maxLength={2000}
                        showWordLimit
                        rows={5}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </FormItem>
                  </Col>

                </div>
              </Col>
            </Form>
            <Space>
            <Space style={{ marginTop: '38px', position: 'absolute', bottom: '4px' }}>
              <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>添加办理记录</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >结案申请</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button>
@@ -193,7 +349,14 @@
          }}
          onClose={() => setIsModalVisible(false)}
        />
      </div>

        <DocumentScanner
          visible={scannerVisible}
          onCancel={onCancel}
          onConfirm={handleConfirm}
          formRef={formRef}
        />
      </div >
    </>
  )