feat(项目设置): 应用管理同步缺陷对接form-create

frontend/src/api/modules/setting/serviceIntegration.ts

@@ -38,6 +38,6 @@ export function postValidate(data: any, pluginId: string) {
 export function configScript(pluginId: string) {
   return MSR.get({ url: ConfigServiceScriptUrl, params: pluginId });
 }
-export function getLogo(pluginId: string) {
-  return MSR.get({ url: getLogoUrl, params: pluginId });
+export function getLogo(pluginId: string, params: { imagePath: string }) {
+  return MSR.get({ url: `${getLogoUrl}${pluginId}`, params, responseType: 'blob' }, { isReturnNativeResponse: true });
 }

frontend/src/api/requrls/setting/serviceIntegration.ts

@@ -5,4 +5,4 @@ export const ResetServiceUrl = '/service/integration/delete';
 export const GetValidateServiceUrl = '/service/integration/validate';
 export const PostValidateServiceUrl = '/service/integration/validate/';
 export const ConfigServiceScriptUrl = '/service/integration/script';
-export const getLogoUrl = '/plugin/image';
+export const getLogoUrl = '/plugin/image/';

frontend/src/components/pure/ms-form-create/comp/jiraKey.vue

@@ -12,7 +12,13 @@
         {{ null }}
       </template>
       <template #content>
-        <img class="h-[247px] w-[398px]" :src="props.instructionsIcon" />
+        <img
+          class="h-[247px] w-[398px]"
+          :style="{
+            border: '1px solid red',
+          }"
+          :src="previewIcon"
+        />
       </template>
       <span class="cursor-pointer text-[rgb(var(--primary-5))]">{{ t('project.menu.preview') }}</span>
     </a-popover>
@@ -20,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+  import { getLogo } from '@/api/modules/setting/serviceIntegration';
   import { useI18n } from '@/hooks/useI18n';
 
   const attrs = useAttrs();
@@ -28,11 +35,21 @@
     modelValue: string;
     instructionsIcon: string;
   }>();
+  const previewIcon = ref<string>('');
+
   const emit = defineEmits<{
     (event: 'update:modelValue', value: string): void;
   }>();
 
   const { t } = useI18n();
+  onMounted(() => {
+    const pluginId = sessionStorage.getItem('platformKey');
+    if (!props.instructionsIcon || !pluginId) return;
+    getLogo(pluginId, { imagePath: props.instructionsIcon }).then((res) => {
+      const { data } = res;
+      previewIcon.value = URL.createObjectURL(new Blob([data]));
+    });
+  });
 </script>
 
 <style scoped></style>

frontend/src/components/pure/ms-form-create/form-create.ts

@@ -158,8 +158,7 @@ export const JIRAKEY = {
   title: '',
   value: '',
   props: {
-    moduleValue: '',
-    placeholder: t('formCreate.PleaseEnter'),
+    modelValue: '',
     instructionsIcon: '',
   },
 };

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

@@ -16,7 +16,7 @@
     <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"
+          v-model="form.PLATFORM_KEY"
           allow-clear
           :disabled="platformDisabled"
           :options="platformOption"
@@ -29,6 +29,7 @@
       <!-- form-create -->
       <MsFormCreate
         v-if="platformRules && platformRules.length"
+        v-model:api="fApi"
         :form-rule="platformRules"
         :form-create-key="FormCreateKeyEnum.PROJECT_DEFECT_SYNC_TEMPLATE"
       />
@@ -76,9 +77,12 @@
         </a-select>
       </a-form-item>
     </a-form>
-    <template #footerLeft>
+    <template v-if="platformOption.length" #footerLeft>
       <div class="flex flex-row items-center gap-[4px]">
-        <a-switch size="small" />
+        <a-tooltip v-if="okDisabled" :content="t('project.menu.defect.enableAfterConfig')">
+          <a-switch size="small" disabled />
+        </a-tooltip>
+        <a-switch v-else v-model="form.SYNC_ENABLE" size="small" />
         <span class="text-[var(--color-text-1)]">
           {{ t('project.menu.status') }}
         </span>
@@ -99,7 +103,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue';
+  import { FormInstance, Message } from '@arco-design/web-vue';
 
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsFormCreate from '@/components/pure/ms-form-create/form-create.vue';
@@ -124,10 +128,10 @@
   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' },
+    { label: '0 0 0/1 * * ?', extra: '（每隔1小时）', value: '0 0 0/1 * * ?' },
+    { label: '0 0 0/6 * * ?', extra: '（每隔6小时）', value: '0 0 0/6 * * ?' },
+    { label: '0 0 0/12 * * ?', extra: '（每隔12小时）', value: '0 0 0/12 * * ?' },
+    { label: '0 0 0 * * ?', extra: '（每隔一天）', value: '0 0 0 * * ?' },
   ]);
 
   const appStore = useAppStore();
@@ -140,18 +144,14 @@
   const platformRules = ref<FormItem[]>([]);
 
   const form = reactive({
-    platformKey: '',
-    MECHANISM: '', // 同步机制
+    PLATFORM_KEY: '',
+    MECHANISM: 'increment', // 同步机制
     SYNC_ENABLE: 'false', // 同步开关
-    CRON_EXPRESSION: '', // 同步频率
-    organizationId: '',
-    projectKey: '',
-    projectId: '',
-    azureId: '',
-    bugType: '',
+    CRON_EXPRESSION: '0 0 0/1 * * ?', // 同步频率
   });
 
-  const okDisabled = computed(() => !form.platformKey);
+  const okDisabled = computed(() => !form.PLATFORM_KEY);
+  const fApi = ref<any>({});
 
   const emit = defineEmits<{
     (e: 'cancel', shouldSearch: boolean): void;
@@ -159,12 +159,15 @@
 
   const handleCancel = (shouldSearch: boolean) => {
     emit('cancel', shouldSearch);
+    sessionStorage.removeItem('platformKey');
+    fApi.value.clearValidateState();
   };
   const handlePlatformChange = async (value: SelectValue) => {
     try {
       if (value) {
         const res = await getPlatformInfo(value as string, MenuEnum.bugManagement);
         platformRules.value = res.formItems;
+        sessionStorage.setItem('platformKey', value as string);
       } else {
         platformRules.value = [];
       }
@@ -175,13 +178,10 @@
   };
 
   const handleConfirm = async () => {
-    await formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
-      if (errors) {
-        return;
-      }
+    await fApi.value?.submit(async (formData: FormData) => {
       try {
         okLoading.value = true;
-        await postSaveDefectSync(form, currentProjectId.value);
+        await postSaveDefectSync({ ...form, BUG_PLATFORM_CONFIG: formData }, currentProjectId.value);
         Message.success(t('common.createSuccess'));
         handleCancel(true);
       } catch (error) {

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

@@ -67,6 +67,8 @@ export default {
   'project.menu.defect.enableTip': '开启：平台创建的缺陷同步至第三方项目管理平台',
   'project.menu.defect.closeTip': '关闭：平台创建的缺陷则无法同步至第三方项目管理平台',
   'project.menu.defect.customLabel': '自定义频率',
+  'project.menu.defect.enableAfterConfig': '配置第三方信息后可开启',
+  // 误报规则
   'project.menu.rule.name': '名称',
   'project.menu.rule.enable': '状态',
   'project.menu.rule.label': '标签',