更多模板组件

dminyi

2024-09-06 e73f44340ad269218a941a052f291adc9d954a50

更多模板组件

 gz-customerSystem/src/views/register/matterDetail/ModeSelect.jsx

New file
@@ -0,0 +1,145 @@
import React, { useState } from 'react';
import TableView from '@/components/TableView';
import { Modal } from '@arco-design/web-react';


const ModeSelect = ({ mode, onCancel }) => {
  const [modeDetail, setModeDetail] = useState(false);

  const fakeColumns = [
    {
      title: '序号',
      dataIndex: 'caseNo',
      key: 'caseNo',
      width: 51,
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '类型',
      dataIndex: 'judicNo',
      key: 'judicNo',
      width: 85,

    },
    {
      title: '模板名称',
      dataIndex: 'inputUserName',
      key: 'perClassName',
      width: 160,
      render: (text) => (
        <>
          {text}
          {/* {sourceType === '1' ? matterNumber : sourceType === '2' ? evidenceNumber : 0}份 */}
        </>
      )


    },
    {
      title: '模板内容',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 400,
      render: (text) => (
        <div style={{}}>
          <div style={{ width: '300px', height: '110px', overflow: 'hidden', display: 'flex', whiteSpace: 'pre-line' }}>{text}</div>
          <div style={{ color: '#1A6FB8', marginTop: '4px' }} onClick={() => setModeDetail(true)}>...查看更多</div>
        </div>
      )

    },
    {
      title: '操作',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 53,
      render: (text) => (
        <div style={{ color: '#1A6FB8' }}>使用</div>
      )
    },
    // 更多列配置...
  ];

  const fakeData1 = [
    {
      id: 1,
      caseNo: 'A20230101',
      judicNo: '公共模板',
      perClassName: '鉴于本事项的重要性及紧迫性，现要求你尽快启动调解程序[事项1......][事项2......]',
      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 表示系列案
      // 更多字段...
    },
    {
      id: 2,
      caseNo: 'A20230101',
      judicNo: '个人模板',
      perClassName: '鉴于本事项的重要性及紧迫性，现要求你尽快启动调解程序[事项1......][事项2......]',
      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 handleUse = () => {
    setModeDetail(!modeDetail)
  }

  return (
    <>
      <Modal visible={mode} onCancel={onCancel} title='选择模板' centered footer={null}>
        <TableView
          columns={fakeColumns}
          dataSource={fakeData1}
          size="small"
          rowKey="id"
          bordered={true}
          style={{}}
        />
      </Modal>
      <Modal simple={true} visible={modeDetail} cancelText='关闭' okText='使用' onOk={() => handleUse()} onCancel={() => setModeDetail(!modeDetail)} style={{ width: '400px', borderRadius: ' 4px' }}>
        <div className='modal'>
          <div className='modal-mark'>模板</div>
          <div className='modal-title'>尽快启动调解程序督办</div>
        </div>
        <div style={{ marginBottom: '-16px' }}>
          鉴于本事项的重要性及紧迫性，现要求你尽快启动调解程序，并确保案件能够得到及时有效的处理。请您务必于本周内完成以下
          事项：<br />
          [事项1......]<br />
          [事项2......]<br />
          [事项3......]<br />
          请确保在事项办理的过程中，遵循公平、公正的原则，并积极促进双方达成共识。
        </div>
      </Modal>

    </>
  )
}

export default ModeSelect;

 gz-customerSystem/src/views/register/matterDetail/Supervising.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-09-06 09:54:09
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-06 10:18:22
 * @LastEditTime: 2024-09-06 10:36:42
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\matterDetail\Supervising.jsx
 * @Description: 督办
 */
@@ -14,7 +14,7 @@
import { question1, } from '@/assets/images';
import ArcoUpload from '@/components/ArcoUpload';
import * as $$ from '@/utils/utility';
import TableView from '@/components/TableView';
import ModeSelect from './ModeSelect'


const RadioGroup = Radio.Group;
@@ -36,113 +36,13 @@
  const [detail, setDetail] = useState(false);
  const [mode, SetMode] = useState(false);
  const [supervising, setSupervising] = useState(false);
  const [modeDetail, setModeDetail] = useState(false);


  const tabs2 = [
    { index: '1', label: '公共模板1：回复督办内容收到通用范本' },
  ]

  const fakeColumns = [
    {
      title: '序号',
      dataIndex: 'caseNo',
      key: 'caseNo',
      width: 51,
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '类型',
      dataIndex: 'judicNo',
      key: 'judicNo',
      width: 85,

    },
    {
      title: '模板名称',
      dataIndex: 'inputUserName',
      key: 'perClassName',
      width: 160,
      render: (text) => (
        <>
          {text}
          {/* {sourceType === '1' ? matterNumber : sourceType === '2' ? evidenceNumber : 0}份 */}
        </>
      )


    },
    {
      title: '模板内容',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 400,
      render: (text) => (
        <div style={{}}>
          <div style={{ width: '300px', height: '110px', overflow: 'hidden', display: 'flex', whiteSpace: 'pre-line' }}>{text}</div>
          <div style={{ color: '#1A6FB8', marginTop: '4px' }} onClick={() => setModeDetail(true)}>...查看更多</div>
        </div>
      )

    },
    {
      title: '操作',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 53,
      render: (text) => (
        <div style={{ color: '#1A6FB8' }}>使用</div>
      )
    },
    // 更多列配置...
  ];

  const fakeData1 = [
    {
      id: 1,
      caseNo: 'A20230101',
      judicNo: '公共模板',
      perClassName: '鉴于本事项的重要性及紧迫性，现要求你尽快启动调解程序[事项1......][事项2......]',
      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 表示系列案
      // 更多字段...
    },
    {
      id: 2,
      caseNo: 'A20230101',
      judicNo: '个人模板',
      perClassName: '鉴于本事项的重要性及紧迫性，现要求你尽快启动调解程序[事项1......][事项2......]',
      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 content = selectedTab1 === '1'
@@ -169,9 +69,7 @@
    setSupervising(!supervising)
  }

  const handleUse = () => {
    setModeDetail(!modeDetail)
  }




@@ -334,30 +232,7 @@
          </Form>
        </div>
      </Modal>
      <Modal visible={mode} onCancel={() => SetMode(false)} title='选择模板' centered footer={null}>
        <TableView
          columns={fakeColumns}
          dataSource={fakeData1}
          size="small"
          rowKey="id"
          bordered={true}
          style={{}}
        />
      </Modal>
      <Modal simple={true} visible={modeDetail} cancelText='关闭' okText='使用' onOk={() => handleUse()} onCancel={() => setModeDetail(!modeDetail)} style={{ width: '400px', borderRadius: ' 4px' }}>
        <div className='modal'>
          <div className='modal-mark'>模板</div>
          <div className='modal-title'>尽快启动调解程序督办</div>
        </div>
        <div style={{ marginBottom: '-16px' }}>
          鉴于本事项的重要性及紧迫性，现要求你尽快启动调解程序，并确保案件能够得到及时有效的处理。请您务必于本周内完成以下
          事项：<br />
          [事项1......]<br />
          [事项2......]<br />
          [事项3......]<br />
          请确保在事项办理的过程中，遵循公平、公正的原则，并积极促进双方达成共识。
        </div>
      </Modal>
      <ModeSelect onCancel={() => SetMode(false)} mode={mode}/>
      <Modal visible={detail} onCancel={() => setDetail(false)} title='督办回复详情' centered footer={null}>
        <Col span={24} style={{ marginBottom: '8px' }}>
          <Space size='small'>