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/menuRoleAuthorization.vue | 201 ++++++++++++-------
src/views/AuthorizationManagement/userRoleAuthorization.vue | 311 ++++++++++++++++++++----------
src/views/AuthorizationManagement/roleResAuthorization.vue | 12 +
src/assets/css/content.css | 11 +
src/views/AuthorizationManagement/roleMenuAuthorization.vue | 11 +
5 files changed, 358 insertions(+), 188 deletions(-)
diff --git a/src/assets/css/content.css b/src/assets/css/content.css
index 1a2899e..358e39a 100644
--- a/src/assets/css/content.css
+++ b/src/assets/css/content.css
@@ -24,6 +24,9 @@
}
/*鎷栨嫿鍖篸iv鏍峰紡*/
+.menuRoleAuthorization_resize,
+.userRoleAuthorization_resize1,
+.userRoleAuthorization_resize,
.resize {
cursor: col-resize;
float: left;
@@ -39,9 +42,15 @@
/*z-index: 99999;*/
font-size: 32px;
color: white;
+
}
-
+.menuRoleAuthorization_resize{
+ /* left: 10px; */
+}
/*鎷栨嫿鍖洪紶鏍囨偓鍋滄牱寮�*/
+.menuRoleAuthorization_resize,
+.userRoleAuthorization_resize1,
+.userRoleAuthorization_resize,
.resize:hover {
color: #444444;
}
diff --git a/src/views/AuthorizationManagement/menuRoleAuthorization.vue b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
index 6f66b42..3c7ffeb 100644
--- a/src/views/AuthorizationManagement/menuRoleAuthorization.vue
+++ b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
@@ -1,5 +1,5 @@
<template>
- <div class="menuSettings_box">
+ <div class="menuSettings_box menuRoleAuthorization">
<!-- <My-bread
:list="[
`${$t('operatManage.operatManage')}`,
@@ -8,15 +8,16 @@
]"
></My-bread>
<el-divider /> -->
- <div class="menuSettings_tree subpage_Div">
- <My-bread :list="[
+ <div class="menuSettings_tree subpage_Div menuRoleAuthorization_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"
@@ -31,10 +32,10 @@
>
</el-tree>
</div>
-
</div>
</div>
- <div class="menuTreeBox ">
+ <!-- <div class="menuRoleAuthorization_resize" title="鏀剁缉渚ц竟鏍�">鈰�</div> -->
+ <div class="menuTreeBox menuRoleAuthorization_mid">
<!-- <div class="left_tree subpage_Div">
<el-tree
:data="depList"
@@ -61,11 +62,12 @@
margin-left: 10px;
display: flex;
align-items: center;
+ flex-wrap: wrap;
"
>
<span>
{{
- $t('operatManage.UserRoleAuthorizationObj.PermissionTable')
+ $t("operatManage.UserRoleAuthorizationObj.PermissionTable")
}}</span
>
<div class="btn" style="margin-left: auto">
@@ -76,9 +78,8 @@
size="small"
:disabled="roleid == null ? true : false"
@click="adduser"
-
>{{
- $t('operatManage.UserRoleAuthorizationObj.Added')
+ $t("operatManage.UserRoleAuthorizationObj.Added")
}}</el-button
>
<el-button
@@ -89,7 +90,7 @@
@click="deletesUser"
:disabled="roleid == null ? true : false"
>{{
- $t('operatManage.UserRoleAuthorizationObj.delete')
+ $t("operatManage.UserRoleAuthorizationObj.delete")
}}</el-button
>
</div>
@@ -98,7 +99,7 @@
<el-table
:data="tableData"
style="width: 100%"
- height="77%"
+ height="calc(100% - 124px)"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
@@ -115,9 +116,7 @@
</el-table-column>
</el-table>
- <div
- class="pagination_box"
- >
+ <div class="pagination_box">
<el-pagination
@size-change="userhandleSizeChange"
@current-change="userhandleCurrentChange"
@@ -212,28 +211,26 @@
</el-pagination>
</div>
<div slot="footer" class="dialog-footer">
- <el-button size="small" @click="dialogTableVisible = false">{{
- $t('dataManage.dictionaryManageObj.cancel')
+ <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 {
selectMenuRecursives,
select_menuAuth_ByPageAndCount,
menuAuthDeletes,
select_AuthMenu_ByPageAndCount,
menuAuthinserts,
-} from '../../api/api';
+} from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -262,18 +259,18 @@
usercount: 0,
tableData: [],
// 褰撳墠閫夋嫨鐨勮鐨刬d
- templateSelection: '',
+ templateSelection: "",
// 褰撳墠閫夋嫨鐨勮鐨勬暟鎹�
checkList: [],
defaultProps: {
- children: 'children',
- label: 'cnName',
+ children: "children",
+ label: "cnName",
},
oriData: [], //鍘熷鏍戞暟鎹�
depList: [], //el鏍戞暟鎹�
backUpData: {},
- formLabelWidth: '170px',
+ formLabelWidth: "170px",
listData: {
pageIndex: 1,
pageSize: 10,
@@ -286,6 +283,50 @@
};
},
methods: {
+ //宸﹀彸鎷栧嫊
+ dragControllerDiv() {
+ var resize = document.getElementsByClassName(
+ "menuRoleAuthorization_resize"
+ );
+ var left = document.getElementsByClassName("menuRoleAuthorization_left");
+ var mid = document.getElementsByClassName("menuRoleAuthorization_mid");
+ var box = document.getElementsByClassName("menuRoleAuthorization");
+ for (let i = 0; i < resize.length; i++) {
+ // 榧犳爣鎸変笅浜嬩欢
+ resize[i].onmousedown = function (e) {
+ //棰滆壊鏀瑰彉鎻愰啋
+ resize[i].style.background = "#818181";
+ var startX = e.clientX;
+ resize[i].left = resize[i].offsetLeft;
+ // 榧犳爣鎷栧姩浜嬩欢
+ document.onmousemove = function (e) {
+ var endX = e.clientX;
+ var moveLen = resize[i].left + (endX - startX); // 锛坋ndx-startx锛�=绉诲姩鐨勮窛绂汇�俽esize[i].left+绉诲姩鐨勮窛绂�=宸﹁竟鍖哄煙鏈�鍚庣殑瀹藉害
+ var 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;
+ };
+ }
+ },
/**
* sws
*/
@@ -295,7 +336,7 @@
//鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
const data = await selectMenuRecursives({ name: menuStartName });
if (data.code !== 200) {
- return this.$message.error('璇锋眰鍗曚綅鎶ラ敊');
+ return this.$message.error("璇锋眰鍗曚綅鎶ラ敊");
}
this.depList = this.treeData(data.result);
@@ -305,7 +346,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; // 杩斿洖涓�绾ц彍鍗�
});
},
@@ -332,10 +373,10 @@
},
addConfirm() {
- this.$confirm('纭畾鏄惁鏂板', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
+ this.$confirm("纭畾鏄惁鏂板", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
})
.then(async () => {
let arr = [];
@@ -345,11 +386,11 @@
const data = await menuAuthinserts(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.getRole();
@@ -366,31 +407,33 @@
this.usermultipleSelection.forEach((e) => {
arr.push(e.id);
});
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ潈闄�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await menuAuthDeletes({ ids: arr.toString() });
- if (data.code == 200) {
- this.InsertFormdialog = false;
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ潈闄�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await menuAuthDeletes({ ids: arr.toString() });
+ if (data.code == 200) {
+ this.InsertFormdialog = false;
+ this.$message({
+ message: "鍒犻櫎鎴愬姛锛�",
+ type: "success",
+ });
+ this.getRole();
+ } else {
+ this.$message({
+ message: "鍒犻櫎澶辫触锛�",
+ type: "warning",
+ });
+ }
+ })
+ .catch(() => {
this.$message({
- message: '鍒犻櫎鎴愬姛锛�',
- type: 'success',
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
});
- this.getRole();
- } else {
- this.$message({
- message: '鍒犻櫎澶辫触锛�',
- type: 'warning',
- });
- }
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
});
- });
// const data = await menuAuthDeletes({ ids: arr.toString() });
// if (data.code !== 200) {
// return this.$message.error('鍒犻櫎澶辫触');
@@ -406,7 +449,7 @@
this.addlistData.menuid = this.roleid;
const data = await select_AuthMenu_ByPageAndCount(this.addlistData);
if (data.code !== 200) {
- return this.$message.error('鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒');
+ return this.$message.error("鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒");
}
this.gridData = data.result;
this.addcount = data.count;
@@ -445,20 +488,20 @@
async getRole() {
const data = await select_menuAuth_ByPageAndCount(this.listData);
if (data.code !== 200) {
- return this.$message.error('鐢ㄦ埛瑙掕壊璇锋眰閿欒');
+ return this.$message.error("鐢ㄦ埛瑙掕壊璇锋眰閿欒");
}
this.tableData = data.result;
this.usercount = 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;
}
@@ -474,6 +517,9 @@
}
this.getMenuTree();
},
+ mounted() {
+ // this.dragControllerDiv();
+ },
};
</script>
<style lang="less" scoped>
@@ -483,43 +529,48 @@
width: 98%;
padding: 1%;
border-radius: 10px;
-
+ position: relative;
display: flex;
- justify-content: space-between;
-
+ // justify-content: space-between;
+
.menuTreeBox {
width: 100%;
- height: 91%;
+ height: 98%;
.left_tree {
width: 29%;
height: 92%;
padding: 10px;
-
+
border-radius: 5px;
float: left;
overflow-y: auto;
border-radius: 10px;
-
}
.right_menu {
border-radius: 10px;
width: 97%;
height: 100%;
padding: 10px;
-
+
border-radius: 5px;
float: right;
}
}
-
-
-
+
.divider {
margin-top: 8px;
}
}
-.subpage_Div{
+.subpage_Div {
border-radius: 10px;
}
+.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>
\ No newline at end of file
diff --git a/src/views/AuthorizationManagement/roleMenuAuthorization.vue b/src/views/AuthorizationManagement/roleMenuAuthorization.vue
index 70cb1bf..1221f5a 100644
--- a/src/views/AuthorizationManagement/roleMenuAuthorization.vue
+++ b/src/views/AuthorizationManagement/roleMenuAuthorization.vue
@@ -46,6 +46,7 @@
style="width: 100%"
@row-click="singleElection"
highlight-current-row
+ height="calc(100% - 135px)"
>
<el-table-column
align="center"
@@ -149,7 +150,7 @@
:data="menuTableData"
stripe
style="width: 100%"
- height="78%"
+ height="calc(100% - 124px)"
@selection-change="handleSelectionChange"
>
<el-table-column
@@ -568,5 +569,13 @@
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>
diff --git a/src/views/AuthorizationManagement/roleResAuthorization.vue b/src/views/AuthorizationManagement/roleResAuthorization.vue
index 787ecae..6a75c3b 100644
--- a/src/views/AuthorizationManagement/roleResAuthorization.vue
+++ b/src/views/AuthorizationManagement/roleResAuthorization.vue
@@ -40,7 +40,7 @@
style="width: 100%"
@row-click="singleElection"
highlight-current-row
- height="78%"
+ height="calc(100% - 124px)"
>
<el-table-column
align="center"
@@ -127,7 +127,7 @@
:data="usertableData"
stripe
style="width: 100%"
- height="78%"
+ height="calc(100% - 124px)"
@selection-change="handleSelectionChange"
>
<el-table-column
@@ -702,4 +702,12 @@
}
}
}
+.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>
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