feat：同步并分表存储资源组权限数据 #10964

src/frontend/devops-manage/src/components/user-group/components/children/permission-manage/manage-all.vue

@@ -1,23 +1,9 @@
 <template>
   <bk-loading class="manage" :loading="isLoading"  :zIndex="100">
     <div class="manage-search">
-      <div class="search-expired">
-        <p class="search-terms">{{ t('过期时间') }}</p>
-        <date-picker
-          v-model="searchExpiredAt"
-          :commonUseList="commonUseList"
-          @update:model-value="handleValueChange"
-        />
-      </div>
-      <bk-search-select
-        v-model="searchValue"
-        :data="searchData"
-        unique-select
-        class="multi-search"
-        value-behavior="need-key"
-        :placeholder="filterTips"
-        :get-menu-list="getMenuList"
-        @search="handleSearch(searchValue)"
+      <manage-search
+        ref="manageSearchRef"
+        @search-init="init"
       />
     </div>
     <div class="manage-article" v-if="memberList.length">
@@ -30,7 +16,7 @@
           :active-tab="activeTab"
           @refresh="refresh"
           @handle-click="asideClick"
-          @page-change="handleAsidePageChange"
+          @page-change="getAsidePageChange"
           @get-person-list="handleShowPerson"
           @remove-confirm="asideRemoveConfirm"
         />
@@ -372,8 +358,6 @@
 </template>
 
 <script setup name="ManageAll">
-import DatePicker from '@blueking/date-picker';
-import '@blueking/date-picker/vue3/vue3.css';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { Message } from 'bkui-vue';
@@ -386,6 +370,7 @@ import ProjectUserSelector from '@/components/project-user-selector';
 import NoPermission from '../no-enable-permission/no-permission.vue';
 import userGroupTable from "@/store/userGroupTable";
 import useManageAside from "@/store/manageAside";
+import manageSearch from "./manage-search.vue";
 import { storeToRefs } from 'pinia';
 import { batchOperateTypes, btnTexts, batchTitle, batchMassageText } from "@/utils/constants.js";
 
@@ -413,7 +398,6 @@ const rules = {
     { required: true, message: t('请输入移交人'), trigger: 'blur' },
   ],
 };
-const searchValue = ref([]);
 const inoperableCount = ref();
 const totalCount = ref();
 const renewalLoading = ref(false);
@@ -424,77 +408,9 @@ const loadingMap = {
   handover: handoverLoading,
   remove: removerLoading
 };
-const filterTips = computed(() => {
-  return searchData.value.map(item => item.name).join(' / ');
-});
-const searchData = computed(() => {
-  const data = [
-    {
-      name: t('用户'),
-      id: 'user',
-    },
-    {
-      name: t('组织架构'),
-      id: 'department',
-    },
-    {
-      name: t('用户组名称'),
-      id: 'groupName',
-    },
-  ]
-  return data.filter(data => {
-    return !searchValue.value.find(val => val.id === data.id)
-  })
-});
-const searchExpiredAt = ref([]);
-const expiredAtList = ref([])
-const searchGroup = computed(() => ({
-  searchValue: searchValue.value,
-  expiredAt: expiredAtList.value
-}));
-const commonUseList = ref([
-  {
-    id: ['now', 'now+24h'],
-    name: t('未来 X 小时', [24]),
-  },
-  {
-    id: ['now', 'now+7d'],
-    name: t('未来 X 天', [7]),
-  },
-  {
-    id: ['now', 'now+15d'],
-    name: t('未来 X 天', [15]),
-  },
-  {
-    id: ['now', 'now+30d'],
-    name: t('未来 X 天', [30]),
-  },
-  {
-    id: ['now', 'now+60d'],
-    name: t('未来 X 天', [60]),
-  },
-  {
-    id: ['now-24h', 'now'],
-    name: t('过去 X 小时', [24]),
-  },
-  {
-    id: ['now-7d', 'now'],
-    name: t('过去 X 天', [7]),
-  },
-  {
-    id: ['now-15d', 'now'],
-    name: t('过去 X 天', [15]),
-  },
-  {
-    id: ['now-30d', 'now'],
-    name: t('过去 X 天', [30]),
-  },
-  {
-    id: ['now-60d', 'now'],
-    name: t('过去 X 天', [60]),
-  },
-]);
+const searchGroup = ref();
 const manageAsideRef = ref(null);
