组织管理、角色管理UI修改

src/components/Dropdown/index.vue

@@ -0,0 +1,47 @@
+<template>
+    <el-dropdown trigger="click" class="custom-tree-menu" size="small">
+        <i class="el-icon-more rotate " />
+        <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-for='(item, index) in events' :key="index" :divided="index > 0"
+                @click.native="clickMenu(item)">
+                {{ item.label }}
+            </el-dropdown-item>
+        </el-dropdown-menu>
+    </el-dropdown>
+</template>
+<script>
+export default {
+    props: {
+        events: {
+            type: Array
+        },
+        data: {
+            type: Object
+        }
+    },
+    methods: {
+        clickMenu(item) {
+            this.$emit('itemClick',item.funcName, this.data);
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.el-icon-more:before {
+    content: "\E794";
+    color: #c0c4cc;
+    font-size: 16px;
+}
+
+.rotate {
+    cursor: pointer;
+    margin-left: 5px;
+    transform: rotate(90deg);
+    vertical-align: bottom;
+
+    &:focus {
+        border-radius: 2em;
+        background-color: rgba(130, 132, 138, 0.2);
+    }
+}
+</style>

src/components/home/MainFrame.vue

@@ -52,7 +52,7 @@ export default {
   top: 0px;
   height: 64px !important;
   line-height: 20px;
-  background-image: url('@/assets/images/background@3x.png');
+  background-image: url('@/assets/background/background@3x.png');
   text-align: center;
   box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.15);
 }

src/layout/Navbar.vue

@@ -11,10 +11,10 @@
       </el-select>
     </div>
     <div v-show="isLogin" class="right-menu">
-      <el-image class="labtap" :src="require('@/assets/images/diannao@3x.png')"></el-image>
-      <el-image class="phone" :src="require('@/assets/images/shouji-4@3x.png')"></el-image>
-      <el-image class="help" :src="require('@/assets/images/help@3x.png')"></el-image>
-      <el-image class="notification" :src="require('@/assets/images/tongzhi@3x.png')"></el-image>
+      <el-image class="labtap" :src="tips.labtap"></el-image>
+      <el-image class="phone" :src="tips.phone"></el-image>
+      <el-image class="help" :src="tips.help"></el-image>
+      <el-image class="notification" :src="tips.notification"></el-image>
       <div class="userinfo">
         <el-avatar :size="35" :src="circleUrl"></el-avatar>
         <el-dropdown>
@@ -22,7 +22,6 @@
             <el-icon class="el-icon-user"></el-icon>
             <span style="display: inline-block;margin-left: 8px"></span>
           </el-button>
-          <!--|||-->
           <el-dropdown-menu></el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -48,7 +47,13 @@ export default {
       opened: false,
       name: "test",
       circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-      isCollapse: false
+      isCollapse: false,
+      tips:{
+        labtap:require('@/assets/tips/diannao@3x.png'),
+        phone:require('@/assets/tips/shouji-4@3x.png'),
+        help:require('@/assets/tips/help@3x.png'),
+        notification:require('@/assets/tips/tongzhi@3x.png')
+      }
     }
   },
   mounted(){

src/layout/Sidebar.vue

@@ -49,7 +49,7 @@ export default {
     return {
       menus: [
         {
-          url: require("@/assets/images/userManagement@3x.png"),
+          url: require("@/assets/menu/userManagement@3x.png"),
           name: "用户管理",
           submenus: [
             {
@@ -63,12 +63,12 @@ export default {
           ],
         },
         {
-          url: require("@/assets/images/roleManagement@3x.png"),
+          url: require("@/assets/menu/roleManagement@3x.png"),
           name: "角色管理",
           path: "/home/role",
         },
         {
-          url: require("@/assets/images/systemConfiguration@3x.png"),
+          url: require("@/assets/menu/systemConfiguration@3x.png"),
           name: "系统配置",
           path: "/home/system",
           submenus: [
@@ -91,7 +91,7 @@ export default {
           ],
         },
         {
-          url: require("@/assets/images/deviceManagement@3x.png"),
+          url: require("@/assets/menu/deviceManagement@3x.png"),
           name: "设备管理",
           path: "/home/device",
           submenus: [
@@ -106,7 +106,7 @@ export default {
           ],
         },
         {
-          url: require("@/assets/images/dataManagement@3x.png"),
+          url: require("@/assets/menu/dataManagement@3x.png"),
           name: "数据管理",
           path: "/home/data",
           submenus: [
@@ -125,12 +125,12 @@ export default {
           ],
         },
         {
-          url: require("@/assets/images/serviceManagement@3x.png"),
+          url: require("@/assets/menu/serviceManagement@3x.png"),
           name: "服务管理",
           path: "/home/service",
         },
         {
-          url: require("@/assets/images/securityManagement@3x.png"),
+          url: require("@/assets/menu/securityManagement@3x.png"),
           name: "安全管理",
           path: "/home/security",
           submenus: [

src/router/index.js

@@ -45,7 +45,7 @@ const routes = [
         path: 'role',
         name: 'role',
         meta: { requireAuth: true },
-        component: () => import('../views/permissionManagement/roleOverview.vue')
+        component: () => import('../views/permissionManagement/index.vue')
       },
       {
         path: 'system',

src/views/dataManagement/statementConfig.vue

@@ -253,7 +253,6 @@ export default {
         : (this.$refs.popupRef.formData.introduction = data.introduction);
     },
     deleteTemplate(data) {
-      console.log(data);
       deleteSingleTemplate(data.id).then((res) => {
         if (res.data.code === 0) {
           this.$message.success("模板已删除!");

src/views/login/index.vue

@@ -199,7 +199,7 @@ export default {
     background-size: 100% 100%;
     position: fixed;
     overflow: hidden;
-    background-image: url("../../assets/images/background@2x.png")
+    background-image: url("../../assets/background/background@2x.png")
 }
 
 .title-container {

src/views/permissionManagement/decisiongroup/index.vue

@@ -1,33 +1,79 @@
 <template>
-    <div class="container">
+    <div style="position: relative; height: 100%;">
         <div class="header">
-            <el-button>权限详情</el-button>
-            <el-button>成员列表</el-button>
+            <el-button ref="buttonFocus" class="roleDetail" @click="Show1()">权限详情</el-button>
+            <el-button class="roleMember" @click="Show2()">成员列表</el-button>
         </div>
-        <test></test>
+        <rolemembers-list v-if="memberShow"></rolemembers-list>
+        <permission-detail v-if="detailShow"></permission-detail>
     </div>
 </template>
 
 <script>
-import test from './rolemembersList'
+import PermissionDetail from './permissionDetail';
+import RolemembersList from './rolemembersList';
 export default {
-    components: { test },
+    components: { RolemembersList, PermissionDetail },
     data() {
-        return {}
+        return {
+            memberShow:false,
+            detailShow:true
+        }
+    },
+    mounted(){
+        this.$refs.buttonFocus.$el.focus();
+    },
+    methods:{
+        Show1(){
+            this.detailShow = true;
+            this.memberShow = false;
+        },
+        Show2(){
+            this.detailShow = false;
+            this.memberShow = true;
+        },
     }
 }
 </script>
 <style lang="less" scoped>
-.container{
-
-}
 .header {
     text-align: left;
     padding: 15px;
     font-size: 25px;
-    margin-top: 40px;
-    .el-button {
-        border-radius: 50px;
-    }
+
+  
+    .roleDetail{
+            width: 100px;
+            height: 35px;
+            line-height: 20px;
+            border-radius: 20px;
+            background-color: #FFFFFF;
+            color: #C8C8C8;
+            font-size: 14px;
+            text-align: center;
+            padding: 5px;
+        }
+
+        .roleDetail:focus {
+            background-color: #2EA8E6;
+            color: #FFFFFF;
+        }
+
+        .roleMember {
+            width: 100px;
+            height: 35px;
+            line-height: 20px;
+            border-radius: 20px;
+            background-color: #FFFFFF;
+            color: #C8C8C8;
+            font-size: 14px;
+            text-align: center;
+            padding: 5px;
+        }
+
+        .roleMember:focus {
+            background-color: #2EA8E6;
+            color: #FFFFFF;
+        }
 }
 </style>

src/views/permissionManagement/decisiongroup/rolemembersList.vue

@@ -1,8 +1,7 @@
 <template>
     <div>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-            @selection-change="handleSelectionChange">
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
+            :cell-style="{ textAlign: 'center' }" style="width: 100%" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50">
             </el-table-column>
             <el-table-column prop="rolename" label="角色名">
@@ -21,19 +20,17 @@
                 </template>
             </el-table-column>
             <el-table-column prop="operation" label="操作">
-                <el-button size="mini" type="text">编辑</el-button>
-                <el-button size="mini" type="text">删除</el-button>
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" style="color: #2ea8e6"
+                        v-show="scope.row.rolename == null ? false : true" @click="userInfoEdit(scope.row)">编辑</el-button>
+                    <el-button size="mini" type="text" style="color: #2ea8e6"
+                        v-show="scope.row.rolename == null ? false : true" @click="deleteUser(scope.row)">删除</el-button>
+                </template>
             </el-table-column>
         </el-table>
         <div class="bottom">
-            <div>
-                <checkbox class="checkbox"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
-                <el-button class="delete" type="text">批量删除</el-button>
-            </div>
-            <page class="page"></page>
+            <el-button class="delete" type="text">批量删除</el-button>
+            <page class="page" :paginationData="paginationData"></page>
         </div>
     </div>
 </template>
@@ -45,34 +42,49 @@ export default {
     components: { checkbox, page },
     data() {
         return {
+            currentPageSize: 10,
+            currentPage: 1,
+            paginationData: {
+                pageSize: 10,
+                pagerCount: 5,
+                currentPage: 1,
+                pageSizes: [5, 10, 20, 30],
+                total: 0,
+                currentChange: (val) => {
+                    this.getTableData(val);
+                },
+                handleSizeChange: (val) => {
+                    this.handleSizeChange(val);
+                },
+            },
             tableData: [{
                 rolename: 'admin',
                 phone_num: '12345678901',
                 e_mail: 'admin@xxxxx.com',
                 working_address: '北京电信规划设计院',
-                registed_time:'2022-01-01 18：00',
-                status:true
+                registed_time: '2022-01-01 18：00',
+                status: true
             }, {
                 rolename: 'admin',
                 phone_num: '12345678901',
                 e_mail: 'admin@xxxxx.com',
                 working_address: '北京电信规划设计院',
-                registed_time:'2022-01-01 18：00',
-                status:false
+                registed_time: '2022-01-01 18：00',
+                status: false
             }, {
                 rolename: 'admin',
                 phone_num: '12345678901',
                 e_mail: 'admin@xxxxx.com',
                 working_address: '北京电信规划设计院',
-                registed_time:'2022-01-01 18：00',
-                status:true
-            },{
+                registed_time: '2022-01-01 18：00',
+                status: true
+            }, {
                 rolename: 'admin',
                 phone_num: '12345678901',
                 e_mail: 'admin@xxxxx.com',
                 working_address: '北京电信规划设计院',
-                registed_time:'2022-01-01 18：00',
-                status:false
+                registed_time: '2022-01-01 18：00',
+                status: false
             }],
             multipleSelection: [],
             show: true
@@ -84,6 +96,12 @@ export default {
         },
         handleClick() {
             //
+        },
+        getTableData(page){
+
+        },
+        handleSizeChange(){
+            //
         }
     }
 }
@@ -94,60 +112,75 @@ export default {
     padding: 20px;
     font-size: 25px;
 }
+
 .el-tag {
     width: 12px;
     height: 12px;
     border-radius: 100px;
     padding: 0;
 }
-.bottom {
-        position: absolute;
-        top: 700px;
-        //left: 330px;
-        height: 50px;
-        width: 87%;
-        line-height: 20px;
-        background-color: rgba(255, 255, 255, 1);
-        text-align: center;
 
-        .checkbox {
-            position: absolute;
-            left: 29px;
-            top: 15px;
-            font-size: 14px;
-        }
+.el-table {
+    position: relative;
+    left: 0;
+    border: 1px solid #f0f2f2;
+    font-size: 0.95rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #b2b2b2;
+    background: rgba(255, 255, 255, 0.8);
 
-        .check-cancel {
-            position: absolute;
-            // line-height: 20px;
-            font-size: 14px;
-            text-align: center;
-            left: 140px;
-            top: 10px;
+    /deep/th {
+        background: #f7fbff;
+    }
+
+    /deep/.el-checkbox {
+        color: #b2b2b2;
+
+        .el-checkbox__input.is-checked+.el-checkbox__label {
+            color: #2ea8e6;
         }
 
-        .bottom_button {
-            position: absolute;
-            left: 200px;
-            margin-top: 15px;
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+            width: 70%;
+            height: 70%;
+            background: #2ea8e6;
+            border-radius: 0;
+            transform: rotate(0deg) scaleY(1);
+            position: static;
+            // border: 1px solid #8DD9FF;
+        }
 
-            .delete {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
+        .el-checkbox__inner {
+            border: 1px solid #8dd9ff;
+            background: rgba(0, 170, 255, 0);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: static;
 
-            .disabled {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
+            &::after {
+                transition: 0ms;
             }
+        }
 
-            .export {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
+        .el-checkbox__label {
+            padding-left: 0;
+            font-size: 15px;
+            position: absolute;
+            top: 1px;
+            left: 25px;
         }
     }
-</style>
+}
+
+.bottom {
+    position: absolute;
+    left: 20px;
+    right: 16px;
+    bottom: 20px;
+    height: 50px;
+    line-height: 20px;
+    background-color: #ffffff;
+    text-align: center;
+}</style>

src/views/permissionManagement/index.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" :filter-node-method="filterNode"
+                @node-click="handleNodeClick">
+                <span slot-scope="{node,data}">
+                    <el-image :src="data.url"></el-image>
+                    <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
+                    <span class="operate_btns">
+                        <dropdown :events="subMenuEvents" :data="{ node, data }"
+                            @itemClick="dropDownClick"></dropdown>
+                    </span>
+                </span>
+            </el-tree>
+            <el-button @click="addCompany" style="color: #fff; background: #3da0d6"><i
+                    class="el-icon-s-order"></i>添加角色</el-button>
+        </div>
+        <div class="right-pane">
+            <overView v-if="viewShow"></overView>
+            <roleDetail v-if="roleShow"></roleDetail>
+        </div>
+    </div>
+</template>
+<script>
+import overView from './roleOverview';
+import dropdown from '@/components/Dropdown/index';
+import roleDetail from './decisiongroup/index';
+export default {
+    components: { overView, dropdown, roleDetail },
+    data() {
+        return {
+            filterText: '',
+            viewShow: true,
+            roleShow:false,
+            data: [{
+                id: 1,
+                label: '决策组-1',
+                url: require('@/assets/tree/user-group@3x.png'),
+            }, {
+                id: 2,
+                label: '决策组-2',
+                url: require('@/assets/tree/user-group@3x.png')
+            },
+            {
+                id: 3,
+                label: '管理员组',
+                url: require('@/assets/tree/user-group@3x.png')
+            }, {
+                id: 4,
+                label: '普通用户组',
+                url: require('@/assets/tree/user-group@3x.png')
+            }],
+            subMenuEvents: [
+                { label: '新建', funcName: 'addNode' },
+                { label: '上移', funcName: 'moveUp' },
+                { label: '下移', funcName: 'moveDown' },
+                { label: '编辑', funcName: 'editNode' },
+                { label: '删除', funcName: 'removeNode' }
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            currentNode: {}
+        }
+    },
+    
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        handleNodeClick(data) {
+            this.roleShow = true;
+            this.viewShow = false;
+
+        },
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+        handleClick() {
+
+        },
+        addCompany() {
+
+        },
+        dropDownClick(funcName, data) {
+            this.currentNode = data;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: relative;
+    display: flex;
+    height: 100%;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+        height: calc(98% - 30px);
+
+        .el-tree {
+            margin-top: 10px;
+            height: calc(98% - 30px);
+            background-color: #FAFAFA;
+
+            /deep/.el-tree-node__content {
+                align-items: center;
+                height: 30px;
+                cursor: pointer;
+                font-size: 16px;
+                position: relative;
+                color: #999999;
+                padding-top: 10px;
+
+                .operate_btns {
+                    position: absolute;
+                    right: 20px;
+                    display: none;
+                }
+
+                &:hover,
+                :focus-within {
+                    background-color: #f7fbff;
+
+                    .operate_btns {
+                        display: inline;
+                    }
+                }
+            }
+        }
+    }
+
+    .el-button {
+        position: absolute;
+        left: 25px;
+        bottom: 40px;
+        width: 250px;
+        background-color: rgb(131, 208, 243);
+        text-align: center;
+        font-size: 16px;
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        height: -webkit-fill-available;
+        margin-right: 20px;
+    }
+}
+</style>

src/views/permissionManagement/roleOverview.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div>
         <div class="header">
             <p class="info">角色总览</p>
             <el-input class="searchBox" placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
@@ -20,8 +20,7 @@
             <el-table-column prop="operation" label="操作">
                 <template slot-scope="scope">
                     <el-button size="mini" type="text" style="color: #2ea8e6" @click="roleDetail(scope.row)">查看</el-button>
-                    <el-button size="mini" type="text" style="color: #2ea8e6"
-                        @click="roleEdit(scope.row)">编辑</el-button>
+                    <el-button size="mini" type="text" style="color: #2ea8e6" @click="roleEdit(scope.row)">编辑</el-button>
                     <el-button size="mini" type="text" style="color: #2ea8e6" @click="deleteRole(scope.row)">删除</el-button>
                 </template>
             </el-table-column>
@@ -90,15 +89,15 @@ export default {
                 page,
                 this.currentPageSize
             ).then((res) => {
-                if (res.data.code === 0 && res.data.data.length > 0 ) {
+                if (res.data.code === 0 && res.data.data.length > 0) {
                     this.paginationData.total = res.data.total;
                     console.log(res);
                     this.tableData = res.data.data.map((e) => {
                         return {
-                            rolename:e.rolename,
-                            role_desc:e.description,
-                            role_members:e.members,
-                            associated_ORN:e.org,
+                            rolename: e.rolename,
+                            role_desc: e.description,
+                            role_members: e.members,
+                            associated_ORN: e.org,
                         }
                     })
                 }
@@ -111,161 +110,150 @@ export default {
         batchDelete() {
 
         },
-        deleteRole(){
+        deleteRole() {
 
         },
-        roleEdit(){
+        roleEdit() {
 
         },
-        roleDetail(){
+        roleDetail() {
 
         }
     }
 }
 </script>
 <style lang="less" scoped>
-.container {
-    position: relative;
-    height: 100%;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+.header {
+    padding-top: 20px;
+    display: flex;
 
-    .header {
-        padding-top: 20px;
-        display: flex;
+    .info {
+        padding: 20px 20px 20px 40px;
+        font-size: 25px;
+    }
 
-        .info {
-            padding: 20px 20px 20px 40px;
-            font-size: 25px;
-        }
+    .searchBox {
+        position: relative;
+        top: 15px;
+        width: 350px;
+        height: 35px;
+        left: 800px;
+        line-height: 20px;
+        border-radius: 3px;
+        background-color: #F7F9FA;
+        color: #D7D8D8;
+        font-size: 14px;
+        text-align: center;
 
-        .searchBox {
-            position: relative;
-            top: 15px;
-            left: 1150px;
-            width: 350px;
+        /deep/.el-input__inner {
             height: 35px;
-            line-height: 20px;
-            border-radius: 3px;
-            background-color: #F7F9FA;
-            color: #D7D8D8;
-            font-size: 14px;
-            text-align: center;
-
-            /deep/.el-input__inner {
-                height: 35px;
-            }
         }
     }
+}
 
-    .delete {
-        padding: 3px;
-        width: 80px;
-        height: 30px;
-        float: left;
-        left: 90px;
-        position: relative;
-        color: #fff;
-        border-radius: 4px;
-        right: 10px;
-        background-color: #b3b3b3;
+.delete {
+    padding: 3px;
+    width: 80px;
+    height: 30px;
+    float: left;
+    left: 90px;
+    position: relative;
+    color: #fff;
+    border-radius: 4px;
+    right: 10px;
+    background-color: #b3b3b3;
+}
+
+.el-table {
+    position: relative;
+    top: 10px;
+    margin-left: 1%;
+    border: 1px solid #f0f2f2;
+    font-size: 0.95rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #b2b2b2;
+    background: rgba(255, 255, 255, 0.8);
+
+    /deep/th {
+        background: #f7fbff;
     }
 
-    .el-table {
-        position: relative;
-        top: 10px;
-        margin-left: 1%;
-        border: 1px solid #f0f2f2;
-        font-size: 0.95rem;
-        font-family: PingFang SC;
-        font-weight: 500;
+    /deep/.el-checkbox {
         color: #b2b2b2;
-        background: rgba(255, 255, 255, 0.8);
 
-        /deep/th {
-            background: #f7fbff;
+        .el-checkbox__input.is-checked+.el-checkbox__label {
+            color: #2ea8e6;
         }
 
-        /deep/.el-checkbox {
-            color: #b2b2b2;
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+            width: 70%;
+            height: 70%;
+            background: #2ea8e6;
+            border-radius: 0;
+            transform: rotate(0deg) scaleY(1);
+            position: static;
+            // border: 1px solid #8DD9FF;
+        }
 
-            .el-checkbox__input.is-checked+.el-checkbox__label {
-                color: #2ea8e6;
-            }
+        .el-checkbox__inner {
+            border: 1px solid #8dd9ff;
+            background: rgba(0, 170, 255, 0);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: static;
 
-            .el-checkbox__input.is-checked .el-checkbox__inner::after {
-                width: 70%;
-                height: 70%;
-                background: #2ea8e6;
-                border-radius: 0;
-                transform: rotate(0deg) scaleY(1);
-                position: static;
-                // border: 1px solid #8DD9FF;
+            &::after {
+                transition: 0ms;
             }
+        }
 
-            .el-checkbox__inner {
-                border: 1px solid #8dd9ff;
-                background: rgba(0, 170, 255, 0);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                position: static;
+        .el-checkbox__label {
+            padding-left: 0;
+            font-size: 15px;
+            position: absolute;
+            top: 1px;
+            left: 25px;
+        }
+    }
+}
 
-                &::after {
-                    transition: 0ms;
-                }
-            }
+.bottom {
+    position: absolute;
+    left: 330px;
+    right: 16px;
+    bottom: 20px;
+    height: 50px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
 
-            .el-checkbox__label {
-                padding-left: 0;
-                font-size: 15px;
-                position: absolute;
-                top: 1px;
-                left: 25px;
-            }
-        }
+    .checkbox {
+        position: absolute;
+        left: 30px;
+        top: 15px;
+        font-size: 14px;
     }
 
-    .bottom {
+    .check-cancel {
         position: absolute;
-        left: 330px;
-        right: 16px;
-        bottom: 20px;
-        height: 50px;
-        line-height: 20px;
-        background-color: rgba(255, 255, 255, 1);
+        // line-height: 20px;
+        font-size: 14px;
         text-align: center;
+        left: 140px;
+        top: 10px;
+    }
 
-        .checkbox {
-            position: absolute;
-            left: 30px;
-            top: 15px;
-            font-size: 14px;
-        }
+    .bottom_button {
+        position: absolute;
+        left: 200px;
+        margin-top: 15px;
 
-        .check-cancel {
-            position: absolute;
-            // line-height: 20px;
+        .delete {
             font-size: 14px;
             text-align: center;
-            left: 140px;
-            top: 10px;
-        }
-
-        .bottom_button {
-            position: absolute;
-            left: 200px;
-            margin-top: 15px;
-
-            .delete {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
+            padding: 1px;
         }
     }
 }

src/views/userManagement/groupManagement/forms/corporationdetailEdit.vue

@@ -1,9 +1,10 @@
 <template>
     <div>
         <p class="info">企业详情</p>
-        <img class="img" src="" alt="">
+        <el-image :src="url"></el-image>
+        <el-button class="alter" v-if="show">更换</el-button>
         <div class="form">
-            <el-form :model="form" label-position="left" label-width="130px">
+            <el-form :model="form" label-position="left" label-width="130px" :disabled="disabled">
                 <el-form-item :model="form.fullName" label="公司全称：">
                     <el-input placeholder="test" type="text"></el-input>
                 </el-form-item>
@@ -12,17 +13,17 @@
                 </el-form-item>
                 <el-form-item :model="form.parentCorporation" label="上级公司：">
                     <el-select style="width:400px">
-                        <el-option label=""></el-option>
+                        <el-option value="1"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item :model="form.sccide" label="统一社会信用代码：">
                     <el-select style="width:400px">
-                        <el-option label=""></el-option>
+                        <el-option value="1"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item :model="form.registeredAddress" label="注册地址：">
                     <el-select style="width:160px">
-                        <el-option label=""></el-option>
+                        <el-option value="1"></el-option>
                     </el-select><span><el-input style="margin-left: 10px; width: 230px;"
                             placeholder="test"></el-input></span>
                 </el-form-item>
@@ -35,7 +36,7 @@
                 <el-form-item :model="form.legalName" label="法人姓名：">
                     <el-input placeholder="test" type="text"></el-input>
                 </el-form-item>
-                <el-form-item :model="form.copporationCode" label="公司编码：">
+                <el-form-item :model="form.corporationCode" label="公司编码：">
                     <el-input placeholder="test" type="text"></el-input>
                 </el-form-item>
                 <el-form-item :model="form.complementCount" label="编制人数：">
@@ -48,7 +49,7 @@
         </div>
         <div>
             <el-button>删除</el-button>
-            <el-button style="background-color: rgb(131, 208, 243);">编辑</el-button>
+            <el-button style="background-color: rgb(131, 208, 243);" @click="edit">编辑</el-button>
         </div>
     </div>
 </template>
@@ -57,13 +58,27 @@
 export default {
     data() {
         return {
+            show:false,
+            disabled:true,
             form: {
-
+                fullName:'',
+                abbreviateName:'',
+                parentCorporation:'',
+                sccide:'',
+                registeredAddress:'',
+                businessAddress:'',
+                legalName:'',
+                corporationCode:'',
+                complementCount:'',
+                staffCount:''
             }
         }
     },
     methods: {
-
+        edit(){
+            this.show = true;
+            this.disabled = false;
+        }
     }
 
 }
@@ -75,9 +90,15 @@ export default {
     font-size: 25px;
 }
 
-.img {
+.el-image{
     width: 1300px;
-    height: 150px;
+    height: 150px; 
+}
+.alter{
+    position: absolute;
+    right:30px;
+    top: 155px;
+    background-color:rgb(131, 208, 243);
 }
 
 .form {

src/views/userManagement/groupManagement/forms/departmentdetailEdit.vue

@@ -1,7 +1,8 @@
 <template>
     <div>
         <p class="info">部门详情</p>
-        <img class="img" src="" alt=""><el-button class="alter">更换</el-button>
+        <el-image :src="url"></el-image>
+        <el-button class="alter">更换</el-button>
         <div class="form">
             <el-form :model="form" label-position="left" label-width="130px">
                 <el-form-item  label="部门级别：">
@@ -77,12 +78,10 @@ export default {
     padding: 20px;
     font-size: 25px;
 }
-
-.img {
+.el-image{
     width: 1300px;
-    height: 150px;
+    height: 150px; 
 }
-
 .alter{
     position: absolute;
     right:30px;

src/views/userManagement/groupManagement/index.vue

@@ -2,38 +2,70 @@
     <div class="container">
         <div class="left-pane">
             <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
-            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" 
                 :filter-node-method="filterNode" @node-click="handleNodeClick">
+                <span slot-scope="{node,data}">
+                    <el-image :src="data.url"></el-image>
+                    <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
+                    <span class="operate_btns">
+                        <dropdown :events="data.id == 1 ? menuEvents : subMenuEvents" :data="{ node, data }"
+                            @itemClick="dropDownClick"></dropdown>
+                    </span>
+                </span>
             </el-tree>
             <el-button @click="addCompany" style="color: #fff; background: #3da0d6"><i
                     class="el-icon-s-order"></i>添加公司</el-button>
         </div>
         <div class="right-pane">
-            <overView></overView>
+            <overView v-if="viewShow"></overView>
+            <corporation v-if="corporShow"></corporation>
+            <department v-if="departShow"></department>
         </div>
     </div>
 </template>
 <script>
 import overView from './tables/corporationOverview';
+import corporation from './forms/corporationdetailEdit';
+import department from './forms/departmentdetailEdit';
+import dropdown from '@/components/Dropdown/index';
 export default {
-    components: { overView },
+    components: { overView, dropdown, corporation, department },
     data() {
         return {
             filterText: '',
-            activeName: 'group',
+            viewShow: true,
+            corporShow: false,
+            departShow: false,
             data: [{
+                id: 1,
                 label: '中讯邮电咨询设计院',
+                url: require('@/assets/tree/corporation@3x.png'),
                 children: [{
+                    id: 2,
                     label: '北京电信规划设计院',
+                    url: require('@/assets/tree/company@3x.png'),
                     children: [{
+                        id: 3,
+                        url: require('@/assets/tree/affiliate@3x.png'),
                         label: '天津办事处'
                     }]
                 }]
             }],
+            menuEvents: [
+                { label: '新建', funcName: 'addNode' }
+            ],
+            subMenuEvents: [
+                { label: '新建', funcName: 'addNode' },
+                { label: '上移', funcName: 'moveUp' },
+                { label: '下移', funcName: 'moveDown' },
+                { label: '编辑', funcName: 'editNode' },
+                { label: '删除', funcName: 'removeNode' }
+            ],
             defaultProps: {
                 children: 'children',
                 label: 'label'
-            }
+            },
+            currentNode: {}
         }
     },
     watch: {
@@ -42,8 +74,24 @@ export default {
         }
     },
     methods: {
-        handleNodeClick() {
-            //
+        handleNodeClick(data) {
+            switch (data.id) {
+                case 2:
+                    this.viewShow = false;
+                    this.corporShow = true;
+                    this.departShow = false;
+                    break;
+                case 3:
+                    this.viewShow = false;
+                    this.corporShow = false;
+                    this.departShow = true;
+                    break;
+                default:
+                    this.viewShow = true;
+                    this.corporShow = false;
+                    this.departShow = false;
+                    break;
+            }
         },
         filterNode(value, data) {
             if (!value) return true;
@@ -54,6 +102,12 @@ export default {
         },
         addCompany() {
 
+        },
+        dropDownClick(funcName, data) {
+            this.currentNode = data;
+            if (funcName === 'addNode') {
+                //
+            }
         }
     }
 }
@@ -74,30 +128,56 @@ export default {
         width: 300px;
         padding: 15px;
         height: calc(98% - 30px);
+
         .el-tree {
             margin-top: 10px;
             height: calc(98% - 30px);
-            background-color: rgb(247, 245, 243);
-        }
+            background-color: #FAFAFA;
 
-        .el-button {
-            position: absolute;
-            left: 25px;
-            bottom: 40px;
-            width: 250px;
-            background-color: rgb(131, 208, 243);
-            text-align: center;
-            font-size: 16px;
+            /deep/.el-tree-node__content {
+                align-items: center;
+                height: 30px;
+                cursor: pointer;
+                font-size: 16px;
+                position: relative;
+                color: #999999;
+                padding-top: 10px;
+
+                .operate_btns {
+                    position: absolute;
+                    right: 20px;
+                    display: none;
+                }
+
+                &:hover,
+                :focus-within {
+                    background-color: #f7fbff;
+
+                    .operate_btns {
+                        display: inline;
+                    }
+                }
+            }
         }
     }
 
-    .right-pane {
-        width: 1340px;
+    .el-button {
         position: absolute;
-        margin-left: 330px;
-        top: 0;
-        height: -webkit-fill-available;
-        margin-right: 20px;
+        left: 25px;
+        bottom: 40px;
+        width: 250px;
+        background-color: rgb(131, 208, 243);
+        text-align: center;
+        font-size: 16px;
     }
 }
+
+.right-pane {
+    width: 1340px;
+    position: absolute;
+    margin-left: 330px;
+    top: 0;
+    height: -webkit-fill-available;
+    margin-right: 20px;
+}
 </style>

src/views/userManagement/personManagement/index.vue

@@ -78,7 +78,6 @@ export default {
                     nationality: data.nationality,
                 };
                 addUser(options).then((res) => {
-                    console.log(res);
                     if (res.data.code === -1) {
                         this.$message.info('用户已存在，请修改重新添加！');
                     }

src/views/userManagement/personManagement/messageDialog/addUser.vue

@@ -115,7 +115,7 @@ export default {
                 post: '',
                 account_status: '',
                 nationality: '',
-                photograph: require('@/assets/images/头像上传@3x.png')
+                photograph: require('@/assets/upload/头像上传@3x.png')
             },
             statusOptions:[
                 {

src/views/userManagement/personManagement/messageDialog/userInfoDetail.vue

@@ -75,7 +75,7 @@
                         </el-form-item>
                     </div>
                     <div class="avatar">
-                        <el-avatar :size="110" :src="testUrl" @click=""></el-avatar>
+                        <el-avatar :size="110" :src="form.photograph" @click=""></el-avatar>
                         <span>
                             <p style="font-size: 12px; line-height: 20px; color: #E9E9E9; text-align: center;">上传头像</p>
                         </span>
@@ -105,10 +105,10 @@ export default {
                 working_status: '',
                 post: '',
                 account_status: '',
-                nationality: ''
+                nationality: '',
+                photograph:require('@/assets/upload/头像上传@3x.png')
             },
-            charNum: 0,
-            testUrl: require('@/assets/images/头像上传@3x.png')
+            charNum: 0
         }
     },
     watch: {

src/views/userManagement/personManagement/messageDialog/userInfoEdit.vue

@@ -75,7 +75,7 @@
                         </el-form-item>
                     </div>
                     <div class="avatar">
-                        <el-avatar :size="110" :src="testUrl" @click=""></el-avatar>
+                        <el-avatar :size="110" :src="form.photograph" @click=""></el-avatar>
                         <span>
                             <p style="font-size: 12px; line-height: 20px; color: #E9E9E9; text-align: center;">上传头像</p>
                         </span>
@@ -109,10 +109,10 @@ export default {
                 working_status: '',
                 post: '',
                 account_status: '',
-                nationality: ''
+                nationality: '',
+                photograph:require('@/assets/upload/头像上传@3x.png')
             },
-            charNum:0,
-            testUrl: require('@/assets/images/头像上传@3x.png')
+            charNum:0
         }
     },
     watch: { 

src/views/userManagement/personManagement/tables/activeUser.vue

@@ -127,13 +127,12 @@ export default {
         },
 
         deleteUser(data) {
-            
             let options = {
                 id:data.id,
-                username: data.username,
-                password: getUserInfo(data.id).then((res) =>{
-                    console.log(res);
-                }),
+                // username: data.username,
+                // password: getUserInfo(data.id).then((res) =>{
+                //     console.log(res);
+                // }),
             };
             console.log(options);
             deleteSingleUser(options).then((res) => {