Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide

hejianhao

2025-03-17 b549b794204c68fe706501ff61259d4cb2d4d7c3

 management/src/pages/appeal-management/detail.jsx

@@ -1,189 +1,217 @@
import { buildProTableDataSource, sendRequest, showDelConfirm } from '@/utils/antdUtils';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Card, Select, Space, Descriptions, Divider, Steps, message } from 'antd';
import { useRef, useState } from 'react';
import { Access, useAccess, history } from 'umi';
// import { add, edit, del, getList } from './service';
import { useRef, useState, useEffect } from 'react';
import { Access, useAccess } from 'umi'
import { history, useLocation } from "@umijs/max"
import { getDetail } from './service';
import moment from 'moment';
import './index.less';
import {downLoad } from '@/utils/utils';

const Account = () => {
    const actionRef = useRef();
    const addViewRef = useRef();
    const [current, setCurrent] = useState(0);
    const [detail, setDetail] = useState({});
    const searchParams = new URLSearchParams(useLocation().search);
    const id = searchParams.get('id');

    useEffect(() => {
        getDetail({ id: id }).then((res) => {
            setDetail(res.data);
        });
    }, []);

    const items = [
        {
            key: '1',
            label: '述求状态',
            children: 'Zhou Maomao',
            children: ['正在办理', '延期办理', '超时办理', '已办结', '待审核', '上报待审核'][detail.status],
        },
        {
            key: '2',
            label: '述求号',
            children: '1810000000',
            children: detail.serialNumber,
        },
        {
            key: '3',
            label: '处理状态',
            children: 'Pending',
            label: '',
            children: '',
        },
        {
            key: '4',
            label: '处理进度',
            children: 'In Progress',
            label: '',
            children: '',
        },
        {
            key: '5',
            label: '发生时间',
            children: 'Hangzhou, Zhejiang',
            children: moment(detail.time).format('YYYY-MM-DD HH:mm:ss'),
        },
        {
            key: '6',
            label: '问题类型',
            children: 'empty',
            children: detail.problemType,
        },
        {
            key: '7',
            label: '群众姓名',
            children: '张三',
            children: detail.name,
        },
        {
            key: '8',
            label: '联系电话',
            children: '13800138000',
            children: detail.contactNumber,
        },
        {
            key: '9',
            label: '发生地点',
            children: 'Hangzhou, Zhejiang',
            children: detail.location,
        },
        {
            key: '10',
            label: '详细地址',
            children: 'empty',
            children: detail.detailedAddress,
        },
        {
            key: '11',
            label: '录入人',
            children: '张三',
            children: detail.reportUserName,
        },
        {
            key: '12',
            label: '联系电话',
            children: '13800138000',
            children: detail.reportUserPhone,
        },
        {
            key: '13',
            label: '问题描述',
            children: '这是一段问题描述文字',
            children: detail.descriptionContent,
            span: 4,
        },
        {
            key: '14',
            label: '上传图片',
            children: <>
                <img width={80} height={80} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="example" />
                {detail.images && (detail.images || '').split(',').map((item, index) => (
                    <img width={80} height={80} src={item} key={index} alt="example" />
                ))}
            </>,
            span: 4,
        },
        {
            key: '15',
            label: '上传视频',
            children: <><video width={280} src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video></>,
            children: <>
                {detail.videos && (detail.videos || '').split(',').map((item, index) => (
                    <video width={280} src={item} key={index} controls></video>
                ))}
            </>,
            span: 4,
        },
    ];

    const items1 = [
        {
            key: 'First',
            title: 'First-content',
        },
        {
            key: 'Second',
            title: 'Second-content',
        },
        {
            key: 'Last',
            title: 'Last-content',
        },

    ];

    return (
        <div>
            <PageContainer header={{ breadcrumb: {} }} title="述求详情" >
            <PageContainer className={'appeal-management-detail'} header={{ breadcrumb: {} }} title="述求详情" >
                <Card>
                    <Descriptions column={4} title="基础信息" items={items} />
                    <Divider />
                    <Descriptions title="办理进度" column={1} >
                        <Descriptions.Item>
                            <Card style={{ width: '800px' }} title={'张三'} extra={'2021-01-01 15：00：00'}>
                                <Descriptions column={1} >
                                    <Descriptions.Item>
                                        这是办理进度说明这是办理进度说明这是办理进度说明这是办理进度说明这是办理进度说明
                                    </Descriptions.Item>
                                    <Descriptions.Item label={'上传图片'}>
                                        <img width={80} height={80} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="example" />
                                    </Descriptions.Item>
                                    <Descriptions.Item label={'上传视频'}>
                                        <video width={280} src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
                                    </Descriptions.Item>
                                </Descriptions>
                            </Card>
                        </Descriptions.Item>
                    </Descriptions>
                    <div>
                        <Descriptions title="办理进度" column={1}>
                            {detail.complaintProgresses?.length > 0 ? detail.complaintProgresses.map((item, index) => (
                                <Descriptions.Item key={index}>
                                    <Card style={{ width: '800px' }} title={item.createByName} extra={moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}>
                                        <Descriptions column={1} >
                                            <Descriptions.Item>
                                                {item.describe}
                                            </Descriptions.Item>
                                            <Descriptions.Item label={'上传图片'}>
                                                {item.imgUrl && (item.imgUrl || '').split(',').map((item, index) => (
                                                    <img width={80} style={{ marginRight: '10px' }} height={80} src={item} key={index} alt="example" />
                                                ))}
                                            </Descriptions.Item>
                                            <Descriptions.Item label={'上传视频'}>
                                                {item.videoUrl && (item.videoUrl || '').split(',').map((item, index) => (
                                                    <video width={280} style={{ marginRight: '10px' }} src={item} key={index} controls></video>
                                                ))}
                                            </Descriptions.Item>
                                        </Descriptions>
                                    </Card>
                                </Descriptions.Item>
                            )) : <Descriptions.Item span={4} >暂无办理进度</Descriptions.Item>}
                        </Descriptions>
                    </div>

                    <Divider />
                    <Descriptions title="述求流转" >
                    {detail.complaintFlows?.length > 0 && <><Descriptions title="述求流转" >

                        <Descriptions.Item span={4}>
                            <div style={{ width: '100%', overflowX: 'auto' }}   >
                                <Steps current={current} items={items1} />
                                <Steps size="small"  >
                                    {detail.complaintFlows && detail.complaintFlows.map((item, index) => (
                                        <Steps.Item status={'process'} key={index} title={item.name} description={<span>{item.type == 1 ? '下派' : '上报'} <span>{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}</span> </span>} />
                                    ))}
                                </Steps>
                            </div>
                        </Descriptions.Item>
                    </Descriptions>
                    <Divider />
                    <Descriptions title="办结情况" >
                        <Descriptions.Item span={4}>
                            <Card style={{ width: '800px' }} extra={<div style={{ width: '750px', display: 'flex', justifyContent: 'space-between' }}>
                                <span>办结时间：2021-01-01 15:00:00</span>
                                <span>办结人员：张三</span>
                                <span>联系电话：13588888888</span>
                            </div>}>
                                <Descriptions column={1} >
                                    <Descriptions.Item>
                                        这是办理进度说明这是办理进度说明这是办理进度说明这是办理进度说明这是办理进度说明
                                    </Descriptions.Item>
                                    <Descriptions.Item label={'上传图片'}>
                                        <img width={80} height={80} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="example" />
                                    </Descriptions.Item>
                                    <Descriptions.Item label={'上传视频'}>
                                        <video width={280} src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
                                    </Descriptions.Item>
                                </Descriptions>
                            </Card>
                        </Descriptions.Item>
                    </Descriptions>
                    <Descriptions title="办结评价" style={{ marginTop: '20px' }} >
                        <Descriptions.Item span={4}>
                            <Card style={{ width: '800px' }} extra={<div style={{ width: '750px', display: 'flex', justifyContent: 'flex-start' }}>
                                <span>评价打分：满意</span>
                            </div>}>
                                <Descriptions column={1} >
                                    <Descriptions.Item>
                                        这是评价内容这是评价内容这是评价内容这是评价内容这是评价内容
                                    </Descriptions.Item>
                                    <Descriptions.Item label={'上传图片'}>
                                        <img width={80} height={80} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="example" />
                                    </Descriptions.Item>
                                    <Descriptions.Item label={'上传视频'}>
                                        <video width={280} src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
                                    </Descriptions.Item>
                                </Descriptions>
                            </Card>
                        </Descriptions.Item>
                    </Descriptions>
                        <Divider /></>}
                    {[3, 4].includes(detail.status) &&
                        <Descriptions title="办结情况" >
                            <Descriptions.Item span={4}>
                                <Card style={{ width: '800px' }} extra={<div style={{ width: '750px', display: 'flex', justifyContent: 'space-between' }}>
                                    <span>办结时间：{moment(detail.completionTime).format('YYYY-MM-DD HH:mm:ss')}</span>
                                    <span>办结人员：{detail.completionUsername}</span>
                                    <span>联系电话：{detail.completionUserPhone}</span>
                                </div>}>
                                    <Descriptions column={1} >
                                        <Descriptions.Item>
                                            {detail.completionDescription}
                                        </Descriptions.Item>
                                        <Descriptions.Item label={'上传图片'}>
                                            {detail.completionImages && detail.completionImages.split(',').map((item, index) => (
                                                <img width={80} height={80} style={{ marginRight: '10px' }} src={item} key={index} alt="example" />
                                            ))}
                                        </Descriptions.Item>
                                        <Descriptions.Item label={'上传视频'}>
                                            {detail.completionVideos && detail.completionVideos.split(',').map((item, index) => (
                                                <video width={280} style={{ marginRight: '10px' }} src={item} key={index} controls></video>
                                            ))}
                                        </Descriptions.Item>
                                    </Descriptions>
                                </Card>
                            </Descriptions.Item>
                        </Descriptions>}
                    {detail.complaintComment &&
                        <Descriptions title="办结评价" style={{ marginTop: '20px' }} >
                            <Descriptions.Item span={4}>
                                <Card style={{ width: '800px' }} extra={<div style={{ width: '750px', display: 'flex', justifyContent: 'flex-start' }}>
                                    <span>评价打分：{['不满意', '一般', '满意', '非常满意'][detail.complaintComment?.rate]}</span>
                                </div>}>
                                    <Descriptions column={1} >
                                        <Descriptions.Item>
                                            {detail.complaintComment?.content}
                                        </Descriptions.Item>
                                        <Descriptions.Item label={'上传图片'}>
                                            {detail.complaintComment?.imgUrl && detail.complaintComment?.imgUrl.split(',').map((item, index) => (
                                                <img width={80} height={80} style={{ marginRight: '10px' }} src={item} key={index} alt="example" />
                                            ))}
                                        </Descriptions.Item>
                                        <Descriptions.Item label={'上传视频'}>
                                            {detail.complaintComment?.videoUrl && detail.complaintComment?.videoUrl.split(',').map((item, index) => (
                                                <video width={280} style={{ marginRight: '10px' }} src={item} key={index} controls></video>
                                            ))}
                                        </Descriptions.Item>
                                    </Descriptions>
                                </Card>
                            </Descriptions.Item>
                        </Descriptions>
                    }


                    <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'center' }}>
                        <Button onClick={() => { 
                        <Button onClick={() => {
                            try {
                                history.go(-1);
                            } catch (error) {
@@ -191,36 +219,39 @@
                                console.error('Navigation error:', error);
                            }
                        }} style={{ marginRight: '20px' }}  >关闭</Button>
                        <Button type="primary" onClick={() => { 
                        <Button type="primary" onClick={() => {
                            try {
                                downLoad(`/api/huacheng-sangeshenbian/complaint/download-file/${id}/1`, '社区问题单导出.docx');
                                // TODO: Implement export functionality
                                message.success('导出成功');
                            } catch (error) {
                                message.error('导出失败，请重试');
                                console.error('Export error:', error);
                            }
                        }}  style={{ marginRight: '20px' }}>社区问题单导出</Button>
                        <Button type="primary" onClick={() => { 
                            try {
                        }} style={{ marginRight: '20px' }}>社区问题单导出</Button>
                        <Button type="primary" onClick={() => {
                                try {
                                downLoad(`/api/huacheng-sangeshenbian/complaint/download-file/${id}/2`, '问题处理单导出.docx');
                                // TODO: Implement export functionality
                                message.success('导出成功');
                            } catch (error) {
                                message.error('导出失败，请重试');
                                console.error('Export error:', error);
                            }
                        }}  style={{ marginRight: '20px' }}>问题处理单导出</Button>
                        <Button type="primary" onClick={() => { 
                        }} style={{ marginRight: '20px' }}>问题处理单导出</Button>
                        <Button type="primary" onClick={() => {
                            try {
                                downLoad(`/api/huacheng-sangeshenbian/complaint/download-file/${id}/3`, '协调通知单导出.docx');
                                // TODO: Implement export functionality
                                message.success('导出成功');
                            } catch (error) {
                                message.error('导出失败，请重试');
                                console.error('Export error:', error);
                            }
                        }} >协调通知到导出</Button>
                        }} >协调通知单导出</Button>
                    </div>
                </Card>
                


            </PageContainer>
        </div>