细节修改

dminyi

2024-08-17 f62d77d4b1eb8b6a751d99fe761af2b056bb4ac1

细节修改

 gz-customerSystem/src/components/TableView/index.jsx

@@ -2,14 +2,14 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-10 11:25:15
 * @LastEditTime: 2023-05-08 11:01:18
 * @LastEditors: lwh
 * @LastEditTime: 2024-08-16 10:14:05
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 公共Table封装组件
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Space, Table, Tooltip } from 'antd';
import { Space, Tooltip, Table } from 'antd';
import { ReloadOutlined, FolderFilled } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import './index.less';

 gz-customerSystem/src/utils/utility.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:57:54
 * @LastEditTime: 2024-08-09 14:50:20
 * @LastEditTime: 2024-08-16 17:15:26
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 公共模块方法
@@ -102,6 +102,18 @@
    return decodeURI(result[1]);
}

// 逗号隔开数字
export function thousands(num) {
    if (num) {
        var str = num.toString();
        var reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg, '$1，');
    } else {
        return 0;
    }
}


//
export function getQueryObj(obj) {
    let strs = '';

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

@@ -166,3 +166,7 @@
        border-left: 1px solid rgba(0,0,0,0.2);
    }
}

.arco-upload-list-type-text .arco-upload-list-item:first-of-type, .arco-upload-list-type-picture-list .arco-upload-list-item:first-of-type{
    margin-top: 34px;
}

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

@@ -104,6 +104,16 @@
  const [upload, setUpLoad] = useState(false);
  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) {
@@ -115,6 +125,9 @@
    }
  }




  const formType = (type) => {
    if (type === '09_01010-1') {
      //自然人
@@ -123,6 +136,7 @@
          <Col span={24}>
            <FormItem
              field='file'

            >
              <Upload
                drag
@@ -132,11 +146,12 @@
                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>
        </>
      )
@@ -153,10 +168,10 @@
    {
      id: 1,
      caseNo: 'A20230101',
      judicNo: 'J20230101',
      perClassName: '自然人',
      judicNo: '申请材料',
      perClassName: '李晓明的纠纷化解申请表、身份证...',
      inputUserName: '张三',
      mediateUserName: '李四',
      mediateUserName: '2024-7-12 12:00',
      judgeName: '王五',
      mediator: '赵六',
      handlerUserName: '钱七',
@@ -171,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 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];

@@ -180,33 +217,42 @@
      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 onClick={() => setFilesCheck(true)}>查看</div>
@@ -254,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');
  }
@@ -270,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' }}>
@@ -298,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]}>
@@ -340,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%' }}
@@ -369,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>
@@ -414,6 +495,7 @@
              </div>
              }
              field='summarize'
              rules={[{ message: '请填写事项概况', required: true }]}
            >
              <Input.TextArea
                maxLength={2000}
@@ -432,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}
@@ -446,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' }}
@@ -460,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
@@ -469,17 +553,17 @@
        size="small"
        rowKey="id"
        bordered={true}
        style={{ marginBottom: '60px' }}
        style={{ marginBottom: '65px' }}
      />

      <MyModal width={1200} visible={scanFile} onCancel={() => setScanFile(false)} footer={false} title='识别上传材料' centered>
      <Modal style={{ width: '1200px' }} visible={scanFile} onCancel={() => setScanFile(false)} title='识别上传材料' centered footer={null}>
        <Form
          ref={props.formRef}
          layout='vertical'
          requiredSymbol={false}
          style={{ marginTop: '20px' }}
          initialValues={{
          }}//默认值
          style={{ marginTop: '4px' }}
        >
          <FormItem
            label='选择图片'
@@ -489,24 +573,49 @@
              drag
              multiple
              accept='image/*'
              action='/'
              // action='/'
              onDrop={(e) => {
              }}
              tip='支持png、 jpg、pdf等格式文件上传，每次上传大小不超过10M'
              showUploadList={{
                // Please dont remove this comment
                fileIcon: <IconLink />,
                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),

                });

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

        </Form>

      </MyModal>
      <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围' centered>
        <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='识别上传材料' centered>
      </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
