一轮测试bug修复

src/assets/style/element-variables.scss

@@ -126,7 +126,7 @@ li.el-menu-item,
     form {
       display: flex;
       padding-top: 8px;
-      padding-left: 48px;
+      padding-left: 68px;
       flex-direction: column;
       background: #F6F7F980;
 
@@ -192,10 +192,6 @@ li.el-menu-item,
   line-height: 20px;
   background: #373A47;
   box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.12);
-
-  // .popper__arrow {
-  //   display: none;
-  // }
 }
 
 .el-tooltip__popper {
@@ -399,6 +395,11 @@ li.el-menu-item,
   }
 }
 .el-popper.el-cascader__dropdown {
+  margin-top: 0;
+  .el-scrollbar.el-cascader-menu {
+    height: 100%;
+    box-shadow: 0px 4px 12px 0px #1018281A;
+  }
   .popper__arrow {
     display: none;
     &::after {
@@ -426,4 +427,16 @@ li.el-menu-item,
   flex-direction: column;
   align-items: center;
   justify-content: center;
+}
+.signSelect {
+  thead {
+    .el-table-column--selection {
+      .cell {
+        display: none;
+      }
+    }
+  }
+}
+.el-loading-text {
+  color: #808185 !important;
 }

src/views/SamlSetting.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref, getCurrentInstance, watch } from 'vue'
 import Close from '@/components/icon/delete.vue'
+import CloseBig from '@/components/icon/closeBig.vue'
 import Empty from '@/components/icon/empty.vue'
 import Refresh from '@/components/icon/refresh.vue'
 import Back from '@/components/icon/back.vue'
@@ -68,13 +69,13 @@ const formData = ref({
 const productList = ref([])
 const rules = ref({
         appId: [
-          { required: true,  message: 'Please enter Application ID', trigger: [''] }
+          { required: true,  message: 'Illegal entry of application ID.', trigger: [''] }
         ],
         directoryId: [
-          { required: true, message: 'Please enter Directory ID', trigger: [''] }
+          { required: true, message: 'Illegal entry of directory ID.', trigger: [''] }
         ],
         secret: [
-          { required: true, message: 'Please enter Application Secret', trigger: [''] }
+          { required: true, message: 'Illegal entry of application password.', trigger: [''] }
         ]
       })
 const options = ref([
@@ -193,6 +194,8 @@ const tableData = ref([])
 const domain = ref([])
 const isUpdate = ref(false)
 const productError = ref('')
+const groupNameList = ref('')
+const multipleTable = ref()
 onMounted(() => {
   getDirectoryList()
   getDNSFile()
@@ -202,6 +205,7 @@ onMounted(() => {
 watch(() => addDirectory.value, (nextValue, oldValue) => {
   if (!addDirectory.value) {
     directoryName.value = ''
+    directoryNameError.value = ''
   }
 })
 // 打开选择同步用户组弹框
@@ -224,12 +228,19 @@ watch(() => openVerifyDialog.value, (nextValue, oldValue) => {
     domainError.value = ''
   }
 })
+// 监听点击返回清空错误
+watch(() => directorySetting.value, (nextValue, oldValue) => {
+  if (!directorySetting.value) {
+    ruleForm.value.clearValidate(['appId', 'directoryId', 'secret'])
+    productError.value = ''
+  }
+})
 // 获取DNS文件内容
 const getDNSFile = async () => {
   const { data: { result } } = await get('/pdf-tech/domain/getDNSTxt')
   dnsContent.value = result
 }
-// 获取DNS文件内容
+// 获取DNS文件
 const downHTTPSFile = async () => {
   const { data } = await get('/pdf-tech/domain/getHttpTxt')
   // 要下载的字符串内容
@@ -239,6 +250,7 @@ const downHTTPSFile = async () => {
   // 调用函数进行下载
   downloadTxtFile(content, fileName)
 }
+// 下载DNS文件内容
 const downloadTxtFile = (textContent, fileName) => {
   // 创建一个 Blob 对象，用于存储文本内容
   const blob = new Blob([textContent], { type: 'text/plain' })
@@ -443,6 +455,18 @@ const handleDomain = async () => {
           message: 'No domain resolution record found.',
           type: 'error'
         })
+      } else if (data.code === 700 && data.msg === 'File does not exist.') {
+        proxy.$message({
+          duration: 5000,
+          message: 'File does not exist.',
+          type: 'error'
+        })
+      } else {
+        proxy.$message({
+          duration: 5000,
+          message: data.msg,
+          type: 'error'
+        })
       }
       openVerifyDialog.value = false
       getDomainList()
@@ -487,7 +511,7 @@ const deleteDirectory = async () => {
     if (data.code === 200 && data.msg === 'success') {
       proxy.$message({
         duration: 5000,
-        message: 'Directory has been removed',
+        message: 'Directory Removed Successfully',
         type: 'success'
       })
       getDirectoryList()
@@ -643,7 +667,7 @@ const changeSelect = () => {
 }
 // 获取微软组列表
 const getMicrosoftList = async () => {
-  const { data } = await get('http://139.196.160.101:8032/pdf-tech/directory/getGroupList?clientId=' + formData.value.appId + '&tenantId=' + formData.value.directoryId + '&clientSecret=' + formData.value.secret + '&queryString=' + queryString.value)
+  const { data } = await get('/pdf-tech/directory/getGroupList?clientId=' + formData.value.appId + '&tenantId=' + formData.value.directoryId + '&clientSecret=' + formData.value.secret + '&queryString=' + queryString.value)
   loading.value = false
   microsoftList.value = data.result
   microsoftTotal.value = data.result.length
@@ -658,10 +682,6 @@ const handleSelectionChange = (val) => {
     domainId.value = val[0].domainId
   }
 }
-// 添加域只能单选
-const currentChange = (val) => {
-  domainTable.value.toggleRowSelection(val)
-}
 // 未添加域不能添加目录
 const openSync = (val) => {
   if (val) {
@@ -723,6 +743,28 @@ const checkout = () => {
     domainError.value = ''
   }
 }
+// 拼接选择组名字
+const getGroupNameList = () => {
+  const arr = []
+  groupIds.value.forEach((item) => {
+    arr.push(item.displayName)
+  })
+  groupNameList.value = arr.join(', ')
+}
+// 获取之前同步时间
+const daySync = (val) => {
+  if (val.time) {
+    syncTime.value = [val.type, val.time]
+  } else syncTime.value = val.type
+}
+const getRowKeys = (row) => {
+  return row.id
+}
+const handleDisable = () => {
+  if (isDisable.value) {
+    addDirectory.value = false
+  } else isDisable.value = true
+}
 </script>
 
 <template>
@@ -739,7 +781,7 @@ const checkout = () => {
         <div class="py-4px text-[#808185] text-14px leading-20px mb-48px">Single sign-on allows your users to log in using your organization's identity provider to access all your applications.</div>
         <div class="flex justify-between mb-16px">
           <div class="text-16px leading-20px font-bold text-[#232A40] py-4px">Directory List</div>
-          <div class="bg-[#1460F3] rounded-4px text-14px leading-20px text-white px-8px py-4px hover:bg-[#4380f5] cursor-pointer" @click="addDirectory = true, directoryName = '', isUpdate = falsea">Add Directory</div>
+          <div class="bg-[#1460F3] rounded-4px text-14px leading-20px text-white px-8px py-4px hover:bg-[#4380f5] cursor-pointer" @click="addDirectory = true, directoryName = '', isUpdate = false">Add Directory</div>
         </div>
         <el-table v-loading="loading" :data="tableData" style="width: 100%" :key="resetTableHeader">
           <el-table-column type="expand">
@@ -747,24 +789,24 @@ const checkout = () => {
               <el-form label-position="left" inline class="table-expand">
                 <el-form-item label="Domains:">
                   <template v-if="props.row.domains.length">
-                    <span v-for="(item, index) in props.row.domains" :key="index" class="inline-flex items-center w-auto border-[#CCE4FF] rounded-4px bg-[#F4F8FC] border-1 border-[#CCE4FF] py-2px px-4px">
+                    <span v-for="(item, index) in props.row.domains" :key="index" class="text-12px leading-16px inline-flex items-center w-auto border-[#CCE4FF] rounded-4px bg-[#F4F8FC] border-1 border-[#CCE4FF] py-2px px-4px">
                       {{ item.domain }}<Close class="ml-8px cursor-pointer" @click.native="openUnbindDialog = true, domainId = item.domainId" />
                     </span>
                   </template>
-                  <span v-else class="text-[#808185]">No domain</span>
+                  <span v-else class="text-12px leading-16px text-[#808185]">No domain</span>
                 </el-form-item>
                 <el-form-item label="Status details:">
-                  <span v-if="props.row.sync">
-                    <div v-if="!Number(props.row.sync.status)">Synchronizing users/groups</div>
-                    <div v-else-if="Number(props.row.sync.status) === 2">Synchronization failure</div>
-                    <div v-else>Last synced succeeded at: {{ props.row.sync.syncTime }}</div>
+                  <span v-if="props.row.sync" class="text-12px leading-16px">
+                    <div v-if="!Number(props.row.sync?.status)">Synchronizing users/groups</div>
+                    <div v-else-if="Number(props.row.sync?.status) === 2">SAML user/group sync:Last synced at: {{ scope.row.sync.syncTime }}</div>
+                    <div v-else>SAML user/group sync:Last synced succeeded at:  {{ props.row.sync.syncTime }}</div>
                   </span>
-                  <span v-else>The directory configuration is incomplete</span>
+                  <span v-else class="text-12px leading-16px">The directory configuration is incomplete</span>
                 </el-form-item>
               </el-form>
               <!-- 解绑弹窗 -->
               <el-dialog :visible.sync="openUnbindDialog" width="556px" top="30vh" center :show-close="false">
-                <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left">Remove Domain</div>
+                <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">Remove Domain <CloseBig class="cursor-pointer" @click.native="openUnbindDialog = false" /></div>
                 <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Are you sure you want to remove this Domain from the directory? After deletion, we will transfer the SAML users that you have synchronized to the Domain users list. They still able to access to this site and collaborate with your team.</div>
                 <div class="flex w-full mt-24px">
                   <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="openUnbindDialog = false">Cancel</div>
@@ -778,15 +820,16 @@ const checkout = () => {
           <el-table-column prop="validFlag" min-width="180px">
             <div slot="header" class="flex items-center">
               Status
-              <el-tooltip class="item" effect="dark" content="Refresh to get the latest status" placement="top">
+              <el-tooltip class="item" effect="dark" content="Refresh to get the last status." placement="top">
                 <Refresh class="ml-10px cursor-pointer" :class="rotate ? 'rotate360' : ''" @click.native="refresh" />
               </el-tooltip>
             </div>
             <template slot-scope="scope">
               <div v-if="!scope.row.domains.length">No domain</div>
+              <div v-else-if="scope.row.domains.length && !scope.row.sync">Active</div>
               <div v-else-if="scope.row.sync">
-                <div v-if="!Number(scope.row.sync.status)">Synchronizing...</div>
-                <div v-else-if="Number(scope.row.sync.status) === 2">Synchronization failure</div>
+                <div v-if="!Number(scope.row.sync?.status)">Synchronizing...</div>
+                <div v-else-if="Number(scope.row.sync?.status) === 2">Last synced at: {{ scope.row.sync.syncTime }}</div>
                 <div v-else>Last synced succeeded at: {{ scope.row.sync.syncTime }}</div>
               </div>
               <div v-else>The directory configuration is incomplete</div>
@@ -800,21 +843,21 @@ const checkout = () => {
                   Add Domain
                 </div>
                 <span class="text-[#D9D9D9]">丨</span>
-                <template v-if="scope.row.sync">
-                  <div v-if="Number(scope.row.sync.status) === 1" class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
-                    @click="setFrequency = true, directoryId = scope.row.directoryId">
+                <div v-if="!scope.row.domains.length" class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
+                  @click="openSync(scope.row.domains.length), directoryId = scope.row.directoryId, formData.appId = scope.row.applicationId, formData.directoryId = scope.row.tenantId, formData.secret = scope.row.clientSecrets, isCreate = true">
+                  Add Sync
+                </div>
+                <template v-else>
+                  <div v-if="Number(scope.row.sync?.status) === 1" class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
+                    @click="setFrequency = true, directoryId = scope.row.directoryId, daySync(scope.row.scheduleSetting)">
                     Synchronize
                   </div>
-                  <div v-else-if="!Number(scope.row.sync.status)" class="text-14px leading-20px text-[#1460F3] cursor-pointer">Synchronizing...</div>
+                  <div v-else-if="Number(scope.row.sync?.status) === 0" class="text-14px leading-20px text-[#1460F3] cursor-pointer">Synchronizing...</div>
                   <div v-else class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
-                    @click="openSync(scope.row.domains.length), directoryId = scope.row.directoryId, formData.appId = scope.row.applicationId, formData.directoryId = scope.row.tenantId, formData.secret = scope.row.clientSecrets, isCreate = false">
+                    @click="openSync(scope.row.domains.length), directoryId = scope.row.directoryId, formData.appId = scope.row.applicationId, formData.directoryId = scope.row.tenantId, formData.secret = scope.row.clientSecrets, isCreate = true">
                     Add Sync
                   </div>
                 </template>
-                <div v-else class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
-                  @click="openSync(scope.row.domains.length), directoryId = scope.row.directoryId, formData.appId = scope.row.applicationId, formData.directoryId = scope.row.tenantId, formData.secret = scope.row.clientSecrets, isCreate = true">
-                  Add Sync
-                </div>
                 <span class="text-[#D9D9D9]">丨</span>
                 <div class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer">
                   <el-dropdown>
@@ -823,7 +866,7 @@ const checkout = () => {
                       <el-dropdown-item>
                         <button type="submit" :disabled="scope.row.sync?.status === '0'" @click="addDirectory = true, directoryName = scope.row.name, isUpdate = true, directoryId = scope.row.directoryId" :class="scope.row.sync?.status === '0' && 'text-[#979898] cursor-not-allowed'">Directory Settings</button>
                       </el-dropdown-item>
-                      <template v-if="scope.row.sync">
+                      <template v-if="scope.row.sync && scope.row.domains.length">
                         <el-dropdown-item>
                           <button type="submit" @click="directorySetting = true, directoryId = scope.row.directoryId, formData.appId = scope.row.applicationId, formData.directoryId = scope.row.tenantId, formData.secret = scope.row.clientSecrets, isDisable = true, isCreate = false, scopeOption = scope.row.scope">Sync Settings</button>
                         </el-dropdown-item>
@@ -836,11 +879,11 @@ const checkout = () => {
                 </div>
               </div>
               <!-- 给目录添加域名弹窗 -->
-              <el-dialog :visible.sync="openBindDialog" width="556px" top="30vh" center :show-close="false" class="addDomain">
-                <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left">Add Domain</div>
-                <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Select the domain to be added to the directory.</div>
+              <el-dialog :visible.sync="openBindDialog" width="556px" top="30vh" center class="addDomain">
+                <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">Add Domain <CloseBig class="cursor-pointer" @click.native="openBindDialog = false" /></div>
+                <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Select the Domain to add to the directory</div>
                 <!-- 可用域名列表 -->
-                <el-table v-loading="loading" ref="domainTable" :data="usableDomain" style="width: 100%" @selection-change="handleSelectionChange" @current-change="currentChange">
+                <el-table v-loading="loading" ref="domainTable" class="signSelect" :data="usableDomain" style="width: 100%" @selection-change="handleSelectionChange">
                   <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
                   <el-table-column prop="domain" label="Domain" min-width="100px">
                   </el-table-column>
@@ -854,14 +897,14 @@ const checkout = () => {
                   <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 class="mt-12px rounded-8px px-52px py-10px bg-[#1460F3] text-white text-16px leading-20px font-bold cursor-pointer" @click="active = 'domains', openBindDialog = false, getDomainList()">Verify</div>
+                    <div class="mt-12px rounded-8px px-52px py-10px bg-[#1460F3] text-white text-16px leading-20px font-bold cursor-pointer" @click="active = 'domains', openBindDialog = false, getDomainList()">Verify Domain</div>
                   </div>
                 </el-table>
                 <!-- 按钮 -->
-                <div class="flex w-full mt-24px">
+                <div v-show="usableDomain.length" class="flex w-full mt-24px">
                   <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="openBindDialog = false">Cancel</div>
                   <div class="rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)]" @click="bindDomain()"
-                    :class="disableBind ? 'bg-[#1460F333] cursor-not-allowed' : 'bg-[#1460F3] hover:bg-[#4380f5] cursor-pointer'">Confirm</div>
+                    :class="disableBind ? 'bg-[#1460F333] cursor-not-allowed' : 'bg-[#1460F3] hover:bg-[#4380f5] cursor-pointer'">Add</div>
                 </div>
               </el-dialog>
             </template>
@@ -879,7 +922,7 @@ const checkout = () => {
         <div class="text-[#232A40] text-16px leading-20px mb-16px font-bold">Set directory name</div>
         <div class="text-[#808185] text-14px leading-20px mb-4px">Create a directory by naming it and selecting an authentication method for the directory.</div>
         <el-input v-model="directoryName" placeholder="Enter a directory name" class="text-[#808185] text-14px leading-20px" :class="directoryNameError && 'error'" @focus="directoryNameError = ''"></el-input>
-        <div v-show="directoryNameError" class="mt-8px text-[#C0362D] text-12px leading-16px ">{{ directoryNameError }}</div>
+        <div v-show="directoryNameError" class="mt-8px text-[#FF5054] text-12px leading-16px">{{ directoryNameError }}</div>
         <div class="flex w-full mt-24px">
           <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="addDirectory = false">Cancel</div>
           <div v-show="!isUpdate" class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="addDirectoryFnc">Create</div>
@@ -934,7 +977,7 @@ const checkout = () => {
               <!-- 新建同步设置产品分配弹框 -->
               <template v-if="isCreate">
                 <div class="text-[#232A40] text-16px leading-20px font-bold my-16px">Product Settings:</div>
-                <div class="w-600px border-1 border-[#1460F3] rounded-8px p-12px pb-0 mb-24px relative" v-for="(item, index) in formData.productList" :key="index">
+                <div class="w-600px border-1 border-[#1460F3] rounded-8px p-12px pb-0 mb-24px relative" v-for="(item, index) in formData.productList" :key="index" :class="index === formData.productList.length - 1 && 'mb-0'">
                   <img v-show="formData.productList.length > 1 && !isDisable" src="@/assets/images/minus.png" alt="minus" class="w-24px h-24px absolute top-[-12px] right-[-12px] cursor-pointer" @click.prevent="formData.productList.splice(index, 1)">
                   <el-form-item>
                     <template slot="label">Product<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span></template>
@@ -943,7 +986,7 @@ const checkout = () => {
                       placeholder="Project"
                       class="w-[100%] !h-40px !pl-12px focus-visible:(outline-none)"
                       :class="{ '!text-[#232A40]': item.productId !== '' }"
-                      @change="changeSelect()">
+                      @change="changeSelect(), productError = ''">
                       <option value="">Select Assigned Product</option>
                       <option v-for="item in productList" :key="item.value" :value="item.value" :disabled="item.disabled">
                         {{ item.label }}
@@ -951,17 +994,18 @@ const checkout = () => {
                     </select>
                   </el-form-item>
                   <el-form-item label="Amount of Team License" class="!mb-22px">
-                    <el-input :disabled="isDisable" v-model="item.licenseNumber" placeholder="Enter number of team license"></el-input>
+                    <el-input :disabled="isDisable" v-model="item.licenseNumber" @input="productError = ''" placeholder="Enter number of team license"></el-input>
                   </el-form-item>
                 </div>
-                <div v-show="!isDisable" class="w-600px h-48px border-1 border-dashed border-[#1460F3] rounded-8px flex justify-center items-center">
+                <div v-show="productError" class="mt-8px text-[#FF5054] text-12px leading-16px">{{ productError }}</div>
+                <div v-show="!isDisable" class="w-600px h-48px mt-24px border-1 border-dashed border-[#1460F3] rounded-8px flex justify-center items-center">
                   <img src="@/assets/images/add.png" alt="add" class="w-24px h-24px cursor-pointer" @click="formData.productList.push({ licenseNumber: '', productId: '', disabled: false })">
                 </div>
               </template>
               <div class="text-[#232A40] text-16px leading-20px font-bold my-16px">Sync Scope Settings:</div>
               <el-form-item class="required">
                 <span class="label flex items-center">Scope<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span>
-                  <el-tooltip v-show="!isDisable" class="item" effect="dark" content="This is the ID of your application in the Microsoft Application Portal." placement="top">
+                  <el-tooltip v-show="!isDisable" class="item" effect="dark" content="Define the groups and users that you would like to provision to Admin Console by selecting the desired values in Scope. It is worth noting that if you choose to sync all/assigned groups and users, the wait time will be long." placement="top">
                     <Help class="ml-4px" />
                   </el-tooltip>
                 </span>
@@ -972,16 +1016,22 @@ const checkout = () => {
               </el-form-item>
             </el-form>
             <div v-show="Number(scopeOption) === 2">
-              <div class="text-[#232A40] text-16px leading-20px font-bold mb-4px">Class range</div>
-              <div @click="microsoftDialog = true, getMicrosoftList()" class="w-172px h-32px flex justify-center items-center border-1 border-[#1460F3] text-[#1460F3] cursor-pointer rounded-8px">Select group range</div>
-              <div class="flex mt-12px"><span class="flex" :class="index && 'ml-12px'" v-for="(item, index) in groupIds" :key="index">{{ item.displayName }}</span></div>
+              <div class="text-[#232A40] text-14px leading-20px mb-8px">Class range<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span></div>
+              <button type="submit" @click="microsoftDialog = true, getMicrosoftList(), loading = true"
+                :class="isDisable && '!bg-[#1460F333] !text-white border-none'" :disabled="isDisable"
+                class="w-172px h-32px flex justify-center font-600 items-center border-1 border-[#1460F3] text-[#1460F3] cursor-pointer rounded-8px">
+                Select group range
+              </button>
+              <div class="flex mt-12px">
+                <el-input :disabled="true" v-model="groupNameList" class="max-w-400px"></el-input>
+              </div>
             </div>
             <div v-show="isDisable" class="flex w-full mt-24px">
               <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="isDisable = false">Edit</div>
             </div>
             <div v-show="!isDisable" class="flex w-full mt-24px">
-              <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="directorySetting = false">Cancel</div>
-              <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="SyncSetting">Create</div>
+              <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="handleDisable">Cancel</div>
+              <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="SyncSetting">Authorize</div>
             </div>
           </div>
         </div>
@@ -1027,7 +1077,7 @@ const checkout = () => {
         <el-table-column prop="status" min-width="160px">
           <div slot="header" class="flex items-center">
             Status
-            <el-tooltip class="item" effect="dark" content="Refresh to get the latest status" placement="top">
+            <el-tooltip class="item" effect="dark" content="Refresh to get the last status." placement="top">
               <Refresh class="ml-10px cursor-pointer" :class="rotate ? 'rotate360' : ''" @click.native="refresh" />
             </el-tooltip>
           </div>
@@ -1066,16 +1116,16 @@ const checkout = () => {
     </div>
     <!-- 添加,验证域弹窗 -->
     <el-dialog :visible.sync="openVerifyDialog" width="556px" top="30vh" center :show-close="false" class="addDirectory">
-      <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left">{{ verify ? 'Verify Domain' : 'Add Domain' }}</div>
+      <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">{{ verify ? 'Verify Domain' : 'Add Domain' }}<CloseBig class="cursor-pointer" @click.native="openVerifyDialog = false" /></div>
       <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Complete the following details. We'll check for the record to verify your ownership of the domain.</div>
       <div class="text-[#232A40] text-16px leading-20px font-bold mb-12px w-full text-left w-full">Method:</div>
       <el-radio-group v-model="option">
         <el-radio label="1">TXT Record</el-radio>
         <el-radio label="2">HTTPS</el-radio>
       </el-radio-group>
-      <div class="text-[#232A40] text-16px leading-20px font-bold mb-12px w-full text-left w-full">Domain:</div>
+      <div class="text-[#232A40] text-16px leading-20px font-bold mt-24px mb-12px w-full text-left w-full">Domain:</div>
       <el-input :disabled="verify" v-model="userDomain" :class="domainError && 'error'" @input="checkout" @blur="checkout" placeholder="Domain name" @focus="domainError = ''"></el-input>
-      <div v-show="domainError" class="w-full text-left mt-8px text-[#C0362D] text-12px leading-16px ">{{ domainError }}</div>
+      <div v-show="domainError" class="w-full text-left mt-8px text-[#FF5054] text-12px leading-16px ">{{ domainError }}</div>
       <div class="flex w-full mt-24px">
         <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="openVerifyDialog = false">Cancel</div>
         <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)] hover:bg-[#4380f5] cursor-pointer" @click="handleDomain">{{ verify ? 'Verify' : 'Confirm' }}</div>
@@ -1083,7 +1133,7 @@ const checkout = () => {
     </el-dialog>
     <!-- 移除域对话框 -->
     <el-dialog :visible.sync="deleteDomainDialog" 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 Domain</p><Close class="cursor-pointer" @click.native="deleteDomainDialog = false" /></h5>
+      <h5 class="w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center"><p>Remove Domain</p><CloseBig class="cursor-pointer" @click.native="deleteDomainDialog = false" /></h5>
       <p class="text-left mt-12px text-14px leading-20px text-[#808185]">
         Are you sure you want to remove this Domain? Please make sure that no user accounts are using this Domain name before you continue. After deletion, they will no longer have access to this site and won't be able to collaborate with your team.
       </p>
@@ -1094,20 +1144,22 @@ const checkout = () => {
     </el-dialog>
     <!-- 同步设置弹窗 -->
     <el-dialog :visible.sync="setFrequency" width="556px" top="30vh" center :show-close="false">
-      <div class="text-left text-24px leading-32px font-bold text-[#232A40] w-full">Synchronize</div>
+      <div class="text-left text-24px leading-32px font-bold text-[#232A40] w-full flex justify-between items-center">Synchronize <CloseBig class="cursor-pointer" @click.native="setFrequency = false" /></div>
       <div class="text-left text-14px leading-20px text-[#808185] w-full mt-12px mb-24px">You can set the frequency of synchronization here</div>
       <div class="text-left text-16px leading-20px text-[#232A40] w-full mb-8px">synchronize</div>
       <el-cascader class="w-full h-40px" v-model="syncTime" :options="options"></el-cascader>
       <div class="flex w-full mt-40px">
         <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="setFrequency = false">Cancel</div>
-        <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)] hover:bg-[#4380f5] cursor-pointer" @click="synchronize">Synchronize</div>
+        <button type="submit" :disabled="!syncTime"
+          :class="!syncTime && '!bg-[#1460F333] cursor-not-allowed'"
+          class="bg-[#1460F3] rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)] hover:bg-[#4380f5] cursor-pointer" @click="synchronize">
+          Synchronize
+        </button>
       </div>
     </el-dialog>
     <!-- 删除目录弹窗 -->
     <el-dialog :visible.sync="deleteDirectoryDialog" width="556px" top="30vh" center :show-close="false">
-      <h5 class="text-left w-full text-24px leading-32px font-bold text-[#232A40]">
-        Remove Directory
-      </h5>
+      <h5 class="text-left w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center">Remove Directory<CloseBig class="cursor-pointer" @click.native="deleteDirectoryDialog = false" /></h5>
       <p class="text-left mt-12px mb-24px text-14px leading-20px text-[#808185]">
         Are you sure you want to remove this directory? After deletion, we will transfer the SAML users that you have synchronized to the Domain users list. They can still access this site and collaborate with your team.
       </p>
@@ -1118,55 +1170,57 @@ const checkout = () => {
     </el-dialog>
     <!-- 创建目录后提醒弹窗 -->
     <el-dialog :visible.sync="createdDirectory" width="556px" top="30vh" center :show-close="false">
-      <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left">Add Domain</div>
+      <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">Add Domain<CloseBig class="cursor-pointer" @click.native="createdDirectory = false" /></div>
       <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Add Domains to the directory to make the directory active. Otherwise, the directory cannot be used.</div>
-      <div class="flex w-full mt-40px">
-        <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="createdDirectory = false">Cancel</div>
-        <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)] hover:bg-[#4380f5] cursor-pointer" @click="openBindDialog = true, createdDirectory = false, getDomainList()">Add Domain</div>
+      <div class="flex justify-end w-full">
+        <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="createdDirectory = false">Cancel</div>
+        <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="openBindDialog = true, createdDirectory = false, getDomainList()">Add Domain</div>
       </div>
     </el-dialog>
     <!-- 选择微软指定组 -->
-    <el-dialog :visible.sync="microsoftDialog" width="556px" top="30vh" center :show-close="false">
-      <h5 class="text-left w-full text-24px leading-32px font-bold text-[#232A40]">
-        Select group range
-      </h5>
+    <el-dialog :visible.sync="microsoftDialog" width="556px" top="15vh" center :show-close="false">
+      <h5 class="text-left w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center">Select Group Scope<CloseBig class="cursor-pointer" @click.native="microsoftDialog = false" /></h5>
       <p class="text-left mt-12px mb-24px text-14px leading-20px text-[#808185]">
-        The system synchronizes all group structures and users under the group scope that you select. If you cancel the group range, the synchronized user group will not be updated.
+        The system will synchronize all group structures and users under the group scope you select. If you cancel the group scope, the synchronized user group will not be updated.
       </p>
-      <div class="w-full relative mb-12px">
-        <el-input v-model="queryString" size="mini" clearable class="input-with-select" placeholder="Search user name or email">
-        </el-input>
-        <button class="absolute top-8px right-8px" @click="getMicrosoftList">
-          <Search />
-        </button>
-      </div>
-      <el-table
-        ref="multipleTable"
-        v-loading="loading"
-        element-loading-text="Group synchronization..."
-        :data="microsoftList"
-        tooltip-effect="dark"
-        :key="resetTableHeader"
-        @selection-change="handleSelectionChanges"
-      >
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column prop="displayName" label="Group Name" min-width="100px"></el-table-column>
-        <el-table-column min-width="275px">
-          <div slot="header" class="flex items-center">
-            Selected/Total:
-            {{ groupIds.length }} / {{ microsoftTotal }}
-          </div>
-        </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 class="scrollbar relative w-full p-24px flex flex-col items-center bg-[#F6F7F999] max-h-520px overflow-auto">
+        <div class="w-full relative mb-12px">
+          <el-input v-model="queryString" size="mini" clearable class="input-with-select" placeholder="Search user name or email" @clear="getMicrosoftList">
+          </el-input>
+          <button class="absolute top-8px right-8px" @click="getMicrosoftList">
+            <Search />
+          </button>
         </div>
-      </el-table>
+        <div v-show="loading" class="absolute z-9999 top-26vh text-[#808185] max-w-400px text-center">It may take a while for the data to be synchronized if the volume of data is large. Please be patient.</div>
+        <el-table
+          ref="multipleTable"
+          v-loading="loading"
+          element-loading-text="Group is synchronizing..."
+          :data="microsoftList"
+          tooltip-effect="dark"
+          :key="resetTableHeader"
+          :row-key="getRowKeys"
+          @selection-change="handleSelectionChanges"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
+          <el-table-column prop="displayName" label="Group Name" min-width="100px"></el-table-column>
+          <el-table-column min-width="275px">
+            <div slot="header" class="flex justify-end items-center text-14px leading-20px font-400 pr-8px text-[#808185]">
+              Selected/Total:
+              {{ groupIds.length }} / {{ microsoftTotal }}
+            </div>
+          </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>
+        </el-table>
+      </div>
       <div class="flex justify-between items-center w-full mt-24px">
-        <div @click="getMicrosoftList(), loading = true" class="text-[#1460F3] cursor-pointer">{{ microsoftList ? 'Synchronization' : 'Refresh list' }}</div>
+        <div @click="getMicrosoftList(), loading = true" class="text-[#1460F3] cursor-pointer">{{ microsoftList ? 'Sync group' : 'Refresh list' }}</div>
         <div class="flex">
-          <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="microsoftDialog = false">Cancel</div>
-          <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="microsoftDialog = false">Add</div>
+          <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="microsoftDialog = false, getGroupNameList()">Cancel</div>
+          <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="microsoftDialog = false, getGroupNameList()">Add</div>
         </div>
       </div>
     </el-dialog>
@@ -1214,6 +1268,18 @@ const checkout = () => {
     height: 40px;
   }
 }
+.scrollbar::-webkit-scrollbar{
+  width: 4px;
+  height: 4px;
+}
+.scrollbar::-webkit-scrollbar-track{
+  display: none;
+}
+.scrollbar::-webkit-scrollbar-thumb{
+  border-radius: 10px;
+  background: #E2E3E5;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+}
 ::v-deep .el-form.el-form--label-top {
   .el-form-item.required {
     .el-form-item__label {

src/views/TeamManagement/ManageMember.vue

@@ -3,6 +3,7 @@ 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 CloseBig from '@/components/icon/closeBig.vue'
 import Empty from '@/components/icon/empty.vue'
 import { get, downLoad, post } from '../../../utils/request'
 import { productListNameMapping } from '../../../utils/mapping'
@@ -33,7 +34,7 @@ const deleteList = ref([])
 const domainList = ref([])
 const directoryData = ref([])
 const deleteDirectoryData = ref([])
-const directoryId = ref('')
+const domain = ref('')
 const revokeDialogVisible = ref(false)
 const deleteDialogVisible = ref(false)
 const restoreDialogVisible = ref(false)
@@ -75,8 +76,8 @@ const getDirectoryUser = async () => {
     directoryStatus.value +
     '&queryString=' +
     queryString.value +
-    '&directoryId=' +
-    directoryId.value)
+    '&domain=' +
+    domain.value)
   loading.value = false
   directoryData.value = data.result.list
   directoryTotal.value = data.result.total
@@ -90,8 +91,8 @@ const getDeleteDirectoryUser = async () => {
       '&status=0' +
       '&queryString=' +
       queryString.value +
-      '&directoryId=' +
-      directoryId.value)
+      '&domain=' +
+      domain.value)
   loading.value = false
   deleteDirectoryData.value = data.result.list
   deleteDirectoryTotal.value = data.result.total
@@ -238,7 +239,7 @@ const searchInfo = () => {
     loading.value = true
     if (tagSecond.value === 'delete') {
       directoryStatus.value = ''
-      directoryId.value = ''
+      domain.value = ''
       getDeleteDirectoryUser()
     } else getDirectoryUser()
   }
@@ -370,7 +371,7 @@ const changeTag = (val) => {
   status.value = ''
   currentPage.value = 1
   queryString.value = ''
-  directoryId.value = ''
+  domain.value = ''
   directoryStatus.value = ''
   if (val === 'directory') {
     getDirectoryUser()
@@ -385,7 +386,7 @@ const changeSecondTag = (val) => {
   loading.value = true
   currentPage.value = 1
   queryString.value = ''
-  directoryId.value = ''
+  domain.value = ''
   directoryStatus.value = ''
   if (val === 'all') {
     getDirectoryUser()
@@ -441,10 +442,10 @@ const handleDownload = () => {
     <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>
+        @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>
+        @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">
@@ -547,15 +548,15 @@ const handleDownload = () => {
               <Search />
             </button>
           </div>
-          <select name="Status" v-show="tagSecond === 'all'" class="min-w-50px mr-16px" v-model="directoryStatus" :class="{ '!text-[#232A40]': teamId !== '' }">
+          <select name="Status" v-show="tagSecond === 'all'" class="min-w-50px mr-16px" v-model="directoryStatus" :class="{ '!text-[#232A40]': directoryStatus !== '' }">
             <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 !== '' }">
+          <select name="Domains" v-show="tagSecond === 'all'" class="min-w-100px mr-16px" v-model="domain" :class="{ '!text-[#232A40]': domain !== '' }">
             <option value="" selected>Domains</option>
-            <option v-for="(item, index) in domainList" :key="index" :value="item.directoryId">{{ item.domain }}</option>
+            <option v-for="(item, index) in domainList" :key="index" :value="item.domain">{{ 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">
@@ -625,7 +626,7 @@ const handleDownload = () => {
       </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>
+        <h5 class="w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center"><p>Revoke</p><CloseBig 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">
@@ -640,7 +641,7 @@ const handleDownload = () => {
       </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>
+        <h5 class="w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center"><p>Remove</p><CloseBig 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>

src/views/TeamManagement/ManageTeam.vue

@@ -147,17 +147,6 @@ const selectAllField = () => {
     fieldSelect.value = []
   }
 }
-// 获取团队管理列表
-const getTeamList = () => {
-  get('/pdf-tech/vppTeam/getManageTeamList', {
-    teamId: '',
-    keyword: ''
-  }).then((res) => {
-    if (res.data.code === 200) {
-      teamList.value = res.data.result.list
-    }
-  })
-}
 // 团队管理列表导出
 function exportManageTeamList() {
   if (click) {
@@ -225,7 +214,6 @@ onMounted(() => {
     pageText.childNodes[0].nodeValue = 'Jump to Page '
   }
   getManageTeamList()
-  getTeamList()
 })
 </script>
 
@@ -343,7 +331,7 @@ onMounted(() => {
               <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.$index, scope.row)"
-                v-if="role?.indexOf('1') !== -1"
+                v-if="role?.indexOf('1') !== -1 && scope.row.description !== 'sync'"
               >
                 Delete
               </div>