feat(项目管理): 菜单管理同步缺陷接口对接

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

@@ -1,7 +1,7 @@
 import MSR from '@/api/http/index';
 import * as Url from '@/api/requrls/project-management/menuManagement';
 
-import { CommonList, TableQueryParams } from '@/models/common';
+import { TableQueryParams } from '@/models/common';
 import type {
   MenuTableConfigItem,
   MenuTableListItem,
@@ -10,15 +10,8 @@ import type {
 } from '@/models/projectManagement/menuManagement';
 import { MenuEnum } from '@/enums/commonEnum';
 
-export async function postTabletList(params: TableQueryParams): Promise<CommonList<MenuTableListItem>> {
+export async function postTabletList(params: TableQueryParams) {
-  const list = await MSR.get<MenuTableListItem[]>({ url: `${Url.getMenuListUrl}${params.projectId}` });
+  return MSR.get<MenuTableListItem[]>({ url: `${Url.getMenuListUrl}${params.projectId}` });
-  const result: CommonList<MenuTableListItem> = {
-    total: list.length,
-    list,
-    pageSize: 10,
-    current: 1,
-  };
-  return Promise.resolve(result);
 }
 
 // 获取资源池
@@ -100,3 +93,19 @@ export function getConfigByMenuItem(data: MenuTableListParams) {
   }
   return MSR.post<MenuTableConfigItem>({ url: `${Url.getConfigByMenuTypeUrl}${suffix}`, data });
 }
+
+/**
+ * 获取平台的下拉选项
+ * @param organizationId 组织id
+ * @returns
+ */
+export function getPlatformOptions(organizationId: string, type: MenuEnum) {
+  if (type === MenuEnum.bugManagement) {
+    return MSR.get<PoolOption[]>({ url: `${Url.getPlatformOptionUrlByBug}${organizationId}` });
+  }
+  return MSR.get<PoolOption[]>({ url: `${Url.getPlatformOptionUrlByCase}${organizationId}` });
+}
+
+export function postSaveDefectSync(data: MenuTableConfigItem, projectId: string) {
+  return MSR.post<MenuTableListItem>({ url: `${Url.postSyncBugConfigUrl}${projectId}`, data });
+}

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

@@ -2,3 +2,9 @@ export const getConfigByMenuTypeUrl = '/project/application/';
 export const updateConfigByMenuTypeUrl = '/project/application/update/';
 // 获取表格最外层的数据
 export const getMenuListUrl = '/project/application/module-setting/';
+// 根据组织id获取bug平台下拉选项
+export const getPlatformOptionUrlByBug = '/project/application/bug/platform/';
+// 根据组织id获取case平台下拉选项
+export const getPlatformOptionUrlByCase = '/project/application/case/platform/';
+// 缺陷管理-同步缺陷配置
+export const postSyncBugConfigUrl = '/project/application/update/bug/sync/';

frontend/src/components/pure/ms-drawer/index.vue

@@ -53,7 +53,7 @@
             <a-button v-if="showContinue" type="secondary" :loading="props.okLoading" @click="handleContinue">
               {{ t(props.saveContinueText || 'ms.drawer.saveContinue') }}
             </a-button>
-            <a-button type="primary" :loading="props.okLoading" @click="handleOk">
+            <a-button type="primary" :disabled="okDisabled" :loading="props.okLoading" @click="handleOk">
               {{ t(props.okText || 'ms.drawer.ok') }}
             </a-button>
           </div>
@@ -83,6 +83,7 @@
     mask?: boolean; // 是否显示遮罩
     showSkeleton?: boolean; // 是否显示骨架屏
     okLoading?: boolean;
+    okDisabled?: boolean;
     okText?: string;
     cancelText?: string;
     saveContinueText?: string;

frontend/src/components/pure/ms-table/useTable.ts

@@ -24,7 +24,7 @@ export default function useTableProps<T>(
   loadListFunc: (v?: TableQueryParams | any) => Promise<CommonList<MsTableDataItem<T>> | MsTableDataItem<T>>,
   props?: Partial<MsTableProps<T>>,
   // 数据处理的回调函数
-  dataTransform?: (item: T) => (TableData & T) | any,
+  dataTransform?: (item: TableData) => (TableData & T) | any,
   // 编辑操作的保存回调函数
   saveCallBack?: (item: T) => Promise<any>
 ) {

frontend/src/components/pure/ms-time-selector/MsTimeSelector.vue

@@ -10,7 +10,14 @@
       @blur="handleEnter(true)"
     >
       <template #suffix>
-        <a-select v-model="current.type" size="small" class="max-w-[64px]" :options="option"> </a-select>
+        <a-select
+          v-model="current.type"
+          size="small"
+          class="max-w-[64px]"
+          :options="option"
+          :trigger-props="{ autoFitPopupMinWidth: true }"
+          @change="handleEnter(false)"
+        />
       </template>
     </a-input-number>
   </div>
@@ -50,9 +57,8 @@
     if (isBlur) {
       if (!isEnter.value) {
         // 不是由Enter触发的blur
-        const { type, value } = parseValue(props.modelValue || props.defaultValue);
+        const { value } = parseValue(props.modelValue || props.defaultValue);
         current.value = value;
-        current.type = type;
       }
       isEnter.value = false;
     } else {

frontend/src/views/project-management/projectAndPermission/menuManagement/components/defectSync.vue

@@ -1,3 +1,200 @@
-<template> todo </template>
+<template>
+  <MsDrawer
+    v-model:visible="currentVisible"
+    :title="t('project.menu.BUG_SYNC')"
+    :destroy-on-close="true"
+    :closable="true"
+    :mask-closable="false"
+    :get-container="false"
+    :body-style="{ padding: '0px' }"
+    :width="680"
+    :ok-loading="okLoading"
+    :ok-disabled="okDisabled"
+    @cancel="handleCancel(false)"
+    @confirm="handleConfirm"
+  >
+    <a-form ref="formRef" class="rounded-[4px]" :model="form" layout="vertical">
+      <a-form-item field="platformKey" :label="t('project.menu.platformLabel')">
+        <a-select
+          v-model="form.platformKey"
+          allow-clear
+          :disabled="platformDisabled"
+          :options="platformOption"
+          :placeholder="platformDisabled ? t('project.menu.platformPlaceholder') : ''"
+          :field-names="{ label: 'name', value: 'id' }"
+        >
+        </a-select>
+      </a-form-item>
+      <!-- jira start -->
+      <a-form-item field="projectKey" :label="t('project.menu.projectKey')">
+        <a-input v-model="form.projectKey" :placeholder="t('project.menu.pleaseInputJiraKey')" />
+        <template #extra>
+          <div class="flex flex-row items-center gap-[4px]">
+            <span class="text-[var(--color-text-4)]">{{ t('project.menu.howGetJiraKey') }}</span>
+            <span class="cursor-pointer text-[rgb(var(--primary-5))]">{{ t('project.menu.preview') }}</span>
+          </div>
+        </template>
+      </a-form-item>
+      <a-form-item field="defectType" :label="t('project.menu.defectType')">
+        <a-select :options="jiraDefectOption" :field-names="{ value: 'id', label: 'name' }"></a-select>
+      </a-form-item>
+      <!-- jira end -->
+      <a-form-item field="organizationId" :label="t('project.menu.organizationId')">
+        <a-input v-model="form.organizationId" />
+      </a-form-item>
+      <a-form-item field="projectId" :label="t('project.menu.projectId')">
+        <a-input v-model="form.projectId" />
+      </a-form-item>
+      <a-form-item field="azureId" :label="t('project.menu.azureId')">
+        <a-input v-model="form.azureId" />
+      </a-form-item>
+      <a-form-item field="MECHANISM" :label="t('project.menu.syncMechanism')">
+        <a-space>
+          <a-radio-group v-model="form.MECHANISM">
+            <a-radio value="increment">
+              <div class="flex flex-row items-center gap-[4px]">
+                <span class="text-[var(--color-text-1)]">{{ t('project.menu.MECHANISM') }}</span>
+                <a-tooltip :content="t('project.menu.MECHANISM_TIP')" position="right">
+                  <div>
+                    <MsIcon class="ml-[4px] text-[var(--color-text-4)]" type="icon-icon-maybe_outlined" />
+                  </div>
+                </a-tooltip>
+              </div>
+            </a-radio>
+            <a-radio value="full">
+              <div class="flex flex-row items-center gap-[4px]">
+                <span class="text-[var(--color-text-1)]">{{ t('project.menu.MECHANISM') }}</span>
+                <a-tooltip :content="t('project.menu.MECHANISM_TIP')" position="right">
+                  <div>
+                    <MsIcon class="ml-[4px] text-[var(--color-text-4)]" type="icon-icon-maybe_outlined" />
+                  </div>
+                </a-tooltip>
+              </div>
+            </a-radio>
+          </a-radio-group>
+        </a-space>
+      </a-form-item>
+      <a-form-item field="CRON_EXPRESSION" :label="t('project.menu.CRON_EXPRESSION')">
+        <a-select v-model="form.CRON_EXPRESSION">
+          <a-option v-for="data in frequencyOption" :key="data.value" :value="data.value">
+            <span class="text-[var(--color-text-1)]">
+              {{ data.label }}
+            </span>
+            <span v-if="data.extra" class="text-[var(--color-text-4)]"> {{ data.extra }} </span>
+          </a-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+    <template #footerLeft>
+      <div class="flex flex-row items-center gap-[4px]">
+        <a-switch size="small" />
+        <span class="text-[var(--color-text-1)]">
+          {{ t('project.menu.status') }}
+        </span>
+        <a-tooltip :content="t('project.menu.API_ERROR_REPORT_RULE_TIP')" position="right">
+          <div>
+            <MsIcon class="ml-[4px] text-[var(--color-text-4)]" type="icon-icon-maybe_outlined" />
+          </div>
+        </a-tooltip>
+      </div>
+    </template>
+  </MsDrawer>
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue';
+
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+
+  import { getPlatformOptions, postSaveDefectSync } from '@/api/modules/project-management/menuManagement';
+  import { useI18n } from '@/hooks/useI18n';
+  import { useAppStore } from '@/store';
+
+  import { PoolOption } from '@/models/projectManagement/menuManagement';
+  import { MenuEnum } from '@/enums/commonEnum';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    visible: boolean;
+  }>();
+  const currentVisible = ref<boolean>(props.visible);
+  const platformOption = ref<PoolOption[]>([]);
+  const frequencyOption = ref([
+    { label: '0 0 0/1 * * ?', extra: '（每隔1小时）', value: '1H' },
+    { label: '0 0 0/6 * * ?', extra: '（每隔6小时）', value: '6H' },
+    { label: '0 0 0/12 * * ?', extra: '（每隔12小时）', value: '12H' },
+    { label: '0 0 0 * * ?', extra: '（每隔一天）', value: '1D' },
+  ]);
+  const jiraDefectOption = ref<PoolOption[]>([]);
+
+  const appStore = useAppStore();
+  const currentProjectId = computed(() => appStore.currentProjectId);
+  const currentOrgId = computed(() => appStore.currentOrgId);
+  const platformDisabled = computed(() => platformOption.value.length === 0);
+  const okLoading = ref(false);
+
+  const formRef = ref<FormInstance>();
+
+  const form = reactive({
+    platformKey: '',
+    MECHANISM: '', // 同步机制
+    SYNC_ENABLE: 'false', // 同步开关
+    CRON_EXPRESSION: '', // 同步频率
+    organizationId: '',
+    projectKey: '',
+
+    projectId: '',
+    azureId: '',
+    bugType: '',
+  });
+
+  const okDisabled = computed(() => !form.platformKey);
+
+  const emit = defineEmits<{
+    (e: 'cancel', shouldSearch: boolean): void;
+  }>();
+
+  const handleCancel = (shouldSearch: boolean) => {
+    emit('cancel', shouldSearch);
+  };
+
+  const handleConfirm = async () => {
+    await formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        return;
+      }
+      try {
+        okLoading.value = true;
+        await postSaveDefectSync(form, currentProjectId.value);
+        Message.success(t('common.createSuccess'));
+        handleCancel(true);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      } finally {
+        okLoading.value = false;
+      }
+    });
+  };
+
+  const initPlatformOption = async () => {
+    try {
+      const res = await getPlatformOptions(currentOrgId.value, MenuEnum.bugManagement);
+      if (res) {
+        platformOption.value = res;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  watch(
+    () => props.visible,
+    (val) => {
+      currentVisible.value = val;
+      if (val) {
+        initPlatformOption();
+      }
+    }
+  );
+</script>

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

@@ -33,7 +33,6 @@ export default {
   'project.menu.CASE_RE_REVIEW': '重新提审',
   'project.menu.CASE_RELATED': '关联需求',
   'project.menu.BUG_SYNC': '同步缺陷',
-  'project.menu.CRON_EXPRESSION': '同步频率',
   'project.menu.SYNC_ENABLE': '状态',
   'project.menu.MECHANISM': '接口测试待更新同步规则',
   'project.menu.sd': '同步缺陷',
@@ -48,4 +47,19 @@ export default {
   'project.menu.row7': '当接口定义发生变更后，自动同步接口CASE',
   'project.menu.notConfig': '未配置第三方信息，点击',
   'project.menu.configure': '进行配置',
+  'project.menu.status': '状态',
+  'project.menu.incrementalSync': '增量同步',
+  'project.menu.fullSync': '全量同步',
+  'project.menu.platformPlaceholder': '暂未集成第三方平台，请联系组织管理员集成',
+  'project.menu.platformLabel': '第三方项目管理平台',
+  'project.menu.syncMechanism': '同步机制',
+  'project.menu.CRON_EXPRESSION': '同步频率',
+  'project.menu.projectKey': '项目 Key',
+  'project.menu.projectId': '项目 ID',
+  'project.menu.organizationId': '组织 ID',
+  'project.menu.azureId': 'Azure 过滤 ID',
+  'project.menu.defectType': '缺陷类型',
+  'project.menu.howGetJiraKey': '如何获取JIRA 项目 key ',
+  'project.menu.preview': '预览',
+  'project.menu.pleaseInputJiraKey': '请输入 JIRA 项目 key',
 };

frontend/src/views/project-management/projectAndPermission/menuManagement/menuManagement.vue

@@ -39,7 +39,9 @@
       <template v-if="record.type === 'BUG_SYNC'">
         <!-- 同步缺陷 -->
         <span>{{ t('project.menu.row2') }}</span>
-        <div class="ml-[8px] text-[rgb(var(--primary-7))]" @click="showDefectDrawer">{{ t('project.menu.sd') }}</div>
+        <div class="ml-[8px] cursor-pointer text-[rgb(var(--primary-7))]" @click="showDefectDrawer">{{
+          t('project.menu.sd')
+        }}</div>
       </template>
       <div v-if="record.type === 'CASE_PUBLIC'">
         <!-- 用例 公共用例库 -->
@@ -194,8 +196,6 @@
         v-if="record.children"
         v-model="record.moduleEnable"
         size="small"
-        checked-value="true"
-        unchecked-value="false"
         @change="(v: boolean | string| number) => handleMenuStatusChange(record.module,v as boolean,record.module)"
       />
       <!-- 同步缺陷状态 -->
@@ -303,18 +303,7 @@
       />
     </template>
   </MsBaseTable>
-  <MsDrawer
+  <DefectSync v-model:visible="defectDrawerVisible" @cancel="defectDrawerVisible = false" />
-    v-model:visible="defectDrawerVisible"
-    :title="t('project.menu.BUG_SYNC')"
-    :destroy-on-close="true"
-    :closable="true"
-    :mask-closable="false"
-    :get-container="false"
-    :body-style="{ padding: '0px' }"
-    :width="400"
-  >
-    <DefectSync />
-  </MsDrawer>
 </template>
 
 <script setup lang="ts">
@@ -323,7 +312,6 @@
    */
   import { Message, TableData } from '@arco-design/web-vue';
 
-  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
@@ -341,12 +329,7 @@
   import { useI18n } from '@/hooks/useI18n';
   import { useAppStore } from '@/store';
 
-  import {
+  import { MenuTableConfigItem, PoolOption, SelectValue } from '@/models/projectManagement/menuManagement';
-    MenuTableConfigItem,
-    MenuTableListItem,
-    PoolOption,
-    SelectValue,
-  } from '@/models/projectManagement/menuManagement';
   import { MenuEnum } from '@/enums/commonEnum';
 
   const appStore = useAppStore();
@@ -384,6 +367,7 @@
       dataIndex: 'module',
       slotName: 'module',
       width: 221,
+      headerCellClass: 'pl-[16px]',
     },
     {
       title: 'project.menu.description',
@@ -400,7 +384,7 @@
     },
   ];
 
-  const getChildren = (record: MenuTableListItem) => {
+  const getChildren = (record: TableData) => {
     let children: MenuTableConfigItem[] = [];
     switch (record.module) {
       case MenuEnum.workstation: {
@@ -515,7 +499,7 @@
       showExpand: true,
       emptyDataShowLine: false,
     },
-    (item) => {
+    (item: TableData) => {
       const children = getChildren(item);
       return { ...item, children };
     }

frontend/src/views/setting/system/user/index.vue

@@ -286,8 +286,8 @@
     },
     (record) => ({
       ...record,
-      organizationList: record.organizationList.filter((e) => e),
+      organizationList: record.organizationList.filter((e: any) => e),
-      userRoleList: record.userRoleList.filter((e) => e),
+      userRoleList: record.userRoleList.filter((e: any) => e),
     })
   );