xie_fang_tong_admin/src/pages/MessageList/index.tsx

import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import Constants from '@/constants';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { handlePageQuery } from '@/utils/utils';
import { deleteUserMessageUsingGet, getMessageDetailUsingGet, pbcUserMessagePageUsingPost } from '@/services/pop-b2b2c/pbcUserMessageController';
import { Avatar, Button, Col, Drawer, Row, Image, Divider, Space, Popconfirm, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Access, useAccess } from '@umijs/max';

/**
 * 查询表格
 * @param param0
 */
const fetchData = async (params: API.PageVO) => {
  const msg = await pbcUserMessagePageUsingPost(params);
  return {
    data: msg.data?.records,
    total: msg.data?.total,
    success: msg.retcode,
  } as any;
};

/**
 * 删除节点
 * @param id
 */
const handleRemove = async (fields: API.PbcUserMessage) => {
  const hide = message.loading('正在删除');
  if (!fields.pbcId) return false;

  try {
    const msg = await deleteUserMessageUsingGet({ id: fields.pbcId });
    hide();
    if (msg.retcode) {
      message.success('删除成功，即将刷新');
    } else {
      message.error(msg.retmsg ?? '删除失败，请重试');
    }
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

// eslint-disable-next-line @typescript-eslint/ban-types
const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const access: any = useAccess();

  const [currentRow, setCurrentRow] = useState<API.PbcUserMessage>();

  const [openDrawer, handleOpenDrawer] = useState<boolean>(false);

  const [loading, handleLoading] = useState<boolean>(false);

  const columns: ProColumns<API.PbcUserMessage>[] = [
    {
      title: '会员昵称',
      dataIndex: 'pbcUserNickName',
    },
    {
      title: '手机号',
      dataIndex: 'pbcUserMobile',
    },
    {
      title: '商户名称',
      dataIndex: 'pbcBusinessName'
    },
    {
      title: '留言内容',
      dataIndex: 'pbcMessage',
      ellipsis: true,
      search: false
    },
    {
      title: '留言时间',
      dataIndex: 'pbcCreateAt',
      valueType: 'dateTime',
      search: false
    },
    {
      title: '回复状态',
      dataIndex: 'pbcReplyState',
      valueEnum: Constants.pbcReplyState
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      render: (text, record) => (
        <Space>
          <Button type="link" loading={loading} onClick={() => {
            if (record.pbcId) {
              handleLoading(true);
              getMessageDetailUsingGet({id: record.pbcId}).then(res => {
                handleLoading(false);
                if (res.retcode) {
                  handleOpenDrawer(true);
                  setCurrentRow(res.data);
                }
              }).catch(() => {
                handleLoading(false);
              })
            }
          }}>
            查看详情
          </Button>
          <Access key="remove" accessible={access.messageDelete}>
            <Popconfirm
              title={`确定需要删除该留言?`}
              onConfirm={async () => {
                const success = await handleRemove(record);
                if (success) actionRef.current?.reload();
              }}
            >
              <Button size="small" type="link" danger>
                删除
              </Button>
            </Popconfirm>
          </Access>
        </Space>
      ),
    },
  ];
  return (
    <PageContainer
      header={{
        title: '',
        breadcrumb: {},
      }}
    >
      <ProTable<API.PbcUserMessage>
        columns={columns}
        actionRef={actionRef}
        request={(param: any) => {
          const queryParam = handlePageQuery(param);
          if (queryParam.filters) {
            queryParam.filters.push({
              key: 'pbcReplyToId'.replace(/([A-Z])/g, '_$1').toLowerCase(),
              value: "",
              action: 'isnull',
            })
          }
          return fetchData(queryParam);
        }}
        rowKey="pbcId"
        size="small"
        bordered
        search={{
          labelWidth: 'auto',
          span: 6
        }}
        pagination={{
          defaultPageSize: 20,
          showSizeChanger: true,
        }}
        scroll={{
          y: 'calc(100vh - 320px)',
        }}
        dateFormatter="string"
        options={false}
        toolBarRender={() => []}
      />
      <Drawer
        title={null} 
        onClose={() => {
          setCurrentRow({})
          handleOpenDrawer(false)
        }} 
        width={600}
        closeIcon={null}
        footer={null}
        destroyOnClose={true}
        open={openDrawer}
      >
        <div>
          <Row gutter={20} align="middle">
            <Col flex="none">
              <Avatar size={40} icon={<UserOutlined />} src={currentRow?.pbcUserImage} />
            </Col>
            <Col flex="auto">
              <div style={{ marginBottom: 5, fontWeight: 'bold' }}>{currentRow?.pbcUserNickName}</div>
              <div style={{ fontSize: 12, color: '#999' }}>{currentRow?.pbcCreateAt}</div>
            </Col>
          </Row>
          <p style={{ margin: '20px 0', fontSize: 16, color: '#999' }}>{currentRow?.pbcMessage}</p>
          <Image.PreviewGroup>
            {currentRow?.pbcMessageImages?.split(',').map(e => <Image key={e} height={140} src={e} />)}
          </Image.PreviewGroup>
          <Row style={{ marginTop: 20, padding: 8, backgroundColor: 'rgb(242, 242, 242)' }} align='stretch'>
            <Col flex="none">
              <div style={{ marginRight: 10, width: 80, height: 80, backgroundImage: `url(${currentRow?.pbcProduct?.pbcProductImages?.split(',')[0]})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}></div>
            </Col>
            <Col style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column' }} flex="auto">
              <div>{currentRow?.pbcProduct?.pbcProductTitle}</div>
              <div style={{ fontSize: 18, color: 'goldenrod' }}>¥{currentRow?.pbcProduct?.pbcProductPrice}</div>
            </Col>
          </Row>
          <Divider style={{ borderBlockStart: '10px solid rgba(5, 5, 5, 0.06)' }} />
          <div>
            {currentRow?.children?.map(e => (
              <div key={e.pbcId}>
                <Row gutter={20} align="middle">
                  <Col flex="none">
                    <Avatar size={40} icon={<UserOutlined />} src={e.pbcUserImage} />
                  </Col>
                  <Col flex="auto">
                    <div style={{ marginBottom: 5, fontWeight: 'bold' }}>{e.pbcUserNickName}</div>
                    <div style={{ fontSize: 12, color: '#999' }}>{e.pbcCreateAt}</div>
                  </Col>
                </Row>
                <p style={{ margin: '20px 0', fontSize: 16, color: '#999' }}>{e.pbcMessage}</p>
                <Image.PreviewGroup>
                  {e.pbcMessageImages?.split(',').map(item => <Image key={item} height={140} src={item} />)}
                </Image.PreviewGroup>
                <Divider />
              </div>
            ))}
          </div>
        </div>
      </Drawer>
    </PageContainer>
  );
};

export default TableList;