1、学员管理右侧分类

src/components/Header.vue

@@ -69,6 +69,7 @@
     height: 21px;
     height: 21px;
     line-height: 20px;
     line-height: 20px;
     border-radius: 4px;
     border-radius: 4px;
+    padding: 0;
     font-size: 12px;
     font-size: 12px;
     text-align: center;
     text-align: center;
     font-family: PingFang SC;
     font-family: PingFang SC;
@@ -135,11 +136,11 @@
     right: 408px;
     right: 408px;
     width: 80px;
     width: 80px;
     height: 21px;
     height: 21px;
-    padding: 0;
     border-radius: 4px;
     border-radius: 4px;
     font-size: 12px;
     font-size: 12px;
     text-align: center;
     text-align: center;
     font-family: PingFang SC;
     font-family: PingFang SC;
+    padding: 0;
     cursor: pointer;
     cursor: pointer;
     border: 1px solid rgba(187, 187, 187, 100);
     border: 1px solid rgba(187, 187, 187, 100);
   }
   }

src/components/RightNavSlot.vue

@@ -43,7 +43,6 @@ export default {
     .right-content-wrap {
     .right-content-wrap {
         height: calc(100% - @right-nav-height -  @right-nav-margin-bottom);
         height: calc(100% - @right-nav-height -  @right-nav-margin-bottom);
         width: 100%;
         width: 100%;
-        background: red;
     }
     }
 }
 }
 
 

src/css/common.less

+@tree-menu-width: 297px;
+@right-operate: calc(100% - @tree-menu-width);
+.has-top-nav-page-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    .tree-menu {
+        width: 297px;
+        height: 100%;
+        background: #F2F2F2 100%;
+    }
+    .right-operate {
+        width: @right-operate;
+        height: 100%;
+        background: #FFFFFF 100%;
+    }
+}
\ No newline at end of file

src/main.js

@@ -3,11 +3,10 @@ import App from './App.vue'
 import router from './router'
 import router from './router'
 import store from './store'
 import store from './store'
 import http from './service/http'
 import http from './service/http'
-import { Button, Popover, Menu, Breadcrumb } from 'ant-design-vue'
+import { Button, Popover, Menu, Breadcrumb, Input, Tree } from 'ant-design-vue'
 import './libs/flexible'
 import './libs/flexible'
 
 
-// const env = process.env
-// console.log(env)
+// console.log(process.env)
 
 
 // router.beforeEach((to, from, next) => {
 // router.beforeEach((to, from, next) => {
 //   /* 必须调用 `next` */
 //   /* 必须调用 `next` */
@@ -25,4 +24,6 @@ app.use(Button)
 app.use(Popover)
 app.use(Popover)
 app.use(Menu)
 app.use(Menu)
 app.use(Breadcrumb)
 app.use(Breadcrumb)
+app.use(Input)
+app.use(Tree)
 app.use(store).use(router).mount('#app')
 app.use(store).use(router).mount('#app')

src/views/origanizationManage/Member.vue

 <template>
 <template>
-    <div class="member-wrap">学员管理</div>
+    <div class="has-top-nav-page-wrap">
+        <div class="tree-menu member-tree">
+            <div class="input-wrap">
+                <a-input
+                  :value="searchKey"
+                  :placeholder="placeholder"
+                  allow-clear
+                  @change="onChange"
+                  @pressEnter="onEnter"
+                />
+            </div>
+            <div class="tap-wrap">
+                <a-button type="default"
+                    v-for="(value, key) in searchType.types"
+                    :class="key === searchType.current ? 'active-tap' : ''"
+                    :key="key"
+                    @click="toggleSearchType(key)"
+                >
+                    {{value}}
+                </a-button>
+            </div>
+            <div class="create-role-wrap">
+              <a-button type="default" class="add-role-group">新增角色组</a-button>
+              <a-button type="default" class="add-role">新增角色</a-button>
+            </div>
+            <div class="tree-wrap">
+                <a-tree
+                  v-show="searchType.current === Object.keys(searchType.types)[0]"
+                  :treeData="organizationTreeData"
+                  :defaultExpandedKeys="['0-0']"
+                  showIcon
+                  @select="selectOrganization"
+                >
+                    <template #jiegou><span class="iconfont iconjiegou"></span></template>
+                </a-tree>
+                <a-tree
+                  v-show="searchType.current === Object.keys(searchType.types)[1]"
+                  :defaultExpandedKeys="['0-0']"
+                  :treeData="roleTreeData"
+                  showIcon
+                  @select="selectRole"
+                ></a-tree>
+            </div>
+        </div>
+        <div class="right-operate operate-wrap">
+            <div class="top-wrap"></div>
+        </div>
+    </div>
 </template>
 </template>
