feat(环境管理): 环境管理环境组接口对接

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

@@ -3,13 +3,15 @@ import { FileItem } from '@arco-design/web-vue';
 import MSR from '@/api/http/index';
 import * as envURL from '@/api/requrls/project-management/envManagement';
 
+import { DragCase } from '@/models/caseManagement/featureCase';
 import type {
+  DragParam,
   EnvDetailItem,
   EnvGroupListItem,
-  EnvGroupProjectListItem,
   EnvListItem,
   EnvPluginListItem,
   GlobalParams,
+  GroupItem,
   ProjectOptionItem,
 } from '@/models/projectManagement/environmental';
 import { OptionsItem } from '@/models/setting/log';
@@ -56,24 +58,27 @@ export function getDetailEnv(id: string) {
 export function deleteEnv(data: EnvListItem) {
   return MSR.post<EnvListItem>({ url: envURL.deleteEnvUrl, data });
 }
-export function groupUpdateEnv(data: EnvListItem) {
+export function groupUpdateEnv(data: any) {
   return MSR.post<EnvListItem>({ url: envURL.groupUpdateEnvUrl, data });
 }
 export function groupListEnv(data: { projectId: string; keyword: string }) {
   return MSR.post<EnvListItem[]>({ url: envURL.groupListEnvUrl, data });
 }
-export function groupEditPosEnv(data: EnvGroupListItem) {
+export function groupEditPosEnv(data: DragParam) {
   return MSR.post<EnvListItem>({ url: envURL.groupEditPosEnvUrl, data });
 }
-export function groupAddEnv(data: EnvGroupListItem) {
+export function groupAddEnv(data: any) {
   return MSR.post<EnvListItem>({ url: envURL.groupAddEnvUrl, data });
 }
+export function deleteEnvGroup(id: string) {
+  return MSR.get<EnvListItem>({ url: envURL.groupDeleteEnvUrl + id });
+}
 export function getEnvPlugin(projectId: string) {
   return MSR.get<EnvPluginListItem[]>({ url: envURL.getEnvPluginUrl + projectId });
 }
 // 项目管理-项目组-详情
-export function groupDetailEnv(id: string) {
+export function getGroupDetailEnv(id: string) {
-  return MSR.get<EnvDetailItem>({ url: `${envURL.groupDetailEnvUrl}${id}` });
+  return MSR.get<GroupItem>({ url: `${envURL.groupDetailEnvUrl}${id}` });
 }
 export function groupDeleteEnv(data: EnvListItem) {
   return MSR.post<EnvListItem>({ url: envURL.groupDeleteEnvUrl, data });

frontend/src/enums/envEnum.ts

@@ -7,4 +7,5 @@ export enum EnvAuthTypeEnum {
   GLOBAL = 'GLOBAL', // 全局参数
   ENVIRONMENT = 'ENVIRONMENT', // 环境
   ENVIRONMENT_PARAM = 'ENVIRONMENT_PARAM', // 环境参数
+  ENVIRONMENT_GROUP = 'ENVIRONMENT_GROUP', // 环境组
 }

frontend/src/models/caseManagement/featureCase.ts

@@ -350,9 +350,10 @@ export interface ChangeHistoryItem {
   createUserName: string;
   versionName: string;
 }
-//取消前后置依赖关系
+
+// 取消前后置依赖关系
 export interface DeleteDependencyParams {
   id: string;
   caseId: string;
   type: string;
-}
+}

frontend/src/models/projectManagement/environmental.ts

@@ -89,3 +89,23 @@ export interface EnvPluginListItem {
   pluginId: string;
   script: EnvPluginScript;
 }
+
+export interface EnvGroupProjectItem {
+  projectId: string;
+  environmentId: string;
+}
+
+export interface GroupItem {
+  id: string;
+  name: string;
+  description: string;
+  projectId: string;
+  envGroupProject: EnvGroupProjectItem[];
+}
+
+export interface DragParam {
+  projectId: string;
+  targetId: string;
+  moveMode: string;
+  moveId: string;
+}

frontend/src/store/modules/setting/useProjectEnvStore.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import localforage from 'localforage';
 
-import { getDetailEnv, getGlobalParamDetail, groupDetailEnv } from '@/api/modules/project-management/envManagement';
+import { getDetailEnv, getGlobalParamDetail } from '@/api/modules/project-management/envManagement';
 import { useAppStore } from '@/store';
 import { isArraysEqualWithOrder } from '@/utils/equal';
 
@@ -21,8 +21,6 @@ const useProjectEnvStore = defineStore(
     const currentEnvDetailInfo = ref<EnvDetailItem>({ projectId: '', name: '', config: {} }); // 当前选中的环境详情
     const backupEnvDetailInfo = ref<EnvDetailItem>({ projectId: '', name: '', config: {} }); // 当前选中的环境详情-备份
     const allParamDetailInfo = ref<GlobalParams>(); // 全局参数详情
-    // 当前选中的项目组详情
-    const groupDetailInfo = ref<EnvDetailItem>();
     const httpNoWarning = ref(true);
     const getHttpNoWarning = computed(() => httpNoWarning.value);
 
@@ -62,16 +60,6 @@ const useProjectEnvStore = defineStore(
         console.log(e);
       }
     }
-    // 初始化项目组详情
-    async function initGroupDetail() {
-      try {
-        const id = currentGroupId.value;
-        groupDetailInfo.value = await groupDetailEnv(id);
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.log(e);
-      }
-    }
 
     // 初始化内容tab列表
     async function initContentTabList(arr: ContentTabItem[]) {
@@ -127,13 +115,11 @@ const useProjectEnvStore = defineStore(
       allParamDetailInfo,
       currentEnvDetailInfo,
       backupEnvDetailInfo,
-      groupDetailInfo,
       setCurrentId,
       setCurrentGroupId,
       setHttpNoWarning,
       setAllParamDetailInfo,
       initEnvDetail,
-      initGroupDetail,
       initContentTabList,
       getContentTabList,
       setContentTabList,

frontend/src/views/api-test/components/paramTable.vue

@@ -338,15 +338,16 @@
       <span v-else></span>
     </template>
     <template #host="{ record }">
-      <span v-if="record.host.length === 1" class="text-[var(--color-text-4)]">{{ record.host }}</span>
+      <!-- TODO: 等接口 -->
+      <!-- <span v-if="record.host.length === 1" class="text-[var(--color-text-4)]">{{ record.host }}</span>
       <span
         v-if="record.host.length > 1"
         class="cursor-pointer text-[var(--color-text-4)]"
         @click="showHostModal(record)"
       >
         {{ t('common.more') }}
-      </span>
+      </span> -->
-      <span v-else></span>
+      <span v-if="record.host">{{ record.host }}</span>
     </template>
     <template #operation="{ record, rowIndex, columnConfig }">
       <div class="flex flex-row items-center" :class="{ 'justify-end': columnConfig.align === 'right' }">

frontend/src/views/project-management/environmental/components/EnvGroupBox.vue

@@ -36,6 +36,7 @@
           v-model:params="innerParams"
           :show-setting="false"
           :columns="columns"
+          :selectable="false"
           @change="handleParamTableChange"
         />
       </div>
@@ -53,14 +54,24 @@
 </template>
 
 <script lang="ts" setup async>
+  import { ValidatedError } from '@arco-design/web-vue';
+
   import paramsTable, { type ParamTableColumn } from '@/views/api-test/components/paramTable.vue';
 
+  import { getGroupDetailEnv, groupAddEnv, groupUpdateEnv } from '@/api/modules/project-management/envManagement';
   import { useI18n } from '@/hooks/useI18n';
-  import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
+  import { useAppStore } from '@/store';
+  import useProjectEnvStore, { NEW_ENV_GROUP } from '@/store/modules/setting/useProjectEnvStore';
+
+  import { EnvListItem } from '@/models/projectManagement/environmental';
 
   const { t } = useI18n();
+  const appStore = useAppStore();
 
   const envGroupForm = ref();
+  const emit = defineEmits<{
+    (e: 'saveOrUpdate', id: string): void;
+  }>();
   const form = reactive({
     name: '',
     description: '',
@@ -98,24 +109,71 @@
     },
   ]);
 
-  const innerParams = ref<any[]>([]);
+  const innerParams = ref<Record<string, any>[]>([]);
 
   const canSave = ref(true);
 
   const handleReset = () => {
     envGroupForm.value?.resetFields();
+    innerParams.value = [];
+    emit('saveOrUpdate', '');
   };
 
+  const initDetail = async (id: string) => {
+    if (id === NEW_ENV_GROUP) {
+      form.name = '';
+      form.description = '';
+      innerParams.value = [];
+      return;
+    }
+    const detail = await getGroupDetailEnv(id);
+    if (detail) {
+      form.name = detail.name;
+      form.description = detail.description;
+      innerParams.value = detail.envGroupProject;
+    }
+  };
   const handleSave = () => {
-    envGroupForm.value?.validate(async (valid) => {
+    envGroupForm.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
-      if (valid) {
+      if (errors) {
-        console.log('form', form);
+        return;
+      }
+      try {
+        const id = store.currentGroupId === NEW_ENV_GROUP ? undefined : store.currentGroupId;
+        const envGroupProject = innerParams.value.filter((item) => item.projectId && item.environmentId);
+        if (!envGroupProject.length) {
+          return;
+        }
+        const params = {
+          id,
+          name: form.name,
+          description: form.description,
+          projectId: appStore.currentProjectId,
+          envGroupProject,
+        };
+        let res: EnvListItem;
+        if (id) {
+          res = await groupUpdateEnv(params);
+          initDetail(res.id);
+        } else {
+          res = await groupAddEnv(params);
+        }
+        emit('saveOrUpdate', res.id);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
       }
     });
   };
+
   function handleParamTableChange(resultArr: any[]) {
     innerParams.value = [...resultArr];
   }
+  watchEffect(() => {
+    if (store.currentGroupId) {
+      initDetail(store.currentGroupId);
+    }
+  });
 </script>
 
 <style lang="less" scoped>

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

@@ -121,7 +121,12 @@
             </div>
             <!-- 环境组list-->
             <div v-if="evnGroupList.length">
-              <VueDraggable v-model="evnGroupList" ghost-class="ghost" handle=".drag-handle">
+              <VueDraggable
+                v-model="evnGroupList"
+                ghost-class="ghost"
+                handle=".drag-handle"
+                @end="handleEnvGroupPosChange"
+              >
                 <div
                   v-for="element in evnGroupList"
                   :key="element.id"
@@ -153,8 +158,8 @@
                             />
                           </MsButton>
                           <MsMoreAction
-                            :list="envMoreAction"
+                            :list="groupMoreAction"
-                            @select="(value) => handleMoreAction(value, element.id, EnvAuthTypeEnum.ENVIRONMENT_PARAM)"
+                            @select="(value) => handleMoreAction(value, element.id, EnvAuthTypeEnum.ENVIRONMENT_GROUP)"
                           />
                         </div>
                       </div>
@@ -176,7 +181,7 @@
         <!-- 环境变量 -->
         <EnvParamBox v-else-if="showType === 'PROJECT' && activeKey !== ALL_PARAM" />
         <!-- 环境组 -->
-        <EnvGroupBox v-else-if="showType === 'PROJECT_GROUP'" />
+        <EnvGroupBox v-else-if="showType === 'PROJECT_GROUP'" @save-or-update="handleUpdateEnvGroup" />
       </template>
     </MsSplitBox>
   </div>
@@ -184,6 +189,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { number } from 'echarts';
   import { VueDraggable } from 'vue-draggable-plus';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -197,7 +203,13 @@
   import EnvParamBox from './components/EnvParamBox.vue';
   import RenamePop from './components/RenamePop.vue';
 
-  import { exportGlobalParam, groupListEnv, listEnv } from '@/api/modules/project-management/envManagement';
+  import {
+    deleteEnvGroup,
+    exportGlobalParam,
+    groupEditPosEnv,
+    groupListEnv,
+    listEnv,
+  } from '@/api/modules/project-management/envManagement';
   import { useI18n } from '@/hooks/useI18n';
   import { useAppStore } from '@/store';
   import useProjectEnvStore, {
@@ -211,6 +223,8 @@
   import { PopVisible } from '@/models/setting/usergroup';
   import { EnvAuthScopeEnum, EnvAuthTypeEnum } from '@/enums/envEnum';
 
+  import { SortableEvent } from 'sortablejs';
+
   const { t } = useI18n();
   const store = useProjectEnvStore();
 
@@ -237,10 +251,6 @@
 
   // 默认环境MoreAction
   const envMoreAction: ActionsItem[] = [
-    {
-      label: t('common.rename'),
-      eventTag: 'rename',
-    },
     {
       label: t('common.export'),
       eventTag: 'export',
@@ -254,6 +264,7 @@
       eventTag: 'delete',
     },
   ];
+
   // 全局参数/环境 MoreAction
   const allMoreAction: ActionsItem[] = [
     {
@@ -266,6 +277,15 @@
     },
   ];
 
+  // 环境组moreAction
+  const groupMoreAction: ActionsItem[] = [
+    {
+      label: t('common.delete'),
+      danger: true,
+      eventTag: 'delete',
+    },
+  ];
+
   // 处理全局参数导入
   const handleGlobalImport = () => {
     importVisible.value = true;
@@ -295,32 +315,6 @@
   // 处理环境导入
   const handleEnvImport = () => {};
 
-  // 处理MoreAction
-  const handleMoreAction = (item: ActionsItem, id: string, scopeType: EnvAuthTypeEnum) => {
-    const { eventTag } = item;
-    switch (eventTag) {
-      case 'rename':
-        break;
-      case 'export':
-        if (scopeType === EnvAuthTypeEnum.GLOBAL) {
-          handleGlobalExport();
-        } else if (scopeType === EnvAuthTypeEnum.ENVIRONMENT) {
-          handleEnvImport();
-        }
-        break;
-      case 'delete':
-        break;
-      case 'import':
-        if (scopeType === EnvAuthTypeEnum.GLOBAL) {
-          handleGlobalImport();
-        } else if (scopeType === EnvAuthTypeEnum.ENVIRONMENT) {
-          handleEnvImport();
-        }
-        break;
-      default:
-        break;
-    }
-  };
   // 创建环境变量
   const handleCreateEnv = () => {
     const tmpArr = envList.value;
@@ -341,7 +335,6 @@
     store.setCurrentGroupId(NEW_ENV_GROUP);
     evnGroupList.value = tmpArr;
   };
-
   const initGroupList = async (keywordStr = '') => {
     try {
       evnGroupList.value = await groupListEnv({ projectId: appStore.currentProjectId, keyword: keywordStr });
@@ -351,6 +344,44 @@
     }
   };
 
+  // 更新环境组
+  const handleUpdateEnvGroup = async (id: string) => {
+    await initGroupList();
+    store.setCurrentGroupId(id);
+  };
+  // 排序更新
+  const handleEnvGroupPosChange = async (event: SortableEvent) => {
+    try {
+      const { oldIndex, newIndex } = event;
+      if (oldIndex === newIndex) {
+        return;
+      }
+      const _oldIndex = oldIndex as number;
+      const _newIndex = newIndex as number;
+      const params = {
+        projectId: appStore.currentProjectId,
+        targetId: evnGroupList.value[_newIndex].id,
+        moveId: evnGroupList.value[_oldIndex].id,
+        moveMode: _oldIndex > _newIndex ? 'BEFORE' : 'AFTER',
+      };
+      await groupEditPosEnv(params);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  };
+
+  // 处理删除环境组
+  const handleDeleteEnvGroup = async (id: string) => {
+    try {
+      await deleteEnvGroup(id);
+      await initGroupList();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  };
+
   const initData = async (keywordStr = '') => {
     try {
       envList.value = await listEnv({ projectId: appStore.currentProjectId, keyword: keywordStr });
@@ -392,15 +423,40 @@
   const handleListItemClickGroup = (element: EnvListItem) => {
     const { id } = element;
     store.setCurrentGroupId(id);
-    if (id !== NEW_ENV_GROUP) {
-      // 不是新建的组，初始化组详情
-      store.initGroupDetail();
-    }
   };
 
   function searchData() {
     initData(keyword.value);
   }
+  // 处理MoreAction
+  const handleMoreAction = (item: ActionsItem, id: string, scopeType: EnvAuthTypeEnum) => {
+    const { eventTag } = item;
+    switch (eventTag) {
+      case 'export':
+        if (scopeType === EnvAuthTypeEnum.GLOBAL) {
+          handleGlobalExport();
+        } else if (scopeType === EnvAuthTypeEnum.ENVIRONMENT) {
+          handleEnvImport();
+        } else if (scopeType === EnvAuthTypeEnum.ENVIRONMENT_PARAM) {
+          handleEnvImport();
+        }
+        break;
+      case 'delete':
+        if (scopeType === EnvAuthTypeEnum.ENVIRONMENT_GROUP) {
+          handleDeleteEnvGroup(id);
+        }
+        break;
+      case 'import':
+        if (scopeType === EnvAuthTypeEnum.GLOBAL) {
+          handleGlobalImport();
+        } else if (scopeType === EnvAuthTypeEnum.ENVIRONMENT) {
+          handleEnvImport();
+        }
+        break;
+      default:
+        break;
+    }
+  };
   onMounted(() => {
     initData();
   });