import { GroupItem } from '@/components/AuditContent' import { ZhAuditBackButton, ZhButton, ZhCloseButton, ZhSubmitButton } from '@/components/Button' import { userStore } from '@/store/mobx' import { iAuditor, iLatestAuditorState } from '@/types/safe' import { iAccountGroupItem, iUserInfo } from '@/types/setting' import { getUserGroup } from '@/utils/common/user' import { Button, Form, Input, message, Modal, Popover } from 'antd' import React, { ChangeEvent, useEffect, useMemo, useState } from 'react' interface iAuditModalProps { visible: boolean onCancel: () => void type: string auditors: iAuditor[] onCreate: (values?: any) => void curAuditor: iLatestAuditorState } const textObj = { start: { title: '提交审批', okText: '确认提交' }, delete: { title: '删除巡检', okText: '确认删除' }, close: { title: '审批关闭', okText: '确认关闭' }, back: { title: '审批退回', okText: '确认退回' }, pass: { title: '审批通过', okText: '确认通过' } } interface iModalObjState { searchValue: string visible: boolean auditType: string } const AuditModal: React.FC = props => { const [ form ] = Form.useForm() const { visible, type, onCancel, onCreate, auditors, curAuditor } = props const [ modal, setModal ] = useState({ searchValue: '', visible: false, auditType: '' }) // 是否是审批组的最后一个审核人 const isLastAuditor = useMemo(() => { const len = auditors.filter(item => item.progress === '0').length if (len && auditors.filter(item => item.progress === '0')[len - 1].audit_id === userStore.userInfo.id) { return true } return false }, [ auditors ]) const [ groups, setGroups ] = useState>([]) const [ user, setUser ] = useState({ account: '', accountGroup: 0, company: '', csrf: '', enable: 0, id: '', isAdmin: 0, mobile: '', name: '', password: '', position: '', projectId: '', role: '', telephone: '' }) const comfirmBtnClick = () => { form.validateFields().then(values => { form.resetFields() if (user.id) { values.audit_id = user.id } if (type === 'pass' && isLastAuditor && curAuditor.progress === '0' && !user.id) { return message.error('请指定整改人!') } onCreate(values) }) } useEffect(() => { if (visible && isLastAuditor && type === 'pass') { initGroupList() } if (visible && type === 'back') { if (curAuditor.progress === '1') { const len = auditors.filter(item => item.progress === '0').length const lastChecker = auditors.filter(item => item.progress === '0')[len - 1] setUser({ ...user, id: lastChecker.id, name: lastChecker.name }) } else { const newGroup = initAuditBackGroup() setGroups(newGroup) } } }, [ visible ]) const initGroupList = async (serach?: string) => { const data = await getUserGroup(serach) setGroups(data) } // 初始化审批退回下拉选择框 const initAuditBackGroup = () => { console.log(auditors) const newGroup: iAccountGroupItem[] = [] for (let index = 0; index < 3; index++) { if (index === 0) { const newAuditors = auditors .filter(item => item.progress === '') .map(item => { return mapUser(item.name, '', item.position, item.company, item.mobile) }) newGroup.push({ value: '检查人', children: newAuditors }) } if (index === 1) { const newAuditors = auditors .filter(item => item.progress === '0') .map(item => { return mapUser(item.name, item.id, item.position, item.company, item.mobile) }) newGroup.push({ value: '审批', children: newAuditors }) } if (index === 2) { const newAuditors = auditors .filter(item => item.progress === '1') .map(item => { return mapUser(item.name, item.id, item.position, item.company, item.mobile) }) newGroup.push({ value: '整改', children: newAuditors }) } } function mapUser(name: string, id: string, position: string, company: string, mobile: string) { return { account: '', accountGroup: 0, company, csrf: '', enable: 0, id, isAdmin: 0, mobile, name, password: '', position, projectId: '', role: '', telephone: '' } } return newGroup } const renderOkBtn = (type: string) => { if (type === 'start' || type === 'pass') { return ( {textObj[type]?.okText} ) } else if (type === 'delete' || type === 'close') { return ( ) } else if (type === 'back') { return ( {textObj[type]?.okText} ) } } const search = (value: string) => { if (value != modal.searchValue) { setModal({ ...modal, searchValue: value }) initGroupList(value) } } const change = (e: ChangeEvent) => { e.persist() const target = e.target as HTMLTextAreaElement if (!target.value) { initGroupList() } } const itemSelectHandler = (item: iUserInfo, type: string = '') => { setUser({ ...user, ...item }) setModal({ ...modal, visible: false, auditType: type }) } const handleVisibleChange = (visible: boolean) => { setModal({ ...modal, visible }) } const showPopover = () => { setModal({ ...modal, visible: true }) } return ( 关闭 {renderOkBtn(type)} }>
{type === 'back' ? ( <> {curAuditor.progress !== '1' ? ( ( itemSelectHandler(item, type)}> ))} overlayClassName="popover-card" trigger="click" visible={modal.visible} onVisibleChange={visible => handleVisibleChange(visible)} placement="bottomLeft"> 选择退回流程 ) : null} {user.name ? (
已选择退回流程: {user.name}
) : null} ) : null} {type === 'delete' ? ( <>

删除后,数据无法恢复,请谨慎操作。

请在下方文本框输入文本「确认删除本次巡检」,以此确认删除操作。

({ validator(rule, value) { if (!value || value !== '确认删除本次巡检') { return Promise.reject('请按照提示信息进行删除操作!') } return Promise.resolve() } }) ]}> ) : null} {type === 'start' ?

请确认审批流程及信息无误。

: null} {type === 'close' ? ( <>

审批关闭,将直接停止该巡检流程。

) : null} {type === 'pass' ? ( <> {isLastAuditor && curAuditor.progress === '0' ? ( change(e)}>} content={groups.map(item => ( itemSelectHandler(item, type)}> ))} overlayClassName="popover-card" trigger="click" visible={modal.visible} onVisibleChange={visible => handleVisibleChange(visible)} placement="bottomLeft"> 指派整改人 ) : null} {user.id ? (

已指派整改人: {user.name}-{user.position}-{user.company}

) : null} ) : null}
) } export default AuditModal