From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复

---
 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue |  557 +++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 390 insertions(+), 167 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
index bfe6e92..d857c46 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="member-manage">
     <div class="left">
-      <div style="margin-bottom:10px;">
-        <el-input placeholder="璇疯緭鍏�" v-model="treeWord" size="small">
+      <!-- <div style="margin-bottom: 10px">
+       <el-input placeholder="璇疯緭鍏�" v-model="treeWord" size="small">
           <el-button slot="append" icon="el-icon-search"></el-button>
-        </el-input>
-      </div>
+        </el-input> 
+      </div> -->
       <el-tree
         ref="leftTreeNodes"
         :data="treeData"
@@ -17,39 +17,71 @@
         @node-click="checkNode"
         @node-contextmenu="nodeContextMenu"
       ></el-tree>
-      <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
+      <!-- <div
+        class="menuList"
+        v-show="showMenu"
+        :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
+      >
         <ul>
           <li>鍒涘缓鍚岀骇鑺傜偣</li>
           <li>鍒犻櫎鑺傜偣</li>
           <li>閲嶅懡鍚嶈妭鐐�</li>
           <li @click="showMenu = false">鍏抽棴</li>
         </ul>
-      </div>
+      </div> -->
     </div>
     <div class="right">
       <div class="filter-bar">
-        <el-input class="keyword-input" placeholder="濮撳悕/缁勭粐鏈烘瀯/鎵嬫満鍙�" v-model="keyword" size="small"></el-input>
-        <el-select v-model="gender" size="small" placeholder="鎬у埆" style="margin: 0 10px;">
+        <el-input
+          class="keyword-input"
+          placeholder="濮撳悕/缁勭粐鏈烘瀯/鎵嬫満鍙�"
+          v-model="keyword"
+          size="small"
+        ></el-input>
+        <el-select
+          v-model="gender"
+          size="small"
+          placeholder="鎬у埆"
+          style="margin: 0px 17px; width: 153px"
+        >
           <el-option
             v-for="item in genders"
             :key="item.id"
-            :value="item.name=='鍏ㄩ儴'?'':item.name"
+            :value="item.name == '鍏ㄩ儴' ? '' : item.name"
             :label="item.name"
-          >{{item.name}}</el-option>
+            >{{ item.name }}</el-option
+          >
         </el-select>
-        <el-button type="primary" size="small" @click="renderMemberTable">鏌ヨ</el-button>
-        <el-button type="primary" size="small" @click="resetFilter">閲嶇疆</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          @click="renderMemberTable"
+          class="query-btn"
+          >鏌ヨ</el-button
+        >
+        <el-button
+          type="primary"
+          size="small"
+          @click="resetFilter"
+          class="reset-btn"
+          >閲嶇疆</el-button
+        >
       </div>
       <div class="table-area">
         <div class="actions">
-          <el-button type="primary" size="small" @click="addMember">娣诲姞浜哄憳</el-button>
+          <el-button type="primary" size="small" @click="addMember"
+            >娣诲姞浜哄憳</el-button
+          >
           <el-button
             type="primary"
-            :disabled="multipleTableSelection.length<1"
+            :disabled="multipleTableSelection.length < 1"
             size="small"
             @click="toggleOrganize"
-          >鎹㈢粍缁�</el-button>
-          <el-button type="primary" size="small" @click="batchImport">鎵归噺瀵煎叆</el-button>
+            >鎹㈢粍缁�</el-button
+          >
+          <el-button type="primary" size="small" @click="batchImport"
+            >鎵归噺瀵煎叆</el-button
+          >
           <!-- <el-button type="primary" size="small" @click="uploadPic">涓婁紶鐓х墖</el-button> -->
         </div>
         <el-table
@@ -58,11 +90,16 @@
           fit
           ref="elTable"
           @selection-change="tableSelection"
