From c40e3de17653a10a06ead765813783a5614a32ce Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 16 二月 2023 17:40:43 +0800
Subject: [PATCH] 调整运维管理部分页面格式
---
src/views/maintenance/logLog.vue | 237 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 119 insertions(+), 118 deletions(-)
diff --git a/src/views/maintenance/logLog.vue b/src/views/maintenance/logLog.vue
index 0a6cd00..560cfc8 100644
--- a/src/views/maintenance/logLog.vue
+++ b/src/views/maintenance/logLog.vue
@@ -1,124 +1,106 @@
<template>
<div class="logLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.logLog')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
-
- <el-form
- :inline="true"
- ref="sizeForm"
- :model="sizeForm"
- >
- <el-form-item
- prop="uname"
- :label="$t('operatManage.operationLogObj.username')"
- >
- <el-input
- style="width:200px"
- v-model="sizeForm.uname"
- :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
- />
- </el-form-item>
- <el-form-item
- prop="type"
- :label="$t('operatManage.operationLogObj.operationType')"
- >
- <el-select
- style="width:200px"
- :popper-append-to-body="false"
- v-model="sizeForm.type"
- :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
- >
- <el-option
- :label="$t('loglog.login')"
- value="1"
- />
- <el-option
- :label="$t('loglog.checkout')"
- value="2"
- />
- <el-option
- :label="$t('loglog.logout')"
- value="3"
- />
- </el-select>
- </el-form-item>
- <el-form-item
- prop="start"
- :label="$t('operatManage.operationLogObj.startTime')"
- >
- <el-date-picker
- format="yyyy-MM-dd HH:mm:ss"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="sizeForm.start"
- style="width:200px"
- type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- ></el-date-picker>
- </el-form-item>
- <el-form-item
- prop="end"
- :label="$t('operatManage.operationLogObj.endTime')"
- >
- <el-date-picker
- format="yyyy-MM-dd HH:mm:ss"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="sizeForm.end"
- style="width:200px"
- type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- >
- </el-date-picker>
- </el-form-item>
-
- <el-form-item style="float:right">
- <el-button
- @click="onSubmit"
- icon="el-icon-search"
- size="small"
- type="primary"
- >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
- <el-button
- @click="onEmpty('sizeForm')"
- icon="el-icon-delete"
- type="info"
- size="small"
- >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
- </el-form-item>
+ <div class="inquire subpage_Div" ref="container">
+ <el-form :inline="true" ref="sizeForm" :model="sizeForm">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
+ prop="uname"
+ :label="$t('operatManage.operationLogObj.username')"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="sizeForm.uname"
+ :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
+ />
+ </el-form-item>
+ <el-form-item
+ prop="type"
+ :label="$t('operatManage.operationLogObj.operationType')"
+ >
+ <el-select
+ style="width: 200px"
+ :popper-append-to-body="false"
+ v-model="sizeForm.type"
+ :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
+ >
+ <el-option :label="$t('loglog.login')" value="1" />
+ <el-option :label="$t('loglog.checkout')" value="2" />
+ <el-option :label="$t('loglog.logout')" value="3" />
+ </el-select>
+ </el-form-item>
+ <el-form-item
+ prop="start"
+ :label="$t('operatManage.operationLogObj.startTime')"
+ >
+ <el-date-picker
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="sizeForm.start"
+ style="width: 200px"
+ type="datetime"
+ :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ ></el-date-picker>
+ </el-form-item>
+ <el-form-item
+ prop="end"
+ :label="$t('operatManage.operationLogObj.endTime')"
+ >
+ <el-date-picker
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="sizeForm.end"
+ style="width: 200px"
+ type="datetime"
+ :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ >
+ </el-date-picker>
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
+ <el-button
+ @click="onSubmit"
+ icon="el-icon-search"
+ size="small"
+ type="primary"
+ >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
+ >
+ <el-button
+ @click="onEmpty('sizeForm')"
+ icon="el-icon-delete"
+ type="info"
+ size="small"
+ >{{ $t("operatManage.operationLogObj.empty") }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
</el-form>
</div>
<!-- 琛ㄦ牸鏄剧ず -->
- <div class="table_box subpage_Div">
- <el-table
- :data="tableData"
- style="width: 100%"
- height="80%"
- >
+ <div class="table_box subpage_Div" :style="styleVar">
+ <el-table :data="tableData" style="width: 100%" height="calc(100% - 57px)">
<el-table-column
width="150"
type="index"
:label="$t('loglog.serialnumber')"
/>
- <el-table-column
- prop="uname"
- :label="$t('loglog.username')"
- />
+ <el-table-column prop="uname" :label="$t('loglog.username')" />
<el-table-column
prop="appid"
:label="$t('loglog.applicationProgram')"
:formatter="formatAppid"
/>
- <el-table-column
- prop="ip"
- :label="$t('loglog.ipadress')"
- />
- <el-table-column
- prop="descr"
- :label="$t('loglog.describe')"
- />
+ <el-table-column prop="ip" :label="$t('loglog.ipadress')" />
+ <el-table-column prop="descr" :label="$t('loglog.describe')" />
<el-table-column
prop="optime"
:formatter="formatData"
@@ -136,10 +118,7 @@
/>
</el-table>
<!-- 鍒嗛〉 -->
- <div
- style="margin-top: 40px"
- class="pagination_box"
- >
+ <div style="margin-top: 25px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -179,9 +158,31 @@
pageSize: 10,
},
count: 0,
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
};
},
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
methods: {
+ onResize() {
+ this.timer && clearTimeout(this.timer);
+ this.timer = setTimeout(() => {
+ this.calHeight();
+ }, 500);
+ },
+ calHeight() {
+ this.$nextTick(() => {
+ const rect = this.$refs.container.getBoundingClientRect();
+ this.tableHeight = `${rect.height + 97}px`;
+ this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
+ });
+ },
//鏍煎紡鍖栧垪琛�
formatType(row, column) {
let data;
@@ -282,6 +283,10 @@
this.count = data.count;
},
},
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
+ },
created() {
var val = this.$store.state.currentPerms;
var permsEntity = this.$store.state.permsEntity;
@@ -303,22 +308,18 @@
padding: 1%;
.inquire {
- padding: 10px;
- margin-top: 10px;
+
+ padding: 8px;
+ margin-top: 20px;
border-radius: 5px;
- margin-bottom: 10px;
- /deep/.el-form-item {
- margin-bottom: 10px;
+ margin-bottom: 20px;
+ .el-form-item {
+ margin-bottom: 5px;
}
}
- .table_box {
- padding: 10px;
- border-radius: 5px;
- overflow: auto;
- height: 60%;
- }
+
.text-center {
text-align: center;
}
--
Gitblit v1.9.3