import React, {Component} from 'react'
|
import { fromJS } from 'immutable'
|
import { Input, Modal } from 'antd'
|
import { DeleteOutlined, RightOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Api from '@/views/interface/api'
|
import Utils from '@/utils/utils.js'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { Search } = Input
|
const { confirm } = Modal
|
|
class History extends Component {
|
state = {
|
list: [],
|
historys: [],
|
searchKey: ''
|
}
|
|
componentDidMount() {
|
MKEmitter.addListener('insertInterface', this.insertInterface)
|
setTimeout(() => {
|
if (window.GLOB.IndexDB) {
|
this.getHistory()
|
} else {
|
setTimeout(() => {
|
this.getHistory()
|
}, 1000)
|
}
|
}, 200)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('insertInterface', this.insertInterface)
|
}
|
|
clear = () => {
|
const _this = this
|
confirm({
|
content: 'Are you sure you want to clear all your history requests?',
|
onOk() {
|
Api.clearInterfaces()
|
|
_this.setState({list: [], historys: []})
|
},
|
onCancel() {}
|
})
|
}
|
|
getHistory = () => {
|
Api.getInterfaces().then(res => {
|
if (!res) return
|
|
res.sort((a,b) => {
|
return a.createDate < b.createDate ? 1 : -1
|
})
|
|
let list = []
|
let item = null
|
|
res.forEach(m => {
|
let date = m.createDate.substring(0, 10)
|
|
if (m.params) {
|
try {
|
m.params = JSON.parse(m.params)
|
} catch (e) {
|
m.params = []
|
}
|
} else {
|
m.params = []
|
}
|
|
if (m.headers) {
|
try {
|
m.headers = JSON.parse(m.headers)
|
} catch (e) {
|
m.headers = []
|
}
|
} else {
|
m.headers = []
|
}
|
|
if (m.formData) {
|
try {
|
m.formData = JSON.parse(m.formData)
|
} catch (e) {
|
m.formData = []
|
}
|
} else {
|
m.formData = []
|
}
|
|
if (item && item.date !== date) {
|
list.push(item)
|
item = null
|
}
|
|
if (!item) {
|
item = {date, sublist: []}
|
item.sublist.push(m)
|
} else if (item && item.date === date) {
|
item.sublist.push(m)
|
}
|
})
|
|
if (item) {
|
list.push(item)
|
}
|
|
this.setState({list, historys: fromJS(list).toJS()})
|
})
|
}
|
|
delete = (m) => {
|
const { searchKey } = this.state
|
|
Api.delInterface(m.id)
|
|
let list = this.state.list.filter(item => {
|
item.sublist = item.sublist.filter(cell => cell.id !== m.id)
|
|
return item.sublist.length > 0
|
})
|
|
let historys = fromJS(list).toJS()
|
if (searchKey) {
|
historys = historys.filter(item => {
|
item.sublist = item.sublist.filter(cell => cell.interface.indexOf(searchKey) > -1)
|
|
return item.sublist.length > 0
|
})
|
}
|
|
this.setState({list, historys})
|
}
|
|
insertInterface = (item) => {
|
item.id = Utils.getuuid()
|
item.createDate = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
Api.writeInIndexDB(item)
|
|
let list = fromJS(this.state.list).toJS()
|
|
if (list[0]) {
|
if (list[0].date === item.createDate.substring(0, 10)) {
|
list[0].sublist.unshift(item)
|
} else {
|
list.unshift({
|
date: item.createDate.substring(0, 10),
|
sublist: [item]
|
})
|
}
|
} else {
|
list.push({
|
date: item.createDate.substring(0, 10),
|
sublist: [item]
|
})
|
}
|
|
let historys = fromJS(list).toJS()
|
if (this.state.searchKey) {
|
historys = historys.filter(item => {
|
item.sublist = item.sublist.filter(cell => cell.interface.indexOf(this.state.searchKey) > -1)
|
|
return item.sublist.length > 0
|
})
|
}
|
|
this.setState({ list, historys })
|
}
|
|
use = (m) => {
|
MKEmitter.emit('useInterface', fromJS(m).toJS())
|
}
|
|
uselogon = () => {
|
let m = {
|
active: 'raw',
|
createDate: '',
|
formData: [],
|
headers: [],
|
interface: window.GLOB.baseurl + 'webapi/dologon',
|
method: 'POST',
|
params: [],
|
raw: "{\n \"UserName\":\"******\",\n \"Password\":\"******\",\n \"systemType\":\"local\",\n \"Type\":\"公钥\",\n \"privatekey\":\"私钥\",\n \"timestamp\":\"" + moment().format('YYYY-MM-DD HH:mm:ss') + "\",\n \"appkey\":\"" + window.GLOB.appkey + "\"\n}",
|
id: 'dologon'
|
}
|
|
if (window.GLOB.mainSystemApi) {
|
m.raw = "{\n \"UserName\":\"******\",\n \"Password\":\"******\",\n \"systemType\":\"local\",\n \"Type\":\"公钥\",\n \"privatekey\":\"私钥\",\n \"timestamp\":\"" + moment().format('YYYY-MM-DD HH:mm:ss') + "\",\n \"appkey\":\"" + window.GLOB.appkey + "\",\n \"rduri\":\"" + window.GLOB.mainSystemApi.replace(/\/webapi(.*)/, '/webapi/dologon') + "\"\n}"
|
}
|
MKEmitter.emit('useInterface', m)
|
}
|
|
usedostars = () => {
|
let m = {
|
active: 'raw',
|
createDate: '',
|
formData: [],
|
headers: [],
|
interface: window.GLOB.baseurl + 'webapi/dostars',
|
method: 'POST',
|
params: [],
|
raw: "{\n \"func\":\"******\",\n \"LoginUID\":\"@loginuid@\",\n \"UserID\":\"@userid@\",\n \"nonc\":\"" + Utils.getguid() + "\",\n \"t\":" + parseInt(new Date().getTime() / 1000) + "\n}",
|
id: 'dologon'
|
}
|
MKEmitter.emit('useInterface', m)
|
}
|
|
changeSearch = (value) => {
|
const { list } = this.state
|
|
let historys = fromJS(list).toJS()
|
if (value) {
|
historys = historys.filter(item => {
|
item.sublist = item.sublist.filter(cell => cell.interface.indexOf(value) > -1)
|
|
return item.sublist.length > 0
|
})
|
}
|
|
this.setState({searchKey: value, historys})
|
}
|
|
render () {
|
const { historys } = this.state
|
|
return (
|
<aside className="interface-side-menu">
|
<Search placeholder="Filter" onSearch={value => this.changeSearch(value)}/>
|
<div className="title">
|
History
|
<span onClick={this.clear}>Clear all</span>
|
</div>
|
<div className="list-view">
|
{historys.map((item, index) => (
|
<div className="list-line" key={index}>
|
<div className="line-title">{item.date}</div>
|
{item.sublist.map(m => (
|
<div className="line-item" key={m.id}>
|
<div className="method">POST</div>
|
<div className="inter">{m.interface}</div>
|
<div className="action">
|
<DeleteOutlined onClick={() => this.delete(m)} />
|
<RightOutlined onClick={() => this.use(m)} />
|
</div>
|
</div>
|
))}
|
</div>
|
))}
|
<div className="list-line" key="example">
|
<div className="line-title">示例</div>
|
<div className="line-item" key="dologon">
|
<div className="method">POST</div>
|
<div className="inter" style={{lineHeight: '40px'}}>dologon</div>
|
<div className="action" style={{paddingLeft: '40px'}}>
|
<RightOutlined onClick={this.uselogon} />
|
</div>
|
</div>
|
<div className="line-item" key="dostars">
|
<div className="method">POST</div>
|
<div className="inter" style={{lineHeight: '40px'}}>dostars</div>
|
<div className="action" style={{paddingLeft: '40px'}}>
|
<RightOutlined onClick={this.usedostars} />
|
</div>
|
</div>
|
</div>
|
</div>
|
</aside>
|
)
|
}
|
}
|
|
export default History
|
