文件上传模块封装
parent
e5436498fc
commit
50f69efe07
|
|
@ -0,0 +1,104 @@
|
|||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
|
||||
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
|
||||
import moment from 'moment'
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import PdfView from './pdfView';
|
||||
// import './index.less'
|
||||
const FileView = ({mode, fileList, setFileList}) => {
|
||||
const childRef = useRef(null);
|
||||
|
||||
|
||||
const download = (params) => {
|
||||
let downloadLink = document.createElement("a");
|
||||
downloadLink.href = process.env.REACT_APP_API_URL+apiurl.file.download+params
|
||||
downloadLink.download = `${params.fileName}`;
|
||||
downloadLink.style.display = "none";
|
||||
// 将链接添加到页面中
|
||||
document.body.appendChild(downloadLink);
|
||||
// 模拟点击事件，开始下载
|
||||
downloadLink.click();
|
||||
}
|
||||
|
||||
const deleteFile = (fileId) => {
|
||||
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
|
||||
setFileList(filterFile)
|
||||
}
|
||||
|
||||
const viewPdf = (params) => {
|
||||
if (childRef.current) {
|
||||
childRef.current.callChildMethod(params);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row gutter={[16]}>
|
||||
{
|
||||
fileList.map(file=>(
|
||||
<Col span={12}>
|
||||
<div className="file-item" style={{ width: "75%",marginTop:5 }}>
|
||||
<div className='file-description'>
|
||||
{
|
||||
(()=>{
|
||||
if(file.name.indexOf('.doc') > -1){
|
||||
return (
|
||||
<div
|
||||
onClick={() => { download(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FileWordOutlined style={{ fontSize: 40 }}/>
|
||||
</div>
|
||||
)
|
||||
}else if(file.name.indexOf('.pdf') > -1){
|
||||
return (
|
||||
<div
|
||||
onClick={() => { viewPdf(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FilePdfOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
)
|
||||
}else if(file.name.indexOf('.zip') > -1){
|
||||
return (
|
||||
<div
|
||||
onClick={() => { download(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FileZipOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
)
|
||||
}else if(file.name.indexOf('.xls') > -1){
|
||||
return (
|
||||
<div
|
||||
onClick={() => { download(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FileExcelOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
)
|
||||
}else{
|
||||
return (
|
||||
<Image width={60} src={apiurl.file.view + file.response?.data?.filePath} alt='' />
|
||||
)
|
||||
}
|
||||
})()
|
||||
}
|
||||
<span>{file.name}</span>
|
||||
</div>
|
||||
<div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => {
|
||||
deleteFile(file.response?.data?.fileId)
|
||||
}}>
|
||||
<DeleteOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
))
|
||||
}
|
||||
</Row>
|
||||
<PdfView ref={childRef}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileView
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
|
||||
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
|
||||
import moment from 'moment'
|
||||
import FileView from './fileView';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
// import './index.less'
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
const { Dragger } = Upload;
|
||||
const url = "http://223.75.53.141:9100/gs-tsg"
|
||||
|
||||
const FileUpload = ({mode, fileNum=1, value, onChange}) => {
|
||||
const [fileList, setFileList] = useState([]) //上传文件列表
|
||||
const [loading, setLoading] = useState(false)
|
||||
console.log(1111111,fileList);
|
||||
|
||||
|
||||
const fileChange = (info) => {
|
||||
if (info.file.status === "done") {
|
||||
setLoading(false);
|
||||
}
|
||||
if (info.file.status === "uploading") {
|
||||
setLoading(true);
|
||||
}
|
||||
if (info.file.status === "error") {
|
||||
message.error("文件上传失败")
|
||||
setLoading(false);
|
||||
}
|
||||
setFileList(info.fileList)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (mode != 'save' ) {
|
||||
const imgFile = value?.map(o => ({
|
||||
name: o.fileName,
|
||||
response: {
|
||||
data: {
|
||||
filePath: o.filePath,
|
||||
fileId: o.fileId
|
||||
}
|
||||
},
|
||||
}))
|
||||
setFileList(imgFile)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(()=>{
|
||||
if(onChange && fileList){
|
||||
let oldFiles = fileList.map(item => (item.response?.data??item))
|
||||
onChange(oldFiles)
|
||||
}
|
||||
},[fileList])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
mode!=='view' &&
|
||||
<Dragger
|
||||
name='file'
|
||||
action={apiurl.file.upload}
|
||||
onChange={fileChange}
|
||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||
fileList={fileList}
|
||||
disabled={loading}
|
||||
maxCount={fileNum}
|
||||
// onSuccess={handleSuccess}
|
||||
>
|
||||
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p className="ant-upload-hint">
|
||||
支持扩展名：.doc .docx .xls .pdf .jpg .png .ppt
|
||||
</p>
|
||||
</Dragger>
|
||||
}
|
||||
<FileView fileList={fileList} setFileList={setFileList}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileUpload
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
|
||||
import { Modal } from 'antd';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
const PdfView = forwardRef((props,ref) => {
|
||||
const [pdfViewOPen, setPdfViewOPen] = useState(false)
|
||||
const [iframeSrc, setIframeSrc] = useState('')
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
callChildMethod: showPdf
|
||||
}));
|
||||
|
||||
const showPdf = (url) => {
|
||||
setIframeSrc(url)
|
||||
setPdfViewOPen(true)
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
open={pdfViewOPen}
|
||||
width={1000}
|
||||
title=""
|
||||
footer={null}
|
||||
style={{ marginTop: "-5%" }}
|
||||
onCancel={() => {
|
||||
setPdfViewOPen(false)
|
||||
setIframeSrc('')
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
style={{
|
||||
height: '80vh',
|
||||
width: '100%',
|
||||
border: 0,
|
||||
marginTop: 20,
|
||||
}}
|
||||
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(apiurl.file.download+iframeSrc)}`}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export default PdfView
|
||||
|
|
@ -294,7 +294,14 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
|||
},
|
||||
{ id: id(), title: '制度管理', path: '/mgr/sz/zdgl' },
|
||||
{ id: id(), title: '法律法规', path: '/mgr/sz/flfg' },
|
||||
|
||||
{
|
||||
id: id(), title: '知识库', redirect: '/mgr/sz/zsk/ddfa',
|
||||
children: [
|
||||
{
|
||||
id: id(), title: '调度方案库', path: '/mgr/sz/zsk/ddfa',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,10 +3,18 @@ import { config } from '../config'
|
|||
const pubapi_old = 'https://owrsvr.cloudowr.cn/svr'
|
||||
const pubapi = 'https://owrsvr.cloudowr.cn/pubapi'
|
||||
const zdkapi = 'https://slt-sh.chutianyun.gov.cn:8002' //中电科的市级平台
|
||||
const baseFileUpLoad = "/gunshiApp/tsg/SzRegulatoryFramework/file/upload/singleSimple"//文件上传地址
|
||||
const baseFileDownLoad = "/gunshiApp/tsg/projectEvents/file/download/"//文件下载地址
|
||||
const baseFileView = "http://223.75.53.141:9100/gs-tsg"//文件回显地址
|
||||
const service_fxdd = '/gunshiApp/tsg'
|
||||
const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
|
||||
const service_shzh = '/shzh'
|
||||
const apiurl = {
|
||||
file:{
|
||||
upload:baseFileUpLoad,
|
||||
download:baseFileDownLoad,
|
||||
view:baseFileView
|
||||
},
|
||||
systemM: {
|
||||
userM: {
|
||||
updatePassword:service_xyt + '/system/user/profile/updatePwd'
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@ import Zdgl from './sz/zdgl'
|
|||
import Ajdj from './sz/szzf/ajdj'
|
||||
import Ajtj from './sz/szzf/ajtj'
|
||||
import Clyj from './sz/szzf/clyj'
|
||||
import Ddfa from './sz/ddfa'
|
||||
|
||||
import Krgl from './KrLine'
|
||||
import Gsnlfx from './gxsl/gsnlfx'
|
||||
|
|
@ -280,7 +281,12 @@ const AppRouters: React.FC = () => {
|
|||
{ path: 'sz/zdgl', element: <Zdgl /> },
|
||||
{ path: 'sz/szzf/ajdj', element: <Ajdj /> },
|
||||
{ path: 'sz/szzf/ajtj', element: <Ajtj /> },
|
||||
{ path: 'sz/szzf/clyj', element: <Clyj /> },
|
||||
{ path: 'sz/szzf/clyj', element: <Clyj /> },
|
||||
|
||||
{ path: 'sz/zsk/ddfa', element: <Ddfa /> },
|
||||
|
||||
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
import React, { useEffect, useState, useMemo, useRef } from 'react';
|
||||
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
|
||||
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
|
||||
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||
import FileUpload from '../../../components/Form/FileUpload'
|
||||
|
||||
// import "./index.less"
|
||||
import moment from 'moment';
|
||||
|
||||
const opntios=[
|
||||
{value:0,label:'党支部工作制度'},
|
||||
{value:1,label:'行政工作制度'},
|
||||
{value:2,label:'部门工作制度'},
|
||||
{value:3,label:'安全管理制度'},
|
||||
{value:4,label:'工程管理制度'},
|
||||
{value:5,label:'技术规程'},
|
||||
{value:6,label:'岗位责任制'}
|
||||
]
|
||||
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const onfinish = (values) => {
|
||||
debugger
|
||||
if (mode === 'edit') {
|
||||
// onEdit(apiurl.zdgl.edit, {...record,...values})
|
||||
}
|
||||
if (mode === 'save') {
|
||||
// onSave(apiurl.zdgl.add, values)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
onFinish={onfinish}
|
||||
initialValues={record}
|
||||
>
|
||||
<Form.Item name="id"><Input type="hidden" /></Form.Item>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="方案名称"
|
||||
name="famc"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="调度类型"
|
||||
name="ddlx"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select allowClear style={{ width: '100%' }} options={opntios} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="编制时间"
|
||||
name="bzsj"
|
||||
getValueFromEvent={(e, dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
>
|
||||
<DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="zt"
|
||||
>
|
||||
<Select allowClear style={{ width: '100%' }} options={opntios} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="附件"
|
||||
name="files"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
>
|
||||
<FileUpload
|
||||
mode={mode}
|
||||
fileNum={3}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
{
|
||||
mode === 'view' ? null : (
|
||||
<>
|
||||
<Form.Item {...btnItemLayout}>
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
{mode === 'save' ? '提交' : '修改'}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalForm;
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
|
||||
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
|
||||
import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
|
||||
import { FileWordOutlined, FilePdfOutlined, FileZipOutlined, PaperClipOutlined } from '@ant-design/icons';
|
||||
import { useSelector } from 'react-redux';
|
||||
import ToolBar from './toolbar';
|
||||
import ModalForm from './form';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import usePageTable from '../../../components/crud/usePageTable2';
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
||||
import { httpgetExport } from '../../../utils/request';
|
||||
import { exportFile } from '../../../utils/tools';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const obj={0:"党支部工作制度",1:"行政工作制度",2:"部门工作制度",3:"安全管理制度",4:"工程管理制度",5:"技术规程",6:"岗位责任制"}
|
||||
const Page = () => {
|
||||
|
||||
const refModal = useRef();
|
||||
const [searchVal, setSearchVal] = useState(false)
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||||
{ title: '方案名称', key: 'name', dataIndex: 'name', ellipsis: true },
|
||||
{ title: '调度类型', key: 'type', dataIndex: 'type',render:(v)=><>{obj[v]}</>},
|
||||
{ title: '简介', key: 'releaseDate', dataIndex: 'releaseDate', render: (value) => <span>{value ? dayjs(value).format('YYYY-MM-DD') : ''}</span>},
|
||||
{ title: '编制时间', key: 'fillUnit', dataIndex: 'fillUnit'},
|
||||
{ title: '附件数', key: 'minUpTime', dataIndex: 'minUpTime'},
|
||||
{ title: '状态', key: 'minUpTime', dataIndex: 'minUpTime'},
|
||||
{ title: '创建人', key: 'minUpTime', dataIndex: 'minUpTime'},
|
||||
{ title: '最后更新时间', key: 'minUpTime', dataIndex: 'minUpTime'},
|
||||
{
|
||||
title: '操作', key: 'operation', fixed: 'right', align: 'center',
|
||||
render: (value, row, index) => (
|
||||
<CrudOpRender_text
|
||||
edit={true}
|
||||
del={true}
|
||||
view={true}
|
||||
command={(cmd) => () => command(cmd)(row)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
];
|
||||
|
||||
const command = (type) => (params) => {
|
||||
if (type === 'save') {
|
||||
refModal.current.showSave();
|
||||
} else if (type === 'edit') {
|
||||
refModal.current.showEdit({ ...params });
|
||||
} else if (type === 'view') {
|
||||
refModal.current.showView(params);
|
||||
} else if (type === 'del') {
|
||||
refModal.current.onDeleteGet(apiurl.zdgl.del + `/${params.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.zdgl.list).find_noCode);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const params = {
|
||||
search: {
|
||||
...searchVal,
|
||||
}
|
||||
};
|
||||
search(params)
|
||||
}, [searchVal])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
|
||||
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
|
||||
<Card className='nonebox'>
|
||||
<ToolBar
|
||||
setSearchVal={setSearchVal}
|
||||
onSave={command('save')}
|
||||
/>
|
||||
</Card>
|
||||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||
<Table columns={columns} rowKey="inx" {...tableProps} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BasicCrudModal
|
||||
width={1000}
|
||||
ref={refModal}
|
||||
title=""
|
||||
component={ModalForm}
|
||||
onCrudSuccess={refresh}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Form, Input, Button, DatePicker, Select } from 'antd';
|
||||
import { DownOutlined, UpOutlined } from '@ant-design/icons'
|
||||
|
||||
import moment from 'moment';
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setSearchVal, onSave }) => {
|
||||
const [form] = Form.useForm();
|
||||
const onFinish = (values) => {
|
||||
const {releaseDate,...ret} = values
|
||||
if(releaseDate){
|
||||
ret.stm = moment(values.releaseDate[0]).format('YYYY-MM-DD HH:mm:ss')
|
||||
ret.etm = moment(values.releaseDate[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
setSearchVal(ret);
|
||||
}
|
||||
|
||||
const opntios = [
|
||||
{value:0,label:'党支部工作制度'},
|
||||
{value:1,label:'行政工作制度'},
|
||||
{value:2,label:'部门工作制度'},
|
||||
{value:3,label:'安全管理制度'},
|
||||
{value:4,label:'工程管理制度'},
|
||||
{value:5,label:'技术规程'},
|
||||
{value:6,label:'岗位责任制'}
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||
<Form.Item label="方案名称" name="name">
|
||||
<Input allowClear style={{ width: '150px' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="调度类型" name="type">
|
||||
<Select allowClear style={{ width: '150px' }} options={opntios} />
|
||||
</Form.Item>
|
||||
<Form.Item label="编制时间" name="releaseDate">
|
||||
<RangePicker allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="fillUnit">
|
||||
<Input allowClear style={{ width: '150px' }} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">查询</Button>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||
</Form.Item>
|
||||
|
||||
{
|
||||
(onSave) ?
|
||||
<Form.Item>
|
||||
<Button onClick={onSave}>新增</Button>
|
||||
</Form.Item>
|
||||
: null
|
||||
}
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ToolBar;
|
||||
Loading…
Reference in New Issue