feat: 展示数据源用户所属部门组织路径 (#1476)

TencentBlueKing · Dec 14, 2023 · 50524c9 · 50524c9
1 parent ff997c1
commit 50524c9
Show file tree

Hide file tree

Showing 12 changed files with 8,019 additions and 7,933 deletions.
diff --git a/src/pages/package.json b/src/pages/package.json
@@ -41,6 +41,7 @@
     "pinia": "^2.0.23",
     "query-string": "^8.1.0",
     "request": "^2.88.2",
+    "resize-detector": "^0.3.0",
     "screenfull": "^6.0.2",
     "sortablejs": "^1.15.0",
     "vite-plugin-monaco-editor": "^1.1.0",

diff --git a/src/pages/src/css/tenantEditStyle.less b/src/pages/src/css/tenantEditStyle.less
@@ -1,7 +1,20 @@
 .operation-wrapper {
   position: relative;
+  height: 100%;
+  padding-bottom: 48px;
+  overflow: auto;
   background: #f5f7fa;
 
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #dcdee5;
+    border-radius: 4px;
+  }
+
   .operation-content {
     padding: 0 24px;
 
@@ -141,15 +154,25 @@
   }
 
   .footer {
-    position: fixed;
-    bottom: 0;
-    height: 48px;
+    position: absolute;
     padding: 0 24px;
-    line-height: 48px;
 
     .bk-button {
       width: 88px;
       margin-right: 8px;
     }
   }
+
+  .fixed {
+    position: fixed;
+    bottom: 0;
+    z-index: 9;
+    width: 100%;
+    height: 48px;
+    margin-bottom: 0;
+    line-height: 48px;
+    background: #FAFBFD;
+    box-shadow: 0 -1px 0 0 #DCDEE5;
+  }
+
 }
