feat：当事人文件上传对接

zhangyongtian

2024-09-02 08161d8379ce41fd902f61ea9be0f1ff7f1ab7f5

feat：当事人文件上传对接

 gz-customerSystem/src/api/appUrl.js

@@ -10,11 +10,11 @@
export const debug = {
    // web服务
    // baseUrl: 'http://gz.hugeinfo.com.cn',
    baseUrl: 'http://b8bmfu.natappfree.cc',
    baseUrl: 'http://9hf3ag.natappfree.cc',
    // baseUrl: 'http://mdqgnh.natappfree.cc',

    // 附件服务
    fileUrl: 'http://b8bmfu.natappfree.cc',
    fileUrl: 'http://9hf3ag.natappfree.cc',
    // fileUrl: 'http://gz.hugeinfo.com.cn',



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

New file
@@ -0,0 +1,74 @@
import React, { useEffect, useState } from 'react'
import { Upload, Form } from '@arco-design/web-react';
import {
  IconAttachment,
} from '@arco-design/web-react/icon';
import * as $$ from '../../utils/utility';
import './index.less';

const FormItem = Form.Item;

/**
 * params *, //upload组件参数
 * field *, // form的标识
 * handleChangeFile, // 文件上传成功之后的回调
 * label *, // form的label名
 * editData *, // 编辑回显数据
 */

export default function ArcoUpload(props) {
  const [myFileList, setMyFileList] = useState([])
  useEffect(() => {
    if(props.editData) {
      console.log(props.editData[props.field]);
      setMyFileList(props.editData[props.field])
    }
  }, [props.editData])

  return (
    <FormItem
      label={props.label}
      field={props.field}
      triggerPropName='fileList'
    >
      <Upload
        drag
        multiple
        accept='.png,.jpg,.pdf'
        onDrop={(e) => {
        }}
        tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
        showUploadList={{
          fileIcon: <IconAttachment style={{ color: '#1D2129' }} />,
        }}
        headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
        onChange={(fileList, file) => {
          console.log(fileList, myFileList, file);
          const { status, response } = file
          //因为字节upLoad组件有bug，不能区分添加文件还是删除文件，所以用这种办法来判断是不是删除
          const isDel = myFileList && myFileList.length > fileList.length
          //上传失败
          if (status === 'error' && !isDel) {
            $$.info({ type: 'error', content: '抱歉，网络错误附件上传失败，请稍后重试' });
          }
          //上传成功
          if (status === 'done' && !isDel) {
            if (response.code === 0 || response.code === '0') {
              // 返回附件成功上传的回调
              $$.infoSuccess({ content: response.msg });
              if (props.handleChangeFile) {
                props.handleChangeFile(response);
              }
            }
          }
          //删除文件
          if (isDel) {

          }
          setMyFileList(fileList)
        }}
        {...props.params}//自定义
      />
    </FormItem>
  )
}

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

New file
@@ -0,0 +1,16 @@
.arco-upload-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.arco-upload-list-item {
  width: calc(50% - 17px);
  margin-top: 24px;
  margin-left: 17px;

  &:nth-child(2n+1) {
    width: calc(50% - 17px);
    margin-right: 17px;
    margin-left: 0px;
  }
}

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

@@ -177,11 +177,11 @@
    }
}

.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;
// .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;

}
// }

.unitDialogResult {
    font-size: 16px;

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

@@ -2,20 +2,24 @@
import { Row, Col, Space } from 'antd';
import { Form, Input, Button, Radio, Select, Checkbox, Upload } from '@arco-design/web-react';
import KeyVisits from "@/components/personCard/KeyVisits";
import {
  IconLink,
} from '@arco-design/web-react/icon';
import * as $$ from '@/utils/utility';
import ArcoUpload from '@/components/ArcoUpload';

const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const appUrl = $$.appUrl;

function getId() {
  return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
}

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

  useEffect(() => {
    if (props.editData) {
@@ -23,7 +27,6 @@
      formRef.current.setFieldsValue({
        ...props.editData
      })
      console.log(props);
      //过滤代理人
      setVisitList(props.fakeData.filter(item => {
        if (props.editData.perType === '24_00006-1') {
@@ -41,8 +44,18 @@
          return item.perType === '15_020008-2'
        }
      }))
      //获取id
      getAppId()
    }
  }, [])

  //获取id
  const getAppId = async () => {
    const res = await getId()
    if (res.type) {
      setId(res.data)
    }
  }

  //保存信息
  const handleSave = () => {
@@ -53,17 +66,31 @@
          if (props.editData) {
            props.handleAddParty({
              ...fieldValue
            })
            }, true)
          } else {
            props.handleAddParty({
              ...fieldValue,
              perType: props.dialogType,
              perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
            })
              id: id
            }, false)
          }
          props.onClose()
        }
      });
    }
  }

  //上传身份证识别
  const handleChangeFile = (data) => {
    if (data.data && data.data.length != 0) {
      if (data.data[0].idcardOcrResult) {
        const { birthday, ...rest } = data.data[0].idcardOcrResult
        //回填信息
        formRef.current.setFieldsValue({
          ...rest
        })
      }
    }
  }

