oak-pay-business/es/components/shipServiceSystem/list/web.pc.js

import React, { useState } from 'react';
import ListPro from 'oak-frontend-base/es/components/listPro';
import { Modal, Table, Button, Input } from 'antd';
import Styles from './web.pc.module.less';
import { pull } from 'oak-domain/lib/utils/lodash';
export default function render(props) {
    const { shipServiceSystems, shipServices, canCreate, oakFullpath, oakEntity, oakLoading, oakExecuting, searchLoading, systemName } = props.data;
    const { t, clean, addShipServices, searchShipService, removeItem, execute } = props.methods;
    const [addOpen, setAddOpen] = useState(false);
    const [selectedIds, setSelectedIds] = useState([]);
    const filerColumns = [
        {
            attr: 'shipService.shipCompany.name',
            op: '$startsWith',
        }
    ];
    const shipServiceColumns = [
        {
            title: t('shipService:name'),
            render(row, record) {
                return record.name;
            }
        },
        {
            title: t('shipCompany:attr.name'),
            render(row, record) {
                return record.shipCompany?.name;
            }
        },
        {
            title: t('shipCompany:attr.abbr'),
            render(row, record) {
                return record.shipCompany?.abbr;
            }
        },
        Table.SELECTION_COLUMN,
    ];
    const [searchValue, setSearchValue] = useState('');
    return (<>
            {/* <FilterPanel
            oakPath={oakFullpath}
            entity={oakEntity}
            columns={filerColumns}
        /> */}
            <ListPro title={t('setting', { name: systemName })} data={shipServiceSystems} entity={oakEntity} extraContent={canCreate && <Button type="primary" onClick={() => {
                searchShipService('');
                setAddOpen(true);
            }}>
                        {t('common::action.add')}
                    </Button>} attributes={[
            {
                path: 'shipService.name',
                label: t('shipService:name'),
            },
            {
                path: 'shipService.shipCompany.name',
                label: t('shipCompany:name'),
            },
            {
                path: 'shipService.shipCompany.abbr',
                label: t('shipCompany:name') + t('shipCompany:attr.abbr'),
            },
        ]} onAction={async (row, action) => {
            if (action === 'remove') {
                removeItem(row.id);
                await execute();
            }
        }} oakPath={oakFullpath}/>
            <Modal title={t('shipService:name')} width={800} destroyOnClose maskClosable={false} open={addOpen} onCancel={() => {
            clean();
            setSelectedIds([]);
            setAddOpen(false);
        }} okText={t('common::action.add')} cancelText={t('common::action.cancel')} okButtonProps={{
            disabled: oakLoading || oakExecuting || !(selectedIds && selectedIds.length > 0)
        }} onOk={async () => {
            await addShipServices(selectedIds);
            setSelectedIds([]);
            setAddOpen(false);
        }}>
                <>
                    <div className={Styles.searchBox}>
                        <Input placeholder={t('placeholder.shipCompanyName')} value={searchValue} allowClear={true} onChange={(e) => {
            setSearchValue(e.target.value.trim());
        }} onPressEnter={() => {
            searchShipService(searchValue);
        }}/>
                    </div>
                    <Table columns={shipServiceColumns} dataSource={shipServices} rowKey={(record) => { return record.id; }} loading={oakLoading || searchLoading} rowSelection={{
            selectedRowKeys: selectedIds,
            onSelect: (record, selected) => {
                let newSelectedIds = [...selectedIds];
                if (selected) {
                    newSelectedIds.push(record.id);
                    setSelectedIds(newSelectedIds);
                }
                else {
                    const newSelectedIds2 = pull(newSelectedIds, record.id);
                    setSelectedIds([...newSelectedIds2]);
                }
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                const changeIds = changeRows.map((ele) => ele.id);
                let newSelectedIds = [...selectedIds];
                if (selected) {
                    newSelectedIds.push(...changeIds);
                    setSelectedIds(newSelectedIds);
                }
                else {
                    const newSelectedIds2 = pull(newSelectedIds, ...changeIds);
                    setSelectedIds([...newSelectedIds2]);
                }
            }
        }} onRow={(record) => {
            return {
                onClick: (event) => {
                    let newSelectedIds = [...selectedIds];
                    if (selectedIds.includes(record.id)) {
                        const newSelectedIds2 = pull(newSelectedIds, record.id);
                        setSelectedIds([...newSelectedIds2]);
                    }
                    else {
                        newSelectedIds.push(record.id);
                        setSelectedIds(newSelectedIds);
                    }
                },
            };
        }} style={{ minHeight: 560 }}/>
                </>
            </Modal>
        </>);
}