提交

dminyi

2024-09-08 4f7ea178a56ad2b88cbb8a742915804fc94bc65f

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

@@ -2,33 +2,42 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-09-02 14:49:13
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-03 14:44:14
 * @LastEditTime: 2024-09-08 17:52:21
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\handleFeedback\component\CaseResult.jsx
 * @Description: 结案申请
 */
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import { Modal, Form, Select, Upload, Input } from '@arco-design/web-react';
import { Col, Space, Button, Tooltip, Radio } from 'antd';
import { Col, Space, Button, Tooltip, Radio, Row } from 'antd';
import DocumentScanner from '../../matterDetail/FileUpLoad'
import { scan } from '@/assets/images/icon'
import { tip, question1 } from '@/assets/images'
import { NoHandleReason } from '../../visit/component/levelDetail'
import ArcoUpload from '../../../../components/ArcoUpload'
import { NoHandleReason } from '../../visit/component/levelDetail';
import ModeSelect from '../../matterDetail/ModeSelect'
import * as $$ from '@/utils/utility';
const appUrl = $$.appUrl;

const FormItem = Form.Item;


const CaseResult = ({ visible = false, handleOnCancel }) => {
function windupApplyApi(data) {
  return $$.ax.request({ url: `caseTask/windupApply`, type: 'post', service: 'mediate', data });
}



const CaseResult = ({ visible = false, handleOnCancel, caseResultId, caseId }) => {
  const formRef = useRef();
  const formRefWrite = 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 [noHandleReason, setNoHandleReason] = useState(false);
  const [radioValue, setRadioValue] = useState(1)

  const [radioValue, setRadioValue] = useState(1);
  const [mode, setMode] = useState(false)
  const [visibleType, setVisibleType] = useState(false)

  const tabs = [
    { index: '1', label: '化解成功' },
@@ -54,9 +63,11 @@
    setSelectedTab1(newTabIndex);
  };

  const handleConfirm = () => {
  const handleConfirm = (scanContent) => {
    // 处理确认逻辑
    formRef.current.setFieldValue('agreeContent', scanContent)
    setScanFile(false);

  };

  const handleCancel = () => {
@@ -69,10 +80,27 @@
    setRadioValue(e.target.value);
  };

  const handleSubmit = () => {
    const data = formRef.current.getFields()
    console.log(data, 'handleSubmit')
    windupApply(data)
  }

  const windupApply = async (submitData) => {
    const res = await windupApplyApi({
      caseResultId: caseResultId,
      ...submitData
    })
    if (res.type) {
      $$.infoSuccess({ content: '提交成功' });
      setVisibleType(false)
    }
  }


  return (
    <>
      <Modal visible={visible} onCancel={handleOnCancel} title='申请结案' centered footer={null} style={{ overflow: 'auto' }}>
      <Modal visible={visibleType || visible} onCancel={handleOnCancel} title='申请结案' centered footer={null} style={{ overflow: 'auto' }}>
        <div className='caseResult-title'>化解结果</div>
        <div className='caseResult-tabs'>
          {tabs.map((tab) => (
@@ -91,13 +119,14 @@
            </div>
          ))}
        </div>
        {/*化解成功*/}
        {selectedTab === '1' &&
          <Form
            layout='vertical'
            scrollToFirstError={true}
            requiredSymbol={false}
            initialValues={{
              caseLevel: 1,
              agreeType: 1,
            }} //默认值
          >
            <Col span={8}>
@@ -106,213 +135,216 @@
                  达成的协议类型
                </div>
                }
                field='caseLevel'

                field='agreeType'
              >
                <Select options={agreement} onChange={(v) => { setValue(v); console.log(typeof v, 'vvv') }}>
                </Select>
              </FormItem>
            </Col>
            {/*口头协议 */}
            {value === 1 &&
              <>
                <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>
                      ))}
                    </div>
                <Form
                  ref={formRef}
                  layout='vertical'
                  requiredSymbol={false}
                  scrollToFirstError={true}
                >
                  <Row>
                    <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>
                            <div className='modeMore'>
                              <div className='caseResult-textarea'>公共模板1：调解成功口头协议</div>
                              <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</div>
                            </div>
                          </>
                        }
                        field='agreeContent'
                      >
                        <Input.TextArea
                          rows={5}
                          maxLength={{ length: 200, errorOnly: true }}
                          showWordLimit
                          wrapperStyle={{ width: '100%' }}
                        />
                      </FormItem>
                    </Col>
                    <Col span={24}>
                      <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>

                    <Input.TextArea
                      rows={5}
                      wrapperStyle={{ width: '100%' }}
                      value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
                    />
                  </FormItem>
                </Col>

                            </div>
                          </>
                        }
                        field='windupContent'
                      >
                        <Input.TextArea
                          rows={5}
                          wrapperStyle={{ width: '100%' }}
                        />
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </>

            }
            {/*书面协议 */}
            {value === 2 &&
              <>
                <Col span={24}>
                  <FormItem
                    label={
                      <>
                        <div style={{ display: 'flex' }}>
                          协议文书
                          <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                        </div>
                        <div className='caseResult-tips'>
                          <img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} />
                          <span>如通过人民调解工作成功化解纠纷事项，建议上传签字盖章后的人民调解协议书</span>
                        </div>
                      </>
                    }
                    field='caseDes'
                    rules={[{ message: '请填写事项概况', required: true }]}
                  >
                    <Upload
                      drag
                      multiple
                      accept='image/*'
                      action='/'
                      height={158}
                      onDrop={(e) => {
                      }}
                      onChange={(v) => {
                        setFileTip((prevLength) => {
                          if (v.length > 0) {
                            console.log(v, 'vvvvvvv');
                            return v.length;
                          }
                          return v.length;
                        });
                      }}
                      tip='支持png、 jpg、excel、word、pdf等格式的文件上传，每次上传大小不超过10M'
                    />


                  </FormItem>
                </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='根据纠纷化解人员的协调，当事人双方同意如下调解协议：
                <Form
                  ref={formRefWrite}
                  layout='vertical'
                  requiredSymbol={false}
                  scrollToFirstError={true}
                >
                  <Row>
                    <Col span={24}>
                      <FormItem
                        label={
                          <>
                            <div style={{ display: 'flex' }}>
                              协议文书
                              <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                            </div>
                            <div className='caseResult-tips'>
                              <img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} />
                              <span>如通过人民调解工作成功化解纠纷事项，建议上传签字盖章后的人民调解协议书</span>
                            </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>
                    </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>
                        />
                      </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>
                          ))}
                        </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>
                      ))}
                    </div>

                    <Input.TextArea
                      rows={5}
                      wrapperStyle={{ width: '100%' }}
                      value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
                    />
                  </FormItem>
                </Col>

                        <Input.TextArea
                          rows={5}
                          wrapperStyle={{ width: '100%' }}
                          value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
                        />
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </>

            }
            <Space style={{ marginBottom: '16px' }}>
              <Button type='primary'>提交</Button>
              <Button type='primary' onClick={handleSubmit}>提交</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button>
            </Space>
          </Form>
        }
        {/*化解不成功*/}
        {selectedTab === '2' &&
          <Form
            layout='vertical'
@@ -420,7 +452,7 @@
            </Space>
          </Form>
        }
      </Modal>
      </Modal >
      <DocumentScanner
        visible={scanFile}
        onConfirm={handleConfirm}
@@ -430,6 +462,8 @@
        visible={noHandleReason}
        onClose={() => setNoHandleReason(false)}
      />
      <ModeSelect onCancel={() => setMode(false)} mode={mode} />

    </>
  )
}