From c40e3de17653a10a06ead765813783a5614a32ce Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 16 二月 2023 17:40:43 +0800
Subject: [PATCH] 调整运维管理部分页面格式
---
src/views/userManage/authorityManage.vue | 169 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 100 insertions(+), 69 deletions(-)
diff --git a/src/views/userManage/authorityManage.vue b/src/views/userManage/authorityManage.vue
index e3c53dd..8fd0776 100644
--- a/src/views/userManage/authorityManage.vue
+++ b/src/views/userManage/authorityManage.vue
@@ -5,17 +5,20 @@
`${$t('userManage.authorityManage')}`,
]"></My-bread>
<el-divider />
- <div class="power_quire subpage_Div">
+ <div class="power_quire subpage_Div" ref="container">
<el-form
ref="form"
:model="ruleForm"
- label-width="100px"
:inline="true"
>
- <el-form-item >
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item label="鍚嶇О">
<el-input v-model="ruleForm.name" style="width:200px"></el-input>
</el-form-item>
- <el-form-item style="float: right;">
+ </div>
+ <div>
+ <el-form-item>
<el-button
v-if="menuStatus.insert"
@click="InsertFormdialog = true"
@@ -41,14 +44,19 @@
type="info" size="small"
>{{ $t('common.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%"
fit
- height="85%"
+ height="calc(100% - 57px)"
@selection-change="handleSelectionChange"
>
<el-table-column
@@ -106,7 +114,7 @@
>
</el-table-column>
<el-table-column
- fixed="right"
+
:label="$t('common.operate')"
width="170px"
>
@@ -321,9 +329,14 @@
</template>
<script>
-import moment from 'moment';
-import MyBread from '../../components/MyBread.vue';
-import { select_Auth_ByPageAndCount, insertAuth, updateAuth, deleteAuths } from '../../api/api.js';
+import moment from "moment";
+import MyBread from "../../components/MyBread.vue";
+import {
+ select_Auth_ByPageAndCount,
+ insertAuth,
+ updateAuth,
+ deleteAuths,
+} from "../../api/api.js";
export default {
components: { MyBread },
data() {
@@ -333,10 +346,10 @@
insert: false,
update: false,
},
- formLabelWidth: '100px',
+ formLabelWidth: "100px",
ruleForm: {},
isTransfer: false,
- dialogTitle: '',
+ dialogTitle: "",
data: [],
InsertFormdialog: false,
showinfoBox: false,
@@ -354,8 +367,13 @@
pageSize: 10,
},
defaultProps: {
- children: 'children',
- label: 'label',
+ children: "children",
+ label: "label",
+ },
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
},
};
},
@@ -366,21 +384,41 @@
for (var i = 0; i < permsEntity.length; i++) {
if (permsEntity[i].perms == val) {
this.showPermsMenu(permsEntity[i]);
-
}
}
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;
}
@@ -390,32 +428,34 @@
for (var i in this.multipleSelection) {
std.push(this.multipleSelection[i].id);
}
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ潈闄�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await deleteAuths({ ids: std.toString() });
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ潈闄�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await deleteAuths({ ids: std.toString() });
- if (data.code == 200) {
- this.InsertFormdialog = false;
+ 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 deleteAuths({ ids: std.toString() });
// if (data.code == 200) {
// this.$message({
@@ -434,11 +474,10 @@
this.multipleSelection = val;
},
submitForm(formName) {
- this.getRoleTabelData()
-
+ this.getRoleTabelData();
},
resetForm(formName) {
- this.ruleForm = {}
+ this.ruleForm = {};
this.getRoleTabelData();
},
EditFromDataClose() {
@@ -451,17 +490,16 @@
this.EditFormdialog = false;
this.upform = {};
this.$message({
- message: '淇敼鎴愬姛锛�',
- type: 'success',
+ message: "淇敼鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '淇敼澶辫触锛�',
- type: 'warning',
+ message: "淇敼澶辫触锛�",
+ type: "warning",
});
}
-
},
showDetail(index, row) {
this.showinfoBox = true;
@@ -493,25 +531,25 @@
this.InsertFormdialog = false;
this.insertform = {};
this.$message({
- message: '娣诲姞鎴愬姛锛�',
- type: 'success',
+ message: "娣诲姞鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '娣诲姞澶辫触锛�',
- type: 'warning',
+ message: "娣诲姞澶辫触锛�",
+ type: "warning",
});
}
},
async getRoleTabelData() {
- if (this.listData.tab == '') {
+ if (this.listData.tab == "") {
delete this.listData.tab;
}
this.listData.name = this.ruleForm.name;
const data = await select_Auth_ByPageAndCount(this.listData);
if (data.code != 200) {
- this.$message.error('鍒楄〃璋冪敤澶辫触');
+ this.$message.error("鍒楄〃璋冪敤澶辫触");
}
console.log(data.result);
this.tableData = data.result;
@@ -525,7 +563,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");
},
handleClick(row) {
this.dialogTitle = row.name;
@@ -540,28 +578,21 @@
height: 98%;
width: 98%;
padding: 1%;
-
+
.el-input {
width: 300px;
}
.power_quire {
- overflow: auto;
padding: 8px;
- border-radius: 5px;
-
- margin-bottom: 10px;
- }
- .table_box {
- height: 72%;
- padding: 10px;
+ margin-top: 20px;
border-radius: 5px;
-
-
+
+ margin-bottom: 20px;
+ .el-form-item {
+ margin: 5px;
+ }
}
-
-
-
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3