feat(接口测试): 引用公共脚本列表增加快捷状态修改和排序以及筛选功能

--bug=1037914 --user=宋天阳  https://www.tapd.cn/55049933/s/1491694

frontend/src/api/modules/project-management/commonScript.ts

@@ -13,6 +13,7 @@ import {
   GetFormApiImportUrl,
   GetInsertCommonScriptPageUrl,
   TestScriptUrl,
+  UpdateCommonScriptStatusUrl,
   UpdateCommonScriptUrl,
 } from '@/api/requrls/project-management/commonScript';
 
@@ -24,7 +25,7 @@ import type {
   CommonScriptItem,
   TestScriptType,
 } from '@/models/projectManagement/commonScript';
-import { CustomFuncColumnOptionItem } from '@/models/projectManagement/commonScript';
+import { CustomFuncColumnOptionItem, updateCommonScriptStatus } from '@/models/projectManagement/commonScript';
 
 // 获取公共脚本列表
 export function getCommonScriptPage(data: TableQueryParams) {
@@ -42,6 +43,12 @@ export function addOrUpdateCommonScriptReq(data: AddOrUpdateCommonScript) {
 export function updateCommonScript(data: AddOrUpdateCommonScript) {
   return MSR.post({ url: UpdateCommonScriptUrl, data });
 }
+
+// 更新公共脚本状态
+export function updateStatusCommonScript(data: updateCommonScriptStatus) {
+  return MSR.post({ url: UpdateCommonScriptStatusUrl, data });
+}
+
 // 获取公共脚本详情
 export function getCommonScriptDetail(id: string) {
   return MSR.get<CommonScriptItem>({ url: `${GetCommonScriptDetailUrl}/${id}` });

frontend/src/api/requrls/project-management/commonScript.ts

@@ -4,6 +4,8 @@ export const GetCommonScriptPageUrl = '/project/custom/func/page';
 export const AddCommonScriptUrl = '/project/custom/func/add';
 // 更新公共脚本
 export const UpdateCommonScriptUrl = '/project/custom/func/update';
+// 更新公共脚本状态
+export const UpdateCommonScriptStatusUrl = '/project/custom/func/status';
 // 获取公共脚本详情
 export const GetCommonScriptDetailUrl = '/project/custom/func/detail';
 // 删除公共脚本

frontend/src/components/business/ms-common-script/insertCommonScript.vue

@@ -75,10 +75,58 @@
         </TableFilter>
       </template>
       <template #status="{ record }">
-        <MsTag v-if="record.status === 'PASSED'" type="success" theme="light">{{
+        <a-select
-          t('project.commonScript.testsPass')
+          v-if="hasAnyPermission(['PROJECT_CUSTOM_FUNCTION:READ+UPDATE'])"
-        }}</MsTag>
+          v-model:model-value="record.status"
-        <MsTag v-else>{{ t('project.commonScript.draft') }}</MsTag>
+          class="param-input w-[110px]"
+          size="mini"
+          @change="() => handleStatusChange(record)"
+        >
+          <template #label>
+            <commonScriptStatus :status="record.status" />
+          </template>
+          <a-option :key="CommonScriptStatusEnum.PASSED" :value="CommonScriptStatusEnum.PASSED">
+            <commonScriptStatus :status="CommonScriptStatusEnum.PASSED" />
+          </a-option>
+          <a-option :key="CommonScriptStatusEnum.DRAFT" :value="CommonScriptStatusEnum.DRAFT">
+            <commonScriptStatus :status="CommonScriptStatusEnum.DRAFT" />
+          </a-option>
+        </a-select>
+        <commonScriptStatus v-else :status="record.status" />
+      </template>
+      <template #statusFilter="{ columnConfig }">
+        <a-trigger
+          v-model:popup-visible="statusFilterVisible"
+          trigger="click"
+          @popup-visible-change="handleFilterHidden"
+        >
+          <MsButton type="text" class="arco-btn-text--secondary ml-[10px]" @click="statusFilterVisible = true">
+            {{ t(columnConfig.title as string) }}
+            <icon-down :class="statusFilterVisible ? 'text-[rgb(var(--primary-5))]' : ''" />
+          </MsButton>
+          <template #content>
+            <div class="arco-table-filters-content">
+              <div class="ml-[6px] flex items-center justify-start px-[6px] py-[2px]">
+                <a-checkbox-group v-model:model-value="statusFilters" direction="vertical" size="small">
+                  <a-checkbox :key="CommonScriptStatusEnum.PASSED" :value="CommonScriptStatusEnum.PASSED">
+                    <commonScriptStatus :status="CommonScriptStatusEnum.PASSED" />
+                  </a-checkbox>
+                  <a-checkbox :key="CommonScriptStatusEnum.DRAFT" :value="CommonScriptStatusEnum.DRAFT">
+                    <commonScriptStatus :status="CommonScriptStatusEnum.DRAFT" />
+                  </a-checkbox>
+                </a-checkbox-group>
+              </div>
+              <div class="filter-button">
+                <a-button size="mini" class="mr-[8px]" @click="resetStatusFilter">
+                  {{ t('common.reset') }}
+                </a-button>
+                <a-button type="primary" size="mini" @click="handleFilterHidden(false)">
+                  {{ t('system.orgTemplate.confirm') }}
+                </a-button>
+              </div>
+            </div>
+          </template>
+        </a-trigger>
       </template>
       <template #enable="{ record }">
         <MsTag v-if="record.enable" type="success" theme="light">{{ t('project.commonScript.testsPass') }}</MsTag>
@@ -100,6 +148,7 @@
 <script setup lang="ts">
   import { defineModel, ref } from 'vue';
 
+  import MsButton from '@/components/pure/ms-button/index.vue';
   import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
   import { Language } from '@/components/pure/ms-code-editor/types';
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
@@ -108,21 +157,32 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
   import TableFilter from '@/views/case-management/caseManagementFeature/components/tableFilter.vue';
+  import commonScriptStatus from '@/views/project-management/commonScript/components/commonScriptStatus.vue';
 
   import {
     addOrUpdateCommonScriptReq,
     getCustomFuncColumnOption,
     getInsertCommonScriptPage,
+    updateStatusCommonScript,
   } from '@/api/modules/project-management/commonScript';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
+  import { hasAnyPermission } from '@/utils/permission';
 
   import { BugOptionItem } from '@/models/bug-management';
-  import type { AddOrUpdateCommonScript, ParamsRequestType } from '@/models/projectManagement/commonScript';
+  import type {
+    AddOrUpdateCommonScript,
+    CommonScriptItem,
+    ParamsRequestType,
+  } from '@/models/projectManagement/commonScript';
+  import { CommonScriptStatusEnum } from '@/enums/commonScriptStatusEnum';
 
   import Message from '@arco-design/web-vue/es/message';
   import debounce from 'lodash-es/debounce';
 
+  const statusFilterVisible = ref(false);
+  const statusFilters = ref<string[]>([]);
+
   const appStore = useAppStore();
   const currentProjectId = computed(() => appStore.currentProjectId);
   const AddScriptDrawer = defineAsyncComponent(
@@ -176,10 +236,14 @@
       title: 'project.commonScript.enable',
       dataIndex: 'status',
       slotName: 'status',
+      titleSlotName: 'statusFilter',
       showInTable: true,
       width: 150,
       showDrag: true,
-      showTooltip: true,
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+        sorter: true,
+      },
     },
     {
       title: 'project.commonScript.tags',
@@ -267,6 +331,7 @@
       type: props.scriptLanguage,
       filter: {
         createUser: createUserFilterValue.value,
+        status: statusFilters.value,
       },
     });
     loadList();
@@ -335,7 +400,30 @@
     const res = await getCustomFuncColumnOption(appStore.currentProjectId);
     createUserFilterOptions.value = res.userOption;
   }
