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/tokentool.vue | 403 ++++++++++++++++++++++++++++----------------------------
1 files changed, 202 insertions(+), 201 deletions(-)
diff --git a/src/views/maintenance/tokentool.vue b/src/views/maintenance/tokentool.vue
index 2ee3dc3..adaf849 100644
--- a/src/views/maintenance/tokentool.vue
+++ b/src/views/maintenance/tokentool.vue
@@ -1,86 +1,91 @@
<template>
<div class="tokentool_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.tokentool')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
- <el-form
- ref="formData"
- :model="ruleForm"
- :inline="true"
- >
- <el-form-item
- :label="$t('operatManage.tokentoolObj.tokenQuery')"
- prop="region"
- >
- <el-input
- style="width: 200px"
- v-model="ruleForm.name"
- :placeholder="$t('common.pleaseInput')"
- />
- </el-form-item>
+ <div class="inquire subpage_Div" ref="container">
+ <el-form ref="formData" :model="ruleForm" :inline="true">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
+ :label="$t('operatManage.tokentoolObj.tokenQuery')"
+ prop="region"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="ruleForm.name"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ </el-form-item>
- <el-form-item :label="$t('operatManage.tokentoolObj.tokenStatus')">
- <el-select
- style="width:200px"
- :popper-append-to-body="false"
- v-model="ruleForm.value"
- :placeholder="$t('common.choose')"
- >
- <el-option
- value="0"
- :label="$t('operatManage.tokentoolObj.temporary')"
- ></el-option>
- <el-option
- value="1"
- :label="$t('operatManage.tokentoolObj.fixed')"
- ></el-option>
- </el-select>
- </el-form-item>
-
- <!-- 鏌ヨ 娓呯┖ -->
- <el-form-item style="float:right">
- <el-button
- v-if="menuStatus.insert"
- @click="InsertFormdialog = true"
- icon="el-icon-edit"
- type="success"
- size="small"
- >{{ $t('common.append') }}</el-button>
- <el-button
- v-if="menuStatus.delete"
- @click="delTokenData"
- icon="el-icon-delete"
- type="danger"
- size="small"
- >{{ $t('common.delete') }}</el-button>
- <el-button
- icon="el-icon-search"
- size="small"
- type="primary"
- @click="onSubmit"
- >{{ $t('common.iquery') }}</el-button>
- <el-button
- icon="el-icon-delete"
- type="info"
- size="small"
- @click="onEmpty('formData1')"
- >{{ $t('common.empty') }}</el-button>
- </el-form-item>
+ <el-form-item :label="$t('operatManage.tokentoolObj.tokenStatus')">
+ <el-select
+ style="width: 200px"
+ :popper-append-to-body="false"
+ v-model="ruleForm.value"
+ :placeholder="$t('common.choose')"
+ >
+ <el-option
+ value="0"
+ :label="$t('operatManage.tokentoolObj.temporary')"
+ ></el-option>
+ <el-option
+ value="1"
+ :label="$t('operatManage.tokentoolObj.fixed')"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </div>
+ <div>
+ <!-- 鏌ヨ 娓呯┖ -->
+ <el-form-item>
+ <el-button
+ v-if="menuStatus.insert"
+ @click="InsertFormdialog = true"
+ icon="el-icon-edit"
+ type="success"
+ size="small"
+ >{{ $t("common.append") }}</el-button
+ >
+ <el-button
+ v-if="menuStatus.delete"
+ @click="delTokenData"
+ icon="el-icon-delete"
+ type="danger"
+ size="small"
+ >{{ $t("common.delete") }}</el-button
+ >
+ <el-button
+ icon="el-icon-search"
+ size="small"
+ type="primary"
+ @click="onSubmit"
+ >{{ $t("common.iquery") }}</el-button
+ >
+ <el-button
+ icon="el-icon-delete"
+ type="info"
+ size="small"
+ @click="onEmpty('formData1')"
+ >{{ $t("common.empty") }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
</el-form>
</div>
- <div style="height: 73%">
- <el-table
- ref="filterTable"
- :data="tableData"
- style="width: 100%"
- height="94%">
- <el-table-column
- type="selection"
- width="55"
- />
+ <div class="table_box" :style="styleVar">
+ <el-table
+ ref="filterTable"
+ :data="tableData"
+ style="width: 100%"
+ height="calc(100% - 57px)"
+ >
+ <el-table-column type="selection" width="55" />
<el-table-column
width="70"
align="center"
@@ -147,17 +152,11 @@
align="center"
>
<template slot-scope="scope">
- <el-button
- type="danger"
- size="small"
- >{{
- $t('operatManage.tokentoolObj.invalid')
+ <el-button type="danger" size="small">{{
+ $t("operatManage.tokentoolObj.invalid")
}}</el-button>
- <el-button
- type="warning"
- size="small"
- >{{
- $t('operatManage.tokentoolObj.renewal')
+ <el-button type="warning" size="small">{{
+ $t("operatManage.tokentoolObj.renewal")
}}</el-button>
<el-button
v-if="menuStatus.update"
@@ -165,11 +164,12 @@
type="warning"
plain
size="small"
- >{{ $t('common.update') }}</el-button>
+ >{{ $t("common.update") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- <div style="margin-top:10px">
+ <div style="margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -189,10 +189,7 @@
style="overflow: hidden"
:visible.sync="InsertFormdialog"
>
- <el-form
- ref="formData1"
- :model="insertform"
- >
+ <el-form ref="formData1" :model="insertform">
<el-form-item
:label="$t('operatManage.tokentoolObj.token')"
:label-width="formLabelWidth"
@@ -216,11 +213,10 @@
:label-width="formLabelWidth"
>
<el-select
- :popper-append-to-body="false"
- style="width:94.2%"
+ :popper-append-to-body="false"
+ style="width: 94.2%"
v-model="insertform.type"
:placeholder="$t('common.choose')"
-
>
<el-option
value="0"
@@ -243,21 +239,13 @@
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="insertFromDataClose"
- >{{
- $t('common.close')
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" @click="insertFromDataClose">{{
+ $t("common.close")
}}</el-button>
- <el-button
- size="small"
- type="primary"
- @click="insertFromData"
- >{{ $t('common.confirm') }}</el-button>
+ <el-button size="small" type="primary" @click="insertFromData">{{
+ $t("common.confirm")
+ }}</el-button>
</div>
</el-dialog>
<!-- 淇敼寮圭獥 -->
@@ -266,10 +254,7 @@
style="overflow: hidden"
:visible.sync="EditFormdialog"
>
- <el-form
- ref="formData1"
- :model="insertform"
- >
+ <el-form ref="formData1" :model="insertform">
<el-form-item
:label="$t('operatManage.tokentoolObj.token')"
:label-width="formLabelWidth"
@@ -294,7 +279,7 @@
>
<el-select
:popper-append-to-body="false"
- style="width:94.2%"
+ style="width: 94.2%"
v-model="upform.edit"
@change="changeGame"
:placeholder="$t('common.choose')"
@@ -320,35 +305,27 @@
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="editFromDataClose"
- >{{
- $t('common.close')
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" @click="editFromDataClose">{{
+ $t("common.close")
}}</el-button>
- <el-button
- type="primary"
- size="small"
- @click="editFromData"
- >{{ $t('common.confirm') }}</el-button>
+ <el-button type="primary" size="small" @click="editFromData">{{
+ $t("common.confirm")
+ }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
-import moment from 'moment';
-import MyBread from '../../components/MyBread.vue';
+import moment from "moment";
+import MyBread from "../../components/MyBread.vue";
import {
select_Token_ByPageAndCount,
insertToken,
updateToken,
deleteTokens,
-} from '../../api/api.js';
+} from "../../api/api.js";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -357,7 +334,7 @@
data() {
return {
- formLabelWidth: '130px',
+ formLabelWidth: "130px",
InsertFormdialog: false,
EditFormdialog: false,
upform: {},
@@ -377,6 +354,11 @@
insert: false,
update: false,
},
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
};
},
created() {
@@ -389,16 +371,37 @@
}
this.getRoleTabelData();
},
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
+ },
+ 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)`;
+ });
+ },
showPermsMenu(res) {
switch (res.tag) {
- case '/delete':
+ case "/delete":
this.menuStatus.delete = true;
break;
- case '/insert':
+ case "/insert":
this.menuStatus.insert = true;
break;
- case '/update':
+ case "/update":
this.menuStatus.update = true;
break;
}
@@ -408,31 +411,33 @@
for (var i in this.multipleSelection) {
std.push(this.multipleSelection[i].id);
}
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヤ护鐗�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await deleteTokens({ ids: std.toString() });
- if (data.code == 200) {
- this.InsertFormdialog = false;
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヤ护鐗�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await deleteTokens({ ids: std.toString() });
+ if (data.code == 200) {
+ this.InsertFormdialog = false;
+ this.$message({
+ message: "鍒犻櫎鎴愬姛锛�",
+ type: "success",
+ });
+ this.getRoleTabelData();
+ } else {
+ this.$message({
+ message: "鍒犻櫎澶辫触锛�",
+ type: "warning",
+ });
+ }
+ })
+ .catch(() => {
this.$message({
- message: '鍒犻櫎鎴愬姛锛�',
- type: 'success',
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
});
- this.getRoleTabelData();
- } else {
- this.$message({
- message: '鍒犻櫎澶辫触锛�',
- type: 'warning',
- });
- }
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
});
- });
// const data = await deleteTokens({ ids: std.toString() });
// if (data.code == 200) {
// this.$message({
@@ -462,14 +467,14 @@
this.EditFormdialog = false;
this.upform = {};
this.$message({
- message: '淇敼鎴愬姛锛�',
- type: 'success',
+ message: "淇敼鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '淇敼澶辫触锛�',
- type: 'warning',
+ message: "淇敼澶辫触锛�",
+ type: "warning",
});
}
},
@@ -500,14 +505,14 @@
this.InsertFormdialog = false;
this.insertform = {};
this.$message({
- message: '娣诲姞鎴愬姛锛�',
- type: 'success',
+ message: "娣诲姞鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '娣诲姞澶辫触锛�',
- type: 'warning',
+ message: "娣诲姞澶辫触锛�",
+ type: "warning",
});
}
},
@@ -518,23 +523,23 @@
var month =
date.getMonth() + 1 > 9
? date.getMonth() + 1
- : '0' + (date.getMonth() + 1);
- var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
+ : "0" + (date.getMonth() + 1);
+ var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
// var todayDate = year + '-' + month + '-' + day
- var hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
+ var hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
var min =
- date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
+ date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
var sec =
- date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
+ date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();
var todayDate =
- year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
+ year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
return todayDate;
},
getNowDate(res) {
var date = new Date();
var min = date.getMinutes(); //2. 鑾峰彇褰撳墠鍒嗛挓
date.setMinutes(min + parseInt(res));
- var sign2 = ':';
+ var sign2 = ":";
var year = date.getFullYear(); // 骞�
var month = date.getMonth() + 1; // 鏈�
var day = date.getDate(); // 鏃�
@@ -543,38 +548,38 @@
var seconds = date.getSeconds(); //绉�
var weekArr = [
- '鏄熸湡涓�',
- '鏄熸湡浜�',
- '鏄熸湡涓�',
- '鏄熸湡鍥�',
- '鏄熸湡浜�',
- '鏄熸湡鍏�',
- '鏄熸湡澶�',
+ "鏄熸湡涓�",
+ "鏄熸湡浜�",
+ "鏄熸湡涓�",
+ "鏄熸湡鍥�",
+ "鏄熸湡浜�",
+ "鏄熸湡鍏�",
+ "鏄熸湡澶�",
];
var week = weekArr[date.getDay()];
// 缁欎竴浣嶆暟鐨勬暟鎹墠闈㈠姞 鈥�0鈥�
if (month >= 1 && month <= 9) {
- month = '0' + month;
+ month = "0" + month;
}
if (day >= 0 && day <= 9) {
- day = '0' + day;
+ day = "0" + day;
}
if (hour >= 0 && hour <= 9) {
- hour = '0' + hour;
+ hour = "0" + hour;
}
if (minutes >= 0 && minutes <= 9) {
- minutes = '0' + minutes;
+ minutes = "0" + minutes;
}
if (seconds >= 0 && seconds <= 9) {
- seconds = '0' + seconds;
+ seconds = "0" + seconds;
}
return (
year +
- '-' +
+ "-" +
month +
- '-' +
+ "-" +
day +
- ' ' +
+ " " +
hour +
sign2 +
minutes +
@@ -583,7 +588,7 @@
);
},
async getRoleTabelData() {
- if (this.listData.tab == '') {
+ if (this.listData.tab == "") {
delete this.listData.tab;
}
this.listData.name = this.ruleForm.name;
@@ -592,9 +597,9 @@
this.listData.type = parseInt(this.ruleForm.value);
}
const data = await select_Token_ByPageAndCount(this.listData);
- console.log('Token鑾峰彇', data);
+ console.log("Token鑾峰彇", data);
if (data.code != 200) {
- this.$message.error('鍒楄〃璋冪敤澶辫触');
+ this.$message.error("鍒楄〃璋冪敤澶辫触");
}
this.tableData = data.result;
this.count = data.count;
@@ -626,7 +631,7 @@
if (date === undefined || date === null) {
return;
}
- return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
+ return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
},
},
};
@@ -639,28 +644,24 @@
height: 98%;
width: 98%;
padding: 1%;
-overflow: auto;
+
.el-input {
- width: 745px;
+ width: 300px;
}
.inquire {
- padding: 10px;
+ padding: 8px;
margin-top: 20px;
border-radius: 5px;
- margin-bottom: 10px;
-
+ margin-bottom: 20px;
+ .el-form-item {
+ margin: 5px;
+ }
.el-select {
width: 200px;
}
- }
- .table_box {
- padding: 10px;
-
- border-radius: 5px;
- margin-bottom: 10px;
}
}
</style>
--
Gitblit v1.9.3