init

src/views/system/log.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="container">
+        <div class="search-area">
+            <Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
+                <FormItem prop="user" label="时间">
+                    <Input type="text" v-model="formInline.user" placeholder="" />
+                </FormItem>
+                <FormItem>
+                    <Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="table-container">
+            <Table border :columns="columns" stripe :height="tableHeight" :data="data">
+                <template #action="{ row, index }">
+                </template>
+            </Table>
+            <Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
+				@on-page-size-change="onChangePageSize"/>
+        </div>
+       </div>
+</template>
+
+<script>
+import { getLogList } from '@/api'
+
+export default {
+    name: 'charging_station',
+    data() {
+        return {
+            show_modal: false,
+            total: 100,
+            tableHeight: 500,
+            formInline: {
+                user: '',
+                password: '',
+            },
+            ruleInline: {},
+            columns: [
+                {
+                    title: 'ID',
+                    key: 'id',
+                },
+				{
+                    title: 'ip',
+                    key: 'ip',
+                },
+				{
+                    title: '类型',
+                    key: 'method',
+                },
+                {
+                    title: '参数',
+                    key: 'params',
+                },
+				{
+                    title: '地址',
+                    key: 'url',
+                },
+				{
+                    title: '时间',
+                    key: 'create_time',
+                },
+                {
+                    title: '操作',
+                    slot: 'action',
+                    width: 150,
+                    align: 'center',
+                },
+            ],
+            data: [],
+        }
+    },
+    mounted() {
+        this.getList()
+        this.calculateTableHeight()
+        window.addEventListener('resize', this.calculateTableHeight)
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.calculateTableHeight)
+    },
+    methods: {
+        calculateTableHeight() {
+            // 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
+            const searchHeight = document.querySelector('.search-area').offsetHeight
+            const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
+            const pageHeight = 32 // 分页组件大约高度
+            const margins = 40 // 上下边距总和
+            this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
+        },
+        async getList() {
+            await getLogList({ page: this.page, pageSize: this.pageSize }).then((res) => {
+                this.total = res.total
+                this.data = res.data
+                this.page = res.current_page
+            })
+        },
+        handleSubmit(name) {
+            this.$refs[name].validate((valid) => {
+                if (valid) {
+                    this.$Message.success('Success!')
+                } else {
+                    this.$Message.error('Fail!')
+                }
+            })
+        },
+        handleReset(name) {
+            this.$refs[name].resetFields()
+        },
+        handleSubmit2(name) {
+            this.$refs[name].validate((valid) => {
+                if (valid) {
+                    this.$Message.success('Success!')
+                } else {
+                    this.$Message.error('Fail!')
+                }
+            })
+        },
+        show(index) {
+            this.$Modal.info({
+                title: 'User Info',
+                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
+            })
+        },
+        remove(index) {
+            this.data.splice(index, 1)
+        },
+        ok() {
+            this.$Message.info('Clicked ok')
+        },
+        cancel() {
+            this.$Message.info('Clicked cancel')
+        },
+		onChangePage(e) {
+			if (this.page != e) {
+				this.page = e
+				this.getList()
+			}
+		},
+		onChangePageSize(e) {
+			if (this.pageSize != e) {
+				this.page = 1
+				this.pageSize = e
+				this.getList()
+			}
+		},
+    },
+}
+</script>
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.action-btn {
+    margin: 20px 0;
+    background-color: white;
+    padding: 20px;
+    border: 1px solid #F3F7FD;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    button {
+        margin-right: 20px;
+    }
+}
+
+.table-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.page {
+    margin-top: 10px;
+    text-align: right;
+}
+.search-area{
+    background-color: white;
+    padding-top: 20px;
+    border: 1px solid #F3F7FD;
+    border-radius: 15px;
+}
+</style>