+const manageSearchRef = ref(null);
 const groupTableStore = userGroupTable();
 const manageAsideStore = useManageAside();
 const operatorLoading = ref(false);
@@ -564,31 +480,20 @@ onMounted(() => {
 watch(projectId, () => {
   init(true);
 });
-watch(searchGroup, () => {
-  init(undefined, searchGroup.value);
-});
-function handleSearch (value) {
-  if(!value.length) return;
-  searchValue.value = value;
-  init(undefined, searchGroup.value);
-}
-function handleValueChange (value, info) {
-  console.log(value,'/////');
-  searchExpiredAt.value = value;
-  expiredAtList.value = info;
-}
 function init (flag, searchValue) {
+  searchGroup.value = searchValue
   memberPagination.value.current = 1;
   asideItem.value = undefined;
   getProjectMembers(projectId.value, flag, searchValue);
 }
 function asideClick (item) {
   handleAsideClick(item, projectId.value);
 }
+function getAsidePageChange (current, projectId) {
+  handleAsidePageChange(current, projectId, searchGroup.value)
+}
 async function refresh () {
-  searchValue.value = [];
-  searchExpiredAt.value = [];
-  expiredAtList.value = [];
+  manageSearchRef.value?.clearSearch();
   getProjectMembers(projectId.value, true);
 }
 /**
@@ -806,31 +711,6 @@ function asideRemoveConfirm (removeUser, handOverForm) {
   handleAsideRemoveConfirm(removeUser, handOverForm, projectId.value, manageAsideRef.value);
 }
 
-async function getMenuList (item, keyword) {
-  const query = {
-    memberType: item.id,
-    page: 1,
-    pageSize: 400,
-    projectCode: projectId.value,
-  }
-  if (item.id === 'user' && keyword) {
-    query.userName = keyword
-  } else if (item.id === 'department' && keyword) {
-    query.deptName = keyword
-  }
-  if(item.id === 'groupName') {
-    return []
-  } else {
-    const res = await http.getProjectMembers(projectId.value, query)
-    return res.records.map(i => {
-      return {
-        ...i,
-        displayName: i.name || i.id,
-        name: i.type === 'user' ? (!i.name ? i.id : `${i.id} (${i.name})`) : i.name,
-      }
-    })
-  }
-}
 function handleChangeOverFormName ({list, userList}) {
   if(!list){
     Object.assign(handOverForm.value, getHandOverForm());
@@ -862,26 +742,6 @@ function closeDeptListPermissionDialog () {
     background: #FFFFFF;
     padding: 16px 24px;
     box-shadow: 0 2px 4px 0 #1919290d;
-
-    .search-expired {
-      display: flex;
-      align-items: center;
-
-      .search-terms {
-        color: #63656e;
-        line-height: 30px;
-        padding: 0 10px;
-        color: #63656e;
-        border: 1px solid #c4c6cc;
-        border-radius: 2px;
-        background-color: #f5f7fa;
-      }
-    }
-
-    .multi-search {
-      width: 50%;
-      margin-left: 10px;
-    }
   }
 
   .manage-article {

src/frontend/devops-manage/src/components/user-group/components/children/permission-manage/manage-aside.vue

@@ -373,7 +373,7 @@ async function handConfirm (flag) {
         emit('removeConfirm', removeUser.value, handOverForm.value);
       }
     } else {
-      emit('removeConfirm', removeUser.value);
+      emit('removeConfirm', removeUser.value, {});
     }
   } catch (error) {}
 }