From 4590bfea932d6bbde4e54e7ddc96e8bba65efe4c Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Mon, 09 Sep 2024 10:07:59 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/index.jsx | 507 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 504 insertions(+), 3 deletions(-) diff --git a/gz-customerSystem/src/views/register/index.jsx b/gz-customerSystem/src/views/register/index.jsx index 31c0b8c..30c32d4 100644 --- a/gz-customerSystem/src/views/register/index.jsx +++ b/gz-customerSystem/src/views/register/index.jsx @@ -1,9 +1,510 @@ -import React from 'react'; +/* + * @Author: dminyi 1301963064@qq.com + * @Date: 2024-09-08 15:14:12 + * @LastEditors: dminyi 1301963064@qq.com + * @LastEditTime: 2024-09-09 10:05:35 + * @FilePath: \gzDyh\gz-customerSystem\src\views\register\index.jsx + * @Description: 工作台 + */ +import React, { useState } from 'react'; +import { tab1, tab2, tab3, tab4, tab5, tab6,visitInto,checkInto } from '@/assets/images' +import TableView from '../../components/TableView'; +import { Space } from 'antd'; +import { Tabs, Typography } from '@arco-design/web-react'; + +const TabPane = Tabs.TabPane; + + const VisitWorkBench = () => { + const [tabActivekey, setTabActivekey] = useState('1') + const [column, setColumn] = useState('1') + const tabsList = [ + { + key: '1', + label: '待分派', + bgColor: '#E8F8FF', + num: 10, + img: tab1 + }, + { + key: '2', + label: '待签收', + bgColor: '#E8FFEA', + num: 30, + img: tab2 + + }, + { + key: '3', + label: '待受理', + bgColor: '#F5E8FF', + num: 50, + img: tab3 + + }, + { + key: '4', + label: '办理中', + bgColor: '#E6FFFB', + num: 60, + img: tab4 + + }, + { + key: '5', + label: '待审核', + bgColor: '#E8F7FF', + num: 70, + img: tab5 + + }, + { + key: '6', + label: '督办', + bgColor: '#FFF7E6', + num: 80, + img: tab6 + + }, + ] + + const [fakeData1, setFakeData1] = useState( + [ + { + id: 1, + caseNo: 'A20230101', + judicNo: '申请材料', + perClassName: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + 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 [fakeColumns, setFakeColumns] = useState([ + { + title: tabActivekey === '5' ? '回退时间' : tabActivekey === '6' ? '督办时间' : '流转时间', + dataIndex: 'caseNo', + key: 'caseNo', + width: 100, + render: (text, record, index) => <span>{index + 1}</span>, + }, + { + title: '分派时限', + dataIndex: 'dispatchDeadline', + key: 'dispatchDeadline', + width: 60, + }, + { + title: '签收时限', + dataIndex: 'receiptDeadline', + key: 'receiptDeadline', + width: 60, + }, + { + title: '受理时限', + dataIndex: 'acceptanceDeadline', + key: 'acceptanceDeadline', + width: 60, + }, + { + title: '已办天数', + dataIndex: 'processedDays', + key: 'processedDays', + width: 60, + }, + { + title: '回复时限', + dataIndex: 'replyDeadline', + key: 'replyDeadline', + width: 60, + }, + { + title: '事项等级', + dataIndex: 'matterLevel', + key: 'matterLevel', + width: 180, + render: (text) => ( + <> + {text}份 + </> + ), + }, + { + title: '事项来源', + dataIndex: 'matterSource', + key: 'matterSource', + width: 180, + }, + { + title: '事项类型', + dataIndex: 'matterType', + key: 'matterType', + width: 180, + }, + { + title: '承办部门', + dataIndex: 'handlingDepartment', + key: 'handlingDepartment', + width: 180, + }, + { + title: '配合部门', + dataIndex: 'cooperatingDepartment', + key: 'cooperatingDepartment', + width: 180, + }, + { + title: '督办部门', + dataIndex: 'supervisionDepartment', + key: 'supervisionDepartment', + width: 180, + }, + { + title: '督办意见', + dataIndex: 'supervisionOpinion', + key: 'supervisionOpinion', + width: 180, + }, + { + title: '经办人', + dataIndex: 'handler', + key: 'handler', + width: 180, + }, + { + title: '申请方', + dataIndex: 'applicant', + key: 'applicant', + width: 180, + }, + { + title: '被申请方', + dataIndex: 'respondent', + key: 'respondent', + width: 180, + }, + { + title: '操作', + dataIndex: 'actions', + key: 'actions', + width: 180, + render: (text, record) => ( + <Space> + <div>详情</div> + <div>处理</div> + </Space> + ), + }, + ]); + + const tabActive = (key) => { + setTabActivekey(key) + } + + // const columnChange = async () => { + // const res = await columnChangeApi() + // if (res.type) { + // setColumn(res.data) + // } + // } + + const handleColumnType = () => { + const columnList = column.filter(item => fakeColumns.some(itemNew => itemNew.title === item.title)) + setFakeColumns(columnList) + } + + + return ( - <> - </> + <div className='VisitWorkBench'> + <div className='VisitWorkBench-top'> + <span style={{ fontWeight: 600 }}>工作总览</span> + <div className='VisitWorkBench-top-list'> + { + tabsList.map((item, index) => ( + <div key={index} className='VisitWorkBench-top-list-tabsItem' style={{ backgroundColor: item.bgColor }} onClick={() => tabActive(item.key)}> + <div> + <div>{item.label}</div> + <span className='VisitWorkBench-top-list-tabsItem-title'>{item.num}</span>件 + </div> + <div> + <img src={item.img} alt='' className='VisitWorkBench-top-list-tabsItem-imgView' /> + </div> + </div> + )) + } + </div> + </div> + <div className='VisitWorkBench-middle'> + <Tabs defaultActiveTab='1'> + <TabPane + onChange={handleColumnType} + key='1' + title={ + <span style={{ fontSize: '15px' }}> + {tabActivekey === '1' ? '待分派' : + tabActivekey === '2' ? '待签收' : + tabActivekey === '3' ? '待受理' : + tabActivekey === '4' ? '办理中' : + tabActivekey === '5' ? '待审核' : '督办-未回复' + } + </span> + } + > + <Typography.Paragraph> + <TableView + columns={fakeColumns} + dataSource={fakeData1} + size="small" + rowKey="id" + bordered={true} + // style={{ marginBottom: '65px', marginTop: '-16px' }} + rowSelection={{ + type: 'Checkbox' + }} + /> + </Typography.Paragraph> + </TabPane> + <TabPane + key='2' + title={ + <span style={{ fontSize: '15px' }}> + {tabActivekey === '1' ? '已分派' : + tabActivekey === '2' ? '已签收' : + tabActivekey === '3' ? '已受理' : + tabActivekey === '4' ? '结案申请' : + tabActivekey === '5' ? '已审核' : '督办-未回复' + } + </span> + } + > + <Typography.Paragraph> + </Typography.Paragraph> + </TabPane> + </Tabs> + + </div> + <div className='VisitWorkBench-bottom'> + 自行排查 + <div style={{ display: 'flex',justifyContent:'space-evenly' }}> + <div style={{display:'flex'}}> + <div className='VisitWorkBench-bottom-title'>大厅来访</div> + <img src={visitInto} alt='' className='VisitWorkBench-bottom-img'/> + </div> + <div style={{display:'flex'}}> + <div className='VisitWorkBench-bottom-title'>自行排查</div> + <img src={checkInto} alt='' className='VisitWorkBench-bottom-img'/> + </div> + </div> + </div> + </div> ) } -- Gitblit v1.8.0