update

Api/Ewide.Core/Service/Log/Dto/OpLogOutput.cs

@@ -5,6 +5,6 @@
     /// </summary>
     public class OpLogOutput : OpLogInput
     {
-
+        public int Id { get; set; }
     }
 }

Api/Ewide.Core/Service/Log/Dto/VisLogOutput.cs

@@ -5,6 +5,6 @@
     /// </summary>
     public class VisLogOutput : VisLogInput
     {
-
+        public int Id { get; set; }
     }
 }

web-react/src/components/query-table/index.jsx

@@ -223,7 +223,7 @@ export default class QueryTable extends Component {
             columns: (columns || []).filter(p => !p.hidden),
             bordered: true,
             size: 'middle',
-            rowKey: record => record.id || record,
+            rowKey: record => record.id || Math.random().toString(16).slice(2),
             ...this.props
         }
 

web-react/src/pages/system/log/oplog/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Alert, Button, Card, Descriptions, Form, Popconfirm, Input, message as Message, Select } from 'antd'
+import { Alert, Button, Card, Descriptions, Form, Popconfirm, Input, message as Message, Select, DatePicker } from 'antd'
 import { Auth, Container, QueryTable } from 'components'
 import { api } from 'common/api'
 import { toCamelCase } from 'util/format'
@@ -7,6 +7,8 @@ import { isEqual } from 'lodash'
 import getDicData from 'util/dic'
 import moment from 'moment'
 
