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/eventlogManage.vue | 67
src/views/maintenance/tokentool.vue | 403 +++---
src/views/maintenance/userManagement.vue | 655 ++++-----
src/views/userManage/templateManage.vue | 61
src/views/userManage/authorityManage.vue | 169 +-
src/views/maintenance/systemMonitoring.vue | 397 ++---
src/views/maintenance/parameterConfiguration.vue | 92
src/assets/css/global.css | 23
src/views/maintenance/blackwhiteList.vue | 590 ++++----
src/views/maintenance/operationLog.vue | 258 ++-
src/views/maintenance/downlog.vue | 255 ++-
src/views/userManage/resourceManage.vue | 213 +-
src/views/userManage/roleManage.vue | 516 +++----
src/views/maintenance/logLog.vue | 237 +-
14 files changed, 1,996 insertions(+), 1,940 deletions(-)
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index b337133..5a1435c 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -49,3 +49,26 @@
.clearfix {
zoom: 1;
}
+.flex_box{
+ display: flex;
+ flex-wrap: wrap;
+
+}
+.table_box {
+ border-radius: 5px;
+ border: 1px solid #dcdfe6;
+ padding: 8px;
+ box-sizing: border-box;
+
+}
+.table_box .el-table,
+.table_box .el-table .el-table__expanded-cell {
+ background-color: transparent !important;
+}
+.table_box .el-table th,
+.table_box .el-table tr {
+ background-color: transparent !important;
+}
+.pagination_box{
+ margin-top: 25px
+}
\ No newline at end of file
diff --git a/src/views/maintenance/blackwhiteList.vue b/src/views/maintenance/blackwhiteList.vue
index 924b75f..bf05707 100644
--- a/src/views/maintenance/blackwhiteList.vue
+++ b/src/views/maintenance/blackwhiteList.vue
@@ -1,241 +1,233 @@
<template>
<div class="logLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.blackwhiteList')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <el-tabs
- v-model="activeName"
- @tab-click="handleClick"
- >
- <el-tab-pane
- :label="$t('operatManage.BWL.blackList')"
- name="first"
- >
- <div>
- <div class="inquire subpage_Div">
- <el-form
- ref="queryInfo"
- :model="queryInfo"
- :inline="true"
- >
- <el-form-item
- :label="$t('operatManage.BWL.blackListIP')"
- prop="blackListIP"
- >
- <el-input
- style="width:200px"
- v-model="queryInfo.ip"
- :placeholder="$t('operatManage.BWL.listIPInfo')"
- />
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.BWL.interceptionNumber')"
- prop="visit"
- >
- <el-input
- style="width:200px"
- v-model="queryInfo.visit"
- :placeholder="$t('operatManage.BWL.interceptionNumber')"
- />
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- type="info"
- @click="resetInfo('queryInfo')"
- icon="el-icon-refresh"
- size="small"
- >{{ $t("operatManage.BWL.reset") }}</el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- type="primary"
- @click="queryBlackInfo()"
- size="small"
- icon="el-icon-search"
- >{{ $t("operatManage.BWL.search") }}
- </el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- icon="el-icon-delete"
- v-if="menuStatus.delete"
- type="danger"
- size="small"
- @click="delBWList"
- >{{ $t("common.delete") }}</el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- icon="el-icon-edit"
- v-if="menuStatus.insert"
- type="success"
- size="small"
- @click="showInsertdialog(1)"
- >{{ $t("common.append") }}</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div class="table_box subpage_Div">
- <el-table
- :data="BTableData"
- @selection-change="blackSelectionChange"
- style="width: 100%"
- >
- <el-table-column
- type="selection"
- width="55"
- />
- <el-table-column
- align="center"
- type="index"
- :label="$t('operatManage.BWL.index')"
- width="70px"
- />
- <el-table-column
- prop="ip"
- :label="$t('operatManage.BWL.blackListIP')"
- />
- <el-table-column
- prop="visit"
- :label="$t('operatManage.BWL.PageView')"
- />
- <el-table-column
- prop="descr"
- :label="$t('operatManage.BWL.description')"
- />
- <el-table-column
- prop="createName"
- :label="$t('operatManage.BWL.creator')"
- />
- <el-table-column
- :formatter="formatData"
- prop="createTime"
- :label="$t('operatManage.BWL.creationTime')"
- />
- <el-table-column
- prop="updateName"
- :label="$t('operatManage.BWL.update')"
- />
- <el-table-column
- :formatter="formatData"
- prop="updateTime"
- :label="$t('operatManage.BWL.UpdateTime')"
- />
- <el-table-column
- v-if="menuStatus.update"
- :label="$t('operatManage.tokentoolObj.operation')"
- width="320"
- align="center"
- >
- <template slot-scope="scope">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane :label="$t('operatManage.BWL.blackList')" name="first">
+ <div class="inquire subpage_Div" ref="container">
+ <el-form ref="queryInfo" :model="queryInfo" :inline="true">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
+ :label="$t('operatManage.BWL.blackListIP')"
+ prop="blackListIP"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="queryInfo.ip"
+ :placeholder="$t('operatManage.BWL.listIPInfo')"
+ />
+ </el-form-item>
+ <el-form-item
+ :label="$t('operatManage.BWL.interceptionNumber')"
+ prop="visit"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="queryInfo.visit"
+ :placeholder="$t('operatManage.BWL.interceptionNumber')"
+ />
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
<el-button
- @click="handleEdit(scope.row)"
- type="warning"
- plain
+ type="info"
+ @click="resetInfo('queryInfo')"
+ icon="el-icon-refresh"
size="small"
- >{{ $t("common.update") }}</el-button>
- </template>
- </el-table-column>
- </el-table>
- <div
- style="margin-top: 20px"
- class="pagination_box"
- >
- <el-pagination
- @size-change="BhandleSizeChange"
- @current-change="BhandleCurrentChange"
- :current-page="BListData.pageIndex"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="BListData.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="Bcount"
- >
- </el-pagination>
+ >{{ $t("operatManage.BWL.reset") }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ @click="queryBlackInfo()"
+ size="small"
+ icon="el-icon-search"
+ >{{ $t("operatManage.BWL.search") }}
+ </el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ icon="el-icon-delete"
+ v-if="menuStatus.delete"
+ type="danger"
+ size="small"
+ @click="delBWList"
+ >{{ $t("common.delete") }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ icon="el-icon-edit"
+ v-if="menuStatus.insert"
+ type="success"
+ size="small"
+ @click="showInsertdialog(1)"
+ >{{ $t("common.append") }}</el-button
+ >
+ </el-form-item>
+ </div>
</div>
+ </el-form>
+ </div>
+ <div class="table_box subpage_Div" :style="styleVar">
+ <el-table
+ :data="BTableData"
+ @selection-change="blackSelectionChange"
+ style="width: 100%"
+ height="calc(100% - 57px)"
+ >
+ <el-table-column type="selection" width="55" />
+ <el-table-column
+ align="center"
+ type="index"
+ :label="$t('operatManage.BWL.index')"
+ width="70px"
+ />
+ <el-table-column
+ prop="ip"
+ :label="$t('operatManage.BWL.blackListIP')"
+ />
+ <el-table-column
+ prop="visit"
+ :label="$t('operatManage.BWL.PageView')"
+ />
+ <el-table-column
+ prop="descr"
+ :label="$t('operatManage.BWL.description')"
+ />
+ <el-table-column
+ prop="createName"
+ :label="$t('operatManage.BWL.creator')"
+ />
+ <el-table-column
+ :formatter="formatData"
+ prop="createTime"
+ :label="$t('operatManage.BWL.creationTime')"
+ />
+ <el-table-column
+ prop="updateName"
+ :label="$t('operatManage.BWL.update')"
+ />
+ <el-table-column
+ :formatter="formatData"
+ prop="updateTime"
+ :label="$t('operatManage.BWL.UpdateTime')"
+ />
+ <el-table-column
+ v-if="menuStatus.update"
+ :label="$t('operatManage.tokentoolObj.operation')"
+ width="320"
+ align="center"
+ >
+ <template slot-scope="scope">
+ <el-button
+ @click="handleEdit(scope.row)"
+ type="warning"
+ plain
+ size="small"
+ >{{ $t("common.update") }}</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pagination_box">
+ <el-pagination
+ @size-change="BhandleSizeChange"
+ @current-change="BhandleCurrentChange"
+ :current-page="BListData.pageIndex"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="BListData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="Bcount"
+ >
+ </el-pagination>
</div>
</div>
</el-tab-pane>
- <el-tab-pane
- :label="$t('operatManage.BWL.whiteList')"
- name="second"
- >
+ <el-tab-pane :label="$t('operatManage.BWL.whiteList')" name="second">
<div class="inquire subpage_Div">
- <el-form
- ref="queryInfo"
- :model="queryInfo"
- :inline="true"
- >
- <el-form-item
- :label="$t('operatManage.BWL.whiteListIP')"
- prop="ip"
- >
- <el-input
- style="width:200px"
- v-model="queryInfo.ip"
- :placeholder="$t('operatManage.BWL.listIPInfo')"
- />
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.BWL.interceptionNumber')"
- prop="visit"
- >
- <el-input
- style="width:200px"
- v-model="queryInfo.visit"
- :placeholder="$t('operatManage.BWL.interceptionNumber')"
- />
- </el-form-item>
- <el-form-item style="float: right;">
- <el-button
- @click="resetForm('queryInfo')"
- type="info" size="small"
- ><i class="el-icon-delete"></i> {{
- $t('operatManage.BWL.reset')
- }}</el-button>
- </el-form-item>
- <el-form-item style="float: right;">
- <el-button
- size="small"
- type="primary"
- @click="queryWhiteInfo"
- ><i class="el-icon-search"></i> {{
- $t('operatManage.BWL.search')
- }}</el-button>
- </el-form-item>
- <el-form-item style="float: right;">
- <el-button
- type="danger" size="small"
- icon="el-icon-delete"
- v-if="menuStatus.delete"
- @click="delBWList"
- >{{
- $t('common.delete')
- }}</el-button>
- </el-form-item>
- <el-form-item style="float: right;">
- <el-button
- type="success" size="small"
- icon="el-icon-edit"
- v-if="menuStatus.insert"
- @click="showInsertdialog(2)"
- >{{
- $t('common.append')
- }}</el-button>
- </el-form-item>
+ <el-form ref="queryInfo" :model="queryInfo" :inline="true">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
+ :label="$t('operatManage.BWL.whiteListIP')"
+ prop="ip"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="queryInfo.ip"
+ :placeholder="$t('operatManage.BWL.listIPInfo')"
+ />
+ </el-form-item>
+ <el-form-item
+ :label="$t('operatManage.BWL.interceptionNumber')"
+ prop="visit"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="queryInfo.visit"
+ :placeholder="$t('operatManage.BWL.interceptionNumber')"
+ />
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
+ <el-button
+ @click="resetForm('queryInfo')"
+ type="info"
+ size="small"
+ ><i class="el-icon-delete"></i> {{
+ $t("operatManage.BWL.reset")
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button size="small" type="primary" @click="queryWhiteInfo"
+ ><i class="el-icon-search"></i> {{
+ $t("operatManage.BWL.search")
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="danger"
+ size="small"
+ icon="el-icon-delete"
+ v-if="menuStatus.delete"
+ @click="delBWList"
+ >{{ $t("common.delete") }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="success"
+ size="small"
+ icon="el-icon-edit"
+ v-if="menuStatus.insert"
+ @click="showInsertdialog(2)"
+ >{{ $t("common.append") }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
</el-form>
</div>
- <div class="table_box1 subpage_Div">
+ <div class="table_box subpage_Div" :style="styleVar">
<el-table
:data="WTableData"
@selection-change="blackSelectionChange"
style="width: 100%"
+ height="calc(100% - 57px)"
>
- <el-table-column
- type="selection"
- width="55"
- />
+ <el-table-column type="selection" width="55" />
<el-table-column
align="center"
type="index"
@@ -284,15 +276,13 @@
type="warning"
plain
size="small"
- >{{ $t('common.update') }}</el-button>
+ >{{ $t("common.update") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- </el-table>
- <div
- style="margin-top: 20px"
- class="pagination_box"
- >
+
+ <div class="pagination_box">
<el-pagination
@size-change="WhandleSizeChange"
@current-change="WhandleCurrentChange"
@@ -313,10 +303,7 @@
:visible.sync="InsertFormdialog"
width="30%"
>
- <el-form
- ref="insertform"
- :model="insertform"
- >
+ <el-form ref="insertform" :model="insertform">
<el-form-item
:label-width="formLabelWidth"
:label="$t('operatManage.tokentoolObj.ip')"
@@ -345,17 +332,11 @@
/>
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
+ <div slot="footer" class="dialog-footer">
<el-button size="small" @click="insertFromDataClose">{{
$t("common.close")
}}</el-button>
- <el-button
- @click="insertFromData"
- type="primary" size="small"
- >{{
+ <el-button @click="insertFromData" type="primary" size="small">{{
$t("common.confirm")
}}</el-button>
</div>
@@ -366,49 +347,31 @@
:visible.sync="updateFormdialog"
width="30%"
>
- <el-form
- ref="editfrom"
- :model="editfrom"
- >
- <el-form-item
- :label-width="formLabelWidth"
- label="IP鍦板潃"
- >
+ <el-form ref="editfrom" :model="editfrom">
+ <el-form-item :label-width="formLabelWidth" label="IP鍦板潃">
<el-input
v-model="editfrom.ip"
:placeholder="$t('common.pleaseInput')"
/>
</el-form-item>
- <el-form-item
- :label-width="formLabelWidth"
- label="璁块棶娆℃暟"
- >
+ <el-form-item :label-width="formLabelWidth" label="璁块棶娆℃暟">
<el-input
v-model="editfrom.visit"
:placeholder="$t('common.pleaseInput')"
/>
</el-form-item>
- <el-form-item
- :label-width="formLabelWidth"
- label="鎻忚堪"
- >
+ <el-form-item :label-width="formLabelWidth" label="鎻忚堪">
<el-input
v-model="editfrom.descr"
:placeholder="$t('common.pleaseInput')"
/>
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
+ <div slot="footer" class="dialog-footer">
<el-button size="small" @click="editFromDataClose">{{
$t("common.close")
}}</el-button>
- <el-button
- @click="editFromData"
- type="primary" size="small"
- >{{
+ <el-button @click="editFromData" type="primary" size="small">{{
$t("common.confirm")
}}</el-button>
</div>
@@ -467,9 +430,31 @@
},
Wcount: 0,
Bcount: 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 + 40}px`;
+ this.styleVar["height"] = `calc(100% - ${rect.height + 40}px)`;
+ });
+ },
editFromDataClose() {
this.updateFormdialog = false;
this.$nextTick(() => {
@@ -551,32 +536,34 @@
std.push(this.multipleSelection[i].id);
}
//deletes
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ュ悕鍗�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await deletelacklist({ ids: std.toString() });
- if (data.code == 200) {
- this.InsertFormdialog = false;
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ュ悕鍗�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await deletelacklist({ ids: std.toString() });
+ if (data.code == 200) {
+ this.InsertFormdialog = false;
+ this.$message({
+ message: "鍒犻櫎鎴愬姛锛�",
+ type: "success",
+ });
+ this.BGetList();
+ this.WGetList();
+ } else {
+ this.$message({
+ message: "鍒犻櫎澶辫触锛�",
+ type: "warning",
+ });
+ }
+ })
+ .catch(() => {
this.$message({
- message: '鍒犻櫎鎴愬姛锛�',
- type: 'success',
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
});
- this.BGetList();
- this.WGetList();
- } else {
- this.$message({
- message: '鍒犻櫎澶辫触锛�',
- type: 'warning',
- });
- }
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
});
- });
// const data = await deletelacklist({ ids: std.toString() });
// if (data.code == 200) {
// this.$message({
@@ -714,6 +701,10 @@
}
},
},
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
+ },
created() {
var val = this.$store.state.currentPerms;
var permsEntity = this.$store.state.permsEntity;
@@ -732,35 +723,32 @@
.logLog_box {
height: 98%;
width: 98%;
- padding: 1%;
- overflow: auto;
+ padding: 1%;
.el-input {
width: 300px;
}
.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;
-
-
-
+ .el-tabs {
+ height: calc(100% - 70px);
}
- .table_box1 {
- padding: 10px;
- border-radius: 5px;
-
-
-
+ /deep/ .el-tabs__content {
+ height: calc(100% - 49px);
+ }
+ /deep/ .el-tab-pane {
+ height: 100%;
}
.text-center {
text-align: center;
}
-
}
</style>
diff --git a/src/views/maintenance/downlog.vue b/src/views/maintenance/downlog.vue
index 2ea71f3..d46f532 100644
--- a/src/views/maintenance/downlog.vue
+++ b/src/views/maintenance/downlog.vue
@@ -1,104 +1,97 @@
<template>
<div class="logLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.DownloadLog')}`,
- ]"></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('downlog.type1')"
- value="1"
- />
- <el-option
- :label="$t('downlog.type2')"
- value="2"
- />
- <el-option
- :label="$t('downlog.type3')"
- value="3"
- />
- <el-option
- :label="$t('downlog.type4')"
- value="4"
- />
- </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"
- :popper-class="popperclass"
- :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="resAllTable"
- 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('downlog.type1')" value="1" />
+ <el-option :label="$t('downlog.type2')" value="2" />
+ <el-option :label="$t('downlog.type3')" value="3" />
+ <el-option :label="$t('downlog.type4')" value="4" />
+ </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"
+ :popper-class="popperclass"
+ :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="resAllTable"
+ 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="85%"
+ height="calc(100% - 57px)"
>
<el-table-column
align="center"
@@ -141,10 +134,7 @@
:formatter="formatData"
/>
</el-table>
- <div
- style="margin-top: 10px"
- class="pagination_box"
- >
+ <div style="margin-top: 25px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -162,9 +152,7 @@
<script>
import MyBread from "../../components/MyBread.vue";
-import {
- downlog_selectByPageAndCount
-} from "../../api/api";
+import { downlog_selectByPageAndCount } from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -173,7 +161,7 @@
data() {
return {
- popperclass: '',
+ popperclass: "",
sizeForm: {
start: null,
end: null,
@@ -187,12 +175,30 @@
start: null,
end: null,
uname: null,
- type: null
+ type: null,
},
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)`;
+ });
+ },
formatSize(row, column) {
let data = row[column.property];
if (data == null) {
@@ -201,9 +207,9 @@
if (data > 1024) {
var val = data / 1024;
- return val + "GB"
+ return val + "GB";
} else {
- return data + "MB"
+ return data + "MB";
}
},
formatType(row, column) {
@@ -213,19 +219,19 @@
}
switch (data) {
case 1:
- return 'Shp鏂囦欢';
+ return "Shp鏂囦欢";
break;
case 2:
- return '涓撻鍥�';
+ return "涓撻鍥�";
break;
case 3:
- return '鍏冩暟鎹�';
+ return "鍏冩暟鎹�";
break;
case 4:
- return '涓氬姟鏁版嵁';
+ return "涓氬姟鏁版嵁";
break;
default:
- return '鏈煡鏁版嵁';
+ return "鏈煡鏁版嵁";
break;
}
},
@@ -243,7 +249,11 @@
var mm = time.getMinutes();
var s = time.getSeconds();
return (
- y + "-" + this.add0(m) + "-" + this.add0(d) +
+ y +
+ "-" +
+ this.add0(m) +
+ "-" +
+ this.add0(d) +
" " +
this.add0(h) +
":" +
@@ -267,21 +277,21 @@
start: null,
end: null,
uname: null,
- type: null
- }
+ type: null,
+ };
this.sizeForm = {
start: null,
end: null,
uname: null,
type: null,
- }
+ };
this.getAllData();
},
onSubmit() {
this.listData.end = this.sizeForm.end;
this.listData.start = this.sizeForm.start;
this.listData.type = this.sizeForm.type;
- this.listData.uname = this.sizeForm.uname
+ this.listData.uname = this.sizeForm.uname;
this.getAllData();
},
@@ -301,7 +311,15 @@
}
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.getAllData();
@@ -319,22 +337,17 @@
width: 300px;
}
.inquire {
- padding: 10px;
+ padding: 8px;
margin-top: 20px;
border-radius: 5px;
margin-bottom: 20px;
.el-form-item {
- margin: 7px;
+ margin: 5px;
}
}
- .table_box {
- overflow: auto;
- height: 57%;
- padding: 10px;
- border-radius: 5px;
- }
+
.text-center {
text-align: center;
}
diff --git a/src/views/maintenance/eventlogManage.vue b/src/views/maintenance/eventlogManage.vue
index 3c05fb8..d1f71e0 100644
--- a/src/views/maintenance/eventlogManage.vue
+++ b/src/views/maintenance/eventlogManage.vue
@@ -5,13 +5,15 @@
`${$t('operatManage.ResourceLog')}`,
]"></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
+ <div class="inquire subpage_Div" ref="container">
<el-form
:inline="true"
ref="sizeForm"
:model="sizeForm"
>
- <el-form-item
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
prop="uname"
:label="$t('operatManage.operationLogObj.username')"
>
@@ -85,8 +87,9 @@
>
</el-date-picker>
</el-form-item>
-
- <el-form-item style="float: right">
+ </div>
+ <div>
+ <el-form-item>
<el-button
@click="onSubmit"
icon="el-icon-search"
@@ -100,19 +103,24 @@
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="84%"
+ height="calc(100% - 57px)"
>
<el-table-column
align="center"
type="index"
:label="$t('operatManage.ELM.index')"
- width="70px"
+ height="calc(100% - 57px)"
/>
<el-table-column
align="center"
@@ -144,7 +152,7 @@
/>
</el-table>
<div
- style="margin-top: 10px"
+
class="pagination_box"
>
<el-pagination
@@ -186,9 +194,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;
@@ -276,6 +302,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();
},
@@ -293,27 +327,18 @@
}
.inquire {
- padding: 10px;
+ padding: 8px;
margin-top: 20px;
border-radius: 5px;
-
+
margin-bottom: 20px;
.el-form-item {
- margin: 7px;
+ margin: 5px;
}
}
- .table_box {
- overflow: auto;
- padding: 10px;
- border-radius: 5px;
-
- height: 57%;
- /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
-
-
- }
+
.text-center {
text-align: center;
}
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;
}
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;
}
diff --git a/src/views/maintenance/parameterConfiguration.vue b/src/views/maintenance/parameterConfiguration.vue
index ad93913..f357b1d 100644
--- a/src/views/maintenance/parameterConfiguration.vue
+++ b/src/views/maintenance/parameterConfiguration.vue
@@ -1,16 +1,19 @@
<template>
<div class="parameterConfiguration_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.systemLayout')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div style="height: 73%">
- <el-table
- ref="filterTable"
- :data="tableData"
- style="width: 100%"
- height="99%">
+ <div class="table_box" :style="styleVar">
+ <el-table
+ ref="filterTable"
+ :data="tableData"
+ style="width: 100%"
+ height="calc(100% - 57px)"
+ >
<el-table-column
align="center"
type="index"
@@ -59,7 +62,8 @@
type="warning"
plain
size="small"
- >{{ $t('common.edit') }}</el-button>
+ >{{ $t("common.edit") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
@@ -94,10 +98,7 @@
:label="$t('operatManage.sysLayOutObj.cvalue')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="upform.cvalue"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="upform.cvalue" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('operatManage.sysLayOutObj.dvalue')"
@@ -124,29 +125,21 @@
<label class="boxlabel">{{ upform.descr }}</label>
</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
- @click="EditFromData"
- size="small"
- type="primary"
- >{{ $t('common.confirm') }}</el-button>
+ <el-button @click="EditFromData" size="small" type="primary">{{
+ $t("common.confirm")
+ }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
-import MyBread from '../../components/MyBread.vue';
-import { select_Args_ByPageAndCount, update_args } from '../../api/api.js';
+import MyBread from "../../components/MyBread.vue";
+import { select_Args_ByPageAndCount, update_args } from "../../api/api.js";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -160,15 +153,20 @@
insert: false,
update: false,
},
- formLabelWidth: '120px',
+ formLabelWidth: "120px",
upform: {},
EditFormdialog: false,
tableData: [],
count: 0,
listData: {
- name: '',
+ name: "",
pageIndex: 1,
pageSize: 10,
+ },
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 75px)",
},
};
},
@@ -195,8 +193,8 @@
parseInt(this.upform.cvalue) > parseInt(this.upform.maxValue)
) {
this.$message({
- message: '褰撳墠鍊间笉鑳藉皬浜庢渶灏忓�兼垨澶т簬鏈�澶у��!',
- type: 'warning',
+ message: "褰撳墠鍊间笉鑳藉皬浜庢渶灏忓�兼垨澶т簬鏈�澶у��!",
+ type: "warning",
});
return;
}
@@ -206,26 +204,26 @@
this.uploadFile = val_data.result;
this.$message({
- message: '淇敼鎴愬姛锛�',
- type: 'success',
+ message: "淇敼鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
this.EditFormdialog = false;
this.upform = {};
} else {
this.$message({
- message: '淇敼澶辫触锛�',
- type: 'warning',
+ message: "淇敼澶辫触锛�",
+ type: "warning",
});
}
},
async getRoleTabelData() {
- if (this.listData.tab == '') {
+ if (this.listData.tab == "") {
delete this.listData.tab;
}
const data = await select_Args_ByPageAndCount(this.listData);
if (data.code != 200) {
- this.$message.error('鍒楄〃璋冪敤澶辫触');
+ this.$message.error("鍒楄〃璋冪敤澶辫触");
}
console.log(data);
this.tableData = data.result;
@@ -233,13 +231,13 @@
},
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;
}
@@ -263,14 +261,14 @@
height: 98%;
width: 98%;
padding: 1%;
-
+
.parameterConfiguration {
padding-top: 10px;
padding-bottom: 10px;
height: 88%;
overflow: auto;
border-radius: 5px;
-
+
box-sizing: border-box;
.el-select {
width: 100%;
@@ -279,12 +277,6 @@
display: flex;
justify-content: center;
}
-
}
- .pagination_box {
- margin-top: 10px;
- }
-
-
}
</style>
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index 0abf4a6..649ea4a 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -1,47 +1,47 @@
<template>
<div class="systemMonitoring_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.systemMonitoring')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
<div class="content_Box">
<div class="cloumn_Box1">
<div class="flex_Box1 subpage_Div">
- <el-tabs
- v-model="activeName"
- @tab-click="handleClick"
- >
+ <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
:label="$t('operatManage.systemMonitoringObj.abnormalResources')"
name="first"
>
- <el-table
- :data="resInfo"
- style="width: 100%; height: 100%"
- >
- <el-table-column
- prop="id"
- :label="$t('operatManage.systemMonitoringObj.resourceID')"
- >
- </el-table-column>
- <el-table-column
- prop="name"
- :label="$t('operatManage.systemMonitoringObj.resourceName')"
- >
- </el-table-column>
- <el-table-column
- prop="bak"
- :label="$t('operatManage.systemMonitoringObj.resourceState')"
- >
- </el-table-column>
- <el-table-column
- prop="createTime"
- :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
- show-overflow-tooltip
- >
- </el-table-column>
- </el-table>
+ <div class="table_b">
+ <el-table :data="resInfo" style="width: 100%; height: 100%">
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.systemMonitoringObj.resourceID')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ :label="$t('operatManage.systemMonitoringObj.resourceName')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="bak"
+ :label="
+ $t('operatManage.systemMonitoringObj.resourceState')
+ "
+ >
+ </el-table-column>
+ <el-table-column
+ prop="createTime"
+ :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
+ show-overflow-tooltip
+ >
+ </el-table-column>
+ </el-table>
+ </div>
</el-tab-pane>
<el-tab-pane
:label="
@@ -49,21 +49,13 @@
"
name="second"
>
-
- <div
- id="resUseChart"
- style="width:101vh; height: 30vh; "
- ></div>
-
+ <div id="resUseChart" style="width: 101vh; height: 30vh"></div>
</el-tab-pane>
<el-tab-pane
:label="$t('operatManage.systemMonitoringObj.userloginStatus')"
name="third"
>
- <div
- id="userLoginChart"
- style="width:101vh; height: 30vh; "
- ></div>
+ <div id="userLoginChart" style="width: 101vh; height: 30vh"></div>
</el-tab-pane>
<el-tab-pane
:label="
@@ -73,48 +65,43 @@
>
<div
id="operateCountChart"
- style="width:101vh; height: 30vh; "
+ style="width: 101vh; height: 30vh"
></div>
</el-tab-pane>
</el-tabs>
</div>
- <div class="flex_Box subpage_Div">
+ <div class="flex_Box subpage_Div" style="overflow: auto;padding-bottom:20px">
<div>
- <div
- style="line-height: 32px"
- class="imageTitle"
- >
- {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
+ <div style="line-height: 32px" class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.onlinePersonnel") }}
</div>
</div>
- <el-table
- :data="tableData"
- style="width: 100%"
- height="90%"
- >
- <el-table-column
- align="center"
- type="index"
- :label="$t('operatManage.ELM.index')"
- width="100px"
- />
- <el-table-column
- prop="uid"
- :label="$t('operatManage.systemMonitoringObj.userID')"
- >
- </el-table-column>
- <el-table-column
- prop="uname"
- :label="$t('operatManage.systemMonitoringObj.username')"
- >
- </el-table-column>
- <el-table-column
- prop="loginTime"
- :label="$t('operatManage.systemMonitoringObj.onlineTime')"
- fixed="right"
- >
- </el-table-column>
- </el-table>
+ <div class="table_b">
+ <el-table :data="tableData" style="width: 100%">
+ <el-table-column
+ align="center"
+ type="index"
+ :label="$t('operatManage.ELM.index')"
+ width="100px"
+ />
+ <el-table-column
+ prop="uid"
+ :label="$t('operatManage.systemMonitoringObj.userID')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="uname"
+ :label="$t('operatManage.systemMonitoringObj.username')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="loginTime"
+ :label="$t('operatManage.systemMonitoringObj.onlineTime')"
+ fixed="right"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
</div>
</div>
<div class="cloumn_Box">
@@ -122,7 +109,7 @@
<div style="width: 100%; height: 20px">
<div class="image1"></div>
<div class="imageTitle">
- {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
+ {{ $t("operatManage.systemMonitoringObj.memoryMonitoring") }}
</div>
</div>
<div class="top_Box1">
@@ -131,15 +118,17 @@
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.haveBeenUsed')
- }}</label>
+ $t("operatManage.systemMonitoringObj.haveBeenUsed")
+ }}</label
+ >
<p>{{ memInfo.use }}</p>
</div>
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.usageRate')
- }}</label>
+ $t("operatManage.systemMonitoringObj.usageRate")
+ }}</label
+ >
<p>{{ memInfo.usage }}</p>
</div>
</div>
@@ -147,23 +136,22 @@
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.totalMemory')
- }}</label>
+ $t("operatManage.systemMonitoringObj.totalMemory")
+ }}</label
+ >
<p>{{ memInfo.totalMem }}</p>
</div>
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.remainingMemory')
- }}</label>
+ $t("operatManage.systemMonitoringObj.remainingMemory")
+ }}</label
+ >
<p>{{ memInfo.remainMem }}</p>
</div>
</div>
</div>
- <div
- id="fathershuiWen"
- class="top_box_right"
- >
+ <div id="fathershuiWen" class="top_box_right">
<div id="shuiwen"></div>
</div>
</div>
@@ -171,11 +159,8 @@
<div class="flex_Box subpage_Div">
<div>
<div class="image2"></div>
- <div
- style="line-height: 32px"
- class="imageTitle"
- >
- {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
+ <div style="line-height: 32px" class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }}
</div>
</div>
<div
@@ -186,28 +171,24 @@
<div class="flex_Box subpage_Div">
<div style="width: 100%; height: 34px">
<div class="image3"></div>
- <div
- style="line-height: 32px"
- class="imageTitle"
- >
- {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
+ <div style="line-height: 32px" class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.heteroconstant") }}
</div>
</div>
<div class="ycContent">
<div class="ycsBox">
- <div style="width:100%;height:100%">
+ <div style="width: 100%; height: 100%">
<div class="ycTltle">{{ resInfoCount }}</div>
<div class="heteroTitle">
- {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
+ {{
+ $t("operatManage.systemMonitoringObj.numberOfExceptions")
+ }}
</div>
</div>
-
</div>
</div>
-
</div>
</div>
-
</div>
<!-- <div class="inform_box">
<div class="content_box">
@@ -394,8 +375,8 @@
</template>
<script>
-import MyBread from '../../components/MyBread.vue';
-import 'echarts-liquidfill';
+import MyBread from "../../components/MyBread.vue";
+import "echarts-liquidfill";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -404,7 +385,7 @@
data() {
//杩欓噷瀛樻斁鏁版嵁
return {
- activeName: 'first',
+ activeName: "first",
ws: null,
tableData: [],
memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
@@ -427,7 +408,7 @@
this.echartData.splice(0, 1);
}
this.lineChart2(this.memInfo.usage);
- this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
+ this.echartData.push([" ", parseFloat(res.cpuInfo.cpuSysUsage)]);
this.lineChart1();
},
SetTableData2(res) {
@@ -444,15 +425,15 @@
},
handleClick(tab, event) {
switch (tab) {
- case 'first':
+ case "first":
break;
- case 'second':
+ case "second":
this.lineChart3();
break;
- case 'third':
+ case "third":
this.lineChart4();
break;
- case 'fourth':
+ case "fourth":
this.lineChart5();
break;
}
@@ -467,26 +448,24 @@
visualMap: [
{
show: false,
- type: 'continuous',
+ type: "continuous",
seriesIndex: 0,
},
],
toolbox: {
show: true,
feature: {
-
- saveAsImage: { show: true }
- }
+ saveAsImage: { show: true },
+ },
},
title: [],
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['', '', '', '', '', '', ''],
-
+ data: ["", "", "", "", "", "", ""],
},
yAxis: [
{
@@ -497,15 +476,15 @@
],
grid: [
{
- top: '10%',
- bottom: '10%',
- left: '10%',
- right: '10%',
+ top: "10%",
+ bottom: "10%",
+ left: "10%",
+ right: "10%",
},
],
series: [
{
- type: 'line',
+ type: "line",
showSymbol: false,
data: valueList,
// itemStyle: {
@@ -516,29 +495,25 @@
// },
// },
// }
-
-
},
],
};
let myChart = this.$echarts.init(
- document.getElementById('Sys_cpu_chart')
+ document.getElementById("Sys_cpu_chart")
);
myChart.setOption(option);
- window.addEventListener('resize', function () {
+ window.addEventListener("resize", function () {
myChart.resize();
});
},
lineChart2(res) {
-
-
var a = 0;
if (res != 0) {
- a = res.split('%').join('');
+ a = res.split("%").join("");
}
- var data = { name: '1111', value: parseFloat(a) / 100 };
+ var data = { name: "1111", value: parseFloat(a) / 100 };
var list = [];
let value = data.value;
list.push({ name: data.name, value: data.value });
@@ -553,45 +528,45 @@
// 鎻愮ず妗嗙粍浠�
tooltip: {
show: false,
- trigger: 'item', // 瑙﹀彂绫诲瀷, 鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
+ trigger: "item", // 瑙﹀彂绫诲瀷, 鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
textStyle: {
show: false,
},
formatter: function (value) {
- return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
+ return value.seriesName + ": " + parseInt(value.value * 100) + "% ";
},
},
series: [
{
- type: 'liquidFill',
- name: ' ',
- radius: '40%',
- center: ['30%', '30%'],
- shape: 'circle',
+ type: "liquidFill",
+ name: " ",
+ radius: "40%",
+ center: ["30%", "30%"],
+ shape: "circle",
phase: 0,
- direction: 'right',
+ direction: "right",
outline: {
show: true,
borderDistance: 0, // 杈规绾夸笌鍥捐〃鐨勮窛绂� 鏁板瓧
itemStyle: {
opacity: 1,
borderWidth: 0,
- borderColor: '#2bf9ed',
+ borderColor: "#2bf9ed",
},
},
// 鍥惧舰鏍峰紡
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#c5e87e' }, //鏌卞浘娓愬彉鑹�
- { offset: 0.5, color: '#2bf9ed' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ { offset: 0, color: "#c5e87e" }, //鏌卞浘娓愬彉鑹�
+ { offset: 0.5, color: "#2bf9ed" }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
]),
opacity: 0.5,
shadowBlur: 10,
},
backgroundStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#2bf9ed' }, //鏌卞浘娓愬彉鑹�
- { offset: 0.4, color: '#44C0C1' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ { offset: 0, color: "#2bf9ed" }, //鏌卞浘娓愬彉鑹�
+ { offset: 0.4, color: "#44C0C1" }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
]),
opacity: 0.5,
},
@@ -605,15 +580,15 @@
label: {
fontSize: 40,
fontWeight: 600,
- color: '#fff',
+ color: "#fff",
},
data: list,
},
{
- name: 'Access From',
- type: 'pie',
- radius: ['43%', '50%'],
- center: ['30%', '30%'],
+ name: "Access From",
+ type: "pie",
+ radius: ["43%", "50%"],
+ center: ["30%", "30%"],
startAngle: 340,
avoidLabelOverlap: false,
itemStyle: {
@@ -621,13 +596,13 @@
},
label: {
show: false,
- position: 'center',
+ position: "center",
},
emphasis: {
label: {
show: true,
- fontSize: '40',
- fontWeight: 'bold',
+ fontSize: "40",
+ fontWeight: "bold",
},
},
labelLine: {
@@ -636,16 +611,16 @@
data: [
{
value: 0.4,
- name: 'Direct',
+ name: "Direct",
itemStyle: {
- color: '#2bf9ed',
+ color: "#2bf9ed",
},
},
{
value: 0.6,
- name: 'Direct',
+ name: "Direct",
itemStyle: {
- color: 'rgba(240, 248, 255, 0)',
+ color: "rgba(240, 248, 255, 0)",
},
},
],
@@ -659,55 +634,54 @@
],
};
- let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
+ let myChart1 = this.$echarts.init(document.getElementById("shuiwen"));
myChart1.setOption(options);
- window.addEventListener('resize', function () {
+ window.addEventListener("resize", function () {
myChart1.resize();
});
},
lineChart3() {
var data = [
- { name: '鍙敤璧勬簮', value: this.resUseCount.resAbleCount },
- { name: '涓嶅彲鐢ㄨ祫婧�', value: this.resUseCount.resUnableCount },
+ { name: "鍙敤璧勬簮", value: this.resUseCount.resAbleCount },
+ { name: "涓嶅彲鐢ㄨ祫婧�", value: this.resUseCount.resUnableCount },
];
var option = {
tooltip: {
- trigger: 'item',
+ trigger: "item",
},
toolbox: {
show: true,
feature: {
- saveAsImage: { show: true }
- }
+ saveAsImage: { show: true },
+ },
},
legend: {
- top: '5%',
- left: 'center',
+ top: "5%",
+ left: "center",
textStyle: {
fontSize: 18, //瀛椾綋澶у皬
-
},
},
series: [
{
- name: ' ',
- type: 'pie',
- radius: ['40%', '70%'],
+ name: " ",
+ type: "pie",
+ radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
- borderColor: '#fff',
+ borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
- position: 'center',
+ position: "center",
},
emphasis: {
label: {
show: true,
- fontSize: '40',
- fontWeight: 'bold',
+ fontSize: "40",
+ fontWeight: "bold",
},
},
labelLine: {
@@ -717,9 +691,9 @@
},
],
};
- let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
+ let myChart2 = this.$echarts.init(document.getElementById("resUseChart"));
myChart2.setOption(option);
- window.addEventListener('resize', function () {
+ window.addEventListener("resize", function () {
myChart2.resize();
});
},
@@ -736,15 +710,15 @@
show: false,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
},
legend: {
show: false,
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
containLabel: true,
},
toolbox: {
@@ -753,24 +727,24 @@
},
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
data: data1,
},
yAxis: {
- type: 'value',
+ type: "value",
},
series: [
{
- name: '',
- type: 'line',
- stack: 'Total',
+ name: "",
+ type: "line",
+ stack: "Total",
data: data2,
},
],
};
let myChart3 = this.$echarts.init(
- document.getElementById('userLoginChart')
+ document.getElementById("userLoginChart")
);
myChart3.setOption(option);
},
@@ -784,27 +758,26 @@
var option = {
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow',
+ type: "shadow",
},
},
toolbox: {
show: true,
feature: {
-
- saveAsImage: { show: true }
- }
+ saveAsImage: { show: true },
+ },
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
containLabel: true,
},
xAxis: [
{
- type: 'category',
+ type: "category",
data: data1,
axisTick: {
alignWithLabel: true,
@@ -813,20 +786,20 @@
],
yAxis: [
{
- type: 'value',
+ type: "value",
},
],
series: [
{
- name: 'Direct',
- type: 'bar',
- barWidth: '60%',
+ name: "Direct",
+ type: "bar",
+ barWidth: "60%",
data: data2,
},
],
};
let myChart4 = this.$echarts.init(
- document.getElementById('operateCountChart')
+ document.getElementById("operateCountChart")
);
myChart4.setOption(option);
},
@@ -835,13 +808,13 @@
if (Window.ws != null) {
Window.ws.close();
Window.ws.onclose = () => {
- console.log('鏈嶅姟鍣ㄥ叧闂�');
+ console.log("鏈嶅姟鍣ㄥ叧闂�");
};
Window.ws = null;
}
Window.ws = new WebSocket(socketUrl);
- Window.ws.option = () => { };
+ Window.ws.option = () => {};
var that = this;
Window.ws.onmessage = (msg) => {
// console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
@@ -860,14 +833,10 @@
mounted() {
var mywidth = $("#fathershuiWen").width();
var mysright = $("#fathershuiWen").height();
- var width = (mywidth * 1.5) + "px"
- var height = (mysright * 1.5) + "px"
+ var width = mywidth * 1.5 + "px";
+ var height = mysright * 1.5 + "px";
$("#shuiwen").width(width);
$("#shuiwen").height(height);
-
-
-
-
this.lineChart2(0);
},
@@ -880,6 +849,14 @@
width: 98%;
padding: 1%;
+ .table_b .el-table,
+ .table_b .el-table /deep/ .el-table__expanded-cell {
+ background-color: transparent !important;
+ }
+ .table_b .el-table /deep/ th,
+ .table_b .el-table /deep/ tr {
+ background-color: transparent !important;
+ }
.content_Box {
width: 100%;
height: 90%;
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>
diff --git a/src/views/maintenance/userManagement.vue b/src/views/maintenance/userManagement.vue
index 29aff91..7586512 100644
--- a/src/views/maintenance/userManagement.vue
+++ b/src/views/maintenance/userManagement.vue
@@ -1,103 +1,105 @@
<template>
<div class="userInfo_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('userManage.userManage')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
- <el-form
- ref="queryForm"
- :model="queryForm"
- :inline="true"
- >
- <el-form-item
- prop="uname"
- :label="$t('userManage.userInfoObj.uname')"
- >
- <el-input v-model="queryForm.uname" style="width:200px"/>
- </el-form-item>
- <el-form-item
- prop="depid"
- :label="$t('userManage.userInfoObj.depName')"
- >
- <el-select
- :popper-append-to-body="false"
- v-model="queryForm.depName"
- placeholder="璇烽�夋嫨"
- style="width:200px"
- >
- <el-option
- :value="queryForm.depid"
- :label="queryForm.depName"
- style=" height:auto"
+
+ <div class="inquire subpage_Div" ref="container">
+ <el-form ref="queryForm" :model="queryForm" :inline="true">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
+ prop="uname"
+ :label="$t('userManage.userInfoObj.uname')"
>
- <el-tree
- ref="tree"
- :data="treeOptions"
- node-key="id"
- :props="props"
- @node-click="handleNodeClickto"
- />
- </el-option>
- </el-select>
- </el-form-item>
-
- <el-form-item style="float:right">
- <el-button
- type="info"
- size="small"
- @click="resetInfo('queryForm')"
- icon="el-icon-refresh"
- >
- {{ $t('operatManage.ELM.reset') }}
- </el-button>
- </el-form-item>
- <el-form-item style="float:right" v-show="setbatchFlag">
- <el-button
- v-if="menuStatus.update"
- size="small"
- @click="editPwd"
- type="warning"
- icon="el-icon-unlock"
- >{{ $t('common.changepassWord') }}
- </el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- v-if="menuStatus.delete"
- type="danger"
- size="small"
- @click="deleteUserInfo"
- icon="el-icon-delete"
- >
- {{ $t('common.delete') }}
- </el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- v-if="menuStatus.insert"
- type="success"
- size="small"
- @click="showAddDialog"
- icon="el-icon-plus"
- >
- {{ $t('common.append') }}
- </el-button>
- </el-form-item>
+ <el-input v-model="queryForm.uname" style="width: 200px" />
+ </el-form-item>
+ <el-form-item
+ prop="depid"
+ :label="$t('userManage.userInfoObj.depName')"
+ >
+ <el-select
+ :popper-append-to-body="false"
+ v-model="queryForm.depName"
+ placeholder="璇烽�夋嫨"
+ style="width: 200px"
+ >
+ <el-option
+ :value="queryForm.depid"
+ :label="queryForm.depName"
+ style="height: auto"
+ >
+ <el-tree
+ ref="tree"
+ :data="treeOptions"
+ node-key="id"
+ :props="props"
+ @node-click="handleNodeClickto"
+ />
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
+ <el-button
+ type="info"
+ size="small"
+ @click="resetInfo('queryForm')"
+ icon="el-icon-refresh"
+ >
+ {{ $t("operatManage.ELM.reset") }}
+ </el-button>
+ </el-form-item>
+ <el-form-item v-show="setbatchFlag">
+ <el-button
+ v-if="menuStatus.update"
+ size="small"
+ @click="editPwd"
+ type="warning"
+ icon="el-icon-unlock"
+ >{{ $t("common.changepassWord") }}
+ </el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ v-if="menuStatus.delete"
+ type="danger"
+ size="small"
+ @click="deleteUserInfo"
+ icon="el-icon-delete"
+ >
+ {{ $t("common.delete") }}
+ </el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ v-if="menuStatus.insert"
+ type="success"
+ size="small"
+ @click="showAddDialog"
+ icon="el-icon-plus"
+ >
+ {{ $t("common.append") }}
+ </el-button>
+ </el-form-item>
+ </div>
+ </div>
</el-form>
</div>
- <div style="height: 73%">
- <el-table
- ref="filterTable"
- :data="tableData"
- style="width: 100%"
- height="90%"
- >
- <el-table-column
- type="selection"
- width="55"
- />
+ <div class="table_box" :style="styleVar">
+ <el-table
+ ref="filterTable"
+ :data="tableData"
+ style="width: 100%"
+ class="table_height"
+ height="calc(100% - 57px)"
+ >
+ <el-table-column type="selection" width="55" />
<el-table-column
align="center"
type="index"
@@ -144,37 +146,31 @@
<el-table-column
align="center"
prop="idcard"
- width="200px"
:label="$t('userManage.userInfoObj.idcard')"
/>
<el-table-column
align="center"
prop="job"
- width="200px"
:label="$t('userManage.userInfoObj.job')"
/>
<el-table-column
align="center"
prop="edu"
- width="200px"
:label="$t('userManage.userInfoObj.edu')"
/>
<el-table-column
align="center"
prop="addr"
- width="200px"
:label="$t('userManage.userInfoObj.addr')"
/>
<el-table-column
align="center"
prop="email"
- width="200px"
:label="$t('userManage.userInfoObj.email')"
/>
<el-table-column
align="center"
prop="contact"
- width="200px"
:label="$t('userManage.userInfoObj.contact')"
/>
@@ -184,29 +180,17 @@
:label="$t('userManage.userInfoObj.status')"
>
<template slot-scope="scope">
- <el-tag
- v-if="scope.row.status == 0"
- type="success"
- >姝ｅ父</el-tag>
- <el-tag
- v-if="scope.row.status == 1"
- type="info"
- >绂佺敤</el-tag>
- <el-tag
- v-if="scope.row.status == 2"
- type="warning"
- >鍒犻櫎</el-tag>
+ <el-tag v-if="scope.row.status == 0" type="success">姝ｅ父</el-tag>
+ <el-tag v-if="scope.row.status == 1" type="info">绂佺敤</el-tag>
+ <el-tag v-if="scope.row.status == 2" type="warning">鍒犻櫎</el-tag>
<el-tag v-if="scope.row.status == 3">鐢宠</el-tag>
- <el-tag
- v-if="scope.row.status == 4"
- type="danger"
- >鎷掓壒</el-tag>
+ <el-tag v-if="scope.row.status == 4" type="danger">鎷掓壒</el-tag>
</template>
</el-table-column>
<!-- <el-table-column
align="center"
prop="bak"
- width="200px"
+
:label="$t('userManage.userInfoObj.bak')"
/> -->
<el-table-column
@@ -215,20 +199,17 @@
v-if="menuStatus.update"
>
<template slot-scope="scope">
-
<el-button
type="warning"
plain
@click="editInfo(scope.row)"
size="small"
- >{{ $t('common.update') }}</el-button>
+ >{{ $t("common.update") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- <div
- style="margin-top: 25px"
- class="pagination_box"
- >
+ <div style="margin-top: 25px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -241,6 +222,7 @@
</el-pagination>
</div>
</div>
+
<el-dialog
width="910px"
top="15vh"
@@ -265,16 +247,10 @@
v-if="behavior == '鏂板鐢ㄦ埛'"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.uid"
- autocomplete="off"
- ></el-input>
- <div
- class="isNewUser"
- v-if="isNewUser"
- >
+ <el-input v-model="editForm.uid" autocomplete="off"></el-input>
+ <div class="isNewUser" v-if="isNewUser">
<img src="../../assets/img/success.png" />
- {{ $t('userManage.userInfoObj.uid') }}
+ {{ $t("userManage.userInfoObj.uid") }}
</div>
</el-form-item>
<el-form-item
@@ -332,10 +308,7 @@
:label="$t('userManage.userInfoObj.username')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.uname"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.uname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
prop="sex"
@@ -362,10 +335,7 @@
:label="$t('userManage.userInfoObj.nativePlace')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.natives"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.natives" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
prop="depid"
@@ -416,10 +386,7 @@
:label="$t('userManage.userInfoObj.identityCard')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.idcard"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.idcard" autocomplete="off"></el-input>
</el-form-item>
</div>
<div style="width: 45%">
@@ -428,50 +395,35 @@
:label="$t('userManage.userInfoObj.job')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.job"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.job" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
prop="edu"
:label="$t('userManage.userInfoObj.edu')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.edu"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.edu" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
prop="addr"
:label="$t('userManage.userInfoObj.addr')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.addr"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.addr" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
prop="email"
:label="$t('userManage.userInfoObj.email')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.email"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
prop="contact"
:label="$t('userManage.userInfoObj.contact')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.contact"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.contact" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
prop="status"
@@ -498,50 +450,33 @@
:label="$t('userManage.userInfoObj.remarks')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.bak"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.bak" autocomplete="off"></el-input>
</el-form-item>
</div>
</el-form>
- <div
- v-if="behavior == '淇敼淇℃伅'"
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- type="info"
- @click="cancelEdit()"
- >{{
- $t('common.reset')
+ <div v-if="behavior == '淇敼淇℃伅'" slot="footer" class="dialog-footer">
+ <el-button size="small" type="info" @click="cancelEdit()">{{
+ $t("common.reset")
}}</el-button>
<el-button
size="small"
type="primary"
@click="sendEdit('editForm')"
v-loading.fullscreen.lock="fullscreenLoading"
- >{{ $t('common.submit') }}</el-button>
+ >{{ $t("common.submit") }}</el-button
+ >
</div>
- <div
- v-else
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- type="info"
- @click="cancelAdd('editForm')"
- >{{
- $t('common.reset')
+ <div v-else slot="footer" class="dialog-footer">
+ <el-button size="small" type="info" @click="cancelAdd('editForm')">{{
+ $t("common.reset")
}}</el-button>
<el-button
size="small"
type="primary"
@click="sendAdd('editForm')"
v-loading.fullscreen.lock="fullscreenLoading"
- >{{ $t('common.submit') }}</el-button>
+ >{{ $t("common.submit") }}</el-button
+ >
</div>
</el-dialog>
<el-dialog
@@ -551,11 +486,7 @@
:visible.sync="resetPwd"
:before-close="handleClose"
>
- <el-form
- :model="pwdForm"
- ref="pwdForm"
- :rules="rules"
- >
+ <el-form :model="pwdForm" ref="pwdForm" :rules="rules">
<el-form-item
prop="adminPwd"
:label="$t('common.AdminPassword')"
@@ -593,23 +524,17 @@
></el-input>
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- type="info"
- @click="cancelReset - 'pwdForm'"
- >{{
- $t('common.reset')
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" type="info" @click="cancelReset - 'pwdForm'">{{
+ $t("common.reset")
}}</el-button>
<el-button
size="small"
type="primary"
@click="sendReset('pwdForm')"
v-loading.fullscreen.lock="fullscreenLoading"
- >{{ $t('common.submit') }}</el-button>
+ >{{ $t("common.submit") }}</el-button
+ >
</div>
</el-dialog>
</div>
@@ -617,8 +542,8 @@
<script>
var encrypt = new JSEncrypt();
-import { mapActions } from 'vuex';
-import MyBread from '../../components/MyBread.vue';
+import { mapActions } from "vuex";
+import MyBread from "../../components/MyBread.vue";
import {
queryDepTree,
queryPageUser,
@@ -628,7 +553,7 @@
updatePwd,
selectByUserid,
userSelectForIsAdmin,
-} from '../../api/api';
+} from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -636,35 +561,35 @@
},
data() {
let validName = (rule, value, callback) => {
- if (value === '' || value === null || value === undefined) {
- return callback(new Error('璇疯緭鍏ュ瘑鐮�'));
+ if (value === "" || value === null || value === undefined) {
+ return callback(new Error("璇疯緭鍏ュ瘑鐮�"));
} else {
callback();
}
};
let validatePass = (rule, value, callback) => {
- if (value === '' || value === undefined) {
- callback(new Error('璇峰啀娆¤緭鍏ュ瘑鐮�'));
+ if (value === "" || value === undefined) {
+ callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
} else if (value !== this.editForm.pwd) {
- callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!'));
+ callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
} else {
callback();
}
};
let resetPass = (rule, value, callback) => {
- if (value === '' || value === undefined) {
- callback(new Error('璇峰啀娆¤緭鍏ュ瘑鐮�'));
+ if (value === "" || value === undefined) {
+ callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
} else if (value !== this.pwdForm.newPwd) {
- callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!'));
+ callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
} else {
callback();
}
};
return {
props: {
- label: 'name',
- value: 'id',
- children: 'children',
+ label: "name",
+ value: "id",
+ children: "children",
checkStrictly: true,
emitPath: false,
},
@@ -679,102 +604,102 @@
pageSize: 10,
pageIndex: 1,
defaultProps: {
- children: 'children',
- label: 'name',
+ children: "children",
+ label: "name",
},
queryForm: {
- uname: '',
+ uname: "",
depid: null,
- depName: '',
+ depName: "",
},
tableData: [],
fullscreenLoading: false,
count: 0,
- formLabelWidth: '100px',
+ formLabelWidth: "100px",
dialogFormVisible: false,
- initialForm: '',
- behavior: '',
+ initialForm: "",
+ behavior: "",
multipleSelection: [],
resetPwd: false,
editForm: {
- uid: '',
- uname: '',
- oldPwd: '',
- pwd: '',
- checkPass: '',
+ uid: "",
+ uname: "",
+ oldPwd: "",
+ pwd: "",
+ checkPass: "",
sex: null,
- natives: '',
+ natives: "",
depid: null,
- idcard: '',
- job: '',
- edu: '',
- addr: '',
- email: '',
- contact: '',
+ idcard: "",
+ job: "",
+ edu: "",
+ addr: "",
+ email: "",
+ contact: "",
status: null,
- bak: '',
- salt: '',
+ bak: "",
+ salt: "",
},
pwdForm: {
- adminPwd: '',
- newPwd: '',
- checkPwd: '',
+ adminPwd: "",
+ newPwd: "",
+ checkPwd: "",
ids: [],
},
treeOptions: [],
statusOpt: [
{
value: 0,
- label: '姝ｅ父',
+ label: "姝ｅ父",
},
{
value: 1,
- label: '绂佺敤',
+ label: "绂佺敤",
},
{
value: 2,
- label: '鍒犻櫎',
+ label: "鍒犻櫎",
},
{
value: 3,
- label: '鐢宠',
+ label: "鐢宠",
},
{
value: 4,
- label: '鎷掓壒',
+ label: "鎷掓壒",
},
],
depList: [],
sexOpt: [
{
value: 0,
- label: '濂�',
+ label: "濂�",
},
{
value: 1,
- label: '鐢�',
+ label: "鐢�",
},
{
value: -1,
- label: '鏈煡',
+ label: "鏈煡",
},
],
rules: {
uid: [
- { required: true, validator: validName, trigger: 'blur' },
+ { required: true, validator: validName, trigger: "blur" },
{
- trigger: 'blur',
+ trigger: "blur",
validator: (rule, value, callback) => {
var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //瀛楃涓叉鍒欒〃杈惧紡 4鍒�14浣嶏紙瀛楁瘝锛屾暟瀛楋紝涓嬪垝绾匡紝鍑忓彿锛�
if (!reg.test(value)) {
callback(
- new Error('璐﹀彿蹇呴』鐢卞瓧姣嶏紝鏁板瓧鎴栦笅鍒掔嚎,闀垮害涓嶅緱瓒呰繃16浣�')
+ new Error("璐﹀彿蹇呴』鐢卞瓧姣嶏紝鏁板瓧鎴栦笅鍒掔嚎,闀垮害涓嶅緱瓒呰繃16浣�")
);
} else {
selectByUserid({ uid: value }).then((res) => {
if (res.result != null) {
this.isNewUser = false;
- callback(new Error('璐﹀彿宸插瓨鍦�'));
+ callback(new Error("璐﹀彿宸插瓨鍦�"));
} else {
this.isNewUser = true;
callback();
@@ -787,16 +712,16 @@
pwd: [
{
required: true,
- message: '璇疯緭鍏ュ瘑鐮�',
+ message: "璇疯緭鍏ュ瘑鐮�",
transform: (value) => value,
- trigger: 'blur',
+ trigger: "blur",
},
{
- type: 'string',
- message: '璇疯緭鍏ヤ笉鍖呭惈绌烘牸鐨勫瓧绗�',
- trigger: 'blur',
+ type: "string",
+ message: "璇疯緭鍏ヤ笉鍖呭惈绌烘牸鐨勫瓧绗�",
+ trigger: "blur",
transform(value) {
- if (value && value.indexOf(' ') === -1) {
+ if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
@@ -804,14 +729,14 @@
},
},
{
- trigger: 'blur',
+ trigger: "blur",
validator: (rule, value, callback) => {
- var regex = new RegExp('');
+ var regex = new RegExp("");
var passwordreg =
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{13,20}$/;
if (!passwordreg.test(value)) {
callback(
- new Error('瀵嗙爜蹇呴』鐢辨暟瀛椼�佸瓧姣嶃�佺壒娈婂瓧绗︾粍鍚�,璇疯緭鍏�13-20浣�')
+ new Error("瀵嗙爜蹇呴』鐢辨暟瀛椼�佸瓧姣嶃�佺壒娈婂瓧绗︾粍鍚�,璇疯緭鍏�13-20浣�")
);
} else {
callback();
@@ -820,21 +745,21 @@
},
],
checkPass: [
- { required: true, validator: validatePass, trigger: 'blur' },
+ { required: true, validator: validatePass, trigger: "blur" },
],
- adminPwd: [{ validator: validName, trigger: 'blur' }],
+ adminPwd: [{ validator: validName, trigger: "blur" }],
newPwd: [
{
- message: '璇疯緭鍏ュ瘑鐮�',
+ message: "璇疯緭鍏ュ瘑鐮�",
transform: (value) => value,
- trigger: 'blur',
+ trigger: "blur",
},
{
- type: 'string',
- message: '璇疯緭鍏ヤ笉鍖呭惈绌烘牸鐨勫瓧绗�',
- trigger: 'blur',
+ type: "string",
+ message: "璇疯緭鍏ヤ笉鍖呭惈绌烘牸鐨勫瓧绗�",
+ trigger: "blur",
transform(value) {
- if (value && value.indexOf(' ') === -1) {
+ if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
@@ -842,14 +767,14 @@
},
},
{
- trigger: 'blur',
+ trigger: "blur",
validator: (rule, value, callback) => {
- var regex = new RegExp('');
+ var regex = new RegExp("");
var passwordreg =
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{8,20}$/;
if (!passwordreg.test(value)) {
callback(
- new Error('瀵嗙爜蹇呴』鐢辨暟瀛椼�佸瓧姣嶃�佺壒娈婂瓧绗︾粍鍚�,璇疯緭鍏�8-20浣�')
+ new Error("瀵嗙爜蹇呴』鐢辨暟瀛椼�佸瓧姣嶃�佺壒娈婂瓧绗︾粍鍚�,璇疯緭鍏�8-20浣�")
);
} else {
callback();
@@ -857,19 +782,41 @@
},
},
],
- checkPwd: [{ validator: resetPass, trigger: 'blur' }],
+ checkPwd: [{ validator: resetPass, trigger: "blur" }],
},
defaultProps: {
children: "children",
label: "name",
},
- selectOptionWidth: '',
- selectheight: 'auto',
+ selectOptionWidth: "",
+ selectheight: "auto",
defaultexpand: false,
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ "height": "calc(100% - 109px)",
+ },
};
},
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
methods: {
- ...mapActions(['login', 'getpublickey']),
+ 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)`;
+ });
+ },
+ ...mapActions(["login", "getpublickey"]),
getUserInfo() {
this.pageSize = 10;
this.currentPage = 1;
@@ -885,7 +832,7 @@
});
}
})
- .catch((res) => { });
+ .catch((res) => {});
queryPageUser({
pageIndex: 1,
@@ -902,20 +849,20 @@
});
}
})
- .catch((res) => { });
+ .catch((res) => {});
},
treeData(source) {
let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
return cloneData.filter((father) => {
// 寰幆鎵�鏈夐」
let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
});
},
handleNodeClickto(data, node, nodeData) {
- this.queryForm.depid = data.id
+ this.queryForm.depid = data.id;
this.queryForm.depName = data.name;
},
//鎼滅储鎸夐挳
@@ -931,7 +878,6 @@
this.tableData = res.result;
this.count = res.count;
} else {
-
this.$notify.error({
title: res.code,
message: res.result,
@@ -945,7 +891,7 @@
},
//鏂板鎸夐挳
showAddDialog() {
- this.behavior = '鏂板鐢ㄦ埛';
+ this.behavior = "鏂板鐢ㄦ埛";
this.editForm = {};
this.dialogFormVisible = true;
},
@@ -971,8 +917,8 @@
if (res.code == 200) {
this.getUserInfo();
this.$message({
- message: '娣诲姞鎴愬姛',
- type: 'success',
+ message: "娣诲姞鎴愬姛",
+ type: "success",
});
this.editForm = {};
this.dialogFormVisible = false;
@@ -980,11 +926,9 @@
}, 500);
})
.catch((res) => {
-
this.fullscreenLoading = false;
});
} else {
-
return false;
}
});
@@ -998,20 +942,19 @@
var blackTheme;
if (this.$store.state.themeflag == true) {
blackTheme = {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
- customClass: "Black_theme"
- }
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ customClass: "Black_theme",
+ };
} else {
blackTheme = {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
-
- }
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ };
}
- this.$confirm('姝ゆ搷浣滃皢鍒犻櫎宸查�変腑鐨勭敤鎴�, 鏄惁缁х画?', '鎻愮ず', blackTheme)
+ this.$confirm("姝ゆ搷浣滃皢鍒犻櫎宸查�変腑鐨勭敤鎴�, 鏄惁缁х画?", "鎻愮ず", blackTheme)
.then(() => {
var std = [];
for (var i in this.multipleSelection) {
@@ -1021,22 +964,22 @@
.then((res) => {
if (res.code == 200) {
this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!',
+ type: "success",
+ message: "鍒犻櫎鎴愬姛!",
});
this.multipleSelection = [];
this.getUserInfo();
} else {
- this.$message.error('鍒犻櫎澶辫触');
+ this.$message.error("鍒犻櫎澶辫触");
}
})
.catch(() => {
- this.$message.error('鍒犻櫎澶辫触');
+ this.$message.error("鍒犻櫎澶辫触");
this.multipleSelection = [];
});
})
.catch(() => {
- this.$message('宸插彇娑堝垹闄�');
+ this.$message("宸插彇娑堝垹闄�");
});
},
//閲嶇疆瀵嗙爜
@@ -1046,7 +989,7 @@
std.push(this.multipleSelection[i].id);
}
if (std.length == 0) {
- alert('璇峰厛閫夋嫨鐢ㄦ埛');
+ alert("璇峰厛閫夋嫨鐢ㄦ埛");
return;
}
this.pwdForm.ids = std;
@@ -1071,15 +1014,14 @@
setTimeout(() => {
this.fullscreenLoading = false;
if (res.code == 200) {
-
this.$message({
- message: '淇敼鎴愬姛',
- type: 'success',
+ message: "淇敼鎴愬姛",
+ type: "success",
});
this.pwdForm = {
- adminPwd: '',
- newPwd: '',
- checkPwd: '',
+ adminPwd: "",
+ newPwd: "",
+ checkPwd: "",
ids: [],
};
this.multipleSelection = [];
@@ -1090,7 +1032,7 @@
}, 500);
})
.catch((res) => {
- alert('淇敼澶辫触锛岃閲嶈瘯锛�');
+ alert("淇敼澶辫触锛岃閲嶈瘯锛�");
this.fullscreenLoading = false;
});
} else {
@@ -1104,60 +1046,60 @@
delete row.updateUser;
this.initialForm = JSON.stringify(row);
- this.behavior = '淇敼淇℃伅';
+ this.behavior = "淇敼淇℃伅";
this.editForm = JSON.parse(JSON.stringify(row));
this.dialogFormVisible = true;
},
//缂栬緫閫夋嫨鍗曚綅
editChange(value) {
this.editForm.depid = value;
- this.$refs.editcaderHandle.dropDownVisible = false
+ this.$refs.editcaderHandle.dropDownVisible = false;
},
handeditChange(data, node, nodeData) {
- this.$set(this.editForm, 'depid', data.id)
- this.$set(this.editForm, 'depName', data.name)
- this.$refs.editcaderHandle.dropDownVisible = false
+ this.$set(this.editForm, "depid", data.id);
+ this.$set(this.editForm, "depName", data.name);
+ this.$refs.editcaderHandle.dropDownVisible = false;
},
//鍏抽棴寮瑰嚭妗�
handleClose(done) {
var blackTheme;
if (this.$store.state.themeflag == true) {
blackTheme = {
- customClass: "Black_theme"
- }
+ customClass: "Black_theme",
+ };
}
- this.$confirm('纭鍏抽棴锛�', blackTheme)
+ this.$confirm("纭鍏抽棴锛�", blackTheme)
.then((_) => {
this.editForm = {
- uid: '',
- uname: '',
- oldPwd: '',
- pwd: '',
- checkPass: '',
+ uid: "",
+ uname: "",
+ oldPwd: "",
+ pwd: "",
+ checkPass: "",
sex: null,
- natives: '',
+ natives: "",
depid: null,
- idcard: '',
- job: '',
- edu: '',
- addr: '',
- email: '',
- contact: '',
+ idcard: "",
+ job: "",
+ edu: "",
+ addr: "",
+ email: "",
+ contact: "",
status: null,
- bak: '',
- salt: '',
+ bak: "",
+ salt: "",
};
this.pwdForm = {
- adminPwd: '',
- newPwd: '',
- checkPwd: '',
+ adminPwd: "",
+ newPwd: "",
+ checkPwd: "",
ids: [],
};
done();
})
- .catch((_) => { });
+ .catch((_) => {});
},
//鎻愪氦缂栬緫
sendEdit(formName) {
@@ -1181,8 +1123,8 @@
if (res.code == 200) {
this.getUserInfo();
this.$message({
- message: '淇敼鎴愬姛',
- type: 'success',
+ message: "淇敼鎴愬姛",
+ type: "success",
});
this.editForm = {};
this.dialogFormVisible = false;
@@ -1190,11 +1132,11 @@
}, 500);
})
.catch((res) => {
- alert('淇敼澶辫触锛岃閲嶈瘯锛�');
+ alert("淇敼澶辫触锛岃閲嶈瘯锛�");
this.fullscreenLoading = false;
});
} else {
- console.log('error submit!!');
+ console.log("error submit!!");
return false;
}
});
@@ -1218,13 +1160,13 @@
},
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;
}
@@ -1240,15 +1182,17 @@
setOptionWidth(event) {
// 涓嬫媺妗嗚仛鐒︼紝璁剧疆寮规鐨勫搴�
this.$nextTick(() => {
- this.selectOptionWidth = event.srcElement.offsetWidth + 'px';
+ this.selectOptionWidth = event.srcElement.offsetWidth + "px";
});
- }
+ },
},
mounted() {
this.getIsAdmin();
this.getUserInfo();
this.getpublickey();
+ window.addEventListener("resize", this.onResize);
+ this.calHeight()
},
created() {
var val = this.$store.state.currentPerms;
@@ -1286,15 +1230,12 @@
margin: 5px;
}
}
- .table_box {
- // height: 60%;
- padding: 10px;
- border-radius: 5px;
- overflow: auto;
- height: 500px;
- // overflow: auto;
- }
+ // .table_height{
+ // // max-height: 80%;
+
+ // min-height:70%;
+ // }
.el-dialog {
.el-form-item {
margin-bottom: 20px;
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
diff --git a/src/views/userManage/resourceManage.vue b/src/views/userManage/resourceManage.vue
index 6e666fb..21c5bd7 100644
--- a/src/views/userManage/resourceManage.vue
+++ b/src/views/userManage/resourceManage.vue
@@ -5,16 +5,17 @@
`${$t('userManage.resManage')}`,
]"></My-bread>
<el-divider />
- <div class="power_quire subpage_Div">
+ <div class="power_quire subpage_Div" ref="container">
<el-form
ref="form"
:model="ruleForm"
:inline="true"
>
- <el-form-item :label="$t('userManage.resManageObj.name')">
+ <div class="flex_box">
+ <el-form-item :label="$t('userManage.resManageObj.name')" style="margin-right: auto">
<el-input v-model="ruleForm.name" style="width:200px"></el-input>
</el-form-item>
- <el-form-item style="float:right">
+ <el-form-item>
<el-button
v-if="menuStatus.insert"
@click="setInsertFormdialog"
@@ -43,14 +44,17 @@
size="small"
>{{ $t('common.empty') }}</el-button>
</el-form-item>
+ </div>
+
</el-form>
</div>
- <div class="table_box ">
+ <div class="table_box" :style="styleVar">
<el-table
:data="tableData"
style="width: 100%"
fit
@selection-change="handleSelectionChange"
+ height="calc(100% - 57px)"
>
<el-table-column
type="selection"
@@ -106,7 +110,7 @@
>
</el-table-column>
<el-table-column
- fixed="right"
+
:label="$t('common.operate')"
width="170px"
>
@@ -127,8 +131,7 @@
</template>
</el-table-column>
</el-table>
- </div>
- <div class="pagination_box">
+ <div class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -140,6 +143,8 @@
>
</el-pagination>
</div>
+ </div>
+
<div
class="infoBox box_div "
v-show="showinfoBox"
@@ -648,10 +653,10 @@
</template>
<script>
-import $ from 'jquery';
-import { getToken } from '../../utils/auth.js';
-import moment from 'moment';
-import MyBread from '../../components/MyBread.vue';
+import $ from "jquery";
+import { getToken } from "../../utils/auth.js";
+import moment from "moment";
+import MyBread from "../../components/MyBread.vue";
import {
select_Res_ByPageAndCount,
insertRes,
@@ -660,17 +665,17 @@
upload_res,
selectdirTab,
selectdepTab,
-} from '../../api/api.js';
-import styleDirTree from '../datamanage/styleDirTree.vue';
-import styleDepTree from '../datamanage/styleDepTree.vue';
+} from "../../api/api.js";
+import styleDirTree from "../datamanage/styleDirTree.vue";
+import styleDepTree from "../datamanage/styleDepTree.vue";
export default {
components: { MyBread, styleDirTree, styleDepTree },
data() {
return {
props: {
- label: 'name',
- value: 'id',
- children: 'children',
+ label: "name",
+ value: "id",
+ children: "children",
checkStrictly: true,
emitPath: false,
},
@@ -682,10 +687,10 @@
update: false,
upload: false,
},
- formLabelWidth: '130px',
+ formLabelWidth: "130px",
ruleForm: {},
isTransfer: false,
- dialogTitle: '',
+ dialogTitle: "",
data: [],
InsertFormdialog: false,
showinfoBox: false,
@@ -697,13 +702,13 @@
ImageFile: null,
uploadFile: null,
insertform: {
- img: '',
- depValue: '',
- dirValue: ''
+ img: "",
+ depValue: "",
+ dirValue: "",
},
tableData: [],
itemdetail: {},
- upform: { img: '' },
+ upform: { img: "" },
multipleSelection: [],
count: 0,
listData: {
@@ -712,8 +717,13 @@
pageSize: 10,
},
defaultProps: {
- children: 'children',
- label: 'label',
+ children: "children",
+ label: "label",
+ },
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
},
};
},
@@ -728,22 +738,42 @@
}
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)`;
+ });
+ },
handleEditDepList(data, node, nodeData) {
- this.upform.depid = data.id
+ this.upform.depid = data.id;
this.upform.depValue = data.name;
},
handleEditDirList(data, node, nodeData) {
- this.upform.dirid = data.id
+ this.upform.dirid = data.id;
this.upform.dirValue = data.name;
},
handleDepList(data, node, nodeData) {
-
- this.insertform.depid = data.id
+ this.insertform.depid = data.id;
this.insertform.depValue = data.name;
},
handleDirList(data, node, nodeData) {
- this.insertform.dirid = data.id
+ this.insertform.dirid = data.id;
this.insertform.dirValue = data.name;
},
treeData(source) {
@@ -751,7 +781,7 @@
return cloneData.filter((father) => {
// 寰幆鎵�鏈夐」
let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
// 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
// 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
@@ -760,16 +790,16 @@
async getDepList() {
const data = await selectdepTab();
if (data.code != 200) {
- return this.$message.error('鍗曚綅鍒楄〃璋冪敤澶辫触');
+ return this.$message.error("鍗曚綅鍒楄〃璋冪敤澶辫触");
}
- this.depList = this.treeData(data.result)
+ this.depList = this.treeData(data.result);
},
async getDirList() {
const data = await selectdirTab();
if (data.code != 200) {
- return this.$message.error('鐩綍鍒楄〃璋冪敤澶辫触');
+ return this.$message.error("鐩綍鍒楄〃璋冪敤澶辫触");
}
- this.dirList = this.treeData(data.result)
+ this.dirList = this.treeData(data.result);
},
setInsertFormdialog() {
this.getDepList();
@@ -778,59 +808,59 @@
},
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;
- case '/upload':
+ case "/upload":
this.menuStatus.upload = true;
break;
}
},
getIsertFile() {
- $('#imageFile').click();
+ $("#imageFile").click();
},
getupdateFile() {
- $('#editimageFile').click();
+ $("#editimageFile").click();
},
async setUploadFile(res) {
var fs;
if (res == 0) {
- fs = document.getElementById('imageFile');
+ fs = document.getElementById("imageFile");
} else if (res == 1) {
- fs = document.getElementById('editimageFile');
+ fs = document.getElementById("editimageFile");
if (fs.files.length == 0) {
return;
}
}
var formData = new FormData();
- formData.append('file', fs.files[0]);
+ formData.append("file", fs.files[0]);
var val_data = await upload_res(formData);
if (val_data.code == 200) {
this.uploadFile = val_data.result;
this.$message({
- message: '涓婁紶鎴愬姛锛�',
- type: 'success',
+ message: "涓婁紶鎴愬姛锛�",
+ type: "success",
});
} else {
this.$message({
- message: '涓婁紶澶辫触锛�',
- type: 'warning',
+ message: "涓婁紶澶辫触锛�",
+ type: "warning",
});
}
},
insertFile() {
- var val = document.getElementById('imageFile').files;
+ var val = document.getElementById("imageFile").files;
if (!val || !val.length) return;
this.insertform.img = val[0].name;
},
updateFile() {
- var val = document.getElementById('editimageFile').files;
+ var val = document.getElementById("editimageFile").files;
if (!val || !val.length) return;
this.upform.img = val[0].name;
},
@@ -875,30 +905,32 @@
std.push(this.multipleSelection[i].id);
}
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎鎵�閫夊唴瀹�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await deleteRess({ ids: std.toString() });
- if (data.code == 200) {
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎鎵�閫夊唴瀹�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await deleteRess({ ids: std.toString() });
+ if (data.code == 200) {
+ 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 deleteRess({ ids: std.toString() });
// if (data.code == 200) {
// this.$message({
@@ -937,14 +969,14 @@
this.upform = {};
this.uploadFile = null;
this.$message({
- message: '淇敼鎴愬姛锛�',
- type: 'success',
+ message: "淇敼鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '淇敼澶辫触锛�',
- type: 'warning',
+ message: "淇敼澶辫触锛�",
+ type: "warning",
});
}
},
@@ -960,8 +992,9 @@
this.itemdetail.updateTime
);
- this.itemdetail.imageFile = BASE_URL + '/res/download?guid=' + row.img + '&token=' + token;
- console.log(this.itemdetail.imageFile)
+ this.itemdetail.imageFile =
+ BASE_URL + "/res/download?guid=" + row.img + "&token=" + token;
+ console.log(this.itemdetail.imageFile);
},
handleEdit(index, row) {
this.getDepList();
@@ -990,8 +1023,8 @@
async insertFromData() {
if (this.insertform.dirid == null || this.insertform.depid == null) {
this.$message({
- message: '璇烽�夋嫨璧勬簮鎵�灞炵殑鐩綍鎴栧崟浣�',
- type: 'warning',
+ message: "璇烽�夋嫨璧勬簮鎵�灞炵殑鐩綍鎴栧崟浣�",
+ type: "warning",
});
return;
}
@@ -1002,29 +1035,29 @@
if (data.code == 200) {
this.InsertFormdialog = false;
this.insertform = {
- img: '',
+ img: "",
};
this.uploadFile = null;
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_Res_ByPageAndCount(this.listData);
if (data.code != 200) {
- this.$message.error('鍒楄〃璋冪敤澶辫触');
+ this.$message.error("鍒楄〃璋冪敤澶辫触");
}
this.tableData = data.result;
this.count = data.count;
@@ -1037,7 +1070,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;
@@ -1058,11 +1091,13 @@
}
.power_quire {
- padding: 10px;
+ padding: 8px;
+
+ margin-top: 20px;
border-radius: 5px;
- margin-bottom: 10px;
+ margin-bottom: 20px;
.el-form-item {
margin: 5px;
}
diff --git a/src/views/userManage/roleManage.vue b/src/views/userManage/roleManage.vue
index f9046a4..6f4f786 100644
--- a/src/views/userManage/roleManage.vue
+++ b/src/views/userManage/roleManage.vue
@@ -1,53 +1,93 @@
<template>
<div class="logLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('userManage.roleManage')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
- <el-form
- ref="ruleForm"
- :model="roleForm"
- :inline="true"
- >
- <el-form-item
- :label="$t('userManage.RM.roleName')"
- prop="username"
- >
- <el-input v-model="roleForm.username" style="width:200px"/>
- </el-form-item>
- <el-form-item
- :label="$t('userManage.RM.ownedSystem')"
- prop="ownedSystem"
- >
- <el-select
- :popper-append-to-body="false"
- v-model="roleForm.depValue"
- placeholder="璇烽�夋嫨"
- style="width:200px"
- >
- <el-option
- :value="roleForm.depid"
- :label="roleForm.depValue"
- style=" height:auto"
+ <div class="inquire subpage_Div" ref="container">
+ <el-form ref="ruleForm" :model="roleForm" :inline="true">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item :label="$t('userManage.RM.roleName')" prop="username">
+ <el-input v-model="roleForm.username" style="width: 200px" />
+ </el-form-item>
+ <el-form-item
+ :label="$t('userManage.RM.ownedSystem')"
+ prop="ownedSystem"
>
- <el-tree
- ref="tree"
- :data="depList"
- node-key="id"
- :props="props"
- @node-click="handleRouleDepList"
- />
- </el-option>
- </el-select>
- <!-- <el-input
+ <el-select
+ :popper-append-to-body="false"
+ v-model="roleForm.depValue"
+ placeholder="璇烽�夋嫨"
+ style="width: 200px"
+ >
+ <el-option
+ :value="roleForm.depid"
+ :label="roleForm.depValue"
+ style="height: auto"
+ >
+ <el-tree
+ ref="tree"
+ :data="depList"
+ node-key="id"
+ :props="props"
+ @node-click="handleRouleDepList"
+ />
+ </el-option>
+ </el-select>
+ <!-- <el-input
v-model="roleForm.value"
:disabled="true"
:placeholder="$t('common.pleaseInput')"
/> -->
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
+ <el-button type="info" size="small" @click="resetForm('ruleForm')"
+ ><i class="el-icon-delete"></i> {{
+ $t("userManage.RM.reset")
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ size="small"
+ type="primary"
+ @click="onSubmit('ruleForm')"
+ ><i class="el-icon-search"></i> {{
+ $t("userManage.RM.query")
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="danger"
+ size="small"
+ @click="handleDelete()"
+ v-if="menuStatus.delete"
+ ><i class="el-icon-delete"></i> {{
+ $t("common.delete")
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="success"
+ size="small"
+ @click="setInsertFormdialog"
+ v-if="menuStatus.insert"
+ ><i class="el-icon-circle-plus-outline"></i> {{
+ $t("userManage.RM.add")
+ }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
- </el-form-item>
<!-- <el-form-item>
<el-button
size="small"
@@ -93,68 +133,23 @@
$t('common.delete')
}}</el-button>
</el-form-item> -->
- <el-form-item style="float:right">
- <el-button
- type="info"
- size="small"
- @click="resetForm('ruleForm')"
- ><i class="el-icon-delete"></i> {{
- $t('userManage.RM.reset')
- }}</el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- size="small"
- type="primary"
- @click="onSubmit('ruleForm')"
- ><i class="el-icon-search"></i> {{
- $t('userManage.RM.query')
- }}</el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- type="danger"
- size="small"
- @click="handleDelete()"
- v-if="menuStatus.delete"
- ><i class="el-icon-delete"></i> {{
- $t('common.delete')
- }}</el-button>
- </el-form-item>
- <el-form-item style="float:right">
- <el-button
- type="success"
- size="small"
- @click="setInsertFormdialog "
- v-if="menuStatus.insert"
- ><i class="el-icon-circle-plus-outline"></i> {{
- $t('userManage.RM.add')
- }}</el-button>
- </el-form-item>
</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="85%"
+ height="calc(100% - 57px)"
@selection-change="handleSelectionChange"
>
- <el-table-column
- type="selection"
- width="55"
- />
+ <el-table-column type="selection" width="55" />
<el-table-column
align="center"
type="index"
:label="$t('userManage.RM.index')"
width="70px"
/>
- <el-table-column
- align="center"
- prop="id"
- v-if="false"
- />
+ <el-table-column align="center" prop="id" v-if="false" />
<el-table-column
align="center"
prop="name"
@@ -221,18 +216,17 @@
type="warning"
@click="handleEdit(scope.$index, scope.row)"
size="small"
- >{{ $t('common.update') }}</el-button>
+ >{{ $t("common.update") }}</el-button
+ >
<el-button
@click="showDetail(scope.$index, scope.row)"
size="small"
- >{{ $t('common.see') }}</el-button>
+ >{{ $t("common.see") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- <div
- style="margin-top: 25px"
- class="pagination_box"
- >
+ <div style="margin-top: 25px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -259,7 +253,7 @@
:label-width="formLabelWidth"
>
<el-input
- style="width:95%"
+ style="width: 95%"
v-model="insertform.name"
autocomplete="off"
></el-input>
@@ -274,12 +268,12 @@
:popper-append-to-body="false"
v-model="insertform.depValue"
placeholder="璇烽�夋嫨"
- style="width:95%"
+ style="width: 95%"
>
<el-option
:value="insertform.depid"
:label="insertform.depValue"
- style=" height:auto"
+ style="height: auto"
>
<el-tree
ref="tree"
@@ -307,7 +301,7 @@
:label-width="formLabelWidth"
>
<el-input
- style="width:95%"
+ style="width: 95%"
v-model="insertform.descr"
autocomplete="off"
></el-input>
@@ -316,39 +310,27 @@
:label="$t('userManage.RM.isAdmin')"
:label-width="formLabelWidth"
>
- <el-radio
- v-model="insertform.isAdmin"
- label="1"
- >鏄�</el-radio>
- <el-radio
- v-model="insertform.isAdmin"
- label="0"
- >鍚�</el-radio>
+ <el-radio v-model="insertform.isAdmin" label="1">鏄�</el-radio>
+ <el-radio v-model="insertform.isAdmin" label="0">鍚�</el-radio>
</el-form-item>
<el-form-item
:label="$t('userManage.RM.remarks')"
:label-width="formLabelWidth"
>
<el-input
- style="width:95%"
+ style="width: 95%"
v-model="insertform.bak"
autocomplete="off"
></el-input>
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="insertFromClose"
- >{{ $t('common.close') }}</el-button>
- <el-button
- type="primary"
- size="small"
- @click="insertFromData"
- >{{ $t('common.confirm') }}</el-button>
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" @click="insertFromClose">{{
+ $t("common.close")
+ }}</el-button>
+ <el-button type="primary" size="small" @click="insertFromData">{{
+ $t("common.confirm")
+ }}</el-button>
</div>
</el-dialog>
<el-dialog
@@ -363,10 +345,7 @@
:label="$t('userManage.RM.roleName')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="updateform.name"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="updateform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
@@ -378,12 +357,12 @@
:popper-append-to-body="false"
v-model="updateform.depValue"
placeholder="璇烽�夋嫨"
- style="width:95%"
+ style="width: 95%"
>
<el-option
:value="updateform.depid"
:label="updateform.depValue"
- style=" height:auto"
+ style="height: auto"
>
<el-tree
ref="tree"
@@ -411,147 +390,111 @@
:label="$t('userManage.RM.isAdmin')"
:label-width="formLabelWidth"
>
- <el-radio
- v-model="updateform.isAdmin"
- label="1"
- >鏄�</el-radio>
- <el-radio
- v-model="updateform.isAdmin"
- label="0"
- >鍚�</el-radio>
+ <el-radio v-model="updateform.isAdmin" label="1">鏄�</el-radio>
+ <el-radio v-model="updateform.isAdmin" label="0">鍚�</el-radio>
</el-form-item>
<el-form-item
:label="$t('userManage.RM.describe')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="updateform.descr"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="updateform.descr" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('userManage.RM.remarks')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="updateform.bak"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="updateform.bak" autocomplete="off"></el-input>
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="updateFromClose"
- >{{ $t('common.close') }}</el-button>
- <el-button
- type="primary"
- size="small"
- @click="updateFromData"
- >{{ $t('common.confirm') }}</el-button>
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" @click="updateFromClose">{{
+ $t("common.close")
+ }}</el-button>
+ <el-button type="primary" size="small" @click="updateFromData">{{
+ $t("common.confirm")
+ }}</el-button>
</div>
</el-dialog>
- <div
- class="leftTree subpage_Div box_div"
- v-if="showCata"
- >
+ <div class="leftTree subpage_Div box_div" v-if="showCata">
<div class="treeBox">
<role-dep-tree></role-dep-tree>
</div>
<div class="btnBox">
- <el-button
- type="primary"
- size="small"
- @click="selectCataName"
- >纭畾</el-button>
- <el-button
- type="info"
- size="small"
- @click="showCata = false"
- >鍙栨秷</el-button>
+ <el-button type="primary" size="small" @click="selectCataName"
+ >纭畾</el-button
+ >
+ <el-button type="info" size="small" @click="showCata = false"
+ >鍙栨秷</el-button
+ >
</div>
</div>
- <div
- class="infoBox box_div subpage_Div"
- v-show="showinfoBox"
- >
-
- <div
- slot="header"
- class="clearfix"
- >
- <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
- <div
- style="float: right; cursor: pointer"
- @click="closeDetial"
- >
+ <div class="infoBox box_div subpage_Div" v-show="showinfoBox">
+ <div slot="header" class="clearfix">
+ <span>{{ $t("dataManage.styleObj.deInformation") }}</span>
+ <div style="float: right; cursor: pointer" @click="closeDetial">
<i class="el-icon-close"></i>
</div>
</div>
<el-divider></el-divider>
<div class="contentBox">
<p>
- <label> {{ $t('userManage.RM.roleName') }}:</label>
+ <label> {{ $t("userManage.RM.roleName") }}:</label>
<label class="boxlabel">{{ itemdetail.name }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.ownedSystem') }}:</label>
+ <label> {{ $t("userManage.RM.ownedSystem") }}:</label>
<label class="boxlabel">{{ itemdetail.depName }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.isAdmin') }}:</label>
+ <label> {{ $t("userManage.RM.isAdmin") }}:</label>
<label class="boxlabel">{{ itemdetail.admin }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.describe') }}:</label>
+ <label> {{ $t("userManage.RM.describe") }}:</label>
<label class="boxlabel">{{ itemdetail.descr }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.creationuser') }}:</label>
+ <label> {{ $t("userManage.RM.creationuser") }}:</label>
<label class="boxlabel">{{ itemdetail.createUser }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.creationtime') }}:</label>
+ <label> {{ $t("userManage.RM.creationtime") }}:</label>
<label class="boxlabel">{{ itemdetail.createTime }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.updateonuser') }}:</label>
+ <label> {{ $t("userManage.RM.updateonuser") }}:</label>
<label class="boxlabel">{{ itemdetail.UpdateUser }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.updateontime') }}:</label>
+ <label> {{ $t("userManage.RM.updateontime") }}:</label>
<label class="boxlabel">{{ itemdetail.updateTime }}</label>
</p>
<el-divider></el-divider>
<p>
- <label> {{ $t('userManage.RM.remarks') }}:</label>
+ <label> {{ $t("userManage.RM.remarks") }}:</label>
<label class="boxlabel">{{ itemdetail.bak }}</label>
</p>
<el-divider></el-divider>
</div>
-
</div>
</div>
</template>
<script>
-import moment from 'moment';
-import MyBread from '../../components/MyBread.vue';
-import roleDepTree from './roleDepTree.vue';
+import moment from "moment";
+import MyBread from "../../components/MyBread.vue";
+import roleDepTree from "./roleDepTree.vue";
import {
select_Role_ByPageAndCount,
selectdepTab,
@@ -559,8 +502,7 @@
deleteRoles,
selectDep,
updateRole,
-
-} from '../../api/api';
+} from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -570,30 +512,30 @@
data() {
return {
props: {
- label: 'name',
- value: 'id',
- children: 'children',
+ label: "name",
+ value: "id",
+ children: "children",
checkStrictly: true,
emitPath: false,
},
depList: [],
showinfoBox: false,
showCata: false,
- formLabelWidth: '120px',
+ formLabelWidth: "120px",
InsertFormdialog: false,
UpdateFormdialog: false,
roleForm: {
- depid: '',
- depValue: '',
+ depid: "",
+ depValue: "",
},
- cataName: '',
- depValue: '',
+ cataName: "",
+ depValue: "",
elTreeFlag: 0,
- path_id: '',
+ path_id: "",
tableData: [],
insertform: {
- depValue: '',
- depid: ''
+ depValue: "",
+ depid: "",
},
updateform: {},
count: 0,
@@ -612,20 +554,37 @@
insert: false,
update: false,
},
+ 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)`;
+ });
+ },
handleRouleDepList(data, node, nodeData) {
- this.roleForm.depid = data.id
+ this.roleForm.depid = data.id;
this.roleForm.depValue = data.name;
},
handleDepList(data, node, nodeData) {
-
- this.insertform.depid = data.id
+ this.insertform.depid = data.id;
this.insertform.depValue = data.name;
},
handleUpdataDepList(data, node, nodeData) {
- this.updateform.depid = data.id
+ this.updateform.depid = data.id;
this.updateform.depValue = data.name;
},
setInsertFormdialog() {
@@ -636,7 +595,7 @@
return cloneData.filter((father) => {
// 寰幆鎵�鏈夐」
let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
// 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
// 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
@@ -645,9 +604,9 @@
async getDepList() {
const data = await selectdepTab();
if (data.code != 200) {
- return this.$message.error('鍗曚綅鍒楄〃璋冪敤澶辫触');
+ return this.$message.error("鍗曚綅鍒楄〃璋冪敤澶辫触");
}
- this.depList = this.treeData(data.result)
+ this.depList = this.treeData(data.result);
},
closeDetial() {
this.showinfoBox = false;
@@ -663,7 +622,7 @@
this.itemdetail.updateTime
);
this.itemdetail.admin =
- parseInt(this.itemdetail.isAdmin) === 0 ? '鍚�' : '鏄�';
+ parseInt(this.itemdetail.isAdmin) === 0 ? "鍚�" : "鏄�";
},
handleSelectionChange(val) {
this.multipleSelection = val;
@@ -676,7 +635,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");
},
showDepTree(res) {
this.showCata = true;
@@ -686,14 +645,14 @@
this.cataName = this.$store.state.catalogueName;
this.path_id = this.$store.state.cataNode.id;
var value;
- if (this.cataName.indexOf('>') != -1) {
- var data = this.$store.state.catalogueName.split('>');
+ if (this.cataName.indexOf(">") != -1) {
+ var data = this.$store.state.catalogueName.split(">");
value = data[data.length - 1];
} else {
value = this.$store.state.catalogueName;
}
- this.$store.commit('changeCata', ''); //娓呯┖state鐨勯潰鍖呭睉
- this.$store.commit('changeNode', ''); //娓呯┖state鐨勮妭鐐瑰璞�
+ this.$store.commit("changeCata", ""); //娓呯┖state鐨勯潰鍖呭睉
+ this.$store.commit("changeNode", ""); //娓呯┖state鐨勮妭鐐瑰璞�
this.showCata = false;
switch (this.elTreeFlag) {
case 1:
@@ -711,14 +670,14 @@
}
},
async getRoleTabelData() {
- if (this.listData.tab == '') {
+ if (this.listData.tab == "") {
delete this.listData.tab;
}
this.listData.name = this.roleForm.username;
this.listData.depid = this.roleForm.depid;
const data = await select_Role_ByPageAndCount(this.listData);
if (data.code != 200) {
- this.$message.error('鍒楄〃璋冪敤澶辫触');
+ this.$message.error("鍒楄〃璋冪敤澶辫触");
}
console.log(data);
this.tableData = data.result;
@@ -728,7 +687,7 @@
this.selectData = [];
const data = await selectdepTab();
if (data.code != 200) {
- this.$message.error('涓嬫媺璋冪敤澶辫触');
+ this.$message.error("涓嬫媺璋冪敤澶辫触");
}
data.result.forEach((e) => {
if (e) {
@@ -746,8 +705,8 @@
async insertFromData() {
if (this.insertform.depValue == null) {
this.$message({
- message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
- type: 'warning',
+ message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
+ type: "warning",
});
return;
}
@@ -756,14 +715,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",
});
}
},
@@ -774,8 +733,8 @@
async updateFromData() {
if (this.updateform.depValue == null) {
this.$message({
- message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
- type: 'warning',
+ message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
+ type: "warning",
});
return;
}
@@ -785,14 +744,14 @@
this.UpdateFormdialog = false;
this.updateform = {};
this.$message({
- message: '淇敼鎴愬姛锛�',
- type: 'success',
+ message: "淇敼鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '淇敼澶辫触锛�',
- type: 'warning',
+ message: "淇敼澶辫触锛�",
+ type: "warning",
});
}
},
@@ -801,32 +760,34 @@
for (var i in this.multipleSelection) {
std.push(this.multipleSelection[i].id);
}
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヨ鑹�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await deleteRoles({ ids: std.toString() });
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヨ鑹�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await deleteRoles({ 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: '宸插彇娑堝垹闄�'
});
- });
},
handleSizeChange(val) {
this.listData.pageSize = val;
@@ -853,17 +814,25 @@
},
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;
}
},
+ },
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
},
created() {
var val = this.$store.state.currentPerms;
@@ -884,7 +853,7 @@
height: 98%;
width: 98%;
padding: 1%;
- overflow: auto;
+
.el-input {
width: 300px;
}
@@ -909,24 +878,19 @@
.inquire {
height: auto;
- padding: 10px;
- margin-top: 10px;
- margin-top: 10px;
- width: calc(100% - 22px);
+ padding: 8px;
+ margin-top: 20px;
+
border-radius: 5px;
+ margin-bottom: 20px;
+ // width: calc(100% - 22px);
+
.el-form-item {
- margin: 7px;
+ margin: 5px;
}
}
- .table_box {
- width: calc(100% - 22px);
- height: calc(60% - 6px);
- padding: 10px;
- margin-bottom: 10px;
- margin-top: 10px;
- border-radius: 5px;
- }
+
.text-center {
text-align: center;
}
diff --git a/src/views/userManage/templateManage.vue b/src/views/userManage/templateManage.vue
index a7ea54a..f97e6be 100644
--- a/src/views/userManage/templateManage.vue
+++ b/src/views/userManage/templateManage.vue
@@ -5,20 +5,24 @@
`${$t('dataManage.templateManage')}`,
]"></My-bread>
<el-divider />
- <div class="searchComp subpage_Div">
+ <div class="searchComp subpage_Div" ref="container">
<el-form
ref="ruleForm"
:model="ruleForm"
:inline="true"
>
- <el-form-item>
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item label="鍚嶇О">
<el-input
style="width:200px"
v-model="ruleForm.name"
- :placeholder="$t('common.pleaseInput')"
+
/>
- </el-form-item>
- <el-form-item style="float:right">
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
<el-button
icon="el-icon-refresh"
@click="restRefreshTable"
@@ -26,7 +30,7 @@
size="small"
>{{ $t('common.empty') }}</el-button>
</el-form-item>
- <el-form-item style="float:right">
+ <el-form-item>
<el-button
icon="el-icon-search"
@click="setRefreshTable"
@@ -34,7 +38,7 @@
size="small"
>{{ $t('common.iquery') }}</el-button>
</el-form-item>
- <el-form-item style="float:right">
+ <el-form-item>
<el-button
v-if="btnStatus.delete"
icon="el-icon-delete"
@@ -43,7 +47,7 @@
size="small"
>{{ $t('common.delete') }}</el-button>
</el-form-item>
- <el-form-item style="float:right">
+ <el-form-item>
<el-button
v-if="btnStatus.insert"
@click="setTableInsert"
@@ -52,13 +56,19 @@
size="small"
>{{ $t('common.append') }}</el-button>
</el-form-item>
+ </div>
+ </div>
+
+
+
</el-form>
</div>
- <div>
+ <div class="table_box" :style="styleVar">
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
+ height="calc(100% - 57px)"
>
<el-table-column
type="selection"
@@ -141,7 +151,7 @@
</template>
</el-table-column>
</el-table>
- <div style="margin-top:10px">
+ <div style="margin-top:25px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -426,6 +436,11 @@
insert: false,
update: false,
},
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ "height": "calc(100% - 109px)",
+ },
}
},
created() {
@@ -433,7 +448,28 @@
this.showTableData();
},
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight()
+ },
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)`;
+ });
+ },
//淇敼鍙栨秷
closeEditData() {
this.closeInsertData();
@@ -726,10 +762,13 @@
}
.searchComp {
- margin: 10px auto;
+ padding: 8px;
+ margin-top: 20px;
border-radius: 5px;
+ margin-bottom: 20px;
+
.el-form-item {
margin: 5px;
}
--
Gitblit v1.9.3