qc-bookManage/src/pages/book/bookManage/shortbookList/tableConfig.tsx

import { ProColumns } from '@ant-design/pro-components';
import { Badge, Button, Col, Image, Popconfirm, Row, Space, Tag } from 'antd';
import { createStyles } from 'antd-style';
const useStyles = createStyles(({ token }) => {
  return {
    bookLabel: {
      color: token.colorTextTertiary,
    },
    del: {
      textDecoration: 'line-through',
      color: token.colorTextDisabled,
    },
    color: {
      color: token.colorWarningActive,
    },
  };
});
const brightColors = [
  '#FF6347', // 番茄红
  '#FF4500', // 橙红色
  '#FFD700', // 金黄色
  '#32CD32', // 鲜绿色
  '#00FF7F', // 麦绿色
  '#00CED1', // 暗青色
  '#4682B4', // 钢蓝色
  '#6A5ACD', // 鲜紫色
  '#FF69B4', // 热粉红色
  '#FF1493', // 深粉红色
];
export const columns = (props: {
  authList?: any[];
  labelList?: any[];
  enumList?: { [key: string]: any };
  categoryList?: any[];
  lookBook: (data: any) => void;
  closeForm: (b: boolean, d: any) => void;
  setEditValues: (v: any) => void;
  setWorkDirection: (w: any) => void;
  del: (id: any) => void;
  setParagraphEdit: (data: any) => void;
}): ProColumns<any>[] => {
  let {
    authList,
    labelList,
    categoryList,
    enumList,
    lookBook,
    closeForm,
    setWorkDirection,
    del,
    setEditValues,
    setParagraphEdit
  } = props;
  let { styles } = useStyles();
  console.log(
    enumList
  )
  return enumList?.BOOK_STATUS
    ? [
      {
        title: '封面',
        dataIndex: 'picUrl',
        key: 'picUrl',
        width: 90,
        ellipsis: true,
        align: 'center',
        hideInSearch: true,
        render: (a: any, b: any) => {
          return (
            <div style={{ position: 'relative' }}>
              <Image
                src={b?.picUrl}
                style={{ width: 50 }}
                onError={(e: any) => {
                  e.target.src = localStorage.getItem('nocover');
                }}
              />
            </div>
          );
        },
      },
      {
        title: '作品详情',
        dataIndex: 'authorId',
        key: 'authorId',
        ellipsis: true,
        hideInSearch: true,
        width: 500,
        render: (a, b) => {
          let { bookName, wordCount, labels, bookStatus, categoryName, authorName, score } = b;
          let arr = enumList?.BOOK_STATUS?.values;
          return (
            <Row>
              <Col span={24}>
                <Space size={[5, 0]} wrap>
                  <a
                    style={{ fontSize: 14, color: '#337ab7', cursor: 'pointer' }}
                    onClick={() => {
                      lookBook?.({ ...b, pageNum: 1, pageSize: 2 });
                    }}
                  >
                    [{categoryName}]{bookName}
                  </a>
                  <span style={{ fontSize: 11 }} className={styles.bookLabel}>
                    [{arr[bookStatus]?.description}]
                  </span>
                  <Space size={[0, 0]}>
                    {labels?.map((tags: { id: string; name: string }, index: number) => {
                      return (
                        <Tag key={tags?.id} color={brightColors[index]}>
                          {tags?.name}
                        </Tag>
                      );
                    })}
                  </Space>
                </Space>
              </Col>
              <Col span={24} className={styles.bookLabel}>
                <span>
                  <span>作者</span>：
                </span>
                {authorName}
              </Col>
              <Col span={24} className={styles.bookLabel}>
                <span>总字数：</span>
                {wordCount || 0}
              </Col>
              <Col span={24} className={styles.bookLabel}>
                <span>评分：</span>
                {score || 0}
              </Col>
            </Row>
          );
        },
      },
      {
        title: '所属频道',
        dataIndex: 'workDirection',
        key: 'workDirection',
        align: 'center',
        width: 80,
        ellipsis: true,
        hideInSearch: true,
        render: (a: any, b: any) => {
          return enumList?.WORK_DIRECTION?.values[b.workDirection]?.description;
        },
      },
      {
        title: '点击量',
        dataIndex: 'visitCount',
        key: 'visitCount',
        width: 90,
        ellipsis: true,
        align: 'center',
        hideInSearch: true,
        render: (a, b) => {
          let { visitCount } = b;
          return visitCount;
        },
      },
      {
        title: '上架状态',
        dataIndex: 'shelveStatus',
        key: 'shelveStatus',
        width: 90,
        ellipsis: true,
        align: 'center',
        hideInSearch: true,
        render: (a: any, b) => {
          let arr: any = enumList?.SHELVE_STATUS?.values;
          let { shelveStatus } = b;
          return (
            arr[shelveStatus]?.description && (
              <Badge
                text={arr[shelveStatus]?.description}
                status={shelveStatus == 0 ? 'processing' : 'default'}
              />
            )
          );
        },
      },
      {
        title: '来源',
        dataIndex: 'source',
        key: 'source',
        width: 90,
        ellipsis: true,
        align: 'center',
        hideInSearch: true,
        render: (a: any, b) => {
          let { source } = b;
          let arr: any = new Map(
            enumList?.SOURCE?.values?.map(({ value, description }: any) => [value, description]),
          );
          return arr.get(source);
        },
      },
      {
        title: '操作',
        dataIndex: 'cz',
        key: 'cz',
        width: 90,
        ellipsis: true,
        align: 'center',
        hideInSearch: true,
        render: (a: any, b: any) => {
          return (
            <Space size={[0, 0]}>
              <Button
                type="link"
                size="small"
                className={styles.color}
                onClick={() => {
                  setParagraphEdit(b);
                }}
              >
                段落管理
              </Button>
              <Button
                type="link"
                size="small"
                onClick={() => {
                  closeForm(true, b)
                }}
              >
                编辑
              </Button>
              <Popconfirm
                title={
                  <div>
                    确定要删除<span style={{ color: 'red' }}>{b.bookName}</span>此书籍?
                  </div>
                }
                onConfirm={() => {
                  del(b.id);
                }}
              >
                <Button type="link" size="small" danger>
                  删除
                </Button>
              </Popconfirm>
            </Space>
          );
        },
      },
      // 搜索条件
      {
        title: '小说名称',
        dataIndex: 'bookName',
        valueType: 'text',
        hideInTable: true,
        fieldProps: { placeholder: '请输入小说名称' },
        colSize: 1,
      },
      {
        title: '作者',
        dataIndex: 'authorId',
        valueType: 'select',
        hideInTable: true,
        fieldProps: { showSearch: true, placeholder: '请选择作者' },
        colSize: 1,
        valueEnum: new Map(authList?.map(({ id, authorName }) => [id, authorName])),
      },
      {
        title: '频道',
        dataIndex: 'workDirection',
        valueType: 'segmented',
        hideInTable: true,
        fieldProps: {
          type: 'primary',
          style: { width: 'auto' },
          onChange: (value) => {
            setWorkDirection(value);
          },
        },
        colSize: 3,
        initialValue: '',
        valueEnum: () => {
          let arr = enumList?.WORK_DIRECTION?.values;
          return arr
            ? new Map(
              [{ value: '', description: '全部' }, ...arr]?.map(
                ({ value, description }: any) => [value, description],
              ),
            )
            : {};
        },
      },
      {
        title: '分类',
        dataIndex: 'categoryId',
        valueType: 'segmented',
        hideInTable: true,
        hideInSearch: !labelList,
        fieldProps: { type: 'primary', style: { width: 'auto' } },
        colSize: 3,
        initialValue: '',
        valueEnum: () => {
          let arr = categoryList || [];
          return new Map([{ id: '', name: '全部' }, ...arr]?.map((item) => [item.id, item.name]));
        },
      },
      {
        title: '标签',
        dataIndex: 'labelIds',
        valueType: 'segmented',
        hideInTable: true,
        hideInSearch: !labelList,
        fieldProps: { type: 'primary', style: { width: 'auto' } },
        colSize: 3,
        initialValue: '',
        valueEnum: () => {
          let arr = labelList || [];
          return new Map([{ id: '', name: '全部' }, ...arr]?.map((item) => [item.id, item.name]));
        },
      },
      {
        title: '来源',
        dataIndex: 'source',
        valueType: 'segmented',
        hideInTable: true,
        fieldProps: { type: 'primary', style: { width: 'auto' } },
        colSize: 3,
        initialValue: '',
        valueEnum: () => {
          let arr = enumList?.SOURCE?.values;
          return arr
            ? new Map(
              [{ value: '', description: '全部' }, ...arr]?.map(
                ({ value, description }: any) => [value, description],
              ),
            )
            : {};
        },
      },
      {
        title: '连载',
        dataIndex: 'bookStatus',
        valueType: 'segmented',
        hideInTable: true,
        fieldProps: { type: 'primary', style: { width: 'auto' } },
        colSize: 3,
        initialValue: '',
        valueEnum: () => {
          let arr = enumList?.BOOK_STATUS?.values;
          return arr
            ? new Map(
              [{ value: '', description: '全部' }, ...arr]?.map(
                ({ value, description }: any) => [value, description],
              ),
            )
            : {};
        },
      },
      {
        title: '上架',
        dataIndex: 'shelveStatus',
        valueType: 'segmented',
        hideInTable: true,
        fieldProps: { type: 'primary', style: { width: 'auto' } },
        colSize: 3,
        initialValue: '',
        valueEnum: () => {
          let arr = enumList?.SHELVE_STATUS?.values;
          return arr
            ? new Map(
              [{ value: '', description: '全部' }, ...arr]?.map(
                ({ value, description }: any) => [value, description],
              ),
            )
            : {};
        },
      },
      {
        title: '字数',
        dataIndex: 'wordCount',
        valueType: 'segmented',
        hideInTable: true,
        fieldProps: { type: 'primary', style: { width: 'auto' }, block: true },
        colSize: 3,
        initialValue: '',
        valueEnum: {
          '': '全部',
          '0-2': '2万内',
          '2-5': '2-5万',
          '5-10': '5-10万',
          '10-20': '10-20万',
          '20-40': '20-40万',
          '40-100': '40-100万',
          '100-150': '100-150万',
          '150-200': '150-200万',
          '200-300': '200-300万',
          '300-0': '300万以上',
        },
      },
    ]
    : [];
};

export const childrenColumns = (props: {
  del: (id: any) => void;
  closeForm: (b: boolean, v: any) => void;
}): ProColumns<any>[] => {
  let { del, closeForm } = props;
  return [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      width: 50,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '段落号',
      dataIndex: 'paragraphNo',
      key: 'paragraphNo',
      align: 'center',
      width: 70,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '段落字数',
      dataIndex: 'wordCount',
      key: 'wordCount',
      align: 'center',
      width: 70,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      align: 'center',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'cz',
      key: 'cz',
      width: 90,
      ellipsis: true,
      align: 'center',
      hideInSearch: true,
      render: (a, b) => {
        return (
          <Space>
            <Button
              type="link"
              size="small"
              onClick={() => {
                closeForm(true, b);
              }}
            >
              编辑
            </Button>
            <Popconfirm
              title={
                <div>
                  确定要删除<span style={{ color: 'red' }}>{b.paragraphNo}</span>号段落?
                </div>
              }
              onConfirm={() => {
                del(b.id);
              }}
            >
              <a style={{ color: 'red' }}>删除</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
};