ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CF2-33: Фикс загрузки файлов и меню категорий

Browse Source
This commit is contained in:
KharchenkoVV 2021-07-26 15:21:35 +05:00
parent 4355930277
commit 5f8738d1bf
11 changed files with 124 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/Documents.jsx
View File

@ -9,14 +9,60 @@ import LoaderPortal from './LoaderPortal'
import locale from "antd/lib/locale/ru_RU"
import moment from 'moment'
const pageSize = 26
const pageSize = 12
const {RangePicker} = DatePicker;
export default function Documents({selectedFileCategory}) {
let {id} = useParams()
const [page, setPage] = useState(1)
const [range, setRange] = useState([])
const [pagination, setPagination] = useState(null)
const [files, setFiles] = useState([])
const [selectedFiles, setSelectedFiles] = useState([])
const [isTableUpdating, setTableUpdating] = useState(false)
const [loader, setLoader] = useState(false)
const [form] = Form.useForm();
const handleFileNameCLick = async (event, row) => {
const element = event.target
if(!element.href.length) {
try {
setLoader(true)
await fetch(`/api/files/${id}/${row.id}`, {
headers: {
Authorization: 'Bearer ' + localStorage['token']
}
})
.then(async (response) => {
const blob = await response.blob();
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
element.href = e.target.result
element.click()
};
setLoader(false)
});
} catch (error) {
notify(`Не удалось скачать файл ${row}`, 'error')
console.log(error)
}
}
}
const columns = [
{
title: 'Документ',
key: 'document',
dataIndex: 'name',
render: (name, row) =>
<a onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</a>
},
{
title: 'Дата загрузки',
@ -31,18 +77,15 @@ const columns = [
}
];
export default function Documents({selectedFileCategory}) {
let {id} = useParams()
const [page, setPage] = useState(1)
const [range, setRange] = useState([])
const [pagination, setPagination] = useState(null)
const [files, setFiles] = useState([])
const [selectedFiles, setSelectedFiles] = useState([])
const [loader, setLoader] = useState(false)
const submitFileFormProps = {
progress: {
strokeColor: {
'0%': '#108ee9',
'100%': '#87d068',
},
strokeWidth: 3,
format: percent => `${parseFloat(percent.toFixed(2))}%`,
},
onChange({ file, fileList }) {
if (file.status !== 'uploading') {
setSelectedFiles(fileList)
@ -54,11 +97,12 @@ export default function Documents({selectedFileCategory}) {
setRange(range)
}
const onFinish = (values) => {
const onFinish = (values, form) => {
var fileList = values.fileInput.fileList
if (fileList.length > 0)
{
setLoader(true)
const formData = new FormData();
fileList.forEach(val => {
@ -73,7 +117,9 @@ export default function Documents({selectedFileCategory}) {
body: formData
})
.then(async (response) => {
// refresh component to upload new files в зависимоть useEffect какую-то переменную, чтоб дергался снова запрос на всю инфу о файлах
setLoader(false)
form.resetFields()
setTableUpdating(true)
});
}
}
@ -93,7 +139,7 @@ export default function Documents({selectedFileCategory}) {
begin = range[0].toISOString()
end = range[1].toISOString()
}
console.log(id)
await FileService.getFilesInfo(
`${id}`,
(page - 1) * pageSize,
@ -114,16 +160,18 @@ export default function Documents({selectedFileCategory}) {
total: paginatedFiles?.count,
current: Math.floor(paginatedFiles?.skip / pageSize),
})
setTableUpdating(false)
setLoader(false)
}
)
} catch (ex) {
notify(`Не удалось загрузить файлы по скважине "${id}"`, 'error')
console.log(ex)
}
setLoader(false)
}
GetDocuments()
}, [id, selectedFileCategory, range])
}, [id, range, selectedFileCategory, isTableUpdating])
return (
<div>
@ -140,11 +188,12 @@ export default function Documents({selectedFileCategory}) {
<LoaderPortal show={loader}></LoaderPortal>
<div>&nbsp;</div>
<Form
form={form}
name="DocumentsUploadForm"
onFinish={onFinish}
onFinish={(values) => onFinish(values, form)}
onFinishFailed={onFinishFailed}
style={{width: '300px'}}
>
<div style={{display: 'flex'}}>
<Form.Item
name="fileInput"
rules={[{ required: true, message: 'Выберите файл' }]}
@ -158,12 +207,10 @@ export default function Documents({selectedFileCategory}) {
type="primary"
htmlType="submit"
disabled={selectedFiles.length === 0}
style={{marginLeft: '10px'}}
>
Отправить
</Button>
</Form.Item>
</div>
</Form>
<div>&nbsp;</div>
<Table

10
src/components/MenuDocuments.jsx
View File

@ -1,15 +1,25 @@
import {Menu} from "antd";
import {FolderOutlined} from "@ant-design/icons";
import {Link} from "react-router-dom";
import {useState} from "react"
export default function MenuDocuments() {
const [selectedItem, setSelectedItem] = useState(1)
const handleClick = e => {
setSelectedItem({ current: e.key });
};
return(
<>
<Menu
mode="horizontal"
selectable={true}
className="well_menu"
onClick={handleClick}
selectedKeys={[selectedItem]}
>
<Menu.Item key="1" icon={<FolderOutlined/>}>
<Link to='fluidService'>Растворный сервис</Link>

4
src/pages/Cementing.jsx
View File

@ -1,8 +1,8 @@
import Documents from "../components/Documents"
export default function Cementing(id) {
export default function Cementing({selectedFileCategory}) {
return(
<Documents selectedFileCategory={id} />
<Documents selectedFileCategory={selectedFileCategory} />
)
}

4
src/pages/DocumentForWell.jsx
View File

@ -1,8 +1,8 @@
import Documents from "../components/Documents"
export default function DocumentsForWell(id) {
export default function DocumentsForWell({selectedFileCategory}) {
return(
<Documents selectedFileCategory={id} />
<Documents selectedFileCategory={selectedFileCategory} />
)
}

4
src/pages/FluidService.jsx
View File

@ -1,8 +1,8 @@
import Documents from "../components/Documents"
export default function FluidService(id) {
export default function FluidService({selectedFileCategory}) {
return(
<Documents selectedFileCategory={id} />
<Documents selectedFileCategory={selectedFileCategory} />
)
}

4
src/pages/Gti.jsx
View File

@ -1,8 +1,8 @@
import Documents from "../components/Documents"
export default function Gti(id) {
export default function Gti({selectedFileCategory}) {
return(
<Documents selectedFileCategory={id} />
<Documents selectedFileCategory={selectedFileCategory} />
)
}

4
src/pages/Master.jsx
View File

@ -1,8 +1,8 @@
import Documents from "../components/Documents"
export default function Master(id) {
export default function Master({selectedFileCategory}) {
return(
<Documents selectedFileCategory={id} />
<Documents selectedFileCategory={selectedFileCategory} />
)
}

4
src/pages/Nnb.jsx
View File

@ -1,8 +1,8 @@
import Documents from "../components/Documents"
export default function Nnb(id) {
export default function Nnb({selectedFileCategory}) {
return(
<Documents selectedFileCategory={id} />
<Documents selectedFileCategory={selectedFileCategory} />
)
}

4
src/pages/Supervisor.jsx
View File

@ -1,8 +1,8 @@
import Documents from "../components/Documents"
export default function Supervisor(id) {
export default function Supervisor({selectedFileCategory}) {
return(
<Documents selectedFileCategory={id} />
<Documents selectedFileCategory={selectedFileCategory} />
)
}

12
src/pages/Well.jsx
View File

@ -113,22 +113,22 @@ export default function Well() {
<FluidService selectedFileCategory={1}/>
</Route>
<Route path="/well/:id/cementing">
<Cementing id={2}/>
<Cementing selectedFileCategory={2}/>
</Route>
<Route path="/well/:id/nnb">
<Nnb id={3}/>
<Nnb selectedFileCategory={3}/>
</Route>
<Route path="/well/:id/gti">
<Gti id={4}/>
<Gti selectedFileCategory={4}/>
</Route>
<Route path="/well/:id/documentsForWell">
<DocumentForWell id={5}/>
<DocumentForWell selectedFileCategory={5}/>
</Route>
<Route path="/well/:id/supervisor">
<Supervisor id={6}/>
<Supervisor selectedFileCategory={6}/>
</Route>
<Route path="/well/:id/master">
<Master id={7}/>
<Master selectedFileCategory={7}/>
</Route>
<Route path="/well/:id/lastData">
<LastData/>

9
src/services/api/services/FileService.ts
View File

@ -69,22 +69,17 @@ end?: string,
/**
* Возвращает файл с диска на сервере
* @param wellId id скважины
* @param fileName
* @param fileId id запрашиваемого файла
* @returns string Success
* @throws ApiError
*/
public static async getFile(
wellId: number,
fileName: string,
fileId?: number,
fileId: number,
): Promise<string> {
const result = await __request({
method: 'GET',
path: `/api/files/${wellId}/${fileName}`,
query: {
'fileId': fileId,
},
path: `/api/files/${wellId}/${fileId}`,
});
return result.body;
}