fix: 前端代码优化 (#1220)

src/pages/src/css/index.css

@@ -47,6 +47,7 @@
   margin-right: 8px;
   border: 1px solid #C4C6CC;
   border-radius: 50%;
+  object-fit: contain;
 }
 
 .span-logo {

src/pages/src/css/tenantViewStyle.less

@@ -62,6 +62,7 @@
           right: -160px;
           width: 72px;
           height: 72px;
+          object-fit: contain;
         }
       }
 

src/pages/src/views/data-source/local-details/EditUser.vue

@@ -127,7 +127,7 @@
       </div> -->
     </bk-form>
     <div class="footer">
-      <bk-button theme="primary" @click="handleSubmit">
+      <bk-button theme="primary" @click="handleSubmit" :loading="state.isLoading">
         提交
       </bk-button>
       <bk-button @click="() => emit('handleCancelEdit')">
@@ -171,6 +171,7 @@ const formData = reactive({
 const state = reactive({
   departments: [],
   leaders: [],
+  isLoading: false,
 });
 
 watch(() => props.usersData.departments, (val) => {
@@ -232,6 +233,7 @@ const handleDelete = () => {
 
 const handleSubmit = async () => {
   await formRef.value.validate();
+  state.isLoading = true;
   const data = { ...formData };
   if (!data.logo) delete data.logo;
   let text = '';
@@ -245,6 +247,7 @@ const handleSubmit = async () => {
     await newDataSourceUser(data);
   }
   emit('updateUsers', '', text);
+  state.isLoading = false;
   window.changeInput = false;
 };
 

src/pages/src/views/organization/details/EditDetailsInfo.vue

@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="footer-box">
-      <bk-button theme="primary" @click="handleSubmit">
+      <bk-button theme="primary" @click="handleSubmit" :loading="state.isLoading">
         提交
       </bk-button>
       <bk-button @click="() => $emit('handleCancel')">
@@ -112,6 +112,7 @@ const state = reactive({
   username: "",
   count: 0,
   list: [],
+  isLoading: false,
 });
 
 const params = reactive({
@@ -321,6 +322,7 @@ async function handleSubmit() {
   ];
 
   await Promise.all(validationPromises);
+  state.isLoading = true;
   putTenantOrganization();
 }
 
@@ -343,6 +345,9 @@ function putTenantOrganization() {
     })
     .catch((e) => {
       console.warn(e);
+    })
+    .finally(() => {
+      state.isLoading = false;
     });
 }
 

src/pages/src/views/organization/index.vue

@@ -1,6 +1,6 @@
 <template>
   <bk-loading class="organization-wrapper" :loading="state.isLoading">
-    <div class="tree-wrapper user-scroll-y">
+    <bk-loading class="tree-wrapper user-scroll-y" :loading="state.treeLoading">
       <div class="tree-main">
         <bk-tree
           ref="treeRef"
@@ -55,7 +55,7 @@
           </template>
         </bk-tree>
       </div>
-    </div>
+    </bk-loading>
     <div class="organization-main">
       <header>
         <img class="img-logo" v-if="state.currentTenant.logo" :src="state.currentTenant.logo" />
@@ -92,7 +92,7 @@
             <DetailsInfo
               v-if="index === 1"
               :user-data="state.currentTenant"
-              @updateTenantsList="initData" />
+              @updateTenantsList="updateTenantsList" />
           </bk-loading>
         </bk-tab-panel>
       </bk-tab>
@@ -101,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { overflowTitle } from 'bkui-vue';
+import { Message, overflowTitle } from 'bkui-vue';
 import { DownShape, RightShape } from 'bkui-vue/lib/icon';
 import { computed, inject, reactive, ref } from 'vue';
 
@@ -123,6 +123,7 @@ const editLeaveBefore = inject('editLeaveBefore');
 const treeRef = ref();
 const state = reactive({
   isLoading: false,
+  treeLoading: false,
   tabLoading: false,
   treeData: [],
   currentTenant: {},
@@ -169,6 +170,7 @@ const isTenant = computed(() => (!!state.currentTenant.isRoot));
 const initData = async () => {
   try {
     state.isLoading = true;
+    state.treeLoading = true;
     const res = await getTenantOrganizationList();
     state.treeData = res.data;
     state.treeData.forEach((item, index) => {
@@ -189,6 +191,7 @@ const initData = async () => {
     console.log(e);
   } finally {
     state.isLoading = false;
+    state.treeLoading = false;
   }
 };
 initData();
@@ -209,6 +212,7 @@ const changeNode = async (node) => {
   }
   state.tabLoading = true;
   params.page = 1;
+  state.pagination.current = 1;
   params.keyword = '';
   if (node.isRoot) {
     panels[1].isVisible = true;
@@ -316,6 +320,14 @@ const updatePageCurrent = (current) => {
 const getUserList = () => {
   state.currentTenant.isRoot ? getTenantUsers(state.currentItem.id) : getTenantDepartmentsUser(state.currentItem.id);
 };
+
+const updateTenantsList = () => {
+  getTenantDetails(state.currentTenant.id);
+  Message({
+    theme: 'success',
+    message: '租户信息更新成功',
+  });
+};
 </script>
 
 <style lang="less" scoped>

src/pages/src/views/organization/tree.less

@@ -16,7 +16,7 @@
   height: 100%;
 
   .is-selected {
-    .img-logo, .span-logo {
+    .span-logo {
       background: #a3c5fd;
     }
   }

src/pages/src/views/tenant/group-details/OperationDetails.vue

@@ -88,7 +88,7 @@
       </div> -->
     </div>
     <div class="footer">
-      <bk-button theme="primary" @click="handleSubmit">
+      <bk-button theme="primary" @click="handleSubmit" :loading="state.isLoading">
         提交
       </bk-button>
       <bk-button @click="() => $emit('handleCancelEdit')">
@@ -145,6 +145,7 @@ const state = reactive({
   isEmptySearch: false,
   count: 0,
   list: [],
+  isLoading: false,
 });
 
 const params = reactive({
@@ -306,7 +307,7 @@ async function handleSubmit() {
   ];
 
   await Promise.all(validationPromises);
-
+  state.isLoading = true;
   props.type === "add" ? createTenantsFn() : putTenantsFn();
 }
 
@@ -315,7 +316,11 @@ function createTenantsFn() {
   const data = { ...formData };
   if (!data.logo) delete data.logo;
 
-  createTenants(data).then(() => emit('updateTenantsList'));
+  createTenants(data).then(() => {
+    emit('updateTenantsList', '公司创建成功');
+  }).finally(() => {
+    state.isLoading = false;
+  });
 }
 // 更新租户
 function putTenantsFn() {
@@ -331,7 +336,11 @@ function putTenantsFn() {
 
   if (!params.logo) delete params.logo;
 
-  putTenants(formData.id, params).then(() => emit('updateTenantsList'));
+  putTenants(formData.id, params).then(() => {
+    emit('updateTenantsList', '公司更新成功');
+  }).finally(() => {
+    state.isLoading = false;
+  });
 }
 
 // 搜索管理员

src/pages/src/views/tenant/group-details/index.vue

@@ -112,6 +112,7 @@
 </template>
 
 <script setup lang="ts">
+import { Message } from 'bkui-vue';
 import moment from 'moment';
 import { computed, inject, reactive, ref, watch } from 'vue';
 
@@ -277,10 +278,14 @@ const handleEnter = () => {
     });
 };
 // 更新租户列表
-const updateTenantsList = () => {
+const updateTenantsList = (text) => {
   detailsConfig.isShow = false;
   window.changeInput = false;
   fetchTenantsList();
+  Message({
+    theme: 'success',
+    message: text,
+  });
 };
 
 const handleBeforeClose = async () => {
@@ -328,6 +333,7 @@ const handleBeforeClose = async () => {
           margin-right: 8px;
           border: 1px solid #C4C6CC;
           border-radius: 50%;
+          object-fit: contain;
         }
 
         .logo {