app-base-web
Version:
web development common base package.
355 lines (346 loc) • 10.2 kB
JavaScript
import React from 'react'
import { Table, Form, Row, Col, Button, Input, message} from 'antd'
import UtilModal from '../../../library/util-modal';
import api from '../../../library/util-axios';
import UtilDate from '../../../library/util-date'
// 日志管理-数据日志
const title = "数据日志"
const url = "SysLog/"
export default class SysLogList extends React.Component {
constructor(props) {
super(props)
this.state = {
params: {},
data: [],
pagination: {},
loading: false,
selected: [],//Table checked
//显藏控制
showView: false,
showEdit: false,
//values
values: {},
}
this.columns = [{
title: "序号",
width: 30,
fixed: "left",
render: (text, record, index) => {
return index + 1
}
}, {
title: "应用",
dataIndex: "app",
width: 200,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
// {
// title: "记录ID",
// dataIndex: "recordId",
// width: 100,
// "render": "edit",
// render: (text, record) => {
// return <a onClick={() => this.onView(record)}>{text}</a>
// }
// },
// {
// title: "功能ID",
// dataIndex: "functionId",
// width: 100,
// "render": "edit",
// render: (text, record) => {
// return <a onClick={() => this.onView(record)}>{text}</a>
// }
// },
// {
// title: "功能名称",
// dataIndex: "functionName",
// width: 100,
// render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
// },
{
title: "操作",
dataIndex: "operation",
width: 100,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "用户ID",
dataIndex: "userId",
width: 100
},
{
title: "用户名称",
dataIndex: "userName",
width: 100
},
// {
// title: "用户令牌",
// dataIndex: "token",
// width: 100
// },
// {
// title: "设备",
// dataIndex: "device",
// width: 100
// },
// {
// title: "浏览器信息",
// dataIndex: "userAgent",
// width: 100
// },
// {
// title: "IP地址",
// dataIndex: "ip",
// width: 100
// },
{
title: "发生时间",
dataIndex: "createTime",
width: 150,
render: (text, record) => {
return UtilDate.getDateTime(text)
}
},
// {
// title: "结束时间",
// dataIndex: "endTime",
// width: 100
// },
{
title: "访问链接",
dataIndex: "url",
width: 300
}]
}
componentDidMount() {
this.onLoad(this.state.params)
}
/*** Table ***/
async onLoad(params) {
this.setState({loading: true})
let rs = await api.get(url + "getList", params)
let pagination = {
pageSizeOptions: ["20", "100", "200", "500", "1000"],
pageSize: params.pageSize || 20,
defaultPageSize: params.pageSize || 20,
showSizeChanger: true,
showQuickJumper: true,
total: rs.total,
showTotal: (total) => {
return `总记录 ${total} `
}
}
this.setState({
loading: false,
showEdit: false,
data: rs.data,
params,
pagination,
})
}
onChange = (pagination, filters, sorter) => {
let params = this.state.params
params.pageSize = pagination.pageSize
params.pageIndex = pagination.current
this.onLoad(params)
}
onSearch = (value) => {
let params = this.state.params
params.name = value
this.onLoad(params)
}
onAdd = () => {
let values = {}
Object.keys(this.state.values).forEach(key => values[key] = undefined)
this.setState({
showView: false,
showEdit: true,
values
})
}
onView = (values) => {
this.setState({
showView: true,
loading: false,
values
})
}
onEdit = (values) => {
let me = this
api.get(url + "getModel?id=" + values.id, {}, function (rs) {
me.setState({
showEdit: true,
showView: false,
values: rs.data
})
})
}
onSave = (values) => {
this.onLoad(this.state.params)
}
onDel = () => {
let me = this
if (me.state.selected.length == 0) {
message.error('请选择记录！')
return
}
UtilModal.confirm({
content: '确定删除？',
onOk: function () {
api.delete(url + "delete?id=" + me.state.selected).then(function (rs) {
if (rs.success) {
message.info(rs.msg)
me.onLoad(me.state.params || {})
} else {
message.error(rs.msg)
}
})
}
})
}
render() {
var tableCfg = {
scroll: {y: this.props.height - 210},
size: "middle",
rowKey: "id",
columns: this.columns,
rowSelection: {
selectedRowKeys: this.state.selected,
onChange: (selectedRowKeys, selectedRows) => {
this.setState({
selected: selectedRowKeys
})
}
},
rowClassName: (record) => {
return record.id === this.state.selectedRowId ? 'row-selected' : ''
},
onRow: (record) => {
return {
onClick: event => {
this.setState({selectedRowId: record.id})
}
}
},
dataSource: this.state.data,
pagination: this.state.pagination,
loading: this.state.loading,
onChange: this.onChange
}
return <div className="app-admin">
<div className={this.state.showView || this.state.showEdit ? "hide" : ""}>
<Row>
<Col className="main-title"><i className="iconfont icon-title"></i>{title}</Col>
</Row>
<Row className="main-toolbar">
<Col className="text-left" xs={16}>
<Button className="btn-add" onClick={this.onSearch.bind(this)}><i
className="iconfont icon-reload"></i>刷新</Button>
{/* <Button className="btn-del" onClick={this.onDel}><i className="iconfont icon-del"></i>删除</Button> */}
</Col>
<Col className="text-right" xs={8}>
<Input.Search placeholder="请输入名称" onSearch={value => this.onSearch(value)} enterButton/>
</Col>
</Row>
<Table {...tableCfg} />
</div>
{this.state.showView ? <FormView
height={this.props.height - 140}
values={this.state.values}
onEdit={this.onEdit}
onReturn={() => {
this.setState({showView: false})
}}
/> : ""}
{this.state.showEdit ? <FormEdit
height={this.props.height - 140}
values={this.state.values}
onSave={this.onSave}
onCancel={() => {
this.setState({showEdit: false})
}}
onEditReturn={() => {
this.setState({showEdit: false, showView: true})
}}
/> : ""}
</div>
}
}
class FormView extends React.Component {
constructor(props) {
super(props)
this.state = {
...props.values
}
}
componentDidMount() {
let me = this
api.get(url + "getModel?id=" + this.state.id, {}, function (rs) {
me.setState({
...rs.data
})
})
}
render() {
return (
<Form className="form-view">
<div className="form-title">
<i>{title} - 详情</i>
{/* <span><Button className="btn-edit" onClick={(e) => { this.props.onEdit(this.state) }}><i className="iconfont icon-edit"></i>编辑</Button></span> */}
</div>
<div className="form-content" style={{height: this.props.height}}>
<Row>
<Col xs={24}><label>应用</label><span>{this.state.app}</span></Col>
</Row>
{/* <Row>
<Col xs={24}><label>功能ID</label><span>{this.state.functionId}</span></Col>
</Row>
<Row>
<Col xs={24}><label>功能名称</label><span>{this.state.functionName}</span></Col>
</Row> */}
<Row>
<Col xs={24}><label>操作</label><span>{this.state.operation}</span></Col>
</Row>
<Row>
<Col xs={24}><label>记录ID</label><span>{this.state.recordId}</span></Col>
</Row>
<Row>
<Col xs={24}><label>用户ID</label><span>{this.state.userId}</span></Col>
</Row>
<Row>
<Col xs={24}><label>用户名称</label><span>{this.state.userName}</span></Col>
</Row>
<Row>
<Col xs={24}><label>用户令牌</label><span>{this.state.token}</span></Col>
</Row>
<Row>
<Col xs={24}><label>设备</label><span>{this.state.device}</span></Col>
</Row>
<Row>
<Col xs={24}><label>浏览器信息</label><span>{this.state.userAgent}</span></Col>
</Row>
<Row>
<Col xs={24}><label>IP地址</label><span>{this.state.ip}</span></Col>
</Row>
<Row>
<Col xs={24}><label>发生时间</label><span>{UtilDate.getDateTime(this.state.createTime)}</span></Col>
</Row>
<Row>
<Col xs={24}><label>访问链接</label><span>{this.state.url}</span></Col>
</Row>
{/* <Row>
<Col xs={24}><label>基本参数</label><span>{this.state.baseParams}</span></Col>
</Row> */}
<Row>
<Col xs={24}><label>参数</label><span>{this.state.mapParams}</span></Col>
</Row>
</div>
<div className="form-toolbar">
<Button className="btn-return" onClick={this.props.onReturn}><i
className="iconfont icon-return"></i>返回</Button>
</div>
</Form>
)
}
}