+          :header-cell-style="{
+            background: '#757FA2',
+            color: '#fff',
+            height: '50px',
+          }"
         >
           <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column label="濮撳悕" prop="Name" sortable>
             <template slot-scope="scope">
-              <div style="cursor:pointer;">{{scope.row.Name}}</div>
+              <div style="cursor: pointer">{{ scope.row.Name }}</div>
             </template>
           </el-table-column>
           <el-table-column label="鐓х墖" prop="Surface">
@@ -79,22 +116,36 @@
           <el-table-column label="鐢ㄦ埛鏉冮檺" prop="userpermission">
             <template slot-scope="scope">
               <div>
-                <el-switch v-model="scope.row.UserPermissions" @change="memberUpdate(scope.row)"></el-switch>
+                <el-switch
+                  active-color="#4B72E2"
+                  inactive-color="#B7BEC8"
+                  v-model="scope.row.UserPermissions"
+                  @change="memberUpdate(scope.row)"
+                ></el-switch>
               </div>
             </template>
           </el-table-column>
           <el-table-column label="杞偍鏉冮檺" prop="transferpermission">
             <template slot-scope="scope">
               <div>
-                <el-switch v-model="scope.row.DumpPermissions" @change="memberUpdate(scope.row)"></el-switch>
+                <el-switch
+                  active-color="#4B72E2"
+                  inactive-color="#B7BEC8"
+                  v-model="scope.row.DumpPermissions"
+                  @change="memberUpdate(scope.row)"
+                ></el-switch>
               </div>
             </template>
           </el-table-column>
           <el-table-column label="鎿嶄綔">
             <template slot-scope="scope">
               <div class="operation">
-                <i class="el-icon-edit" @click="editMember(scope.row)"></i>
-                <i class="el-icon-delete" @click="delMember(scope.row)"></i>
+                <div class="edit" @click="editMember(scope.row)">
+                  <span class="icon iconfont">&#xe79d;</span>
+                </div>
+                <div class="delete" @click="delMember(scope.row)">
+                  <span class="icon iconfont">&#xe79e;</span>
+                </div>
               </div>
             </template>
           </el-table-column>
@@ -114,16 +165,22 @@
       :visible="memberEditDialogVisible"
       class="member-edit-dialog"
       :append-to-body="false"
-      @close="memberEditDialogVisible=false"
+      @close="memberEditDialogVisible = false"
     >
       <div slot="title">
         <div class="title">
-          <div class="main-title">{{memberEditForm.ID?'缂栬緫浜哄憳':'娣诲姞浜哄憳'}}</div>
-          <div class="subtitle">缁勭粐缁撴瀯:{{curLeftTreeNode.label}}</div>
+          <div class="main-title">
+            {{ memberEditForm.ID ? "缂栬緫浜哄憳" : "娣诲姞浜哄憳" }}
+          </div>
+          <div class="subtitle">缁勭粐缁撴瀯:{{ curLeftTreeNode.label }}</div>
         </div>
       </div>
       <div class="text-center">
-        <el-form :model="memberEditForm" :rules="memberEditFormRule" ref="memberForm">
+        <el-form
+          :model="memberEditForm"
+          :rules="memberEditFormRule"
+          ref="memberForm"
+        >
           <el-form-item>
             <el-upload
               class="avatar-uploader"
@@ -133,7 +190,7 @@
             >
               <img
                 v-if="memberEditForm.Surface"
-                :src="`/httpImage/`+memberEditForm.Surface"
+                :src="`/httpImage/` + memberEditForm.Surface"
                 class="avatar"
               />
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -162,8 +219,12 @@
             <el-input v-model="memberEditForm.Tel" size="mini"></el-input>
           </el-form-item>
           <div class="btns">
-            <el-button size="small" @click="memberEditDialogVisible=false">鍙栨秷</el-button>
-            <el-button size="small" type="primary" @click="memberSave">淇濆瓨</el-button>
+            <el-button size="small" @click="memberEditDialogVisible = false"
+              >鍙栨秷</el-button
+            >
+            <el-button size="small" type="primary" @click="memberSave"
+              >淇濆瓨</el-button
+            >
           </div>
         </el-form>
       </div>
