add:添加单点登录

src/assets/images/fail.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99996 18.3332C14.6023 18.3332 18.3333 14.6022 18.3333 9.99984C18.3333 5.39746 14.6023 1.6665 9.99996 1.6665C5.39758 1.6665 1.66663 5.39746 1.66663 9.99984C1.66663 14.6022 5.39758 18.3332 9.99996 18.3332Z" fill="#FF5054" stroke="#FF5054" stroke-width="1.04167" stroke-linejoin="round"/>
+<path d="M12.5 7.5L7.5 12.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 7.5L12.5 12.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/success.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5095 15.5095C14.0993 16.9198 12.1516 17.7917 10 17.7917C7.84835 17.7917 5.90072 16.9198 4.49046 15.5095C3.08022 14.0993 2.20833 12.1516 2.20833 10C2.20833 7.84835 3.08022 5.90072 4.49046 4.49046C5.90072 3.08022 7.84835 2.20833 10 2.20833C12.1516 2.20833 14.0993 3.08022 15.5095 4.49046C16.9198 5.90072 17.7917 7.84835 17.7917 10C17.7917 12.1516 16.9198 14.0993 15.5095 15.5095Z" fill="#41CC00" stroke="#41CC00" stroke-width="0.416667" stroke-linejoin="round"/>
+<path d="M6.5 10.5L8.83333 13L13.5 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/style/element-variables.scss

@@ -11,6 +11,7 @@ $--font-path: 'element-ui/lib/theme-chalk/fonts';
   text-align: left;
   border-right: none;
 }
+
 li.el-menu-item,
 .el-submenu__title {
   display: flex;
@@ -22,22 +23,27 @@ li.el-menu-item,
   font-weight: 700;
   font-size: 14px;
   line-height: 28px;
+
   svg {
     margin-right: 8px;
   }
+
   i {
     color: #232A40;
   }
 }
+
 .el-submenu__icon-arrow {
   right: 0;
   font-size: 14px;
   font-weight: 800;
   transform: rotateZ(-90deg);
 }
-.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+
+.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
   transform: rotateZ(0deg);
 }
+
 .el-submenu .el-menu-item {
   height: 40px;
   padding: 0;
@@ -46,25 +52,61 @@ li.el-menu-item,
   line-height: 28px;
   font-size: 14px;
 }
