From c40e3de17653a10a06ead765813783a5614a32ce Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 16 二月 2023 17:40:43 +0800
Subject: [PATCH] 调整运维管理部分页面格式
---
src/views/userManage/resourceManage.vue | 213 +++++++++++++++++++++++++++++++----------------------
1 files changed, 124 insertions(+), 89 deletions(-)
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;
}
--
Gitblit v1.9.3