4 files added
6 files modified
| | |
| | | * @Company: hugeInfo |
| | | * @Author: ldh |
| | | * @Date: 2022-02-16 11:28:12 |
| | | * @LastEditTime: 2024-08-27 11:18:41 |
| | | * @LastEditTime: 2024-08-29 14:25:03 |
| | | * @LastEditors: dminyi 1301963064@qq.com |
| | | * @Version: 1.0.0 |
| | | * @Description: axios处理方法 |
| | |
| | | |
| | | const url = |
| | | value.service === 'sys' |
| | | ? `${appUrl.fileUrl}/${appUrl[value.service] || ''}/api/v1/${value.url}` |
| | | : `${appUrl.baseUrl}/${appUrl[value.service] || ''}/api/v1/${value.url}`; |
| | | ? `${appUrl.fileUrl}/${appUrl[value.service] || ''}/api/web/${value.url}` |
| | | : `${appUrl.baseUrl}/${appUrl[value.service] || ''}/api/web/${value.url}`; |
| | | |
| | | if (value.type === 'get') { |
| | | return ax |
| | |
| | | import person from "./person.png"; |
| | | import link from "./link.png"; |
| | | import check from "./check.png"; |
| | | import image from './image.png'; |
| | | import applyMaterials from './applyMaterials.png'; |
| | | import applyMaterials_active from './applyMaterials_active.png'; |
| | | import evidenceMaterials from './evidenceMaterials.png'; |
| | | import evidenceMaterials_active from './evidenceMaterials_active.png'; |
| | | import closeIcon from './closeIcon.png'; |
| | | import backgroundImage from './backgroundImage.jpg' |
| | | import logo1 from './logo1.png'; |
| | | import register from './register.png'; |
| | | import Matter from './matter.png'; |
| | | import transfer from './transfer.png'; |
| | | import empty from './empty.png'; |
| | | import image from "./image.png"; |
| | | import applyMaterials from "./applyMaterials.png"; |
| | | import applyMaterials_active from "./applyMaterials_active.png"; |
| | | import evidenceMaterials from "./evidenceMaterials.png"; |
| | | import evidenceMaterials_active from "./evidenceMaterials_active.png"; |
| | | import closeIcon from "./closeIcon.png"; |
| | | import backgroundImage from "./backgroundImage.jpg"; |
| | | import logo1 from "./logo1.png"; |
| | | import register from "./register.png"; |
| | | import Matter from "./matter.png"; |
| | | import transfer from "./transfer.png"; |
| | | import empty from "./empty.png"; |
| | | import feedback from "./feedback.png"; |
| | | |
| | | export { |
| | | ledger_1, |
| | |
| | | register, |
| | | Matter, |
| | | transfer, |
| | | empty |
| | | empty, |
| | | feedback, |
| | | }; |
New file |
| | |
| | | /* |
| | | * @Author: dminyi 1301963064@qq.com |
| | | * @Date: 2024-08-29 14:57:06 |
| | | * @LastEditors: dminyi 1301963064@qq.com |
| | | * @LastEditTime: 2024-08-29 15:58:19 |
| | | * @FilePath: \gzDyh\gz-customerSystem\src\components\ProgressStep\VisitStep.jsx |
| | | * @Description: 来访登记步骤条 |
| | | */ |
| | | |
| | | import React, { useEffect, useState } from 'react'; |
| | | import { Tooltip, Space } from 'antd'; |
| | | import Icon, { PaperClipOutlined, RollbackOutlined, EllipsisOutlined } from '@ant-design/icons'; |
| | | import { feedback, ledger_8, ledger_7 } from '../../assets/images'; |
| | | import NameCard from '../NameCard'; |
| | | import * as $$ from '../../utils/utility'; |
| | | import FilesDrawer from '../FilesDrawer'; |
| | | import './index.less'; |
| | | |
| | | // 获取调度处理进度数据 |
| | | function getDispProgressDataApi(caseId) { |
| | | return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' }); |
| | | } |
| | | |
| | | // 获取调解处理进度数据 |
| | | function getProgressDataApi(caseId) { |
| | | return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' }); |
| | | } |
| | | // 获取司法确认处理进度数据 |
| | | function getJudicProgressDataApi(caseId) { |
| | | return $$.ax.request({ url: 'judicTask/getTaskProcess?caseId=' + caseId, type: 'get', service: 'mediate' }); |
| | | } |
| | | |
| | | /** |
| | | * caseId:'', // 案件id |
| | | * pageFrom:'', // 判断那个页面展示 |
| | | */ |
| | | const ProgressStep = ({ caseId, pageFrom }) => { |
| | | const [data, setData] = useState([]); |
| | | |
| | | // 提交调解 案件调度 案件签收 纠纷调解 指派网格员 |
| | | |
| | | // 已处理列表第一个元素 |
| | | const dom1 = (x) => ( |
| | | <div> |
| | | <div className="myStep-item-p"> |
| | | <span>{x.handlerUserName || '-'}</span> |
| | | {/* <span className={`public-nameCard-tag public-nameCard-tag-grey`}> |
| | | {x.canalName || '-'} |
| | | </span> */} |
| | | </div> |
| | | <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}> |
| | | <span>操作人:</span> |
| | | <span>{x.operationName}</span> |
| | | </div> |
| | | <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}> |
| | | <span>经办时间:</span> |
| | | <span>{$$.timeFormat(x.finishTime)}</span> |
| | | </div> |
| | | </div> |
| | | ); |
| | | // 已处理列表后面 元素 |
| | | const dom2 = (x) => ( |
| | | <div> |
| | | <div className="myStep-item-p"> |
| | | <span>{x.handlerUserName || '-'}</span> |
| | | </div> |
| | | <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}> |
| | | <span>操作人:</span> |
| | | <span>{x.operationName}</span> |
| | | </div> |
| | | <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}> |
| | | <span>操作时间:</span> |
| | | <span>{$$.timeFormat(x.finishTime)}</span> |
| | | </div> |
| | | { |
| | | x.handleContent && |
| | | <div className='myStep-item-p-yy' style={{width:'200px'}}> |
| | | <span className='myStep-item-p-yy-l'> |
| | | {x.handleResult == '2' ? |
| | | <span>退回<Tooltip placement="top" title={x.handleContent || ''}><span>{`(${x.handleContent})` || '-'}</span></Tooltip></span> |
| | | : x.taskNode == 'F22_00019-3' && x.handleResult == '1' ? |
| | | // 22_00025-1:调解成功,22_00025-2:调解不成功 |
| | | <span>调解结果:<Tooltip placement="top" title={x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}><span>{`${x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}` || '-'}</span></Tooltip></span> |
| | | : <Tooltip placement="top" title={x.handleContent || ''}><span>{x.handleContent || '-'}</span></Tooltip>} |
| | | </span> |
| | | { |
| | | x.fileInfoList?.length > 0 && |
| | | <div style={{ marginTop: '4px' }}> |
| | | <FilesDrawer name={<> |
| | | <PaperClipOutlined style={{ marginRight: '4px' }} /> |
| | | <span>{x.taskNode == 'F22_00019-3' && x.handleResult == '1' ? '调解协议书' : '处理附件'}</span> |
| | | </>} filesData={x.fileInfoList} title="经办附件" /> |
| | | </div> |
| | | } |
| | | </div> |
| | | } |
| | | </div> |
| | | ); |
| | | |
| | | // 办理中 |
| | | const dom3 = (x) => ( |
| | | <div> |
| | | <div className="myStep-item-p"> |
| | | <span style={{ color: 'rgba(0,0,0,0.50)' }}>办理中</span> |
| | | </div> |
| | | <div className="myStep-item-p"> |
| | | <span>{x.handlerUserName}</span> |
| | | </div> |
| | | </div> |
| | | ); |
| | | |
| | | const fakeData = [ |
| | | { |
| | | handlerUserName: '天河区棠下街综治中心', |
| | | canalName: '来访登记', |
| | | finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间 |
| | | handleResult: '1', |
| | | status: '2', |
| | | taskNodeName: '来访登记', |
| | | mediResult: '22_00025-1', |
| | | handleContent: '调解成功,双方达成一致意见。', |
| | | operationName: '李晓明' |
| | | }, |
| | | { |
| | | handlerUserName: '天河区棠下街综治中心', |
| | | canalName: '事件流转', |
| | | finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间 |
| | | handleResult: '1', |
| | | status: '2', |
| | | taskNodeName: '案件调度', |
| | | mediResult: '22_00025-1', |
| | | handleContent: '自行受理', |
| | | operationName: '李晓明' |
| | | |
| | | }, |
| | | { |
| | | handlerUserName: '天河区棠下街综治中心', |
| | | canalName: '办理反馈', |
| | | finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间 |
| | | handleResult: '2', |
| | | status: '3', |
| | | taskNodeName: '案件签收', |
| | | mediResult: '22_00025-1', |
| | | handleContent: '案件已被签收,准备开始调解。', |
| | | operationName: '李晓明' |
| | | |
| | | }, |
| | | ]; |
| | | |
| | | useEffect(() => { |
| | | if (pageFrom === 'dispatchRecord') { |
| | | setData(fakeData || []) |
| | | } |
| | | }, [pageFrom]); |
| | | |
| | | function splitByLine(str, len = 10) { |
| | | let strLen = str.length, |
| | | num = 0, |
| | | multiple = Math.floor(strLen / len), |
| | | arrStr = str.split(''), |
| | | space = strLen % len > 0 ? multiple + 1 : multiple |
| | | for (let i = 1; i <= space; i++) { |
| | | arrStr.splice((len * i + num), 0, '\n') |
| | | num++ |
| | | } |
| | | return arrStr.join('') |
| | | } |
| | | |
| | | |
| | | return ( |
| | | <> |
| | | {data.length !== 0 |
| | | ? data.map((x, t) => { |
| | | return ( |
| | | <div key={t + 1}> |
| | | <div className="myStep-item"> |
| | | {t === data.length - 1 ? null : <div className={`${!x.handleContent ? 'myStep-item-divider' : x.fileInfoList?.length > 0 ? 'myStep-item-divider2' : "myStep-item-divider1"} ${x.status === '2' && 'myStep-item-divider-success'}`} />} |
| | | <div className={`myStep-item-icon1 myStep-item-${x.status === '2' ? 'success1' : 'noStarted1'}`}> |
| | | <div className="myStep-item-title">{splitByLine(x.taskNodeName || '', 2)}</div> |
| | | <img className='myStep-item-img' src={x.status === '1' ? ledger_8 : (x.handleResult === '2' ? feedback : ledger_7)} alt="" /> |
| | | {/* <Icon className='myStep-item-img' component={x.handleResult === '2' ? RollbackOutlined : CheckOutlined} /> */} |
| | | </div> |
| | | <div className="myStep-item-right"> |
| | | {/* {dom1(x || {})} */} |
| | | { |
| | | t === 0 && dom1(x || {}) |
| | | } |
| | | { |
| | | t !== 0 && <> |
| | | { |
| | | x.status === '2' ? dom2(x || {}) : dom3(x || {}) |
| | | } |
| | | </> |
| | | } |
| | | {/* <div className="myStep-item-title">{x.taskNodeName}</div> */} |
| | | {/* { |
| | | <StepContent x={x || {}} t={t || 0} />} */} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | ); |
| | | }) |
| | | : <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>} |
| | | </> |
| | | ); |
| | | }; |
| | | |
| | | export default ProgressStep; |
| | |
| | | } |
| | | } |
| | | |
| | | &-noStarted1 { |
| | | background-color: rgba(185,99,211,1); |
| | | |
| | | &::after { |
| | | border-color: rgba(185,99,211,1); |
| | | } |
| | | } |
| | | |
| | | &-icon { |
| | | float: left; |
| | | margin-right: 8px; |
New file |
| | |
| | | /* |
| | | * @Author: dminyi 1301963064@qq.com |
| | | * @Date: 2024-08-29 17:41:09 |
| | | * @LastEditors: dminyi 1301963064@qq.com |
| | | * @LastEditTime: 2024-08-29 20:03:51 |
| | | * @FilePath: \gzDyh\gz-customerSystem\src\components\SelectObjModal\selectPerson.jsx |
| | | * @Description: 选择经办人 |
| | | */ |
| | | import React, { useState, useEffect, useMemo } from 'react'; |
| | | import PropTypes from 'prop-types'; |
| | | import { Button, Space, Input, Tree } from 'antd'; |
| | | import { CloseOutlined } from '@ant-design/icons'; |
| | | import './index.less'; |
| | | import MyModal from '../MyModal'; |
| | | import * as $$ from '../../utils/utility'; |
| | | |
| | | const { Search } = Input; |
| | | |
| | | // 获取人员,组织,部门数据 |
| | | function getDataApi(type, searchData) { |
| | | const url = type === 'person' ? 'ctUser/userChoose' : type === 'unit' ? 'ctUser/unitList' : 'ctUser/deptList'; |
| | | return $$.ax.request({ url, type: 'get', data: searchData, service: 'cust' }); |
| | | } |
| | | |
| | | /** |
| | | * visible, // 传入参数控制modal显示 |
| | | * checkKeys, // 选中,数据格式 [{value:'',label:''}] |
| | | * type, // 'person': 选择人员 'unit': 选择组织 'dept': 选择部门 |
| | | * isCheckbox, // 是否多选 |
| | | * searchData, // 搜索条件 |
| | | * onClose, // 关闭 |
| | | * onOk, // 点击确定的回调 |
| | | */ |
| | | const SelectObjModal = ({ visible = false, checkKeys = [], type = 'person', isCheckbox = false, searchData = {}, onClose, onOk }) => { |
| | | const [data, setData] = useState([]); |
| | | |
| | | const [checkedKeys, setCheckedKeys] = useState({ keys: [], items: [] }); |
| | | |
| | | const [expandedKeys, setExpandedKeys] = useState([]); |
| | | |
| | | const [searchValue, setSearchValue] = useState(''); |
| | | |
| | | const [autoExpandParent, setAutoExpandParent] = useState(true); |
| | | |
| | | const [dataList, setDataList] = useState([]); |
| | | |
| | | // tree复选框选择 |
| | | function handleCheck(checkedKeys, e) { |
| | | if (!isCheckbox && checkedKeys.checked.length > 1) { |
| | | $$.info({ type: 'warning', content: '当前选择只可单选' }); |
| | | return; |
| | | } |
| | | let checkedNodes = e.checkedNodes; |
| | | checkedNodes.forEach((x) => delete x.children); |
| | | setCheckedKeys({ keys: checkedKeys.checked, items: checkedNodes }); |
| | | } |
| | | |
| | | // 删除选项 |
| | | function handleDelete(t) { |
| | | checkedKeys.keys.splice(t, 1); |
| | | checkedKeys.items.splice(t, 1); |
| | | setCheckedKeys({ ...checkedKeys }); |
| | | } |
| | | |
| | | // 搜索 |
| | | useEffect(() => { |
| | | if (!visible) return; |
| | | const arr = []; |
| | | const generateList = (data) => { |
| | | for (let i = 0; i < data.length; i++) { |
| | | const node = data[i]; |
| | | const { value, label } = node; |
| | | arr.push({ value, label }); |
| | | if (node.children) { |
| | | generateList(node.children); |
| | | } |
| | | } |
| | | }; |
| | | generateList(data); |
| | | setDataList(arr); |
| | | handleSearch('', arr); |
| | | }, [data]); |
| | | |
| | | const getParentKey = (key, tree) => { |
| | | let parentKey; |
| | | for (let i = 0; i < tree.length; i++) { |
| | | const node = tree[i]; |
| | | if (node.children) { |
| | | if (node.children.some((item) => item.value === key)) { |
| | | parentKey = node.value; |
| | | } else if (getParentKey(key, node.children)) { |
| | | parentKey = getParentKey(key, node.children); |
| | | } |
| | | } |
| | | } |
| | | return parentKey; |
| | | }; |
| | | |
| | | function handleSearch(value, dataList) { |
| | | |
| | | console.log('value, dataList', value, dataList); |
| | | const newExpandedKeys = dataList |
| | | .map((item) => { |
| | | if (item.label.indexOf(value) > -1) { |
| | | return getParentKey(item.value, data); |
| | | } |
| | | return null; |
| | | }) |
| | | .filter((item, i, self) => item && self.indexOf(item) === i); |
| | | |
| | | console.log('newExpandedKeys',newExpandedKeys); |
| | | setExpandedKeys(newExpandedKeys); |
| | | setSearchValue(value); |
| | | setAutoExpandParent(true); |
| | | } |
| | | |
| | | const treeData = useMemo(() => { |
| | | const loop = (data) => |
| | | data.map((item) => { |
| | | const strTitle = item.label; |
| | | const index = strTitle.indexOf(searchValue); |
| | | const beforeStr = strTitle.substring(0, index); |
| | | const afterStr = strTitle.slice(index + searchValue.length); |
| | | const label = |
| | | index > -1 ? ( |
| | | <span> |
| | | {beforeStr} |
| | | <span className="selectObjModal-searchValue">{searchValue}</span> |
| | | {afterStr} |
| | | </span> |
| | | ) : ( |
| | | <span>{strTitle}</span> |
| | | ); |
| | | if (item.children) { |
| | | return { |
| | | label, |
| | | name: strTitle, |
| | | value: item.value, |
| | | checkable: item.checkable, |
| | | children: loop(item.children), |
| | | }; |
| | | } |
| | | return { |
| | | label, |
| | | name: strTitle, |
| | | checkable: item.checkable, |
| | | value: item.value, |
| | | }; |
| | | }); |
| | | return loop(data); |
| | | }, [searchValue, data]); |
| | | |
| | | // 默认调解员查询'22_00024-4' |
| | | const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {}; |
| | | |
| | | useEffect(() => { |
| | | if (!visible) return; |
| | | // 获取数据 |
| | | async function getData() { |
| | | global.setSpinning(true); |
| | | const res = await getDataApi(type, { ...searchRole, ...searchData }); |
| | | global.setSpinning(false); |
| | | if (res.type) { |
| | | setData(res.data || []); |
| | | } |
| | | } |
| | | console.log(checkKeys,'checkKeys') |
| | | console.log(checkedKeys,'checkedKeys') |
| | | if (checkKeys.length !== 0) { |
| | | let keys = []; |
| | | checkKeys.forEach((x) => keys.push(x.value)); |
| | | setCheckedKeys({ keys, items: checkKeys }); |
| | | } else { |
| | | setCheckedKeys({ keys: [], items: [] }); |
| | | } |
| | | getData(); |
| | | }, [type, visible]); |
| | | |
| | | const nameStr = type === 'person' ? '人员' : type === 'unit' ? '组织' : '部门'; |
| | | |
| | | return ( |
| | | <MyModal visible={!!visible} title={`选择${nameStr}`} width={560} footer={false} onCancel={onClose}> |
| | | <div className="selectObjModal-main"> |
| | | <div className="selectObjModal-left"> |
| | | <div className="selectObjModal-left-search"> |
| | | <Search placeholder={`查询${nameStr}名称`} onChange={(e) => handleSearch(e.target.value, dataList)} /> |
| | | </div> |
| | | <div className="selectObjModal-left-main"> |
| | | {data.length > 0 ? ( |
| | | <Tree |
| | | checkable |
| | | checkStrictly |
| | | defaultExpandAll |
| | | onExpand={(newExpandedKeys) => { |
| | | setExpandedKeys(newExpandedKeys); |
| | | setAutoExpandParent(false); |
| | | }} |
| | | expandedKeys={expandedKeys} |
| | | autoExpandParent={autoExpandParent} |
| | | selectable={false} |
| | | onCheck={(checkedKeys, e) => handleCheck(checkedKeys, e)} |
| | | checkedKeys={checkedKeys.keys} |
| | | treeData={treeData} |
| | | fieldNames={{ title: 'label', key: 'value' }} |
| | | /> |
| | | ) : ( |
| | | $$.MyEmpty() |
| | | )} |
| | | </div> |
| | | </div> |
| | | <div className="selectObjModal-right"> |
| | | {checkedKeys.items.map((x, t) => ( |
| | | <div className="selectObjModal-right-item" key={x.value}> |
| | | <span className="selectObjModal-right-item-name">{x.label}</span> |
| | | <CloseOutlined onClick={() => handleDelete(t)} className="selectObjModal-right-item-icon" /> |
| | | </div> |
| | | ))} |
| | | {checkedKeys.items.length === 0 && <div className="selectObjModal-none">{$$.MyEmpty({ description: '尚未选择' + nameStr })}</div>} |
| | | </div> |
| | | </div> |
| | | <div className="selectObjModal-footer"> |
| | | <div>已选中:{checkedKeys.keys.length}人</div> |
| | | <Space size="middle"> |
| | | <Button onClick={onClose}>取消</Button> |
| | | <Button type="primary" onClick={() => onOk && onOk(checkedKeys)}> |
| | | 确定 |
| | | </Button> |
| | | </Space> |
| | | </div> |
| | | </MyModal> |
| | | ); |
| | | }; |
| | | |
| | | SelectObjModal.propTypes = { |
| | | visible: PropTypes.any, |
| | | checkKeys: PropTypes.array, |
| | | type: PropTypes.string, |
| | | isCheckbox: PropTypes.bool, |
| | | searchData: PropTypes.object, |
| | | onClose: PropTypes.func, |
| | | onOk: PropTypes.func, |
| | | }; |
| | | |
| | | export default SelectObjModal; |
New file |
| | |
| | | /* |
| | | * @Author: dminyi 1301963064@qq.com |
| | | * @Date: 2024-08-29 20:43:25 |
| | | * @LastEditors: dminyi 1301963064@qq.com |
| | | * @LastEditTime: 2024-08-29 20:55:24 |
| | | * @FilePath: \gzDyh\gz-customerSystem\src\components\WantUserTag\Handling.jsx |
| | | * @Description: 经办人 |
| | | */ |
| | | import React from 'react'; |
| | | import PropTypes from 'prop-types'; |
| | | import { Typography } from 'antd'; |
| | | import { CloseOutlined } from '@ant-design/icons'; |
| | | import './index.less'; |
| | | |
| | | const WantUserTag = ({ name, value, onClose }) => { |
| | | return ( |
| | | <div className="wantUserTag"> |
| | | <div className="wantUserTag-wantHandleUser"> |
| | | <div className="wantUserTag-wantUser-right">{name}</div> |
| | | <Typography.Link className="wantUserTag-wantHandleUser-close" onClick={() => onClose(value)}> |
| | | <CloseOutlined style={{width:'11px',height:'13px'}}/> |
| | | </Typography.Link> |
| | | </div> |
| | | </div> |
| | | ); |
| | | }; |
| | | |
| | | WantUserTag.propTypes = { |
| | | name: PropTypes.string, |
| | | onClose: PropTypes.func, |
| | | }; |
| | | |
| | | export default WantUserTag; |
| | |
| | | } |
| | | } |
| | | |
| | | &-wantHandleUser{ |
| | | display:flex; |
| | | padding: 5px 8px; |
| | | border: 1px solid rgba(229,230,235,1); |
| | | |
| | | |
| | | } |
| | | |
| | | &-green { |
| | | background: linear-gradient(135deg, #05aeae, rgba(5, 174, 174, 0.85) 100%); |
| | | } |
| | |
| | | left: 83.988px; |
| | | width: 82px; |
| | | } |
| | | |
| | | .progress{ |
| | | margin: 16px 0px 0px 16px; |
| | | } |
| | |
| | | import React, { useState } from 'react'; |
| | | import { Steps, Button } from '@arco-design/web-react'; |
| | | import { Col, Space, Row, Tooltip } from 'antd'; |
| | | import { Steps } from '@arco-design/web-react'; |
| | | import { Col, Space, Row, Tooltip, Button } from 'antd'; |
| | | import { register, empty } from '../../../../assets/images' |
| | | import { Form, Select, Empty, Tabs, Typography, } from '@arco-design/web-react'; |
| | | import { Form, Input, Empty, Tabs, Typography, Modal } from '@arco-design/web-react'; |
| | | import { question1, } from '@/assets/images'; |
| | | import ProgressStep from '../../../../components/ProgressStep/VisitStep' |
| | | import SelectObjModal from '../../../../components/SelectObjModal/selectPerson' |
| | | import WantUserTag from '../../../../components/WantUserTag/Handling' |
| | | |
| | | const Option = Select.Option; |
| | | const InputSearch = Input.Search; |
| | | const FormItem = Form.Item; |
| | | const TabPane = Tabs.TabPane; |
| | | |
| | |
| | | |
| | | |
| | | const Handle = () => { |
| | | const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab |
| | | const [wantUser, setWantUser] = useState({}); |
| | | const tabs = [ |
| | | { index: '1', label: '承办部门' }, |
| | | { index: '2', label: '配合部门' }, |
| | | ]; |
| | | |
| | | const [isModalVisible, setIsModalVisible] = useState(false); |
| | | |
| | | const showModal = () => { |
| | | setIsModalVisible(true); |
| | | }; |
| | | |
| | | const hideModal = () => { |
| | | setIsModalVisible(false); |
| | | }; |
| | | |
| | | const handleTabChange = (newTabIndex) => { |
| | | setSelectedTab(newTabIndex); |
| | | }; |
| | | |
| | | return ( |
| | | <> |
| | |
| | | requiredSymbol={false} |
| | | scrollToFirstError={true} |
| | | > |
| | | <Row> |
| | | <Col span={8}> |
| | | <FormItem label={<div style={{ display: 'flex' }}> |
| | | <span style={{ color: '#86909C' }}>经办人</span> |
| | |
| | | </div> |
| | | } |
| | | field='level' > |
| | | <Select placeholder='请选择' allowClear> |
| | | {['一级', '二级', '三级', '四级'].map((option, index) => ( |
| | | <Option key={option} value={option}> |
| | | {option} |
| | | </Option> |
| | | ))} |
| | | |
| | | </Select> |
| | | <Button type='primary' style={{ position: 'absolute', right: 0 }}>保存</Button> |
| | | {wantUser.wantUserId ? |
| | | <WantUserTag name={wantUser.wantUserName} onClose={() => setWantUser({ wantUserId: null, wantUserName: null })} /> |
| | | : |
| | | <InputSearch |
| | | searchButton='选择' |
| | | placeholder='请选择' |
| | | style={{ width: 350 }} |
| | | onClick={() => setIsModalVisible(true)} |
| | | onSearch={() => setIsModalVisible(true)} |
| | | /> |
| | | } |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={24}> |
| | |
| | | description='暂无数据' |
| | | /> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | <Space> |
| | | <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>添加办理记录</Button> |
| | |
| | | key='1' |
| | | title={ |
| | | <span style={{ fontSize: '15px' }}> |
| | | Tab 1 |
| | | 流转进度 |
| | | </span> |
| | | } |
| | | > |
| | | <Typography.Paragraph style={style}> |
| | | |
| | | <Typography.Paragraph> |
| | | <div style={{ display: 'flex', marginLeft: '16px', gap: '16px' }}> |
| | | {tabs.map((tab) => ( |
| | | <div |
| | | key={tab.index} |
| | | style={{ |
| | | color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)', |
| | | padding: '6px 12px', |
| | | border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`, |
| | | borderRadius: '4px', |
| | | cursor: 'pointer', |
| | | }} |
| | | onClick={() => handleTabChange(tab.index)} |
| | | > |
| | | {tab.label} |
| | | </div> |
| | | ))} |
| | | </div> |
| | | {selectedTab === '1' && |
| | | <div className='progress'> |
| | | <ProgressStep caseId='202408291012566613' pageFrom="dispatchRecord" /> |
| | | </div> |
| | | } |
| | | </Typography.Paragraph> |
| | | </TabPane> |
| | | <TabPane |
| | | key='2' |
| | | title={ |
| | | <span style={{ fontSize: '15px' }}> |
| | | Tab 2 |
| | | 督办信息 |
| | | </span> |
| | | } |
| | | > |
| | |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | {/* 选择经办人*/} |
| | | <SelectObjModal |
| | | visible={isModalVisible} |
| | | checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined} |
| | | onOk={(value) => { |
| | | setIsModalVisible(false); |
| | | setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name }); |
| | | }} |
| | | onClose={() => setIsModalVisible(false)} |
| | | /> |
| | | </div> |
| | | </> |
| | | ) |