В WellOperationsEditor добавлена возможность выделения записей через GET аргумент

This commit is contained in:
Александр Сироткин 2022-03-17 06:41:51 +05:00
parent 7c5af12508
commit 2384f65999

View File

@ -1,21 +1,21 @@
import moment from 'moment' import moment from 'moment'
import { Input } from 'antd' import { Input } from 'antd'
import { useState, useEffect, memo } from 'react' import { useLocation } from 'react-router-dom'
import { useState, useEffect, memo, useMemo, useCallback } from 'react'
import { import {
EditableTable, EditableTable,
DatePickerWrapper,
makeColumn, makeColumn,
makeDateSorter,
makeNumericColumnOptions, makeNumericColumnOptions,
makeSelectColumn, makeSelectColumn,
makeActionHandler, makeActionHandler,
makeDateColumn,
} from '@components/Table' } from '@components/Table'
import { WellOperationService} from '@api'
import LoaderPortal from '@components/LoaderPortal' import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory' import { invokeWebApiWrapperAsync } from '@components/factory'
import { hasPermission } from '@utils/permissions' import { hasPermission } from '@utils/permissions'
import { formatDate } from '@utils' import { arrayOrDefault } from '@utils'
import { WellOperationService } from '@api'
const { TextArea } = Input const { TextArea } = Input
@ -25,7 +25,7 @@ const defaultColumns = [
makeSelectColumn('Конструкция секции', 'idWellSectionType', [], undefined, { makeSelectColumn('Конструкция секции', 'idWellSectionType', [], undefined, {
editable: true, editable: true,
width: 160, width: 160,
formItemRules: [({ getFieldValue }) => ({ formItemRules: [() => ({
validator(_, value) { validator(_, value) {
if (value?.length > 0) if (value?.length > 0)
return Promise.resolve() return Promise.resolve()
@ -37,43 +37,41 @@ const defaultColumns = [
makeColumn('Доп. инфо', 'categoryInfo', { editable: true, width: 300, input: <TextArea/> }), makeColumn('Доп. инфо', 'categoryInfo', { editable: true, width: 300, input: <TextArea/> }),
makeColumn('Глубина забоя на начало, м', 'depthStart', makeNumericColumnOptions(2, 'depthStart')), makeColumn('Глубина забоя на начало, м', 'depthStart', makeNumericColumnOptions(2, 'depthStart')),
makeColumn('Глубина забоя при завершении, м', 'depthEnd', makeNumericColumnOptions(2, 'depthEnd')), makeColumn('Глубина забоя при завершении, м', 'depthEnd', makeNumericColumnOptions(2, 'depthEnd')),
makeColumn('Время начала', 'dateStart', { makeDateColumn('Время начала', 'dateStart', undefined, undefined, {
editable: true, editable: true,
width: 200, width: 200,
input: <DatePickerWrapper/>,
initialValue: moment().format(), initialValue: moment().format(),
sorter: makeDateSorter('dateStart'),
render: (_, record) => (
<div className={'text-align-r-container'}>
<span>{formatDate(record.dateStart)}</span>
</div>
)
}), }),
makeColumn('Часы', 'durationHours', makeNumericColumnOptions(2, 'durationHours')), makeColumn('Часы', 'durationHours', makeNumericColumnOptions(2, 'durationHours')),
makeColumn('Комментарий', 'comment', { editable: true, input: <TextArea/> }), makeColumn('Комментарий', 'comment', { editable: true, input: <TextArea/> }),
] ]
export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => { export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize}) const [pageNumAndPageSize, setPageNumAndPageSize] = useState({ current: 1, pageSize: basePageSize })
const [paginationTotal, setPaginationTotal] = useState(0) const [paginationTotal, setPaginationTotal] = useState(0)
const [operations, setOperations] = useState([]) const [operations, setOperations] = useState([])
const [showLoader, setShowLoader] = useState(false) const [showLoader, setShowLoader] = useState(false)
const [columns, setColumns] = useState(defaultColumns) const [columns, setColumns] = useState(defaultColumns)
const location = useLocation()
const selectedIds = useMemo(() => {
const query = new URLSearchParams(location.search)
return arrayOrDefault(query.get('selectedId')?.split(',')?.map(parseInt))
}, [location])
useEffect(() => invokeWebApiWrapperAsync( useEffect(() => invokeWebApiWrapperAsync(
async () => { async () => {
let categories = await WellOperationService.getCategories(idWell) ?? [] let categories = arrayOrDefault(await WellOperationService.getCategories(idWell))
categories = categories.map((item) => ({ value: item.id, label: item.name })) categories = categories.map((item) => ({ value: item.id, label: item.name }))
let sectionTypes = await WellOperationService.getSectionTypes(idWell) ?? [] let sectionTypes = await WellOperationService.getSectionTypes(idWell) ?? {}
sectionTypes = Object.keys(sectionTypes).map((key) => ({ value: parseInt(key), label: sectionTypes[key] })) sectionTypes = Object.entries(sectionTypes).map(([id, label]) => ({ value: parseInt(id), label }))
setColumns(preColumns => { setColumns(preColumns => [
const newColumns = [...preColumns] makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, { editable: true, width: 160 }),
newColumns[0] = makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, { editable: true, width: 160 }) makeSelectColumn('Операция', 'idCategory', categories, undefined, { editable: true, width: 200 }),
newColumns[1] = makeSelectColumn('Операция', 'idCategory', categories, undefined, { editable: true, width: 200 }) ...preColumns.slice(2),
return newColumns ])
})
}, },
setShowLoader, setShowLoader,
'Не удалось загрузить список операций по скважине', 'Не удалось загрузить список операций по скважине',
@ -107,6 +105,11 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
idWell idWell
} }
const onRow = useCallback((record) => {
if (selectedIds?.includes(record.id))
return { style: { background: '#BF0000A0' } }
}, [selectedIds])
const recordParser = (record) => ({ const recordParser = (record) => ({
...record, ...record,
idType, idType,
@ -133,6 +136,7 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
onChange: (page, pageSize) => setPageNumAndPageSize({ current: page, pageSize }) onChange: (page, pageSize) => setPageNumAndPageSize({ current: page, pageSize })
}} }}
tableName={'well_operationse_editor'} tableName={'well_operationse_editor'}
onRow={onRow}
/> />
</LoaderPortal> </LoaderPortal>
) )