Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh ...

liuwh

2024-09-17 5aa4a814ab8d4aa194a9683ebefaefdfc6d92c3a

 gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx

@@ -2,11 +2,12 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-09-02 14:49:13
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-08 17:52:21
 * @LastEditTime: 2024-09-12 12:03:56
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\handleFeedback\component\CaseResult.jsx
 * @Description: 结案申请
 */
import React, { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Modal, Form, Select, Upload, Input } from '@arco-design/web-react';
import { Col, Space, Button, Tooltip, Radio, Row } from 'antd';
import DocumentScanner from '../../matterDetail/FileUpLoad'
@@ -18,7 +19,10 @@
import * as $$ from '@/utils/utility';
const appUrl = $$.appUrl;


const FormItem = Form.Item;
const TextArea = Input.TextArea;


function windupApplyApi(data) {
  return $$.ax.request({ url: `caseTask/windupApply`, type: 'post', service: 'mediate', data });
@@ -26,28 +30,24 @@



const CaseResult = ({ visible = false, handleOnCancel, caseResultId, caseId }) => {
const CaseResult = ({ visible = false, handleOnCancel, caseResultId, caseId, caseTaskId }) => {
  const formRef = useRef();
  const [selectedTemplate, setSelectedTemplate] = useState();
  const [selectedTemplate1, setSelectedTemplate1] = useState();
  const [selectedTemplate2, setSelectedTemplate2] = useState();
  const navigate = useNavigate();
  const formRefWrite = useRef();
  const failRef = useRef();
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [scanFile, setScanFile] = useState(false);
  const [selectedTab1, setSelectedTab1] = useState('1'); // 默认选中第一个 tab
  const [fileTip, setFileTip] = useState('0');
  const [value, setValue] = useState(1)
  const [value, setValue] = useState(2)
  const [noHandleReason, setNoHandleReason] = useState(false);
  const [radioValue, setRadioValue] = useState(1);
  const [mode, setMode] = useState(false)
  const [visibleType, setVisibleType] = useState(false)

  const tabs = [
    { index: '1', label: '化解成功' },
    { index: '2', label: '化解不成功' },
  ];

  const tabs1 = [
    { index: '1', label: '公共模板1：化解成功结案意见范本' },
    { index: '2', label: '个人模板1：化解成功结案意见范本（完整版）' }
  ]

  const agreement = [
    { value: 1, label: '口头协议' },
@@ -57,10 +57,6 @@

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

  const handleTabChange1 = (newTabIndex) => {
    setSelectedTab1(newTabIndex);
  };

  const handleConfirm = (scanContent) => {
@@ -75,32 +71,115 @@
    setScanFile(false);
  };

  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setRadioValue(e.target.value);
  };

  const handleSubmit = () => {
    const data = formRef.current.getFields()
    console.log(data, 'handleSubmit')
    windupApply(data)
  const handleTemplate = (type) => {
    setSelectedTemplate(type);
    if (type === 1) {
      formRef.current.setFieldValue('windupContent', '双方当事人于xx时间xx地址已达成xx协议，纠纷已化解。')
    } else {
      formRef.current.setFieldValue('windupContent', '')
    }
  }

  const handleTemplate1 = (type) => {
    setSelectedTemplate1(type);
    if (type === 1) {
      formRef.current.setFieldValue('agreeContent', '根据纠纷化解人员的协调，当事人双方同意如下调解协议：[简要说明协议第一条][简要说明协议第二条][……]本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。')
    }
  }

  const handleTemplate2 = (type) => {
    setSelectedTemplate2(type);
    if (type === 1) {
      formRefWrite.current.setFieldValue('windupContent', '双方当事人于xx时间xx地址已达成xx协议，纠纷已化解。')
    } else {
      formRefWrite.current.setFieldValue('windupContent', '')
    }
  }

  const handleTemplate3 = (type) => {
    if (type === 1) {
      failRef.current.setFieldValue('windupContent', '经过多次调解，尽管纠纷化解人员尽最大努力帮助双方找到解决方案，但由于以下原因，当事人双方未能达成一致意见：[详细说明化解未成功的原因之一][详细说明化解未成功的原因之二][……][……]鉴于上述情况，纠纷化解人员认为目前无法通过调解方式解决双方的争议，建议双方考虑采取其他合法途径解决纠纷。')
    } else {
      failRef.current.setFieldValue('windupContent', '')
    }
  }

  //化解成功的提交处理
  const handleSubmit = () => {
    //口头协议
    if (value === 1) {
      formRef?.current.validate(undefined, (errors, values) => {
        if (!errors) {
          const data = formRef?.current.getFields()
          windupApply({
            agreeType: '24_00003-1',
            agreeTypeName: '口头协议',
            ...data
          })
        }
      })
    }
    //书面协议
    if (value === 2) {
      formRefWrite?.current.validate(undefined, (errors, values) => {
        if (!errors) {
          const { file, ...rest } = formRefWrite?.current.getFields()
          windupApply({
            agreeType: '24_00003-2',
            agreeTypeName: '书面协议',
            ...rest
          })
        }
      })
    }
  }

  //化解不成功的提交处理
  const handleSubmit1 = () => {
    failRef?.current.validate(undefined, (errors, values) => {
      if (!errors) {
        const { failReason1, failReason2, failReason3, ...rest } = failRef?.current.getFields()
        const failReason = `1、${failReason1}；2、${failReason2}；3、${failReason3}。`
        windupApply({
          failReason: failReason,
          ...rest
        })
      }
    })

  }

  //结案申请请求
  const windupApply = async (submitData) => {
    console.log(submitData);
    const res = await windupApplyApi({
      mediResultName: selectedTab === '1' ? '化解成功' : '化解不成功',
      mediResult: selectedTab === '1' ? '22_00025-1' : '22_00025-2',
      caseTaskId: caseTaskId,
      caseId: caseId,
      caseResultId: caseResultId,
      ...submitData
    })
    if (res.type) {
      $$.infoSuccess({ content: '提交成功' });
      setVisibleType(false)
      handleOnCancel();
      navigate('/mediate/visit/visitWorkBench')
    }
  }


  return (
    <>
      <Modal visible={visibleType || visible} onCancel={handleOnCancel} title='申请结案' centered footer={null} style={{ overflow: 'auto' }}>
      <Modal
        visible={visible}
        onCancel={handleOnCancel}
        title='申请结案'
        centered
        footer={null}
        style={{ overflow: 'auto' }}
        unmountOnExit={true}
        maskClosable={false}
      >
        <div className='caseResult-title'>化解结果</div>
        <div className='caseResult-tabs'>
          {tabs.map((tab) => (
@@ -126,7 +205,7 @@
            scrollToFirstError={true}
            requiredSymbol={false}
            initialValues={{
              agreeType: 1,
              agreeType: value,
            }} //默认值
          >
            <Col span={8}>
@@ -137,7 +216,7 @@
                }
                field='agreeType'
              >
                <Select options={agreement} onChange={(v) => { setValue(v); console.log(typeof v, 'vvv') }}>
                <Select options={agreement} onChange={(v) => { setValue(v); }}>
                </Select>
              </FormItem>
            </Col>
@@ -151,72 +230,64 @@
                  scrollToFirstError={true}
                >
                  <Row>
                    <Col span={24}>
                    <Col span={24} style={{ position: 'relative' }}>
                      <FormItem
                        label={
                        label={(
                          <>
                            <div style={{ display: 'flex' }}>
                              协议要点
                              <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                              <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                              <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别材料</div>
                              <div className="must">必填</div>
                            </div>
                            <div className='caseResult-tips'>
                              <img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} />
                              <img src={tip} alt='' style={{ width: '16px', marginRight: '8px', marginTop: '-5px' }} />
                              <span>协议要点应尽量简洁，当事人大厅来访或小程序线上反映问题时，可在小程序中查看到填写的协议要点内容</span>
                            </div>
                            <div className='modeMore'>
                              <div className='caseResult-textarea'>公共模板1：调解成功口头协议</div>
                              <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</div>
                            <div style={{ position: 'absolute', display: 'flex ', top: '79px', zIndex: 1 }}>
                              <div
                                className={`myTag ${selectedTemplate1 === 1 ? 'highlighted' : ''}`} // 条件样式
                                style={{ marginRight: '22px' }}
                                onClick={() => handleTemplate1(1)}
                              >
                                公共模板:调解成功口头协议
                              </div>
                            </div>
                          </>
                        }
                        )}
                        field='agreeContent'
                        rules={[{ message: '请填写协议要点', required: true }]}
                      >
                        <Input.TextArea
                          rows={5}
                          maxLength={{ length: 200, errorOnly: true }}
                          showWordLimit
                          wrapperStyle={{ width: '100%' }}
                        <TextArea
                          autoSize={{ minRows: 4, maxRows: 8 }}
                          placeholder='请填写'
                          style={{ marginTop: '40px' }}
                        />
                      </FormItem>
                    </Col>
                    <Col span={24}>
                    <Col span={24} style={{ position: 'relative' }}>
                      <div style={{ position: 'absolute', display: 'flex', top: '28px', zIndex: 1 }}>
                        <div
                          className={`myTag ${selectedTemplate === 1 ? 'highlighted' : ''}`} // 条件样式
                          style={{ marginRight: '22px' }}
                          onClick={() => handleTemplate(1)}
                        >
                          公共模板：化解成功结案意见范本
                        </div>
                        <div
                          className={`myTag ${selectedTemplate === 2 ? 'highlighted' : ''}`} // 条件样式
                          onClick={() => handleTemplate(2)}
                        >
                          个人模板：化解成功结案意见范本（完整版）
                        </div>
                      </div>
                      <FormItem
                        label={
                          <>
                            <div style={{ display: 'flex' }}>
                              结案意见
                              <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                            </div>
                            <div className='modeMore'>
                              <div className='tabs1' >
                                {tabs1.map((tab) => (
                                  <div
                                    key={tab.index}
                                    style={{
                                      color: selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
                                      border: `1px solid ${selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
                                      borderRadius: '2px',
                                      cursor: 'pointer',
                                      padding: '0px 8px',
                                    }}
                                    onClick={() => handleTabChange1(tab.index)}
                                  >
                                    {tab.label}
                                  </div>
                                ))}
                              </div>
                              <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</div>

                            </div>
                          </>
                        }
                        label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)}
                        field='windupContent'
                        rules={[{ message: '请填写结案意见', required: true }]}
                      >
                        <Input.TextArea
                          rows={5}
                          wrapperStyle={{ width: '100%' }}
                        <TextArea
                          autoSize={{ minRows: 4, maxRows: 8 }}
                          placeholder='请填写'
                          style={{ marginTop: '35px' }}
                        />
                      </FormItem>
                    </Col>
@@ -235,7 +306,14 @@
                >
                  <Row>
                    <Col span={24}>
                      <FormItem
                      <ArcoUpload
                        params={{
                          action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${caseResultId}&ownerType=22_00018-302`,
                        }}
                        formItemParams={{
                          rules: [{ message: '请上传协议文书', required: true }]
                        }}
                        field='file'
                        label={
                          <>
                            <div style={{ display: 'flex' }}>
@@ -248,95 +326,41 @@
                            </div>
                          </>
                        }
                        field='caseDes'
                        rules={[{ message: '请填写事项概况', required: true }]}
                      >
                        <ArcoUpload
                          params={{
                            action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${caseResultId}&ownerType=22_00018-207`,
                          }}
                          field='file1'
                          label='代理人委托书'
                          // editData={props.editData}
                          ownerType='22_00018-207'
                        />
                      </FormItem>
                        ownerType='22_00018-302'
                      />
                    </Col>
                    <Col span={24}>
                      <FormItem
                        label={
                          <>
                            <div style={{ display: 'flex' }}>
                              协议要点
                              <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                              <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                              <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别材料</div>
                            </div>
                            <div className='caseResult-tips'>
                              <img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} />
                              <span>协议要点应尽量简洁，当事人大厅来访或小程序线上反映问题时，可在小程序中查看到填写的协议要点内容</span>
                            </div>
                          </>
                        }
                        field='caseDes'
                        rules={[{ message: '请填写事项概况', required: true }]}
                      >
                        <div className='caseResult-textarea'>公共模板1：调解成功口头协议</div>
                        <Input.TextArea
                          rows={5}
                          maxLength={{ length: 200, errorOnly: true }}
                          showWordLimit
                          wrapperStyle={{ width: '100%' }}
                          value='根据纠纷化解人员的协调，当事人双方同意如下调解协议：
                                  [简要说明协议第一条]
                                  [简要说明协议第二条]
                                  [……]
                                  本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。'
                        />
                      </FormItem>
                    </Col>
                    <Col span={24}>
                      <FormItem
                        label={
                          <>
                            <div style={{ display: 'flex' }}>
                              结案意见
                              <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                            </div>
                          </>
                        }
                        field='caseDes'
                        rules={[{ message: '请填写事项概况', required: true }]}
                      >
                        <div className='tabs1' >
                          {tabs1.map((tab) => (
                            <div
                              key={tab.index}
                              style={{
                                color: selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
                                border: `1px solid ${selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
                                borderRadius: '2px',
                                cursor: 'pointer',
                                padding: '0px 8px',
                              }}
                              onClick={() => handleTabChange1(tab.index)}
                            >
                              {tab.label}
                            </div>
                          ))}
                    <Col span={24} style={{ position: 'relative' }}>
                      <div style={{ position: 'absolute', display: 'flex', top: '28px', zIndex: 1 }}>
                        <div
                          className={`myTag ${selectedTemplate2 === 1 ? 'highlighted' : ''}`} // 条件样式
                          style={{ marginRight: '22px' }}
                          onClick={() => handleTemplate2(1)}
                        >
                          公共模板：化解成功结案意见范本
                        </div>
                        <div
                          className={`myTag ${selectedTemplate2 === 2 ? 'highlighted' : ''}`} // 条件样式
                          onClick={() => handleTemplate2(2)}
                        >
                          个人模板：化解成功结案意见范本（完整版）
                        </div>
                      </div>

                        <Input.TextArea
                          rows={5}
                          wrapperStyle={{ width: '100%' }}
                          value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
                      <FormItem
                        label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)}
                        field='windupContent'
                        rules={[{ message: '请填写结案意见', required: true }]}
                      >
                        <TextArea
                          autoSize={{ minRows: 4, maxRows: 8 }}
                          placeholder='请填写'
                          style={{ marginTop: '35px' }}
                        />
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </>

            }
            <Space style={{ marginBottom: '16px' }}>
              <Button type='primary' onClick={handleSubmit}>提交</Button>
@@ -347,108 +371,100 @@
        {/*化解不成功*/}
        {selectedTab === '2' &&
          <Form
            ref={failRef}
            layout='vertical'
            requiredSymbol={false}
            scrollToFirstError={true}
            initialValues={{
              caseLevel: 3,
            }}//默认值
          >
            <Col span={24}>
              <FormItem
                label={<div style={{ display: 'flex' }}>
                  无法化解理由
                  <Tooltip onClick={() => setNoHandleReason(!noHandleReason)}>
                    <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                  </Tooltip>
                  <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                </div>
                }
                field='caseDes'
                rules={[{ message: '请填写事项概况', required: true }]}
              >
                <table border="1" align="center" cellpadding="8" className="table">
                  <tr>
                    <th bgcolor="#F7F8FA" className="table-title" width="120">调解过程中提供的解决方案</th>
                    <td>
                      <Input.TextArea
                        showWordLimit
                        rows={3}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </td>
                  </tr>
                  <tr>
                    <th bgcolor="#F7F8FA" className="table-title">调解过程中的主要分歧点</th>
                    <td>
                      <Input.TextArea
                        showWordLimit
                        rows={3}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </td>
                  </tr>
                  <tr>
                    <th bgcolor="#F7F8FA" className="table-title">最终难以调和的原因</th>
                    <td>
                      <Input.TextArea
                        showWordLimit
                        rows={3}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </td>
                  </tr>
                </table>
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                label={
                  <>
                    <div style={{ display: 'flex' }}>
                      结案意见
                      <div className="must" style={{ marginLeft: '4px' }}>必填</div>
              <div style={{ display: 'flex', marginBottom: '16px' }}>
                无法化解理由
                <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                <div className="must" style={{ marginLeft: '4px' }}>必填</div>
              </div>
              <table border="1" align="center" cellpadding="8" className="table">
                <tr>
                  <th bgcolor="#F7F8FA" className="table-title" width="120">当事人的主要诉求</th>
                  <td>
                    <div>
                      鉴于上述情况，申请方希望综治中心可以帮忙解决：<br />
                      1. 请求判决被申请人张三立即偿还借款本金人民币20万元整；<br />
                      2. 请求判决被申请人支付自借款之日起至实际还款之日止按合同约定的年利率计算的利息；
                    </div>
                  </>
                }
                field='caseDes'
                rules={[{ message: '请填写事项概况', required: true }]}
                  </td>
                </tr>
                <tr>
                  <th bgcolor="#F7F8FA" className="table-title" width="120">调解过程中提供的解决方案</th>
                  <td>
                    <FormItem
                      label=''
                      field='failReason1'
                      rules={[{ message: '请填写调解过程中提供的解决方案', required: true }]}
                    >
                      <Input.TextArea
                        showWordLimit
                        rows={3}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </FormItem>
                  </td>
                </tr>
                <tr>
                  <th bgcolor="#F7F8FA" className="table-title">调解过程中的主要分歧点</th>
                  <td>
                    <FormItem
                      label=''
                      field='failReason2'
                      rules={[{ message: '请填写调解过程中的主要分歧点', required: true }]}
                    >
                      <Input.TextArea
                        showWordLimit
                        rows={3}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </FormItem>
                  </td>
                </tr>
                <tr>
                  <th bgcolor="#F7F8FA" className="table-title">最终难以调和的原因</th>
                  <td>
                    <FormItem
                      label=''
                      field='failReason3'
                      rules={[{ message: '请填写最终难以调和的原因', required: true }]}
                    >
                      <Input.TextArea
                        showWordLimit
                        rows={3}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </FormItem>
                  </td>
                </tr>
              </table>
            </Col>
            <Col span={24} style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', display: 'flex ', top: '28px', zIndex: 1 }}>
                <div className='myTag' style={{ marginRight: '22px' }} onClick={() => { handleTemplate3(1) }}>公共模板：化解不成功结案意见范本</div>
              </div>
              <FormItem
                label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)}
                field='windupContent'
                rules={[{ message: '请填写结案意见', required: true }]}
              >
                <div className='caseResult-textarea'>公共模板1：化解不成功结案意见范本</div>
                <Input.TextArea
                  rows={5}
                  wrapperStyle={{ width: '100%' }}
                  value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
                <TextArea
                  autoSize={{ minRows: 4, maxRows: 8 }}
                  placeholder='请填写'
                  style={{ marginTop: '35px' }}
                />
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                label='是否转诉讼案件'
                field='caseDes'
              >
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Space direction="vertical">
                    <Radio value={1}>否</Radio>
                    <Radio value={2}>是</Radio>
                  </Space>
                </Radio.Group>
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                label='是否转诉诉讼案号讼案件'
                field='caseDes'
              >
                <Input style={{ width: 350 }} placeholder='请输入法院立案号' />
              </FormItem>
            </Col>
            <Space style={{ marginBottom: '16px' }}>
              <Button type='primary'>提交</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button>
              <Button type='primary' onClick={handleSubmit1}>提交</Button>
              {/* <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button> */}
            </Space>
          </Form>
        }