策略配置、消息配置UI修改调整

src/router/index.js

@@ -64,7 +64,7 @@ const routes = [
             path: 'message',
             name: 'message',
             meta: { requireAuth: true },
-            component: () => import('../views/systemManagement/messageConfiguration/commonMessage.vue')
+            component: () => import('../views/systemManagement/messageConfiguration/index.vue')
           },
           {
             path: 'info',

src/utils/request.js

@@ -3,13 +3,13 @@ import { MessageBox, Message } from 'element-ui'
 // import store from '@/store'
 // import { getToken } from '@/utils/auth'
 
-// create an axios instance
+// 创建axios实例
 const service = axios.create({
-  baseURL: 'http://121.43.55.7:5000',
-  timeout: 5000 // request timeout
+  baseURL: '/api',
+  timeout: 6000 // 请求超时
 })
 
-// request interceptor
+// 请求拦截
 service.interceptors.request.use(
   config => {
     const token = localStorage.getItem('Authorization');
@@ -24,7 +24,7 @@ service.interceptors.request.use(
   }
 )
 
-// response interceptor
+// 结果拦截
 service.interceptors.response.use((response) => {
   //
   return response;

src/views/permissionManagement/decisiongroup/permissionDetail.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <el-form :model="form" label-position="left" label-width="80px">
+        <el-form :model="form" label-position="left" label-width="80px" :disabled="disabled">
             <el-form-item :model="form.roleName" label="角色名称：">
-                <el-input placeholder="决策组-1" type="text"></el-input>
+                <el-input style="width: 50%;" placeholder="决策组-1" type="text"></el-input>
             </el-form-item>
             <el-form-item :model="form.roleDesc" label="角色描述：">
                 <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200" show-word-limit></el-input>
@@ -69,18 +69,23 @@
                 </el-collapse>
             </div>
         </el-form>
-        <el-button>删除</el-button>
-        <el-button>编辑</el-button>
+        <div class="bottom">
+            <el-button style="background: #B3B3B3;">删除</el-button>
+            <el-button @click="edit">编辑</el-button>
+        </div>
     </div>
 </template>
 <script>
 export default {
     data() {
         return {
-            form: {},
+            disabled: true,
+            form: {
+
+            },
             textarea: '',
             activeName: 'pc',
-            activeNames: ['1','2'],
+            activeNames: ['1', '2'],
             data1: [{
                 label: '智能看板-[数据查看][数据导出]',
                 children: [{
@@ -107,7 +112,7 @@ export default {
                 {
                     label: '设备交互',
                 }],
-            }], 
+            }],
             data4: [{
                 label: '智享生活-[数据查看][数据导出]',
                 children: [{
@@ -116,14 +121,14 @@ export default {
                     label: '数据导出',
                 }],
             }],
-             data5: [{
+            data5: [{
                 label: '数智双碳-[数据查看][数据导出]',
                 children: [{
                     label: '数据查看',
                 }, {
                     label: '数据导出',
                 }],
-            }], 
+            }],
             data6: [{
                 label: '智慧场景-[数据查看][数据导出][策略配置][设备交互]',
                 children: [{
@@ -189,7 +194,7 @@ export default {
                     label: '权限删除',
                 }],
             }],
-            
+
 
             defaultProps: {
                 children: 'children',
@@ -204,8 +209,14 @@ export default {
         isActive(data) {
             return this.activeNames.indexOf(data);
         },
-        handleChange(){
-            
+        handleChange() {
+
+        },
+        handleNodeClick(data) {
+            //
+        },
+        edit() {
+            this.disabled = false;
         }
     }
 }
@@ -228,25 +239,35 @@ export default {
 
     /deep/.el-form-item__content {
         display: flex;
-        width: 600px;
     }
 
     /deep/.el-textarea__inner {
         height: 80px;
-        width: 1174px;
+        width: 95%;
         min-height: 50px !important;
         max-height: 100px;
     }
+
+    /deep/.el-input__count {
+        color: #909399;
+        background: #FFF;
+        position: absolute;
+        font-size: 12px;
+        bottom: 1px;
+        right: 80px
+    }
 }
 
 .permissionType {
     margin-top: 20px;
-    width: 90%;
-    height: 460px;
-    margin-left: 5%;
-    background-color: rgb(247, 245, 243);
+    width: 93%;
+    height: 550px;
+    margin-left: 1%;
+    background-color: #FAFAFA;
 
     .el-collapse {
+        border: 0;
+
         /deep/.el-collapse-item__arrow {
             display: none;
         }
@@ -257,14 +278,14 @@ export default {
         }
 
         /deep/.el-collapse-item__wrap {
-          border-bottom: 0;
-          background-color: rgb(247, 245, 243);
+            border-bottom: 0;
+            background-color: #FAFAFA;
         }
 
         /deep/.el-collapse-item__header {
             padding-left: 30px;
             border-bottom: 0;
-            background-color: rgb(247, 245, 243);
+            background-color: #FAFAFA;
         }
     }
 
@@ -274,15 +295,22 @@ export default {
 
     .el-tree {
         margin: 5px;
-        background-color: rgb(247, 245, 243);
+        background-color: #FAFAFA;
     }
 }
 
+.bottom {
+    position: absolute;
+    bottom: 15px;
+    margin-left: 520px;
+}
+
 .el-button {
-    height: 30px;
     width: 100px;
-    margin-top: 20px;
-    margin-inline: 40px;
-    padding: 5px;
-}
-</style>
+    height: 30px;
+    color: #fff;
+    padding: 3px;
+    margin-left: 50px;
+    font-size: 14px;
+    background: #3da0d6;
+}</style>

src/views/permissionManagement/decisiongroup/rolemembersList.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <el-button class="delete" type="text">批量删除</el-button>
         <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">
@@ -21,15 +22,12 @@
             </el-table-column>
             <el-table-column prop="operation" label="操作">
                 <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">
-            <el-button class="delete" type="text">批量删除</el-button>
             <page class="page" :paginationData="paginationData"></page>
         </div>
     </div>
@@ -102,6 +100,9 @@ export default {
         },
         handleSizeChange(){
             //
+        },
+        handleSelectionChange(){
+            
         }
     }
 }
@@ -123,6 +124,7 @@ export default {
 .el-table {
     position: relative;
     left: 0;
+    top:20px;
     border: 1px solid #f0f2f2;
     font-size: 0.95rem;
     font-family: PingFang SC;
@@ -173,7 +175,18 @@ export default {
         }
     }
 }
-
+.delete{
+    padding: 3px;
+    width: 80px;
+    height: 30px;
+    float: left;
+    left: 50px;
+    position: relative;
+    color: #fff;
+    border-radius: 4px;
+    right: 10px;
+    background-color: #b3b3b3;
+}
 .bottom {
     position: absolute;
     left: 20px;

src/views/permissionManagement/index.vue

@@ -13,7 +13,7 @@
                     </span>
                 </span>
             </el-tree>
-            <el-button @click="addCompany" style="color: #fff; background: #3da0d6"><i
+            <el-button @click="addRole" style="color: #fff; background: #3da0d6"><i
                     class="el-icon-s-order"></i>添加角色</el-button>
         </div>
         <div class="right-pane">
@@ -36,20 +36,20 @@ export default {
             data: [{
                 id: 1,
                 label: '决策组-1',
-                url: require('@/assets/tree/user-group@3x.png'),
+                url: require('@/assets/tree/role/user-group@3x.png'),
             }, {
                 id: 2,
                 label: '决策组-2',
-                url: require('@/assets/tree/user-group@3x.png')
+                url: require('@/assets/tree/role/user-group@3x.png')
             },
             {
                 id: 3,
                 label: '管理员组',
-                url: require('@/assets/tree/user-group@3x.png')
+                url: require('@/assets/tree/role/user-group@3x.png')
             }, {
                 id: 4,
                 label: '普通用户组',
-                url: require('@/assets/tree/user-group@3x.png')
+                url: require('@/assets/tree/role/user-group@3x.png')
             }],
             subMenuEvents: [
                 { label: '新建', funcName: 'addNode' },
@@ -84,7 +84,7 @@ export default {
         handleClick() {
 
         },
-        addCompany() {
+        addRole() {
 
         },
         dropDownClick(funcName, data) {
@@ -109,7 +109,7 @@ export default {
     .left-pane {
         width: 300px;
         padding: 15px;
-        height: calc(98% - 30px);
+        height: calc(100% - 30px);
 
         .el-tree {
             margin-top: 10px;
@@ -124,7 +124,7 @@ export default {
                 position: relative;
                 color: #999999;
                 padding-top: 10px;
-
+                padding-left: 30px !important;
                 .operate_btns {
                     position: absolute;
                     right: 20px;
@@ -140,26 +140,24 @@ export default {
                     }
                 }
             }
+            /deep/.el-tree-node__children{
+                .el-tree-node__content{
+                    padding-left: 60px !important;
+                }
+            }
         }
     }
+    .right-pane{
+        width: calc(100% - 330px);
+    }
 
     .el-button {
         position: absolute;
-        left: 25px;
-        bottom: 40px;
+        left: 40px;
+        bottom: 15px;
         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

@@ -4,7 +4,6 @@
             <p class="info">角色总览</p>
             <el-input class="searchBox" placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
         </div>
-        <el-button class="delete" @click="batchDelete">批量删除</el-button>
         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
             :cell-style="{ textAlign: 'center' }" height="400" style="width: 98%" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50">
@@ -150,20 +149,6 @@ export default {
         }
     }
 }
-
-.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;

src/views/systemManagement/messageConfiguration/commonMessage.vue

@@ -1,56 +1,47 @@
 <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" default-expand-all
-                :filter-node-method="filterNode" @node-click="handleNodeClick">
-            </el-tree>
-            <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
-        </div>
-        <div class="right-pane">
-            <el-form :model="form" label-position="left" label-width="80px">
-                <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
-                    <el-checkbox label="短信" v-model="checked"></el-checkbox>
-                    <el-checkbox label="邮件"></el-checkbox>
-                    <el-checkbox label="钉钉"></el-checkbox>
-                    <el-checkbox label="站内通知"></el-checkbox>
-                </el-form-item>
-                <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
-                    <el-checkbox label="全体"></el-checkbox>
-                    <el-checkbox label="运管管理员"></el-checkbox>
-                    <div style="display: flex; margin-left: 30px;">
-                        <el-checkbox style="margin-right: 10px;" v-model="checked1"></el-checkbox><span>
-                            <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
-                            </el-cascader>
-                        </span>
-                    </div>
-                </el-form-item>
-                <el-form-item style="width: 350px;" :model="form.sendtiming" label="发送时间：">
-                    <el-radio v-model="radio" label="1" style="margin-top:13px">定时</el-radio>
-                    <span>
-                        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
-                        </el-date-picker>
+    <div>
+        <el-form :model="form" label-position="left" label-width="80px" :disabled="disabled">
+            <el-form-item  :model="form.channelconfig" label="通道配置：">
+                <el-checkbox label="短信" v-model="checked"></el-checkbox>
+                <el-checkbox label="邮件"></el-checkbox>
+                <el-checkbox label="钉钉"></el-checkbox>
+                <el-checkbox label="站内通知"></el-checkbox>
+            </el-form-item>
+            <el-form-item  :model="form.personconfig" label="人员配置：">
+                <el-checkbox label="全体"></el-checkbox>
+                <el-checkbox label="运管管理员"></el-checkbox>
+                <div style="display: flex; margin-left: 30px;">
+                    <el-checkbox style="margin-right: 10px;" v-model="checked1"></el-checkbox><span>
+                        <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
+                        </el-cascader>
                     </span>
+                </div>
+            </el-form-item>
+            <el-form-item  :model="form.sendtiming" label="发送时间：">
+                <el-radio v-model="radio" label="1" style="margin-top:13px">定时</el-radio>
+                <span>
+                    <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
+                    </el-date-picker>
+                </span>
+            </el-form-item>
+            <el-form-item >
+                <el-radio v-model="radio" label="2">立刻</el-radio>
+            </el-form-item>
+            <div style="margin-top:30px">
+                <el-tag>年度报告通知模板</el-tag>
+                <el-form-item  :model="form.title" label="标题：">
+                    <el-input class="input_title" v-model="title" placeholder=""></el-input>
                 </el-form-item>
-                <el-form-item style="width: 350px;">
-                    <el-radio v-model="radio" label="2">立刻</el-radio>
+                <el-form-item  :model="form.content" label="内容：">
+                    <el-input class="input_content" v-model="content" placeholder="请输入内容"></el-input>
+                </el-form-item>
+                <el-form-item  :model="form.messagePreview" label="样式预览：">
+                    <el-input class="stylePreview" v-model="messagePreview"></el-input>
                 </el-form-item>
-                <div style="margin-top:30px">
-                    <el-tag>年度报告通知模板</el-tag>
-                    <el-form-item style="width: 350px;" :model="form.title" label="标题：">
-                        <el-input v-model="title" placeholder=""></el-input>
-                    </el-form-item>
-                    <el-form-item style="width: 500px;" :model="form.content" label="内容：">
-                        <el-input v-model="content" placeholder="请输入内容"></el-input>
-                    </el-form-item>
-                    <el-form-item style="width: 500px;" :model="form.messagePreview" label="消息预览：">
-                        <el-input v-model="messagePreview"></el-input>
-                    </el-form-item>
-                </div>
-            </el-form>
-            <div class="bottom">
-                <el-button>编辑</el-button>
             </div>
+        </el-form>
+        <div class="bottom">
+            <el-button @click="edit">编辑</el-button>
         </div>
     </div>
 </template>
@@ -61,38 +52,21 @@ export default {
         return {
             checked: true,
             checked1: true,
+            disabled:true,
             radio: '1',
             value1: '',
-            filterText: '',
-            title:'',
-            content:'',
-            messagePreview:'',
-            data: [{
-                label: '普通消息',
-                children: [{
-                    label: '年度报告通知',
-                }, {
-                    label: '报表导出通知'
-                }, {
-                    label: '系统更新通知'
-                }]
+            title: '',
+            content: '',
+            messagePreview: '',
+            form: {
+
             },
-            {
-                label: '提醒消息',
-                children: [{
-                    label: '资产年限提醒',
-                }, {
-                    label: '人员画像提醒',
-                }, {
-                    label: '备餐提醒',
-                }]
-            }],
-            options:[
+            options: [
                 {
-                    value:'角色',
-                    label:'角色',
-                    children:[{
-                        children:[
+                    value: '角色',
+                    label: '角色',
+                    children: [{
+                        children: [
                             {
 
                             }
@@ -100,113 +74,111 @@ export default {
                     }]
                 },
                 {
-                    value:'公司',
-                    label:'公司',
-                    children:[{
-                        value:'中讯设计院',
-                        label:'中讯设计院',
-                        children:[{
-                            value:'北京电信规划设计院',
-                            label:'北京电信规划设计院',
+                    value: '公司',
+                    label: '公司',
+                    children: [{
+                        value: '中讯设计院',
+                        label: '中讯设计院',
+                        children: [{
+                            value: '北京电信规划设计院',
+                            label: '北京电信规划设计院',
                         }]
                     }
                     ]
                 }
             ],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
-            },
-            form: {
-
-            },
             input: ''
         }
     },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        }
-    },
     methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        },
-        handleNodeClick(){
-            //
+        edit() {
+            this.disabled = false;
         }
     }
 }
 </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);
-
-    .left-pane {
-        width: 300px;
-        padding: 15px;
-
-        .el-tree {
-            height: 700px;
-            margin-top: 15px;
-            background-color: rgb(247, 245, 243);
-        }
-
-        .newInfo_button {
-            position: absolute;
-            left: -5px;
-            bottom: 50px;
-            width: 250px;
-            background-color: rgb(131, 208, 243);
-            text-align: center;
+.el-form {
+    padding-left:30px;
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+
+        /deep/.el-form-item__label {
+            padding: 0;
             font-size: 16px;
+            color: #4D4D4D;
+            font-weight: 550;
+        }
 
+        /deep/.el-form-item__content {
+            display: flex;
         }
     }
 
-    .right-pane {
-        width: 1340px;
-        position: absolute;
-        margin-left: 330px;
-        top: 0;
-        margin-right: 20px;
-
-        .el-form {
-            .el-form-item {
-                padding-top: 20px;
-                margin-inline: 20px;
-                margin-bottom: 0;
-            }
-
-            /deep/.el-form-item__label {
-                padding: 0;
-            }
-
-            /deep/.el-form-item__content {
-                display: flex;
-            }
+    .el-checkbox {
+        margin-right:30px;
+        margin-left: 50px;
+        /deep/.el-checkbox__label {
+            color: #4D4D4D;
+        }
+    }
+    .el-cascader{
+        /deep/.el-input__inner{
+            width: 400px;
+        }
+        /deep/.el-input__suffix{
+            right:-80px;
+        }
+    }
+    .el-radio{
+        margin-left: 20px;
+    }
+    .el-date-editor{
+        /deep/.el-input__inner{
+            width: 320px;
+        }
+        /deep/.el-input__suffix{
+            right:-80px;
+        }
+    }
+    .el-date-picker{
+        width: 450px;
+        /deep/.el-picker-panel__content{
+            width: 370px;
         }
     }
-}
-
-.el-tag {
-    position: absolute;
-    background-color: transparent;
-    border-color: transparent;
-    font-size: 18px;
-    color: #000;
-    top: 230px;
-   left: 10px;
 
+    .el-tag {
+        position: relative;
+        background-color: transparent;
+        border-color: transparent;
+        font-size: 18px;
+        color: #4D4D4D;
+        right: 585px;
+        font-weight: 550;
+    }
+}
+.input_title{
+    /deep/.el-input__inner{
+        width:500px;
+        float: left;
+    }
+}
+.input_content{
+    /deep/.el-input__inner{
+        width:500px;
+        float: left;
+    }
+}
+.stylePreview{
+    /deep/.el-input__inner{
+       width: 95%;
+       height: 300px;
+        float: left;
+    }
 }
 
 .el-button--text {
@@ -218,14 +190,14 @@ export default {
 .el-button {
     height: 30px;
     width: 100px;
-    margin-top: 20px;
-    margin-inline: 40px;
-    padding: 5px;
+    padding: 3px;
+    color: #fff;
+    background: #3da0d6;
 }
 
 .bottom {
     position: absolute;
-    left: 450px;
-    top: 700px;
+    left: 900px;
+    bottom: 15px;
 }
 </style>

src/views/systemManagement/messageConfiguration/index.vue

@@ -0,0 +1,197 @@
+<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" default-expand-all
+                :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 ? menuEvents : subMenuEvents" :data="{ node, data }"
+                            @itemClick="dropDownClick"></dropdown>
+                    </span>
+                </span>
+            </el-tree>
+            <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
+        </div>
+        <div class="right-pane">
+            <commonMessage v-if="commonShow"></commonMessage>
+            <messageCreate v-if="createSHow"></messageCreate>
+            <messageRemind v-if="remindShow"></messageRemind>
+        </div>
+    </div>
+</template>
+
+<script>
+import commonMessage from './commonMessage';
+import messageCreate from './messageCreate';
+import messageRemind from './messageRemind';
+import dropdown from '@/components/Dropdown/index';
+export default {
+    components: {
+        commonMessage, messageCreate, messageRemind, dropdown
+    },
+    data() {
+        return {
+            commonShow: false,
+            createSHow: true,
+            remindShow: false,
+            filterText: '',
+            data: [
+                {
+                    id: 1,
+                    label: '普通消息',
+                    url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    children: [{
+                        label: '年度报告通知',
+                        url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    }, {
+                        label: '报表导出通知',
+                        url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    }, {
+                        label: '系统更新通知',
+                        url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    }]
+                },
+                {
+                    id: 2,
+                    label: '提醒消息',
+                    url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    children: [{
+                        label: '资产年限提醒',
+                        url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    }, {
+                        label: '人员画像提醒',
+                        url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    }, {
+                        label: '备餐提醒',
+                        url: require('@/assets/tree/message/xiaoxi@2x.png'),
+                    }]
+                }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            form: {
+
+            },
+            input: '',
+            menuEvents: [
+                { label: '新建', funcName: 'addNode' }
+            ],
+            subMenuEvents: [
+                { label: '新建', funcName: 'addNode' },
+                { label: '上移', funcName: 'moveUp' },
+                { label: '下移', funcName: 'moveDown' },
+                { label: '编辑', funcName: 'editNode' },
+                { label: '删除', funcName: 'removeNode' }
+            ]
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+        handleNodeClick(data) {
+            switch (data.label) {
+                case '年度报告通知':
+                    this.commonShow = true;
+                    this.createSHow = false;
+                    this.remindShow = false;
+                    break;
+                case '普通消息':
+                    this.commonShow = false;
+                    this.createSHow = true;
+                    this.remindShow = false;
+                    break;
+                case '资产年限提醒':
+                    this.commonShow = false;
+                    this.createSHow = false;
+                    this.remindShow = true;
+                    break;
+            }
+        }
+    }
+}
+</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;
+    display: flex;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+        height: calc(100% - 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;
+                padding-left: 30px !important;
+
+                .operate_btns {
+                    position: absolute;
+                    right: 20px;
+                    display: none;
+                }
+
+                &:hover,
+                :focus-within {
+                    background-color: #f7fbff;
+
+                    .operate_btns {
+                        display: inline;
+                    }
+                }
+            }
+
+            /deep/.el-tree-node__children {
+                .el-tree-node__content {
+                    padding-left: 60px !important;
+                }
+            }
+        }
+    }
+
+    .right-pane {
+        width: calc(100% - 330px);
+    }
+
+    .el-button {
+        position: absolute;
+        left: 40px;
+        bottom: 15px;
+        width: 250px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #3da0d6;
+    }
+}
+</style>

src/views/systemManagement/messageConfiguration/messageCreate.vue

@@ -1,55 +1,46 @@
 <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" default-expand-all
-                :filter-node-method="filterNode" @node-click="handleNodeClick">
-            </el-tree>
-            <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
-        </div>
-        <div class="right-pane">
-            <el-tag>新建消息模块</el-tag>
-            <el-form :model="form" label-position="left" label-width="80px">
-                <el-form-item style="width: 350px;" :model="form.template_name" label="模块名称：">
-                    <el-input v-model="input"></el-input>
-                </el-form-item>
-                <el-form-item style="width: 350px;" :model="form.template_superior" label="模块上级：">
-                    <el-select>
-                        <el-option label="普通消息"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
-                    <el-checkbox label="短信" v-model="checked"></el-checkbox>
-                    <el-checkbox label="邮件"></el-checkbox>
-                    <el-checkbox label="钉钉"></el-checkbox>
-                    <el-checkbox label="站内通知"></el-checkbox>
-                </el-form-item>
-                <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
-                    <el-checkbox label="全体" v-model="checked2"></el-checkbox>
-                    <el-checkbox label="运管管理员"></el-checkbox>
-                    <div style="display: flex; margin-left: 30px;">
-                        <el-checkbox style="margin-right: 10px;"></el-checkbox><span>
-                            <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
-                            </el-cascader>
-                        </span>
-                    </div>
-                </el-form-item>
-                <el-form-item style="width: 350px;" :model="form.sendtiming" label="发送时间：">
-                    <el-radio v-model="radio" label="1" style="margin-top:13px">定时</el-radio>
-                    <span>
-                        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
-                        </el-date-picker>
+    <div>
+        <el-tag>新建消息模块</el-tag>
+        <el-form :model="form" label-position="left" label-width="80px">
+            <el-form-item :model="form.template_name" label="模块名称：">
+                <el-input class="template_name" v-model="input"></el-input>
+            </el-form-item>
+            <el-form-item :model="form.template_superior" label="模块上级：">
+                <el-select>
+                    <el-option label="普通消息"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :model="form.channelconfig" label="通道配置：">
+                <el-checkbox label="短信" v-model="checked"></el-checkbox>
+                <el-checkbox label="邮件"></el-checkbox>
+                <el-checkbox label="钉钉"></el-checkbox>
+                <el-checkbox label="站内通知"></el-checkbox>
+            </el-form-item>
+            <el-form-item :model="form.personconfig" label="人员配置：">
+                <el-checkbox label="全体" v-model="checked2"></el-checkbox>
+                <el-checkbox label="运管管理员"></el-checkbox>
+                <div style="display: flex; margin-left: 30px;">
+                    <el-checkbox style="margin-right: 10px;"></el-checkbox><span>
+                        <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
+                        </el-cascader>
                     </span>
-                </el-form-item>
-                <el-form-item style="width: 350px;">
-                    <el-radio v-model="radio" label="2">立刻</el-radio>
-                </el-form-item>
-            </el-form>
-            <div class="bottom">
-                <el-button>下一个</el-button>
-                <el-button>重置</el-button>
-                <el-button>确认</el-button>
-            </div>
+                </div>
+            </el-form-item>
+            <el-form-item :model="form.sendtiming" label="发送时间：">
+                <el-radio v-model="radio" label="1" style="margin-top:13px">定时</el-radio>
+                <span>
+                    <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
+                    </el-date-picker>
+                </span>
+            </el-form-item>
+            <el-form-item>
+                <el-radio v-model="radio" label="2">立刻</el-radio>
+            </el-form-item>
+        </el-form>
+        <div class="bottom">
+            <el-button>下一个</el-button>
+            <el-button>重置</el-button>
+            <el-button>确认</el-button>
         </div>
     </div>
 </template>
@@ -62,53 +53,6 @@ export default {
             checked2: true,
             radio: '1',
             value1: '',
-            filterText: '',
-            data: [{
-                label: '普通消息',
-                children: [{
-                    label: '年度报告通知',
-                }, {
-                    label: '报表导出通知'
-                }, {
-                    label: '系统更新通知'
-                }]
-            },
-            {
-                label: '提醒消息',
-                children: [{
-                    label: '资产年限提醒',
-                }, {
-                    label: '人员画像提醒',
-                }, {
-                    label: '备餐提醒',
-                }]
-            }],
-             options:[
-                {
-                    value:'角色',
-                    label:'角色',
-                    children:[{
-                        children:[
-                            {
-
-                            }
-                        ]
-                    }]
-                },
-                {
-                    value:'公司',
-                    label:'公司',
-                    children:[{
-                        value:'中讯设计院',
-                        label:'中讯设计院',
-                        children:[{
-                            value:'北京电信规划设计院',
-                            label:'北京电信规划设计院',
-                        }]
-                    }
-                    ]
-                }
-            ],
             defaultProps: {
                 children: 'children',
                 label: 'label'
@@ -119,92 +63,94 @@ export default {
             input: ''
         }
     },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        }
-    },
+
     methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        }
+
     }
 }
 </script>
 
 <style lang="less" scoped>
-.container {
-    position: fixed;
-    left: 218px;
-    top: 77px;
-    right: 16px;
-    bottom: 20px;
-    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;
-
-        .el-tree {
-            height: 700px;
-            margin-top: 15px;
-            background-color: rgb(247, 245, 243);
-        }
+.el-form {
+    padding-left: 30px;
 
-        .newInfo_button {
-            position: absolute;
-            left: -5px;
-            bottom: 50px;
-            width: 250px;
-            background-color: rgb(131, 208, 243);
-            text-align: center;
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+
+        /deep/.el-form-item__label {
+            padding: 0;
             font-size: 16px;
+            color: #4D4D4D;
+            font-weight: 550;
+        }
 
+        /deep/.el-form-item__content {
+            display: flex;
+        }
+
+        /deep/.el-input__inner {
+            width: 600px;
         }
     }
 
-    .right-pane {
-        width: 1340px;
-        position: absolute;
-        margin-left: 330px;
-        top: 0;
-        margin-right: 20px;
-
-        .el-form {
-            margin: 80px 0 0 0;
-
-            .el-form-item {
-                padding-top: 20px;
-                margin-inline: 20px;
-                margin-bottom: 0;
-            }
-
-            /deep/.el-form-item__label {
-                padding: 0;
-            }
-
-            /deep/.el-form-item__content {
-                display: flex;
-            }
+    .el-checkbox {
+        margin-right: 30px;
+        margin-left: 50px;
+
+        /deep/.el-checkbox__label {
+            color: #4D4D4D;
+        }
+    }
+
+    .el-cascader {
+        /deep/.el-input__inner {
+            width: 400px;
+        }
+
+        /deep/.el-input__suffix {
+            right: -80px;
         }
     }
-}
 
+    .el-radio {
+        margin-left: 20px;
+    }
+
+    .el-date-editor {
+        /deep/.el-input__inner {
+            width: 320px;
+        }
+        /deep/.el-input__suffix{
+            right:-80px;
+        }
+    }
+
+    .el-date-picker {
+        width: 450px;
+
+        /deep/.el-picker-panel__content {
+            width: 370px;
+        }
+    }
+
+}
+.template_name{
+    /deep/.el-input__inner {
+            float: left;
+        }
+    
+}
 .el-tag {
-    position: absolute;
+    position: relative;
     background-color: transparent;
     border-color: transparent;
-    font-size: 25px;
-    color: #000;
-    top: 20px;
-    left: 20px;
-
+    font-size: 20px;
+    color: #4D4D4D;
+    right: 600px;
+    font-weight: 550;
+    margin-top: 20px;
 }
 
 .el-button--text {
@@ -216,13 +162,14 @@ export default {
 .el-button {
     height: 30px;
     width: 100px;
-    margin-top: 20px;
-    margin-inline: 40px;
-    padding: 5px;
+    padding: 3px;
+    color: #fff;
+    background: #3da0d6;
+    margin-right: 50px;
 }
-.bottom{
+
+.bottom {
     position: absolute;
-    left:450px;
-    top:700px;
-}
-</style>
+    left: 750px;
+    bottom: 15px;
+}</style>

src/views/systemManagement/strategyConfiguration/index.vue

@@ -1,25 +1,28 @@
 <template>
     <div class="container">
         <div class="header">
-            <el-button>智慧会议</el-button>
+            <el-button ref="buttonFocus">智慧会议</el-button>
             <el-button>智慧能源</el-button>
             <el-button>智慧安防</el-button>
         </div>
-        <test></test>
+        <smartMeeting></smartMeeting>
     </div>
 </template>
 
 <script>
-import test from './smartMeeting'
+import smartMeeting from './smartMeeting'
 export default {
-    components:{test},
+    components: { smartMeeting },
     data() {
         return {}
+    },
+    mounted(){
+        this.$refs.buttonFocus.$el.focus();
     }
 }
 </script>
 <style lang="less" scoped>
-.container{
+.container {
     position: relative;
     height: 100%;
     line-height: 20px;
@@ -27,6 +30,7 @@ export default {
     text-align: center;
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 }
+
 .header {
     text-align: left;
     padding: 15px;
@@ -34,7 +38,19 @@ export default {
     margin-left: 15px;
 
     .el-button {
-        border-radius: 50px;
+        width: 100px;
+        height: 35px;
+        line-height: 20px;
+        border-radius: 20px;
+        background-color: #FFFFFF;
+        color: #C8C8C8;
+        font-size: 14px;
+        text-align: center;
+        padding: 5px;
+        &:focus{
+            background-color: #2EA8E6;
+            color: #FFFFFF;
+        }
     }
 }
 </style>

src/views/systemManagement/strategyConfiguration/smartMeeting.vue

@@ -4,13 +4,21 @@
             <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
                 :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 ? menuEvents : subMenuEvents" :data="{ node, data }"
+                            @itemClick="dropDownClick"></dropdown>
+                    </span>
+                </span>
             </el-tree>
         </div>
         <div class="right-pane">
             <div>
                 <p class="info">选择设备</p>
             </div>
-            <div style="display: flex; margin-left: 20px;">
+            <div style="display: flex; margin-left: 20px; height: 80%;">
                 <div>
                     <el-tree :data="data1" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id"
                         @node-click="handleNodeClick">
@@ -27,34 +35,52 @@
                     </el-tree>
                 </div>
             </div>
+            <div class="bottom">
+                <el-button class="delete_btn">删除</el-button>
+                <el-button>更新默认配置</el-button>
+                <el-button>更新可配置设备</el-button>
+            </div>
         </div>
     </div>
-</div></template>
+</template>
 
 <script>
+import dropdown from '@/components/Dropdown/index';
 export default {
+    components: {
+        dropdown
+    },
     data() {
         return {
-            total: 0,
             filterText: '',
             data: [
                 {
+                    id: 1,
                     label: '3F',
+                    url: require('@/assets/tree/strategy/louceng@3x.png'),
                     children: [{
+                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
                         label: '301会议室',
                     }, {
+                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
                         label: '302会议室'
                     }, {
+                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
                         label: '303会议室'
                     }]
                 },
                 {
+                    id: 2,
                     label: '4F',
+                    url: require('@/assets/tree/strategy/louceng@3x.png'),
                     children: [{
+                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
                         label: '401会议室',
                     }, {
+                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
                         label: '402会议室'
                     }, {
+                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
                         label: '403会议室'
                     }]
                 }
@@ -86,6 +112,16 @@ export default {
 
                 }]
             }],
+            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'
@@ -102,8 +138,11 @@ export default {
             if (!value) return true;
             return data.label.indexOf(value) !== -1;
         },
-        handleNodeClick() {
-            //
+        handleNodeClick(data) {
+
+        },
+        dropDownClick(funcName, data) {
+
         }
     }
 }
@@ -112,36 +151,80 @@ export default {
 <style lang="less" scoped>
 .sub-container {
     position: relative;
+    height: calc(100% - 65px);
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     color: rgba(16, 16, 16, 1);
     font-size: 14px;
     text-align: center;
+    display: flex;
     //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 
     .left-pane {
         width: 300px;
-        padding: 0 15px 0 15px;
+        padding: 15px;
+        height: calc(100% - 30px);
 
         .el-tree {
-            height: 650px;
-            margin: 15px;
-            background-color: rgb(247, 245, 243)
+            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;
+                padding-left: 30px !important;
+
+                .operate_btns {
+                    position: absolute;
+                    right: 20px;
+                    display: none;
+                }
+
+                &:hover,
+                :focus-within {
+                    background-color: #f7fbff;
+
+                    .operate_btns {
+                        display: inline;
+                    }
+                }
+            }
+
+            /deep/.el-tree-node__children {
+                .el-tree-node__content {
+                    padding-left: 60px !important;
+                }
+            }
         }
     }
 
     .right-pane {
-        width: 1340px;
-        position: absolute;
-        margin-left: 330px;
-        top: 0;
-        margin-right: 20px;
-
+        width:100%;
         .info {
             text-align: left;
             padding: 10px;
             font-size: 25px;
         }
     }
+    .bottom{
+        .el-button{
+            width: 200px;
+            height: 30px;
+            color: #fff; 
+            padding: 3px;
+            margin-left: 50px;
+            font-size: 14px;
+            background: #3da0d6;
+        }
+        .delete_btn{
+                background: #B3B3B3;
+            }
+    }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="height: 100%;">
         <p class="info">企业详情</p>
         <el-image :src="url"></el-image>
         <el-button class="alter" v-if="show">更换</el-button>
@@ -47,9 +47,9 @@
                 </el-form-item>
             </el-form>
         </div>
-        <div>
-            <el-button>删除</el-button>
-            <el-button style="background-color: rgb(131, 208, 243);" @click="edit">编辑</el-button>
+        <div class="bottom">
+            <el-button style="background:#B3B3B3;">删除</el-button>
+            <el-button @click="edit">编辑</el-button>
         </div>
     </div>
 </template>
@@ -58,24 +58,25 @@
 export default {
     data() {
         return {
-            show:false,
-            disabled:true,
+            show: false,
+            disabled: true,
             form: {
-                fullName:'',
-                abbreviateName:'',
-                parentCorporation:'',
-                sccide:'',
-                registeredAddress:'',
-                businessAddress:'',
-                legalName:'',
-                corporationCode:'',
-                complementCount:'',
-                staffCount:''
-            }
+                fullName: '',
+                abbreviateName: '',
+                parentCorporation: '',
+                sccide: '',
+                registeredAddress: '',
+                businessAddress: '',
+                legalName: '',
+                corporationCode: '',
+                complementCount: '',
+                staffCount: ''
+            },
+            url: ''
         }
     },
     methods: {
-        edit(){
+        edit() {
             this.show = true;
             this.disabled = false;
         }
@@ -90,20 +91,20 @@ export default {
     font-size: 25px;
 }
 
-.el-image{
+.el-image {
     width: 1300px;
-    height: 150px; 
+    height: 150px;
 }
-.alter{
+
+.alter {
     position: absolute;
-    right:30px;
-    top: 155px;
-    background-color:rgb(131, 208, 243);
+    right: 40px;
+    top: 165px;
 }
 
 .form {
     margin-left: 350px;
-
+    margin-top:50px;
     .el-form {
         //margin: 40px 0 0 0;
 
@@ -125,10 +126,18 @@ export default {
     }
 }
 
-.el-button {
-    width: 100px;
-    height: 30px;
-    padding: 5px;
-    margin: 10px;
+.bottom {
+    position: absolute;
+    bottom: 15px;
+    margin-left: 520px;
 }
+.el-button {
+        width: 100px;
+        height: 30px;
+        color: #fff;
+        padding: 3px;
+        margin-left: 50px;
+        font-size: 14px;
+        background: #3da0d6;
+    }
 </style>

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

@@ -2,9 +2,9 @@
     <div>
         <p class="info">部门详情</p>
         <el-image :src="url"></el-image>
-        <el-button class="alter">更换</el-button>
+        <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  label="部门级别：">
                     <el-select v-model="form.fullName" style="width:400px">
                         <el-option value="test"></el-option>
@@ -46,9 +46,9 @@
                 </el-form-item>
             </el-form>
         </div>
-        <div>
-            <el-button>删除</el-button>
-            <el-button style="background-color: rgb(131, 208, 243);">编辑</el-button>
+        <div class="bottom">
+            <el-button style="background:#B3B3B3;">删除</el-button>
+            <el-button @click="edit">编辑</el-button>
         </div>
     </div>
 </template>
@@ -57,16 +57,23 @@
 export default {
     data() {
         return {
+            show:false,
+            disabled:true,
             form: {
 
             },
             num: 100,
-            textarea:''
+            textarea:'',
+            url:''
         }
     },
     methods: {
         handleChange() {
             //
+        },
+        edit() {
+            this.show = true;
+            this.disabled = false;
         }
     }
 
@@ -84,9 +91,8 @@ export default {
 }
 .alter{
     position: absolute;
-    right:30px;
-    top: 155px;
-    background-color:rgb(131, 208, 243);
+    right:40px;
+    top: 165px;
 }
 .form {
     margin-left: 350px;
@@ -112,10 +118,18 @@ export default {
     }
 }
 
-.el-button {
-    width: 100px;
-    height: 30px;
-    padding: 5px;
-    margin: 10px;
+.bottom {
+    position: absolute;
+    bottom: 15px;
+    margin-left: 520px;
 }
+.el-button {
+        width: 100px;
+        height: 30px;
+        color: #fff;
+        padding: 3px;
+        margin-left: 50px;
+        font-size: 14px;
+        background: #3da0d6;
+    }
 </style>

src/views/userManagement/groupManagement/index.vue

@@ -39,14 +39,14 @@ export default {
             data: [{
                 id: 1,
                 label: '中讯邮电咨询设计院',
-                url: require('@/assets/tree/corporation@3x.png'),
+                url: require('@/assets/tree/group/corporation@3x.png'),
                 children: [{
-                    id: 2,
+                    id:2,
                     label: '北京电信规划设计院',
-                    url: require('@/assets/tree/company@3x.png'),
+                    url: require('@/assets/tree/group/company@3x.png'),
                     children: [{
-                        id: 3,
-                        url: require('@/assets/tree/affiliate@3x.png'),
+                        id:3,
+                        url: require('@/assets/tree/group/affiliate@3x.png'),
                         label: '天津办事处'
                     }]
                 }]
@@ -122,12 +122,13 @@ export default {
     color: rgba(16, 16, 16, 1);
     font-size: 14px;
     text-align: center;
+    display: flex;
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 
     .left-pane {
         width: 300px;
         padding: 15px;
-        height: calc(98% - 30px);
+        height: calc(100% - 30px);
 
         .el-tree {
             margin-top: 10px;
@@ -142,7 +143,6 @@ export default {
                 position: relative;
                 color: #999999;
                 padding-top: 10px;
-
                 .operate_btns {
                     position: absolute;
                     right: 20px;
@@ -161,23 +161,18 @@ export default {
         }
     }
 
+    .right-pane {
+    width: calc(100% - 330px);
+}
     .el-button {
         position: absolute;
-        left: 25px;
-        bottom: 40px;
+        left: 40px;
+        bottom: 15px;
         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/groupManagement/tables/corporationOverview.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="height:100%">
         <p class="info">公司总览</p>
         <el-button class="delete" @click="batchDelete">批量删除</el-button>
         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
@@ -137,7 +137,6 @@ export default {
     margin-left: 1%;
     height: 400px;
     border: 1px solid #f0f2f2;
-    margin-top: 10px;
     font-size: 0.95rem;
     font-family: PingFang SC;
     font-weight: 500;
@@ -190,36 +189,11 @@ export default {
 
 .bottom {
     position: absolute;
-    bottom: 10px;
-    left: 50px;
+    right: 16px;
+    bottom: 20px;
     height: 50px;
-    width: 95%;
     line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
+    background-color: #ffffff;
     text-align: center;
-
-    .bottom_button {
-        position: absolute;
-        left: 20px;
-        margin-top: 15px;
-
-        .delete {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
-
-        .disabled {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
-
-        .export {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
-    }
 }
 </style>

vue.config.js

@@ -1,30 +1,41 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer:{
+    port:8080,
+    proxy:{
+      '/api':{
+          target:'http://121.43.55.7:5000',
+          changeOrigin:true,
+          pathRewrite:{
+            '^/api':''
+          }
+      }
+    }
+  }
 })
 
-
-const path = require('path')
-module.exports = {
-  chainWebpack: config => {
-      const svgRule = config.module.rule('svg')
-      svgRule.uses.clear()
-      svgRule
-          .test(/.svg$/)
-          .include.add(path.resolve(__dirname, './src/icons')).end()
-          .use('svg-sprite-loader')
-          .loader('svg-sprite-loader')
-          .options({
-              symbolId: 'icon-[name]'
-          })
-      const fileRule = config.module.rule('file')
-      fileRule.uses.clear()
-      fileRule
-          .test(/.svg$/)
-          .exclude.add(path.resolve(__dirname, './src/icons'))
-          .end()
-          .use('file-loader')
-          .loader('file-loader')
-  }
-}
+// const path = require('path')
+// module.exports = {
+//   chainWebpack: config => {
+//       const svgRule = config.module.rule('svg')
+//       svgRule.uses.clear()
+//       svgRule
+//           .test(/.svg$/)
+//           .include.add(path.resolve(__dirname, './src/icons')).end()
+//           .use('svg-sprite-loader')
+//           .loader('svg-sprite-loader')
+//           .options({
+//               symbolId: 'icon-[name]'
+//           })
+//       const fileRule = config.module.rule('file')
+//       fileRule.uses.clear()
+//       fileRule
+//           .test(/.svg$/)
+//           .exclude.add(path.resolve(__dirname, './src/icons'))
+//           .end()
+//           .use('file-loader')
+//           .loader('file-loader')
+//   }
+// }