+<script>
+export default {
+  data () {
+    return {
+      // placeholder: '搜索学员',
+      searchKey: '',
+      showLine: false,
+      showIcon: true,
+      organizationTreeData: [{
+        title: '深圳企大科技有限公司',
+        key: '0-0',
+        slots: {
+          icon: 'jiegou'
+        },
+        children: [
+          {
+            title: '客服部',
+            key: '0-0-0',
+            children: [
+              { title: '客服一部', key: '0-0-0-0' }
+            ]
+          },
+          {
+            title: 'IT技术部',
+            key: '0-0-1',
+            children: [
+              { title: 'IT一部', key: '0-0-1-0' }
+            ]
+          },
+          {
+            title: '运营部',
+            key: '0-0-2',
+            children: [
+              { title: '客服一部', key: '0-0-2-0' }
+            ]
+          },
+          { title: '财务相关', key: '0-0-3' }
+        ]
+      }],
+      roleTreeData: [{
+        title: '所有',
+        key: '0-0',
+        children: [
+          {
+            title: '管理',
+            key: '0-0-0',
+            children: [
+              { title: '负责人', key: '0-0-0-0' }
+            ]
+          },
+          {
+            title: '职务',
+            key: '0-0-1',
+            children: [
+              { title: '财务', key: '0-0-1-0' }
+            ]
+          },
+          {
+            title: '岗位',
+            key: '0-0-2',
+            children: [
+              { title: '普通员工', key: '0-0-2-0' }
+            ]
+          },
+          { title: '总裁办', key: '0-0-3' }
+        ]
+      }],
+      searchType: {
+        types: {
+          organization: '组织架构',
+          role: '角色'
+        },
+        current: 'organization'
+      }
+    }
+  },
+  methods: {
+    onChange (e) {
+      this.searchKey = e.target.value
+    },
+    onEnter (e) {
+      if (e.keyCode === 13) {
+        this.searchKey = ''
+      }
+    },
+    toggleSearchType (key) {
+      this.searchKey = ''
+      this.searchType.current = key
+    },
+    selectOrganization (key, e) {
+      console.log(e.node.dataRef)
+      const treeNode = e.node
+      console.log(treeNode)
+      const promise = new Promise(
+        resolve => {
+          if (treeNode.dataRef.children) {
+            resolve()
+            return
+          }
+          setTimeout(() => {
+            treeNode.dataRef.children = [
+              { title: 'Child Node', key: `${treeNode.eventKey}-0` },
+              { title: 'Child Node', key: `${treeNode.eventKey}-1` }
+            ]
+            this.organizationTreeData = [...this.organizationTreeData]
+            resolve()
+          }, 1000)
+        }
+      )
+      promise.then()
+    },
+    selectRole () {
+      console.log('selectRole', arguments)
+    }
+  },
+  computed: {
+    placeholder () {
+      const searchType = this.searchType
+      const keys = Object.keys(searchType.types)
+      if (searchType.current === keys[0]) {
+        return '搜索学员'
+      } else {
+        return '搜素角色'
+      }
+    }
+  }
+}
+</script>
 <style lang="less" scoped>
 <style lang="less" scoped>
-.member-wrap {
+@import url('../../css/common.less');
+@import url('../../css/iconfont/iconfont.css');
+@tree-input-height: 71px;
+@tap-wrap-height: 62px;
+.member-tree{
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  .input-wrap{
+      width: 100%;
+      height: @tree-input-height;
+      padding: 21px 10px 5px 10px;
+      ::v-deep .ant-input-affix-wrapper{
+          width: 100%;
+          height: 100%;
+          font-size: 14px;
+      }
+      ::v-deep .ant-input-clear-icon {
+          font-size: 16px;
+      }
+  }
+  .tap-wrap{
+      width: 100%;
+      height: @tap-wrap-height;
+      padding: 9px 10px 15px 10px;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      ::v-deep .ant-btn{
+          width: 50%;
+          height: 100%;
+          border-color: 1px solid rgba(128, 128, 128, 100);
+      }
+      .active-tap{
+          background: #808080 100%;
+          color: #fff;
+          border-color: #808080 100%;
+      }
+      & :first-child {
+          border-top-left-radius: @tap-wrap-height / 2;
+          border-bottom-left-radius: @tap-wrap-height / 2;
+          border-right: 0;
+      }
+      & :last-child {
+          border-top-right-radius: @tap-wrap-height / 2;
+          border-bottom-right-radius: @tap-wrap-height / 2;
+          border-left: 0;
+      }
+  }
+  .tree-wrap{
+      height: 100%;
+      width: 100%;
+      overflow: scroll;
+      ::v-deep {
+          .ant-tree-title {
+              font-size: 16px;
+          }
+      }
+      .iconjiegou {
+          font-size: 24px;
+      }
+      ::v-deep .ant-tree svg {
+          font-size: 18px;
+      }
+  }
+  .create-role-wrap {
+    width: 100%;
+    height: 45px;
+    padding: 4px 0 12px 45px;
+    .ant-btn {
+      height: 25px;
+      width: 97px;
+      border-radius: 90px;
+      padding: 0;
+      font-size: 12px;
+    }
+    .add-role-group {
+      margin-right: 19px;
+    }
+  }
+}
+.has-top-nav-page-wrap {
+  .operate-wrap {
+    padding: 18px 23px;
+    .top-wrap {
       width: 100%;
       width: 100%;
-    background: blue;
+      height: 36px;
+      background: red;
+    }
+  }
 }
 }
 </style>
 </style>