申请结案

dminyi

2024-09-02 9365876679475117b2ac24fda870e835a3f99309

申请结案

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

@@ -50,7 +50,8 @@
import empty from "./empty.png";
import feedback from "./feedback.png";
import fold from "./fold.png";
import down from "./down.png"
import down from "./down.png";
import tip from "./tip.png"

export {
  ledger_1,
@@ -96,5 +97,6 @@
  empty,
  feedback,
  fold,
  down
  down,
  tip
};

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

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

New file
@@ -0,0 +1,317 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-09-02 14:49:13
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-02 19:44:37
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\handleFeedback\component\CaseResult.jsx
 * @Description: 结案申请
 */
import React, { useState } from 'react';
import { Modal, Form, Select, Upload, Input } from '@arco-design/web-react';
import { Col, Space, Button } from 'antd';
import DocumentScanner from './FileUpLoad'
import { scan } from '@/assets/images/icon'
import { tip } from '@/assets/images'

const FormItem = Form.Item;


const CaseResult = ({ visible = false, handleOnCancel }) => {



  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 tabs = [
    { index: '1', label: '化解成功' },
    { index: '2', label: '化解不成功' },
  ];

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

  const agreement = [
    { value: 1, label: '口头协议' },
    { value: 2, label: '书面协议' }
  ]


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

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

  const handleConfirm = () => {
    // 处理确认逻辑
    setScanFile(false);
  };

  const handleCancel = () => {
    // 处理取消逻辑
    setScanFile(false);
  };


  return (
    <>
      <Modal visible={visible} onCancel={handleOnCancel} title='申请结案' centered footer={null} style={{ overflow: 'auto' }}>
        <div className='caseResult-title'>化解结果</div>
        <div className='caseResult-tabs'>
          {tabs.map((tab) => (
            <div
              key={tab.index}
              style={{
                color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
                padding: '5px 16px',
                border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
                borderRadius: '2px',
                cursor: 'pointer',
              }}
              onClick={() => handleTabChange(tab.index)}
            >
              {tab.label}
            </div>
          ))}
        </div>
        <Form
          layout='vertical'
          scrollToFirstError={true}
          requiredSymbol={false}
          initialValues={{
            caseLevel: 1,
          }} //默认值
        >
          <Col span={8}>
            <FormItem
              label={<div style={{ display: 'flex' }}>
                达成的协议类型
              </div>
              }
              field='caseLevel'

            >
              <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>

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

            </>

          }
          {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='根据纠纷化解人员的协调，当事人双方同意如下调解协议：
                            [简要说明协议第一条]
                            [简要说明协议第二条]
                            [……]
                            本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。'
                  />
                </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>

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

            </>

          }
          <Space style={{ marginBottom: '16px' }}>
            <Button type='primary'>提交</Button>
            <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button>
          </Space>
        </Form>
      </Modal>
      <DocumentScanner
        visible={scanFile}
        onConfirm={handleConfirm}
        onCancel={handleCancel}
      />
    </>
  )
}

export default CaseResult;


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

@@ -12,6 +12,7 @@
import {
  IconLink,
} from '@arco-design/web-react/icon';
import CaseResult from './CaseResult'


const InputSearch = Input.Search;
@@ -75,6 +76,11 @@
  },
];

function getByIdRoleApi(id) {
  return $$.ax.request({ url: 'ctUser/getByIdRole?id=' + id, type: 'get', service: 'cust' });
}




const Handle = () => {
@@ -82,6 +88,8 @@
  const [wantUser, setWantUser] = useState({});
  const [formView, setFormView] = useState(false);
  const [personView, setPersonView] = useState(false);
  const [data, setData] = useState({})
  const [caseResult, SetCaseResult] = useState(false);

  const tabs = [
    { index: '1', label: '承办部门' },
@@ -89,7 +97,6 @@
  ];

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



@@ -195,6 +202,22 @@
    setScannerVisible(true);
  };

  const getByIdRole = async () => {
    const res = await getByIdRoleApi('2105180249501982')
    if (res.type) {
      let data = res.data
      setData(data)
    }

  }



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





@@ -218,7 +241,7 @@
              <div><div className="title-text">经办人：</div></div>
              <div style={{ display: 'flex' }}>
                <div>王一顺</div>
                <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
                <img onClick={() => setPersonView(!personView)} src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
              </div>
            </Col>
            <Col span={8} style={{ display: 'flex' }}>
