页面搭建

lsf-dev
xielei 2024-09-29 17:56:08 +08:00
parent d58fd30476
commit 56042ad3db
7 changed files with 49 additions and 33 deletions

View File

@ -95,22 +95,22 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
* @param {string} id 删除的id
*/
const deleteFile = (fileId) => {
console.log(fileId);
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
console.log(fileId,fileList);
let filterFile = fileList.filter(item => item.fileId !== fileId);
setFileList(filterFile)
}
useEffect(() => {
if (mode != 'save') {
// const imgFile = record?.files?.map(o => ({
// name: o.name,
// response: {
// data: {
// filePath: o.filePath,
// fileId: o.fileId
// }
// },
// }))
setFileList(record?.files)
const imgFile = record?.files?.map(o => ({
name: o.fileName,
response: {
data: {
filePath: o.filePath,
fileId: o.fileId
}
},
}))
setFileList(imgFile)
}
}, [record, mode])
@ -232,6 +232,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
</p>
</Dragger>
}
{JSON.stringify(fileList)}
<Row gutter={[16]}>
{
fileList.length > 0 && fileList.map(file => {
@ -239,9 +240,9 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
<Col span={12}>
<div className="file-item" style={{ width: "75%",marginTop:5 }}>
<div className='file-description'>
{file?.fileName?.indexOf('.docx') > -1 ?
{file.name?.indexOf('.docx') > -1 ?
<div
onClick={() => { download(file.fileId) }}
onClick={() => { download(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FileWordOutlined
@ -249,35 +250,35 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
/>
</div>
:
file?.fileName?.indexOf('.pdf') > -1 ?
file.name?.indexOf('.pdf') > -1 ?
<div
onClick={() => { viewPdf(file.fileId) }}
onClick={() => { viewPdf(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FilePdfOutlined style={{ fontSize: 40 }} />
</div>
:
file?.fileName?.indexOf('.zip') > -1 ?
file.name?.indexOf('.zip') > -1 ?
<div
onClick={() => { download(file.fileId) }}
onClick={() => { download(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FileZipOutlined style={{ fontSize: 40 }} />
</div>
:
file?.fileName?.indexOf('.xlsx') > -1 ?
file.name?.indexOf('.xlsx') > -1 ?
<div
onClick={() => { download(file.fileId) }}
onClick={() => { download(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FileExcelOutlined style={{ fontSize: 40 }} />
</div>
:
<Image width={60} src={url + file.filePath} alt='' />
<Image width={60} src={url + file.response?.data?.filePath} alt='' />
}
<span>{file?.fileName}</span>
<span>{file.name}</span>
</div>
<div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.fileId)}>
<div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
<DeleteOutlined />
</div>
</div>

View File

@ -37,6 +37,8 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
const [fileListHj, setFileHj] = useState({'files3': [],'files4': [],'files5': [],'files6': [],'files7': []})
const [url, setUrl] = useState('')
const [isModal, setIsModal] = useState(false)
const [loading, setLoading] = useState(false)
const getInfo = () => {
form.validateFields().then((values) => {
getFormInfo({ ...fileListHj,...values, })
@ -72,8 +74,9 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
// }
},
customRequest(e) {
setLoading(true);
httppostAddfile(uploadUrl, e).then(res => {
if(fileListHj[keys]){
fileListHj[keys].push(res.data)
}else{
@ -82,6 +85,8 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
}
setFileHj({ ...fileListHj })
setLoading(false);
})
}
}
@ -202,7 +207,7 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
</Row>))}
<div className="flex flex-end" style={{ marginTop: 10, justifyContent: "flex-end" }}>
<Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
<Button type="primary" onClick={getInfo}>确定</Button>
<Button type="primary" onClick={getInfo} loading={loading}>确定</Button>
</div>
</Form >

View File

@ -34,6 +34,8 @@ const items = [
const Page = ({ mode, onCrudSuccess,record,submit }) => {
const [formData,setFormData] =useState({})
const [clqkDataConfig,setConfig] =useState([])
const [recordData,setRecord] =useState({})
// debugger;
const [key, setKeys] = useState('1')

View File

@ -26,6 +26,8 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
const [fileListHj, setFileHj] = useState({'files3': [],'files4': [],'files5': [],'files6': [],'files7': []})
const [url, setUrl] = useState('')
const [isModal, setIsModal] = useState(false)
const [loading, setLoading] = useState(false)
const getInfo = () => {
form.validateFields().then((values) => {
getFormInfo({ ...values, ...fileListHj })
@ -62,6 +64,7 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
// }
},
customRequest(e) {
setLoading(true);
httppostAddfile(uploadUrl, e).then(res => {
if(fileListHj[keys]){
@ -72,6 +75,7 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
}
setFileHj({ ...fileListHj })
setLoading(false);
})
}
}
@ -167,7 +171,7 @@ const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
</Row>))}
<div className="flex flex-end" style={{ marginTop: 10, justifyContent: "flex-end" }}>
<Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
<Button type="primary" onClick={getInfo}>确定</Button>
<Button type="primary" onClick={getInfo} loading={loading}>确定</Button>
</div>
</Form >

View File

@ -20,6 +20,8 @@ const FormZdy = ({ fileKey,typeName = "ddForm", formJson, getFormInfo, type, for
const [fileListUp, setFileLisUp] = useState([])
const [url, setUrl] = useState('')
const [isModal, setIsModal] = useState(false)
const [loading, setLoading] = useState(false)
//
@ -71,8 +73,9 @@ const FormZdy = ({ fileKey,typeName = "ddForm", formJson, getFormInfo, type, for
}
},
customRequest(e) {
setFileLisUp([...fileListUp, e.file])
setLoading(true);
httppostAddfile(uploadUrl, e).then(res => {
setLoading(false);
setFileList([...fileList, res.data])
})
}
@ -102,9 +105,9 @@ const FormZdy = ({ fileKey,typeName = "ddForm", formJson, getFormInfo, type, for
return null;
}
const preView = (item) => {
if (checkMediaType(item.name) == 'pdf') {
if (checkMediaType(item.fileName) == 'pdf') {
// window.open(baseUrl + item.previewUrl)
setUrl(item.previewUrl)
setUrl(item.fileId)
setIsModal(true)
}
@ -305,10 +308,10 @@ const FormZdy = ({ fileKey,typeName = "ddForm", formJson, getFormInfo, type, for
{
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}>确定</Button>
<Button type="primary" onClick={getInfo} loading={loading}>确定</Button>
</div>
}
<PdfView url={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/rescue/goods/file/download/${url}`)}`} isModal={isModal} setModalN={(e)=>setIsModal(e)}/>
<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 >

View File

@ -26,6 +26,7 @@ const Pdf = ({ url,isModal,setModalN }) => {
onOk={handleOk}
footer={false}
onCancel={handleCancel}
style={{ marginTop: "-5%" }}
destroyOnClose>
<div style={{ padding: "0 10px" }}>
<iframe

View File

@ -273,7 +273,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
border: 0,
marginTop: 20,
}}
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/projectEvents/file/download/${iframeSrc}`)}`}
/>
</Modal>
</>