+const { RangePicker } = DatePicker;
+
 const apiAction = {
     page: api.sysOpLogPage,
     delete: api.sysOpLogDelete
@@ -95,11 +97,11 @@ export default class index extends Component {
      * @returns 
      */
     loadData = async (params, query) => {
-        // if (query.dates && query.dates.length) {
+        if (query.dates && query.dates.length) {
-        //     query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+            query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
-        //     query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+            query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
-        //     delete query.dates;
+            delete query.dates;
-        // }
+        }
         const { data } = await apiAction.page({
             ...params,
             ...query,
@@ -182,7 +184,7 @@ export default class index extends Component {
                                         }
                                     </Select>
                                 </Form.Item>
-                                <Form.Item label="操作类型" name="success">
+                                <Form.Item label="是否成功" name="success">
                                     <Select placeholder="请选择是否成功" style={{ width: '170px' }}>
                                         <Select.Option
                                             key='true'
@@ -194,6 +196,18 @@ export default class index extends Component {
                                             否</Select.Option>
                                     </Select>
                                 </Form.Item>
+                                <Form.Item label="操作时间" name="dates">
+                                    <RangePicker
+                                        showTime={
+                                            {
+                                                hideDisabledOptions: true,
+                                                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
+                                            }
+                                        }
+                                        format="YYYY-MM-DD HH:mm:ss"
+                                    >
+                                    </RangePicker>
+                                </Form.Item>
                             </Auth>
                         }
                         operator={

web-react/src/pages/system/log/vislog/index.jsx

@@ -0,0 +1,235 @@
+import React, { Component } from 'react'
+import { Alert, Button, Card, Descriptions, Form, Popconfirm, Input, message as Message, Select, DatePicker } from 'antd'
+import { Auth, Container, QueryTable } from 'components'
+import { api } from 'common/api'
+import { toCamelCase } from 'util/format'
+import { isEqual } from 'lodash'
+import getDicData from 'util/dic'
+import moment from 'moment'
+
+const { RangePicker } = DatePicker;
+
+const apiAction = {
+    page: api.sysVisLogPage,
+    delete: api.sysVisLogDelete
+}
+export default class index extends Component {
+    state = {
+        codes: {
+            visType: []
+        }
+    }
+    // 表格实例
+    table = React.createRef()
+    // 表格字段
+    columns = [
+        {
+            title: '日志名称',
+            dataIndex: 'name',
+            sorter: true,
+        },
+        {
+            title: '访问类型',
+            dataIndex: 'visType',
+            render: text => (<>{this.bindCodeValue(text, 'vis_type')}</>),
+            sorter: true,
+        },
+        {
+            title: '是否成功',
+            dataIndex: 'success',
+            render: text => (<> {text ? '是' : '否'}</>),
+            sorter: true,
+        },
+        {
+            title: 'ip',
+            dataIndex: 'ip',
+            sorter: true,
+        },
+        {
+            title: '浏览器',
+            dataIndex: 'browser',
+            sorter: true,
+        },
+        {
+            title: '访问时间',
+            dataIndex: 'visTime',
+            sorter: true,
+        },
+        {
+            title: '访问人',
+            dataIndex: 'account',
+            sorter: true,
+        },
+    ]
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props 
+     * @param {*} state 
+     * @returns 
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        this.table.current.onLoading()
+        getDicData('vis_type').then(res => {
+            this.setState({
+                codes: res
+            }, () => {
+                this.table.current.onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params 
+     * @param {*} query 
+     * @returns 
+     */
+    loadData = async (params, query) => {
+        if (query.dates && query.dates.length) {
+            query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+            query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+            delete query.dates;
+        }
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+    /**
+         * 绑定字典数据
+         * @param {*} code 
+         * @param {*} name 
+         * @returns 
+         */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find((p) => +p.code === code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action 
+     * @param {*} successMessage 
+     */
+    async onAction(action, successMessage) {
+        this.table.current.onLoading()
+        try {
+            await action
+            Message.success(successMessage)
+            this.table.current.onReloadData()
+        } catch {
+            this.table.current.onLoaded()
+        }
+    }
+
+    onVisLogClear() {
+        this.onAction(
+            apiAction.delete(),
+            '清空成功'
+        )
+    }
+
+    render() {
+        return (
+            <Container mode="fluid">
+                <br />
+                <Alert closable type="error" message="页面刷新的时候也会有保存登录日志，但是没有ip显示" />
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={
+                            <Auth auth="sysVisLog:page">
+                                <Form.Item label="日志名称" name="name">
+                                    <Input autoComplete="off" placeholder="请输入日志名称" />
+                                </Form.Item>
+                                <Form.Item label="访问类型" name="visType">
+                                    <Select placeholder="请选择访问类型"
+                                        allow-clear
+                                        style={{ width: '170px' }}
+                                    >
+                                        {
+                                            this.state.codes.visType.map(item => {
+                                                return <Select.Option
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Select.Option>
+                                            })
+                                        }
+                                    </Select>
+                                </Form.Item>
+                                <Form.Item label="是否成功" name="success">
+                                    <Select placeholder="请选择是否成功" style={{ width: '170px' }}>
+                                        <Select.Option
+                                            key='true'
+                                        >
+                                            是</Select.Option>
+                                        <Select.Option
+                                            key='false'
+                                        >
+                                            否</Select.Option>
+                                    </Select>
+                                </Form.Item>
+                                <Form.Item label="访问时间" name="dates">
+                                    <RangePicker
+                                        showTime={
+                                            {
+                                                hideDisabledOptions: true,
+                                                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
+                                            }
+                                        }
+                                        format="YYYY-MM-DD HH:mm:ss"
+                                    >
+                                    </RangePicker>
+                                </Form.Item>
+                            </Auth>
+                        }
+                        operator={
+                            <Auth auth="sysOpLog:delete">
+                                <Popconfirm
+                                    placement="bottomLeft"
+                                    title="是否确认清空日志"
+                                    onConfirm={() => this.onVisLogClear()}
+                                >
+                                    <Button>清空日志</Button>
+                                </Popconfirm>
+                            </Auth>
+                        }
+                        expandable={{
+                            expandedRowRender: record =>
+                                <Descriptions bordered size="small">
+                                    <Descriptions.Item span="3" label="具体消息">
+                                        {record.message}
+                                    </Descriptions.Item>
+                                </Descriptions>
+                        }}
+                    />
+                </Card>
+            </Container>
+        )
+    }
+}