H5/threeSide.git

			@@ -1,13 +1,14 @@
			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 { Button, Card, Select, Space, Descriptions, Divider, Steps, message, Modal, Form, Input, Upload, Popconfirm } from 'antd';
			import { useRef, useState, useEffect } from 'react';
			import { Access, useAccess } from 'umi'
			import { history, useLocation } from "@umijs/max"
			import { getDetail } from './service';
			import { getDetail, editProgress, deleteProgress } from './service';
			import moment from 'moment';
			import './index.less';
			import {downLoad } from '@/utils/utils';
			import {downLoad, customRequest } from '@/utils/utils';
			import { PlusOutlined } from '@ant-design/icons';

			const Account = () => {
			const actionRef = useRef();
			@@ -16,6 +17,22 @@
			const [detail, setDetail] = useState({});
			const searchParams = new URLSearchParams(useLocation().search);
			const id = searchParams.get('id');
			const [editModalVisible, setEditModalVisible] = useState(false);
			const [editProgressData, setEditProgressData] = useState(null);
			const [editForm] = Form.useForm();
			const [loading, setLoading] = useState(false);
			const [imgFileList, setImgFileList] = useState([]);
			const [videoFileList, setVideoFileList] = useState([]);
			const [previewVisible, setPreviewVisible] = useState(false);
			const [previewImage, setPreviewImage] = useState('');
			const [previewType, setPreviewType] = useState('image'); // 'image' or 'video'
			const uploadConfig = {
			name: 'file',
			action: 'https://huacheng.psciio.com/api/huacheng-communitybackstage/communitypartybuilding/uploadimage',
			headers: {
			Authorization: 'Bearer ' + localStorage.getItem('token'),
			},
			};

			useEffect(() => {
			getDetail({ id: id }).then((res) => {
			@@ -111,6 +128,117 @@
			span: 4,
			},
			];

			// 上传前校验
			const beforeUpload = (file) => {
			return new Promise((resolve, reject) => {
			if (file.name.includes(',')) {
			message.warning('上传文件不能包含英文逗号(,)');
			return Upload.LIST_IGNORE;
			}
			setLoading(true);
			resolve(file);
			});
			};

			// 图片上传change
			const handleImgChange = ({ file, fileList: newFileList }) => {
			if (file.status === 'error' \|\| (file.status === 'done' && file.response && file.response.code !== 200)) {
			setLoading(false);
			setImgFileList([]);
			message.error('上传失败');
			editForm.setFieldValue('imgUrl', []);
			return;
			}
			if (file.status === 'done' && file.response && file.response.code === 200) {
			setLoading(false);
			message.success('上传成功');
			}
			let urls = newFileList.map(item => {
			if (item.status === 'done' && item.response && item.response.data) {
			item.url = item.response.data;
			}
			return item.url \|\| item.url;
			}).filter(Boolean);
			setImgFileList(newFileList);
			editForm.setFieldValue('imgUrl', urls);
			};

			// 视频上传change
			const handleVideoChange = ({ file, fileList: newFileList }) => {
			if (file.status === 'error' \|\| (file.status === 'done' && file.response && file.response.code !== 200)) {
			setLoading(false);
			setVideoFileList([]);
			message.error('上传失败');
			editForm.setFieldValue('videoUrl', []);
			return;
			}
			if (file.status === 'done' && file.response && file.response.code === 200) {
			setLoading(false);
			message.success('上传成功');
			}
			let urls = newFileList.map(item => {
			if (item.status === 'done' && item.response && item.response.data) {
			item.url = item.response.data;
			}
			return item.url \|\| item.url;
			}).filter(Boolean);
			setVideoFileList(newFileList);
			editForm.setFieldValue('videoUrl', urls);
			};

			// 办理进度编辑提交
			const handleEditProgress = async () => {
			try {
			setLoading(true);
			console.log('editProgressData', editProgressData);

			const values = await editForm.validateFields();
			await editProgress({
			complaintId: id,
			describe: values.describe,
			id: editProgressData.id,
			imgUrl: (values.imgUrl \|\| []).join(','),
			video: (values.videoUrl \|\| []).join(',')
			});
			message.success('编辑成功');
			setEditModalVisible(false);
			getDetail({ id }).then((res) => setDetail(res.data));
			} catch (e) {
			// 校验或请求失败
			} finally {
			setLoading(false);
			}
			};

			// 办理进度删除
			const handleDeleteProgress = async (progressId) => {
			try {
			await deleteProgress({ id: progressId });
			message.success('删除成功');
			getDetail({ id }).then((res) => setDetail(res.data));
			} catch (e) {
			message.error('删除失败');
			}
			};

			// 在弹窗打开时同步 fileList
			useEffect(() => {
			if (editModalVisible && editProgressData) {
			setImgFileList((editProgressData.imgUrl ? editProgressData.imgUrl.split(',') : []).map((url, idx) => ({ uid: idx, url, status: 'done' })));
			setVideoFileList((editProgressData.video ? editProgressData.video.split(',') : []).map((url, idx) => ({ uid: idx, url, status: 'done' })));
			editForm.setFieldsValue({
			describe: editProgressData.describe,
			imgUrl: editProgressData.imgUrl ? editProgressData.imgUrl.split(',') : [],
			videoUrl: editProgressData.video ? editProgressData.video.split(',') : [],
			});
			}
			if (!editModalVisible) {
			setImgFileList([]);
			setVideoFileList([]);
			}
			}, [editModalVisible, editProgressData]);

			return (
			<div>
			<PageContainer className={'appeal-management-detail'} header={{ breadcrumb: {} }} title="述求详情" >
			@@ -121,22 +249,34 @@
			<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')}>
			<Card style={{ width: '800px', position: 'relative' }} 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>{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" />
			{item.imgUrl && (item.imgUrl \|\| '').split(',').map((img, idx) => (
			<img width={80} style={{ marginRight: '10px' }} height={80} src={img} key={idx} 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>
			{item.video && item.video.split(',').map((video, idx) => (
			<video width={280} style={{ marginRight: '10px' }} src={video} key={idx} controls></video>
			))}
			</Descriptions.Item>
			</Descriptions>
			<div style={{ position: 'absolute', right: 24, bottom: 16 }}>
			<Button size="small" type="primary" style={{ marginRight: 8 }} onClick={() => {
			setEditProgressData(item);
			setEditModalVisible(true);
			editForm.setFieldsValue({
			describe: item.describe,
			imgUrl: item.imgUrl ? item.imgUrl.split(',') : [],
			videoUrl: item.video ? item.video.split(',') : [],
			});
			}}>编辑</Button>
			<Popconfirm title="确定要删除该办理进度吗？" onConfirm={() => handleDeleteProgress(item.id)} okText="确定" cancelText="取消">
			<Button size="small" danger>删除</Button>
			</Popconfirm>
			</div>
			</Card>
			</Descriptions.Item>
			)) : <Descriptions.Item span={4} >暂无办理进度</Descriptions.Item>}
			@@ -252,7 +392,80 @@
			</div>
			</Card>

			<Modal
			title="编辑办理进度"
			open={editModalVisible}
			onCancel={() => setEditModalVisible(false)}
			onOk={handleEditProgress}
			confirmLoading={loading}
			destroyOnClose
			width={600}
			>
			<Form form={editForm} layout="vertical" initialValues={{ describe: '', imgUrl: [], videoUrl: [] }}>
			<Form.Item name="describe" label="办理进度描述" rules={[{ required: true, message: '请输入办理进度描述' }]}>
			<Input.TextArea rows={4} maxLength={500} showCount />
			</Form.Item>
			<Form.Item name="imgUrl" label="图片：">
			<Upload
			{...uploadConfig}
			listType="picture-card"
			maxCount={9}
			beforeUpload={beforeUpload}
			onChange={handleImgChange}
			onRemove={() => {
			setImgFileList([]);
			editForm.setFieldValue('imgUrl', []);
			}}
			showUploadList={{ showPreviewIcon: true }}
			accept="image/*"
			fileList={imgFileList}
			onPreview={file => {
			setPreviewType('image');
			setPreviewImage(file.url \|\| file.thumbUrl);
			setPreviewVisible(true);
			}}
			>
			{imgFileList.length < 9 && <PlusOutlined />}
			</Upload>
			</Form.Item>
			<Form.Item name="videoUrl" label="视频：">
			<Upload
			{...uploadConfig}
			listType="picture-card"
			maxCount={9}
			beforeUpload={beforeUpload}
			onChange={handleVideoChange}
			onRemove={() => {
			setVideoFileList([]);
			editForm.setFieldValue('videoUrl', []);
			}}
			showUploadList={{ showPreviewIcon: true }}
			accept="video/*"
			fileList={videoFileList}
			onPreview={file => {
			setPreviewType('video');
			setPreviewImage(file.url \|\| file.thumbUrl);
			setPreviewVisible(true);
			}}
			>
			{videoFileList.length < 9 && <PlusOutlined />}
			</Upload>
			</Form.Item>
			</Form>
			</Modal>

			<Modal
			open={previewVisible}
			footer={null}
			onCancel={() => setPreviewVisible(false)}
			width={previewType === 'video' ? 800 : 600}
			>
			{previewType === 'image' ? (
			<img alt="预览" style={{ width: '100%' }} src={previewImage} />
			) : (
			<video style={{ width: '100%' }} src={previewImage} controls autoPlay />
			)}
			</Modal>
			</PageContainer>
			</div>
			);