105 lines
4.0 KiB
JavaScript
105 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { Badge, Table, Typography } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import ActionBtnPanel from 'oak-frontend-base/es/components/actionBtnPanel';
|
|
const MessageType = {
|
|
adminNotification: '系统通知',
|
|
conversationMessage: '客服消息',
|
|
};
|
|
export default function Render(props) {
|
|
const { data, methods } = props;
|
|
const { t, setPageSize, setCurrentPage, goDetailById } = methods;
|
|
const { messages, oakFullpath, oakLoading, oakPagination } = data;
|
|
const { pageSize, total, currentPage } = oakPagination || {};
|
|
return (<Table loading={oakLoading} dataSource={messages || []} rowKey="id"
|
|
// scroll={{ x: 1200 }}
|
|
columns={[
|
|
// {
|
|
// dataIndex: 'serial-number',
|
|
// title: '序号',
|
|
// render: (value, record, index) => {
|
|
// return index + 1;
|
|
// },
|
|
// },
|
|
{
|
|
dataIndex: 'title',
|
|
title: '消息内容',
|
|
render: (value, record, index) => {
|
|
if (record.visitState === 'unvisited') {
|
|
return (<>
|
|
<Badge style={{ marginRight: 5 }} status="processing"></Badge>
|
|
<Typography.Link onClick={() => {
|
|
goDetailById(record.id);
|
|
}}>
|
|
{value}
|
|
</Typography.Link>
|
|
</>);
|
|
}
|
|
return (<Typography.Text onClick={() => {
|
|
goDetailById(record.id);
|
|
}}>
|
|
{value}
|
|
</Typography.Text>);
|
|
},
|
|
},
|
|
{
|
|
dataIndex: 'type',
|
|
title: '类型',
|
|
render: (value, record, index) => {
|
|
return MessageType[value];
|
|
},
|
|
},
|
|
{
|
|
dataIndex: 'visitState',
|
|
title: '是否已读',
|
|
render: (value, record, index) => {
|
|
return value === 'unvisited' ? '未读' : '已读';
|
|
},
|
|
},
|
|
{
|
|
dataIndex: '$$createAt$$',
|
|
title: '接收时间',
|
|
render: (value, record, index) => {
|
|
return (<div>
|
|
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
|
</div>);
|
|
},
|
|
},
|
|
{
|
|
dataIndex: 'op',
|
|
width: 300,
|
|
title: '操作',
|
|
align: 'center',
|
|
render: (value, record, index) => {
|
|
return (<ActionBtnPanel mode="table-cell" entity="message" items={[
|
|
{
|
|
label: '详情',
|
|
onClick: () => {
|
|
goDetailById(record.id);
|
|
},
|
|
},
|
|
{
|
|
action: 'visit',
|
|
show: record['#oakLegalActions']?.includes('visit'),
|
|
onClick: async () => {
|
|
methods.updateItem({}, record.id, 'visit');
|
|
await methods.execute();
|
|
},
|
|
},
|
|
]}></ActionBtnPanel>);
|
|
},
|
|
fixed: 'right',
|
|
},
|
|
]} pagination={{
|
|
total: total,
|
|
pageSize: pageSize,
|
|
current: currentPage,
|
|
onShowSizeChange: (current, pageSize) => {
|
|
setPageSize(pageSize);
|
|
},
|
|
onChange: (page, pageSize) => {
|
|
setCurrentPage(page);
|
|
},
|
|
}}/>);
|
|
}
|