@@ -249,7 +272,7 @@
                <FormItem label={<div style={{ display: 'flex' }}>
                  <span style={{ color: '#86909C' }}>经办人</span>
                  <Tooltip>
                    <img onClick={() => setPersonView(!personView)} src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                    <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                  </Tooltip>
                </div>
                }
@@ -374,7 +397,7 @@
            </Form>
            <Space style={{ marginTop: '38px', bottom: '4px' }}>
              <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={() => setFormView(!formView)}>添加办理记录</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >结案申请</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => SetCaseResult(!caseResult)}>结案申请</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button>
              <Button type='secondary'>返回上级页面</Button>
            </Space>
@@ -447,8 +470,28 @@
        />

        <Modal visible={personView} onCancel={() => setPersonView(false)} title='工作人员信息' centered footer={null}>
          
          <table border="1" align="center" cellpadding="5" className="table">
            <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
              <td width='380'><div style={{ display: 'flex' }}><div>{data.trueName}</div></div></td>
              <th bgcolor="#F7F8FA" className="table-title" width="120">登录账号</th>
              <td width='380'>{data.acc}</td>
            </tr>
            <tr>
              <th bgcolor="#F7F8FA" className="table-title">手机号码</th>
              <td>{data.mobile}</td>
              <th bgcolor="#F7F8FA" className="table-title">工作电话</th>
              <td>020-83002020</td>
            </tr>
            <tr>
              <th bgcolor="#F7F8FA" className="table-title">所属部门</th>
              <td>{data.deptName}</td>
              <th bgcolor="#F7F8FA" className="table-title">职务</th>
              <td>主任</td>
            </tr>
          </table>
        </Modal>
        <CaseResult visible={caseResult} handleOnCancel={() => SetCaseResult(false)} />

      </div>
    </>

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

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 09:59:43
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-28 14:38:20
 * @LastEditTime: 2024-09-02 14:31:31
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
 * @Description: 来访登记
 */
@@ -14,7 +14,7 @@
import '../index.less';
import { Typography, Steps, Tabs, Message } from '@arco-design/web-react';
import { question, register, Matter, transfer } from '@/assets/images'
import MatterDetali from '../matterDetail';
import MatterDetail from '../matterDetail';
import Handle from './component/handle';

const Step = Steps.Step;
@@ -78,7 +78,7 @@
                                </div>
                            }
                            {tabsActive === '1' &&
                                <MatterDetali />
                                <MatterDetail />
                            }
                            {
                                tabsActive === '2' && <Typography.Paragraph style={style}>

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

@@ -92,6 +92,7 @@

.dataSync {
    position: relative;

    &-page {
        background-color: #fff;
        margin: 8px 8px 0px 16px;
@@ -329,7 +330,7 @@
                        margin-left: 8px;
                    }

                    &-hostOrg{
                    &-hostOrg {
                        border: 1px solid #89C2E3;
                        padding: 0px 8px;
                        color: #1A6FB8;
@@ -358,7 +359,7 @@
    }
}

.Form{
.Form {
    padding: 12px 16px 16px 16px;
    border: 1px dashed #1a6fb8;
    border-radius: 10px;
@@ -391,10 +392,46 @@
    .arco-tabs-header-nav {
        margin-left: 16px
    }

    .arco-tabs-header-nav-line.arco-tabs-header-nav-horizontal>.arco-tabs-header-scroll .arco-tabs-header-title:first-of-type {
        margin-left: 0;
    }

    .arco-tabs-header-nav-line .arco-tabs-header-title {
        margin: 0 16px 0 0;
    }
}

.caseResult {
    &-title {
        padding-top: 4px;
        margin-bottom: 8px;
    }

    &-tabs {
        display: flex;
        margin-bottom: 18px;
    }

    &-tips {
        padding: 9px 16px;
        background-color: #E8F3FF;
        border-radius: 2px;
        margin-top: 8px;
    }

    &-textarea {
        border: 1px solid #1a6fb8;
        border-radius: 2px;
        padding: 0px 8px;
        color: #1A6FB8;
        width: fit-content;
        margin: 4px 0px 8px 0px;
    }
}

.tabs1 {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}