* Исправлено использование контекста в рапортах

* Готов рабочий образец суточного рапорта

src/pages/Reports/DailyReport/ReportEditor.jsx

@@ -1,58 +1,119 @@
-import { useForm } from 'antd/lib/form/Form'
-import { ConfigProvider, Descriptions, Divider, Form, Input, InputNumber, Modal, Select, Space, Table, Tag } from 'antd'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import moment from 'moment'
+import { DatePicker, Descriptions, Divider, Form, Input, InputNumber, Modal, Select, Space, Table } from 'antd'
+import { memo, useCallback, useContext, useEffect, useState } from 'react'
 
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { DatePickerWrapper, makeColumn, makeGroupColumn } from '@components/Table'
-import { formatDate } from '@utils'
+import { makeColumn, makeGroupColumn } from '@components/Table'
+import { DailyReportService } from '@api'
 
-const { Item } = Form
+import { IdWellContext } from '@pages/Well'
+
+const { Item: RawItem } = Form
 const { Summary } = Table
 
+const Item = memo(({ style, ...other }) => <RawItem style={{ margin: 0, ...style }} {...other} />)
+
 const table1Columns = [
     makeGroupColumn('Отчётный период', [
-        makeColumn('От (дата, время)', 'dateStart', { width: 200, render: (date) => formatDate(date) ?? '---' }),
+        makeColumn('От (дата, время)', 'dateStart', { width: 200, render: (disabled) => (
+            <Item name={'reportDate'}>
+                <DatePicker disabled={disabled} format={'DD.MM.YYYY'} style={{ width: '100%' }} />
+            </Item>
+        )}),
     ]),
     makeGroupColumn('Забой за отчётный период, м', [
         makeColumn('От', 'depthStart', { width: 200, render: () => (
-            <Item name={'wellDepthIntervalStartDate'} style={{ margin: 0 }}>
+            <Item name={'wellDepthIntervalStartDate'}>
                 <InputNumber style={{ width: '100%' }} />
             </Item>
         )}),
         makeColumn('До', 'depthEnd', { width: 200, render: () => (
-            <Item name={'wellDepthIntervalEndDate'} style={{ margin: 0 }}>
+            <Item name={'wellDepthIntervalFinishDate'}>
                 <InputNumber style={{ width: '100%' }} />
             </Item>
         )}),
     ])
 ]
 
+const cellData = {
+    width: 200,
+    render: (name) => (
+        <Item name={name}>
+            <InputNumber style={{ width: '100%' }} />
+        </Item>
+    )
+}
+
 const table2Columns = [
-    makeColumn('Работа модулей САУБ', 'label', { width: 500 }),
-    makeColumn('Часов:', 'hours', { width: 200, render: (data) => (
-        <Item name={data.name} style={{ margin: 0 }}>
-            <InputNumber style={{ width: '100%' }} />
-        </Item>
-    )}),
-    makeColumn('Метров:', 'meters', { width: 200, render: (data) => (
-        <Item name={data.name} style={{ margin: 0 }}>
-            <InputNumber style={{ width: '100%' }} />
-        </Item>
-    )}),
+    makeColumn('Работа модулей САУБ', 'label', { width: 400 }),
+    makeColumn('Часов:', 'hours', cellData),
+    makeColumn('Метров:', 'meters', cellData),
 ]
 
 const table2Data = [
-    { label: 'АПД (автоматическая подача долота), ч/м:', hours: 'workTimeSaub', meters: 'drilledMetersSaub' },
-    { label: 'Спин Мастер (осцилляция), ч/м:', hours: 'workTimeSpinMaster', meters: 'drilledMetersSpinMaster' },
-    { label: 'Торк Мастер (демпфирование), ч/м:', hours: 'workTimeTorkMaster', meters: 'drilledMetersTorkMaster' },
+    { label: 'АПД (автоматическая подача долота), ч/м:', hours: 'workTimeSAUB', meters: 'penetrationSAUB' },
+    { label: 'Спин Мастер (осцилляция), ч/м:', hours: 'workTimeSpinMaster', meters: 'penetrationSpinMaster' },
+    { label: 'Торк Мастер (демпфирование), ч/м:', hours: 'workTimeTorkMaster', meters: 'penetrationTorkMaster' },
 ]
 
