fix(项目管理): 任务中心列表过滤

frontend/src/components/business/ms-message/MessageCenterDrawer.vue

@@ -97,7 +97,11 @@
                 </div>
                 <div v-else>
                   <div class="flex items-center">
-                    <div class="font-medium text-[var(--color-text-1)]">{{ t('ms.message.notice.title') }}</div>
+                    <a-badge :count="9" dot :offset="[6, -2]">
+                      <div class="one-line-text max-w-[400px] font-medium text-[var(--color-text-1)]">{{
+                        t('ms.message.notice.title')
+                      }}</div>
+                    </a-badge>
                   </div>
                   <div class="flex items-center">
                     <div class="font-medium text-[var(--color-text-2)]">{{ item.userName }}&nbsp;&nbsp;</div>
@@ -375,7 +379,6 @@
     box-sizing: border-box;
     line-height: 1.8715;
   }
-
   .case {
     /* 底部样式 */
     position: fixed;
@@ -383,7 +386,6 @@
     padding: 20px;
     text-align: center;
   }
-
   .clickable {
     cursor: pointer;
     transition: background-color 0.3s ease;

frontend/src/components/business/ms-user-selector/utils.ts

@@ -8,7 +8,7 @@ import {
   getUserByProjectByOrg,
 } from '@/api/modules/setting/organizationAndProject';
 import { getOrgUserGroupOption, getSystemUserGroupOption } from '@/api/modules/setting/usergroup';
-
+import { getOrgOptions } from '@/api/modules/system';
 // eslint-disable-next-line no-shadow
 export enum UserRequestTypeEnum {
   SYSTEM_USER_GROUP = 'SYSTEM_USER_GROUP',
@@ -24,6 +24,7 @@ export enum UserRequestTypeEnum {
   SYSTEM_ORGANIZATION_MEMBER = 'SYSTEM_ORGANIZATION_MEMBER',
   PROJECT_PERMISSION_MEMBER = 'PROJECT_PERMISSION_MEMBER',
   PROJECT_USER_GROUP = 'PROJECT_USER_GROUP',
+  SYSTEM_ORGANIZATION_LIST = 'SYSTEM_ORGANIZATION_LIST',
 }
 export default function initOptionsFunc(type: string, params: Record<string, any>) {
   if (type === UserRequestTypeEnum.SYSTEM_USER_GROUP) {
@@ -66,4 +67,8 @@ export default function initOptionsFunc(type: string, params: Record<string, any
     // 项目-用户组
     return getProjectUserGroupOptions(params.projectId, params.userRoleId, params.keyword);
   }
+  if (type === UserRequestTypeEnum.SYSTEM_ORGANIZATION_LIST) {
+    // 系统-组织
+    return getOrgOptions();
+  }
 }

frontend/src/views/api-test/report/component/tiledList.vue

@@ -100,7 +100,8 @@
   function searchStep() {
     const splitLevel = props.keyWords.split('-');
     const stepTypeStatus = splitLevel[1];
-    const stepType = splitLevel[0] !== 'REQUEST' ? ['API', 'API_CASE', 'CUSTOM_REQUEST'] : splitLevel[0];
+    const requestType = ['API', 'API_CASE', 'CUSTOM_REQUEST'];
+    const stepType = splitLevel[0] === 'CUSTOM_REQUEST' ? ['API', 'API_CASE', 'CUSTOM_REQUEST'] : splitLevel[0];
     const search = (_data: ScenarioItemType[]) => {
       const result: ScenarioItemType[] = [];
       _data.forEach((item) => {

frontend/src/views/bug-management/components/bug-detail-drawer.vue

@@ -91,18 +91,24 @@
       </div>
     </template>
     <template #default="{ loading }">
-      <a-spin :loading="detailLoading" class="w-full">
+      <div
-        <div ref="wrapperRef" class="h-full bg-white">
+        ref="wrapperRef"
-          <MsSplitBox
+        class="wrapperRef bg-white"
-            ref="wrapperRef"
+        :style="{
-            expand-direction="right"
+          height: 'calc(100% - 86px)',
-            :max="0.7"
+        }"
-            :min="0.7"
+      >
-            :size="900"
+        <MsSplitBox
-            :class="{ 'left-bug-detail': activeTab === 'comment' }"
+          expand-direction="right"
-          >
+          :max="0.7"
-            <template #first>
+          :min="0.7"
-              <div class="leftWrapper h-full">
+          :size="900"
+          direction="horizontal"
+          :class="{ 'left-bug-detail': activeTab === 'comment' }"
+        >
+          <template #first>
+            <div class="leftWrapper h-full">
+              <a-spin :loading="detailLoading" class="w-full">
                 <div class="header h-[50px]">
                   <MsTab
                     v-model:active-key="activeTab"
@@ -110,96 +116,96 @@
                     :get-text-func="getTabBadge"
                     class="no-content relative mb-[8px]"
                   />
-                  <div class="tab-pane-container">
-                    <BugDetailTab
-                      v-if="activeTab === 'detail'"
-                      ref="bugDetailTabRef"
-                      :form-item="formItem"
-                      :allow-edit="hasAnyPermission(['PROJECT_BUG:READ+UPDATE'])"
-                      :detail-info="detailInfo"
-                      :is-platform-default-template="isPlatformDefaultTemplate"
-                      :platform-system-fields="platformSystemFields"
-                      :current-platform="props.currentPlatform"
-                      @update-success="updateSuccess"
-                    />
-
-                    <BugCaseTab
-                      v-else-if="activeTab === 'case'"
-                      :bug-id="detailInfo.id"
-                      @update-case-success="updateSuccess"
-                    />
-
-                    <CommentTab v-else-if="activeTab === 'comment'" ref="commentRef" :bug-id="detailInfo.id" />
-
-                    <BugHistoryTab v-else-if="activeTab === 'history'" :bug-id="detailInfo.id" />
-                  </div>
                 </div>
-              </div>
+                <div class="tab-pane-container">
-            </template>
+                  <BugDetailTab
-            <template #second>
+                    v-if="activeTab === 'detail'"
-              <a-spin :loading="rightLoading" class="w-full">
+                    ref="bugDetailTabRef"
-                <!-- 所属平台一致, 详情展示 -->
+                    :form-item="formItem"
-                <div v-if="props.currentPlatform === detailInfo.platform" class="rightWrapper p-[24px]">
+                    :allow-edit="hasAnyPermission(['PROJECT_BUG:READ+UPDATE'])"
-                  <!-- 自定义字段开始 -->
+                    :detail-info="detailInfo"
-                  <div class="inline-block w-full break-words">
+                    :is-platform-default-template="isPlatformDefaultTemplate"
-                    <a-skeleton v-if="loading" class="w-full" :loading="loading" :animation="true">
+                    :platform-system-fields="platformSystemFields"
-                      <a-space direction="vertical" class="w-[100%]" size="large">
+                    :current-platform="props.currentPlatform"
-                        <a-skeleton-line :rows="14" :line-height="30" :line-spacing="30" />
+                    @update-success="updateSuccess"
-                      </a-space>
+                  />
-                    </a-skeleton>
-                    <div v-if="!loading" class="mb-4 font-medium">
-                      <strong>
-                        {{ t('bugManagement.detail.basicInfo') }}
-                      </strong>
-                    </div>
-                    <MsFormCreate
-                      v-if="!loading"
-                      ref="formCreateRef"
-                      v-model:form-item="formItem"
-                      v-model:api="fApi"
-                      :form-rule="formRules"
-                      class="w-full"
-                      :option="options"
-                      @change="handelFormCreateChange"
-                    />
-                    <!-- 自定义字段结束 -->
-                    <div
-                      v-if="!isPlatformDefaultTemplate && hasAnyPermission(['PROJECT_BUG:READ+UPDATE']) && !loading"
-                      class="baseItem"
-                    >
-                      <a-form
-                        :model="{}"
-                        :label-col-props="{
-                          span: 9,
-                        }"
-                        :wrapper-col-props="{
-                          span: 15,
-                        }"
-                        label-align="left"
-                        content-class="tags-class"
-                      >
-                        <a-form-item field="tags" :label="t('system.orgTemplate.tags')">
-                          <MsTagsInput
-                            v-model:model-value="tags"
-                            :disabled="!hasAnyPermission(['PROJECT_BUG:READ+UPDATE'])"
-                            @blur="changeTag"
-                          />
-                        </a-form-item>
-                      </a-form>
-                    </div>
-                  </div>
 
-                  <!-- 内置基础信息结束 -->
+                  <BugCaseTab
-                </div>
+                    v-else-if="activeTab === 'case'"
-                <!-- 所属平台不一致, 详情不展示, 展示空面板 -->
+                    :bug-id="detailInfo.id"
-                <div v-else>
+                    @update-case-success="updateSuccess"
-                  <a-empty> {{ $t('messageBox.noContent') }} </a-empty>
+                  />
+
+                  <CommentTab v-else-if="activeTab === 'comment'" ref="commentRef" :bug-id="detailInfo.id" />
+
+                  <BugHistoryTab v-else-if="activeTab === 'history'" :bug-id="detailInfo.id" />
                 </div>
               </a-spin>
-            </template>
+            </div>
-          </MsSplitBox>
+          </template>
-        </div>
+          <template #second>
-      </a-spin>
+            <a-spin :loading="rightLoading" class="w-full">
+              <!-- 所属平台一致, 详情展示 -->
+              <div v-if="props.currentPlatform === detailInfo.platform" class="rightWrapper h-full p-[24px]">
+                <!-- 自定义字段开始 -->
+                <div class="inline-block w-full break-words">
+                  <a-skeleton v-if="loading" class="w-full" :loading="loading" :animation="true">
+                    <a-space direction="vertical" class="w-[100%]" size="large">
+                      <a-skeleton-line :rows="14" :line-height="30" :line-spacing="30" />
+                    </a-space>
+                  </a-skeleton>
+                  <div v-if="!loading" class="mb-4 font-medium">
+                    <strong>
+                      {{ t('bugManagement.detail.basicInfo') }}
+                    </strong>
+                  </div>
+                  <MsFormCreate
+                    v-if="!loading"
+                    ref="formCreateRef"
+                    v-model:form-item="formItem"
+                    v-model:api="fApi"
+                    :form-rule="formRules"
+                    class="w-full"
+                    :option="options"
+                    @change="handelFormCreateChange"
+                  />
+                  <!-- 自定义字段结束 -->
+                  <div
+                    v-if="!isPlatformDefaultTemplate && hasAnyPermission(['PROJECT_BUG:READ+UPDATE']) && !loading"
+                    class="baseItem"
+                  >
+                    <a-form
+                      :model="{}"
+                      :label-col-props="{
+                        span: 9,
+                      }"
+                      :wrapper-col-props="{
+                        span: 15,
+                      }"
+                      label-align="left"
+                      content-class="tags-class"
+                    >
+                      <a-form-item field="tags" :label="t('system.orgTemplate.tags')">
+                        <MsTagsInput
+                          v-model:model-value="tags"
+                          :disabled="!hasAnyPermission(['PROJECT_BUG:READ+UPDATE'])"
+                          @blur="changeTag"
+                        />
+                      </a-form-item>
+                    </a-form>
+                  </div>
+                </div>
+
+                <!-- 内置基础信息结束 -->
+              </div>
+              <!-- 所属平台不一致, 详情不展示, 展示空面板 -->
+              <div v-else>
+                <a-empty> {{ $t('messageBox.noContent') }} </a-empty>
+              </div>
+            </a-spin>
+          </template>
+        </MsSplitBox>
+      </div>
       <CommentInput
         v-if="activeTab === 'comment' && hasAnyPermission(['PROJECT_BUG:READ+COMMENT'])"
         :content="commentContent"
@@ -767,4 +773,4 @@
   //  width: 100%;
   //  word-wrap: break-word;
   //}
-</style>
+</style>

frontend/src/views/bug-management/components/bugCaseTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="p-4">
     <div class="flex items-center justify-between">
       <a-button type="primary" :disabled="!hasAnyPermission(['PROJECT_BUG:READ+UPDATE'])" @click="handleSelect">{{
         t('caseManagement.featureCase.linkCase')

frontend/src/views/case-management/caseManagementFeature/components/tableFilter.vue

@@ -9,7 +9,12 @@
     <template #content>
       <div class="arco-table-filters-content">
         <div class="ml-[6px] flex w-full items-center justify-start overflow-hidden px-[6px] py-[2px]">
-          <a-checkbox-group v-model:model-value="innerStatusFilters" direction="vertical" size="small">
+          <a-checkbox-group
+            v-if="props.mode === 'static' && props.list?.length"
+            v-model:model-value="innerStatusFilters"
+            direction="vertical"
+            size="small"
+          >
             <a-checkbox
               v-for="(item, index) of props.list"
               :key="item[props.valueKey || 'value']"
@@ -23,7 +28,15 @@
             </a-checkbox>
           </a-checkbox-group>
         </div>
-        <div class="filter-button">
+        <div v-if="props.mode === 'remote'" class="min-h-[100px] w-[200px] p-4">
+          <MsUserSelector
+            v-model="innerStatusFilters"
+            :load-option-params="props.loadOptionParams"
+            :type="props.type"
+            :placeholder="props.placeholderText"
+          />
+        </div>
+        <div class="flex items-center p-4" :class="[props.mode === 'static' ? 'justify-between' : 'justify-end']">
           <a-button size="mini" class="mr-[8px]" @click="resetFilter">
             {{ t('common.reset') }}
           </a-button>
@@ -39,6 +52,9 @@
 <script setup lang="ts">
   import { useVModel } from '@vueuse/core';
 
+  import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
+  import type { UserRequestTypeEnum } from '@/components/business/ms-user-selector/utils';
+
   import { useI18n } from '@/hooks/useI18n';
 
   const { t } = useI18n();
@@ -47,14 +63,23 @@
     [key: string]: any;
   }
 
-  const props = defineProps<{
+  const props = withDefaults(
-    visible: boolean;
+    defineProps<{
-    title: string;
+      mode?: 'static' | 'remote';
-    statusFilters: string[];
+      visible: boolean;
-    list: FilterListItem[];
+      title: string;
-    valueKey?: string;
+      statusFilters: string[];
-    labelKey?: string;
+      list?: FilterListItem[];
-  }>();
+      valueKey?: string;
+      labelKey?: string;
+      type?: UserRequestTypeEnum; // 加载选项的类型
+      loadOptionParams?: Record<string, any>; // 请求下拉的参数
+      placeholderText?: string;
+    }>(),
+    {
+      mode: 'static',
+    }
+  );
 
   const emit = defineEmits<{
     (e: 'update:visible', visible: boolean): void;

frontend/src/views/project-management/taskCenter/component/apiCase.vue

@@ -102,6 +102,33 @@
           </template>
         </TableFilter>
       </template>
+      <template v-if="appStore.packageType === 'enterprise'" #orgFilterName="{ columnConfig }">
+        <TableFilter
+          v-model:visible="orgFilterVisible"
+          v-model:status-filters="orgFiltersMap[props.moduleType]"
+          :title="(columnConfig.title as string)"
+          mode="remote"
+          value-key="id"
+          label-key="name"
+          :type="UserRequestTypeEnum.SYSTEM_ORGANIZATION_LIST"
+          :placeholder-text="t('project.taskCenter.filterOrgPlaceholderText')"
+          @search="initData()"
+        >
+        </TableFilter>
+      </template>
+      <template #projectFilterName="{ columnConfig }">
+        <TableFilter
+          v-model:visible="projectFilterVisible"
+          v-model:status-filters="projectFiltersMap[props.moduleType]"
+          :title="(columnConfig.title as string)"
+          mode="remote"
+          :load-option-params="{ organizationId: appStore.currentOrgId }"
+          :placeholder-text="t('project.taskCenter.filterProPlaceholderText')"
+          :type="UserRequestTypeEnum.SYSTEM_ORGANIZATION_PROJECT"
+          @search="initData()"
+        >
+        </TableFilter>
+      </template>
       <template #operationTime="{ record }">
         <span>{{ dayjs(record.operationTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
       </template>
@@ -145,6 +172,7 @@
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import { UserRequestTypeEnum } from '@/components/business/ms-user-selector/utils';
   import ExecutionStatus from './executionStatus.vue';
   import caseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
   import ReportDetailDrawer from '@/views/api-test/report/component/reportDetailDrawer.vue';
@@ -164,7 +192,7 @@
   import { useI18n } from '@/hooks/useI18n';
   import useModal from '@/hooks/useModal';
   import useOpenNewPage from '@/hooks/useOpenNewPage';
-  import { useTableStore } from '@/store';
+  import { useAppStore, useTableStore } from '@/store';
   import { characterLimit } from '@/utils';
   import { hasAnyPermission } from '@/utils/permission';
 
@@ -177,7 +205,7 @@
 
   const { openNewPage } = useOpenNewPage();
   const tableStore = useTableStore();
-
+  const appStore = useAppStore();
   const { openModal } = useModal();
 
   const { t } = useI18n();
@@ -391,6 +419,23 @@
     API_SCENARIO: statusFilterApiScenario.value,
   });
 
+  const orgFilterVisible = ref<boolean>(false);
+  const projectFilterVisible = ref<boolean>(false);
+  const orgApiCaseFilter = ref([]);
+  const orgApiScenarioFilter = ref([]);
+
+  const orgFiltersMap = ref<Record<string, string[]>>({
+    API_CASE: orgApiCaseFilter.value,
+    API_SCENARIO: orgApiScenarioFilter.value,
+  });
+
+  const projectApiCaseFilter = ref([]);
+  const projectApiScenarioFilter = ref([]);
+  const projectFiltersMap = ref<Record<string, string[]>>({
+    API_CASE: projectApiCaseFilter.value,
+    API_SCENARIO: projectApiScenarioFilter.value,
+  });
+
   function initData() {
     setLoadListParams({
       keyword: keyword.value,
@@ -398,6 +443,8 @@
       filter: {
         status: statusFiltersMap.value[props.moduleType],
         triggerMode: triggerModeFiltersMap.value[props.moduleType],
+        organizationIds: orgFiltersMap.value[props.moduleType],
+        projectIds: projectFiltersMap.value[props.moduleType],
       },
     });
     loadList();
@@ -502,7 +549,7 @@
 
   function execution(record: any) {}
 
-  onBeforeMount(() => {
+  onBeforeMount(async () => {
     initData();
   });
 

frontend/src/views/project-management/taskCenter/component/scheduledTask.vue

@@ -64,6 +64,33 @@
           </a-option>
         </a-select>
       </template>
+      <template v-if="appStore.packageType === 'enterprise'" #orgFilterName="{ columnConfig }">
+        <TableFilter
+          v-model:visible="orgFilterVisible"
+          v-model:status-filters="orgFiltersMap[props.moduleType]"
+          :title="(columnConfig.title as string)"
+          mode="remote"
+          value-key="id"
+          label-key="name"
+          :type="UserRequestTypeEnum.SYSTEM_ORGANIZATION_LIST"
+          :placeholder-text="t('project.taskCenter.filterOrgPlaceholderText')"
+          @search="initData()"
+        >
+        </TableFilter>
+      </template>
+      <template #projectFilterName="{ columnConfig }">
+        <TableFilter
+          v-model:visible="projectFilterVisible"
+          v-model:status-filters="projectFiltersMap[props.moduleType]"
+          :title="(columnConfig.title as string)"
+          mode="remote"
+          :load-option-params="{ organizationId: appStore.currentOrgId }"
+          :placeholder-text="t('project.taskCenter.filterProPlaceholderText')"
+          :type="UserRequestTypeEnum.SYSTEM_ORGANIZATION_PROJECT"
+          @search="initData()"
+        >
+        </TableFilter>
+      </template>
       <template #operation="{ record }">
         <a-switch
           v-model="record.enable"
@@ -99,6 +126,8 @@
   import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
+  import { UserRequestTypeEnum } from '@/components/business/ms-user-selector/utils';
+  import TableFilter from '@/views/case-management/caseManagementFeature/components/tableFilter.vue';
 
   import {
     batchDisableScheduleOrgTask,
@@ -123,7 +152,7 @@
   import { useI18n } from '@/hooks/useI18n';
   import useModal from '@/hooks/useModal';
   import useOpenNewPage from '@/hooks/useOpenNewPage';
-  import { useTableStore } from '@/store';
+  import { useAppStore, useTableStore } from '@/store';
   import { hasAnyPermission } from '@/utils/permission';
 
   import { BatchApiParams } from '@/models/common';
@@ -134,6 +163,8 @@
 
   import { ordAndProjectColumn, resourceTypeMap } from './utils';
 
+  const appStore = useAppStore();
+
   const { openNewPage } = useOpenNewPage();
 
   const tableStore = useTableStore();
@@ -301,6 +332,23 @@
       columns,
     },
   };
+  const orgFilterVisible = ref<boolean>(false);
+  const projectFilterVisible = ref<boolean>(false);
+  const orgApiCaseFilter = ref([]);
+  const orgApiScenarioFilter = ref([]);
+
+  const orgFiltersMap = ref<Record<string, string[]>>({
+    API_IMPORT: orgApiCaseFilter.value,
+    API_SCENARIO: orgApiScenarioFilter.value,
+  });
+
+  const projectApiCaseFilter = ref([]);
+  const projectApiScenarioFilter = ref([]);
+  const projectFiltersMap = ref<Record<string, string[]>>({
+    API_CASE: projectApiCaseFilter.value,
+    API_SCENARIO: projectApiScenarioFilter.value,
+  });
+
   const hasJumpPermission = computed(() => hasAnyPermission(permissionsMap[props.group][props.moduleType].jump));
 
   const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(
@@ -327,6 +375,8 @@
     setLoadListParams({
       keyword: keyword.value,
       scheduleTagType: props.moduleType,
+      organizationIds: orgFiltersMap.value[props.moduleType],
+      projectIds: projectFiltersMap.value[props.moduleType],
     });
     loadList();
   }

frontend/src/views/project-management/taskCenter/component/utils.ts

@@ -1,7 +1,10 @@
 import type { MsTableColumn } from '@/components/pure/ms-table/type';
 
+import { useAppStore } from '@/store';
+
 import { TaskCenterEnum } from '@/enums/taskCenter';
 
+const appStore = useAppStore();
 export const TaskStatus = {
   [TaskCenterEnum.API_CASE]: {
     SUCCESS: {
@@ -176,6 +179,7 @@ export const ordAndProjectColumn: MsTableColumn = [
     title: 'project.belongOrganization',
     dataIndex: 'organizationName',
     slotName: 'organizationName',
+    titleSlotName: 'orgFilterName',
     showTooltip: true,
     showDrag: true,
     width: 200,
@@ -185,6 +189,7 @@ export const ordAndProjectColumn: MsTableColumn = [
     title: 'project.belongProject',
     dataIndex: 'projectName',
     slotName: 'projectName',
+    titleSlotName: 'projectFilterName',
     showTooltip: true,
     showDrag: true,
     width: 200,

frontend/src/views/project-management/taskCenter/locale/en-US.ts

@@ -59,4 +59,6 @@ export default {
   'project.taskCenter.confirmDisable': 'Confirm disable',
   'project.taskCenter.enableSuccess': 'Enable successfully',
   'project.taskCenter.disableSuccess': 'Disable successfully',
+  'project.taskCenter.filterPlaceholderText': 'Please select a project',
+  'project.taskCenter.filterOrgPlaceholderText': 'Please select an organization',
 };

frontend/src/views/project-management/taskCenter/locale/zh-CN.ts

@@ -57,4 +57,6 @@ export default {
   'project.taskCenter.confirmDisable': '确认关闭',
   'project.taskCenter.enableSuccess': '开启成功',
   'project.taskCenter.disableSuccess': '关闭成功',
+  'project.taskCenter.filterProPlaceholderText': '请选择所属项目',
+  'project.taskCenter.filterOrgPlaceholderText': '请选择所属组织',
 };