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/operationLog.vue | 258 ++++++++++++++++++++++++++++-----------------------
1 files changed, 142 insertions(+), 116 deletions(-)
diff --git a/src/views/maintenance/operationLog.vue b/src/views/maintenance/operationLog.vue
index 04f9f75..d6b86c7 100644
--- a/src/views/maintenance/operationLog.vue
+++ b/src/views/maintenance/operationLog.vue
@@ -1,117 +1,121 @@
<template>
<div class="operationLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.operationLog')}`,
- ]"></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"
- clearable
- v-model="sizeForm.type"
- :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
- >
- <el-option
- :label="$t('operatManage.operationLogObj.check')"
- value="1"
- />
- <el-option
- :label="$t('operatManage.operationLogObj.added')"
- value="2"
- />
- <el-option
- :label="$t('operatManage.operationLogObj.modification')"
- value="3"
- />
- <el-option
- :label="$t('operatManage.operationLogObj.delete')"
- value="4"
- />
- <el-option
- :label="$t('operatManage.operationLogObj.uploading')"
- value="5"
- />
- <el-option
- :label="$t('operatManage.operationLogObj.download')"
- value="6"
- />
- <el-option
- :label="$t('operatManage.operationLogObj.otherOne')"
- value="0"
- />
- </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"
+ clearable
+ v-model="sizeForm.type"
+ :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
+ >
+ <el-option
+ :label="$t('operatManage.operationLogObj.check')"
+ value="1"
+ />
+ <el-option
+ :label="$t('operatManage.operationLogObj.added')"
+ value="2"
+ />
+ <el-option
+ :label="$t('operatManage.operationLogObj.modification')"
+ value="3"
+ />
+ <el-option
+ :label="$t('operatManage.operationLogObj.delete')"
+ value="4"
+ />
+ <el-option
+ :label="$t('operatManage.operationLogObj.uploading')"
+ value="5"
+ />
+ <el-option
+ :label="$t('operatManage.operationLogObj.download')"
+ value="6"
+ />
+ <el-option
+ :label="$t('operatManage.operationLogObj.otherOne')"
+ value="0"
+ />
+ </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">
+ <div class="table_box subpage_Div" :style="styleVar">
<el-table
:data="tableData"
style="width: 100%"
- height="79%"
+ height="calc(100% - 57px)"
>
<!-- <el-table-column type="selection" width="55" /> -->
<el-table-column
@@ -170,10 +174,7 @@
</template>
</el-table-column> -->
</el-table>
- <div
- style="margin-top: 40px"
- class="pagination_box"
- >
+ <div class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -213,9 +214,27 @@
pageSize: 10,
},
count: 0,
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
};
},
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)`;
+ });
+ },
//鏍煎紡鍖栨椂闂�
add0(m) {
return m < 10 ? "0" + m : m;
@@ -303,6 +322,14 @@
this.count = data.count;
},
},
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
+ },
created() {
this.getList();
},
@@ -316,18 +343,17 @@
padding: 1%;
.inquire {
- padding: 10px;
+ padding: 8px;
margin-top: 20px;
+
border-radius: 5px;
-
+
margin-bottom: 20px;
+ .el-form-item {
+ margin: 5px;
+ }
}
- .table_box {
- padding: 10px;
- border-radius: 5px;
- overflow: auto;
- height: 60%;
- }
+
.text-center {
text-align: center;
}
--
Gitblit v1.9.3