From 7dd9e459530decf8a4adbdc44ed6e73850120671 Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期五, 17 二月 2023 15:27:39 +0800
Subject: [PATCH] 修改完成运维管理样式
---
src/views/AuthorizationManagement/userRoleAuthorization.vue | 311 +++++++++++++++++++++++++++++++++------------------
1 files changed, 202 insertions(+), 109 deletions(-)
diff --git a/src/views/AuthorizationManagement/userRoleAuthorization.vue b/src/views/AuthorizationManagement/userRoleAuthorization.vue
index 6df114f..3f76882 100644
--- a/src/views/AuthorizationManagement/userRoleAuthorization.vue
+++ b/src/views/AuthorizationManagement/userRoleAuthorization.vue
@@ -1,14 +1,15 @@
<template>
- <div class="menuSettings_box">
- <div class="menuSettings_tree subpage_Div">
- <My-bread :list="[
+ <div class="menuSettings_box userRoleAuthorization userRoleAuthorization1">
+ <div class="menuSettings_tree subpage_Div userRoleAuthorization_left">
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.UserRoleAuthorization')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
<div class="menuTreeBox">
-
<div class="card_tree">
<el-tree
:data="depList"
@@ -23,11 +24,18 @@
>
</el-tree>
</div>
-
</div>
</div>
- <div class="menuSettings_tree subpage_Div">
- <div style="
+ <!-- <div class="userRoleAuthorization_resize" title="鏀剁缉渚ц竟鏍�">鈰�</div> -->
+ <div
+ class="
+ menuSettings_tree
+ subpage_Div
+ userRoleAuthorization_mid userRoleAuthorization_left1
+ "
+ >
+ <div
+ style="
font-size: 14px;
color: #409eff;
line-height: 1;
@@ -35,27 +43,26 @@
position: relative;
top: 10px;
margin-left: 10px;
- ">
- {{ $t('operatManage.UserRoleAuthorizationObj.RoleTable') }}
+ "
+ >
+ {{ $t("operatManage.UserRoleAuthorizationObj.RoleTable") }}
</div>
<el-divider />
<el-table
:data="tableData"
style="width: 100%"
@row-click="singleElection"
- height="78%"
+ height="calc(100% - 124px)"
>
- <el-table-column
- align="center"
- width="55"
- >
+ <el-table-column align="center" width="55">
<template slot-scope="scope">
<!-- 鍙互鎵嬪姩鐨勪慨鏀筶abel鐨勫�硷紝浠庤�屾帶鍒堕�夋嫨鍝竴椤� -->
<el-radio
class="radio"
v-model="templateSelection"
:label="scope.row.id"
- > </el-radio>
+ > </el-radio
+ >
</template>
</el-table-column>
<el-table-column
@@ -70,10 +77,7 @@
>
</el-table-column>
</el-table>
- <div
- style="text-align: center; margin-top: 20px"
- class="pagination_box"
- >
+ <div style="text-align: center; margin-top: 20px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -86,9 +90,10 @@
</el-pagination>
</div>
</div>
- <div class="menuSettings_tree subpage_Div">
-
- <div style="
+ <!-- <div class="userRoleAuthorization_resize1" title="鏀剁缉渚ц竟鏍�">鈰�</div> -->
+ <div class="menuSettings_tree subpage_Div userRoleAuthorization_mid1">
+ <div
+ style="
font-size: 14px;
color: #409eff;
line-height: 1;
@@ -98,13 +103,13 @@
margin-left: 10px;
display: flex;
align-items: center;
- ">
+ flex-wrap: wrap;
+ "
+ >
<span>
- {{ $t('operatManage.UserRoleAuthorizationObj.userTable') }}</span>
- <div
- class="btn"
- style="margin-left: auto"
+ {{ $t("operatManage.UserRoleAuthorizationObj.userTable") }}</span
>
+ <div class="btn" style="margin-left: auto">
<el-button
v-if="menuStatus.insert"
type="success"
@@ -112,7 +117,8 @@
size="small"
:disabled="roleid == null ? true : false"
@click="adduser"
- >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button>
+ >{{ $t("operatManage.UserRoleAuthorizationObj.Added") }}</el-button
+ >
<el-button
v-if="menuStatus.delete"
type="danger"
@@ -120,7 +126,8 @@
size="small"
@click="deletesUser"
:disabled="roleid == null ? true : false"
- >{{ $t('operatManage.UserRoleAuthorizationObj.delete') }}</el-button>
+ >{{ $t("operatManage.UserRoleAuthorizationObj.delete") }}</el-button
+ >
</div>
</div>
<el-divider class="divider" />
@@ -128,13 +135,10 @@
<el-table
:data="usertableData"
style="width: 100%"
- height="78%"
+ height="calc(100% - 124px)"
@selection-change="handleSelectionChange"
>
- <el-table-column
- type="selection"
- width="55"
- > </el-table-column>
+ <el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
align="center"
type="index"
@@ -147,10 +151,7 @@
</el-table-column>
</el-table>
- <div
- style="margin-top: 20px; text-align: center"
- class="pagination_box"
- >
+ <div style="margin-top: 20px; text-align: center" class="pagination_box">
<el-pagination
@size-change="userhandleSizeChange"
@current-change="userhandleCurrentChange"
@@ -172,10 +173,7 @@
height="40vh"
@selection-change="addhandleSelectionChange"
>
- <el-table-column
- type="selection"
- width="55"
- > </el-table-column>
+ <el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
align="center"
type="index"
@@ -187,10 +185,7 @@
>
</el-table-column>
</el-table>
- <div
- style="margin-top: 20px; text-align: center"
- class="pagination_box"
- >
+ <div style="margin-top: 20px; text-align: center" class="pagination_box">
<el-pagination
@size-change="addhandleSizeChange"
@current-change="addhandleCurrentChange"
@@ -202,28 +197,20 @@
>
</el-pagination>
</div>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="dialogTableVisible = false"
- >{{
- $t('dataManage.dictionaryManageObj.cancel')
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" @click="dialogTableVisible = false">{{
+ $t("dataManage.dictionaryManageObj.cancel")
}}</el-button>
- <el-button
- size="small"
- type="primary"
- @click="addConfirm"
- >{{ $t('dataManage.dictionaryManageObj.confirm') }}</el-button>
+ <el-button size="small" type="primary" @click="addConfirm">{{
+ $t("dataManage.dictionaryManageObj.confirm")
+ }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
-import MyBread from '../../components/MyBread.vue';
+import MyBread from "../../components/MyBread.vue";
import {
queryDepTree,
select_Role_ByPageAndCount,
@@ -231,7 +218,7 @@
roleUserdeletes,
userselectByPageForRole,
roleUserinserts,
-} from '../../api/api';
+} from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -255,18 +242,18 @@
usercount: 0,
tableData: [],
// 褰撳墠閫夋嫨鐨勮鐨刬d
- templateSelection: '',
+ templateSelection: "",
// 褰撳墠閫夋嫨鐨勮鐨勬暟鎹�
checkList: [],
defaultProps: {
- children: 'children',
- label: 'name',
+ children: "children",
+ label: "name",
},
oriData: [], //鍘熷鏍戞暟鎹�
depList: [], //el鏍戞暟鎹�
backUpData: {},
- formLabelWidth: '170px',
+ formLabelWidth: "170px",
listData: {
pageIndex: 1,
pageSize: 10,
@@ -284,11 +271,105 @@
};
},
methods: {
+ //宸﹀彸鎷栧嫊
+ dragControllerDiv() {
+ let resize = document.getElementsByClassName(
+ "userRoleAuthorization_resize"
+ );
+ let left = document.getElementsByClassName("userRoleAuthorization_left");
+ let mid = document.getElementsByClassName("userRoleAuthorization_mid");
+ let box = document.getElementsByClassName("userRoleAuthorization");
+ for (let i = 0; i < resize.length; i++) {
+ // 榧犳爣鎸変笅浜嬩欢
+ resize[i].onmousedown = function (e) {
+ //棰滆壊鏀瑰彉鎻愰啋
+ resize[i].style.background = "#818181";
+ let startX = e.clientX;
+ resize[i].left = resize[i].offsetLeft;
+ // 榧犳爣鎷栧姩浜嬩欢
+ document.onmousemove = function (e) {
+ let endX = e.clientX;
+ let moveLen = resize[i].left + (endX - startX); // 锛坋ndx-startx锛�=绉诲姩鐨勮窛绂汇�俽esize[i].left+绉诲姩鐨勮窛绂�=宸﹁竟鍖哄煙鏈�鍚庣殑瀹藉害
+ let maxT = box[i].clientWidth - resize[i].offsetWidth; // 瀹瑰櫒瀹藉害 - 宸﹁竟鍖哄煙鐨勫搴� = 鍙宠竟鍖哄煙鐨勫搴�
+
+ if (moveLen < 205) moveLen = 205; // 宸﹁竟鍖哄煙鐨勬渶灏忓搴︿负32px
+ if (moveLen > maxT - 300) moveLen = maxT - 300; //鍙宠竟鍖哄煙鏈�灏忓搴︿负150px
+
+ resize[i].style.left = moveLen; // 璁剧疆宸︿晶鍖哄煙鐨勫搴�
+
+ for (let j = 0; j < left.length; j++) {
+ left[j].style.width = moveLen + "px";
+ mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
+ }
+ };
+ // 榧犳爣鏉惧紑浜嬩欢
+ document.onmouseup = function (evt) {
+ //棰滆壊鎭㈠
+ resize[i].style.background = "#d6d6d6";
+ document.onmousemove = null;
+ document.onmouseup = null;
+ resize[i].releaseCapture && resize[i].releaseCapture(); //褰撲綘涓嶅湪闇�瑕佺户缁幏寰楅紶鏍囨秷鎭氨瑕佸簲璇ヨ皟鐢≧eleaseCapture()閲婃斁鎺�
+ };
+ resize[i].setCapture && resize[i].setCapture(); //璇ュ嚱鏁板湪灞炰簬褰撳墠绾跨▼鐨勬寚瀹氱獥鍙ｉ噷璁剧疆榧犳爣鎹曡幏
+ return false;
+ };
+ }
+ },
+ dragControllerDiv1() {
+ let resize = document.getElementsByClassName(
+ "userRoleAuthorization_resize1"
+ );
+ let left = document.getElementsByClassName("userRoleAuthorization_left1");
+ let left1 = document.getElementsByClassName("userRoleAuthorization_left");
+ let mid = document.getElementsByClassName("userRoleAuthorization_mid1");
+ let box = document.getElementsByClassName("userRoleAuthorization1");
+ console.log(resize)
+ console.log(box)
+ console.log(left1)
+ for (let i = 0; i < resize.length; i++) {
+ // 榧犳爣鎸変笅浜嬩欢
+ resize[i].onmousedown = function (e) {
+ console.log(e)
+ //棰滆壊鏀瑰彉鎻愰啋
+ resize[i].style.background = "#818181";
+ let startX = e.clientX;
+ resize[i].left = resize[i].offsetLeft;
+ // 榧犳爣鎷栧姩浜嬩欢
+ document.onmousemove = function (e) {
+
+ let endX = e.clientX;
+ console.log(endX ,startX)
+ let moveLen = resize[i].left + (endX - startX) - left1[i].offsetWidth ; // 锛坋ndx-startx锛�=绉诲姩鐨勮窛绂汇�俽esize[i].left+绉诲姩鐨勮窛绂�=宸﹁竟鍖哄煙鏈�鍚庣殑瀹藉害
+ let maxT = box[i].clientWidth - resize[i].offsetWidth; // 瀹瑰櫒瀹藉害 - 宸﹁竟鍖哄煙鐨勫搴� = 鍙宠竟鍖哄煙鐨勫搴�
+
+ if (moveLen < 205) moveLen = 205; // 宸﹁竟鍖哄煙鐨勬渶灏忓搴︿负32px
+ if (moveLen > maxT - 300) moveLen = maxT - 300; //鍙宠竟鍖哄煙鏈�灏忓搴︿负150px
+
+ resize[i].style.left = moveLen; // 璁剧疆宸︿晶鍖哄煙鐨勫搴�
+
+ for (let j = 0; j < left.length; j++) {
+ left[j].style.width = moveLen + "px";
+ mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
+ }
+ };
+ // 榧犳爣鏉惧紑浜嬩欢
+ document.onmouseup = function (evt) {
+ //棰滆壊鎭㈠
+ resize[i].style.background = "#d6d6d6";
+ document.onmousemove = null;
+ document.onmouseup = null;
+ resize[i].releaseCapture && resize[i].releaseCapture(); //褰撲綘涓嶅湪闇�瑕佺户缁幏寰楅紶鏍囨秷鎭氨瑕佸簲璇ヨ皟鐢≧eleaseCapture()閲婃斁鎺�
+ };
+ resize[i].setCapture && resize[i].setCapture(); //璇ュ嚱鏁板湪灞炰簬褰撳墠绾跨▼鐨勬寚瀹氱獥鍙ｉ噷璁剧疆榧犳爣鎹曡幏
+ return false;
+ };
+ }
+ },
addConfirm() {
- this.$confirm('纭畾鏄惁鏂板', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
+ this.$confirm("纭畾鏄惁鏂板", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
})
.then(async () => {
let arr = [];
@@ -297,16 +378,16 @@
});
const data = await roleUserinserts(arr);
if (data.code !== 200) {
- return this.$message.error('鏂板澶辫触');
+ return this.$message.error("鏂板澶辫触");
}
this.$message({
- type: 'success',
- message: '鏂板鎴愬姛!',
+ type: "success",
+ message: "鏂板鎴愬姛!",
});
this.dialogTableVisible = false;
this.getuserList();
})
- .catch(() => { });
+ .catch(() => {});
},
adduser() {
this.dialogTableVisible = true;
@@ -318,31 +399,33 @@
this.usermultipleSelection.forEach((e) => {
arr.push(e.id);
});
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ潈闄�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await roleUserdeletes({ ids: arr.toString() });
- if (data.code == 200) {
- this.InsertFormdialog = false;
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ潈闄�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await roleUserdeletes({ ids: arr.toString() });
+ if (data.code == 200) {
+ this.InsertFormdialog = false;
+ this.$message({
+ message: "鍒犻櫎鎴愬姛锛�",
+ type: "success",
+ });
+ this.getuserList();
+ } else {
+ this.$message({
+ message: "鍒犻櫎澶辫触锛�",
+ type: "warning",
+ });
+ }
+ })
+ .catch(() => {
this.$message({
- message: '鍒犻櫎鎴愬姛锛�',
- type: 'success',
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
});
- this.getuserList();
- } else {
- this.$message({
- message: '鍒犻櫎澶辫触锛�',
- type: 'warning',
- });
- }
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
});
- });
// const data = await roleUserdeletes({ ids: arr.toString() });
// if (data.code !== 200) {
// return this.$message.error('鍒犻櫎澶辫触');
@@ -405,7 +488,7 @@
const data = await queryDepTree();
if (data.code !== 200) {
- return this.$message.error('璇锋眰鍗曚綅鎶ラ敊');
+ return this.$message.error("璇锋眰鍗曚綅鎶ラ敊");
}
this.depList = this.treeData(data.result);
},
@@ -414,7 +497,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灞炴�э紝骞惰祴鍊�
return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
});
},
@@ -444,7 +527,7 @@
this.addlistData.debid = this.debid;
const data = await userselectByPageForRole(this.addlistData);
if (data.code !== 200) {
- return this.$message.error('鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒');
+ return this.$message.error("鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒");
}
this.gridData = data.result;
this.addcount = data.count;
@@ -453,7 +536,7 @@
async getuserList() {
const data = await roleUserselectByPageForRole(this.userlistData);
if (data.code !== 200) {
- return this.$message.error('鐢ㄦ埛鍒楄〃璇锋眰閿欒');
+ return this.$message.error("鐢ㄦ埛鍒楄〃璇锋眰閿欒");
}
this.usertableData = data.result;
this.usercount = data.count;
@@ -462,20 +545,20 @@
async getRole() {
const data = await select_Role_ByPageAndCount(this.listData);
if (data.code !== 200) {
- return this.$message.error('鐢ㄦ埛瑙掕壊璇锋眰閿欒');
+ return this.$message.error("鐢ㄦ埛瑙掕壊璇锋眰閿欒");
}
this.tableData = data.result;
this.count = data.count;
},
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;
}
@@ -491,6 +574,11 @@
}
this.getMenuTree();
},
+ mounted() {
+ //宸﹀彸鎷栧嫊
+ // this.dragControllerDiv();
+ // this.dragControllerDiv1();
+ },
};
</script>
<style lang="less" scoped>
@@ -499,7 +587,7 @@
height: 98%;
width: 98%;
padding: 1%;
-
+// position: relative;
display: flex;
justify-content: space-between;
@@ -510,8 +598,6 @@
padding: 10px;
border-radius: 10px;
box-sizing: border-box;
- overflow: hidden;
-
.saveBtn {
position: absolute;
left: 250px;
@@ -522,11 +608,18 @@
overflow: auto;
}
}
-
.divider {
margin-top: 8px;
}
}
+.el-table,
+.el-table /deep/ .el-table__expanded-cell {
+ background-color: transparent !important;
+}
+.el-table /deep/ th,
+.el-table /deep/ tr {
+ background-color: transparent !important;
+}
</style>
--
Gitblit v1.9.3