From 98a2b24c89e81a5aacdcbd6b739fef422adf17dd Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 29 三月 2024 09:57:55 +0800
Subject: [PATCH] 代码更新
---
src/views/maintenance/eventlogManage.vue | 173 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 109 insertions(+), 64 deletions(-)
diff --git a/src/views/maintenance/eventlogManage.vue b/src/views/maintenance/eventlogManage.vue
index cbb6347..44fae20 100644
--- a/src/views/maintenance/eventlogManage.vue
+++ b/src/views/maintenance/eventlogManage.vue
@@ -1,32 +1,40 @@
<template>
<div class="logLog_box">
- <My-bread
- :list="[
+ <My-bread :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.ResourceLog')}`,
- ]"
- ></My-bread>
+ ]"></My-bread>
<el-divider />
- <div class="inquire">
- <el-form ref="formData2" :model="form" :inline="true">
- <el-form-item
- :label="$t('operatManage.operationLogObj.username')"
+ <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
- v-model="form.uname"
+ style="width:200px"
+ size="small"
+ v-model="sizeForm.uname"
:placeholder="$t('operatManage.operationLogObj.pleaseInput')"
/>
</el-form-item>
-
<el-form-item
- :label="$t('operatManage.operationLogObj.operationType')"
prop="type"
+ :label="$t('operatManage.operationLogObj.operationType')"
>
<el-select
+ style="width:200px"
+ size="small"
+ :popper-append-to-body="false"
clearable
- v-model="form.type"
- :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
+ v-model="sizeForm.type"
+ :placeholder="$t('operatManage.operationLogObj.operationTypeHolder')"
>
<el-option
:label="$t('operatManage.operationLogObj.check')"
@@ -52,7 +60,6 @@
:label="$t('operatManage.operationLogObj.download')"
value="6"
/>
-
</el-select>
</el-form-item>
<el-form-item
@@ -60,46 +67,66 @@
:label="$t('operatManage.operationLogObj.startTime')"
>
<el-date-picker
+ size="small"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
- v-model="form.start"
- style="width: 100%"
+ v-model="sizeForm.start"
+ style="width:200px"
type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- >
- </el-date-picker>
+ :placeholder="$t('operatManage.operationLogObj.startTimeHolder')"
+ ></el-date-picker>
</el-form-item>
<el-form-item
prop="end"
:label="$t('operatManage.operationLogObj.endTime')"
>
<el-date-picker
+ size="small"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
- v-model="form.end"
- style="width: 100%"
+ v-model="sizeForm.end"
+ style="width:200px"
type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ :placeholder="$t('operatManage.operationLogObj.endTimeHolder')"
>
</el-date-picker>
</el-form-item>
- <el-form-item>
- <el-button @click="onSubmit" icon="el-icon-search">{{
- $t("operatManage.operationLogObj.inquire")
- }}</el-button>
- <el-button @click="onEmpty('formData2')" icon="el-icon-delete">{{
- $t("operatManage.operationLogObj.empty")
- }}</el-button>
+ </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">
- <el-table :data="tableData" stripe style="width: 100%" height="85%">
+ <div class="dividing-line"></div>
+ <div class="table_box subpage_Div" :style="styleVar">
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ border
+ height="calc(100% - 45px)"
+ >
<el-table-column
align="center"
type="index"
:label="$t('operatManage.ELM.index')"
- width="70px"
+ height="calc(100% - 57px)"
/>
<el-table-column
align="center"
@@ -130,12 +157,12 @@
:label="$t('operatManage.ELM.operationType')"
/>
</el-table>
- <div style="margin-top: 40px" class="pagination_box">
+ <div class="pagination_box" style="margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listData.pageIndex"
- :page-sizes="[10, 20, 30, 40]"
+ :page-sizes="[10, 20, 50, 100]"
:page-size="listData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="count"
@@ -158,16 +185,39 @@
data() {
return {
currentPage: 1,
- form: {},
+ sizeForm: {
+ uname: "",
+ start: null,
+ end: null,
+ type: [],
+ },
tableData: [],
listData: {
pageIndex: 1,
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 + 30}px)`;
+ });
+ },
//鏍煎紡鍖栨椂闂�
add0(m) {
return m < 10 ? "0" + m : m;
@@ -237,28 +287,31 @@
this.getList();
},
onSubmit() {
- this.listData = { ...this.listData, ...this.form };
+ this.listData = { ...this.listData, ...this.sizeForm };
// console.log(this.listData)
this.getList();
},
onEmpty(formData1) {
this.$refs[formData1].resetFields(); //閲嶇疆琛ㄥ崟鏁版嵁
- // this.form = {}
- this.form.start = null;
- this.form.end = null;
},
- resetForm(formName) {
- this.$refs[formName].resetFields();
- },
+
async getList() {
const data = await resOpSelectByPageAndCount(this.listData);
- console.log(data);
+
if (data.code != 200) {
return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
this.tableData = data.result;
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();
@@ -268,35 +321,27 @@
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.logLog_box {
- background: rgb(240, 242, 245);
- border-radius: 10px;
- height: 100%;
- padding: 10px;
- box-sizing: border-box;
+ height: 98%;
+ width: 98%;
+ padding: 0.5% 1%;
+
.el-input {
width: 300px;
}
.inquire {
- height: 110px;
- overflow: auto;
- padding: 10px;
- margin-top: 20px;
- background: #fff;
+
+ padding: 0 8px;
+ //margin-top: 20px;
+
border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- margin-bottom: 20px;
+
+ //margin-bottom: 20px;
.el-form-item {
- margin: 7px;
+ margin: 5px;
}
+
}
- .table_box {
- overflow: auto;
- height: 70%;
- padding: 10px;
- background: #fff;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- }
+
.text-center {
text-align: center;
}
--
Gitblit v1.9.3