qzc-dev-demo
秦子超 2025-04-10 17:01:01 +08:00
commit 5c7622aa52
5 changed files with 352 additions and 328 deletions

View File

@ -4,7 +4,7 @@ import zd from '../../../assets/img/wait.png'
const Page = () => {
return (
<div style={{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff',height:'100%',padding:'20px'}}>
<Image src={zd} style={{margin:'auto',margin:'20px',height:'530px'}} preview={false}/>
<Image src={zd} style={{margin:'auto',margin:'20px',height:'130px'}} preview={false}/>
</div>
)
}

View File

@ -96,9 +96,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
<Form.Item label="施行日期" name="implementationDate">
<RangePicker allowClear />
</Form.Item>
<Form.Item label="上传时间" name="uploadTime">
{/* <Form.Item label="" name="uploadTime">
<RangePicker allowClear />
</Form.Item>
</Form.Item> */}
</div>}
</Form>
</div>

View File

@ -68,7 +68,7 @@ const Page = ({ mode, onCrudSuccess,record,submit }) => {
if (mode == 'save') {
addBasic(params)
} else if (mode == 'edit') {
editBasic({...params})
editBasic({...params,caseDate:record.caseDate ? dayjs(record.caseDate).format('YYYY-MM-DD HH:mm:ss'):''})
}
}
const addBasic = (params) => {

View File

@ -70,7 +70,7 @@ const Page = () => {
refModal.current.showSave();
} else if (type === 'edit') {
let obj={}
let obj = {}
if (params.caseDate) {
obj.caseDate = params.caseDate ? dayjs(params.caseDate) :undefined
}

View File

@ -1,10 +1,10 @@
import React, { useEffect, useState, useRef } from 'react';
import { TreeSelect, Table, Tag, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image,Radio } from 'antd';
import { TreeSelect, Table, Tag, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image, Radio } from 'antd';
import './ddForm.less'
import dayjs from 'dayjs'
import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'
import apiurl from '../../../../service/apiurl';
import { httpgetExport, httppostAddfile } from '../../../../utils/request';
import { httpgetExport, httppostAddfile } from '../../../../utils/request';
import { exportFile } from '../../../../utils/tools';
// import apiUrl from '../../service/apiurl'
@ -13,349 +13,373 @@ const { RangePicker } = DatePicker;
const { TextArea } = Input;
const baseUrl = "http://223.75.53.141:9100/gs-tsg"
let dataList = [];
const FormZdy = ({ fileKey, typeName = "ddForm", formJson, getFormInfo, type, formJsonData, typeUpload = 'dispatch', isModalOpen, fileType, footer = true, uploadUrl, TableZdyProps, downloadUrl,
onSave }) => {
const [fileList, setFileList] = useState([])
const [fileListUp, setFileLisUp] = useState([])
const [url, setUrl] = useState('')
const [isModal, setIsModal] = useState(false)
const [loading, setLoading] = useState(false)
const [searchValue, setSearchValue] = useState('');
const FormZdy = ({ fileKey,typeName = "ddForm", formJson, getFormInfo, type, formJsonData, typeUpload = 'dispatch', isModalOpen, fileType, footer = true, uploadUrl,TableZdyProps,downloadUrl,
onSave }) => {
const [fileList, setFileList] = useState([])
const [fileListUp, setFileLisUp] = useState([])
const [url, setUrl] = useState('')
const [isModal, setIsModal] = useState(false)
const [loading, setLoading] = useState(false)
const [searchValue, setSearchValue] = useState('');
const treeRef = useRef();
//
const [form] = Form.useForm();
// function onDocumentLoadSuccess({ numPages }) {
// setRenderNumPages(numPages);
// }
const onFinish = (e) => {
}
const getInfo = () => {
form.validateFields().then((values) => {
getFormInfo({
...values,
// caseDate: type != 'edit' ? values?.caseDate : "",
caseDate: values?.caseDate,
[fileKey]: fileList, fileIds: fileList.map(item => item.fileId)
})
setFileList([])
}).catch((errorInfo) => {
console.log(errorInfo, 'error');
})
//
}
const cancel = () => {
getFormInfo(false)
form.resetFields()
setFileList([])
}
const { Dragger } = Upload;
// const preView = (e) => {
// window.open('http://local.gunshiiot.com:18083/xintankou/api/file/preview/104')
// }
const deleteFile = (e) => {
// debugger;
let arr = fileList.filter(item => item.fileId !== e)
setFileList(arr)
}
const props = {
name: 'file',
multiple: true,
fileList: fileList,
showUploadList: false,
beforeUpload: (file, fileList) => {
if (fileType == "pic" &&
(file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
message.error('仅支持上传jpg/png/jpeg格式的图片');
return false;
} else {
return true;
}
},
customRequest(e) {
setLoading(true);
httppostAddfile(uploadUrl, e).then(res => {
setLoading(false);
setFileList([...fileList, res.data])
})
}
};
const onChange = () => { }
function checkMediaType(url) {
// 创建URL对象
var link = url;
// 获取路径的最后一个点之后的内容作为文件扩展名
var extension = link?.split('.').pop().toLowerCase();
// 声明支持的图片和视频文件扩展名
var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
var file = ['pdf', 'word', 'xslx', 'xsl', 'txt', "pptx"];
//
// 判断文件扩展名是否在图片扩展名数组中
if (imageExtensions.includes(extension)) {
return 'image';
}
// 判断文件扩展名是否在视频扩展名数组中
if (file.includes(extension)) {
return extension;
}
// 扩展名不在图片或视频数组中返回null表示无法确定媒体类型
return null;
}
const preView = (item) => {
if (checkMediaType(item.fileName) == 'pdf') {
// window.open(baseUrl + item.previewUrl)
setUrl(item.fileId)
setIsModal(true)
}
}
/**
* @description 文件下载
* @param {String} params 文件fileId
*/
const download = async (id, name) => {
var extension = name?.split('.').pop().toLowerCase();
httpgetExport(downloadUrl + id).then(res => {
exportFile(name, res.data)
})
}
useEffect(() => {
form.resetFields()
}, [])
useEffect(() => {
let formType = type
if (type = 'edit') {
formType = 2
}
if (type == 'view') {
formType = 1
}
if (type == 'save') {
form.setFieldsValue(formJsonData)
formType = 0
}
if (formType == 1 || formType == 2 || formType == 3) {
form.setFieldsValue(formJsonData)
if (formJsonData?.[fileKey]) {
setFileList(formJsonData[fileKey])
}
console.log(formJsonData, formJson);
//
}
return () => {
setFileList([])
}
}, [type, formJsonData, isModalOpen])
const handleTreeData = (treeData, searchValue = '') => {
const loop = (treeData) =>
treeData.map((item) => {
const strTitle = item.legalName;
const index = strTitle?.indexOf(searchValue);
const beforeStr = strTitle.substring(0, index);
const afterStr = strTitle.slice(index + searchValue?.length);
const title =
index > -1 ? (
<span key={item.id}>
{beforeStr}
<span className="site-tree-search-value" style={{ color: 'red' }}>{searchValue}</span>
{afterStr}
</span>
) : (
<span key={item.id}>{strTitle}</span>
);
if (item.children) {
return { title: title, key: item.id, children: loop(item.children), name: strTitle };
}
if (index > -1) {
console.log(index, strTitle, searchValue);
dataList.push(item.id)
// setExpandedKeys(dataList);
if (dataList.length < 2) {
treeRef.current.scrollTo({ key: dataList[0].id });
}
}
return {
title: title,
key: item.id,
name: strTitle
};
});
return loop(treeData);
};
const disableParentNodes = (treeData) => {
return treeData.map(node => {
const newNode = { ...node };
if (node.children && node.children.length > 0) {
newNode.disabled = true;
newNode.children = disableParentNodes(node.children);
}
return newNode;
});
}
//
const [form] = Form.useForm();
return (
<div style={{ backgroundColor: '#fff', marginTop: 10 }}>
<Form form={form} name="searchTabel" onFinish={onFinish} className={typeName}>
<Row>
{formJson?.map(item => {
return (
<Col span={item.span} >
{item.type == "input" &&
<Form.Item
label={item.label}
name={item.key}
labelCol={item.labelCol}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Input disabled={type == 'view' || item.disabled} placeholder={item.placeholder} />
</Form.Item>}
{item.type == "title" &&
<Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
// function onDocumentLoadSuccess({ numPages }) {
// setRenderNumPages(numPages);
// }
const onFinish = (e) => {
}
const getInfo = () => {
form.validateFields().then((values) => {
getFormInfo({
...values,
// caseDate: type != 'edit' ? values?.caseDate : "",
caseDate: values?.caseDate,
[fileKey]: fileList, fileIds: fileList.map(item => item.fileId)
})
setFileList([])
}).catch((errorInfo) => {
console.log(errorInfo, 'error');
})
//
}
const cancel = () => {
getFormInfo(false)
form.resetFields()
setFileList([])
<div className='title'>
<div className='titleRight'></div>
{item.content}
</div>
</Form.Item>}
}
const { Dragger } = Upload;
// const preView = (e) => {
// window.open('http://local.gunshiiot.com:18083/xintankou/api/file/preview/104')
// }
const deleteFile = (e) => {
// debugger;
let arr = fileList.filter(item => item.fileId !== e)
setFileList(arr)
}
const props = {
name: 'file',
multiple: true,
fileList: fileList,
showUploadList: false,
beforeUpload: (file, fileList) => {
if (fileType == "pic" &&
(file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
message.error('仅支持上传jpg/png/jpeg格式的图片');
return false;
} else {
return true;
}
},
customRequest(e) {
setLoading(true);
httppostAddfile(uploadUrl, e).then(res => {
setLoading(false);
setFileList([...fileList, res.data])
})
}
};
const onChange = () => { }
function checkMediaType(url) {
// 创建URL对象
var link = url;
// 获取路径的最后一个点之后的内容作为文件扩展名
var extension = link?.split('.').pop().toLowerCase();
{item.type == "Select" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Select disabled={type == 'view'} options={item.options} fieldNames={item.fieldNames} />
</Form.Item>}
{item.type == "Radio" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Radio.Group disabled={type == 'view'} options={item.options} />
</Form.Item>}
// 声明支持的图片和视频文件扩展名
var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
var file = ['pdf', 'word', 'xslx', 'xsl', 'txt', "pptx"];
//
// 判断文件扩展名是否在图片扩展名数组中
if (imageExtensions.includes(extension)) {
return 'image';
}
{/* {item.type == "Select" && <Select disabled={type == 1} options={item.options} />} */}
// 判断文件扩展名是否在视频扩展名数组中
if (file.includes(extension)) {
return extension;
}
{item.type == "Switch" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Switch defaultChecked onChange={onChange} disabled={type == 'view'} />
</Form.Item>}
// 扩展名不在图片或视频数组中返回null表示无法确定媒体类型
return null;
}
const preView = (item) => {
if (checkMediaType(item.fileName) == 'pdf') {
// window.open(baseUrl + item.previewUrl)
setUrl(item.fileId)
setIsModal(true)
}
{/* {item.type == "Switch" && <Switch defaultChecked onChange={onChange} disabled={type == 1} />} */}
}
{item.type == "DatePicker" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
{/* {formJsonData[item.key]} */}
<DatePicker disabled={type == 'view'} style={{ width: "100%" }} picker={item.picker} />
</Form.Item>}
/**
* @description 文件下载
* @param {String} params 文件fileId
*/
const download = async(id, name) => {
var extension = name?.split('.').pop().toLowerCase();
httpgetExport(downloadUrl+id).then(res => {
exportFile(name,res.data)
})
}
useEffect(()=>{
form.resetFields()
},[])
useEffect(() => {
let formType = type
if (type = 'edit') {
formType = 2
}
if (type == 'view') {
formType = 1
}
if (type == 'save') {
form.setFieldsValue(formJsonData)
formType = 0
}
if (formType == 1 || formType == 2 || formType == 3) {
form.setFieldsValue(formJsonData)
if (formJsonData?.[fileKey]) {
setFileList(formJsonData[fileKey])
}
{/* {item.type == "DatePicker" && <DatePicker disabled={type == 1} style={{ width: "100%" }} />} */}
console.log(formJsonData, formJson);
//
{item.type == "TextArea" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<TextArea rows={4} disabled={type == 'view'} />
</Form.Item>}
{/* {item.type == "TextArea" && <TextArea rows={4} disabled={type == 1} />} */}
}
{item.type == "RangePicker" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<RangePicker disabled={type == 'view'} />
</Form.Item>}
return () => {
setFileList([])
}
{item.type == "TreeSelect" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<TreeSelect
showSearch
ref={treeRef}
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
allowClear
onSearch={setSearchValue}
fieldNames={item.fieldNames}
treeData={disableParentNodes(item.treeData)}
treeCheckable={item.multiple}
disabled={type == 'view'}
// treeNodeFilterProp='legalName'
filterTreeNode={(inputValue, treeNode) => {
return treeNode.legalName.toLowerCase().includes(inputValue.toLowerCase());
}}
/>
}, [type, formJsonData, isModalOpen])
</Form.Item>}
const handleTreeData = (treeData, searchValue = '') => {
const loop = (data) => {
return data.map((item) => {
const strTitle = item.title?.toString() || '';
const matchValue = strTitle.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
const children = item.children ? loop(item.children) : [];
const hasChildren = children && children.length > 0;
return {
...item,
disabled: hasChildren, // 有子节点的设为禁用
children: hasChildren ? children : undefined
};
});
};
return loop(treeData);
};
const disableParentNodes = (treeData) => {
debugger
return treeData.map(node => {
const newNode = { ...node };
if (node.children && node.children.length > 0) {
newNode.disabled = true;
newNode.children = disableParentNodes(node.children);
}
return newNode;
});
}
return (
<div style={{ backgroundColor: '#fff', marginTop: 10 }}>
<Form form={form} name="searchTabel" onFinish={onFinish} className={typeName}>
<Row>
{formJson?.map(item => {
return (
<Col span={item.span} >
{item.type == "input" &&
<Form.Item
label={item.label}
name={item.key}
labelCol={item.labelCol}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Input disabled={type == 'view' || item.disabled} placeholder={item.placeholder} />
</Form.Item>}
{item.type == "title" &&
<Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<div className='title'>
<div className='titleRight'></div>
{item.content}
</div>
</Form.Item>}
{item.type == "Select" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Select disabled={type == 'view'} options={item.options} fieldNames={item.fieldNames} />
</Form.Item>}
{item.type == "Radio" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Radio.Group disabled={type == 'view'} options={item.options}/>
</Form.Item>}
{/* {item.type == "Select" && <Select disabled={type == 1} options={item.options} />} */}
{item.type == "Switch" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<Switch defaultChecked onChange={onChange} disabled={type == 'view'} />
</Form.Item>}
{/* {item.type == "Switch" && <Switch defaultChecked onChange={onChange} disabled={type == 1} />} */}
{item.type == "DatePicker" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
{/* {formJsonData[item.key]} */}
<DatePicker disabled={type == 'view'} style={{ width: "100%" }} picker={item.picker}/>
</Form.Item>}
{/* {item.type == "DatePicker" && <DatePicker disabled={type == 1} style={{ width: "100%" }} />} */}
{item.type == "TextArea" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<TextArea rows={4} disabled={type == 'view'} />
</Form.Item>}
{/* {item.type == "TextArea" && <TextArea rows={4} disabled={type == 1} />} */}
{item.type == "RangePicker" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<RangePicker disabled={type == 'view'} />
</Form.Item>}
{item.type == "TreeSelect" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
allowClear
onSearch={setSearchValue}
fieldNames={item.fieldNames}
treeData={handleTreeData(item.treeData,searchValue)}
treeCheckable={item.multiple}
disabled={type == 'view'}
filterTreeNode={(inputValue, treeNode) => {
return treeNode.legalName.toLowerCase().includes(inputValue.toLowerCase());
}}
/>
</Form.Item>}
{/* {item.type == "RangePicker" &&
{/* {item.type == "RangePicker" &&
<RangePicker disabled={type == 'view'} />} */}
{item.type == "upload" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
{item.type == "upload" && <Form.Item
label={item.label}
name={item.key}
rules={[{ required: item.required, message: '请输入' + item.label }]}
>
<>
{type !== 'view' && <Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<>
{type !== 'view' && <Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
{fileType == "pic" ? <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名jpegpng</p> : <p className="ant-upload-text"></p>}
{fileType == "pic" ? <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名jpegpng</p> : <p className="ant-upload-text"></p>}
</Dragger>}
<div className='flex' >
{fileList?.map((item) => {
return <div className='flex align-center file-item' style={{marginTop:5, marginRight:'3%',width:'30%',minHeight: "50px", fontSize: 14, columnGap: 10, cursor: checkMediaType(item.fileName) == 'image' || checkMediaType(item.fileName) == 'pdf' ? 'pointer' : "not-allowed" }}>
<div style={{ width: 40, height: 40, display: "flex", alignItems: 'center' }}>
{checkMediaType(item.fileName) == 'image' && <Image
height={40}
src={baseUrl + item.filePath}
/>}
{
checkMediaType(item.fileName) !== 'image' &&
<span >{checkMediaType(item.fileName)?.toUpperCase()}</span>
}
</div>
</Dragger>}
<div className='flex' >
{fileList?.map((item) => {
return <div className='flex align-center file-item' style={{ marginTop: 5, marginRight: '3%', width: '30%', minHeight: "50px", fontSize: 14, columnGap: 10, cursor: checkMediaType(item.fileName) == 'image' || checkMediaType(item.fileName) == 'pdf' ? 'pointer' : "not-allowed" }}>
<div style={{ width: 40, height: 40, display: "flex", alignItems: 'center' }}>
{checkMediaType(item.fileName) == 'image' && <Image
height={40}
src={baseUrl + item.filePath}
/>}
{
checkMediaType(item.fileName) !== 'image' &&
<span >{checkMediaType(item.fileName)?.toUpperCase()}</span>
}
</div>
<span onClick={() => preView(item)}>{item.fileName}</span>
{type !== 'view' && <DeleteOutlined onClick={() => deleteFile(item.fileId)} />}
<VerticalAlignBottomOutlined onClick={() => download(item.fileId, item.fileName)} />
</div>
})}
</div>
</>
</Form.Item>}
</Col>
)
})}
</Row>
</Form >
{TableZdyProps}
{
type !== 'view' && <div className="flex flex-end" style={{ marginTop: 10, justifyContent: "flex-end" }}>
<Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
<Button type="primary" onClick={getInfo} loading={loading}>确定</Button>
</div>
}
<PdfView url={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/rescue/goods/file/download/${url}`)}`} isModal={isModal} setModalN={(e)=>setIsModal(e)}/>
<span onClick={() => preView(item)}>{item.fileName}</span>
{type !== 'view' && <DeleteOutlined onClick={() => deleteFile(item.fileId)} />}
<VerticalAlignBottomOutlined onClick={() => download(item.fileId, item.fileName)} />
</div>
})}
</div>
</>
</Form.Item>}
</Col>
)
})}
</Row>
</Form >
{TableZdyProps}
{
type !== 'view' && <div className="flex flex-end" style={{ marginTop: 10, justifyContent: "flex-end" }}>
<Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
<Button type="primary" onClick={getInfo} loading={loading}>确定</Button>
</div>
}
<PdfView url={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/rescue/goods/file/download/${url}`)}`} isModal={isModal} setModalN={(e) => setIsModal(e)} />
</div >
);
</div >
);
}