@@ -173,11 +234,15 @@
       class="toggle-organize-dialog"
       :append-to-body="false"
       title="绉诲姩浜哄憳鍒板叾浠栫粍缁�"
-      @close="toggleOrganizeDialogVisible=false"
+      @close="toggleOrganizeDialogVisible = false"
     >
       <div class="text-left">
         <el-input v-model="organizeKeyword" size="small">
-          <el-button slot="append" icon="el-icon-search" @clcik="getOrganizeTreeData"></el-button>
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @clcik="getOrganizeTreeData"
+          ></el-button>
         </el-input>
         <div>榛樿缁勭粐</div>
         <el-tree
@@ -190,8 +255,12 @@
           :highlight-current="true"
         ></el-tree>
         <div slot="footer" class="btns">
-          <el-button size="small" @click="toggleOrganizeDialogVisible=false">鍙栨秷</el-button>
-          <el-button size="small" type="primary" @click="updateOrg">纭畾</el-button>
+          <el-button size="small" @click="toggleOrganizeDialogVisible = false"
+            >鍙栨秷</el-button
+          >
+          <el-button size="small" type="primary" @click="updateOrg"
+            >纭畾</el-button
+          >
         </div>
       </div>
     </el-dialog>
@@ -200,7 +269,7 @@
       class="batch-import-dialog"
       :append-to-body="false"
       title="鎵归噺瀵煎叆"
-      @close="batchImportDialogVisible=false"
+      @close="batchImportDialogVisible = false"
     >
       <div>
         <p class="tip">
@@ -208,16 +277,30 @@
           (
           <a
             href="javascript:;"
-            @mouseover="showDemo=true"
-            @mouseout="showDemo=false"
-          >绀轰緥</a>),鐐瑰嚮
-          <a href="javascript:;">涓嬭浇妯℃澘.excel</a>
-          <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt />
+            @mouseover="showDemo = true"
+            @mouseout="showDemo = false"
+            >绀轰緥</a
+          >),鐐瑰嚮
+          <a href="javascript:;" @click="downloadExcel">涓嬭浇妯℃澘.excel</a>
+          <img
+            class="tip-demo"
+            v-if="showDemo"
+            :src="`${publicPath}images/shuohuang/tip.jpg`"
+            alt
+          />
         </p>
         <div class="flex-box">
           <label>涓婁紶鏂囦欢澶�:</label>
-          <el-button size="mini" type="primary" @click="uploadDirectoryTrigger">鐐瑰嚮涓婁紶</el-button>
-          <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory />
+          <el-button size="mini" type="primary" @click="uploadDirectoryTrigger"
+            >鐐瑰嚮涓婁紶</el-button
+          >
+          <input
+            ref="directoryInput"
+            @change="importDirectory"
+            hidden
+            type="file"
+            webkitdirectory
+          />
         </div>
         <el-table class="thbg" :data="batchImportTableData" fit>
           <el-table-column type="index" label="搴忓彿"></el-table-column>
@@ -231,23 +314,37 @@
 </template>
 
 <script>
