gzdyh/yzy_h5.git

/*
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2025-04-09 10:10:06
 * @LastEditTime: 2025-05-13 16:29:03
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description:办理信息
 */
import React, { useEffect, useState, useRef } from 'react';
import { Popover, Button, Upload, Drawer, TextareaItem, Form } from 'dingtalk-design-mobile';
import { useHistory } from 'react-router-dom';
import { Scrollbars } from 'react-custom-scrollbars';
import { CloseOutlined, RightArrow2Outlined } from 'dd-icons';
 
import UserTag from '../../../../components/UserTag';
import MyModal from '../../../../components/MyModal';
import DingUpload from '../../../../components/DingUpload';
import * as $$ from '../../../../utils/utility';
import { select_null, sxbl_1 } from '../../../../assets/img';
 
import './index.less';
 
const appUrl = $$.appUrl;
 
// 获取id
function getNewTimeIdApi(id) {
    return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
}
 
// 联合处置申请
function postAssistApply(data) {
    return $$.ax.request({ url: `caseAssistApply/addCaseAssistApply`, type: 'post', service: 'mediate', data });
}
export const Sxbl = ({ editShow, wantUser, staticButtonList, caseId, caseTaskId, recordList, onClose }) => {
    const history = useHistory();
    const [forms] = Form.useForm();
    const [popoverVisible, setPopoverVisible] = useState(false);
    const [visible, setVisible] = useState(false);
    const [detailVisible, setDetailVisible] = useState(false);
    const [jointHandleVisible, setJointHandleVisible] = useState(false);
    const [jointHandleNewId, setJointHandleNewId] = useState('');
    const [currentRecord, setCurrentRecord] = useState({});
    const [selectedDepts, setSelectedDepts] = useState([]);
    const [reason, setReason] = useState('');
    const [fileList, setFileList] = useState([]);
    const [formData, setFormData] = useState({
        applyContent: '',
    });
 
    // 查看详情处理函数
    const handleViewDetail = (record) => {
        setCurrentRecord(record);
        setDetailVisible(true);
    };
 
    // 处理函数
    const bottomOnclick = () => {
        setVisible(true);
    };
 
    // 关闭抽屉
    const handleClose = () => {
        setVisible(false);
    };
 
    // 关闭详情抽屉
    const handleCloseDetail = () => {
        setDetailVisible(false);
    };
 
    // 关闭联合处置申请抽屉
    const handleCloseJointHandle = () => {
        setJointHandleVisible(false);
    };
 
    // 添加办理记录
    const handleAddRecord = () => {
        history.push(`/gzdyh/addRecord?caseId=${caseId}&caseTaskId=${caseTaskId}`);
        handleClose();
    };
 
    // 申请结案
    const handleApplyClose = () => {
        // 先判断办理记录是否为空，为空时提醒请先添加办理记录
        if (recordList.length === 0) {
            $$.showToast({ content: '请先添加办理记录' });
            return;
        }
        history.push(`/flow/applyClose?caseId=${caseId}&caseTaskId=${caseTaskId}`);
        handleClose();
    };
 
    // 申请联合处置
    const handleJointHandle = () => {
        setJointHandleVisible(true);
        getNewTimeId();
        handleClose();
    };
 
    //获取id
    const getNewTimeId = async () => {
        const res = await getNewTimeIdApi();
        if (res.type) {
            setJointHandleNewId(res.data);
        }
    };
 
    // 处理联合处置提交
    const handleSubmitJointHandle = () => {
        // 此处应添加表单验证逻辑
        if (!selectedDepts.length) {
            $$.showToast({ content: '请选择配合部门' });
            return;
        }
        if (!formData.applyContent) {
            $$.showToast({ content: '请填写添加理由' });
            return;
        }
        handleJoint({
            applyAssistUnitId: selectedDepts.map((dept) => dept.value)?.join(','),
            applyAssistUnitName: selectedDepts.map((dept) => dept.label)?.join(','),
            applyContent: formData.applyContent,
            caseId,
            id: jointHandleNewId,
        });
    };
 
    //联合处置请求
    const handleJoint = async (data) => {
        const res = await postAssistApply(data);
        if (res.type) {
            $$.showToast({ type: 'success', content: '提交申请成功！' });
            handleCloseJointHandle();
        }
    };
 
    // 移除已选择的部门
    const handleRemoveDept = (value) => {
        setSelectedDepts(selectedDepts.filter((dept) => dept.value !== value));
    };
 
    // 指派处理函数
    const handleAssign = () => {
        history.push(`/gzdyh/selectPerson?type=1&caseId=${caseId}&caseTaskId=${caseTaskId}`);
    };
 
    // 修改办理记录
    const handleEdit = () => {
        history.push(`/gzdyh/addRecord?mainId=${currentRecord.id}&caseId=${caseId}&caseTaskId=${caseTaskId}`);
        setDetailVisible(false);
        $$.setSessionStorage('sxbl_currentRecord', currentRecord);
    };
 
    // 预览文件
    const onPreview = async (file) => {
        const src = `${appUrl.fileUrl}/${appUrl.sys}/${file.showUrl}`;
        window.open(src);
        // if (file.cat === '22_00017-6') {
        //     // 文件预览
        // } else {
        //     // 图片文件，使用模态框预览
        //     setModalImg({ visible: true, url: src });
        // }
    };
 
    // 处理附件变化
    const handleAttachmentChange = (info) => {
        setFileList(info.fileList);
        if (info?.file?.status === 'done') {
            $$.showToast({ content: '上传成功' });
        } else if (info?.file?.status === 'error') {
            $$.showToast({ content: '上传失败，请重试' });
        }
    };
 
    // 处理理由变化
    const handleReasonChange = (value) => {
        setFormData({
            ...formData,
            applyContent: value,
        });
    };
 
    // 更新联合处置的部门
    useEffect(() => {
        let data = $$.getLocal('selectDept');
        if (data) {
            setSelectedDepts(data);
            $$.clearLocal('selectDept');
        }
    }, [$$.getLocal('selectDept')]);
 
    const renderActionButtons = () => {
        const buttonMap = {
            tjbljl: {
                className: 'action-btn action-btn-primary',
                onClick: handleAddRecord,
                label: '添加办理记录',
            },
            jasq: {
                className: 'action-btn action-btn-success',
                onClick: handleApplyClose,
                label: '申请结案',
            },
            lhczsq: {
                className: 'action-btn action-btn-warning',
                onClick: handleJointHandle,
                label: '申请联合处置',
            },
        };
 
        return staticButtonList.map((btn) => {
            const buttonConfig = buttonMap[btn.id];
            if (!buttonConfig) return null;
 
            return (
                <div key={btn.id} className={buttonConfig.className} onClick={buttonConfig.onClick}>
                    {btn.label}
                </div>
            );
        });
    };
 
    return (
        <>
            <Scrollbars style={{ height: editShow ? 'calc(100vh - 172px)' : 'calc(100vh - 104px)', backgroundColor: '#F2F2F2' }}>
                <div className="sxbl-info">
                    <div className="public-space"></div>
                    <div className="sxbl-card">
                        <div className="sxbl-manager">
                            <div className="sxbl-card-item">
                                <div className="sxbl-title">经办人</div>
                                {wantUser?.handleUserName ? (
                                    <>
                                        {/* onClose需要调用一个删除接口 */}
                                        <UserTag name={wantUser.handleUserName} value={wantUser.handleUserId} onClose={() => onClose()} />
                                        <div className="sxbl-card-item-img">
                                            <img src={sxbl_1} alt="关闭" />
                                        </div>
                                    </>
                                ) : (
                                    <div className="sxbl-desc">
                                        <span>指派一名经办人，及时跟进矛盾化解工作</span>
                                        <div className="sxbl-card-tag public-tag5 public-tag5-blue" onClick={handleAssign}>
                                            指派
                                        </div>
                                    </div>
                                )}
                            </div>
                            <div className="sxbl-record-list">
                                {recordList?.length > 0 && (
                                    <div className="sxbl-record-title">
                                        共<span className="public-color">{recordList.length}</span>条办理记录
                                    </div>
                                )}
                                {recordList?.length > 0 ? (
                                    recordList?.map((record, index) => (
                                        <div className="sxbl-record-item" key={record.id}>
                                            <div className="sxbl-record-header">
                                                <div className="sxbl-record-dept">
                                                    <span className="sxbl-dept-name">{record.handleUnitName}</span>
                                                    <span className={`sxbl-dept-tag sxbl-dept-tag-${record.handleType === 2 ? 'remark' : 'hostOrg'}`}>
                                                        {record.handleType === 2 ? '配合部门' : '承办部门'}
                                                    </span>
                                                </div>
                                            </div>
                                            <Popover visible={popoverVisible} content={record.handleContent} placement="bottom">
                                                <div
                                                    onClick={() => {
                                                        setPopoverVisible(true);
                                                    }}
                                                    className="sxbl-record-content"
                                                >
                                                    {record.handleContent}
                                                </div>
                                            </Popover>
                                            {/* 虚线分割线 */}
                                            <div className="sxbl-record-line"></div>
                                            <div className="sxbl-record-footer">
                                                <div className="sxbl-record-time">{record.createTime}</div>
                                                <div className="sxbl-record-view-tag" onClick={() => handleViewDetail(record)}>
                                                    查看
                                                </div>
                                            </div>
                                        </div>
                                    ))
                                ) : (
                                    <div className="sxbl-record-empty">
                                        <img src={select_null} alt="尚未添加办理记录" />
                                        <div className="sxbl-record-empty-text">尚未添加办理记录</div>
                                    </div>
                                )}
                                {recordList?.length > 0 && <div className="myList-loading">已加载全部数据</div>}
                            </div>
                        </div>
                    </div>
                </div>
            </Scrollbars>
            {editShow && (
                <div className="flow-bottom-button">
                    <Button type="primary" onClick={bottomOnclick}>
                        办理
                    </Button>
                </div>
            )}
 
            {visible && (
                <>
                    <div className="action-mask" onClick={handleClose}></div>
                    <div className="action-panel">
                        <div className="action-buttons">
                            {renderActionButtons()}
                            <div className="action-btn-cancel">
                                <div className="close-btn" onClick={handleClose}>
                                    <CloseOutlined />
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            )}
 
            {/* 办理记录抽屉 */}
            <Drawer visible={detailVisible} onClose={handleCloseDetail} position="bottom">
                <div className="record-detail">
                    <div className="record-detail-title">办理记录详情</div>
 
                    <div className="record-detail-item">
                        <div className="record-detail-label">反馈时间</div>
                        <div className="record-detail-value">{currentRecord.createTime || '-'}</div>
                    </div>
 
                    <div className="record-detail-item">
                        <div className="record-detail-label">反馈部门</div>
                        <div className="record-detail-value">
                            {currentRecord.handleUnitName || '-'}&nbsp;&nbsp;
                            <span className={`sxbl-dept-tag sxbl-dept-tag-${currentRecord.handleType === 2 ? 'remark' : 'hostOrg'}`}>
                                {currentRecord.handleType === 2 ? '配合部门' : '承办部门'}
                            </span>
                        </div>
                    </div>
 
                    <div className="record-detail-item">
                        <div className="record-detail-label">操作人</div>
                        <div className="record-detail-value">
                            {currentRecord.handleUserName} {currentRecord.mobile || ''}
                        </div>
                    </div>
 
                    <div className="record-detail-item">
                        <div className="record-detail-label">办理意见</div>
                        <div className="record-detail-value record-detail-content">{currentRecord.handleContent || '-'}</div>
                    </div>
 
                    {currentRecord?.fileInfoList && currentRecord?.fileInfoList?.length > 0 && (
                        <div className="record-detail-item">
                            <div className="record-detail-label">办理附件</div>
                            <div className="record-detail-files">
                                <>
                                    <Upload
                                        label=""
                                        disabled
                                        onPreview={onPreview}
                                        fileList={currentRecord.fileInfoList}
                                        type="form-upload"
                                        accept="*"
                                        previewContent="预览"
                                        showUploadList={{
                                            showRemoveIcon: false,
                                            showUploadBtn: false,
                                        }}
                                        className="daxx-upload-preview-only"
                                    />
                                </>
                            </div>
                        </div>
                    )}
 
                    <div className="record-detail-footer">
                        <Button type="primary" block onClick={handleEdit}>
                            修改
                        </Button>
                    </div>
                </div>
            </Drawer>
 
            {/* 联合处置申请 */}
            <Drawer visible={jointHandleVisible} onClose={handleCloseJointHandle} position="bottom">
                <div className="joint-handle-drawer">
                    <div className="joint-handle-title">联合处置申请</div>
                    <Scrollbars style={{ height: '45vh', marginBottom: '68px' }}>
                        <div className="joint-handle-form">
                            <div className="joint-handle-item">
                                <div className="joint-handle-label joint-handle-label-title">
                                    <div className="form-label">
                                        <span className="required-mark">*</span>
                                        添加配合部门&nbsp;
                                        <span className="optional-mark">(可多选)</span>
                                    </div>
                                    <div
                                        className="joint-handle-select"
                                        onClick={() => history.push(`/gzdyh/selectPerson?type=2&caseId=${caseId}&caseTaskId=${caseTaskId}&isMultiple=true`)}
                                    >
                                        <span>选择</span>&nbsp;
                                        <span className="joint-handle-arrow">
                                            <RightArrow2Outlined style={{ fontSize: '16px' }} />
                                        </span>
                                    </div>
                                </div>
                                <div className="joint-handle-value">
                                    {selectedDepts.length > 0 ? (
                                        // 循环
                                        <div className="joint-handle-dept-tags">
                                            {selectedDepts.map((dept) => (
                                                <UserTag key={dept.value} viewBtn={false} name={dept.label} value={dept.value} onClose={() => handleRemoveDept(dept.value)} />
                                            ))}
                                        </div>
                                    ) : null}
                                </div>
                            </div>
 
                            <div className="joint-handle-item">
                                <div className="form-label">
                                    <span className="required-mark">*</span>
                                    添加理由
                                </div>
                                <div className="joint-handle-value">
                                    <TextareaItem
                                        placeholder="请填写"
                                        value={formData.applyContent}
                                        onChange={handleReasonChange}
                                        className="joint-handle-textarea"
                                        rows={5}
                                    />
                                </div>
                            </div>
 
                            <div className="joint-handle-item">
                                <DingUpload
                                    title="附件材料"
                                    subtitle="可添加申请联合处置相关附件"
                                    fileList={fileList}
                                    onChange={handleAttachmentChange}
                                    mainId={caseId || ''}
                                    ownerId={jointHandleNewId || ''}
                                    ownerType="22_00018-508"
                                    tipText="支持扩展名：.rar .zip .doc .docx .pdf .jpg，30M以内"
                                    btnText="上传文件"
                                />
                            </div>
                        </div>
                    </Scrollbars>
                    <div className="user-detail-footer">
                        <Button type="primary" block onClick={handleSubmitJointHandle}>
                            提交
                        </Button>
                    </div>
                </div>
            </Drawer>
        </>
    );
};
 
export default Sxbl;