@@ -82,39 +109,25 @@
            >
              <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>
                <Col span={24}>
                  <FormItem
                    label='身份证明材料'
                  <ArcoUpload
                    params={{
                      action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
                    }}
                    field='file'
                  >
                    <Upload
                      drag
                      multiple
                      accept='image/*'
                      action='/'
                      onDrop={(e) => {
                      }}
                      tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
                      showUploadList={{
                        fileIcon: <IconLink style={{ color: '#1D2129' }} />,
                      }}
                    handleChangeFile={handleChangeFile}
                    label='身份证明材料'
                    editData={props.editData}
                    />
                  </FormItem>
                </Col>
                <Col span={24}>
                  <FormItem
                    label='代理人委托书'
                    field='file1'
                  >
                    <Upload
                      drag
                      multiple
                      accept='image/*'
                      action='/'
                      onDrop={(e) => {
                  <ArcoUpload
                    params={{
                      action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
                      }}
                      tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
                    field='file1'
                    label='代理人委托书'
                    editData={props.editData}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
@@ -303,7 +316,19 @@
        >
          保存
        </Button>
        <Button className="dialogBack">
        <Button
          className="dialogBack"
          onClick={() => {
            if (props.editData) {
              formRef.current.resetFields();
              formRef.current.setFieldsValue({
                ...props.editData
              })
            } else {
              formRef.current.resetFields();
            }
          }}
        >
          重置
        </Button>
      </div>

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

@@ -15,19 +15,24 @@
import { Form, Input, Button, Radio, Select, Modal, Cascader, Upload, Message } from '@arco-design/web-react';
import KeyVisits from "@/components/personCard/KeyVisits";
import SelectUnitDialog from "./selectUnitDialog";
import {
  IconLink,
} from '@arco-design/web-react/icon';
import ArcoUpload from '@/components/ArcoUpload';

const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
const RadioGroup = Radio.Group;
const appUrl = $$.appUrl;


function getId() {
  return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
}

export default function ApplyDialog(props) {
  const formRef = useRef();
  const [perClass, setPerClass] = useState('09_01001-1');
  const [visible, setVisible] = useState(false);
  const [id, setId] = useState()

  useEffect(() => {
    if (props.editData) {
@@ -36,9 +41,19 @@
        ...props.editData
      })
      setPerClass(props.editData.perClass)
      setId(props.editData.id)
    } else {
      getAppId()
    }
  }, [])

  //获取id
  const getAppId = async () => {
    const res = await getId()
    if (res.type) {
      setId(res.data)
    }
  }

  const personIconType = (v) => {
    switch (v) {
@@ -51,6 +66,19 @@
    }
  }

  //上传身份证识别
  const handleChangeFile = (data) => {
    if (data.data && data.data.length != 0) {
      if (data.data[0].idcardOcrResult) {
        const { birthday, ...rest } = data.data[0].idcardOcrResult
        //回填信息
        formRef.current.setFieldsValue({
          ...rest
        })
      }
    }
  }

  //页面返回
  const formType = (type) => {
    if (type === '09_01001-1') {
@@ -58,23 +86,15 @@
      return (
        <>
          <Col span={24}>
            <FormItem
              label='身份证明材料'
            <ArcoUpload
              params={{
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
              }}
              field='file'
            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                onDrop={(e) => {
                }}
                tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
                showUploadList={{
                  fileIcon: <IconLink style={{ color: '#1D2129' }} />,
                }}
              handleChangeFile={handleChangeFile}
              label='身份证明材料'
              editData={props.editData}
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
@@ -202,36 +222,24 @@
      return (
        <>
          <Col span={24}>
            <FormItem
              label={isLegal ? '企业登记材料' : '机构登记材料'}
              field='file'
            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                onDrop={(e) => {
            <ArcoUpload
              params={{
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
                }}
                tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
              field='file'
              label={isLegal ? '企业登记材料' : '机构登记材料'}
              editData={props.editData}
              />
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem
              label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'}
              field='file1'
            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                onDrop={(e) => {
            <ArcoUpload
              params={{
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
                }}
                tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
              field='file1'
              label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'}
              editData={props.editData}
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
@@ -304,18 +312,20 @@
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          const fieldValue = formRef.current.getFields()
          console.log(fieldValue);
          if (props.editData) {
            props.handleAddParty({
              ...fieldValue
            })
            }, true)
          } else {
            props.handleAddParty({
              ...fieldValue,
              perType: props.dialogType,
              perClass: perClass,
              perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
              perClassName: $$.options.personClass.find(item => item.value === perClass).label
            })
              perClassName: $$.options.personClass.find(item => item.value === perClass).label,
              id: id
            }, false)
          }
          props.onClose()
        }
@@ -379,7 +389,21 @@
        >
          保存
        </Button>
        <Button className="dialogBack">
        <Button
          className="dialogBack"
          onClick={() => {
            if (props.editData) {
              formRef.current.resetFields();
              formRef.current.setFieldsValue({
                ...props.editData
              })
              setPerClass(props.editData.perClass)
            } else {
              formRef.current.resetFields();
              setPerClass('09_01001-1')
            }
          }}
        >
          重置
        </Button>
      </div>

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

@@ -25,10 +25,6 @@
const FormItem = Form.Item;
const InputSearch = Input.Search;

function getId() {
  return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
}


const VisitorRegister = (props) => {
  const [dialogType, setDialogType] = useState();//添加当事人的类型
@@ -259,44 +255,6 @@
    // 更多列配置...
  ];

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

  //获取id
  const getAppId = async (value) => {
    const res = await getId()
    if (res.type) {
      setFakeData([...fakeData, {
        ...value,
        id: res.data
      }])
    }
  }

  //获取当前时间
  const getFormattedDateTime = () => {
    let now = new Date();
@@ -320,8 +278,9 @@
  }

  //添加当事人
  const handleAddParty = (value) => {
    if (value.id) {
  const handleAddParty = (value, isEdit) => {
    console.log(value, isEdit);
    if (isEdit) {
      //编辑
      const newList = fakeData.map(item => {
        if (item.id === value.id) {
@@ -333,7 +292,9 @@
      setFakeData(newList)
      setEditData(null)
    } else {
      getAppId(value)
      setFakeData([...fakeData, {
        ...value
      }])
    }
  }

@@ -742,6 +703,7 @@
          onClose={() => setAddVisabled(false)}
          handleAddParty={handleAddParty}
          editData={editData}
          mainId={props.mainId}
        />
      </Modal>
      <Modal
@@ -764,6 +726,7 @@
          fakeData={fakeData}
          dialogType={dialogType}
          editData={editData}
          mainId={props.mainId}
        />
      </Modal>
      <Modal

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

@@ -7,7 +7,7 @@
 * @Description: 来访登记
 */

import React, { useState, useRef, Fragment } from "react";
import React, { useState, useRef, Fragment, useEffect } from "react";
import NewPage from '@/components/NewPage';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
@@ -37,6 +37,19 @@

    const [isReview, setIsReview] = useState(false);//预览页面控制
    const [current, setCurrent] = useState(1);
    const [id, setId] = useState();

    useEffect(() => {
        getAppId()
    }, [])

    //获取id
    const getAppId = async () => {
        const res = await getId()
        if (res.type) {
            setId(res.data)
        }
    }

    //提交信息，需要校验规则
    const handleSubmit = async () => {
@@ -44,13 +57,12 @@
            formRef.current.validate(undefined, (errors, values) => {
                if (!errors) {
                    const {myCaseType, myQuesAddress, ...rest} = formRef.current.getFields()
                    handleData(rest).then(res => {
                    const params = handleData(rest)
                        reauestSubmit({
                            ...res,
                        ...params,
                            isSelfAccept: 0,
                            isDraft: 0,
                            operateType: 0,
                        })
                    })
                }
            });
@@ -61,44 +73,36 @@
    const handleSave = () => {
        if (formRef.current) {
            const {myCaseType, myQuesAddress, ...rest} = formRef.current.getFields()
            handleData(rest).then(res => {
                requestSave(res)
            })
            const params = handleData(rest)
            requestSave(params)
        }
    }

    //数据处理
    const handleData = async (data) => {
    const handleData = (data) => {
        const { fakeData, ...newObj } = data
        if (data.id) {
            return {
                ...newObj,
                personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
                agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
                    //personNameList用于查看详情显示代理人名字，不需要上传，去除
                    const { personNameList, ...rest } = item
                    return {
                        ...rest,
                        ...item,
                        personId: item.personId.join(',')
                    }
                }),
            }
        } else {
            const res = await getId()
            if (res.type) {
                return {
                    ...newObj,
                    personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
                    agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
                        //personNameList用于查看详情显示代理人名字，不需要上传，去除
                        const { personNameList, ...rest } = item
                        return {
                            ...rest,
                        ...item,
                            personId: item.personId.join(',')
                        }
                    }),
                    id: res.data
                }
                id: id
            }
        }
    }
@@ -156,7 +160,7 @@
                        </Steps>
                    </div>
                    <Preview style={{ display: isReview ? '' : 'none' }} />
                    <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} />
                    <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} mainId={id} />
                    <div className="dataSync-excel">
                        <Space size="large" style={{ margin: '4px 14px' }}>
                            <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>