-
-import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory, uploadFile } from '@/api/shuohuang'
+import {
+  getShuohuangDepartTree,
+  getOrganizeTree,
+  getMemberList,
+  updateMemberInfo,
+  addMember,
+  updateUnit,
+  uploadMemberPic,
+  uploadDirectory,
+  uploadFile,
+  downloadFile,
+} from "@/api/shuohuang";
 export default {
-  data () {
+  data() {
     return {
       publicPath: process.env.BASE_URL,
-      CLIP: 'http://192.168.20.113/',
-      treeWord: '',
+      CLIP: "http://192.168.20.113/",
+      treeWord: "",
       treeData: [],
       curLeftTreeNode: {},
       showMenu: false,
-      deptId: '',
+      deptId: "",
       menuTop: 0,
       menuLeft: 0,
-      keyword: '',
-      gender: '',
-      genders: [{id:'g3',name:'鍏ㄩ儴'},{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }],
+      keyword: "",
+      gender: "",
+      genders: [
+        { id: "g3", name: "鍏ㄩ儴" },
+        { name: "鐢�", id: "g0" },
+        { name: "濂�", id: "g1" },
+      ],
       tableData: [],
       multipleTableSelection: [],
       PageIndex: 1,
@@ -255,217 +352,243 @@
       tableTotal: 0,
       PageSize: 8,
       organizeData: [],
-      checkedOrg: '',
-      organizeKeyword: '',
+      checkedOrgID: "",
+      checkedOrgName: "",
+      organizeKeyword: "",
       memberEditDialogVisible: false,
       toggleOrganizeDialogVisible: false,
       batchImportDialogVisible: false,
       fileList: [],
       memberEditForm: {},
       memberEditFormRule: {
-        Name: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }],
-        UserName: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }],
-        Sex: [{ required: true, message: '璇烽�夋嫨鎬у埆', trigger: 'change' }],
-        Tel: [{ validator: this.isPhone, trigger: 'change' }],
+        Name: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "change" }],
+        UserName: [
+          { required: true, message: "璇疯緭鍏ュ鍚�", trigger: "change" },
+        ],
+        Sex: [{ required: true, message: "璇烽�夋嫨鎬у埆", trigger: "change" }],
+        Tel: [{ validator: this.isPhone, trigger: "change" }],
       },
-      memberPicUrl: '',
+      memberPicUrl: "",
       showDemo: false,
       batchImportTableData: [],
-    }
+    };
   },