diff --git a/src/pages/src/css/tenantViewStyle.less b/src/pages/src/css/tenantViewStyle.less
@@ -1,9 +1,8 @@
 .details-info-wrapper {
   height: calc(100vh - 140px);
-  padding: 24px;
 
   .details-info-content {
-    padding: 0 24px;
+    padding: 24px;
     background: #fff;
     border-radius: 2px;
     box-shadow: 0 2px 4px 0 #1919290d;

diff --git a/src/pages/src/hooks/use-validate.ts b/src/pages/src/hooks/use-validate.ts
@@ -6,8 +6,8 @@ export default () => {
   };
 
   const name = {
-    validator: (value: string) => /^[\u4e00-\u9fa5a-zA-Z0-9\S]{1,32}$/.test(value),
-    message: '由1-32位字符组成',
+    validator: (value: string) => /^[\u4e00-\u9fa5a-zA-Z0-9\s\S]{1,64}$/.test(value),
+    message: '由1-64位字符组成',
     trigger: 'blur',
   };
 

diff --git a/src/pages/src/http/dataSourceFiles.ts b/src/pages/src/http/dataSourceFiles.ts
@@ -113,3 +113,8 @@ export const getSyncRecords = (params: SyncRecordsParams) => {
  * 数据源更新日志
  */
 export const getSyncLogs = (id: string) => http.get(`/api/v1/web/data-sources/sync-records/${id}/`);
+
+/**
+ * 数据源用户所属部门组织路径
+ */
+export const getOrganizationPaths = (id: string) => http.get(`/api/v1/web/data-sources/users/${id}/organization-paths/`);
diff --git a/src/pages/src/views/data-source/local-details/UserInfo.vue b/src/pages/src/views/data-source/local-details/UserInfo.vue
@@ -59,7 +59,15 @@
       </bk-table-column>
       <bk-table-column prop="departments" label="所属组织">
         <template #default="{ row }">
-          <span>{{ formatConvert(row.departments) }}</span>
+          <span
+            v-bk-tooltips="{
+              content: tipsText,
+              delay: 300,
+              disabled: !tipsText,
+            }"
+            @mouseenter="tipsShowFn(row.id)">
+            {{ formatConvert(row.departments) }}
+          </span>
         </template>
       </bk-table-column>
       <bk-table-column label="操作" v-if="pluginId === 'local'">
@@ -214,7 +222,7 @@
 
 <script setup lang="ts">
 import axios from 'axios';
-import { Message } from 'bkui-vue';
+import { bkTooltips as vBkTooltips, Message } from 'bkui-vue';
 import { InfoLine } from 'bkui-vue/lib/icon';
 import Cookies from 'js-cookie';
 import { computed, defineProps, inject, onMounted, reactive, ref, watch } from 'vue';
@@ -224,7 +232,7 @@ import ViewUser from './ViewUser.vue';
 
 import Empty from '@/components/Empty.vue';
 import { useCustomFields } from '@/hooks/useCustomFields';
-import { getDataSourceUserDetails, getDataSourceUsers } from '@/http/dataSourceFiles';
+import { getDataSourceUserDetails, getDataSourceUsers, getOrganizationPaths } from '@/http/dataSourceFiles';
 import { getFields } from '@/http/settingFiles';
 import router from '@/router/index';
 import { formatConvert } from '@/utils';
@@ -531,6 +539,17 @@ const closed = () => {
   uploadInfo.overwrite = false;
   uploadInfo.incremental = true;
 };
+
+const tipsText = ref('');
+// hover展示数据源用户所属部门组织路径
+const tipsShowFn = async (id: string) => {
+  try {
+    const res = await getOrganizationPaths(id);
+    tipsText.value = res.data?.organization_paths[0] || '';
+  } catch (e) {
+    tipsText.value = '';
+  }
+};
 </script>
 
 <style lang="less" scoped>

diff --git a/src/pages/src/views/organization/details/DetailsInfo.vue b/src/pages/src/views/organization/details/DetailsInfo.vue
@@ -1,63 +1,65 @@
 <template>
   <div class="details-info-wrapper user-scroll-y">
-    <ul class="details-info-content" v-if="!isEdit">
-      <li class="content-item">
-        <div class="item-header">
-          <p class="item-title">基本信息</p>
-          <bk-button
-            outline
-            theme="primary"
-            :disabled="!isCurrentTenant"
-            @click="handleClickEdit">
-            编辑
-          </bk-button>
-        </div>
-        <ul class="item-content flex" style="width: 72%">
-          <li>
-            <span class="key">租户名称：</span>
-            <span class="value">{{ state.name }}</span>
-          </li>
-          <li>
-            <span class="key">人员数量：</span>
-            <span class="value">{{ userNumberVisible }}</span>
-          </li>
-          <li>
-            <span class="key">租户ID：</span>
-            <span class="value">{{ state.id }}</span>
-          </li>
-          <li>
-            <span class="key">更新时间：</span>
-            <span class="value">{{ state.updated_at }}</span>
-          </li>
-          <img v-if="state.logo" :src="state.logo" />
-          <img v-else src="@/images/avatar.png" />
-        </ul>
-      </li>
-      <li class="content-item">
-        <div class="item-title">管理员</div>
-        <bk-table
-          class="user-info-table"
-          :data="state.managers"
-          show-overflow-tooltip
-        >
-          <template #empty>
-            <Empty :is-data-empty="state.isDataEmpty" />
-          </template>
-          <bk-table-column prop="username" label="用户名" />
-          <bk-table-column prop="full_name" label="全名" />
-          <bk-table-column prop="email" label="邮箱">
-            <template #default="{ row }">
-              <span>{{ row.email || '--' }}</span>
+    <div v-if="!isEdit" style="padding: 24px;">
+      <ul class="details-info-content">
+        <li class="content-item">
+          <div class="item-header">
+            <p class="item-title">基本信息</p>
+            <bk-button
+              outline
+              theme="primary"
+              :disabled="!isCurrentTenant"
+              @click="handleClickEdit">
+              编辑
+            </bk-button>
+          </div>
+          <ul class="item-content flex" style="width: 72%">
+            <li>
+              <span class="key">租户名称：</span>
+              <span class="value">{{ state.name }}</span>
+            </li>
+            <li>
+              <span class="key">人员数量：</span>
+              <span class="value">{{ userNumberVisible }}</span>
+            </li>
+            <li>
+              <span class="key">租户ID：</span>
+              <span class="value">{{ state.id }}</span>
+            </li>
+            <li>
+              <span class="key">更新时间：</span>
+              <span class="value">{{ state.updated_at }}</span>
+            </li>
+            <img v-if="state.logo" :src="state.logo" />
+            <img v-else src="@/images/avatar.png" />
+          </ul>
+        </li>
+        <li class="content-item">
+          <div class="item-title">管理员</div>
+          <bk-table
+            class="user-info-table"
+            :data="state.managers"
+            show-overflow-tooltip
+          >
+            <template #empty>
+              <Empty :is-data-empty="state.isDataEmpty" />
             </template>
-          </bk-table-column>
-          <bk-table-column prop="phone" label="手机号">
-            <template #default="{ row }">
-              <span>{{ row.phone || '--' }}</span>
-            </template>
-          </bk-table-column>
-        </bk-table>
-      </li>
-    </ul>
+            <bk-table-column prop="username" label="用户名" />
+            <bk-table-column prop="full_name" label="全名" />
+            <bk-table-column prop="email" label="邮箱">
+              <template #default="{ row }">
+                <span>{{ row.email || '--' }}</span>
+              </template>
+            </bk-table-column>
+            <bk-table-column prop="phone" label="手机号">
+              <template #default="{ row }">
+                <span>{{ row.phone || '--' }}</span>
+              </template>
+            </bk-table-column>
+          </bk-table>
+        </li>
+      </ul>
+    </div>
     <EditInfo
       v-else
       :tenants-data="state"

diff --git a/src/pages/src/views/organization/details/EditDetailsInfo.vue b/src/pages/src/views/organization/details/EditDetailsInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="operation-wrapper">
+  <div ref="boxRef" class="operation-wrapper pt-[8px]">
     <div class="operation-content">
       <div class="operation-card">
         <div class="operation-content-title">基本信息</div>
@@ -44,7 +44,7 @@
           />
         </div>
       </div>
-      <div class="operation-card">
+      <div ref="cardRef" class="operation-card">
         <div class="operation-content-title">管理员</div>
         <bk-form ref="userRef" :model="formData">
           <bk-table
@@ -57,7 +57,7 @@
         </bk-form>
       </div>
     </div>
-    <div class="footer-box">
+    <div ref="footerRef" class="footer" :class="{ 'fixed': isScroll}">
       <bk-button theme="primary" @click="handleSubmit" :loading="state.isLoading">
         提交
       </bk-button>
@@ -70,12 +70,14 @@
 
 <script setup lang="tsx">
 import { Message } from 'bkui-vue';
-import { ref, reactive, computed, nextTick, defineProps, defineEmits, watch } from "vue";
+import { ref, reactive, computed, nextTick, defineProps, defineEmits, watch, onMounted, defineExpose } from "vue";
 import { getBase64 } from "@/utils";
 import MemberSelector from "@/views/tenant/group-details/MemberSelector.vue";
 import { getTenantUsersList, putTenantOrganizationDetails } from "@/http/organizationFiles";
 import useValidate from "@/hooks/use-validate";
 import PhoneInput from '@/components/phoneInput.vue';
+import { addListener } from 'resize-detector';
+import { debounce } from 'bkui-vue/lib/shared';
 
 interface TableItem {
   username: string;
@@ -101,7 +103,7 @@ const props = defineProps({
 });
 
 const validate = useValidate();
-const emit = defineEmits(['updateTenantsList']);
+const emit = defineEmits(['updateTenantsList', 'handleCancel']);
 
 const basicRef = ref();
 const userRef = ref();
@@ -305,6 +307,21 @@ function handleItemChange(index: number, action: 'add' | 'remove') {
   fetchUserList('');
 }
 
+const boxRef = ref();
+const cardRef = ref();
+const footerRef = ref();
+const isScroll = ref(false);
+// 按钮超出屏幕吸底
+function handleResize() {
+  isScroll.value = footerRef.value.scrollHeight > (boxRef.value.clientHeight - cardRef.value.clientHeight - 390);
+}
+
+onMounted(() => {
+  const listenResize = debounce(300, () => handleResize());
+  addListener(boxRef.value, listenResize);
+  nextTick(handleResize);
+})
+
 // 获取管理员列表
 const fetchUserList = (value: string) => {
   params.keyword = value;
@@ -398,25 +415,17 @@ const handleChange = () => {
 const changeVisible = (status: boolean) => {
   formData.feature_flags.user_number_visible = status;
 }
+
+defineExpose({
+  boxRef,
+  cardRef,
+  footerRef,
+});
 </script>
 
 <style lang="less" scoped>
 @import url("@/css/tenantEditStyle.less");
 
-.operation-content {
-  padding: 0 !important;
-}
-
-.footer-box {
-  height: 48px;
-  line-height: 48px;
-
-  .bk-button {
-    width: 88px;
-    margin-right: 8px;
-  }
-}
-
 ::v-deep .bk-select {
   .angle-up {
     display: none !important;

diff --git a/src/pages/src/views/organization/index.vue b/src/pages/src/views/organization/index.vue
@@ -296,11 +296,11 @@ const getTenantUsers = async (id) => {
     state.isEmptySearch = false;
     state.isDataError = false;
     const res = await getTenantUsersList(data);
-    if (res.data.count === 0) {
+    if (res.data?.count === 0 || !res.data.length) {
       params.keyword === '' ? state.isDataEmpty = true : state.isEmptySearch = true;
     }
-    pagination.count = res.data.count;
-    state.currentUsers = res.data.results;
+    pagination.count = res.data?.count;
+    state.currentUsers = res.data?.results || [];
     state.tabLoading = false;
   } catch (e) {
     state.isDataError = true;
@@ -325,11 +325,11 @@ const getTenantDepartmentsUser = async (id) => {
     state.isEmptySearch = false;
     state.isDataError = false;
     const res = await getTenantDepartmentsList(params);
-    if (res.data.count === 0) {
+    if (res.data?.count === 0 || !res.data.length) {
       params.keyword === '' ? state.isDataEmpty = true : state.isEmptySearch = true;
     }
-    pagination.count = res.data.count;
-    state.currentUsers = res.data.results;
+    pagination.count = res.data?.count;
+    state.currentUsers = res.data?.results || [];
     state.tabLoading = false;
   } catch (e) {
     state.isDataError = true;