feat：项目成员支持按照过期时间/用户组名称搜索 #10892

src/frontend/devops-manage/package.json

@@ -31,6 +31,7 @@
     "vue-i18n": "^9.1.10",
     "vue-router": "^4.1.6",
     "lodash.throttle": "^4.1.1",
+    "@blueking/date-picker": "2.0.0-beta.26",
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4"
   },
   "devDependencies": {

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

@@ -365,10 +365,25 @@ export default {
       this.curGroupIndex = this.groupList.findIndex(item => item.groupId === group.groupId);
       this.$emit('choose-group', group);
     },
-    handleCreateGroup() {
+    async handleCreateGroup() {
       if (this.isNotProject) return
       this.activeTab = '';
-      this.$emit('create-group');
+      try {
+        const res = await http.getResource({
+          projectCode: this.curProjectCode,
+          resourceType: this.resourceType,
+          resourceCode: this.curProjectCode});
+          if(res) {
+            const role_id = res.iamGradeManagerId;
+            this.$emit('create-group', role_id);
+          }
+      } catch (error) {
+        Message({
+          theme: 'error',
+          message: error.message
+        });
+      }
+
     },
     handleCloseManage() {
       this.isClosing = true;
@@ -421,7 +436,7 @@ export default {
       } catch (error) {
         Message({
           theme: 'error',
-          message: err.message
+          message: error.message
         });
       }
     },
@@ -431,7 +446,7 @@ export default {
       } catch (error) {
         Message({
           theme: 'error',
-          message: err.message
+          message: error.message
         });
       }
     },

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

@@ -1,6 +1,14 @@
 <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"
@@ -364,6 +372,8 @@
 </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';
@@ -427,11 +437,63 @@ const searchData = computed(() => {
       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 manageAsideRef = ref(null);
 const groupTableStore = userGroupTable();
 const manageAsideStore = useManageAside();
@@ -502,12 +564,18 @@ onMounted(() => {
 watch(projectId, () => {
   init(true);
 });
-watch(searchValue, (newSearchValue) => {
-  init(undefined, newSearchValue);
+watch(searchGroup, () => {
+  init(undefined, searchGroup.value);
 });
 function handleSearch (value) {
   if(!value.length) return;
-  init(undefined, value);
+  searchValue.value = value;
+  init(undefined, searchGroup.value);
+}
+function handleValueChange (value, info) {
+  console.log(value,'/////');
+  searchExpiredAt.value = value;
+  expiredAtList.value = info;
 }
 function init (flag, searchValue) {
   memberPagination.value.current = 1;
@@ -519,7 +587,9 @@ function asideClick (item) {
 }
 async function refresh () {
   searchValue.value = [];
-  getProjectMembers(projectId.value, true, searchValue.value);
+  searchExpiredAt.value = [];
+  expiredAtList.value = [];
+  getProjectMembers(projectId.value, true);
 }
 /**
  * 移交弹窗打开时
@@ -740,21 +810,26 @@ async function getMenuList (item, keyword) {
   const query = {
     memberType: item.id,
     page: 1,
-    pageSize: 400
+    pageSize: 400,
+    projectCode: projectId.value,
   }
   if (item.id === 'user' && keyword) {
     query.userName = keyword
   } else if (item.id === 'department' && keyword) {
     query.deptName = keyword
   }
-  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,
-    }
-  })
+  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){
@@ -787,9 +862,25 @@ 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;
     }
   }
 

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

@@ -79,10 +79,10 @@ export default {
         this.isAllMember = true;
       }
     },
-    handleCreateGroup() {
+    handleCreateGroup(roleId) {
       this.activeIndex = '';
       this.isAllMember = false;
-      this.path = 'create-user-group';
+      this.path = `create-user-group?role_id=${roleId}`;
     },
     handleCloseManage() {
       this.$emit('close-manage');

src/frontend/devops-manage/src/http/api.ts

@@ -221,7 +221,7 @@ export default {
   },
 
   /**
-   * 获取项目下全体成员
+   * 获取项目下全体成员(简单查询)
    */
   async getProjectMembers(projectId: string, params?: any) {
     const query = new URLSearchParams({
@@ -231,18 +231,32 @@ export default {
       globalError: false
     });
   },
+  /**
+   * 获取项目下全体成员(复杂查询)
+   */
+  async getProjectMembersByCondition(projectId: string, params: any) {
+    return http.post(`${IAM_PERFIX}/member/${projectId}/listProjectMembersByCondition`, {
+      ...params,
+      globalError: false
+    });
+  },
   /**
    * 获取项目成员有权限的用户组数量
    */
-  async getMemberGroups(projectId: string, memberId: string) {
-    return http.get(`${IAM_PERFIX}/member/${projectId}/getMemberGroupCount?memberId=${memberId}`);
+  async getMemberGroups(projectId: string, params: any) {
+    const query = new URLSearchParams({
+      ...params,
+    }).toString();
+    return http.get(`${IAM_PERFIX}/member/${projectId}/getMemberGroupCount?${query}`);
   },
   /**
    * 获取项目成员有权限的用户组
    */
-  async getMemberGroupsDetails(params) {
-    const { projectId, resourceType, memberId, start, limit } = params;
-    return http.get(`${IAM_PERFIX}/group/${projectId}/${resourceType}/getMemberGroupsDetails?start=${start}&limit=${limit}&memberId=${memberId}`);
+  async getMemberGroupsDetails(projectId: string, resourceType: string, params: any) {
+    const query = new URLSearchParams({
+      ...params,
+    }).toString();
+    return http.get(`${IAM_PERFIX}/group/${projectId}/${resourceType}/getMemberGroupsDetails?${query}`);
   },
   /**
    * 批量续期组成员权限--无需进行审批