@@ -514,12 +623,13 @@
          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={512} visible={upload} onCancel={() => setUpLoad(false)} footer={false} title='上传材料' centered>
        <div style={{ paddingTop: '24px' }}>
          <Row gutter={[30, 24]} style={{ margin: '0 2px 0 0' }}>
        <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}>
@@ -546,21 +656,22 @@
                requiredSymbol={false}
                initialValues={{
                }}//默认值
                style={{ position: 'relative' }}
              >

                <Row gutter={[32, 0]}>{formType(sourceType)}</Row>
              </Form>
            </Col>
            <Button type="primary">上传完成</Button>

            <Button type="primary" style={{ marginTop: '-20px', marginLeft: '16px' }}>上传完成</Button>
          </Row>
        </div>

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

 gz-customerSystem/src/views/register/visit/preview.jsx

@@ -2,70 +2,33 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-13 15:19:57
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-14 14:59:10
 * @LastEditTime: 2024-08-16 17:09:12
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx
 * @Description: 预览信息
 */
import React from "react";
import React, { useState } from "react";
import { Row, Col, Space } from 'antd';
import { person, question, link } from '../../../assets/images'
import '../index.less';
import TableView from '../../../components/TableView';
import { Modal } from '@arco-design/web-react';
import FilesCheck from '../../filesCheck';
import * as $$ from '../../../utils/utility';



const Preview = () => {
    const [filesCheck, setFilesCheck] = useState(false);

    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
        },
        {
            title: '材料数量',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '材料名称',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '上传时间',
            dataIndex: 'perClassName',
            key: 'perClassName',
        },
        {
            title: '操作',
            dataIndex: 'perClassName',
            key: 'perClassName',
            render: (text) => (
                <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
                    <div>查看</div>
                    <div>删除</div>
                    <div>下载</div>
                    <div>上传</div>
                </div>
            )
        },
        // 更多列配置...
    ];

    const fakeData1 = [
        {
            id: 1,
            caseNo: 'A20230101',
            judicNo: 'J20230101',
            perClassName: '自然人',
            judicNo: '申请材料',
            perClassName: '李晓明的纠纷化解申请表、身份证...',
            inputUserName: '张三',
            mediateUserName: '李四',
            mediateUserName: '2024-7-12 12:00',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
@@ -80,9 +43,82 @@
            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 表示系列案
            // 更多字段...
        },

        // 更多数据...
    ];

    // 列配置
    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
            width: 60,
            render: (text, record, index) => <span>{index + 1}</span>,
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
            width: 60,

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

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

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

        },
        {
            title: '操作',
            dataIndex: 'perClassName',
            key: 'perClassName',
            width: 200,
            render: (text) => (
                <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
                    <div onClick={() => setFilesCheck(true)}>查看</div>
                    <div>下载</div>
                </div>
            )
        },
        // 更多列配置...
    ];


    return (
@@ -239,7 +275,7 @@
            <Row gutter={[16, 16]}>
                <Col span={8}>
                    <div className="title"><div className="title-text">事项等级</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                    <div>3级</div>
                    <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#1A6FB8', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>3</div></div>级</div>
                </Col>
                <Col span={8}>
                    <div><div className="title-text">来访时间</div></div>
@@ -271,7 +307,7 @@
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">涉及金额（元）</div></div>
                    <div>20，000</div>
                    <div>{$$.thousands(20000)}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">事项来源</div></div>
@@ -294,15 +330,28 @@
                    <div>否</div>
                </Col>
            </Row>
            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
                <Space size='small'>
                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>事件材料</h5>
                </Space>
            </Col>

            <TableView
                columns={fakeColumns}
                dataSource={fakeData1}
                size="small"
                rowKey="id"
                bordered={true}
                style={{ marginBottom: '60px' }}
                style={{ marginBottom: '65px' }}
            />

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


        </div>
    )
}