charge-pile-system/src/views/system/log.vue

<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>