From 213de72e3b26551cebefdd73a05b189975eab341 Mon Sep 17 00:00:00 2001 From: RubyLiu Date: Thu, 29 Feb 2024 19:39:34 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86):?= =?UTF-8?q?=20=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../project-management/envManagement.ts | 17 ++-- .../pure/ms-export-drawer/index.vue | 13 +++ .../components/pure/ms-export-drawer/types.ts | 1 + .../models/projectManagement/environmental.ts | 32 +++++-- .../modules/setting/useProjectEnvStore.ts | 46 ++++++++-- .../views/api-test/components/paramTable.vue | 3 +- .../components/common/CommonImportPop.vue | 10 +- .../components/envParams/DatabaseTab.vue | 73 +++++++++------ .../components/envParams/HostTab.vue | 2 - .../components/envParams/HttpTab.vue | 47 ++++++---- .../components/envParams/PostTab.vue | 21 +++-- .../components/envParams/PreTab.vue | 21 +++-- .../envParams/popUp/AddHttpDrawer.vue | 70 +++++++------- .../envParams/popUp/addDatabaseModal.vue | 76 +++++++++------ .../environmental/index.vue | 92 +++++++++++++++---- .../environmental/locale/zh-CN.ts | 5 + 16 files changed, 357 insertions(+), 172 deletions(-) diff --git a/frontend/src/api/modules/project-management/envManagement.ts b/frontend/src/api/modules/project-management/envManagement.ts index 6fe01d5b12..4e8fcc12c6 100644 --- a/frontend/src/api/modules/project-management/envManagement.ts +++ b/frontend/src/api/modules/project-management/envManagement.ts @@ -3,11 +3,9 @@ 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, EnvListItem, EnvPluginListItem, GlobalParams, @@ -27,14 +25,17 @@ export function updateOrAddEnv(data: { request: EnvDetailItem; fileList: FileIte export function listEnv(data: { projectId: string; keyword: string }) { return MSR.post({ url: envURL.listEnvUrl, data }); } -export function importEnv(data: { request: EnvListItem; fileList: FileItem[] }) { - return MSR.uploadFile({ url: envURL.importEnvUrl }, data, '', true); +export function importEnv(data: { request: any; fileList: FileItem[] }) { + return MSR.uploadFile({ url: envURL.importEnvUrl }, data, '', false); } export function getEntryEnv(data: EnvListItem) { return MSR.post({ url: envURL.getEntryEnvUrl, data }); } -export function exportEnv(id: string) { - return MSR.get({ url: envURL.exportEnvUrl + id, responseType: 'blob' }, { isTransformResponse: false }); +export function exportEnv(selectIds: string[]) { + return MSR.post( + { url: envURL.exportEnvUrl, data: { selectIds }, responseType: 'blob' }, + { isTransformResponse: false } + ); } export function editPosEnv(data: EnvListItem) { return MSR.post({ url: envURL.editPosEnvUrl, data }); @@ -55,8 +56,8 @@ export function addEnv(data: EnvListItem) { export function getDetailEnv(id: string) { return MSR.get({ url: envURL.detailEnvUrl + id }); } -export function deleteEnv(data: EnvListItem) { - return MSR.post({ url: envURL.deleteEnvUrl, data }); +export function deleteEnv(id: string) { + return MSR.get({ url: envURL.deleteEnvUrl + id }); } export function groupUpdateEnv(data: any) { return MSR.post({ url: envURL.groupUpdateEnvUrl, data }); diff --git a/frontend/src/components/pure/ms-export-drawer/index.vue b/frontend/src/components/pure/ms-export-drawer/index.vue index 994b23f69b..9c576cc29c 100644 --- a/frontend/src/components/pure/ms-export-drawer/index.vue +++ b/frontend/src/components/pure/ms-export-drawer/index.vue @@ -125,6 +125,8 @@ import { useI18n } from '@/hooks/useI18n'; + import { EnvListItem } from '@/models/projectManagement/environmental'; + import { MsExportDrawerMap, MsExportDrawerOption } from './types'; const { t } = useI18n(); @@ -136,6 +138,8 @@ allData: MsExportDrawerMap; // 默认选中的字段 keys defaultSelectedKeys?: string[]; + isArrayColumn?: boolean; + arrayColumn?: EnvListItem[]; } const props = withDefaults(defineProps(), { @@ -161,6 +165,15 @@ }); const systemList = computed(() => { + if (props.isArrayColumn && props.arrayColumn) { + return props.arrayColumn.map((item) => { + return { + key: item.id, + text: item.name, + columnType: 'system', + }; + }); + } const { systemColumns } = props.allData; if (systemColumns) { return Object.keys(systemColumns).map((key) => { diff --git a/frontend/src/components/pure/ms-export-drawer/types.ts b/frontend/src/components/pure/ms-export-drawer/types.ts index 1110bf6c51..44b7e0d281 100644 --- a/frontend/src/components/pure/ms-export-drawer/types.ts +++ b/frontend/src/components/pure/ms-export-drawer/types.ts @@ -10,4 +10,5 @@ export interface MsExportDrawerOption { text: string; key: string; columnType: string; + [key: string]: any; } diff --git a/frontend/src/models/projectManagement/environmental.ts b/frontend/src/models/projectManagement/environmental.ts index 685880b685..230e2263e5 100644 --- a/frontend/src/models/projectManagement/environmental.ts +++ b/frontend/src/models/projectManagement/environmental.ts @@ -1,3 +1,5 @@ +import { ExecuteConditionProcessor } from '../apiTest/debug'; + export interface EnvListItem { name: string; id: string; @@ -29,17 +31,19 @@ export interface DataSourceItem { export interface EnvConfigItem { [key: string]: any; } +export interface ProcessorConfig { + apiProcessorConfig: ExecuteConditionProcessor[]; +} export interface EnvConfig { commonParams?: EnvConfigItem; - commmonVariables?: EnvConfigItem[]; - httpConfig?: EnvConfigItem[]; - dataSource?: DataSourceItem[]; - hostConfig?: EnvConfigItem; - authConfig?: EnvConfigItem; - preProcessorConfig?: EnvConfigItem; - postProcessorConfig?: EnvConfigItem; - assertionConfig?: EnvConfigItem; - pluginConfigMap?: EnvConfigItem; + commmonVariables: EnvConfigItem[]; + httpConfig: EnvConfigItem[]; + dataSources: DataSourceItem[]; + hostConfig: EnvConfigItem; + preProcessorConfig: ProcessorConfig; + postProcessorConfig: ProcessorConfig; + assertionConfig: EnvConfigItem[]; + pluginConfigMap: EnvConfigItem; } export interface EnvDetailItem { id?: string; @@ -109,3 +113,13 @@ export interface DragParam { moveMode: string; moveId: string; } + +export interface HttpForm { + id?: string; + description?: string; + hostname: string; + enableCondition: string; + path: string; + operator: string; + headerParams: any[]; +} diff --git a/frontend/src/store/modules/setting/useProjectEnvStore.ts b/frontend/src/store/modules/setting/useProjectEnvStore.ts index 6b88d9ab9c..3166a38fd8 100644 --- a/frontend/src/store/modules/setting/useProjectEnvStore.ts +++ b/frontend/src/store/modules/setting/useProjectEnvStore.ts @@ -10,16 +10,42 @@ import { ContentTabItem, ContentTabsMap, EnvDetailItem, GlobalParams } from '@/m export const ALL_PARAM = 'allParam'; export const NEW_ENV_PARAM = 'newEnvParam'; export const NEW_ENV_GROUP = 'newEnvGroup'; +const envParmasDefaultConfig = { + commmonVariables: [], + httpConfig: [], + dataSources: [], + hostConfig: { + enable: false, + hosts: [], + }, + preProcessorConfig: { + apiProcessorConfig: [], + }, + postProcessorConfig: { + apiProcessorConfig: [], + }, + assertionConfig: [], + pluginConfigMap: {}, +}; const useProjectEnvStore = defineStore( 'projectEnv', () => { // 项目中的key值 - const currentId = ref('1052215449649153'); + const currentId = ref(''); // 项目组选中的key值 const currentGroupId = ref(''); - const currentEnvDetailInfo = ref({ projectId: '', name: '', config: {} }); // 当前选中的环境详情 - const backupEnvDetailInfo = ref({ projectId: '', name: '', config: {} }); // 当前选中的环境详情-备份 + // 当前选中的环境详情 + const currentEnvDetailInfo = ref({ + projectId: '', + name: '', + config: envParmasDefaultConfig, + }); + const backupEnvDetailInfo = ref({ + projectId: '', + name: '', + config: envParmasDefaultConfig, + }); const allParamDetailInfo = ref(); // 全局参数详情 const httpNoWarning = ref(true); const getHttpNoWarning = computed(() => httpNoWarning.value); @@ -46,14 +72,22 @@ const useProjectEnvStore = defineStore( const appStore = useAppStore(); try { if (id === NEW_ENV_PARAM) { - currentEnvDetailInfo.value = { projectId: appStore.currentProjectId, name: '', config: {} }; - backupEnvDetailInfo.value = { projectId: appStore.currentProjectId, name: '', config: {} }; + currentEnvDetailInfo.value = { + projectId: appStore.currentProjectId, + name: '', + config: envParmasDefaultConfig, + }; + backupEnvDetailInfo.value = { + projectId: appStore.currentProjectId, + name: '', + config: envParmasDefaultConfig, + }; } else if (id === ALL_PARAM) { allParamDetailInfo.value = await getGlobalParamDetail(appStore.currentProjectId); } else if (id !== ALL_PARAM && id) { const tmpObj = await getDetailEnv(id); currentEnvDetailInfo.value = tmpObj; - backupEnvDetailInfo.value = JSON.parse(JSON.stringify(tmpObj)); + backupEnvDetailInfo.value = tmpObj; } } catch (e) { // eslint-disable-next-line no-console diff --git a/frontend/src/views/api-test/components/paramTable.vue b/frontend/src/views/api-test/components/paramTable.vue index c135be9856..069672dbe9 100644 --- a/frontend/src/views/api-test/components/paramTable.vue +++ b/frontend/src/views/api-test/components/paramTable.vue @@ -209,7 +209,7 @@ /> - @@ -34,7 +34,7 @@ import MsButton from '@/components/pure/ms-button/index.vue'; import MsBaseTable from '@/components/pure/ms-table/base-table.vue'; - import { MsTableColumn } from '@/components/pure/ms-table/type'; + import { MsTableColumn, MsTableDataItem } from '@/components/pure/ms-table/type'; import useTable from '@/components/pure/ms-table/useTable'; import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue'; import { ActionsItem } from '@/components/pure/ms-table-more-action/types'; @@ -45,18 +45,15 @@ import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore'; import { BugListItem } from '@/models/bug-management'; + import { CommonList } from '@/models/common'; import { DataSourceItem } from '@/models/projectManagement/environmental'; import { TableKeyEnum } from '@/enums/tableEnum'; const { t } = useI18n(); const store = useProjectEnvStore(); - const innerParam = computed({ - get: () => (store.currentEnvDetailInfo.config.dataSource || []) as DataSourceItem[], - set: (value: DataSourceItem[] | undefined) => { - store.currentEnvDetailInfo.config.dataSource = value; - }, - }); + const innerParam = computed(() => store.currentEnvDetailInfo.config.dataSources || []); + const keyword = ref(''); const tableStore = useTableStore(); const addVisible = ref(false); @@ -121,15 +118,21 @@ }, ]; await tableStore.initColumn(TableKeyEnum.PROJECT_MANAGEMENT_ENV_ENV_HTTP, columns); - const { propsRes, propsEvent } = useTable(undefined, { - tableKey: TableKeyEnum.PROJECT_MANAGEMENT_ENV_ENV_HTTP, - scroll: { x: '100%' }, - selectable: false, - noDisable: true, - showSetting: true, - showPagination: false, - showMode: false, - }); + const { propsRes, propsEvent } = useTable( + () => + Promise.resolve([]) as unknown as Promise< + MsTableDataItem | CommonList> + >, + { + tableKey: TableKeyEnum.PROJECT_MANAGEMENT_ENV_ENV_HTTP, + scroll: { x: '100%' }, + selectable: false, + showSetting: true, + showPagination: false, + showMode: false, + isSimpleSetting: true, + } + ); const moreActionList: ActionsItem[] = [ { @@ -140,7 +143,10 @@ ]; const handleSingleDelete = (record?: TableData) => { - console.log('handleSingleDelete', record); + if (record) { + const index = innerParam.value.findIndex((item) => item.id === record.id); + innerParam.value.splice(index, 1); + } }; function handleMoreActionSelect(item: ActionsItem, record: BugListItem) { @@ -150,22 +156,37 @@ } const handleCopy = (record: any) => { - console.log('handleCopy', record); + addVisible.value = true; + currentId.value = ''; + currentDatabase.value = { ...record, id: '' }; }; const handleEdit = (record: any) => { addVisible.value = true; currentId.value = record.id; }; - const handleAdd = () => { + currentDatabase.value = { name: '', dbUrl: '', username: '' }; addVisible.value = true; }; - const fetchData = () => {}; - const initData = () => { - propsRes.value.data = innerParam.value; + const fetchData = () => { + if (keyword.value) { + propsRes.value.data = innerParam.value.filter((item) => item.name.includes(keyword.value)); + } else { + propsRes.value.data = innerParam.value; + } }; - onMounted(() => { - initData(); + const handleAddOrUpdate = (data: DataSourceItem, cb: (v: boolean) => void) => { + if (data.id) { + const index = innerParam.value.findIndex((item) => item.id === data.id); + store.currentEnvDetailInfo.config.dataSources[index] = data; + } else { + data.id = new Date().getTime().toString(); + store.currentEnvDetailInfo.config.dataSources.push(data); + } + cb(true); + }; + watch(innerParam.value, () => { + fetchData(); }); diff --git a/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue b/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue index e16691b874..f835e06c54 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue @@ -28,7 +28,6 @@ import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore'; import { EnvConfigItem } from '@/models/projectManagement/environmental'; - import { FakeTableListItem } from '@/models/projectManagement/menuManagement'; const { t } = useI18n(); @@ -37,7 +36,6 @@ const currentList = computed({ get: () => store.currentEnvDetailInfo.config.hostConfig || {}, set: (value: EnvConfigItem) => { - console.log(value); store.currentEnvDetailInfo.config.hostConfig = value || {}; }, }); diff --git a/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue b/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue index 00a0e56286..45715c9d70 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue @@ -39,7 +39,7 @@ - + diff --git a/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue b/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue index 18034fa663..99219d1223 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue @@ -1,20 +1,27 @@ diff --git a/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue b/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue index 9b2d7f6abf..204eb86512 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue @@ -1,20 +1,27 @@ diff --git a/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue b/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue index 909396deff..037c2b1d02 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue @@ -1,5 +1,12 @@ - - - {{ t('menu.apiTest') }} - {{ t('menu.uiTest') }} - - {{ t('project.environmental.http.none') }} @@ -36,7 +37,7 @@ - {{ t('project.environmental.http.none') }} + --> + + - {{ t('project.environmental.http.none') }} - + --> - + @@ -100,57 +104,51 @@ import RequestHeader from '../../requestHeader/index.vue'; import { useI18n } from '@/hooks/useI18n'; + import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore'; + + import { HttpForm } from '@/models/projectManagement/environmental'; const props = defineProps<{ - currentId?: string; + currentObj: HttpForm; }>(); + const store = useProjectEnvStore(); + const emit = defineEmits<{ (e: 'close'): void; }>(); - const form = reactive<{ - hostname: string; - applyModule: string[]; - enableCondition: string; - apiModule: string[]; - uiModule: string[]; - path: string; - operator: string; - }>({ + const form = ref({ + id: '', hostname: '', - applyModule: [], enableCondition: 'none', - apiModule: [], - uiModule: [], path: '', operator: '', + headerParams: [], }); const httpRef = ref(); - const showApiModule = computed(() => form.enableCondition === 'module' && form.applyModule.includes('apiTest')); - const showUIModule = computed(() => form.enableCondition === 'module' && form.applyModule.includes('uiTest')); - const showPathInput = computed(() => form.enableCondition === 'path'); - const headerParams = ref<[]>([]); + const showPathInput = computed(() => form.value.enableCondition === 'path'); const visible = defineModel('visible', { required: true, type: Boolean, default: false }); const { t } = useI18n(); - const isEdit = computed(() => !!props.currentId); + const isEdit = computed(() => !!props.currentObj.id); const title = computed(() => { return isEdit.value ? t('project.environmental.http.edit') : t('project.environmental.http.add'); }); - watchEffect(() => { - if (showApiModule.value) { - form.apiModule = []; + const handleAddOrUpdate = () => { + if (form.value.id) { + const index = store.currentEnvDetailInfo.config.httpConfig.findIndex((item) => item.id === form.value.id); + store.currentEnvDetailInfo.config.httpConfig.splice(index, 1, form.value); + } else { + store.currentEnvDetailInfo.config.httpConfig.push(form); } - if (showUIModule.value) { - form.uiModule = []; - } - }); + emit('close'); + };