+const table3Columns = [
+    makeGroupColumn('Бурение в роторе (за отчётный период) с использованием САУБ-1', [
+        makeColumn('Проходка', 'sinking', cellData),
+        makeColumn('Часы бурения', 'hours', cellData),
+        makeColumn('Среднее диф. Давление', 'pressure', cellData),
+    ]),
+]
+
+const table3Data = [{ sinking: 'penetrationInRotor', hours: 'numberDrillingHours', pressure: 'avgDiffDropRotor' }]
+
+const table4Columns = [
+    makeGroupColumn('Бурение в слайде (за отчётный период) с использованием САУБ-1', [
+        makeColumn('Проходка', 'sinking', cellData),
+        makeColumn('Часы бурения', 'hours', cellData),
+        makeColumn('Среднее диф. Давление', 'pressure', cellData),
+    ]),
+]
+
+const table4Data = [{ sinking: 'penetrationInSlide', hours: 'drillingTimeInRotor', pressure: 'avgDiffPressureSlide' }]
+
+const table6Columns = [
+    makeGroupColumn('БЕЗМЕТРАЖНЫЕ РАБОТЫ', [
+        makeColumn('Подготовка ствола скважины к наращиванию', 'l_label', { colSpan: 2, width: 200 }),
+        makeColumn('', 'l_value', { colSpan: 0, ...cellData }),
+        makeColumn('Наращивание', 'r_label', { colSpan: 2, width: 200 }),
+        makeColumn('', 'r_value', { colSpan: 0, ...cellData }),
+    ]),
+]
+
+const table6Data = [{
+    l_label: 'Норматив на одну операцию, (мин):',
+    r_label: 'Норматив на одну операцию, (мин):',
+    l_value: 'standardTimeBarrelPreparation',
+    r_value: 'standardTimeExtension'
+}, {
+    l_label: 'Проработка при бур, факт (ч):',
+    r_label: 'Наращивание, факт (ч):',
+    l_value: 'actualTimeBarrelPreparation',
+    r_value: 'actualTimeExtension'
+}]
+
+const table6Summary = () => (
+    <Summary.Row>
+        <Summary.Cell colSpan={2}>
+            Краткие причины: доп проработки при переходе из слайда в ротор, в середине свечи.
+        </Summary.Cell>
+        <Summary.Cell colSpan={2}>
+            Краткие причины: нехватка пальцев на обоих руках у первого помощника бурильщика.
+        </Summary.Cell>
+    </Summary.Row>
+)
+
 const table2Summary = () => (
     <Summary.Row>
         <Summary.Cell>МСЕ, колличество запусков, раз:</Summary.Cell>
         <Summary.Cell colSpan={2}>
-            <Item name={'countLaunchesMSE'} style={{ margin: 0 }}>
+            <Item name={'countLaunchesMSE'}>
                 <InputNumber style={{ width: '100%' }} />
             </Item>
         </Summary.Cell>
@@ -60,27 +121,36 @@ const table2Summary = () => (
 )
 
 export const ReportEditor = memo(({ visible, data, onDone, onCancel }) => {
-    const [form] = useForm()
+    const [form] = Form.useForm()
     const [isInvalid, setIsInvalid] = useState(false)
     const [isLoading, setIsLoading] = useState(false)
 
-    useEffect(() => form.setFieldsValue(data), [data])
+    const idWell = useContext(IdWellContext)
+
+    useEffect(() => form.setFieldsValue(data ? {
+        ...data,
+        rotorDrillingModes: Array.isArray(data.rotorDrillingModes) ? data.rotorDrillingModes ?? [] : [],
+        slideDrillingModes: Array.isArray(data.slideDrillingModes) ? data.slideDrillingModes ?? [] : [],
+        reportDate: moment.utc(data.reportDate).local(),
+    } : {}), [data, form])
 
     const onFormChange = useCallback(async () => await form.validateFields()
         .then(() => setIsInvalid(false))
         .catch(() => setIsInvalid(true))
     , [form])
 
-    const onFormFinish = useCallback((data) => invokeWebApiWrapperAsync(
+    const onFormFinish = useCallback((formData) => invokeWebApiWrapperAsync(
         async () => {
-            onDone?.(data)
+            if (data)
+                await DailyReportService.update(idWell, data.reportDate, formData)
+            else
+                await DailyReportService.add(idWell, formData)
+            onDone?.(formData)
         },
         setIsLoading,
         'Не удалось сохранить суточный рапорт',
         'Сохранение суточного рапорта',
-    ), [onDone])
-
-    const table1Data = useMemo(() => [{ dateStart: form.getFieldValue('reportDate') }], [form])
+    ), [data, onDone, idWell])
 
     return (
         <Modal
@@ -89,7 +159,10 @@ export const ReportEditor = memo(({ visible, data, onDone, onCancel }) => {
             visible={visible}
             onCancel={onCancel}
             okText={'Сохранить'}
-            title={data ? `Суточная сводка бурения скважины № ${data.wellName} куст № ${data.clusterName}`:  'Новая суточная сводка бурения'}
+            title={data ?
+                <>Суточная сводка бурения скважины № {data?.wellName} куст № {data?.clusterName}</> :
+                <>Новая cуточная сводка бурения скважины</>
+            }
             onOk={form.submit}
             okButtonProps={{
                 disabled: isInvalid,
@@ -103,49 +176,87 @@ export const ReportEditor = memo(({ visible, data, onDone, onCancel }) => {
                     onChange={onFormChange}
                 >
                     <Item name={'reportDate'} label={'Дата рапорта'} rules={[{ required: true }]}>
-                        <DatePickerWrapper showTime={false} disabled={!!data}/>
+                        <DatePicker disabled={!!data} format={'DD.MM.YYYY'}/>
                     </Item>
                     <Divider />
-                    <p>Суточная сводка бурения скважины № {data?.wellName} куст № {data?.clusterName}</p>
-                    <Item name={'customer'} label={'Заказчик'}><Input /></Item>
-                    <Item name={'contractor'} label={'Подрядчик'}><Input /></Item>
-                    <Table
-                        bordered
-                        size={'small'}
-                        columns={table1Columns}
-                        dataSource={table1Data}
-                        pagination={false}
-                        style={{ marginBottom: '15px' }}
-                    />
-                    <Item label={'Бурильщик 1 смена'} name={'firstDriller'}><Input /></Item>
-                    <Item label={'Бурильщик 2 смена'} name={'firstDriller'}><Input /></Item>
+                    <Space direction={'vertical'} size={'middle'} style={{ width: '100%' }}>
+                        <Item name={'customer'} label={'Заказчик'}><Input /></Item>
+                        <Item name={'contractor'} label={'Подрядчик'}><Input /></Item>
+                        <Table
+                            bordered
+                            size={'small'}
+                            columns={table1Columns}
+                            dataSource={[{ dateStart: !!data }]}
+                            pagination={false}
+                        />
+                        <Item label={'Бурильщик 1 смена'} name={'firstDriller'}><Input /></Item>
+                        <Item label={'Бурильщик 2 смена'} name={'secondDriller'}><Input /></Item>
 
-                    <Table
-                        bordered
-                        size={'small'}
-                        columns={table2Columns}
-                        dataSource={table2Data}
-                        summary={table2Summary}
-                        pagination={false}
-                        style={{ marginBottom: '15px' }}
-                    />
+                        <Table
+                            bordered
+                            size={'small'}
+                            columns={table2Columns}
+                            dataSource={table2Data}
+                            summary={table2Summary}
+                            pagination={false}
+                        />
 
-                    <Item name={'bhaDescription'}>
-                        <Input.TextArea rows={4} />
-                    </Item>
+                        <Item name={'bhaDescription'} label={'Описание КНБК'}>
+                            <Input.TextArea rows={4} />
+                        </Item>
 
-                    <Descriptions column={1} size={'small'} bordered>
-                        <Descriptions.Item label={'Бурение в роторе:'}>
-                            <Item name={'rotaryDrillingModes'} style={{ margin: 0 }}>
-                                <Select mode={'tags'} style={{ width: '100%' }} />
-                            </Item>
-                        </Descriptions.Item>
-                        <Descriptions.Item label={'Бурение в слайде:'}>
-                            <Item name={'slideDrillingModes'} style={{ margin: 0 }}>
-                                <Select mode={'tags'} style={{ width: '100%' }} />
-                            </Item>
-                        </Descriptions.Item>
-                    </Descriptions>
+                        <Table bordered size={'small'} columns={table6Columns} dataSource={table6Data} pagination={false} summary={table6Summary} />
+
+                        <Descriptions column={1} size={'small'} bordered>
+                            <Descriptions.Item label={'Бурение в роторе:'}>
+                                <Item name={'rotorDrillingModes'}>
+                                    <Select mode={'tags'} style={{ width: '100%' }} />
+                                </Item>
+                            </Descriptions.Item>
+                            <Descriptions.Item label={'Бурение в слайде:'}>
+                                <Item name={'slideDrillingModes'}>
+                                    <Select mode={'tags'} style={{ width: '100%' }} />
+                                </Item>
+                            </Descriptions.Item>
+                        </Descriptions>
+
+                        <Table bordered size={'small'} columns={table3Columns} dataSource={table3Data} pagination={false} />
+                        <Table bordered size={'small'} columns={table4Columns} dataSource={table4Data} pagination={false} />
+                        
+                        <Item label={'Плановая мех скорость'} name={'sectionROPPlan'}>
+                            <InputNumber style={{ width: '100%' }}/>
+                        </Item>
+
+                        <Descriptions bordered size={'small'} column={1}>
+                            <Descriptions.Item label={'Время бурения за секцию'}>
+                                <Item name={'sectionDrillingTimeTotal'}>
+                                    <InputNumber style={{ width: '100%' }} />
+                                </Item>
+                            </Descriptions.Item>
+                            <Descriptions.Item label={'Проходка за секцию'}>
+                                <Item name={'sectionPenetrationTotal'}>
+                                    <InputNumber style={{ width: '100%' }} />
+                                </Item>
+                            </Descriptions.Item>
+                            <Descriptions.Item label={'Кол-во наращиваний'}>
+                                <Item name={'extensionsCount'}>
+                                    <InputNumber style={{ width: '100%' }} />
+                                </Item>
+                            </Descriptions.Item>
+                            <Descriptions.Item label={'Отклонение от ГГД +/-, сут'}>
+                                <Item name={'deviationFromTVD'}>
+                                    <InputNumber style={{ width: '100%' }} />
+                                </Item>
+                            </Descriptions.Item>
+                        </Descriptions>
+
+                        <Item name={'declinesReasonsROP'} label={'Примечание:'}>
+                            <Input.TextArea rows={4} />
+                        </Item>
+
+                        <Item label={'Мастер буровой'} name={'drillingMaster'}><Input /></Item>
+                        <Item label={'Супервайзер'} name={'supervisor'}><Input /></Item>
+                    </Space>
                 </Form>
             </LoaderPortal>
         </Modal>

src/pages/Reports/DailyReport/index.jsx

@@ -1,26 +1,30 @@
 import moment from 'moment'
 import { Button } from 'antd'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { FileExcelOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'
 
 import LoaderPortal from '@components/LoaderPortal'
 import DateRangeWrapper from '@components/Table/DateRangeWrapper'
 import { Table, makeDateColumn, makeColumn } from '@components/Table'
 import { download, invokeWebApiWrapperAsync } from '@components/factory'
+import { DailyReportService } from '@api'
 import { arrayOrDefault } from '@utils'
 
 import ReportEditor from './ReportEditor'
+import { IdWellContext } from '@pages/Well'
 
-export const DailyReport = memo(({ idWell }) => {
+export const DailyReport = memo(() => {
     const [data, setData] = useState([])
     const [isLoading, setIsLoading] = useState(false)
     const [searchDate, setSearchDate] = useState(null)
     const [selectedReport, setSelectedReport] = useState(null)
-    const [isEditorVisible, setIsEditorVisible] = useState(true)
+    const [isEditorVisible, setIsEditorVisible] = useState(false)
 
-    useEffect(() => invokeWebApiWrapperAsync(
+    const idWell = useContext(IdWellContext)
+
+    const updateTable = useCallback(() => invokeWebApiWrapperAsync(
         async () => {
-            const data = [{ date: '2022-10-01' }] // arrayOrDefault(await DailyreportService.getData(idWell))
+            const data = arrayOrDefault(await DailyReportService.getList(idWell))
             setData(data)
         },
         setIsLoading,
@@ -28,14 +32,16 @@ export const DailyReport = memo(({ idWell }) => {
         'Получение списка суточных рапортов',
     ), [idWell])
 
+    useEffect(updateTable, [updateTable])
+
     const columns = useMemo(() => [
-        makeDateColumn('Дата', 'date', undefined, undefined, { width: 300 }),
-        makeColumn('', '', { width: 200, render: (_, report, idx) => (
+        makeDateColumn('Дата', 'reportDate', undefined, undefined, { width: 300 }),
+        makeColumn('', '', { width: 200, render: (_, report) => (
             <>
                 <Button
                     type={'link'}
                     icon={<FileExcelOutlined />}
-                    onClick={async () => await download(`/api/daily_report/${report.id}`)}
+                    onClick={async () => await download(`/api/well/${idWell}/DailyReport/${report.reportDate}/excel`)}
                 >
                     Скачать XLSX
                 </Button>
@@ -51,7 +57,7 @@ export const DailyReport = memo(({ idWell }) => {
                 </Button>
             </>
         )}),
-    ], [])
+    ], [idWell])
     
     const filteredData = useMemo(() => {
         if (!searchDate) return data
@@ -89,6 +95,10 @@ export const DailyReport = memo(({ idWell }) => {
                 data={selectedReport}
                 visible={isEditorVisible}
                 onCancel={() => setIsEditorVisible(false)}
+                onDone={() => {
+                    setIsEditorVisible(false)
+                    updateTable()
+                }}
             />
         </>
     )

src/pages/Reports/index.jsx

@@ -1,43 +1,40 @@
-import { Switch, useParams } from 'react-router-dom'
-import { memo, useMemo } from 'react'
-import { Layout, Menu } from 'antd'
+import { useParams } from 'react-router-dom'
+import { memo, useContext, useMemo } from 'react'
 import { FilePdfOutlined } from '@ant-design/icons'
+import { Layout } from 'antd'
 
-import { PrivateMenuItemLink, PrivateRoute, PrivateDefaultRoute } from '@components/Private'
+import { PrivateMenu, PrivateSwitch } from '@components/Private'
 
 import DailyReport from './DailyReport'
 import DiagramReport from './DiagramReport'
+import { RootPathContext } from '@pages/Main'
 
 const { Content } = Layout
 
-export const Reports = memo(({ idWell }) => {
+export const Reports = memo(() => {
     const { tab } = useParams()
-    const rootPath = useMemo(() => `/well/${idWell}/reports`, [idWell])
+
+    const root = useContext(RootPathContext)
+    const rootPath = useMemo(() => `${root}/reports`, [root])
 
     return (
-        <Layout>
-            <Menu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
-                <PrivateMenuItemLink root={rootPath} key={'diagram_report'} path={'diagram_report'} icon={<FilePdfOutlined />} title={'Диаграмма'}/>
-                <PrivateMenuItemLink root={rootPath} key={'daily_report'} path={'daily_report'} title={'Суточный рапорт'} />
-            </Menu>
-
+        <RootPathContext.Provider value={rootPath}>
             <Layout>
-                <Content className={'site-layout-background'}>
-                <Switch>
-                    <PrivateRoute path={`${rootPath}/diagram_report`}>
-                        <DiagramReport idWell={idWell} />
-                    </PrivateRoute>
-                    <PrivateRoute path={`${rootPath}/daily_report`}>
-                        <DailyReport idWell={idWell} />
-                    </PrivateRoute>
-                    <PrivateDefaultRoute urls={[
-                        `${rootPath}/diagram_report`,
-                        `${rootPath}/daily_report`,
-                    ]}/>
-                </Switch>
-                </Content>
+                <PrivateMenu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
+                    <PrivateMenu.Link key={'diagram_report'} icon={<FilePdfOutlined />} title={'Диаграмма'}/>
+                    <PrivateMenu.Link key={'daily_report'} title={'Суточный рапорт'} />
+                </PrivateMenu>
+
+                <Layout>
+                    <Content className={'site-layout-background'}>
+                    <PrivateSwitch elseRedirect={['diagram_report', 'daily_report']}>
+                        <DiagramReport key={'diagram_report'} />
+                        <DailyReport key={'daily_report'} />
+                    </PrivateSwitch>
+                    </Content>
+                </Layout>
             </Layout>
-        </Layout>
+        </RootPathContext.Provider>
     )
 })