1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- import React, { useEffect, useState, useRef } from 'react';
- import { UserOutlined } from '@ant-design/icons';
- import { Form } from '@ant-design/compatible';
- import '@ant-design/compatible/assets/index.css';
- import {
- Steps,
- Button,
- Drawer,
- Comment,
- Tooltip,
- Avatar,
- List,
- Card,
- Modal,
- Checkbox,
- Row,
- Col,
- message,
- Input,
- Table,
- Alert,
- Spin,
- Tabs,
- } from 'antd';
- import moment from 'moment';
- const { Step } = Steps;
- const { TextArea } = Input;
- const { TabPane } = Tabs;
- // 评论
- function CommentDrawer(props) {
- const { visible, onClose, list, addComment, loading } = props;
- const [value, setValue] = useState('');
- // const [commentList, setCommentList] = useState([]);
- const handleSubmit = () => {
- if (!value) return;
- addComment(value, () => {
- setValue('');
- });
- };
- return (
- <Drawer title="评论列表" mask={false} placement="right" onClose={onClose} visible={visible}>
- <List
- className="comment-list"
- itemLayout="horizontal"
- dataSource={list}
- loading={loading}
- renderItem={item => (
- <li>
- <Comment
- author={<a>{item.AuthorUser.CName}</a>}
- avatar={<Avatar icon={<UserOutlined />} alt={item.author} />}
- content={<p>{item.comment}</p>}
- datetime={
- <Tooltip title={moment(item.c_time).format('YYYY-MM-DD')}>
- <span>{moment(item.c_time).fromNow()}</span>
- </Tooltip>
- }
- />
- </li>
- )}
- />
- <Comment
- avatar={<Avatar icon={<UserOutlined />} alt="张三" />}
- content={
- <>
- <Form.Item>
- <TextArea rows={4} onChange={e => setValue(e.target.value)} value={value} />
- </Form.Item>
- <Form.Item>
- <Button htmlType="submit" loading={loading} onClick={handleSubmit} type="primary">
- 添加评论
- </Button>
- </Form.Item>
- </>
- }
- />
- </Drawer>
- );
- }
- export default CommentDrawer
|