-
+  async function handleStatusChange(record: CommonScriptItem) {
+    try {
+      await updateStatusCommonScript({
+        id: record.id,
+        status: record.status,
+        projectId: record.projectId,
+      });
+      Message.success(t('common.updateSuccess'));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+  function resetStatusFilter() {
+    statusFilterVisible.value = false;
+    statusFilters.value = [];
+    initData();
+  }
+  function handleFilterHidden(val: boolean) {
+    if (!val) {
+      statusFilterVisible.value = false;
+      initData();
+    }
+  }
   watch(
     () => props.visible,
     (val) => {
@@ -348,4 +436,19 @@
   );
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+  :deep(.param-input:not(.arco-input-focus, .arco-select-view-focus)) {
+    &:not(:hover) {
+      border-color: transparent !important;
+      .arco-input::placeholder {
+        @apply invisible;
+      }
+      .arco-select-view-icon {
+        @apply invisible;
+      }
+      .arco-select-view-value {
+        color: var(--color-text-brand);
+      }
+    }
+  }
+</style>

frontend/src/models/projectManagement/commonScript.ts

@@ -44,6 +44,13 @@ export interface AddOrUpdateCommonScript {
   result: string;
 }
 
+// 新增或编辑
+export interface updateCommonScriptStatus {
+  id?: string;
+  status: string;
+  projectId: string;
+}
+
 export interface ParamsRequestType {
   contentType: string;
   encode: boolean;

frontend/src/views/project-management/commonScript/index.vue

@@ -39,7 +39,24 @@
         </div>
       </template>
       <template #status="{ record }">
-        <commonScriptStatus :status="record.status" />
+        <a-select
+          v-if="hasAnyPermission(['PROJECT_CUSTOM_FUNCTION:READ+UPDATE'])"
+          v-model:model-value="record.status"
+          class="param-input w-[110px]"
+          size="mini"
+          @change="() => handleStatusChange(record)"
+        >
+          <template #label>
+            <commonScriptStatus :status="record.status" />
+          </template>
+          <a-option :key="CommonScriptStatusEnum.PASSED" :value="CommonScriptStatusEnum.PASSED">
+            <commonScriptStatus :status="CommonScriptStatusEnum.PASSED" />
+          </a-option>
+          <a-option :key="CommonScriptStatusEnum.DRAFT" :value="CommonScriptStatusEnum.DRAFT">
+            <commonScriptStatus :status="CommonScriptStatusEnum.DRAFT" />
+          </a-option>
+        </a-select>
+        <commonScriptStatus v-else :status="record.status" />
       </template>
       <template #statusFilter="{ columnConfig }">
         <a-trigger
@@ -128,6 +145,7 @@
     addOrUpdateCommonScriptReq,
     deleteCommonScript,
     getCommonScriptPage,
+    updateStatusCommonScript,
   } from '@/api/modules/project-management/commonScript';
   import { useI18n } from '@/hooks/useI18n';
   import useModal from '@/hooks/useModal';
@@ -383,10 +401,38 @@
     isEditId.value = record.id as string;
     showScriptDrawer.value = true;
   }
+  async function handleStatusChange(record: CommonScriptItem) {
+    try {
+      await updateStatusCommonScript({
+        id: record.id,
+        status: record.status,
+        projectId: record.projectId,
+      });
+      Message.success(t('common.updateSuccess'));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
 
   onMounted(() => {
     initData();
   });
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+  :deep(.param-input:not(.arco-input-focus, .arco-select-view-focus)) {
+    &:not(:hover) {
+      border-color: transparent !important;
+      .arco-input::placeholder {
+        @apply invisible;
+      }
+      .arco-select-view-icon {
+        @apply invisible;
+      }
+      .arco-select-view-value {
+        color: var(--color-text-brand);
+      }
+    }
+  }
+</style>

frontend/src/views/setting/organization/template/locale/en-US.ts

@@ -64,6 +64,7 @@ export default {
   'system.orgTemplate.optionsIdTip': 'The option ID cannot be empty',
   'system.orgTemplate.updateTip': 'Are you sure to update {name}?',
   'system.orgTemplate.updateDescription': 'After the update, use {type} will be an update of the field',
+  'system.orgTemplate.confirm': 'Confirm',
   'system.orgTemplate.columnTemplateName': 'Template name',
   'system.orgTemplate.copy': 'Copy',
   'system.orgTemplate.defaultValue': 'Default value',