fork from bc4552c5a8
This commit is contained in:
287
client/components/TimeLine/TimeLine.js
Normal file
287
client/components/TimeLine/TimeLine.js
Normal file
@@ -0,0 +1,287 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { Timeline, Spin, Row, Col, Tag, Avatar, Button, Modal, AutoComplete } from 'antd';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { formatTime } from '../../common.js';
|
||||
import showDiffMsg from '../../../common/diff-view.js';
|
||||
import variable from '../../constants/variable';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { fetchNewsData, fetchMoreNews } from '../../reducer/modules/news.js';
|
||||
import { fetchInterfaceList } from '../../reducer/modules/interface.js';
|
||||
import ErrMsg from '../ErrMsg/ErrMsg.js';
|
||||
const jsondiffpatch = require('jsondiffpatch/dist/jsondiffpatch.umd.js');
|
||||
const formattersHtml = jsondiffpatch.formatters.html;
|
||||
import 'jsondiffpatch/dist/formatters-styles/annotated.css';
|
||||
import 'jsondiffpatch/dist/formatters-styles/html.css';
|
||||
import './TimeLine.scss';
|
||||
import { timeago } from '../../../common/utils.js';
|
||||
|
||||
// const Option = AutoComplete.Option;
|
||||
const { Option, OptGroup } = AutoComplete;
|
||||
|
||||
const AddDiffView = props => {
|
||||
const { title, content, className } = props;
|
||||
|
||||
if (!content) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<h3 className="title">{title}</h3>
|
||||
<div dangerouslySetInnerHTML={{ __html: content }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AddDiffView.propTypes = {
|
||||
title: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
// timeago(new Date().getTime() - 40);
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
newsData: state.news.newsData,
|
||||
curpage: state.news.curpage,
|
||||
curUid: state.user.uid
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchNewsData,
|
||||
fetchMoreNews,
|
||||
fetchInterfaceList
|
||||
}
|
||||
)
|
||||
class TimeTree extends Component {
|
||||
static propTypes = {
|
||||
newsData: PropTypes.object,
|
||||
fetchNewsData: PropTypes.func,
|
||||
fetchMoreNews: PropTypes.func,
|
||||
setLoading: PropTypes.func,
|
||||
loading: PropTypes.bool,
|
||||
curpage: PropTypes.number,
|
||||
typeid: PropTypes.number,
|
||||
curUid: PropTypes.number,
|
||||
type: PropTypes.string,
|
||||
fetchInterfaceList: PropTypes.func
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
bidden: '',
|
||||
loading: false,
|
||||
visible: false,
|
||||
curDiffData: {},
|
||||
apiList: []
|
||||
};
|
||||
this.curSelectValue = '';
|
||||
}
|
||||
|
||||
getMore() {
|
||||
const that = this;
|
||||
|
||||
if (this.props.curpage <= this.props.newsData.total) {
|
||||
this.setState({ loading: true });
|
||||
this.props
|
||||
.fetchMoreNews(
|
||||
this.props.typeid,
|
||||
this.props.type,
|
||||
this.props.curpage + 1,
|
||||
10,
|
||||
this.curSelectValue
|
||||
)
|
||||
.then(function() {
|
||||
that.setState({ loading: false });
|
||||
if (that.props.newsData.total === that.props.curpage) {
|
||||
that.setState({ bidden: 'logbidden' });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleCancel = () => {
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
};
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.props.fetchNewsData(this.props.typeid, this.props.type, 1, 10);
|
||||
if (this.props.type === 'project') {
|
||||
this.getApiList();
|
||||
}
|
||||
}
|
||||
|
||||
openDiff = data => {
|
||||
this.setState({
|
||||
curDiffData: data,
|
||||
visible: true
|
||||
});
|
||||
};
|
||||
|
||||
async getApiList() {
|
||||
let result = await this.props.fetchInterfaceList({
|
||||
project_id: this.props.typeid,
|
||||
limit: 'all'
|
||||
});
|
||||
this.setState({
|
||||
apiList: result.payload.data.data.list
|
||||
});
|
||||
}
|
||||
|
||||
handleSelectApi = selectValue => {
|
||||
this.curSelectValue = selectValue;
|
||||
this.props.fetchNewsData(this.props.typeid, this.props.type, 1, 10, selectValue);
|
||||
};
|
||||
|
||||
render() {
|
||||
let data = this.props.newsData ? this.props.newsData.list : [];
|
||||
|
||||
const curDiffData = this.state.curDiffData;
|
||||
let logType = {
|
||||
project: '项目',
|
||||
group: '分组',
|
||||
interface: '接口',
|
||||
interface_col: '接口集',
|
||||
user: '用户',
|
||||
other: '其他'
|
||||
};
|
||||
|
||||
const children = this.state.apiList.map(item => {
|
||||
let methodColor = variable.METHOD_COLOR[item.method ? item.method.toLowerCase() : 'get'];
|
||||
return (
|
||||
<Option title={item.title} value={item._id + ''} path={item.path} key={item._id}>
|
||||
{item.title}{' '}
|
||||
<Tag
|
||||
style={{ color: methodColor ? methodColor.color : '#cfefdf', backgroundColor: methodColor ? methodColor.bac : '#00a854', border: 'unset' }}
|
||||
>
|
||||
{item.method}
|
||||
</Tag>
|
||||
</Option>
|
||||
);
|
||||
});
|
||||
|
||||
children.unshift(
|
||||
<Option value="" key="all">
|
||||
选择全部
|
||||
</Option>
|
||||
);
|
||||
|
||||
if (data && data.length) {
|
||||
data = data.map((item, i) => {
|
||||
let interfaceDiff = false;
|
||||
// 去掉了 && item.data.interface_id
|
||||
if (item.data && typeof item.data === 'object') {
|
||||
interfaceDiff = true;
|
||||
}
|
||||
return (
|
||||
<Timeline.Item
|
||||
dot={
|
||||
<Link to={`/user/profile/${item.uid}`}>
|
||||
<Avatar src={`/api/user/avatar?uid=${item.uid}`} />
|
||||
</Link>
|
||||
}
|
||||
key={i}
|
||||
>
|
||||
<div className="logMesHeade">
|
||||
<span className="logoTimeago">{timeago(item.add_time)}</span>
|
||||
{/*<span className="logusername"><Link to={`/user/profile/${item.uid}`}><Icon type="user" />{item.username}</Link></span>*/}
|
||||
<span className="logtype">{logType[item.type]}动态</span>
|
||||
<span className="logtime">{formatTime(item.add_time)}</span>
|
||||
</div>
|
||||
<span className="logcontent" dangerouslySetInnerHTML={{ __html: item.content }} />
|
||||
<div style={{ padding: '10px 0 0 10px' }}>
|
||||
{interfaceDiff && <Button onClick={() => this.openDiff(item.data)}>改动详情</Button>}
|
||||
</div>
|
||||
</Timeline.Item>
|
||||
);
|
||||
});
|
||||
} else {
|
||||
data = '';
|
||||
}
|
||||
let pending =
|
||||
this.props.newsData.total <= this.props.curpage ? (
|
||||
<a className="logbidden">以上为全部内容</a>
|
||||
) : (
|
||||
<a className="loggetMore" onClick={this.getMore.bind(this)}>
|
||||
查看更多
|
||||
</a>
|
||||
);
|
||||
if (this.state.loading) {
|
||||
pending = <Spin />;
|
||||
}
|
||||
let diffView = showDiffMsg(jsondiffpatch, formattersHtml, curDiffData);
|
||||
|
||||
return (
|
||||
<section className="news-timeline">
|
||||
<Modal
|
||||
style={{ minWidth: '800px' }}
|
||||
title="Api 改动日志"
|
||||
visible={this.state.visible}
|
||||
footer={null}
|
||||
onCancel={this.handleCancel}
|
||||
>
|
||||
<i>注： 绿色代表新增内容，红色代表删除内容</i>
|
||||
<div className="project-interface-change-content">
|
||||
{diffView.map((item, index) => {
|
||||
return (
|
||||
<AddDiffView
|
||||
className="item-content"
|
||||
title={item.title}
|
||||
key={index}
|
||||
content={item.content}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{diffView.length === 0 && <ErrMsg type="noChange" />}
|
||||
</div>
|
||||
</Modal>
|
||||
{this.props.type === 'project' && (
|
||||
<Row className="news-search">
|
||||
<Col span="3">选择查询的 Api：</Col>
|
||||
<Col span="10">
|
||||
<AutoComplete
|
||||
onSelect={this.handleSelectApi}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Select Api"
|
||||
optionLabelProp="title"
|
||||
filterOption={(inputValue, options) => {
|
||||
if (options.props.value == '') return true;
|
||||
if (
|
||||
options.props.path.indexOf(inputValue) !== -1 ||
|
||||
options.props.title.indexOf(inputValue) !== -1
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}}
|
||||
>
|
||||
{/* {children} */}
|
||||
<OptGroup label="other">
|
||||
<Option value="wiki" path="" title="wiki">
|
||||
wiki
|
||||
</Option>
|
||||
</OptGroup>
|
||||
<OptGroup label="api">{children}</OptGroup>
|
||||
</AutoComplete>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
{data ? (
|
||||
<Timeline className="news-content" pending={pending}>
|
||||
{data}
|
||||
</Timeline>
|
||||
) : (
|
||||
<ErrMsg type="noData" />
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TimeTree;
|
||||
Reference in New Issue
Block a user