-.el-menu-item:hover, .el-menu-item:focus, .el-menu-item.is-active {
+
+.el-menu-item:hover,
+.el-menu-item:focus,
+.el-menu-item.is-active {
   background-color: #F6F7F9;
   border-radius: 6px;
 }
+
 .el-submenu__title:hover {
   background-color: unset;
 }
+
 // 表格 - Product页
 .el-table {
   th.el-table__cell {
-    padding: 32px 0 16px;
-    > .cell {
+    padding: 16px 0;
+
+    >.cell {
       padding: 0;
       color: #232A40;
       line-height: 20px;
     }
   }
+  td.el-table__cell {
+    padding: 16px 0;
+  }
+
+  .el-table__body tr.el-table__row {
+    .el-table__expand-column {
+      .el-table__expand-icon {
+        .el-icon.el-icon-arrow-right {
+          top: 8px;
+          width: 16px;
+          height: 16px;
+          background-image: url('/src/assets/images/unfold.svg');
+
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      .el-table__expand-icon.el-table__expand-icon--expanded {
+        transform: rotate(0deg);
+
+        .el-icon.el-icon-arrow-right {
+          background-image: url('/src/assets/images/fold.svg');
+        }
+      }
+    }
+  }
+
   .el-table__cell {
     padding: 10px 0 16px;
+
     .cell {
       position: relative;
       padding: 0;
@@ -72,24 +114,61 @@ li.el-menu-item,
       line-height: 20px;
     }
   }
+
   th.el-table__cell.is-leaf,
   td.el-table__cell {
     border-bottom: 1px solid #D9D9D9;
   }
+
+  .el-table__cell.el-table__expanded-cell {
+    padding: 0;
+
+    form {
+      display: flex;
+      padding-top: 8px;
+      padding-left: 48px;
+      flex-direction: column;
+      background: #F6F7F980;
+
+      .el-form-item {
+        display: flex;
+        margin-bottom: 8px;
+        flex-direction: column;
+
+        label {
+          font-size: 12px;
+          color: #808185;
+          font-weight: 700;
+          line-height: 16px;
+          margin-bottom: 2px;
+        }
+
+        .el-form-item__content {
+          color: #808185;
+          line-height: 16px;
+        }
+      }
+    }
+  }
 }
-.el-table::before, .el-table--group::after, .el-table--border::after {
+
+.el-table::before,
+.el-table--group::after,
+.el-table--border::after {
   background-color: #D9D9D9;
 }
+
 // 分页
 .el-pagination {
   padding: 20px 0;
 }
+
 .el-pagination::v-deep button {
   color: #232a40;
   background-color: #e7eaee !important;
 }
 
-.el-pagination::v-deep ul > li {
+.el-pagination::v-deep ul>li {
   color: #232a40;
   border-radius: 4px;
   margin-left: 6px;
@@ -99,117 +178,252 @@ li.el-menu-item,
   background-color: #fff;
 }
 
-.el-pagination::v-deep ul > .active {
+.el-pagination::v-deep ul>.active {
   color: #232a40 !important;
   background-color: #c6c9cc !important;
 }
 
 // ToolTip
 .el-tooltip__popper.is-dark {
-  padding: 2px 8px;
-  background: #373A47;
-  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.12);
-  line-height: 20px;
   font-size: 14px;
+  max-width: 320px;
+  padding: 4px 8px;
   font-weight: 400;
-  .popper__arrow {
-    display: none;
-  }
+  line-height: 20px;
+  background: #373A47;
+  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.12);
+
+  // .popper__arrow {
+  //   display: none;
+  // }
 }
+
 .el-tooltip__popper {
   margin-top: 0 !important;
 }
-.el-message{
+
+.el-message {
   top: 20px !important;
 }
-.el-message--success {
-  // margin-top: 90px !important;
-  background-color: #373A47 !important;
+
+.el-message.el-message--success {
   height: 36px;
-  min-width: auto !important;
-  padding: 12px !important;
-  p{
-    color: #fff !important;
+  padding: 12px;
+  min-width: auto;
+  border-color: #373A47;
+  background-color: #373A47;
+
+  .el-message__icon.el-icon-success {
+    width: 20px;
+    height: 20px;
+    background-image: url('/src/assets/images/success.svg');
+
+    &::before {
+      display: none;
+    }
+  }
+
+  p {
+    color: #fff;
   }
 }
+
 .el-message--error {
   border-color: #ff5054 !important;
   height: 36px;
   min-width: auto !important;
   padding: 12px !important;
 }
+
 .el-message__closeBtn {
   right: 10px
 }
+
 .el-dialog {
   border-radius: 8px !important;
+
   .el-dialog__header {
     display: none !important;
   }
+
   .el-dialog__body {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    text-align: center !important;
-    padding: 24px !important;
+    display: flex;
+    padding: 24px;
+    text-align: center;
     word-break: normal;
+    align-items: center;
+    flex-direction: column;
   }
+
   .el-dialog__footer {
-    padding: 0 24px 24px !important;
+    padding: 0 24px 24px;
+
     .el-button {
-      width: 133px !important;
-      height: 32px !important;
-      padding: 0 !important;
+      width: 133px;
+      height: 32px;
+      padding: 0;
+
       &.el-button--default {
-        border-color: #1460F3 !important;
+        border-color: #1460F3;
+
         span {
-          color: #1460F3 !important;
+          color: #1460F3;
         }
       }
+
       span {
-        line-height: 20px !important;
+        line-height: 20px;
       }
     }
-    .el-button + .el-button {
-      margin-left: 8px !important;
+
+    .el-button+.el-button {
+      margin-left: 8px;
     }
   }
+
   .el-dialog__footer_div {
     padding: 24px 20px 4px !important;
+
     .el-button {
       width: 133px !important;
       height: 32px !important;
       padding: 0 !important;
+
       &.el-button--default {
         border-color: #1460F3 !important;
+
         span {
           color: #1460F3 !important;
         }
       }
+
       span {
         line-height: 20px !important;
       }
     }
-    .el-button + .el-button {
+
+    .el-button+.el-button {
       margin-left: 8px !important;
     }
   }
 }
-.popper__arrow {
-  display: none !important;
-}
-.el-select-dropdown{
+
+
+.el-select-dropdown {
   margin-top: 0px !important;
+  .popper__arrow {
+    display: none !important;
+  }
 }
+
 .el-select ::v-deep .el-tag {
   color: #505258 !important;
   border: 1px solid #8D9CB9 !important;
   background-color: #EEF4FF !important;
 }
+
+.el-input {
+  .el-input__suffix {
+    right: 18px;
+  }
+}
 // 下拉框placeholder颜色，文字颜色
 .el-input__inner:not(.el-pagination .el-input__inner) {
   color: #232A40;
+
   &::placeholder {
     color: #808185;
   }
+}
+
+.el-popper.el-cascader__dropdown {
+  box-shadow: none;
+  background: transparent;
+  border: solid 1px transparent;
+
+  .el-cascader-panel {
+    & .el-scrollbar.el-cascader-menu:nth-child(1) {
+      border-right: none;
+
+      .el-cascader-menu__wrap {
+        height: auto;
+        overflow: hidden;
+        border-radius: 4px;
+        background: white;
+        margin: 0 !important;
+        box-shadow: 0px 4px 12px 0px #1018281A;
+
+        .el-icon-check.el-cascader-node__prefix {
+          display: none;
+
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    & .el-scrollbar.el-cascader-menu:nth-child(2) {
+      border-radius: 4px;
+      box-shadow: 0px 4px 12px 0px #1018281A;
+
+      .el-cascader-menu__wrap {
+        height: 368px;
+        background: white;
+
+        .el-icon-check.el-cascader-node__prefix {
+          display: none;
+
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .el-cascader-menu {
+      min-width: 160px;
+
+      .el-cascader-node {
+        &:hover {
+          background-color: #E6F2FF;
+        }
+
+        padding-left: 16px;
+
+        .el-cascader-node__label {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+}
+.el-popper.el-cascader__dropdown {
+  .popper__arrow {
+    display: none;
+    &::after {
+      display: none;
+    }
+  }
+}
+.el-dropdown-menu.el-popper {
+  padding: 4px 0;
+  .el-dropdown-menu__item {
+    padding: 0;
+    font-size: 14px;
+    color: #101828;
+    line-height: 20px;
+    button {
+      padding: 10px 12px;
+    }
+    &:hover {
+      background: #F1F1F2;
+    }
+  }
+}
+.el-loading-mask .el-loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }

src/components/icon/back.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.59502 11.695C9.84736 11.4426 9.86677 11.0456 9.65326 10.771L9.59502 10.705L5.89055 6.99999L9.59502 3.29497C9.84736 3.04263 9.86677 2.64557 9.65326 2.37097L9.59502 2.30502C9.34268 2.05268 8.94562 2.03327 8.67102 2.24679L8.60507 2.30502L4.40507 6.50502C4.15274 6.75736 4.13332 7.15442 4.34684 7.42902L4.40507 7.49497L8.60507 11.695C8.87844 11.9683 9.32166 11.9683 9.59502 11.695Z" fill="white"/>
+    <mask id="mask0_2626_12932" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="2" width="6" height="10">
+    <path d="M9.59502 11.695C9.84736 11.4426 9.86677 11.0456 9.65326 10.771L9.59502 10.705L5.89055 6.99999L9.59502 3.29497C9.84736 3.04263 9.86677 2.64557 9.65326 2.37097L9.59502 2.30502C9.34268 2.05268 8.94562 2.03327 8.67102 2.24679L8.60507 2.30502L4.40507 6.50502C4.15274 6.75736 4.13332 7.15442 4.34684 7.42902L4.40507 7.49497L8.60507 11.695C8.87844 11.9683 9.32166 11.9683 9.59502 11.695Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask0_2626_12932)">
+    <rect width="14" height="14" transform="matrix(0 -1 -1 0 14 14)" fill="#232A40"/>
+    </g>
+  </svg>
+</template>

src/components/icon/delete.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="10.7719" y="9.7122" width="1.5" height="12" rx="0.75" transform="rotate(135 10.7719 9.7122)" fill="#8D9CB9"/>
+    <rect x="9.71249" y="1.22696" width="1.5" height="12" rx="0.75" transform="rotate(45 9.71249 1.22696)" fill="#8D9CB9"/>
+  </svg>
+</template>

src/components/icon/down.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2615_10010)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.64645 4.14645C2.84171 3.95118 3.15829 3.95118 3.35355 4.14645L6 6.79289L8.64645 4.14645C8.84171 3.95118 9.15829 3.95118 9.35355 4.14645C9.54882 4.34171 9.54882 4.65829 9.35355 4.85355L6.35355 7.85355C6.15829 8.04882 5.84171 8.04882 5.64645 7.85355L2.64645 4.85355C2.45118 4.65829 2.45118 4.34171 2.64645 4.14645Z" fill="#1460F3"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2615_10010">
+    <rect width="12" height="12" fill="white"/>
+    </clipPath>
+    </defs>
+  </svg>
+</template>

src/components/sideMenu.vue

@@ -9,7 +9,6 @@ import Device from '@/components/icon/menu_device.vue'
 import Settings from '@/components/icon/menu_setting.vue'
 import Support from '@/components/icon/menu_support.vue'
 import Logout from '@/components/icon/logout.vue'
-import { Aside } from 'element-ui'
 import { userStore } from '@/store/userInfo'
 
 export default {
@@ -44,7 +43,7 @@ export default {
       this.$cookies.remove('accessToken')
       userStore().clearUserInfo()
     },
-    updataUserInfo(){
+    updateUserInfo(){
       get(
         '/pdf-tech/vppMember/getMemberInfo'
       ).then((res) => {
@@ -55,7 +54,7 @@ export default {
     }
   },
   filters:{
-    avant(){
+    avatar(){
       if (userStore().user.userName) {
         return userStore().user.userName.trim().substr(0, 1).toUpperCase()
       }
@@ -104,7 +103,7 @@ export default {
   <div class=" flex flex-col justify-between h-100vh">
     <div class="aside ">
       <div class="user-info">
-        <div class="head-photo"><p>{{ userName | avant() }}</p></div>
+        <div class="head-photo"><p>{{ userName | avatar() }}</p></div>
         <div class="info">
           <p>{{ userName | name() }}</p>
           <p>{{ email | email() }}</p>
@@ -154,10 +153,14 @@ export default {
             <span>Manage License</span>
           </el-menu-item>
         </div>
-        <el-menu-item index="/settings">
-          <Settings />
-          <span>Settings</span>
-        </el-menu-item>
+        <el-submenu index="6">
+          <template slot="title"> 
+            <Settings />
+            <span>Settings</span>
+          </template>
+          <el-menu-item index="/samlsetting">Directory Settings</el-menu-item>
+          <el-menu-item index="/settings">Personal Settings</el-menu-item>
+        </el-submenu>
         <el-menu-item index="/support">
           <Support />
           <span>Support</span>

src/router/index.js

@@ -200,6 +200,14 @@ const router = new VueRouter({
             title: 'Manage Device | PDF Tech Console'
           }
         },
+        {
+          path: "/samlsetting",
+          name: "samlsetting",
+          component: () => import("../views/SamlSetting.vue"),
+          meta: {
+            title: 'Console Settings | PDF Tech Console'
+          }
+        },
         {
           path: "/settings",
           name: "settings",

src/views/Assignlicense.vue

@@ -6,8 +6,8 @@ export default {
   data() {
     return {
       active: 0,
-      signleAssign: '',
-      signleProduct: '',
+      singleAssign: '',
+      singleProduct: '',
       teamAssign: '',
       teamProduct: '',
       memberId: '',
@@ -21,29 +21,26 @@ export default {
   },
   mounted() {
     //获取团队列表
-    get('/pdf-tech/vppTeam/listWithAdmin').then(
-      (res) => {
-        this.teamList = res.data.result
-      }
-    )
+    get('/pdf-tech/vppTeam/listWithAdmin').then((res) => {
+      this.teamList = res.data.result
+    })
   },
   watch: {
-    signleAssign: {
+    singleAssign: {
       handler(val) {
         if (val) {
           this.memberId = []
-          this.signleProduct = []
+          this.singleProduct = []
           //获取成员列表
           get(
             '/pdf-tech/vppRTeamMemberRole/listByTeamId?teamId=' +
-              this.signleAssign
+              this.singleAssign
           ).then((res) => {
             this.memberList = res.data.result
           })
           //获取产品列表
           get(
-            '/pdf-tech/product/listWithSimpleInfo?teamId=' +
-              this.signleAssign
+            '/pdf-tech/product/listWithSimpleInfo?teamId=' + this.singleAssign
           ).then((res) => {
             this.productList = productListNameMapping(res.data.result)
           })
@@ -58,14 +55,13 @@ export default {
           //获取成员列表
           get(
             '/pdf-tech/vppRTeamMemberRole/listByTeamId?teamId=' +
-              this.signleAssign
+              this.singleAssign
           ).then((res) => {
             this.memberList = res.data.result
           })
           //获取产品列表
           get(
-            '/pdf-tech/product/listWithSimpleInfo?teamId=' +
-              this.teamAssign
+            '/pdf-tech/product/listWithSimpleInfo?teamId=' + this.teamAssign
           ).then((res) => {
             this.productList = productListNameMapping(res.data.result)
           })
@@ -75,28 +71,37 @@ export default {
   },
   methods: {
     assignLicense() {
-      if(!this.click){return}
+      if (!this.click) {
+        return
+      }
       this.click = false
       setTimeout(() => {
         this.click = true
       }, 2000)
-      if (this.signleAssign === ''
-      || this.memberId === '' || this.memberId == undefined || this.memberId == null || this.memberId.length <= 0
-      || this.signleProduct === '' || this.signleProduct == undefined || this.signleProduct == null || this.signleProduct.length <= 0
+      if (
+        this.singleAssign === '' ||
+        this.memberId === '' ||
+        this.memberId == undefined ||
+        this.memberId == null ||
+        this.memberId.length <= 0 ||
+        this.singleProduct === '' ||
+        this.singleProduct == undefined ||
+        this.singleProduct == null ||
+        this.singleProduct.length <= 0
       ) {
-        this.$message.error({message: 'Missing required information', duration: 5000})
+        this.$message.error({
+          message: 'Missing required information',
+          duration: 5000
+        })
         return
       }
       if (this.singleLoading) return
       this.singleLoading = true
       var urlencoded = new URLSearchParams()
       urlencoded.append('memberIds', this.memberId)
-      urlencoded.append('teamId', this.signleAssign)
-      urlencoded.append('productIds', this.signleProduct)
-      post(
-        '/pdf-tech/vppLicenseCode/singleAssign',
-        urlencoded
-      ).then((res) => {
+      urlencoded.append('teamId', this.singleAssign)
+      urlencoded.append('productIds', this.singleProduct)
+      post('/pdf-tech/vppLicenseCode/singleAssign', urlencoded).then((res) => {
         setTimeout(() => {
           this.singleLoading = false
         }, 2000)
@@ -107,29 +112,45 @@ export default {
             type: 'success'
           })
           this.$router.push({ name: 'licenseManage' })
-        } else if(res.data.code === 700 && res.data.msg == 'Please add the user to a team which has remaining license first'){
+        } else if (
+          res.data.code === 700 &&
+          res.data.msg ==
+            'Please add the user to a team which has remaining license first'
+        ) {
           this.$message.error({
             duration: 5000,
-            message: 'Please assign more license to the team',
+            message: 'Please assign more license to the team'
           })
-        } else if(res.data.code === 700 && res.data.msg == 'Please allocate more license to the team first'){
+        } else if (
+          res.data.code === 700 &&
+          res.data.msg == 'Please allocate more license to the team first'
+        ) {
           this.$message.error({
             duration: 5000,
-            message: 'Please assign more license to the team',
+            message: 'Please assign more license to the team'
           })
         }
       })
     },
     assignTeamLicense() {
-      if(!this.click){return}
+      if (!this.click) {
+        return
+      }
       this.click = false
       setTimeout(() => {
         this.click = true
       }, 2000)
-      if (this.teamAssign === ''
-      || this.teamProduct === '' || this.teamProduct == undefined || this.teamProduct == null || this.teamProduct.length <= 0
+      if (
+        this.teamAssign === '' ||
+        this.teamProduct === '' ||
+        this.teamProduct == undefined ||
+        this.teamProduct == null ||
+        this.teamProduct.length <= 0
       ) {
-        this.$message.error({duration: 5000,message: 'Missing required information'})
+        this.$message.error({
+          duration: 5000,
+          message: 'Missing required information'
+        })
         return
       }
       if (this.teamLoading) return
@@ -137,10 +158,7 @@ export default {
       var urlencoded = new URLSearchParams()
       urlencoded.append('teamId', this.teamAssign)
       urlencoded.append('productIds', this.teamProduct)
-      post(
-        '/pdf-tech/vppLicenseCode/teamAssign',
-        urlencoded
-      ).then((res) => {
+      post('/pdf-tech/vppLicenseCode/teamAssign', urlencoded).then((res) => {
         setTimeout(() => {
           this.teamLoading = false
         }, 2000)
@@ -151,15 +169,22 @@ export default {
             type: 'success'
           })
           this.$router.push({ name: 'licenseManage' })
-        } else if(res.data.code === 700 && res.data.msg == 'Please add the user to a team which has remaining license first'){
+        } else if (
+          res.data.code === 700 &&
+          res.data.msg ==
+            'Please add the user to a team which has remaining license first'
+        ) {
           this.$message.error({
             duration: 5000,
-            message: 'Please assign more license to the team',
+            message: 'Please assign more license to the team'
           })
-        } else if(res.data.code === 700 && res.data.msg == 'Please allocate more license to the team first'){
+        } else if (
+          res.data.code === 700 &&
+          res.data.msg == 'Please allocate more license to the team first'
+        ) {
           this.$message.error({
             duration: 5000,
-            message: 'Please assign more license to the team',
+            message: 'Please assign more license to the team'
           })
         }
       })
@@ -173,34 +198,13 @@ export default {
     <h1 class="text-28px leading-40px mb-15px font-700">Assign License</h1>
     <div class="flex">
       <span
-        class="
-          flex
-          justify-center
-          bg-[#C6C9CC]
-          rounded-t-8px
-          items-center
-          font-bold
-          w-200px
-          h-32px
-          hand
-        "
+        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px hand"
         @click="active = 0"
         :class="active === 0 ? 'active' : ''"
         >Single License</span
       >
       <span
-        class="
-          flex
-          justify-center
-          bg-[#C6C9CC]
-          rounded-t-8px
-          items-center
-          font-bold
-          w-200px
-          h-32px
-          ml-8px
-          hand
-        "
+        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px ml-8px hand"
         @click="active = 1"
         :class="active === 1 ? 'active' : ''"
         >Team License</span
@@ -218,7 +222,7 @@ export default {
             >Team<span class="text-[#FF5054]">*</span></span
           >
           <el-select
-            v-model="signleAssign"
+            v-model="singleAssign"
             placeholder="Team Name"
             class="w-600px"
           >
@@ -255,7 +259,7 @@ export default {
             >Product<span class="text-[#FF5054]">*</span></span
           >
           <el-select
-            v-model="signleProduct"
+            v-model="singleProduct"
             multiple
             placeholder="Select Product"
             class="w-600px"
@@ -273,31 +277,14 @@ export default {
           <button
             type="button"
             @click="$router.push({ name: 'licenseManage' })"
-            class="
-              w-168px
-              h-48px
-              border-1px border-[#1460F3]
-              text-[#1460F3]
-              rounded-8px
-              font-bold
-              hover:opacity-80
-            "
+            class="w-168px h-48px border-1px border-[#1460F3] text-[#1460F3] rounded-8px font-bold hover:opacity-80"
           >
             Cancel
           </button>
           <button
             type="button"
             @click="assignLicense()"
-            class="
-              w-168px
-              h-48px
-              ml-16px
-              bg-[#1460F3]
-              text-[#fff]
-              rounded-8px
-              font-bold
-              hover:opacity-80
-            "
+            class="w-168px h-48px ml-16px bg-[#1460F3] text-[#fff] rounded-8px font-bold hover:opacity-80"
           >
             Assign
           </button>
@@ -351,31 +338,14 @@ export default {
           <button
             type="button"
             @click="$router.go(-1)"
-            class="
-              w-168px
-              h-48px
-              border-1px border-[#1460F3]
-              text-[#1460F3]
-              rounded-8px
-              font-bold
-              hover:opacity-80
-            "
+            class="w-168px h-48px border-1px border-[#1460F3] text-[#1460F3] rounded-8px font-bold hover:opacity-80"
           >
             Cancel
           </button>
           <button
             type="button"
             @click="assignTeamLicense()"
-            class="
-              w-168px
-              h-48px
-              ml-16px
-              bg-[#1460F3]
-              text-[#fff]
-              rounded-8px
-              font-bold
-              hover:opacity-80
-            "
+            class="w-168px h-48px ml-16px bg-[#1460F3] text-[#fff] rounded-8px font-bold hover:opacity-80"
           >
             Assign
           </button>
@@ -425,7 +395,7 @@ export default {
 .el-tag__close {
   font-weight: 700;
   font-size: 18px !important;
-  color: #8D9CB9 !important;
-  background-color: #EEF4FF !important;
+  color: #8d9cb9 !important;
+  background-color: #eef4ff !important;
 }
 </style>

src/views/Create.vue

@@ -1,14 +1,14 @@
 <script>
 import { get, post } from '../../utils/request'
-import Eyecolse from '@/components/icon/eye_colse.vue'
-import Eyeopen from '@/components/icon/eye_open.vue'
+import EyeClose from '@/components/icon/eye_close.vue'
+import EyeOpen from '@/components/icon/eye_open.vue'
 import Loading from '@/components/icon/loading.vue'
 import Error from '@/components/icon/error.vue'
 import Email from '@/components/icon/email.vue'
 import AsideInfo from '@/components/asideInfo.vue'
 
 export default {
-  components: { Eyecolse, Eyeopen, Loading, Error, Email, AsideInfo },
+  components: { EyeClose, EyeOpen, Loading, Error, Email, AsideInfo },
   created() {
     if (!this.$route.query.code) {
       this.$router.push('/404')
@@ -313,8 +313,8 @@ export default {
                 </el-input>
                 <span v-show="ruleForm.password !== ''" class="show-password"
                   :class="passwordType ? 'eye-open' : 'eye-close'" @click="passwordType = !passwordType">
-                  <Eyeopen v-show="passwordType" />
-                  <Eyecolse v-show="!passwordType" />
+                  <EyeOpen v-show="passwordType" />
+                  <EyeClose v-show="!passwordType" />
                 </span>
               </div>
             </el-form-item>
@@ -330,8 +330,8 @@ export default {
                 <span v-show="ruleForm.passwordConfirm !== ''" class="show-password"
                   :class="passwordConfirmType ? 'eye-open' : 'eye-close'"
                   @click="passwordConfirmType = !passwordConfirmType">
-                  <Eyeopen v-show="passwordConfirmType" />
-                  <Eyecolse v-show="!passwordConfirmType" />
+                  <EyeOpen v-show="passwordConfirmType" />
+                  <EyeClose v-show="!passwordConfirmType" />
                 </span>
               </div>
             </el-form-item>

src/views/FreeSign.vue

@@ -1,13 +1,13 @@
 <script>
 import { get, post } from '../../utils/request'
-import Eyecolse from '@/components/icon/eye_colse.vue'
-import Eyeopen from '@/components/icon/eye_open.vue'
+import EyeClose from '@/components/icon/eye_close.vue'
+import EyeOpen from '@/components/icon/eye_open.vue'
 import Email from '@/components/icon/email.vue'
 import Close from '@/components/icon/close.vue'
 import AsideInfo from '@/components/asideInfo.vue'
 
 export default {
-  components: { Eyecolse, Eyeopen, AsideInfo, Email, Close },
+  components: { EyeClose, EyeOpen, AsideInfo, Email, Close },
   data() {
     var validatePass = (rule, value, callback) => {
       if (value === '') {
@@ -329,8 +329,8 @@ export default {
                     :type="passwordType ? '' : 'password'">
                   </el-input>
                   <span v-show="ruleForm.password !== ''" class="show-password" @click="passwordType = !passwordType">
-                    <Eyeopen v-show="passwordType" />
-                    <Eyecolse v-show="!passwordType" />
+                    <EyeOpen v-show="passwordType" />
+                    <EyeClose v-show="!passwordType" />
                   </span>
                 </div>
               </el-form-item>
@@ -341,8 +341,8 @@ export default {
                   </el-input>
                   <span v-show="ruleForm.passwordConfirm !== ''" class="show-password"
                     @click="passwordConfirmType = !passwordConfirmType">
-                    <Eyeopen v-show="passwordConfirmType" />
-                    <Eyecolse v-show="!passwordConfirmType" />
+                    <EyeOpen v-show="passwordConfirmType" />
+                    <EyeClose v-show="!passwordConfirmType" />
                   </span>
                 </div>
               </el-form-item>

src/views/Login.vue

@@ -1,15 +1,15 @@
 <script>
 import { post, get } from '../../utils/request'
 import crypto from '@/crypto/crypto'
-import Eyecolse from '@/components/icon/eye_colse.vue'
-import Eyeopen from '@/components/icon/eye_open.vue'
+import EyeClose from '@/components/icon/eye_close.vue'
+import EyeOpen from '@/components/icon/eye_open.vue'
 import Error from '@/components/icon/error.vue'
 import AsideInfo from '@/components/asideInfo.vue'
 import { userStore } from '@/store/userInfo'
 import TrailForm from '@/components/trailForm.vue'
 
 export default {
-  components: { Eyecolse, Eyeopen, Error, AsideInfo, TrailForm },
+  components: { EyeClose, EyeOpen, Error, AsideInfo, TrailForm },
   data() {
     return {
       passwordError: false,
@@ -17,7 +17,7 @@ export default {
       empty: true,
       teamIds: '',
       passwordType: false,
-      remenber: false,
+      remember: false,
       ruleForm: {
         email: '',
         password: ''
@@ -43,14 +43,14 @@ export default {
     }
   },
   mounted() {
-    const isRemenber = localStorage.getItem('isRemenber')
-    if (isRemenber) {
+    const isRemember = localStorage.getItem('isRemember')
+    if (isRemember) {
       this.ruleForm.email = localStorage.getItem('username') || ''
       this.ruleForm.password =
         crypto.get(localStorage.getItem('password')) || ''
-      this.remenber = true
+      this.remember = true
     }
-    this.isdisable()
+    this.isDisable()
     if (this.$route.query.freeEmail) {
       this.ruleForm.email = this.$route.query.freeEmail
       this.ruleForm.password = ''
@@ -62,10 +62,10 @@ export default {
       this.emailError = false
       this.$refs['ruleForm'].validate((valid) => {
         if (valid) {
-          var formdata = new FormData()
-          formdata.append('username', this.ruleForm.email)
-          formdata.append('password', this.ruleForm.password)
-          post('/pdf-tech/login', formdata).then(
+          const formData = new FormData()
+          formData.append('username', this.ruleForm.email)
+          formData.append('password', this.ruleForm.password)
+          post('/pdf-tech/login', formData).then(
             (res) => {
               if (res.data.code === 200 && res.data.msg === '获取授权码成功') {
                 this.$message({
@@ -101,10 +101,10 @@ export default {
                 localStorage.setItem('username', this.ruleForm.email)
                 const SECRET_PWD = crypto.set(this.ruleForm.password) // 加密
                 localStorage.setItem('password', SECRET_PWD)
-                if (this.remenber) {
-                  localStorage.setItem('isRemenber', 'true')
+                if (this.remember) {
+                  localStorage.setItem('isRemember', 'true')
                 } else {
-                  localStorage.removeItem('isRemenber')
+                  localStorage.removeItem('isRemember')
                 }
 
               } else if (
@@ -138,7 +138,7 @@ export default {
         }
       })
     },
-    isdisable() {
+    isDisable() {
       if (
         this.ruleForm.email.trim() !== '' ||
         this.ruleForm.password.trim() !== ''
@@ -206,7 +206,7 @@ export default {
             <el-form-item prop="email">
               <div class="mt-24px text-[#404653] text-16px leading-24px mb-8px">Email</div>
               <div class="flex items-center">
-                <el-input v-model.trim="ruleForm.email" @input="isdisable()" placeholder="Please enter email address." />
+                <el-input v-model.trim="ruleForm.email" @input="isDisable()" placeholder="Please enter email address." />
                 <Error class="w-14px h-14px block absolute right-13px bottom-15px"
                   :class="emailError ? 'block' : 'hidden'" />
               </div>
@@ -214,20 +214,20 @@ export default {
             <el-form-item prop="password">
               <div class="text-[#404653] text-16px leading-24px mb-8px">Password</div>
               <div class="flex items-center">
-                <el-input v-model="ruleForm.password" placeholder="Please enter password" @input="isdisable()"
+                <el-input v-model="ruleForm.password" placeholder="Please enter password" @input="isDisable()"
                   @keyup.enter.native="submit()" :type="passwordType ? '' : 'password'">
                 </el-input>
                 <span v-show="ruleForm.password !== ''" class="show-password inline-block"
                   :class="passwordType ? 'eye-open' : 'eye-close'" @click="passwordType = !passwordType">
-                  <Eyeopen v-show="passwordType" />
-                  <Eyecolse v-show="!passwordType" />
+                  <EyeOpen v-show="passwordType" />
+                  <EyeClose v-show="!passwordType" />
                 </span>
                 <Error class="w-14px h-14px block show-password" :class="passwordError ? 'block' : 'hidden'" />
               </div>
             </el-form-item>
             <el-form-item>
               <div class="flex justify-between items-center !text-12px">
-                <el-checkbox label="Keep me logged in" name="type" v-model="remenber"></el-checkbox>
+                <el-checkbox label="Keep me logged in" name="type" v-model="remember"></el-checkbox>
                 <router-link to="/forget-password" class="text-[#3686FF]">
                   Forgot Password?
                 </router-link>

src/views/Noadmin.vue

@@ -1,29 +1,6 @@
-<script>
-import { userStore } from '@/store/userInfo'
-import { get } from '../../utils/request'
-
-export default {
-  methods:{
-    Refresh(){
-      // get('/pdf-tech/vppMember/getMemberInfo').then(
-      //   (res) => {
-      //     if (res.data.code === 200 && res.data.msg == 'success') {
-      //       userStore().setUserInfo(res.data.result)
-      //       get(
-      //         '/pdf-tech/vppLicenseCode/checkCompanyLicense?companyId='+res.data.result.companyId
-      //       ).then((res)=>{
-      //         if(!res.data.result){
-      //           this.$router.push('/non-admin-user')
-      //           return
-      //         }else{
-      //           this.$router.push('/dashboard')
-      //         }
-      //       })
-      //     }
-      //   })
-      window.location.reload() 
-    }
-  }
+<script setup>
+const Refresh = () => {
+  window.location.reload()
 }
 </script>
 
@@ -43,7 +20,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-
-</style>

src/views/Reseller/License.vue

@@ -27,8 +27,8 @@ onMounted(() => {
     pageText.childNodes[0].nodeValue = 'Jump to Page'
   }
   pagingQuery()
-  getproductList()
-  updataUserInfo()
+  getProductList()
+  updateUserInfo()
 })
 const pagingQuery = (val) => {
   //初始化表格
@@ -71,7 +71,7 @@ const pagingQuery = (val) => {
   })
 }
 //获取已购买产品
-const getproductList = (val) => {
+const getProductList = (val) => {
   get('/pdf-tech/product/listWithAll').then(
     (res) => {
       const data = res.data.result
@@ -137,7 +137,7 @@ const searchInfo = (val) => {
   pagingQuery()
 }
 // 获取用户信息
-const updataUserInfo = () => {
+const updateUserInfo = () => {
   get(
     '/pdf-tech/vppMember/getMemberInfo'
   ).then((res) => {

src/views/Reseller/Product.vue

@@ -19,8 +19,8 @@ onMounted(() => {
     pageText.childNodes[0].nodeValue = 'Jump to Page'
   }
   pagingQuery()
-  getproductList()
-  updataUserInfo()
+  getProductList()
+  updateUserInfo()
 })
 //筛选
 const searchInfo = () => {
@@ -54,7 +54,7 @@ const pagingQuery = () => {
   })
 }
 //获取已购买产品
-const getproductList = (val) => {
+const getProductList = (val) => {
   get('/pdf-tech/product/listWithAll').then(
     (res) => {
       const data = res.data.result
@@ -80,7 +80,7 @@ const handleCurrentChange = (value) => {
   pagingQuery()
 }
 // 获取用户信息
-const updataUserInfo = () => {
+const updateUserInfo = () => {
   get(
     '/pdf-tech/vppMember/getMemberInfo'
   ).then((res) => {

src/views/Settings.vue

@@ -149,13 +149,11 @@ export default {
       })
     },
     // 获取用户信息
-    updataUserInfo() {
-      get(
-        '/pdf-tech/vppMember/getMemberInfo'
-      ).then((res) => {
+    updateUserInfo() {
+      get('/pdf-tech/vppMember/getMemberInfo').then((res) => {
         if (res.data.code === 200 && res.data.msg == 'success') {
           userStore().setUserInfo(res.data.result)
-          if(res.data.result.validFlag === '0'){
+          if (res.data.result.validFlag === '0') {
             this.$router.push('/login')
           }
         }
@@ -168,7 +166,7 @@ export default {
     this.ruleForm.userName = userStore().user.userName
     this.ruleForm.area = userStore().user.area || ''
     this.role = userStore().user.role
-    this.updataUserInfo()
+    this.updateUserInfo()
   }
 }
 </script>
@@ -178,34 +176,13 @@ export default {
     <h1 class="text-28px leading-40px mb-15px font-700">Settings</h1>
     <div class="flex">
       <span
-        class="
-          flex
-          justify-center
-          bg-[#C6C9CC]
-          rounded-t-8px
-          items-center
-          font-bold
-          w-200px
-          h-32px
-          hand
-        "
+        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px cursor-pointer"
         @click="active = 0"
         :class="active === 0 ? 'active' : ''"
         >General</span
       >
       <span
-        class="
-          flex
-          justify-center
-          bg-[#C6C9CC]
-          rounded-t-8px
-          items-center
-          font-bold
-          w-200px
-          h-32px
-          ml-8px
-          hand
-        "
+        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px ml-8px cursor-pointer"
         @click="active = 1"
         :class="active === 1 ? 'active' : ''"
         >Security</span
@@ -255,7 +232,11 @@ export default {
           </div>
         </el-form-item>
         <el-form-item label="Country/Region">
-          <select v-model="ruleForm.area" class="flex w-600px !h-40px" :class="{ '!text-[#232A40]': ruleForm.area !== '' }">
+          <select
+            v-model="ruleForm.area"
+            class="flex w-600px !h-40px"
+            :class="{ '!text-[#232A40]': ruleForm.area !== '' }"
+          >
             <option value="" selected>Choose your country/region</option>
             <option
               v-for="(item, index) in country"
@@ -270,15 +251,7 @@ export default {
           <button
             type="button"
             @click="changeInfo()"
-            class="
-              w-168px
-              h-48px
-              bg-[#1460F3]
-              text-[#fff]
-              rounded-8px
-              font-bold
-              hover:opacity-80
-            "
+            class="w-168px h-48px bg-[#1460F3] text-[#fff] rounded-8px font-bold hover:opacity-80"
           >
             Save the Change
           </button>
@@ -345,15 +318,7 @@ export default {
           <button
             type="button"
             @click="changePassword()"
-            class="
-              w-168px
-              h-48px
-              bg-[#1460F3]
-              text-[#fff]
-              rounded-8px
-              font-bold
-              hover:opacity-80
-            "
+            class="w-168px h-48px bg-[#1460F3] text-[#fff] rounded-8px font-bold hover:opacity-80"
           >
             Save the Change
           </button>
@@ -364,9 +329,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.hand {
-  cursor: pointer;
-}
 .el-form-item::v-deep label {
   color: #232a40 !important;
 }

src/views/TeamManagement/ManageMember.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { onMounted, ref, getCurrentInstance } from 'vue'
+import { onMounted, ref, getCurrentInstance, watch } from 'vue'
 import Search from '@/components/icon/search.vue'
 import Warning from '@/components/icon/warning.vue'
+import Close from '@/components/icon/close.vue'
+import Empty from '@/components/icon/empty.vue'
 import { get, downLoad, post } from '../../../utils/request'
 import { productListNameMapping } from '../../../utils/mapping'
 
@@ -14,48 +16,134 @@ const queryString = ref('')
 const dialogVisible = ref(false)
 const MemberName = ref('')
 const total = ref(0)
+const directoryTotal = ref(0)
+const deleteDirectoryTotal = ref(0)
 const teamId = ref('')
 const status = ref('')
+const directoryStatus = ref('')
 const product = ref('')
 const size = ref(5)
 const memberId = ref('')
+const tag = ref('invited')
+const tagSecond  = ref('all')
+const userList = ref([])
+const directoryEmail = ref('')
+const directoryMemberId = ref('')
+const deleteList = ref([])
+const domainList = ref([])
+const directoryData = ref([])
+const deleteDirectoryData = ref([])
+const directoryId = ref('')
+const revokeDialogVisible = ref(false)
+const deleteDialogVisible = ref(false)
+const restoreDialogVisible = ref(false)
+const loading = ref(true)
+const multipleTable = ref()
 let click = true
 
-//打开删除对话框
+onMounted(() => {
+  let pageText = document.getElementsByClassName('el-pagination__jump')[0]
+  if (pageText) {
+    pageText.childNodes[0].nodeValue = 'Jump to Page'
+  }
+  getManageMemberList()
+  getTeamList()
+  getProductList()
+  getDomainList()
+})
+// 获取域列表
+const getDomainList = async () => {
+  loading.value = true
+  try {
+    const { data } = await get('/pdf-tech/domain/list')
+    data.result.forEach(item => {
+      if (Number(item.verified)) {
+        domainList.value.push(item)
+      }
+    })
+  } catch (error) {
+    console.log(error)
+  }
+}
+// 获取目录用户列表
+const getDirectoryUser = async () => {
+  const { data } = await get('/pdf-tech/vppRTeamMemberRole/pageForSSOMember?page=' +
+    currentPage.value +
+    '&pageSize=' +
+    size.value +
+    '&status=' +
+    directoryStatus.value +
+    '&queryString=' +
+    queryString.value +
+    '&directoryId=' +
+    directoryId.value)
+  loading.value = false
+  directoryData.value = data.result.list
+  directoryTotal.value = data.result.total
+}
+// 获取删除目录用户列表
+const getDeleteDirectoryUser = async () => {
+  const { data } = await get('/pdf-tech/vppRTeamMemberRole/pageForSSOMember?page=' +
+      currentPage.value +
+      '&pageSize=' +
+      size.value +
+      '&status=0' +
+      '&queryString=' +
+      queryString.value +
+      '&directoryId=' +
+      directoryId.value)
+  loading.value = false
+  deleteDirectoryData.value = data.result.list
+  deleteDirectoryTotal.value = data.result.total
+}
+// 打开删除对话框
 const handleClick = (val) => {
   dialogVisible.value = true
   MemberName.value = val.email
   memberId.value = val.id
 }
-//确认删除
-function deleteMember(){
-  if(!click){return}
+// 确认删除
+const deleteMember = (val) => {
+  if (!click) {
+    return
+  }
   click = false
   setTimeout(() => {
     click = true
   }, 2000)
   var urlencoded = new URLSearchParams()
-  urlencoded.append("memberId", memberId.value)
-  post("/pdf-tech/vppTeam/deleteMember",urlencoded).then((res)=>{
-    if(res.data.code === 200){
+  urlencoded.append('memberId', memberId.value)
+  post('/pdf-tech/vppTeam/deleteMember', urlencoded).then((res) => {
+    if (res.data.code === 200) {
       dialogVisible.value = false
       proxy.$message({
-          message: 'Delete Successfully',
-          type: "success"
+        message: 'Delete Successfully',
+        type: 'success'
       })
       getManageMemberList()
     }
   })
 }
-
-function handleSizeChange(val) {
+// 改变一页显示个数
+const handleSizeChange = (val) => {
   size.value = val
   currentPage.value = 1
-  getManageMemberList()
+  if (tag.value === 'invited') {
+    getManageMemberList()
+  } else {
+    loading.value = true
+    getDirectoryUser()
+  }
 }
-function handleCurrentChange(val) {
+// 切换页数
+const handleCurrentChange = (val) => {
   currentPage.value = val
-  getManageMemberList()
+  if (tag.value === 'invited') {
+    getManageMemberList()
+  } else {
+    loading.value = true
+    getDirectoryUser()
+  }
 }
 // 获取团队管理列表
 const getTeamList = () => {
@@ -68,37 +156,28 @@ const getTeamList = () => {
     }
   })
 }
-//获取已购买产品
-const getproductList = () => {
-  get('/pdf-tech/product/listWithAdmin').then(
-    (res) => {
-      productList.value = productListNameMapping(res.data.result)
-    }
-  )
+// 获取已购买产品
+const getProductList = () => {
+  get('/pdf-tech/product/listWithAdmin').then((res) => {
+    productList.value = productListNameMapping(res.data.result)
+  })
 }
 // 获取成员列表
-function getManageMemberList() {
-  //初始化表格
+const getManageMemberList = () => {
+  // 初始化表格
   tableData.value = []
-  get(
-    '/pdf-tech/vppRTeamMemberRole/pageForMember?page=' +
+  get('/pdf-tech/vppRTeamMemberRole/pageForMember?page=' +
       currentPage.value +
-      '&' +
-      'pageSize=' +
+      '&pageSize=' +
       size.value +
-      '&' +
-      'teamId=' +
+      '&teamId=' +
       teamId.value +
-      '&' +
-      'status=' +
+      '&status=' +
       status.value +
-      '&' +
-      'queryString=' +
+      '&queryString=' +
       queryString.value +
-      '&' +
-      'productCode=' +
-      product.value
-  ).then((res) => {
+      '&productCode=' +
+      product.value).then((res) => {
     let data = res.data.result.list
     data = productListNameMapping(data)
     for (let i = 0; i < data.length; i++) {
@@ -109,246 +188,497 @@ function getManageMemberList() {
       } else {
         data[i].validFlag = 'Invited'
       }
-      data[i].productNames = res.data.result.list[i].productNames?.replace(/,/g, ",|").split("|")
+      data[i].productNames = res.data.result.list[i].productNames
+        ?.replace(/,/g, ',|')
+        .split('|')
     }
     tableData.value = data
     total.value = res.data.result.total
   })
 }
 // 团队成员列表导出
-function exportManageMemberList() {
+const exportManageMemberList = () => {
   var urlencoded = new URLSearchParams()
-  urlencoded.append("queryString", queryString.value)
-  urlencoded.append("productId", product.value)
-  urlencoded.append("teamId", teamId.value)
-  urlencoded.append("status", status.value)
-  if(click){
+  urlencoded.append('queryString', queryString.value)
+  urlencoded.append('productId', product.value)
+  urlencoded.append('teamId', teamId.value)
+  urlencoded.append('status', status.value)
+  if (click) {
     click = false
-    downLoad("/pdf-tech/vppRTeamMemberRole/download", urlencoded).then((res)=>{
+    downLoad('/pdf-tech/vppRTeamMemberRole/download', urlencoded).then(
+      (res) => {
         //限制点击
         setTimeout(() => {
           click = true
         }, 2000)
-        let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }))
-        let a= document.createElement('a')
+        let url = window.URL.createObjectURL(
+          new Blob([res.data], { type: '.xlsx' })
+        )
+        let a = document.createElement('a')
         a.style.display = 'none'
         a.href = url
         // 自定义文件名
         a.setAttribute('download', `User Information.xlsx`)
-         document.body.appendChild(a)
-         // 下载文件
-         a.click()
-         // 释放内存
-         url = window.URL.revokeObjectURL(url)
-         document.body.removeChild(a) 
-    })
+        document.body.appendChild(a)
+        // 下载文件
+        a.click()
+        // 释放内存
+        url = window.URL.revokeObjectURL(url)
+        document.body.removeChild(a)
+      }
+    )
   }
 }
-//筛选
+// 筛选
 const searchInfo = () => {
-    currentPage.value = 1
+  currentPage.value = 1
+  if (tag.value === 'invited') {
     getManageMemberList()
+  } else {
+    loading.value = true
+    if (tagSecond.value === 'delete') {
+      directoryStatus.value = ''
+      directoryId.value = ''
+      getDeleteDirectoryUser()
+    } else getDirectoryUser()
+  }
 }
-onMounted(() => {
-  let pageText = document.getElementsByClassName('el-pagination__jump')[0]
-  if (pageText) {
-    pageText.childNodes[0].nodeValue = 'Jump to Page'
+// 获取用户多选操作
+const handleSelectionChange = (val) => {
+  userList.value = []
+  val.forEach(item => {
+    userList.value.push(item.id)
+  })
+}
+// 打开删除对话框
+const openDeleteDialog = () => {
+  if (userList.value.length) {
+    userList.value = []
   }
-  getManageMemberList()
-  getTeamList()
-  getproductList()
-})
+  deleteDialogVisible.value = true
+}
+// 吊销用户
+const revokeUser = async () => {
+  try {
+    const { data } = await post('/pdf-tech/vppRTeamMemberRole/revokeSSOMember?memberId=' + directoryMemberId.value)
+    if (data.code === 200) {
+      proxy.$message({
+        duration: 5000,
+        message: 'Revoke Success',
+        type: 'success'
+      })
+    } else {
+      proxy.$message({
+        duration: 5000,
+        message: data.msg,
+        type: 'error'
+      })
+    }
+    revokeDialogVisible.value = false
+    loading.value = true
+    getDirectoryUser()
+  } catch (error) {
+    console.log(error)
+  }
+}
+// 删除用户
+const deleteUser = async (type) => {
+  console.log(type)
+  let directoryMemberIdList = []
+  if (userList.value.length && type === 'multiple') {
+    directoryMemberIdList = userList.value
+  } else directoryMemberIdList.push(directoryMemberId.value)
+  try {
+    const { data } = await post('/pdf-tech/vppRTeamMemberRole/removeSSOMember?memberIds=' + directoryMemberIdList)
+    if (data.code === 200) {
+      proxy.$message({
+        duration: 5000,
+        message: 'Remove Success',
+        type: 'success'
+      })
+    } else {
+      proxy.$message({
+        duration: 5000,
+        message: data.msg,
+        type: 'error'
+      })
+    }
+    deleteDialogVisible.value = false
+    loading.value = true
+    getDirectoryUser()
+  } catch (error) {
+    console.log(error)
+  }
+}
+// 还原用户
+const restore = async (val, type) => {
+  let directoryMemberIdList = []
+  if (userList.value.length && type === 'multiple') {
+    directoryMemberIdList = userList.value
+  } else directoryMemberIdList.push(val.id)
+  try {
+    const { data } = await post('/pdf-tech/vppRTeamMemberRole/reductionSSOMember?memberIds=' + directoryMemberIdList)
+    if (data.code === 200) {
+      proxy.$message({
+        duration: 5000,
+        message: 'Restore Success',
+        type: 'success'
+      })
+    } else {
+      proxy.$message({
+        duration: 5000,
+        message: data.msg,
+        type: 'error'
+      })
+    }
+    loading.value = true
+    getDeleteDirectoryUser()
+  } catch (error) {
+    console.log(error)
+  }
+}
+// 取消吊销用户
+const unRevoke = async () => {
+  try {
+    const directoryMemberIdList = []
+    console.log(directoryMemberId.value)
+    directoryMemberIdList.push(directoryMemberId.value)
+    const { data } = await post('/pdf-tech/vppRTeamMemberRole/reductionSSOMember?memberIds=' + directoryMemberIdList)
+    if (data.code === 200) {
+      proxy.$message({
+        duration: 5000,
+        message: 'Restore Success',
+        type: 'success'
+      })
+    } else {
+      proxy.$message({
+        duration: 5000,
+        message: data.msg,
+        type: 'error'
+      })
+    }
+    loading.value = true
+    getDirectoryUser()
+  } catch (error) {
+    console.log(error)
+  }
+}
+// 切换一级tag重置查询字段
+const changeTag = (val) => {
+  size.value = 5
+  tag.value = val
+  status.value = ''
+  currentPage.value = 1
+  queryString.value = ''
+  directoryId.value = ''
+  directoryStatus.value = ''
+  if (val === 'directory') {
+    getDirectoryUser()
+  } else {
+    getManageMemberList()
+  }
+}
+// 切换二级tag重置查询字段
+const changeSecondTag = (val) => {
+  size.value = 5
+  tagSecond.value = val
+  loading.value = true
+  currentPage.value = 1
+  queryString.value = ''
+  directoryId.value = ''
+  directoryStatus.value = ''
+  if (val === 'all') {
+    getDirectoryUser()
+  } else {
+    getDeleteDirectoryUser()
+  }
+}
+// 批量操作
+const handleClickSecond = () => {
+  if (tagSecond.value === 'all') {
+    deleteUser('multiple')
+  } else restore('', 'multiple')
+}
+// 导出目录用户
+const handleDownload = () => {
+  if (click) {
+    click = false
+    let url = ''
+    if (tagSecond.value === 'all') {
+      url = '/pdf-tech/vppRTeamMemberRole/downloadSSOMember'
+    } else url = '/pdf-tech/vppRTeamMemberRole/downloadUnValidSSOMember'
+    downLoad(url).then(
+      (res) => {
+        //限制点击
+        setTimeout(() => {
+          click = true
+        }, 2000)
+        let url = window.URL.createObjectURL(
+          new Blob([res.data], { type: '.xlsx' })
+        )
+        let a = document.createElement('a')
+        a.style.display = 'none'
+        a.href = url
+        // 自定义文件名
+        a.setAttribute('download', `UserData.xlsx`)
+        document.body.appendChild(a)
+        // 下载文件
+        a.click()
+        // 释放内存
+        url = window.URL.revokeObjectURL(url)
+        document.body.removeChild(a)
+      }
+    ).catch((error) => {
+      console.log(error)
+    })
+  }
+}
 </script>
 
 <template>
   <div>
-    <h1>Manage Member</h1>
-    <div class="mt-36px mb-16px flex justify-between">
-      <h2>Content</h2>
-      <div class="flex">
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="Export Data (.xlsx)"
-          placement="bottom"
-        >
-          <a
-            class="
-              w-28px
-              h-28px
-              border-1 border-[#D9D9D9]
-              rounded-4px
-              bg-[#F9FAFB]
-              flex
-              justify-center
-              items-center
-              mr-12px
-              cursor-pointer
-            "
-            @click="exportManageMemberList"
-          >
+    <h1 class="mb-16px">Manage Member</h1>
+    <div class="flex">
+      <span
+        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px cursor-pointer"
+        @click="changeTag('directory')" :class="tag === 'directory' && 'active'">Directory users</span>
+      <span
+        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px cursor-pointer ml-8px"
+        @click="changeTag('invited')" :class="tag === 'invited' && 'active'">Invited users</span>
+    </div>
+    <div v-show="tag === 'invited'" class="block p-40px">
+      <div class="flex justify-between">
+        <h2>Content</h2>
+        <div class="flex">
+          <a class="w-28px h-28px border-1 border-[#D9D9D9] rounded-4px bg-[#F9FAFB] flex justify-center items-center mr-12px cursor-pointer relative"
+            @click="exportManageMemberList">
             <img src="@/assets/images/download.svg" alt="download" />
+            <div class="hidden absolute w-110px bg-[#373A47] rounded-4px px-8px py-2px text-14px leading-20px text-white top-33px z-3 left-[-40px]">Download data</div>
           </a>
-        </el-tooltip>
-        <router-link :to="{ name: 'AddManageMember' }">
-          <div
-            class="
-              h-28px
-              px-10px
-              py-4px
-              bg-[#1460F3]
-              rounded-4px
-              text-14px
-              leading-20px
-              font-400
-              text-[#fff]
-              cursor-pointer
-              hover:opacity-80
-            "
-          >
-            Add Member
+          <router-link :to="{ name: 'AddManageMember' }">
+            <div class="h-28px px-10px py-4px bg-[#1460F3] rounded-4px text-14px leading-20px font-400 text-[#fff] cursor-pointer hover:opacity-80">
+              Add Member
+            </div>
+          </router-link>
+        </div>
+      </div>
+      <div class="pt-36px pb-40px">
+        <div class="flex">
+          <select name="team" class="min-w-50px mr-16px" v-model="teamId" :class="{ '!text-[#232A40]': teamId !== '' }">
+            <option value="" selected>Team</option>
+            <option v-for="item in teamList" :value="item.id" :key="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+          <select name="status" class="min-w-100px mr-16px" v-model="status" :class="{ '!text-[#232A40]': status !== '' }">
+            <option value="" selected>Status</option>
+            <option value="1">Joined</option>
+            <option value="0">Deleted</option>
+          </select>
+          <select name="Assigned Product" class="min-w-100px mr-16px" v-model="product" :class="{ '!text-[#232A40]': product !== '' }">
+            <option value="" selected>Assigned Product</option>
+            <option v-for="item in productList" :key="item.value" :value="item.code">
+              {{ item.name }}
+            </option>
+          </select>
+          <div class="relative mr-16px">
+            <el-input v-model="queryString" size="mini" clearable class="!w-316px input-with-select" placeholder="Search Member Name/Email">
+            </el-input>
+            <button class="absolute top-8px right-8px" @click="searchInfo()">
+              <Search />
+            </button>
+          </div>
+          <button type="button" @click="searchInfo()"
+            class="w-70px h-28px border-[#1460F3] border-1px rounded-4px px-10px py-4px text-14px leading-20px text-[#1460F3] cursor-pointer hover:opacity-80">
+            Confirm
+          </button>
+        </div>
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column prop="fullName" label="Member Name" min-width="100px">
+          </el-table-column>
+          <el-table-column prop="email" label="Member Email" min-width="100px">
+          </el-table-column>
+          <el-table-column prop="teamName" label="Team" min-width="130px">
+          </el-table-column>
+          <el-table-column prop="validFlag" label="Status" min-width="80px">
+          </el-table-column>
+          <el-table-column label="Assigned Product" min-width="150px">
+            <template slot-scope="scope">
+              <span v-for="(item, index) in scope.row.productNames" :key="index">
+                {{ item }}<br/>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="Action" min-width="100px">
+            <template slot-scope="scope">
+              <div>
+                <router-link :to="{ name: 'EditManageMember', query: { MemberName: scope.row.fullName, Email: scope.row.email, Team: scope.row.teamName, Id: scope.row.id } }">
+                  <div class="w-61px h-20px border-1 border-[#1460F3] rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer mb-8px">
+                    Edit
+                  </div>
+                </router-link>
+                <div class="w-61px h-20px border-1 border-[#1460F3] rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
+                  @click="handleClick(scope.row)">
+                  Delete
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <div slot="empty" class="flex flex-col items-center py-12px">
+            <Empty class="mb-8px" />
+            <p class="text-14px leading-20px">No Data</p>
           </div>
-        </router-link>
+        </el-table>
       </div>
     </div>
-    <div class="block px-24px pt-32px pb-40px">
-      <div class="flex">
-        <select name="team" class="min-w-50px mr-16px" v-model="teamId" :class="{ '!text-[#232A40]': teamId !== '' }">
-          <option value="" selected>Team</option>
-          <option v-for="item in teamList" :value="item.id" :key="item.id">
-            {{ item.name }}
-          </option>
-        </select>
-        <select name="status" class="min-w-100px mr-16px" v-model="status" :class="{ '!text-[#232A40]': status !== '' }">
-          <option value="" selected>Status</option>
-          <!-- <option value="2">Invited</option> -->
-          <option value="1">Joined</option>
-          <option value="0">Deleted</option>
-        </select>
-        <select name="Assigned Product" class="min-w-100px mr-16px" v-model="product" :class="{ '!text-[#232A40]': product !== '' }">
-          <option value="" selected>Assigned Product</option>
-          <option
-            v-for="item in productList"
-            :key="item.value"
-            :value="item.code"
-          >
-            {{ item.name }}
-          </option>
-        </select>
-        <div class="relative mr-16px">
-          <el-input
-            v-model="queryString"
-            size="mini"
-            class="!w-316px input-with-select"
-            placeholder="Search Member Name/Email"
-          >
-          </el-input>
-          <button class="absolute top-8px right-8px" @click="searchInfo()"><Search /></button>
+    <div v-show="tag === 'directory'" class="block directory p-40px">
+      <h2 class="!text-28px !leading-40px mb-12px">Content</h2>
+      <div class="border-b-2px border-[#F1F1F2] text-[#404653] flex mb-12px">
+        <div class="py-12px tet-14px leading-20px mb-[-2px] cursor-pointer mr-20px" :class="tagSecond === 'all' && 'border-b-2px border-[#1460F3] text-[#065CBC]'" @click="changeSecondTag('all')">All Users</div>
+        <div class="py-12px tet-14px leading-20px mb-[-2px] cursor-pointer" :class="tagSecond === 'delete' && 'border-b-2px border-[#1460F3] text-[#065CBC]'" @click="changeSecondTag('delete')">Removed Users</div>
+      </div>
+      <!-- 筛选模块 -->
+      <div class="flex justify-between mb-12px pt-24px">
+        <div class="flex">
+          <div class="relative mr-16px">
+            <el-input v-model="queryString" size="mini" clearable class="!w-316px input-with-select" placeholder="Search user name or email">
+            </el-input>
+            <button class="absolute top-8px right-8px" @click="searchInfo()">
+              <Search />
+            </button>
+          </div>
+          <select name="Status" v-show="tagSecond === 'all'" class="min-w-50px mr-16px" v-model="directoryStatus" :class="{ '!text-[#232A40]': teamId !== '' }">
+            <option value="" selected>Status</option>
+            <option value="">All</option>
+            <option value="1">Available access</option>
+            <option value="3">Revoked</option>
+          </select>
+          <select name="Domains" v-show="tagSecond === 'all'" class="min-w-100px mr-16px" v-model="directoryId" :class="{ '!text-[#232A40]': status !== '' }">
+            <option value="" selected>Domains</option>
+            <option v-for="(item, index) in domainList" :key="index" :value="item.directoryId">{{ item.domain }}</option>
+          </select>
+          <button type="button" @click="searchInfo()"
+            class="w-70px h-28px border-[#1460F3] border-1px rounded-4px px-10px py-4px text-14px leading-20px text-[#1460F3] cursor-pointer hover:opacity-80">
+            Confirm
+          </button>
+        </div>
+        <div class="flex">
+          <a class="w-28px h-28px border-1 border-[#D9D9D9] rounded-4px bg-[#F9FAFB] flex justify-center items-center mr-12px cursor-pointer relative"
+            @click="handleDownload">
+            <img src="@/assets/images/download.svg" alt="download" />
+            <div class="hidden absolute bg-[#373A47] rounded-4px px-8px py-2px text-14px leading-20px text-white top-33px z-3 left-[-16px]">Export</div>
+          </a>
+          <button v-show="tagSecond === 'all'" :disabled="!userList.length" @click="handleClickSecond"
+            class="h-28px px-10px py-4px bg-[#1460F3] rounded-4px text-14px leading-20px font-400 text-[#fff] cursor-pointer hover:opacity-80"
+            :class="!userList.length && '!bg-[#1460F333] cursor-not-allowed'">Remove</button>
+          <button v-show="tagSecond === 'delete'" :disabled="!userList.length" @click="handleClickSecond"
+            class="h-28px px-10px py-4px bg-[#1460F3] rounded-4px text-14px leading-20px font-400 text-[#fff] cursor-pointer hover:opacity-80"
+            :class="!userList.length && '!bg-[#1460F333] cursor-not-allowed'">Restore</button>
         </div>
-        <button
-          type="button"
-          @click="searchInfo()"
-          class="
-            w-70px
-            h-28px
-            border-[#1460F3] border-1px
-            rounded-4px
-            px-10px
-            py-4px
-            text-14px
-            leading-20px
-            text-[#1460F3]
-            cursor-pointer
-            hover:opacity-80
-          "
-        >
-          Confirm
-        </button>
       </div>
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="fullName" label="Member Name" min-width="100px">
-        </el-table-column>
-        <el-table-column prop="email" label="Member Email" min-width="100px">
-        </el-table-column>
-        <el-table-column prop="teamName" label="Team" min-width="130px">
-        </el-table-column>
-        <el-table-column prop="validFlag" label="Status" min-width="80px">
+      <!-- 所有用户 -->
+      <el-table
+        v-show="tagSecond === 'all'"
+        ref="multipleTable"
+        v-loading="loading"
+        :data="directoryData"
+        tooltip-effect="dark"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="fullName" label="User Name" min-width="100px"></el-table-column>
+        <el-table-column prop="email" label="Email" min-width="100px"></el-table-column>
+        <el-table-column label="Status" min-width="100px">
+          <template slot-scope="scope">
+            <div class="text-14px leading-20px flex items-center" :class="Number(scope.row.validFlag) === 1 ? 'text-[#41CC00]' : 'text-[#808185]'">
+              <span class="flex w-6px h-6px rounded-[50%] mr-8px" :class="Number(scope.row.validFlag) === 1 ? 'bg-[#41CC00]' : 'bg-[#808185]'"></span>
+              <template v-if="Number(scope.row.validFlag) === 1">
+                Available access
+              </template>
+              <template v-else>
+                {{ Number(scope.row.validFlag) ? 'Revoked' : 'Removed Users' }}
+              </template>
+            </div>
+          </template>
         </el-table-column>
-        <el-table-column
-          label="Assigned Product"
-          min-width="150px"
-        >
-        <template slot-scope="scope">
-          <span v-for="(item, index) in scope.row.productNames" :key="index">{{item}}<br></span>
-        </template>
+        <el-table-column prop="updatedAt" label="Login Time" min-width="100px"></el-table-column>
+        <el-table-column prop="action" label="Actions" min-width="100px">
+          <template slot-scope="scope">
+            <div class="flex">
+              <div class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
+                @click="directoryEmail = scope.row.email, directoryMemberId = scope.row.id">
+                <span @click="unRevoke" v-if="Number(scope.row.validFlag) === 3">Access</span>
+                <span @click="revokeDialogVisible = true" v-else>Revoke</span>
+              </div>
+              <span class="text-[#D9D9D9]">丨</span>
+              <div class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
+                @click="openDeleteDialog(), directoryEmail = scope.row.email, directoryMemberId = scope.row.id">
+                Remove
+              </div>
+            </div>
+          </template>
         </el-table-column>
-        <!-- <el-table-column
-          prop="id"
-          class="hidden"
-          label="UUID of Activated Device"
-          min-width="178px"
-        >
-        </el-table-column> -->
-        <el-table-column label="Action" min-width="100px">
+        <div slot="empty" class="flex flex-col items-center py-12px">
+          <Empty class="mb-8px" />
+          <p class="text-14px leading-20px">No Data</p>
+        </div>
+      </el-table>
+      <!-- 吊销对话框 -->
+      <el-dialog :visible.sync="revokeDialogVisible" width="556px" top="30vh" center :show-close="false">
+        <h5 class="w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between"><p>Revoke</p><Close class="cursor-pointer" @click.native="revokeDialogVisible = false" /></h5>
+        <p class="text-left mt-12px text-14px leading-20px text-[#808185]">
+          You are about to revoke user access for:
+          <ul class="py-12px">
+            <li class="flex items-center pl-12px"><span class="flex w-4px h-4px rounded-[50%] bg-[#808185] mr-8px"></span>{{ directoryEmail }}</li>
+          </ul>
+          This user won't be able to use your site. You can give them access again at any time.
+        </p>
+        <div slot="footer" class="dialog-footer flex justify-end">
+          <el-button @click="revokeDialogVisible = false" class="!font-700">Cancel</el-button>
+          <el-button type="primary" @click="revokeUser" class="!font-700">Revoke</el-button>
+        </div>
+      </el-dialog>
+      <!-- 移除对话框 -->
+      <el-dialog :visible.sync="deleteDialogVisible" width="556px" top="30vh" center :show-close="false">
+        <h5 class="w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between"><p>Remove</p><Close class="cursor-pointer" @click.native="deleteDialogVisible = false" /></h5>
+        <p class="text-left mt-12px text-14px leading-20px text-[#808185]">
+          The licenses of these users will be removed. They will no longer have access to this site and won't be able to collaborate with your team. You can restore these users in removed users list.
+        </p>
+        <div slot="footer" class="dialog-footer flex justify-end">
+          <el-button @click="deleteDialogVisible = false" class="!font-700">Cancel</el-button>
+          <el-button type="primary" @click="deleteUser" class="!font-700">Remove</el-button>
+        </div>
+      </el-dialog>
+      <!-- 已删除用户 -->
+      <el-table
+        v-show="tagSecond === 'delete'"
+        ref="multipleTable"
+        v-loading="loading"
+        :data="deleteDirectoryData"
+        tooltip-effect="dark"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column prop="fullName" label="User Name" min-width="100px"></el-table-column>
+        <el-table-column prop="email" label="Email" min-width="275px"></el-table-column>
+        <el-table-column prop="action" label="Actions" min-width="100px">
           <template slot-scope="scope">
-            <div>
-              <router-link
-                :to="{
-                  name: 'EditManageMember',
-                  query: {
-                    MemberName: scope.row.fullName,
-                    Email: scope.row.email,
-                    Team: scope.row.teamName,
-                    Id: scope.row.id,
-                  },
-                }"
-              >
-                <div
-                  class="
-                    w-61px
-                    h-20px
-                    border-1 border-[#1460F3]
-                    rounded-4px
-                    text-center text-14px
-                    leading-20px
-                    text-[#1460F3]
-                    cursor-pointer
-                    mb-8px
-                  "
-                >
-                  Edit
-                </div>
-              </router-link>
-              <div
-                class="
-                  w-61px
-                  h-20px
-                  border-1 border-[#1460F3]
-                  rounded-4px
-                  text-center text-14px
-                  leading-20px
-                  text-[#1460F3]
-                  cursor-pointer
-                "
-                @click="handleClick(scope.row)"
-              >
-                Delete
+            <div class="flex">
+              <div class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
+                @click="restore(scope.row)">
+                Restore
               </div>
             </div>
           </template>
         </el-table-column>
-        <p slot="empty">No Data Available</p>
+        <div slot="empty" class="flex flex-col items-center py-12px">
+          <Empty class="mb-8px" />
+          <p class="text-14px leading-20px">No Data</p>
+        </div>
       </el-table>
     </div>
     <!-- 删除框 -->
-    <el-dialog
-      title=""
-      :visible.sync="dialogVisible"
-      width="376px"
-      top="30vh"
-      center
-      :show-close="false"
-    >
+    <el-dialog :visible.sync="dialogVisible" width="376px" top="30vh" center :show-close="false">
       <Warning class="inline-block" />
       <div class="mt-16px text-16px leading-24px text-[#232A40]">
         <p>Are you sure you want to delete this member?</p>
@@ -367,7 +697,7 @@ onMounted(() => {
       :page-size="1"
       :background="true"
       layout="prev, pager, next, sizes, jumper"
-      :total="total"
+      :total="tag === 'invited' ? total : tagSecond === 'all' ? directoryTotal : deleteDirectoryTotal"
       class="px-24px !rounded-0 rounded-b-8px flex justify-end"
     >
     </el-pagination>
@@ -375,20 +705,43 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.block {
+  border-top-left-radius: 0px;
+}
+.active {
+  color: #1460f3;
+  background-color: #fff;
+}
+.relative:hover {
+  .hidden {
+    display: block;
+  }
+}
 .el-table::v-deep thead {
   color: #000 !important;
 }
 
-.el-table::v-deep .el-table__cell{
+.el-table::v-deep .el-table__cell {
   padding-right: 20px !important;
   padding-left: 20px !important;
 }
 
+::v-deep .directory {
+  .el-table {
+    .el-table__header-wrapper {
+      th.is-leaf.el-table__cell {
+        background: #F6F7F9;
+        border-color: #D9D9D9;
+      }
+    }
+  }
+}
+
 ::v-deep .input-with-select .el-input__inner {
   padding: 0 20px 0 8px;
   border-color: #d9d9d9;
   font-size: 14px;
-  color: #232A40;
+  color: #232a40;
 }
 
 ::v-deep .input-with-select .el-input__inner::placeholder {
@@ -396,7 +749,12 @@ onMounted(() => {
   font-weight: 400;
   color: #808185;
 }
-.el-table::v-deep .cell{
+.el-table::v-deep .cell {
   word-break: break-word;
 }
+.dialog-footer {
+  ::v-deep .el-button {
+    height: 40px;
+  }
+}
 </style>

src/views/TeamManagement/ManageTeam.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref, getCurrentInstance } from 'vue'
 import Search from '@/components/icon/search.vue'
 import Warning from '@/components/icon/warning.vue'
-import { get, _delete, downLoad} from '../../../utils/request'
+import { get, _delete, downLoad } from '../../../utils/request'
 import { userStore } from '@/store/userInfo'
 
 const { proxy } = getCurrentInstance()
@@ -19,36 +19,64 @@ const deleteTeamId = ref('')
 const deleteTeamIndex = ref('')
 const role = ref('')
 const toggleKey = ref(0)
-const showFiled = ref(['Team Name', 'Team Members' ,'License Amount', 'Team Description', 'Remaining Activatable Devices', 'Number of Activated Devices', 'Team Admin', 'Actions'])
-const fieldSelect = ref(['Team Name', 'Team Members' ,'License Amount', 'Team Description', 'Remaining Activatable Devices', 'Number of Activated Devices', 'Team Admin', 'Actions'])
-const fieldOptions = ref([{
-        value: 'Team Name',
-        label: 'Team Name'
-      }, {
-        value: 'Team Members',
-        label: 'Team Members'
-      }, {
-        value: 'License Amount',
-        label: 'License Amount'
-      }, {
-        value: 'Team Description',
-        label: 'Team Description'
-      }, {
-        value: 'Remaining Activatable Devices',
-        label: 'Remaining Activatable Devices'
-      }, {
-        value: 'Number of Activated Devices',
-        label: 'Number of Activated Devices'
-      }, {
-        value: 'Team Admin',
-        label: 'Team Admin'
-      }, {
-        value: 'Created Date',
-        label: 'Created Date'
-      }, {
-        value: 'Actions',
-        label: 'Actions'
-      }])
+const showFiled = ref([
+  'Team Name',
+  'Team Members',
+  'License Amount',
+  'Team Description',
+  'Remaining Activatable Devices',
+  'Number of Activated Devices',
+  'Team Admin',
+  'Actions'
+])
+const fieldSelect = ref([
+  'Team Name',
+  'Team Members',
+  'License Amount',
+  'Team Description',
+  'Remaining Activatable Devices',
+  'Number of Activated Devices',
+  'Team Admin',
+  'Actions'
+])
+const fieldOptions = ref([
+  {
+    value: 'Team Name',
+    label: 'Team Name'
+  },
+  {
+    value: 'Team Members',
+    label: 'Team Members'
+  },
+  {
+    value: 'License Amount',
+    label: 'License Amount'
+  },
+  {
+    value: 'Team Description',
+    label: 'Team Description'
+  },
+  {
+    value: 'Remaining Activatable Devices',
+    label: 'Remaining Activatable Devices'
+  },
+  {
+    value: 'Number of Activated Devices',
+    label: 'Number of Activated Devices'
+  },
+  {
+    value: 'Team Admin',
+    label: 'Team Admin'
+  },
+  {
+    value: 'Created Date',
+    label: 'Created Date'
+  },
+  {
+    value: 'Actions',
+    label: 'Actions'
+  }
+])
 //限制用户点击
 let click = true
 
@@ -98,7 +126,10 @@ const removeTag = (val) => {
 const changeSelectField = (val) => {
   if (!val.includes('all') && val.length === fieldOptions.value.length) {
     fieldSelect.value.unshift('all')
-  } else if (val.includes('all') && (val.length - 1) < fieldOptions.value.length) {
+  } else if (
+    val.includes('all') &&
+    val.length - 1 < fieldOptions.value.length
+  ) {
     fieldSelect.value = fieldSelect.value.filter((item) => {
       return item !== 'all'
     })
@@ -129,32 +160,34 @@ const getTeamList = () => {
 }
 // 团队管理列表导出
 function exportManageTeamList() {
-  if(click){
+  if (click) {
     click = false
-    downLoad('/pdf-tech/vppTeam/exportManageTeamList?teamId='+
-      teamId.value +
-      '&' +
-      'keyword=' +
-      queryString.value
-      ).then((res) => {
-        //限制点击
-        setTimeout(() => {
-          click = true
-        }, 2000)
-        let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }))
-        let a= document.createElement('a')
-        a.style.display = 'none'
-        a.href = url
-        // 自定义文件名
-        a.setAttribute('download', `Team Information.xlsx`)
-          document.body.appendChild(a)
-          // 下载文件
-          a.click()
-          // 释放内存
-          url = window.URL.revokeObjectURL(url)
-          document.body.removeChild(a) 
-      }
-    )
+    downLoad(
+      '/pdf-tech/vppTeam/exportManageTeamList?teamId=' +
+        teamId.value +
+        '&' +
+        'keyword=' +
+        queryString.value
+    ).then((res) => {
+      //限制点击
+      setTimeout(() => {
+        click = true
+      }, 2000)
+      let url = window.URL.createObjectURL(
+        new Blob([res.data], { type: '.xlsx' })
+      )
+      let a = document.createElement('a')
+      a.style.display = 'none'
+      a.href = url
+      // 自定义文件名
+      a.setAttribute('download', `Team Information.xlsx`)
+      document.body.appendChild(a)
+      // 下载文件
+      a.click()
+      // 释放内存
+      url = window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    })
   }
 }
 // 删除
@@ -175,17 +208,15 @@ function handleDelete() {
       })
       // tableData.value.splice(deleteTeamIndex.value, 1)
       getManageTeamList()
-    } else (
-      proxy.$message.error(res.data.msg)
-    )
+    } else proxy.$message.error(res.data.msg)
     dialogVisible.value = false
   })
 }
 //筛选
 const searchInfo = () => {
-    click = false
-    currentPage.value = 1
-    getManageTeamList()
+  click = false
+  currentPage.value = 1
+  getManageTeamList()
 }
 onMounted(() => {
   role.value = userStore().user.role
@@ -210,21 +241,7 @@ onMounted(() => {
           content="Export Data (.xlsx)"
           placement="bottom"
         >
-          <div
-            class="
-              w-28px
-              h-28px
-              border-1 border-[#D9D9D9]
-              rounded-4px
-              bg-[#F9FAFB]
-              flex
-              justify-center
-              items-center
-              mr-12px
-              cursor-pointer
-            "
-            @click="exportManageTeamList"
-          >
+          <div class="w-28px h-28px border-1 border-[#D9D9D9] rounded-4px bg-[#F9FAFB] flex justify-center items-center mr-12px cursor-pointer" @click="exportManageTeamList">
             <img src="@/assets/images/download.svg" alt="download" />
           </div>
         </el-tooltip>
@@ -232,23 +249,7 @@ onMounted(() => {
           v-if="role?.indexOf('1') !== -1"
           :to="{ name: 'CreateManageTeam', query: { flag: 'create' } }"
         >
-          <div
-            class="
-              h-28px
-              px-10px
-              py-4px
-              bg-[#1460F3]
-              rounded-4px
-              text-14px
-              leading-20px
-              font-400
-              text-[#fff]
-              cursor-pointer
-              hover:opacity-80
-            "
-          >
-            Create Team
-          </div>
+          <div class="h-28px px-10px py-4px bg-[#1460F3] rounded-4px text-14px leading-20px font-400 text-[#fff] cursor-pointer hover:opacity-80">Create Team</div>
         </router-link>
       </div>
     </div>
@@ -292,19 +293,7 @@ onMounted(() => {
         <button
           type="button"
           @click="searchInfo()"
-          class="
-            w-70px
-            h-28px
-            border-[#1460F3] border-1px
-            rounded-4px
-            px-10px
-            py-4px
-            text-14px
-            leading-20px
-            text-[#1460F3]
-            cursor-pointer
-            hover:opacity-80
-          "
+          class="w-70px h-28px border-[#1460F3] border-1px rounded-4px px-10px py-4px text-14px leading-20px text-[#1460F3] cursor-pointer hover:opacity-80"
         >
           Confirm
         </button>
@@ -352,16 +341,7 @@ onMounted(() => {
                 <div class="w-61px h-20px border-1 border-[#1460F3] rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer mb-8px">Edit</div>
               </router-link>
               <div
-                class="
-                  w-61px
-                  h-20px
-                  border-1 border-[#1460F3]
-                  rounded-4px
-                  text-center text-14px
-                  leading-20px
-                  text-[#1460F3]
-                  cursor-pointer
-                "
+                class="w-61px h-20px border-1 border-[#1460F3] rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
                 @click="handleClick(scope.$index, scope.row)"
                 v-if="role?.indexOf('1') !== -1"
               >
@@ -413,7 +393,7 @@ onMounted(() => {
   color: #000 !important;
 }
 
-.el-table::v-deep .el-table__cell{
+.el-table::v-deep .el-table__cell {
   padding-right: 20px !important;
   padding-left: 20px !important;
 }
@@ -422,7 +402,7 @@ onMounted(() => {
   padding: 0 20px 0 8px;
   border-color: #d9d9d9;
   font-size: 14px;
-  color: #232A40;
+  color: #232a40;
 }
 
 ::v-deep .input-with-select .el-input__inner::placeholder {
@@ -430,10 +410,10 @@ onMounted(() => {
   font-weight: 400;
   color: #808185;
 }
-.el-table::v-deep .el-table__cell .wordBreak{
-  word-break: normal!important;
+.el-table::v-deep .el-table__cell .wordBreak {
+  word-break: normal !important;
 }
-.el-table::v-deep .cell{
+.el-table::v-deep .cell {
   word-break: break-word;
 }
 </style>