Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
MeterSphere
metersphere
提交
7766db55
M
metersphere
项目概览
MeterSphere
/
metersphere
上一次同步 3 年多
通知
25
Star
1
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
metersphere
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
7766db55
编写于
1月 18, 2021
作者:
F
fit2-zhao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
style(接口测试): 统一接口定义和接口自动化 Tab 添加样式
上级
6d685310
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
442 addition
and
422 deletion
+442
-422
frontend/src/business/components/api/automation/ApiAutomation.vue
.../src/business/components/api/automation/ApiAutomation.vue
+158
-133
frontend/src/business/components/api/definition/ApiDefinition.vue
.../src/business/components/api/definition/ApiDefinition.vue
+284
-289
未找到文件。
frontend/src/business/components/api/automation/ApiAutomation.vue
浏览文件 @
7766db55
...
...
@@ -38,7 +38,14 @@
<el-tab-pane
name=
"add"
>
<template
v-slot:label
>
<el-button
type=
"primary"
plain
icon=
"el-icon-plus"
size=
"mini"
v-tester
/>
<el-dropdown
@
command=
"handleCommand"
v-tester
>
<el-button
type=
"primary"
plain
icon=
"el-icon-plus"
size=
"mini"
v-tester
/>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
command=
"ADD"
>
{{
$t
(
'
api_test.definition.request.title
'
)
}}
</el-dropdown-item>
<el-dropdown-item
command=
"CLOSE_ALL"
>
{{
$t
(
'
api_test.definition.request.close_all_label
'
)
}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</
template
>
</el-tab-pane>
</el-tabs>
...
...
@@ -48,150 +55,168 @@
<
script
>
import
MsContainer
from
"
@/business/components/common/components/MsContainer
"
;
import
MsAsideContainer
from
"
@/business/components/common/components/MsAsideContainer
"
;
import
MsMainContainer
from
"
@/business/components/common/components/MsMainContainer
"
;
import
MsApiScenarioList
from
"
@/business/components/api/automation/scenario/ApiScenarioList
"
;
import
{
getUUID
}
from
"
@/common/js/utils
"
;
import
MsApiScenarioModule
from
"
@/business/components/api/automation/scenario/ApiScenarioModule
"
;
import
MsEditApiScenario
from
"
./scenario/EditApiScenario
"
;
import
{
getCurrentProjectID
}
from
"
../../../../common/js/utils
"
;
import
MsContainer
from
"
@/business/components/common/components/MsContainer
"
;
import
MsAsideContainer
from
"
@/business/components/common/components/MsAsideContainer
"
;
import
MsMainContainer
from
"
@/business/components/common/components/MsMainContainer
"
;
import
MsApiScenarioList
from
"
@/business/components/api/automation/scenario/ApiScenarioList
"
;
import
{
getUUID
}
from
"
@/common/js/utils
"
;
import
MsApiScenarioModule
from
"
@/business/components/api/automation/scenario/ApiScenarioModule
"
;
import
MsEditApiScenario
from
"
./scenario/EditApiScenario
"
;
import
{
getCurrentProjectID
}
from
"
../../../../common/js/utils
"
;
export
default
{
name
:
"
ApiAutomation
"
,
components
:
{
MsApiScenarioModule
,
MsApiScenarioList
,
MsMainContainer
,
MsAsideContainer
,
MsContainer
,
MsEditApiScenario
},
comments
:
{},
computed
:
{
checkRedirectID
:
function
()
{
let
redirectIDParam
=
this
.
$route
.
params
.
redirectID
;
this
.
changeRedirectParam
(
redirectIDParam
);
return
redirectIDParam
;
export
default
{
name
:
"
ApiAutomation
"
,
components
:
{
MsApiScenarioModule
,
MsApiScenarioList
,
MsMainContainer
,
MsAsideContainer
,
MsContainer
,
MsEditApiScenario
},
isRedirectEdit
:
function
()
{
let
redirectParam
=
this
.
$route
.
params
.
dataSelectRange
;
this
.
checkRedirectEditPage
(
redirectParam
);
return
redirectParam
;
}
},
data
()
{
return
{
redirectID
:
''
,
renderComponent
:
true
,
isHide
:
true
,
activeName
:
'
default
'
,
currentModule
:
null
,
moduleOptions
:
[],
tabs
:
[],
trashEnable
:
false
,
selectNodeIds
:
[],
}
},
watch
:
{
redirectID
()
{
this
.
renderComponent
=
false
;
this
.
$nextTick
(()
=>
{
// 在 DOM 中添加 my-component 组件
this
.
renderComponent
=
true
;
});
}
},
methods
:
{
checkRedirectEditPage
(
redirectParam
)
{
if
(
redirectParam
!=
null
){
let
selectParamArr
=
redirectParam
.
split
(
"
edit:
"
);
if
(
selectParamArr
.
length
==
2
)
{
let
scenarioId
=
selectParamArr
[
1
];
let
projectId
=
getCurrentProjectID
();
//查找单条数据,跳转修改页面
let
url
=
"
/api/automation/list/
"
+
1
+
"
/
"
+
1
;
this
.
$post
(
url
,
{
id
:
scenarioId
,
projectId
:
projectId
},
response
=>
{
let
data
=
response
.
data
;
if
(
data
!=
null
){
//如果树未加载
if
(
JSON
.
stringify
(
this
.
moduleOptions
)
===
'
{}
'
){
this
.
$refs
.
nodeTree
.
list
();
}
let
row
=
data
.
listObject
[
0
];
row
.
tags
=
JSON
.
parse
(
row
.
tags
);
this
.
editScenario
(
row
);
}
});
}
comments
:
{},
computed
:
{
checkRedirectID
:
function
()
{
let
redirectIDParam
=
this
.
$route
.
params
.
redirectID
;
this
.
changeRedirectParam
(
redirectIDParam
);
return
redirectIDParam
;
},
isRedirectEdit
:
function
()
{
let
redirectParam
=
this
.
$route
.
params
.
dataSelectRange
;
this
.
checkRedirectEditPage
(
redirectParam
);
return
redirectParam
;
}
},
changeRedirectParam
(
redirectIDParam
)
{
this
.
redirectID
=
redirectIDParam
;
},
addTab
(
tab
)
{
if
(
!
getCurrentProjectID
())
{
this
.
$warning
(
this
.
$t
(
'
commons.check_project_tip
'
));
return
;
}
if
(
tab
.
name
===
'
add
'
)
{
let
label
=
this
.
$t
(
'
api_test.automation.add_scenario
'
);
let
name
=
getUUID
().
substring
(
0
,
8
);
this
.
activeName
=
name
;
this
.
tabs
.
push
({
label
:
label
,
name
:
name
,
currentScenario
:
{
apiScenarioModuleId
:
""
,
id
:
getUUID
()}});
}
if
(
tab
.
name
===
'
edit
'
)
{
let
label
=
this
.
$t
(
'
api_test.automation.add_scenario
'
);
let
name
=
getUUID
().
substring
(
0
,
8
);
this
.
activeName
=
name
;
label
=
tab
.
currentScenario
.
name
;
this
.
tabs
.
push
({
label
:
label
,
name
:
name
,
currentScenario
:
tab
.
currentScenario
});
data
()
{
return
{
redirectID
:
''
,
renderComponent
:
true
,
isHide
:
true
,
activeName
:
'
default
'
,
currentModule
:
null
,
moduleOptions
:
[],
tabs
:
[],
trashEnable
:
false
,
selectNodeIds
:
[],
}
},
removeTab
(
targetName
)
{
this
.
tabs
=
this
.
tabs
.
filter
(
tab
=>
tab
.
name
!==
targetName
);
if
(
this
.
tabs
.
length
>
0
)
{
this
.
activeName
=
this
.
tabs
[
this
.
tabs
.
length
-
1
].
name
;
}
else
{
this
.
activeName
=
"
default
"
watch
:
{
redirectID
()
{
this
.
renderComponent
=
false
;
this
.
$nextTick
(()
=>
{
// 在 DOM 中添加 my-component 组件
this
.
renderComponent
=
true
;
});
}
},
setTabLabel
(
data
)
{
for
(
const
tab
of
this
.
tabs
)
{
if
(
tab
.
name
===
this
.
activeName
)
{
tab
.
label
=
data
.
name
;
break
;
methods
:
{
checkRedirectEditPage
(
redirectParam
)
{
if
(
redirectParam
!=
null
)
{
let
selectParamArr
=
redirectParam
.
split
(
"
edit:
"
);
if
(
selectParamArr
.
length
==
2
)
{
let
scenarioId
=
selectParamArr
[
1
];
let
projectId
=
getCurrentProjectID
();
//查找单条数据,跳转修改页面
let
url
=
"
/api/automation/list/
"
+
1
+
"
/
"
+
1
;
this
.
$post
(
url
,
{
id
:
scenarioId
,
projectId
:
projectId
},
response
=>
{
let
data
=
response
.
data
;
if
(
data
!=
null
)
{
//如果树未加载
if
(
JSON
.
stringify
(
this
.
moduleOptions
)
===
'
{}
'
)
{
this
.
$refs
.
nodeTree
.
list
();
}
let
row
=
data
.
listObject
[
0
];
row
.
tags
=
JSON
.
parse
(
row
.
tags
);
this
.
editScenario
(
row
);
}
});
}
}
}
},
selectModule
(
data
)
{
this
.
currentModule
=
data
;
},
saveScenario
(
data
)
{
this
.
setTabLabel
(
data
);
this
.
$refs
.
apiScenarioList
.
search
(
data
);
},
refresh
(
data
)
{
this
.
$refs
.
apiScenarioList
.
search
(
data
);
},
editScenario
(
row
)
{
this
.
addTab
({
name
:
'
edit
'
,
currentScenario
:
row
});
},
},
changeRedirectParam
(
redirectIDParam
)
{
this
.
redirectID
=
redirectIDParam
;
},
addTab
(
tab
)
{
if
(
!
getCurrentProjectID
())
{
this
.
$warning
(
this
.
$t
(
'
commons.check_project_tip
'
));
return
;
}
if
(
tab
.
name
===
'
add
'
)
{
let
label
=
this
.
$t
(
'
api_test.automation.add_scenario
'
);
let
name
=
getUUID
().
substring
(
0
,
8
);
this
.
activeName
=
name
;
this
.
tabs
.
push
({
label
:
label
,
name
:
name
,
currentScenario
:
{
apiScenarioModuleId
:
""
,
id
:
getUUID
()}});
}
if
(
tab
.
name
===
'
edit
'
)
{
let
label
=
this
.
$t
(
'
api_test.automation.add_scenario
'
);
let
name
=
getUUID
().
substring
(
0
,
8
);
this
.
activeName
=
name
;
label
=
tab
.
currentScenario
.
name
;
this
.
tabs
.
push
({
label
:
label
,
name
:
name
,
currentScenario
:
tab
.
currentScenario
});
}
},
handleTabClose
()
{
this
.
tabs
=
[];
this
.
activeName
=
"
default
"
;
this
.
refresh
();
},
handleCommand
(
e
)
{
switch
(
e
)
{
case
"
ADD
"
:
this
.
addTab
({
name
:
'
add
'
});
break
;
case
"
CLOSE_ALL
"
:
this
.
handleTabClose
();
break
;
default
:
this
.
addTab
({
name
:
'
add
'
});
break
;
}
},
removeTab
(
targetName
)
{
this
.
tabs
=
this
.
tabs
.
filter
(
tab
=>
tab
.
name
!==
targetName
);
if
(
this
.
tabs
.
length
>
0
)
{
this
.
activeName
=
this
.
tabs
[
this
.
tabs
.
length
-
1
].
name
;
}
else
{
this
.
activeName
=
"
default
"
}
},
setTabLabel
(
data
)
{
for
(
const
tab
of
this
.
tabs
)
{
if
(
tab
.
name
===
this
.
activeName
)
{
tab
.
label
=
data
.
name
;
break
;
}
}
},
selectModule
(
data
)
{
this
.
currentModule
=
data
;
},
saveScenario
(
data
)
{
this
.
setTabLabel
(
data
);
this
.
$refs
.
apiScenarioList
.
search
(
data
);
},
refresh
(
data
)
{
this
.
$refs
.
apiScenarioList
.
search
(
data
);
},
editScenario
(
row
)
{
this
.
addTab
({
name
:
'
edit
'
,
currentScenario
:
row
});
},
nodeChange
(
node
,
nodeIds
,
pNodes
)
{
this
.
selectNodeIds
=
nodeIds
;
},
setModuleOptions
(
data
)
{
this
.
moduleOptions
=
data
;
},
changeSelectDataRangeAll
(
tableType
)
{
this
.
$route
.
params
.
dataSelectRange
=
'
all
'
;
},
enableTrash
(
data
)
{
this
.
trashEnable
=
data
;
nodeChange
(
node
,
nodeIds
,
pNodes
)
{
this
.
selectNodeIds
=
nodeIds
;
},
setModuleOptions
(
data
)
{
this
.
moduleOptions
=
data
;
},
changeSelectDataRangeAll
(
tableType
)
{
this
.
$route
.
params
.
dataSelectRange
=
'
all
'
;
},
enableTrash
(
data
)
{
this
.
trashEnable
=
data
;
}
}
}
}
</
script
>
<
style
scoped
>
...
...
frontend/src/business/components/api/definition/ApiDefinition.vue
浏览文件 @
7766db55
...
...
@@ -15,20 +15,8 @@
</ms-aside-container>
<ms-main-container>
<el-dropdown
size=
"small"
split-button
type=
"primary"
class=
"ms-api-buttion"
@
click=
"handleCommand('ADD')"
@
command=
"handleCommand"
v-tester
>
{{
$t
(
'
commons.add
'
)
}}
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
command=
"debug"
>
{{
$t
(
'
api_test.definition.request.fast_debug
'
)
}}
</el-dropdown-item>
<el-dropdown-item
command=
"ADD"
>
{{
$t
(
'
api_test.definition.request.title
'
)
}}
</el-dropdown-item>
<el-dropdown-item
command=
"CLOSE_ALL"
>
{{
$t
(
'
api_test.definition.request.close_all_label
'
)
}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 主框架列表 -->
<el-tabs
v-model=
"apiDefaultTab"
@
edit=
"handleTabRemove"
>
<el-tabs
v-model=
"apiDefaultTab"
@
edit=
"handleTabRemove"
@
tab-click=
"addTab"
>
<el-tab-pane
v-for=
"(item) in apiTabs"
:key=
"item.name"
:label=
"item.title"
...
...
@@ -98,313 +86,320 @@
@
refresh=
"refresh"
v-if=
"currentProtocol==='DUBBO'"
/>
</div>
</el-tab-pane>
<el-tab-pane
name=
"add"
>
<template
v-slot:label
>
<el-dropdown
@
command=
"handleCommand"
v-tester
>
<el-button
type=
"primary"
plain
icon=
"el-icon-plus"
size=
"mini"
v-tester
/>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
command=
"debug"
>
{{
$t
(
'
api_test.definition.request.fast_debug
'
)
}}
</el-dropdown-item>
<el-dropdown-item
command=
"ADD"
>
{{
$t
(
'
api_test.definition.request.title
'
)
}}
</el-dropdown-item>
<el-dropdown-item
command=
"CLOSE_ALL"
>
{{
$t
(
'
api_test.definition.request.close_all_label
'
)
}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</
template
>
</el-tab-pane>
</el-tabs>
</ms-main-container>
</ms-container>
</template>
<
script
>
import
MsApiList
from
'
./components/list/ApiList
'
;
import
MsContainer
from
"
../../common/components/MsContainer
"
;
import
MsMainContainer
from
"
../../common/components/MsMainContainer
"
;
import
MsAsideContainer
from
"
../../common/components/MsAsideContainer
"
;
import
MsApiConfig
from
"
./components/ApiConfig
"
;
import
MsDebugHttpPage
from
"
./components/debug/DebugHttpPage
"
;
import
MsDebugJdbcPage
from
"
./components/debug/DebugJdbcPage
"
;
import
MsDebugTcpPage
from
"
./components/debug/DebugTcpPage
"
;
import
MsDebugDubboPage
from
"
./components/debug/DebugDubboPage
"
;
import
MsApiList
from
'
./components/list/ApiList
'
;
import
MsContainer
from
"
../../common/components/MsContainer
"
;
import
MsMainContainer
from
"
../../common/components/MsMainContainer
"
;
import
MsAsideContainer
from
"
../../common/components/MsAsideContainer
"
;
import
MsApiConfig
from
"
./components/ApiConfig
"
;
import
MsDebugHttpPage
from
"
./components/debug/DebugHttpPage
"
;
import
MsDebugJdbcPage
from
"
./components/debug/DebugJdbcPage
"
;
import
MsDebugTcpPage
from
"
./components/debug/DebugTcpPage
"
;
import
MsDebugDubboPage
from
"
./components/debug/DebugDubboPage
"
;
import
MsRunTestHttpPage
from
"
./components/runtest/RunTestHTTPPage
"
;
import
MsRunTestTcpPage
from
"
./components/runtest/RunTestTCPPage
"
;
import
MsRunTestSqlPage
from
"
./components/runtest/RunTestSQLPage
"
;
import
MsRunTestDubboPage
from
"
./components/runtest/RunTestDubboPage
"
;
import
{
downloadFile
,
getCurrentUser
,
getUUID
,
getCurrentProjectID
}
from
"
@/common/js/utils
"
;
import
MsApiModule
from
"
./components/module/ApiModule
"
;
import
ApiCaseSimpleList
from
"
./components/list/ApiCaseSimpleList
"
;
import
{
PROJECT_NAME
}
from
"
../../../../common/js/constants
"
;
import
MsRunTestHttpPage
from
"
./components/runtest/RunTestHTTPPage
"
;
import
MsRunTestTcpPage
from
"
./components/runtest/RunTestTCPPage
"
;
import
MsRunTestSqlPage
from
"
./components/runtest/RunTestSQLPage
"
;
import
MsRunTestDubboPage
from
"
./components/runtest/RunTestDubboPage
"
;
import
{
downloadFile
,
getCurrentUser
,
getUUID
,
getCurrentProjectID
}
from
"
@/common/js/utils
"
;
import
MsApiModule
from
"
./components/module/ApiModule
"
;
import
ApiCaseSimpleList
from
"
./components/list/ApiCaseSimpleList
"
;
import
{
PROJECT_NAME
}
from
"
../../../../common/js/constants
"
;
export
default
{
name
:
"
ApiDefinition
"
,
computed
:
{
queryDataType
:
function
()
{
let
routeParam
=
this
.
$route
.
params
.
dataType
;
let
redirectIDParam
=
this
.
$route
.
params
.
redirectID
;
this
.
changeRedirectParam
(
redirectIDParam
);
if
(
routeParam
===
'
apiTestCase
'
)
{
this
.
isApiListEnableChange
(
false
);
}
else
{
this
.
isApiListEnableChange
(
true
);
}
return
routeParam
;
},
},
components
:
{
ApiCaseSimpleList
,
MsApiModule
,
MsApiList
,
MsMainContainer
,
MsContainer
,
MsAsideContainer
,
MsApiConfig
,
MsDebugHttpPage
,
MsRunTestHttpPage
,
MsDebugJdbcPage
,
MsDebugTcpPage
,
MsDebugDubboPage
,
MsRunTestTcpPage
,
MsRunTestSqlPage
,
MsRunTestDubboPage
},
props
:
{
visible
:
{
type
:
Boolean
,
default
:
false
,
},
currentRow
:
{
type
:
Object
,
}
},
data
()
{
return
{
redirectID
:
''
,
renderComponent
:
true
,
selectDataRange
:
'
all
'
,
showCasePage
:
true
,
apiDefaultTab
:
'
default
'
,
currentProtocol
:
null
,
currentModule
:
null
,
selectNodeIds
:
[],
currentApi
:
{},
moduleOptions
:
{},
trashEnable
:
false
,
apiTabs
:
[{
title
:
this
.
$t
(
'
api_test.definition.api_title
'
),
name
:
'
default
'
,
type
:
"
list
"
,
closable
:
false
}],
isApiListEnable
:
true
}
},
watch
:
{
currentProtocol
()
{
this
.
handleCommand
(
"
CLOSE_ALL
"
);
},
redirectID
()
{
this
.
renderComponent
=
false
;
this
.
$nextTick
(()
=>
{
// 在 DOM 中添加 my-component 组件
this
.
renderComponent
=
true
;
});
}
},
methods
:
{
changeRedirectParam
(
redirectIDParam
)
{
this
.
redirectID
=
redirectIDParam
;
export
default
{
name
:
"
ApiDefinition
"
,
computed
:
{
queryDataType
:
function
()
{
let
routeParam
=
this
.
$route
.
params
.
dataType
;
let
redirectIDParam
=
this
.
$route
.
params
.
redirectID
;
this
.
changeRedirectParam
(
redirectIDParam
);
if
(
routeParam
===
'
apiTestCase
'
)
{
this
.
isApiListEnableChange
(
false
);
}
else
{
this
.
isApiListEnableChange
(
true
);
}
return
routeParam
;
},
},
isApiListEnableChange
(
data
)
{
this
.
isApiListEnable
=
data
;
components
:
{
ApiCaseSimpleList
,
MsApiModule
,
MsApiList
,
MsMainContainer
,
MsContainer
,
MsAsideContainer
,
MsApiConfig
,
MsDebugHttpPage
,
MsRunTestHttpPage
,
MsDebugJdbcPage
,
MsDebugTcpPage
,
MsDebugDubboPage
,
MsRunTestTcpPage
,
MsRunTestSqlPage
,
MsRunTestDubboPage
},
handleCommand
(
e
)
{
switch
(
e
)
{
case
"
ADD
"
:
this
.
handleTabAdd
(
e
);
break
;
case
"
TEST
"
:
this
.
handleTabsEdit
(
this
.
$t
(
"
commons.api
"
),
e
);
break
;
case
"
CLOSE_ALL
"
:
this
.
handleTabClose
();
break
;
default
:
this
.
handleTabsEdit
(
this
.
$t
(
'
api_test.definition.request.fast_debug
'
),
"
debug
"
);
break
;
props
:
{
visible
:
{
type
:
Boolean
,
default
:
false
,
},
currentRow
:
{
type
:
Object
,
}
},
handleTabAdd
(
e
)
{
if
(
!
getCurrentProjectID
())
{
this
.
$warning
(
this
.
$t
(
'
commons.check_project_tip
'
));
return
;
data
()
{
return
{
redirectID
:
''
,
renderComponent
:
true
,
selectDataRange
:
'
all
'
,
showCasePage
:
true
,
apiDefaultTab
:
'
default
'
,
currentProtocol
:
null
,
currentModule
:
null
,
selectNodeIds
:
[],
currentApi
:
{},
moduleOptions
:
{},
trashEnable
:
false
,
apiTabs
:
[{
title
:
this
.
$t
(
'
api_test.definition.api_title
'
),
name
:
'
default
'
,
type
:
"
list
"
,
closable
:
false
}],
isApiListEnable
:
true
}
let
api
=
{
status
:
"
Underway
"
,
method
:
"
GET
"
,
userId
:
getCurrentUser
().
id
,
url
:
""
,
protocol
:
this
.
currentProtocol
,
environmentId
:
""
};
this
.
handleTabsEdit
(
this
.
$t
(
'
api_test.definition.request.title
'
),
e
,
api
);
},
handleTabClose
()
{
let
tabs
=
this
.
apiTabs
[
0
];
this
.
apiTabs
=
[];
this
.
apiDefaultTab
=
tabs
.
name
;
this
.
apiTabs
.
push
(
tabs
);
this
.
refresh
();
},
handleTabRemove
(
targetName
)
{
let
tabs
=
this
.
apiTabs
;
let
activeName
=
this
.
apiDefaultTab
;
if
(
activeName
===
targetName
)
{
tabs
.
forEach
((
tab
,
index
)
=>
{
if
(
tab
.
name
===
targetName
)
{
let
nextTab
=
tabs
[
index
+
1
]
||
tabs
[
index
-
1
];
if
(
nextTab
)
{
activeName
=
nextTab
.
name
;
}
}
watch
:
{
currentProtocol
()
{
this
.
handleCommand
(
"
CLOSE_ALL
"
);
},
redirectID
()
{
this
.
renderComponent
=
false
;
this
.
$nextTick
(()
=>
{
// 在 DOM 中添加 my-component 组件
this
.
renderComponent
=
true
;
});
}
this
.
apiDefaultTab
=
activeName
;
this
.
apiTabs
=
tabs
.
filter
(
tab
=>
tab
.
name
!==
targetName
);
this
.
refresh
();
},
//创建左侧树的根目录模块
createRootModel
()
{
this
.
$refs
.
nodeTree
.
createRootModel
();
},
handleTabsEdit
(
targetName
,
action
,
api
)
{
if
(
!
getCurrentProjectID
())
{
this
.
$warning
(
this
.
$t
(
'
commons.check_project_tip
'
));
return
;
}
if
(
targetName
===
undefined
||
targetName
===
null
)
{
targetName
=
this
.
$t
(
'
api_test.definition.request.title
'
);
}
let
newTabName
=
getUUID
();
this
.
apiTabs
.
push
({
title
:
targetName
,
name
:
newTabName
,
closable
:
true
,
type
:
action
,
api
:
api
,
});
this
.
apiDefaultTab
=
newTabName
;
},
debug
(
id
)
{
this
.
handleTabsEdit
(
this
.
$t
(
'
api_test.definition.request.fast_debug
'
),
"
debug
"
,
id
);
},
editApi
(
row
)
{
let
name
=
this
.
$t
(
'
api_test.definition.request.edit_api
'
);
if
(
row
.
name
)
{
name
=
this
.
$t
(
'
api_test.definition.request.edit_api
'
)
+
"
-
"
+
row
.
name
;
}
this
.
handleTabsEdit
(
name
,
"
ADD
"
,
row
);
},
handleCase
(
api
)
{
this
.
currentApi
=
api
;
this
.
showCasePage
=
false
;
},
apiCaseClose
()
{
this
.
showCasePage
=
true
;
},
exportAPI
()
{
if
(
!
this
.
isApiListEnable
)
{
this
.
$warning
(
'
用例列表暂不支持导出,请切换成接口列表
'
);
return
;
}
let
obj
=
{
projectName
:
getCurrentProjectID
(),
protocol
:
this
.
currentProtocol
}
if
(
this
.
$refs
.
apiList
[
0
].
selectRows
&&
this
.
$refs
.
apiList
[
0
].
selectRows
.
size
>
0
)
{
let
arr
=
Array
.
from
(
this
.
$refs
.
apiList
[
0
].
selectRows
);
obj
.
data
=
arr
;
this
.
buildApiPath
(
obj
.
data
);
downloadFile
(
"
Metersphere_Api_
"
+
localStorage
.
getItem
(
PROJECT_NAME
)
+
"
.json
"
,
JSON
.
stringify
(
obj
));
}
else
{
let
condition
=
{};
let
url
=
"
/api/definition/list/all
"
;
condition
.
filters
=
[
"
Prepare
"
,
"
Underway
"
,
"
Completed
"
];
condition
.
projectId
=
getCurrentProjectID
();
this
.
$post
(
url
,
condition
,
response
=>
{
obj
.
data
=
response
.
data
;
methods
:
{
changeRedirectParam
(
redirectIDParam
)
{
this
.
redirectID
=
redirectIDParam
;
},
isApiListEnableChange
(
data
)
{
this
.
isApiListEnable
=
data
;
},
addTab
(
tab
)
{
if
(
tab
.
name
===
'
add
'
)
{
this
.
handleCommand
(
"
ADD
"
);
}
},
handleCommand
(
e
)
{
switch
(
e
)
{
case
"
ADD
"
:
this
.
handleTabAdd
(
e
);
break
;
case
"
TEST
"
:
this
.
handleTabsEdit
(
this
.
$t
(
"
commons.api
"
),
e
);
break
;
case
"
CLOSE_ALL
"
:
this
.
handleTabClose
();
break
;
default
:
this
.
handleTabsEdit
(
this
.
$t
(
'
api_test.definition.request.fast_debug
'
),
"
debug
"
);
break
;
}
},
handleTabAdd
(
e
)
{
if
(
!
getCurrentProjectID
())
{
this
.
$warning
(
this
.
$t
(
'
commons.check_project_tip
'
));
return
;
}
let
api
=
{
status
:
"
Underway
"
,
method
:
"
GET
"
,
userId
:
getCurrentUser
().
id
,
url
:
""
,
protocol
:
this
.
currentProtocol
,
environmentId
:
""
};
this
.
handleTabsEdit
(
this
.
$t
(
'
api_test.definition.request.title
'
),
e
,
api
);
},
handleTabClose
()
{
let
tabs
=
this
.
apiTabs
[
0
];
this
.
apiTabs
=
[];
this
.
apiDefaultTab
=
tabs
.
name
;
this
.
apiTabs
.
push
(
tabs
);
this
.
refresh
();
},
handleTabRemove
(
targetName
)
{
let
tabs
=
this
.
apiTabs
;
let
activeName
=
this
.
apiDefaultTab
;
if
(
activeName
===
targetName
)
{
tabs
.
forEach
((
tab
,
index
)
=>
{
if
(
tab
.
name
===
targetName
)
{
let
nextTab
=
tabs
[
index
+
1
]
||
tabs
[
index
-
1
];
if
(
nextTab
)
{
activeName
=
nextTab
.
name
;
}
}
});
}
this
.
apiDefaultTab
=
activeName
;
this
.
apiTabs
=
tabs
.
filter
(
tab
=>
tab
.
name
!==
targetName
);
this
.
refresh
();
},
//创建左侧树的根目录模块
createRootModel
()
{
this
.
$refs
.
nodeTree
.
createRootModel
();
},
handleTabsEdit
(
targetName
,
action
,
api
)
{
if
(
!
getCurrentProjectID
())
{
this
.
$warning
(
this
.
$t
(
'
commons.check_project_tip
'
));
return
;
}
if
(
targetName
===
undefined
||
targetName
===
null
)
{
targetName
=
this
.
$t
(
'
api_test.definition.request.title
'
);
}
let
newTabName
=
getUUID
();
this
.
apiTabs
.
push
({
title
:
targetName
,
name
:
newTabName
,
closable
:
true
,
type
:
action
,
api
:
api
,
});
this
.
apiDefaultTab
=
newTabName
;
},
debug
(
id
)
{
this
.
handleTabsEdit
(
this
.
$t
(
'
api_test.definition.request.fast_debug
'
),
"
debug
"
,
id
);
},
editApi
(
row
)
{
let
name
=
this
.
$t
(
'
api_test.definition.request.edit_api
'
);
if
(
row
.
name
)
{
name
=
this
.
$t
(
'
api_test.definition.request.edit_api
'
)
+
"
-
"
+
row
.
name
;
}
this
.
handleTabsEdit
(
name
,
"
ADD
"
,
row
);
},
handleCase
(
api
)
{
this
.
currentApi
=
api
;
this
.
showCasePage
=
false
;
},
apiCaseClose
()
{
this
.
showCasePage
=
true
;
},
exportAPI
()
{
if
(
!
this
.
isApiListEnable
)
{
this
.
$warning
(
'
用例列表暂不支持导出,请切换成接口列表
'
);
return
;
}
let
obj
=
{
projectName
:
getCurrentProjectID
(),
protocol
:
this
.
currentProtocol
}
if
(
this
.
$refs
.
apiList
[
0
].
selectRows
&&
this
.
$refs
.
apiList
[
0
].
selectRows
.
size
>
0
)
{
let
arr
=
Array
.
from
(
this
.
$refs
.
apiList
[
0
].
selectRows
);
obj
.
data
=
arr
;
this
.
buildApiPath
(
obj
.
data
);
downloadFile
(
"
Metersphere_Api_
"
+
localStorage
.
getItem
(
PROJECT_NAME
)
+
"
.json
"
,
JSON
.
stringify
(
obj
));
}
else
{
let
condition
=
{};
let
url
=
"
/api/definition/list/all
"
;
condition
.
filters
=
[
"
Prepare
"
,
"
Underway
"
,
"
Completed
"
];
condition
.
projectId
=
getCurrentProjectID
();
this
.
$post
(
url
,
condition
,
response
=>
{
obj
.
data
=
response
.
data
;
this
.
buildApiPath
(
obj
.
data
);
downloadFile
(
"
Metersphere_Api_
"
+
localStorage
.
getItem
(
PROJECT_NAME
)
+
"
.json
"
,
JSON
.
stringify
(
obj
));
});
}
},
buildApiPath
(
apis
)
{
apis
.
forEach
((
api
)
=>
{
this
.
moduleOptions
.
forEach
(
item
=>
{
if
(
api
.
moduleId
===
item
.
id
)
{
api
.
modulePath
=
item
.
path
;
}
});
});
}
},
buildApiPath
(
apis
)
{
apis
.
forEach
((
api
)
=>
{
this
.
moduleOptions
.
forEach
(
item
=>
{
if
(
api
.
moduleId
===
item
.
id
)
{
api
.
modulePath
=
item
.
path
;
},
refresh
(
data
)
{
this
.
$refs
.
apiList
[
0
].
initTable
(
data
);
},
setTabTitle
(
data
)
{
for
(
let
index
in
this
.
apiTabs
)
{
let
tab
=
this
.
apiTabs
[
index
];
if
(
tab
.
name
===
this
.
apiDefaultTab
)
{
tab
.
title
=
this
.
$t
(
'
api_test.definition.request.edit_api
'
)
+
"
-
"
+
data
.
name
;
break
;
}
});
});
},
refresh
(
data
)
{
this
.
$refs
.
apiList
[
0
].
initTable
(
data
);
},
setTabTitle
(
data
)
{
for
(
let
index
in
this
.
apiTabs
)
{
let
tab
=
this
.
apiTabs
[
index
];
if
(
tab
.
name
===
this
.
apiDefaultTab
)
{
tab
.
title
=
this
.
$t
(
'
api_test.definition.request.edit_api
'
)
+
"
-
"
+
data
.
name
;
break
;
}
}
},
runTest
(
data
)
{
this
.
setTabTitle
(
data
);
this
.
handleTabsEdit
(
this
.
$t
(
"
commons.api
"
),
"
TEST
"
,
data
);
},
saveApi
(
data
)
{
this
.
setTabTitle
(
data
);
this
.
refresh
(
data
);
},
},
runTest
(
data
)
{
this
.
setTabTitle
(
data
);
this
.
handleTabsEdit
(
this
.
$t
(
"
commons.api
"
),
"
TEST
"
,
data
);
},
saveApi
(
data
)
{
this
.
setTabTitle
(
data
);
this
.
refresh
(
data
);
},
showExecResult
(
row
)
{
this
.
debug
(
row
);
},
nodeChange
(
node
,
nodeIds
,
pNodes
)
{
this
.
selectNodeIds
=
nodeIds
;
},
handleProtocolChange
(
protocol
)
{
this
.
currentProtocol
=
protocol
;
},
setModuleOptions
(
data
)
{
this
.
moduleOptions
=
data
;
},
changeSelectDataRangeAll
(
tableType
)
{
this
.
$route
.
params
.
dataSelectRange
=
'
all
'
;
},
enableTrash
(
data
)
{
this
.
trashEnable
=
data
;
showExecResult
(
row
)
{
this
.
debug
(
row
);
},
nodeChange
(
node
,
nodeIds
,
pNodes
)
{
this
.
selectNodeIds
=
nodeIds
;
},
handleProtocolChange
(
protocol
)
{
this
.
currentProtocol
=
protocol
;
},
setModuleOptions
(
data
)
{
this
.
moduleOptions
=
data
;
},
changeSelectDataRangeAll
(
tableType
)
{
this
.
$route
.
params
.
dataSelectRange
=
'
all
'
;
},
enableTrash
(
data
)
{
this
.
trashEnable
=
data
;
}
}
}
}
</
script
>
<
style
scoped
>
.ms-api-buttion
{
position
:
absolute
;
top
:
100px
;
right
:
4px
;
padding
:
0
;
background
:
0
0
;
border
:
none
;
outline
:
0
;
cursor
:
pointer
;
margin-right
:
10px
;
font-size
:
16px
;
}
.ms-api-div
{
overflow-y
:
auto
;
height
:
calc
(
100vh
-
155px
)
}
.ms-api-div
{
overflow-y
:
auto
;
height
:
calc
(
100vh
-
155px
)
}
/
deep
/
.el-tabs__header
{
margin
:
0
0
5px
;
width
:
calc
(
100%
-
90px
);
}
/
deep
/
.el-main
{
overflow
:
hidden
;
}
/
deep
/
.el-main
{
overflow
:
hidden
;
}
/
deep
/
.el-tabs__header
{
margin
:
0
0
0px
;
/*width: calc(100% - 90px);*/
}
/
deep
/
.el-card
{
/*border: 1px solid #EBEEF5;*/
/*border-style: none;*/
border-top
:
none
;
}
/
deep
/
.el-card
{
/*border: 1px solid #EBEEF5;*/
/*border-style: none;*/
border-top
:
none
;
}
/
deep
/
.api-component
{
margin-top
:
10px
;
}
/
deep
/
.api-component
{
margin-top
:
10px
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录