new-demo/src/pages/console/essay/list/web.pc.tsx

import React from 'react';
import { EntityDict } from '@project/oak-app-domain';
import { ListPro } from '@project/components/AbstractComponents';
import {
    OakAbsAttrDef,
    RowWithActions,
    WebComponentProps,
} from 'oak-frontend-base';
import PageHeader from 'oak-frontend-base/es/components/pageHeader2';
import Styles from './web.pc.module.less';
import { Button, Tag } from 'antd';
import Modal from 'antd/es/modal/Modal';
import EssayUpsert from '@project/components/console/essay/upsert';

const EssayList = (
    props: WebComponentProps<
        EntityDict,
        'essay',
        true,
        {
            list: (RowWithActions<EntityDict, 'essay'> & {
                cover: string;
                labels: {
                    id: string;
                    name: string;
                    bgColor: string;
                    textColor: string;
                }[];
            })[];
        }
    >
) => {
    const { list, oakFullpath } = props.data;
    const { t, navigateTo, updateItem, execute } = props.methods;
    const [upsertId, setUpsertId] = React.useState<string | null>(null);

    const [showSelectLabels, setShowSelectLabels] =
        React.useState<boolean>(false);

    const attrs: OakAbsAttrDef[] = [
        // 图片展示
        {
            label: t('cover'),
            path: 'cover',
            render: (row) => {
                return (
                    <>
                        {row.cover ? (
                            <img
                                src={row.cover}
                                alt={row.title}
                                className={Styles.cover}
                            />
                        ) : (
                            <div className={Styles.noCover}>
                                {t('common::noData')}
                            </div>
                        )}
                    </>
                );
            },
        },
        {
            label: t('title'),
            path: 'title',
            type: 'string',
            render: (row) => {
                return (
                    <>
                        {row.isTop ? (
                            <Tag color='#f50'>{t('essay.isTop')}</Tag>
                        ) : (
                            <Tag color='#108ee9'>{t('essay.notTop')}</Tag>
                        )}
                        <a
                            onClick={() => {
                                navigateTo({
                                    url: '/essay/upsert',
                                    oakId: row.id,
                                });
                            }}
                        >
                            {row.title}
                        </a>
                    </>
                );
            },
        },
        'summary',
        // 状态
        {
            label: t('common::status'),
            path: 'iState',
            render: (row) => {
                switch (row.iState) {
                    case 'unpublished':
                        return (
                            <Tag color='#108ee9'>
                                {t('essay:v.iState.unpublished')}
                            </Tag>
                        );
                    case 'published':
                        return (
                            <Tag color='#87d068'>
                                {t('essay:v.iState.published')}
                            </Tag>
                        );
                    case 'withdrawn':
                        return (
                            <Tag color='#f50'>
                                {t('essay:v.iState.withdrawn')}
                            </Tag>
                        );
                    default:
                        return (
                            <Tag color='#bbbbbb'>{t('common::unknown')}</Tag>
                        );
                }
            },
        },
        {
            label: t('author'),
            path: 'creator',
            render: (row) => {
                return row.creator?.name || row.creator?.nickname || '';
            },
        },
        // 标签显示
        {
            label: t('label:name'),
            path: 'labels',
            render: (row) => {
                return row.labels.length ? (
                    <div className={Styles.labels}>
                        {row.labels.map(
                            (label: {
                                id: string;
                                name: string;
                                bgColor: string;
                                textColor: string;
                            }) => (
                                <Tag
                                    color={label.bgColor}
                                    key={label.id}
                                    style={{
                                        color: label.textColor,
                                    }}
                                >
                                    {label.name}
                                </Tag>
                            )
                        )}
                    </div>
                ) : (
                    <>无</>
                );
            },
        },
    ];

    const extraActions: (row: RowWithActions<EntityDict, 'essay'>) => {
        action: string;
        label: string;
        show: boolean;
    }[] = (row) => {
        return [
            {
                action: 'setting',
                label: t('action.setting'),
                show: true,
            },
        ];
    };

    const onAction = (row: any, action: string) => {
        switch (action) {
            case 'update':
                navigateTo({
                    url: '/essay/upsert',
                    oakId: row.id,
                });
                break;
            case 'withdraw':
                updateItem({}, row.id, 'withdraw');
                execute();
                break;
            case 'publish':
                updateItem({}, row.id, 'publish');
                execute();
                break;
            case 'setting':
                setUpsertId(row.id);
                setShowSelectLabels(true);
                break;
            // 置顶和取消置顶
            case 'setTop':
            case 'cancelTop':
                updateItem({}, row.id, action);
                execute();
                break;
            default:
        }
    };

    return (
        <>
            <PageHeader
                title={<div className={Styles.left}>{t('essayList')}</div>}
                extra={
                    <Button
                        type='primary'
                        onClick={() => {
                            navigateTo({
                                url: '/essay/upsert',
                            });
                        }}
                    >
                        {t('common::action.create')}
                    </Button>
                }
            >
                <ListPro
                    entity={'essay'}
                    data={list}
                    attributes={attrs}
                    oakPath={oakFullpath}
                    onAction={onAction}
                    extraActions={extraActions}
                />
            </PageHeader>
            <Modal
                title={t('label:selectLabels')}
                open={showSelectLabels}
                onCancel={() => setShowSelectLabels(false)}
                onOk={() => setShowSelectLabels(false)}
            >
                {upsertId && (
                    <EssayUpsert
                        oakPath={`${oakFullpath}.${upsertId}`}
                        oakId={upsertId}
                    ></EssayUpsert>
                )}
            </Modal>
        </>
    );
};

export default EssayList;