-  mounted () {
+  mounted() {
     this.searchLeftTreeData();
     this.getOrganizeTreeData();
     //this.renderMemberTable();
-
   },
   methods: {
-    resetFilter(){
-      this.keyword = '';
-      this.gender = '';
+    resetFilter() {
+      this.keyword = "";
+      this.gender = "";
       this.renderMemberTable();
     },
-    isPhone (rule, value, callback) {
-      if (value.trim()) {
-        var pattern = /^1[345789]\d{9}$/
+    isPhone(rule, value, callback) {
+      if (!value) {
+        return callback();
+      } else if (value.trim()) {
+        var pattern = /^1[345789]\d{9}$/;
         if (pattern.test(value)) {
-          return callback()
+          return callback();
         }
-        return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒'))
+        return callback(new Error("杈撳叆鐨勬墜鏈哄彿閿欒"));
       }
+      // if (value.trim()) {
+      //   var pattern = /^1[345789]\d{9}$/
+      //   if (pattern.test(value)) {
+      //     return callback()
+      //   }
+      //   return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒'))
+      // }
     },
-    nodeContextMenu (e, data, node, comp) {
+    nodeContextMenu(e, data, node, comp) {
       this.showMenu = true;
       this.menuTop = e.pageY;
       this.menuLeft = e.pageX;
     },
-    checkOrgNode (a, b, c) {
-      this.checkedOrg = a.id
+    checkOrgNode(a, b, c) {
+      this.checkedOrgID = a.id;
+      this.checkedOrgName = a.label;
     },
-    updateOrg () {
-      let ids = this.multipleTableSelection.map(row => {
-        return row.ID
+    downloadExcel() {
+      downloadFile().then(function (res) {
+        let blobUrl = window.URL.createObjectURL(
+          new Blob([res], {
+            type: "application/vnd.ms-excel",
+          })
+        );
+        const a = document.createElement("a");
+        a.style.display = "none";
+        a.download = "鎵归噺瀵煎叆妯℃澘.xlsx";
+        a.href = blobUrl;
+        a.click();
+        document.body.removeChild(a);
+      });
+    },
+    updateOrg() {
+      let ids = this.multipleTableSelection.map((row) => {
+        return row.ID;
       });
       let params = {
-        DeptID: this.checkedOrg,
-        Users: ids.join(',')
-      }
-      updateUnit(params).then(res => {
+        DeptID: this.checkedOrgID,
+        DeptName: this.checkedOrgName,
+        Users: ids.join(","),
+      };
+      updateUnit(params).then((res) => {
         if (res.success) {
           this.$notify({
-            type: 'success',
-            message: res.msg
+            type: "success",
+            message: res.msg,
           });
           this.toggleOrganizeDialogVisible = false;
           this.renderMemberTable();
+          this.searchLeftTreeData();
         }
-      })
-
+      });
     },
-    tableSelection (val) {
+    tableSelection(val) {
       this.multipleTableSelection = val;
     },
-    memberSave () {
-      this.$refs['memberForm'].validate((valid) => {
+    memberSave() {
+      this.$refs["memberForm"].validate((valid) => {
         if (valid) {
-          let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm);
+          let params = Object.assign(
+            { DeptID: this.curLeftTreeNode.id },
+            this.memberEditForm
+          );
           if (this.memberEditForm.ID) {
-            updateMemberInfo(params).then(res => {
+            updateMemberInfo(params).then((res) => {
               if (res.success) {
                 this.$notify({
-                  type: 'success',
-                  message: res.msg
+                  type: "success",
+                  message: res.msg,
                 });
                 this.memberEditDialogVisible = false;
                 this.renderMemberTable();
                 this.searchLeftTreeData();
+                this.memberEditForm = {};
               }
-            })
+            });
           } else {
-            addMember(params).then(res => {
+            addMember(params).then((res) => {
               if (res.success) {
                 this.$notify({
-                  type: 'success',
-                  message: res.msg
-                })
+                  type: "success",
+                  message: res.msg,
+                });
                 this.renderMemberTable();
                 this.memberEditDialogVisible = false;
                 this.searchLeftTreeData();
+                this.memberEditForm = {};
               }
-            })
+            });
           }
         } else {
           return false;
         }
-      })
+      });
     },
-    delMember (member) {
-      member.IsDel = '1';
+    delMember(member) {
+      member.IsDel = "1";
       this.memberUpdate(member);
     },
-    editMember (member) {
+    editMember(member) {
       this.memberEditDialogVisible = true;
       this.memberEditForm = member;
     },
-    memberUpdate (member) {
-      updateMemberInfo(member).then(res => {
+    memberUpdate(member) {
+      updateMemberInfo(member).then((res) => {
         if (res.success) {
           this.$notify({
-            type: 'success',
-            message: res.msg
+            type: "success",
+            message: res.msg,
           });
           this.renderMemberTable();
           this.searchLeftTreeData();
         }
-      })
+      });
     },
-    checkNode (a, b, c) {
-      if (a.hasOwnProperty('children')) {
+    checkNode(a, b, c) {
+      if (a.hasOwnProperty("children")) {
         this.curLeftTreeNode = a;
         this.deptId = a.id;
         this.renderMemberTable();
       }
     },
-    handleTableSizeChange (size) {
+    handleTableSizeChange(size) {
       this.PageSize = size;
       this.renderMemberTable();
     },
-    renderMemberTable () {
+    renderMemberTable() {
       let _this = this;
       let params = {
         DeptID: this.deptId,
         Keyword: this.keyword,
         Sex: this.gender,
         PageIndex: this.PageIndex,
-        PageSize: this.PageSize
-      }
-      getMemberList(params).then(res => {
+        PageSize: this.PageSize,
+      };
+      getMemberList(params).then((res) => {
         _this.tableData = res.data;
         _this.tableTotal = res.total;
-      })
+      });
     },
-    uploadPic () {
-
+    uploadPic() {},
+    uploadDirectoryTrigger() {
+      this.$refs["directoryInput"].click();
     },
-    uploadDirectoryTrigger () {
-      this.$refs['directoryInput'].click();
-    },
-    importDirectory () {
+    importDirectory() {
       let _this = this;
       //this.$refs['directoryInput'].files //鏂囦欢澶筸ap
-      let formData = new FormData;
-      for (var file in this.$refs['directoryInput'].files) {
-        formData.append('files', this.$refs['directoryInput'].files[file])
+      let formData = new FormData();
+      for (var file in this.$refs["directoryInput"].files) {
+        formData.append("files", this.$refs["directoryInput"].files[file]);
       }
       //formData.append('files', this.$refs['directoryInput'].files)
 
-      uploadDirectory(formData).then(res => {
-        debugger
+      uploadDirectory(formData).then((res) => {
         _this.batchImportTableData = res.data;
         _this.renderMemberTable();
-      })
+      });
     },
 
-    handleRemove () {
-
-    },
-    handleExceed () {
-
-    },
-    batchImport () {
+    handleRemove() {},
+    handleExceed() {},
+    batchImport() {
       this.batchImportDialogVisible = true;
     },
-    toggleOrganize () {
+    toggleOrganize() {
       this.toggleOrganizeDialogVisible = true;
     },
-    uploadMemberPicture (params) {
+    uploadMemberPicture(params) {
       let param = new FormData();
-      param.append('file', params.file)
-      uploadMemberPic(param).then(res => {
-        this.$set(this.memberEditForm, 'Surface', res.data)
-      })
+      param.append("file", params.file);
+      uploadMemberPic(param).then((res) => {
+        this.$set(this.memberEditForm, "Surface", res.data);
+      });
     },
 
-    deepNodeChildren (node) {
+    deepNodeChildren(node) {
       var arr1 = [];
       var arr2 = [];
       if (node.ChildDept && node.ChildDept.length > 0) {
-        arr1 = node.ChildDept.map(child => {
+        arr1 = node.ChildDept.map((child) => {
           let childObj = {};
           childObj.id = child.ID;
           childObj.label = child.Name;
           childObj.Status = child.Status;
           if (child.ChildDept) {
-            childObj.children = this.deepNodeChildren(child)
+            childObj.children = this.deepNodeChildren(child);
           }
           if (child.UserLst) {
-            childObj.children = this.deepNodeChildren(child)
+            childObj.children = this.deepNodeChildren(child);
           }
           return childObj;
         });
       }
       if (node.UserLst && node.UserLst.length > 0) {
-        arr2 = node.UserLst.map(child => {
+        arr2 = node.UserLst.map((child) => {
           let childObj = {};
           childObj.id = child.ID;
           childObj.label = child.Name;
@@ -473,57 +596,93 @@
           return childObj;
         });
       }
-      return arr1.concat(arr2)
+      return arr1.concat(arr2);
     },
-    getOrganizeTreeData () {
+    getOrganizeTreeData() {
       let _this = this;
-      getOrganizeTree().then(res => {
-        _this.organizeData = res.data.map(item => {
+      getOrganizeTree().then((res) => {
+        _this.organizeData = res.data.map((item) => {
           let obj = {};
           obj.id = item.ID;
           obj.label = item.Name;
           obj.Status = item.Status;
           obj.children = _this.deepNodeChildren(item);
-          return obj
-        })
-      })
+          return obj;
+        });
+      });
     },
-    searchLeftTreeData () {
+    searchLeftTreeData() {
       let _this = this;
-      getShuohuangDepartTree().then(res => {
-        _this.treeData = res.data.map(item => {
+      getShuohuangDepartTree().then((res) => {
+        _this.treeData = res.data.map((item) => {
           let obj = {};
           obj.id = item.ID;
           obj.label = item.Name;
           obj.Status = item.Status;
           obj.children = _this.deepNodeChildren(item);
-          return obj
+          return obj;
         });
         this.$nextTick(() => {
           if (!Object.keys(_this.curLeftTreeNode).length) {
-            _this.curLeftTreeNode = _this.treeData[0];
-            _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]);
+            if (_this.treeData.length) {
+              _this.curLeftTreeNode = _this.treeData[0];
+              _this.$refs["leftTreeNodes"].setCurrentNode(_this.treeData[0]);
+            }
           } else {
-            _this.$refs['leftTreeNodes'].setCurrentNode(_this.curLeftTreeNode);
+            _this.$refs["leftTreeNodes"].setCurrentNode(_this.curLeftTreeNode);
           }
           _this.checkNode(_this.curLeftTreeNode);
-        })
-
-      })
+        });
+      });
     },
-    addMember () {
+    addMember() {
       this.memberEditDialogVisible = true;
       this.memberEditForm = {};
     },
-
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss">
 .member-manage {
+  padding: 25px;
+  background: #fff;
+  // margin: 33px;
   display: flex;
-  padding: 20px;
+  box-sizing: border-box;box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+  
+border-radius: 10px;
+  .left {
+    .el-tree--highlight-current
+      .el-tree-node.is-current
+      > .el-tree-node__content {
+      background-color: #2d52d7 !important;
+      .el-tree-node__label {
+        color: #fff;
+      }
+    }
+    .el-tree {
+      background: #f4f6f9;
+      width: 160px;
+      padding-bottom: 10px;
+
+      .el-tree-node__label {
+        font-size: 14px;
+        color: #606f8f;
+      }
+      .el-tree-node:focus > .el-tree-node__content {
+        background-color: #2d52d7 !important;
+        color: #fff !important;
+      }
+      .el-tree-node__content:hover {
+        background-color: #fff;
+      }
+
+      .el-tree-node__content {
+        height: 36px;
+      }
+    }
+  }
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
@@ -632,22 +791,86 @@
   }
   .right {
     padding-left: 20px;
+    width: calc(100% - 109px);
+
     .filter-bar {
       display: flex;
-      margin-bottom: 20px;
+      margin-bottom: 14px;
+      .el-input__inner {
+        border: 1px solid rgba(26, 55, 122, 0.35);
+      }
       .keyword-input {
-        width: 300px;
+        width: 320px;
+      }
+      button span {
+        color: #fff;
+      }
+      .reset-btn {
+        background-color: #a6b5cb !important;
+        border-color: #a6b5cb !important;
+        font-size: 13px;
+        padding: 8px 12px;
+      }
+      .query-btn {
+        background-color: #2d52d7 !important;
+        font-size: 13px;
+        padding: 8px 12px;
       }
     }
+
     .table-area {
       .actions {
-        text-align: left;
+        text-align: right;
+        button span {
+          color: #fff;
+        }
+      }
+      .operation {
+        .edit {
+          background: #dea60b;
+          width: 23px;
+          height: 23px;
+          text-align: center;
+          border-radius: 23px;
+          line-height: 21px;
+          margin-right: 10px;
+          span {
+            color: #fff;
+            font-size: 12px;
+          }
+        }
+        .delete {
+           background: #D94141;
+          width: 23px;
+          height: 23px;
+          text-align: center;
+          border-radius: 23px;
+          line-height: 22px;
+          margin-right: 10px;
+          span {
+            color: #fff;
+            font-size: 12px;
+          }
+        }
+      }
+      .el-table td.el-table__cell div {
+        color: #425277;
+      }
+      .el-table.thbg {
+        margin: 14px 0;
       }
       .table-cell-pic {
         img {
-          width: 70px;
+          vertical-align: middle;
+          width: 53px;
         }
       }
+      .el-table .el-table__cell {
+        padding: 7.5px 0;
+      }
+      .el-table th.el-table__cell > .cell {
+        color: #fff;
+      }
     }
   }
 }

--
Gitblit v1.8.0