1、初步完成学员列表

src/components/Header.vue

@@ -155,6 +155,7 @@
     cursor: pointer;
     .ant-btn {
       border: none;
+      box-shadow: none;
       & > * {
         display: inline-block;
         vertical-align: middle;

src/components/LeftNav.vue

@@ -87,6 +87,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import url('../css/common.less');
 @import url('../css/iconfont/iconfont.css');
 .left-nav-wrap {
     width: 100%;
@@ -131,7 +132,7 @@ export default {
             background: #D2D2D2 100%;
         }
         ::v-deep .ant-menu-sub{
-          background: #E3E3E3 100%;;
+          background: @e3-color;
         }
         ::v-deep .ant-menu-submenu-selected {
             .ant-menu-submenu-title {
@@ -143,7 +144,7 @@ export default {
             height: 54px;
             line-height: 54px;
             font-size: 16px;
-            background: #E3E3E3 100%;
+            background: @e3-color;
             &::after {
                 content: "";
                 width: 100%;

src/css/common.less

 @tree-menu-width: 297px;
 @right-operate: calc(100% - @tree-menu-width);
+@e3-color: #E3E3E3 100%;
+@f9-color: #F9F9F9 100%;
 .has-top-nav-page-wrap {
     width: 100%;
     height: 100%;
@@ -18,3 +20,34 @@
         background: #FFFFFF 100%;
     }
 }
+
+.flex-justify {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: justify;
+}
+::v-deep .qd-btn {
+    width: 93px;
+    height: 30px;
+    border-radius: 90px;
+    font-size: 14px;
+    text-align: center;
+    font-family: PingFang SC;
+    padding: 0;
+}
+::v-deep .qd-btn-default-w {
+    min-width: 93px;/*no*/
+}
+
+::v-deep .qd-table {
+    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+        background: @f9-color !important;
+    }
+    .ant-table-row {
+      td {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+  }
\ No newline at end of file

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import http from './service/http'
-import { Button, Popover, Menu, Breadcrumb, Input, Tree } from 'ant-design-vue'
+import { Button, Popover, Menu, Breadcrumb, Input, Tree, Table, Space } from 'ant-design-vue'
 import './libs/flexible'
 
 // console.log(process.env)
@@ -26,4 +26,6 @@ app.use(Menu)
 app.use(Breadcrumb)
 app.use(Input)
 app.use(Tree)
+app.use(Table)
+app.use(Space)
 app.use(store).use(router).mount('#app')

src/views/origanizationManage/Member.vue

@@ -20,7 +20,7 @@
                     {{value}}
                 </a-button>
             </div>
-            <div class="create-role-wrap">
+            <div class="create-role-wrap" v-show="searchType.current === Object.keys(searchType.types)[1]">
               <a-button type="default" class="add-role-group">新增角色组</a-button>
               <a-button type="default" class="add-role">新增角色</a-button>
             </div>
@@ -29,6 +29,7 @@
                   v-show="searchType.current === Object.keys(searchType.types)[0]"
                   :treeData="organizationTreeData"
                   :defaultExpandedKeys="['0-0']"
+                  :blockNode="true"
                   showIcon
                   @select="selectOrganization"
                 >
@@ -44,15 +45,77 @@
             </div>
         </div>
         <div class="right-operate operate-wrap">
-            <div class="top-wrap"></div>
+          <section>
+            <div class="top-wrap flex-justify">
+              <span class="top-title">客服部</span>
+              <span class="menber-count">共4人</span>
+              <a-button type='default' class="qd-btn">编辑</a-button>
+            </div>
+            <div class="current-breadcrumb flex-justify">
+              <span>深圳企大科技有限公司</span> <span class="ant-breadcrumb-separator">&gt;</span> <span>客服部</span>
+            </div>
+          </section>
+          <section>
+            <div class="flex-justify level">
+              <span class="iconfont iconjiegou"></span>
+              <span class="level-name">下级部门</span>
+            </div>
+            <div class="level-list-wrap">
+              <div class="level-optation flex-justify">
+                <a-button type="default" class="qd-btn qd-btn-default-w">添加子部门</a-button>
+              </div>
+              <a-table class="qd-table" :showHeader="false" :pagination="false" :data-source="tableData" :columns="columns"  :scroll="{y: 84}">
+                <template #tags>
+                  <a-button type="default"><RightOutlined /></a-button>
+                </template>
+              </a-table>
+            </div>
+          </section>
+          <section>
+            <div class="flex-justify level">
+              <span class="iconfont iconjiegou"></span>
+              <span class="level-name">部门学员</span>
+            </div>
+            <div class="level-list-wrap">
+              <div class="level-optation flex-justify">
+                <a-space :size="15">
+                  <a-button type="default" class="qd-btn">添加学员</a-button>
+                  <a-button type="default" class="qd-btn dif-btn">批量删除/导入/修改</a-button>
+                  <a-button type="default" class="qd-btn">调整部门</a-button>
+                  <a-button type="default" class="qd-btn">批量删除</a-button>
+                  <a-button type="default" class="qd-btn qd-btn-default-w">年度达标学分</a-button>
+                </a-space>
+              </div>
+              <a-table class="qd-table" :data-source="menberData" :columns="menberColumns" :row-selection="rewSelection"></a-table>
+            </div>
+          </section>
         </div>
     </div>
 </template>
 <script>
+import { RightOutlined } from '@ant-design/icons-vue'
 export default {
+  components: {
+    RightOutlined
+  },
+  setup () {
+    const rewSelection = {
+      onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+      },
+      onSelect: (record, selected, selectedRows) => {
+        console.log(record, selected, selectedRows)
+      },
+      onSelectAll: (selected, selectedRows, changeRows) => {
+        console.log(selected, selectedRows, changeRows)
+      }
+    }
+    return ({
+      rewSelection
+    })
+  },
   data () {
     return {
-      // placeholder: '搜索学员',
       searchKey: '',
       showLine: false,
       showIcon: true,
@@ -115,6 +178,155 @@ export default {
           { title: '总裁办', key: '0-0-3' }
         ]
       }],
+      columns: [
+        {
+          title: '部门',
+          dataIndex: 'department'
+        },
+        {
+          title: '操作',
+          dataIndex: 'oprate',
+          slots: { customRender: 'tags' },
+          width: '48px'
+        }
+      ],
+      menberColumns: [
+        {
+          title: '姓名',
+          dataIndex: 'name'
+        },
+        {
+          title: '登陆账号',
+          dataIndex: 'account'
+        },
+        {
+          title: '性别',
+          dataIndex: 'sex'
+        },
+        {
+          title: '角色',
+          dataIndex: 'role'
+        },
+        {
+          title: '职位',
+          dataIndex: 'post'
+        },
+        {
+          title: '身份',
+          dataIndex: 'identity'
+        },
+        {
+          title: '手机号',
+          dataIndex: 'phoneNumber'
+        },
+        {
+          title: '邮箱',
+          dataIndex: 'email'
+        },
+        {
+          title: '学历',
+          dataIndex: 'education'
+        },
+        {
+          title: '年度达标分值',
+          dataIndex: 'complianceScore'
+        },
+        {
+          title: '到期时间',
+          dataIndex: 'dueDate'
+        },
+        {
+          title: '状态',
+          dataIndex: 'state'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation'
+        }
+      ],
+      tableData: [
+        {
+          key: '1',
+          department: '客服一部',
+          oprate: ''
+        },
+        {
+          key: '2',
+          department: '客服二部',
+          oprate: ''
+        },
+        {
+          key: '3',
+          department: '客服三部',
+          oprate: ''
+        }
+      ],
+      menberData: [
+        {
+          key: '1',
+          name: '王大宝',
+          account: '18855981125',
+          sex: '男',
+          role: '负责人',
+          post: 'java',
+          identity: '管理员',
+          phoneNumber: '18855981125',
+          email: '493514152@qq.com',
+          education: '硕士',
+          complianceScore: '582分',
+          dueDate: '2021-11-31',
+          state: '有效',
+          operation: '锁定'
+        },
+        {
+          key: '2',
+          name: '王大宝',
+          account: '18855981125',
+          sex: '男',
+          role: '负责人',
+          post: 'java',
+          identity: '管理员',
+          phoneNumber: '18855981125',
+          email: '493514152@qq.com',
+          education: '硕士',
+          complianceScore: '582分',
+          dueDate: '2021-11-31',
+          state: '有效',
+          operation: '锁定'
+        },
+        {
+          key: '3',
+          name: '王大宝',
+          account: '18855981125',
+          sex: '男',
+          role: '负责人',
+          post: 'java',
+          identity: '管理员',
+          phoneNumber: '18855981125',
+          email: '493514152@qq.com',
+          education: '硕士',
+          complianceScore: '582分',
+          dueDate: '2021-11-31',
+          state: '有效',
+          operation: '锁定'
+        },
+        {
+          key: '4',
+          name: '王大宝',
+          account: '18855981125',
+          sex: '男',
+          role: '负责人',
+          post: 'java',
+          identity: '管理员',
+          phoneNumber: '18855981125',
+          email: '493514152@qq.com',
+          education: '硕士',
+          complianceScore: '582分',
+          dueDate: '2021-11-31',
+          state: '有效',
+          operation: '锁定'
+        }
+      ],
       searchType: {
         types: {
           organization: '组织架构',
@@ -138,9 +350,9 @@ export default {
       this.searchType.current = key
     },
     selectOrganization (key, e) {
-      console.log(e.node.dataRef)
+      console.log(this.organizationTreeData[0].key)
       const treeNode = e.node
-      console.log(treeNode)
+      console.log('treeNode.dataRef.children:', treeNode.dataRef.children)
       const promise = new Promise(
         resolve => {
           if (treeNode.dataRef.children) {
@@ -157,10 +369,14 @@ export default {
           }, 1000)
         }
       )
-      promise.then()
+      console.log(promise)
+      // promise.then()
     },
     selectRole () {
       console.log('selectRole', arguments)
+    },
+    rowSelection () {
+
     }
   },
   computed: {
@@ -231,10 +447,11 @@ export default {
       height: 100%;
       width: 100%;
       overflow: scroll;
-      ::v-deep {
-          .ant-tree-title {
+      ::v-deep .ant-tree-title {
           font-size: 16px;
       }
+      ::v-deep .ant-tree-node-selected{
+        background: #CECECE 100%;
       }
       .iconjiegou {
           font-size: 24px;
@@ -249,6 +466,7 @@ export default {
     padding: 4px 0 12px 45px;
     .ant-btn {
       height: 25px;
+      line-height: 25px;
       width: 97px;
       border-radius: 90px;
       padding: 0;
@@ -265,7 +483,88 @@ export default {
     .top-wrap {
       width: 100%;
       height: 36px;
-      background: red;
+      .top-title {
+        width: 72px;
+        height: 36px;
+        color: rgba(16, 16, 16, 100);
+        font-size: 24px;
+        text-align: left;
+        font-family: SourceHanSansSC-regular;
+      }
+      .menber-count{
+        display: inline-block;
+        width: 68px;
+        height: 22px;
+        line-height: 22px;
+        border-radius: 4px;
+        background-color: rgba(195, 195, 195, 100);
+        color: rgba(255, 255, 255, 100);
+        font-size: 14px;
+        text-align: center;
+        font-family: PingFang SC;
+        border: 1px solid rgba(255, 255, 255, 100);
+        margin: 0 7px 0 11px;
+      }
+    }
+    .current-breadcrumb {
+      display: flex;
+      height: 23px;
+      width: 100%;
+      padding: 4px 0 0 0;
+    }
+    .level{
+      width: 100%;
+      padding: 21px 0 9px 0;
+      color: rgba(16, 16, 16, 100);
+      .level-name {
+        display: inline-block;
+        vertical-align: middle;
+        width: 80px;
+        height: 29px;
+        line-height: 29px;
+        font-size: 20px;
+        text-align: left;
+        font-family: SourceHanSansSC-regular;
+      }
+    }
+    .iconjiegou {
+      display: inline-block;
+      vertical-align: middle;
+      width: 30px;
+      height: 24px;
+      font-size: 24px;
+      line-height: 24px;
+      padding-right: 6px;
+    }
+    .level-list-wrap {
+      width: 100%;
+      .level-optation {
+        padding: 0 25px;
+        width: 100%;
+        height: 42px;
+        background: @e3-color;
+        ::v-deep .dif-btn{
+          width: 159px;
+        }
+      }
+      ::v-deep .qd-table {
+        .ant-btn {
+          border: none;
+          background: none;
+          padding: 0;
+          width: 24px;
+          height: 24px;
+          text-align: right;
+        }
+        .ant-table-row-cell-break-word {
+          padding-right: 10px;
+        }
+        .ant-table-thead > tr , .ant-table-tbody > tr {
+          > :first-child {
+            padding-left: 30px;
+          }
+        }
+      }
     }
   }
 }