From 05d754bb09ba4aeddd60320d33d583d388434c2f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 15:38:45 +0800
Subject: [PATCH] 树形组件修改
---
src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 155 ++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 138 insertions(+), 17 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
index cf6d449..d857c46 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
@@ -1,11 +1,11 @@
<template>
<div class="member-manage">
<div class="left">
- <div style="margin-bottom: 10px">
- <!-- <el-input placeholder="璇疯緭鍏�" v-model="treeWord" size="small">
+ <!-- <div style="margin-bottom: 10px">
+ <el-input placeholder="璇疯緭鍏�" v-model="treeWord" size="small">
<el-button slot="append" icon="el-icon-search"></el-button>
- </el-input> -->
- </div>
+ </el-input>
+ </div> -->
<el-tree
ref="leftTreeNodes"
:data="treeData"
@@ -17,7 +17,7 @@
@node-click="checkNode"
@node-contextmenu="nodeContextMenu"
></el-tree>
- <div
+ <!-- <div
class="menuList"
v-show="showMenu"
:style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
@@ -28,7 +28,7 @@
<li>閲嶅懡鍚嶈妭鐐�</li>
<li @click="showMenu = false">鍏抽棴</li>
</ul>
- </div>
+ </div> -->
</div>
<div class="right">
<div class="filter-bar">
@@ -42,7 +42,7 @@
v-model="gender"
size="small"
placeholder="鎬у埆"
- style="margin: 0 10px"
+ style="margin: 0px 17px; width: 153px"
>
<el-option
v-for="item in genders"
@@ -52,10 +52,18 @@
>{{ item.name }}</el-option
>
</el-select>
- <el-button type="primary" size="small" @click="renderMemberTable"
+ <el-button
+ type="primary"
+ size="small"
+ @click="renderMemberTable"
+ class="query-btn"
>鏌ヨ</el-button
>
- <el-button type="primary" size="small" @click="resetFilter"
+ <el-button
+ type="primary"
+ size="small"
+ @click="resetFilter"
+ class="reset-btn"
>閲嶇疆</el-button
>
</div>
@@ -82,6 +90,11 @@
fit
ref="elTable"
@selection-change="tableSelection"
+ :header-cell-style="{
+ background: '#757FA2',
+ color: '#fff',
+ height: '50px',
+ }"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="濮撳悕" prop="Name" sortable>
@@ -104,6 +117,8 @@
<template slot-scope="scope">
<div>
<el-switch
+ active-color="#4B72E2"
+ inactive-color="#B7BEC8"
v-model="scope.row.UserPermissions"
@change="memberUpdate(scope.row)"
></el-switch>
@@ -114,6 +129,8 @@
<template slot-scope="scope">
<div>
<el-switch
+ active-color="#4B72E2"
+ inactive-color="#B7BEC8"
v-model="scope.row.DumpPermissions"
@change="memberUpdate(scope.row)"
></el-switch>
@@ -123,8 +140,12 @@
<el-table-column label="鎿嶄綔">
<template slot-scope="scope">
<div class="operation">
- <i class="el-icon-edit" @click="editMember(scope.row)"></i>
- <i class="el-icon-delete" @click="delMember(scope.row)"></i>
+ <div class="edit" @click="editMember(scope.row)">
+ <span class="icon iconfont"></span>
+ </div>
+ <div class="delete" @click="delMember(scope.row)">
+ <span class="icon iconfont"></span>
+ </div>
</div>
</template>
</el-table-column>
@@ -402,7 +423,7 @@
a.download = "鎵归噺瀵煎叆妯℃澘.xlsx";
a.href = blobUrl;
a.click();
- document.body.removeChild(a)
+ document.body.removeChild(a);
});
},
updateOrg() {
@@ -624,8 +645,44 @@
<style lang="scss">
.member-manage {
+ padding: 25px;
+ background: #fff;
+ // margin: 33px;
display: flex;
- padding: 20px;
+ box-sizing: border-box;box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+
+border-radius: 10px;
+ .left {
+ .el-tree--highlight-current
+ .el-tree-node.is-current
+ > .el-tree-node__content {
+ background-color: #2d52d7 !important;
+ .el-tree-node__label {
+ color: #fff;
+ }
+ }
+ .el-tree {
+ background: #f4f6f9;
+ width: 160px;
+ padding-bottom: 10px;
+
+ .el-tree-node__label {
+ font-size: 14px;
+ color: #606f8f;
+ }
+ .el-tree-node:focus > .el-tree-node__content {
+ background-color: #2d52d7 !important;
+ color: #fff !important;
+ }
+ .el-tree-node__content:hover {
+ background-color: #fff;
+ }
+
+ .el-tree-node__content {
+ height: 36px;
+ }
+ }
+ }
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
@@ -734,22 +791,86 @@
}
.right {
padding-left: 20px;
+ width: calc(100% - 109px);
+
.filter-bar {
display: flex;
- margin-bottom: 20px;
+ margin-bottom: 14px;
+ .el-input__inner {
+ border: 1px solid rgba(26, 55, 122, 0.35);
+ }
.keyword-input {
- width: 300px;
+ width: 320px;
+ }
+ button span {
+ color: #fff;
+ }
+ .reset-btn {
+ background-color: #a6b5cb !important;
+ border-color: #a6b5cb !important;
+ font-size: 13px;
+ padding: 8px 12px;
+ }
+ .query-btn {
+ background-color: #2d52d7 !important;
+ font-size: 13px;
+ padding: 8px 12px;
}
}
+
.table-area {
.actions {
- text-align: left;
+ text-align: right;
+ button span {
+ color: #fff;
+ }
+ }
+ .operation {
+ .edit {
+ background: #dea60b;
+ width: 23px;
+ height: 23px;
+ text-align: center;
+ border-radius: 23px;
+ line-height: 21px;
+ margin-right: 10px;
+ span {
+ color: #fff;
+ font-size: 12px;
+ }
+ }
+ .delete {
+ background: #D94141;
+ width: 23px;
+ height: 23px;
+ text-align: center;
+ border-radius: 23px;
+ line-height: 22px;
+ margin-right: 10px;
+ span {
+ color: #fff;
+ font-size: 12px;
+ }
+ }
+ }
+ .el-table td.el-table__cell div {
+ color: #425277;
+ }
+ .el-table.thbg {
+ margin: 14px 0;
}
.table-cell-pic {
img {
- width: 70px;
+ vertical-align: middle;
+ width: 53px;
}
}
+ .el-table .el-table__cell {
+ padding: 7.5px 0;
+ }
+ .el-table th.el-table__cell > .cell {
+ color: #fff;
+ }
}
}
}
--
Gitblit v1.8.0