Compare commits
16 Commits
1af15cca29
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| cca37d9384 | |||
|
793a8e1b84 | ||
| 48309e703c | |||
|
|
971967b791 | ||
|
|
5cafab7534 | ||
| f2bf843984 | |||
|
|
f7cdff31ba | ||
| 69d9d9f622 | |||
|
|
3b359a7fd5 | ||
| 7d0f8a5aef | |||
|
|
f05cf53b85 | ||
| 3bf6f53367 | |||
| 238f7bb4ad | |||
|
|
dca942bc8f | ||
| 8a47183662 | |||
|
|
6e9673f7dd |
27
index.html
27
index.html
@@ -6,18 +6,37 @@
|
||||
<title>效能平台</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/wangeditor@4.7.15/dist/css/style.css" />
|
||||
<style>
|
||||
body{
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #070b16;
|
||||
color: #dbeafe;
|
||||
}
|
||||
html{
|
||||
height: 100%;
|
||||
body.theme-light {
|
||||
background: #eef4ff;
|
||||
color: #1f2937;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
var theme = 'dark';
|
||||
try {
|
||||
theme = localStorage.getItem('uiTheme') || 'dark';
|
||||
} catch (e) {}
|
||||
document.documentElement.className = theme === 'light' ? 'theme-light' : 'theme-dark';
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.body.classList.remove('theme-dark', 'theme-light');
|
||||
document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="theme-dark">
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
14
nginx.conf
14
nginx.conf
@@ -1,10 +1,24 @@
|
||||
# 发版后避免浏览器长期使用旧 index 引用旧 js/css
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
|
||||
client_max_body_size 100m;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location = /index.html {
|
||||
add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
|
||||
add_header Pragma "no-cache" always;
|
||||
}
|
||||
|
||||
location ^~ /static/ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable" always;
|
||||
access_log off;
|
||||
}
|
||||
|
||||
location /it/api/ {
|
||||
proxy_pass http://172.18.0.1:5010;
|
||||
proxy_set_header Host $host;
|
||||
|
||||
464
src/App.vue
464
src/App.vue
@@ -10,6 +10,7 @@ import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'
|
||||
export default {
|
||||
name: 'App',
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
const authUser = JSON.parse(localStorage.getItem('authUser') || 'null')
|
||||
const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]')
|
||||
if (authUser) {
|
||||
@@ -20,6 +21,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
const theme = localStorage.getItem('uiTheme') || 'dark'
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
loadUserMenus(authUser) {
|
||||
const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined
|
||||
if (!roleId) {
|
||||
@@ -34,7 +40,465 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #070b16;
|
||||
color: #dbeafe;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
|
||||
}
|
||||
|
||||
#app{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button,
|
||||
.el-button,
|
||||
.el-link,
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-color: rgba(148, 163, 184, 0.2);
|
||||
background: #111827;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-table,
|
||||
.el-table__expanded-cell {
|
||||
background-color: #111827 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table tr,
|
||||
.el-table td {
|
||||
background-color: #111827 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table thead,
|
||||
.el-table__header-wrapper th,
|
||||
.el-table__fixed-header-wrapper th {
|
||||
background: #1f2937 !important;
|
||||
color: #f8fafc !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-table .cell,
|
||||
.el-table th > .cell,
|
||||
.el-table__body-wrapper,
|
||||
.el-table__fixed-body-wrapper {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.el-table td,
|
||||
.el-table th.is-leaf {
|
||||
border-bottom-color: rgba(148, 163, 184, 0.18) !important;
|
||||
}
|
||||
|
||||
.el-table--border,
|
||||
.el-table--group,
|
||||
.el-table--border td,
|
||||
.el-table--border th,
|
||||
.el-table__fixed-right-patch {
|
||||
border-color: rgba(148, 163, 184, 0.18) !important;
|
||||
}
|
||||
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #162033 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td,
|
||||
.el-table__body tr.hover-row > td,
|
||||
.el-table__body tr.hover-row.current-row > td,
|
||||
.el-table__body tr.hover-row.el-table__row--striped > td,
|
||||
.el-table__body tr.hover-row.el-table__row--striped.current-row > td {
|
||||
background-color: #233149 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
.el-table__body tr.current-row > td,
|
||||
.el-table__body tr.current-row:hover > td {
|
||||
background-color: rgba(56, 189, 248, 0.16) !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
.el-table__fixed,
|
||||
.el-table__fixed-right,
|
||||
.el-table__fixed::before,
|
||||
.el-table__fixed-right::before {
|
||||
background-color: #111827 !important;
|
||||
}
|
||||
|
||||
.el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: rgba(148, 163, 184, 0.18) !important;
|
||||
}
|
||||
|
||||
.el-form-item__label,
|
||||
.el-checkbox,
|
||||
.el-radio,
|
||||
.el-dialog__body,
|
||||
.el-pagination,
|
||||
.el-pagination button,
|
||||
.el-pagination span:not([class*=suffix]),
|
||||
.el-select-dropdown__item,
|
||||
.el-dropdown-menu__item {
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner,
|
||||
.el-select .el-input__inner,
|
||||
.el-date-editor .el-input__inner {
|
||||
background-color: #0f172a;
|
||||
border-color: rgba(148, 163, 184, 0.28);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-input__inner::placeholder,
|
||||
.el-textarea__inner::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.el-input__inner:hover,
|
||||
.el-textarea__inner:hover,
|
||||
.el-input__inner:focus,
|
||||
.el-textarea__inner:focus {
|
||||
border-color: #38bdf8;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-drawer,
|
||||
.el-message-box {
|
||||
background: #111827;
|
||||
color: #e5e7eb;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
.el-dialog__title,
|
||||
.el-message-box__title {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-dialog__footer,
|
||||
.el-message-box__header,
|
||||
.el-message-box__content {
|
||||
border-color: rgba(148, 163, 184, 0.16);
|
||||
}
|
||||
|
||||
.el-select-dropdown,
|
||||
.el-dropdown-menu,
|
||||
.el-picker-panel {
|
||||
background: #111827;
|
||||
border-color: rgba(148, 163, 184, 0.22);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover,
|
||||
.el-dropdown-menu__item:hover {
|
||||
background-color: #1e293b;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pager li {
|
||||
background: #111827;
|
||||
color: #dbeafe;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.el-pager li.active {
|
||||
color: #38bdf8;
|
||||
border-color: rgba(56, 189, 248, 0.5);
|
||||
}
|
||||
|
||||
.el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) {
|
||||
border-color: rgba(56, 189, 248, 0.28);
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
color: #bae6fd;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--success {
|
||||
border-color: rgba(103, 194, 58, 0.45);
|
||||
background: rgba(103, 194, 58, 0.16);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--warning {
|
||||
border-color: rgba(230, 162, 60, 0.45);
|
||||
background: rgba(230, 162, 60, 0.16);
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--danger {
|
||||
border-color: rgba(245, 108, 108, 0.45);
|
||||
background: rgba(245, 108, 108, 0.16);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--info {
|
||||
border-color: rgba(148, 163, 184, 0.35);
|
||||
background: rgba(148, 163, 184, 0.14);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
background: #162033;
|
||||
border-bottom-color: rgba(148, 163, 184, 0.18);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover,
|
||||
.el-tabs__item.is-active {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.el-popover,
|
||||
.el-tooltip__popper.is-light {
|
||||
background: #111827;
|
||||
border-color: rgba(148, 163, 184, 0.22);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-tree,
|
||||
.el-tree-node__content {
|
||||
background: transparent;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: #1e293b;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background-color: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
body.theme-light {
|
||||
background: #eef4ff;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
body.theme-light .el-card {
|
||||
border-color: #dbe5f3;
|
||||
background: #ffffff;
|
||||
color: #1f2937;
|
||||
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
body.theme-light .el-table,
|
||||
body.theme-light .el-table__expanded-cell {
|
||||
background-color: #ffffff !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table th,
|
||||
body.theme-light .el-table tr,
|
||||
body.theme-light .el-table td {
|
||||
background-color: #ffffff !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table th,
|
||||
body.theme-light .el-table thead,
|
||||
body.theme-light .el-table__header-wrapper th,
|
||||
body.theme-light .el-table__fixed-header-wrapper th {
|
||||
background: #f1f6ff !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #f8fbff !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table--enable-row-hover .el-table__body tr:hover > td,
|
||||
body.theme-light .el-table__body tr.hover-row > td,
|
||||
body.theme-light .el-table__body tr.hover-row.current-row > td,
|
||||
body.theme-light .el-table__body tr.hover-row.el-table__row--striped > td,
|
||||
body.theme-light .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
|
||||
background-color: #eaf2ff !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table__body tr.current-row > td,
|
||||
body.theme-light .el-table__body tr.current-row:hover > td {
|
||||
background-color: #dbeafe !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table td,
|
||||
body.theme-light .el-table th.is-leaf,
|
||||
body.theme-light .el-table--border,
|
||||
body.theme-light .el-table--group,
|
||||
body.theme-light .el-table--border td,
|
||||
body.theme-light .el-table--border th,
|
||||
body.theme-light .el-table__fixed-right-patch {
|
||||
border-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table__fixed,
|
||||
body.theme-light .el-table__fixed-right,
|
||||
body.theme-light .el-table__fixed::before,
|
||||
body.theme-light .el-table__fixed-right::before {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table::before,
|
||||
body.theme-light .el-table--group::after,
|
||||
body.theme-light .el-table--border::after {
|
||||
background-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-form-item__label,
|
||||
body.theme-light .el-checkbox,
|
||||
body.theme-light .el-radio,
|
||||
body.theme-light .el-dialog__body,
|
||||
body.theme-light .el-pagination,
|
||||
body.theme-light .el-pagination button,
|
||||
body.theme-light .el-pagination span:not([class*=suffix]),
|
||||
body.theme-light .el-select-dropdown__item,
|
||||
body.theme-light .el-dropdown-menu__item {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
body.theme-light .el-input__inner,
|
||||
body.theme-light .el-textarea__inner,
|
||||
body.theme-light .el-select .el-input__inner,
|
||||
body.theme-light .el-date-editor .el-input__inner {
|
||||
background-color: #ffffff;
|
||||
border-color: #d8e1ef;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .el-input__inner::placeholder,
|
||||
body.theme-light .el-textarea__inner::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
body.theme-light .el-dialog,
|
||||
body.theme-light .el-drawer,
|
||||
body.theme-light .el-message-box,
|
||||
body.theme-light .el-select-dropdown,
|
||||
body.theme-light .el-dropdown-menu,
|
||||
body.theme-light .el-picker-panel,
|
||||
body.theme-light .el-popover,
|
||||
body.theme-light .el-tooltip__popper.is-light {
|
||||
background: #ffffff;
|
||||
border-color: #dbe5f3;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
body.theme-light .el-dialog__title,
|
||||
body.theme-light .el-message-box__title,
|
||||
body.theme-light .el-card__header {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .el-card__header {
|
||||
background: #f8fbff;
|
||||
border-bottom-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .el-select-dropdown__item.hover,
|
||||
body.theme-light .el-select-dropdown__item:hover,
|
||||
body.theme-light .el-dropdown-menu__item:hover,
|
||||
body.theme-light .el-tree-node__content:hover,
|
||||
body.theme-light .el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: #eaf2ff;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .el-pagination .btn-prev,
|
||||
body.theme-light .el-pagination .btn-next,
|
||||
body.theme-light .el-pager li {
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .el-tabs__item {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
body.theme-light .el-tabs__item:hover,
|
||||
body.theme-light .el-tabs__item.is-active,
|
||||
body.theme-light .el-select-dropdown__item.selected,
|
||||
body.theme-light .el-pager li.active {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
body.theme-light .el-tabs__nav-wrap::after {
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
body.theme-light .el-tag.el-tag--success {
|
||||
border-color: #e1f3d8;
|
||||
background: #f0f9eb;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
body.theme-light .el-tag.el-tag--warning {
|
||||
border-color: #faecd8;
|
||||
background: #fdf6ec;
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
body.theme-light .el-tag.el-tag--danger {
|
||||
border-color: #fde2e2;
|
||||
background: #fef0f0;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
body.theme-light .el-tag.el-tag--info {
|
||||
border-color: #e9e9eb;
|
||||
background: #f4f4f5;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
body.theme-light .el-tree,
|
||||
body.theme-light .el-tree-node__content {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
body.theme-light .el-loading-mask {
|
||||
background-color: rgba(248, 250, 252, 0.72);
|
||||
}
|
||||
</style>
|
||||
|
||||
55
src/api/automationApi.js
Normal file
55
src/api/automationApi.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/** POST /automation/plan/run — 文档字段为 camelCase */
|
||||
export function runAutomationPlan(data) {
|
||||
return request({
|
||||
url: '/automation/plan/run',
|
||||
method: 'post',
|
||||
data: data || {}
|
||||
})
|
||||
}
|
||||
|
||||
/** POST /automation/case/run */
|
||||
export function runAutomationCase(data) {
|
||||
return request({
|
||||
url: '/automation/case/run',
|
||||
method: 'post',
|
||||
data: data || {}
|
||||
})
|
||||
}
|
||||
|
||||
/** GET /automation/execution/list */
|
||||
export function getAutomationExecutionList(params) {
|
||||
return request({
|
||||
url: '/automation/execution/list',
|
||||
method: 'get',
|
||||
params: params || {}
|
||||
})
|
||||
}
|
||||
|
||||
/** GET /automation/execution/detail */
|
||||
export function getAutomationExecutionDetail(executionId) {
|
||||
return request({
|
||||
url: '/automation/execution/detail',
|
||||
method: 'get',
|
||||
params: { executionId }
|
||||
})
|
||||
}
|
||||
|
||||
/** GET /automation/execution/case/list */
|
||||
export function getAutomationExecutionCaseList(params) {
|
||||
return request({
|
||||
url: '/automation/execution/case/list',
|
||||
method: 'get',
|
||||
params: params || {}
|
||||
})
|
||||
}
|
||||
|
||||
/** POST /automation/execution/poll — body 可选 { executionId }，不传则轮询所有待执行任务 */
|
||||
export function postAutomationExecutionPoll(data) {
|
||||
return request({
|
||||
url: '/automation/execution/poll',
|
||||
method: 'post',
|
||||
data: data || {}
|
||||
})
|
||||
}
|
||||
@@ -82,6 +82,32 @@ export function deleteCase(projectId, caseId) {
|
||||
})
|
||||
}
|
||||
|
||||
/** 恢复状态为 0 的用例为正常（1），POST body: { caseIds: number[] } */
|
||||
export function restoreCases(caseIds) {
|
||||
const raw = Array.isArray(caseIds) ? caseIds : [caseIds]
|
||||
const caseIdsNorm = raw
|
||||
.map(id => Number(id))
|
||||
.filter(id => Number.isFinite(id) && id > 0)
|
||||
return request({
|
||||
url: '/case/restore',
|
||||
method: 'post',
|
||||
data: { caseIds: caseIdsNorm }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据手工用例生成 UI / 接口自动化脚本（字段均为驼峰）。
|
||||
* 典型 body：projectId, caseId, automationType, prompt, caseKey, moduleName, productName,
|
||||
* projectName, steps, expectedResults
|
||||
*/
|
||||
export function generateCaseAutomation(data) {
|
||||
return request({
|
||||
url: '/case/generate-automation',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function createCaseSnapshot(projectId, caseId) {
|
||||
return request({
|
||||
url: '/case/snapshot/create',
|
||||
|
||||
107
src/api/documentApi.js
Normal file
107
src/api/documentApi.js
Normal file
@@ -0,0 +1,107 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/** 文档列表 */
|
||||
export function getDocumentList(params) {
|
||||
return request({
|
||||
url: '/document/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/** 文档详情 */
|
||||
export function getDocumentDetail(params) {
|
||||
return request({
|
||||
url: '/document/detail',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/** 上传 PDF（multipart，单文件一次请求） */
|
||||
export function uploadDocumentPdf({ file, productId, projectId, createdBy }) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('productId', productId)
|
||||
formData.append('projectId', projectId)
|
||||
if (createdBy != null && createdBy !== '') {
|
||||
formData.append('createdBy', createdBy)
|
||||
}
|
||||
return request({
|
||||
url: '/document/upload',
|
||||
method: 'post',
|
||||
data: formData
|
||||
})
|
||||
}
|
||||
|
||||
/** 创建文档 */
|
||||
export function createDocument(data) {
|
||||
return request({
|
||||
url: '/document/create',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新文档 */
|
||||
export function updateDocument(data) {
|
||||
return request({
|
||||
url: '/document/update',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 删除文档 */
|
||||
export function deleteDocument(data) {
|
||||
return request({
|
||||
url: '/document/delete',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 刷新飞书文档 */
|
||||
export function refreshDocument(data) {
|
||||
return request({
|
||||
url: '/document/refresh',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 生成测试用例（预览） */
|
||||
export function generateDocumentCases(data) {
|
||||
return request({
|
||||
url: '/document/generate-cases',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 模块匹配 */
|
||||
export function matchDocumentModules(data) {
|
||||
return request({
|
||||
url: '/document/match-modules',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 导入测试用例 */
|
||||
export function importDocumentCases(data) {
|
||||
return request({
|
||||
url: '/document/import-cases',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 批量创建模块 */
|
||||
export function batchCreateDocumentModules(data) {
|
||||
return request({
|
||||
url: '/document/batch-create-modules',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -24,13 +24,13 @@ export function updatePlan(projectId, planId, data) {
|
||||
})
|
||||
}
|
||||
|
||||
export function deletePlan(projectId, planId) {
|
||||
/** POST /plan/delete，body 传 planId */
|
||||
export function deletePlan(planId) {
|
||||
return request({
|
||||
url: '/plan/delete',
|
||||
method: 'post',
|
||||
data: {
|
||||
project_id: projectId,
|
||||
id: planId
|
||||
planId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
43
src/api/skillRuleApi.js
Normal file
43
src/api/skillRuleApi.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/** Skill */
|
||||
export function getSkillList(params) {
|
||||
return request({ url: '/skill/list', method: 'get', params: params || {} })
|
||||
}
|
||||
|
||||
export function getSkillDetail(skillId) {
|
||||
return request({ url: '/skill/detail', method: 'get', params: { skillId } })
|
||||
}
|
||||
|
||||
export function createSkill(data) {
|
||||
return request({ url: '/skill/create', method: 'post', data })
|
||||
}
|
||||
|
||||
export function updateSkill(data) {
|
||||
return request({ url: '/skill/update', method: 'post', data })
|
||||
}
|
||||
|
||||
export function deleteSkill(skillId) {
|
||||
return request({ url: '/skill/delete', method: 'post', data: { skillId } })
|
||||
}
|
||||
|
||||
/** Business rule */
|
||||
export function getBusinessRuleList(params) {
|
||||
return request({ url: '/business-rule/list', method: 'get', params: params || {} })
|
||||
}
|
||||
|
||||
export function getBusinessRuleDetail(ruleId) {
|
||||
return request({ url: '/business-rule/detail', method: 'get', params: { ruleId } })
|
||||
}
|
||||
|
||||
export function createBusinessRule(data) {
|
||||
return request({ url: '/business-rule/create', method: 'post', data })
|
||||
}
|
||||
|
||||
export function updateBusinessRule(data) {
|
||||
return request({ url: '/business-rule/update', method: 'post', data })
|
||||
}
|
||||
|
||||
export function deleteBusinessRule(ruleId) {
|
||||
return request({ url: '/business-rule/delete', method: 'post', data: { ruleId } })
|
||||
}
|
||||
@@ -210,8 +210,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.effekt-home {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -219,37 +218,80 @@ export default {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.greet-card,
|
||||
.work-card,
|
||||
.links-card {
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
overflow: hidden;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.greet-card,
|
||||
.work-card {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
min-height: 160px;
|
||||
min-height: 174px;
|
||||
}
|
||||
|
||||
.greet-card {
|
||||
position: relative;
|
||||
background: radial-gradient(circle at 88% 16%, rgba(103, 232, 249, 0.28), transparent 28%), linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(15, 23, 42, 0.96) 62%, rgba(8, 13, 27, 0.98) 100%);
|
||||
color: #fff;
|
||||
border-color: rgba(103, 232, 249, 0.22);
|
||||
}
|
||||
|
||||
.greet-card:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -44px;
|
||||
bottom: -54px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(56, 189, 248, 0.26), transparent 68%);
|
||||
}
|
||||
|
||||
.greet-card >>> .el-card__body,
|
||||
.work-card >>> .el-card__body,
|
||||
.links-card >>> .el-card__body {
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.greet-line {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #f8fbff;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.greet-date {
|
||||
color: #909399;
|
||||
color: #bae6fd;
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.greet-progress-label {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
color: rgba(224, 242, 254, 0.9);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.greet-progress >>> .el-progress-bar__outer {
|
||||
background-color: rgba(15, 23, 42, 0.68);
|
||||
}
|
||||
|
||||
.greet-progress >>> .el-progress-bar__inner {
|
||||
background: linear-gradient(90deg, #22d3ee 0%, #6366f1 100%);
|
||||
}
|
||||
|
||||
.greet-progress-tip {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
margin-top: 6px;
|
||||
color: #a7f3d0;
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -257,32 +299,52 @@ export default {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.work-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
.greet-login-tip >>> .el-link.el-link--primary {
|
||||
color: #67e8f9;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.work-card-title,
|
||||
.links-card-title {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #e0f2fe;
|
||||
margin-bottom: 18px;
|
||||
padding-left: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.work-card-title:before,
|
||||
.links-card-title:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #67e8f9 0%, #6366f1 100%);
|
||||
box-shadow: 0 0 14px rgba(103, 232, 249, 0.55);
|
||||
}
|
||||
|
||||
.work-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.work-stat {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
padding: 12px 8px;
|
||||
border-radius: 8px;
|
||||
background: #f5f9ff;
|
||||
border: 1px solid #e4ecfb;
|
||||
min-width: 126px;
|
||||
text-align: left;
|
||||
padding: 18px;
|
||||
border-radius: 16px;
|
||||
background: #162033;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
cursor: default;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.work-stat--click {
|
||||
@@ -290,38 +352,35 @@ export default {
|
||||
}
|
||||
|
||||
.work-stat--click:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
|
||||
border-color: rgba(56, 189, 248, 0.52);
|
||||
background: #1e293b;
|
||||
box-shadow: 0 0 24px rgba(56, 189, 248, 0.14), 0 18px 34px rgba(0, 0, 0, 0.24);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.work-stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
line-height: 1.2;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
color: #67e8f9;
|
||||
line-height: 1.1;
|
||||
text-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
|
||||
}
|
||||
|
||||
.work-stat-label {
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
color: #dbeafe;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.work-stat-hint {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #8fb3d9;
|
||||
}
|
||||
|
||||
.links-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.links-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
@@ -330,25 +389,28 @@ export default {
|
||||
}
|
||||
|
||||
.home-desc {
|
||||
margin: 0 0 16px;
|
||||
color: #606266;
|
||||
margin: 0 0 18px;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.project-block {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding: 18px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
border-radius: 16px;
|
||||
background: #162033;
|
||||
}
|
||||
|
||||
.project-block:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-weight: 800;
|
||||
color: #e0f2fe;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
@@ -358,12 +420,95 @@ export default {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.link-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-label {
|
||||
min-width: 140px;
|
||||
color: #606266;
|
||||
min-width: 150px;
|
||||
color: #b7c9df;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.doc-link >>> span {
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
body.theme-light .greet-card,
|
||||
body.theme-light .work-card,
|
||||
body.theme-light .links-card {
|
||||
background: #ffffff;
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
body.theme-light .greet-card {
|
||||
background: radial-gradient(circle at 88% 16%, rgba(96, 165, 250, 0.24), transparent 28%), linear-gradient(135deg, #2563eb 0%, #3b82f6 58%, #60a5fa 100%);
|
||||
color: #ffffff;
|
||||
border-color: rgba(96, 165, 250, 0.42);
|
||||
}
|
||||
|
||||
body.theme-light .greet-card:after {
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 68%);
|
||||
}
|
||||
|
||||
body.theme-light .greet-date,
|
||||
body.theme-light .greet-progress-label {
|
||||
color: rgba(239, 246, 255, 0.92);
|
||||
}
|
||||
|
||||
body.theme-light .greet-progress >>> .el-progress-bar__outer {
|
||||
background-color: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
body.theme-light .greet-login-tip >>> .el-link.el-link--primary {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.theme-light .work-card-title,
|
||||
body.theme-light .links-card-title,
|
||||
body.theme-light .project-title {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .work-card-title:before,
|
||||
body.theme-light .links-card-title:before {
|
||||
background: linear-gradient(180deg, #2563eb 0%, #38bdf8 100%);
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
body.theme-light .work-stat,
|
||||
body.theme-light .project-block {
|
||||
background: #f8fbff;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .work-stat--click:hover {
|
||||
background: #eef6ff;
|
||||
border-color: #bfdbfe;
|
||||
box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
body.theme-light .work-stat-value {
|
||||
color: #2563eb;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
body.theme-light .work-stat-label,
|
||||
body.theme-light .link-label {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
body.theme-light .work-stat-hint,
|
||||
body.theme-light .home-desc {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
body.theme-light .doc-link >>> span {
|
||||
color: #2563eb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
<template>
|
||||
<div class="auto-test-main" style="height: 100%">
|
||||
<el-container style="height: 100%">
|
||||
<div class="aside" style="height: 100%">
|
||||
<div class="auto-test-main" :class="themeClass">
|
||||
<el-container class="app-shell">
|
||||
<aside class="aside" :class="{ 'aside--collapse': isCollapse }">
|
||||
<div class="brand-panel">
|
||||
<div class="brand-mark">效</div>
|
||||
<div v-show="!isCollapse" class="brand-copy">
|
||||
<div class="brand-name">{{ systemName }}</div>
|
||||
<div class="brand-subtitle">Quality Workspace</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-menu-scroll">
|
||||
<el-menu
|
||||
:default-active="$route.path"
|
||||
class="el-menu-vertical-demo"
|
||||
:collapse="isCollapse"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b"
|
||||
:background-color="menuBackgroundColor"
|
||||
:text-color="menuTextColor"
|
||||
:active-text-color="menuActiveTextColor"
|
||||
:router="true">
|
||||
<template v-for="menu in displayMenus">
|
||||
<el-submenu v-if="menu.children && menu.children.length > 0" :index="menuIndex(menu)" :key="'sub-' + menuKey(menu)">
|
||||
@@ -41,19 +49,25 @@
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-container>
|
||||
<el-header class="header" style="background-color: rgba(230, 226, 215, 0.9)">
|
||||
</div>
|
||||
</aside>
|
||||
<el-container class="workspace-shell">
|
||||
<el-header class="header">
|
||||
<div class="header-left">
|
||||
<div class="header-icon">
|
||||
<i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i>
|
||||
<i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i>
|
||||
</div>
|
||||
<button class="header-icon" type="button" @click="setCollapse">
|
||||
<i v-if="isCollapse" class="el-icon-s-unfold"></i>
|
||||
<i v-else class="el-icon-s-fold"></i>
|
||||
</button>
|
||||
<div class="system-name">
|
||||
<span>{{ systemName }}</span>
|
||||
<small>测试协作与效能管理平台</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-user">
|
||||
<button class="theme-switch" type="button" @click="toggleTheme">
|
||||
<i :class="themeIcon"></i>
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
<el-dropdown v-if="currentUser" trigger="click" @command="handleUserCommand">
|
||||
<span class="user-name-dropdown">
|
||||
{{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
@@ -65,7 +79,7 @@
|
||||
<span v-else class="login-label" @click="goLogin">登录</span>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-main class="main-canvas">
|
||||
<router-view class="main-form" name="Manage"></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
@@ -79,9 +93,13 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isCollapse: false,
|
||||
systemName: '效能平台'
|
||||
systemName: '效能平台',
|
||||
uiTheme: localStorage.getItem('uiTheme') || 'dark'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
},
|
||||
computed: {
|
||||
currentUser() {
|
||||
return this.$store.state.currentUser
|
||||
@@ -97,20 +115,48 @@ export default {
|
||||
const filteredMenus = this.filterMenus(this.userMenus)
|
||||
const menus = this.renameTestPlatformToCycle(filteredMenus)
|
||||
const sorted = this.sortMenusByProductOrder(menus)
|
||||
const hasHome = sorted.some(menu => menu.path === '/effekt' || menu.name === '首页')
|
||||
const withSkillMenu = this.injectBusinessSkillConfigMenu(sorted)
|
||||
const hasHome = withSkillMenu.some(menu => menu.path === '/effekt' || menu.name === '首页')
|
||||
if (hasHome) {
|
||||
return sorted
|
||||
return withSkillMenu
|
||||
}
|
||||
return [homeMenu, ...sorted]
|
||||
return [homeMenu, ...withSkillMenu]
|
||||
},
|
||||
displayName() {
|
||||
if (!this.currentUser) {
|
||||
return ''
|
||||
}
|
||||
return this.currentUser.username || this.currentUser.realName || '未命名用户'
|
||||
},
|
||||
themeClass() {
|
||||
return this.uiTheme === 'light' ? 'theme-shell-light' : 'theme-shell-dark'
|
||||
},
|
||||
themeLabel() {
|
||||
return this.uiTheme === 'light' ? '深色' : '浅色'
|
||||
},
|
||||
themeIcon() {
|
||||
return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
|
||||
},
|
||||
menuBackgroundColor() {
|
||||
return this.uiTheme === 'light' ? '#ffffff' : '#07111f'
|
||||
},
|
||||
menuTextColor() {
|
||||
return this.uiTheme === 'light' ? '#64748b' : '#93a9c7'
|
||||
},
|
||||
menuActiveTextColor() {
|
||||
return this.uiTheme === 'light' ? '#ffffff' : '#e0f2fe'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
toggleTheme() {
|
||||
this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
|
||||
localStorage.setItem('uiTheme', this.uiTheme)
|
||||
this.applyTheme()
|
||||
},
|
||||
setCollapse() {
|
||||
this.isCollapse = !this.isCollapse
|
||||
},
|
||||
@@ -129,6 +175,7 @@ export default {
|
||||
'/system/user': '/system/user',
|
||||
'/system/menu': '/system/menu',
|
||||
'/system/permission': '/system/permission',
|
||||
'/test-platform/skill-rules': '/test-platform/skill-rules',
|
||||
'/bug': '/bug/list',
|
||||
'/bug/list': '/bug/list',
|
||||
'/bug/detail': '/bug/detail',
|
||||
@@ -166,6 +213,7 @@ export default {
|
||||
'产品管理': 'el-icon-box',
|
||||
'项目管理': 'el-icon-s-management',
|
||||
'用例管理': 'el-icon-document',
|
||||
'业务技能配置': 'el-icon-collection',
|
||||
'测试计划': 'el-icon-date',
|
||||
'测试报告': 'el-icon-data-line',
|
||||
'测试工具': 'el-icon-s-tools',
|
||||
@@ -216,6 +264,59 @@ export default {
|
||||
return Object.assign({}, item, { name, children })
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 在「用例周期」分组下、「用例管理」上方插入「业务技能配置」（与后端菜单并存时去重）。
|
||||
*/
|
||||
injectBusinessSkillConfigMenu(menus) {
|
||||
const INJECT_PATH = '/test-platform/skill-rules'
|
||||
const INJECT_KEY = '__inject_business_skill__'
|
||||
const makeItem = () => ({
|
||||
name: '业务技能配置',
|
||||
path: INJECT_PATH,
|
||||
icon: 'el-icon-collection',
|
||||
menuId: INJECT_KEY,
|
||||
id: INJECT_KEY,
|
||||
visible: 1,
|
||||
status: 1,
|
||||
children: []
|
||||
})
|
||||
const hasInjected = list =>
|
||||
(list || []).some(c => c.path === INJECT_PATH || c.menuId === INJECT_KEY || c.id === INJECT_KEY)
|
||||
const mergeCycleChildren = children => {
|
||||
if (!children || !children.length) return children || []
|
||||
if (hasInjected(children)) {
|
||||
return children.map(c =>
|
||||
c.children && c.children.length
|
||||
? Object.assign({}, c, { children: this.injectBusinessSkillConfigMenu(c.children) })
|
||||
: c
|
||||
)
|
||||
}
|
||||
const next = children.map(c =>
|
||||
c.children && c.children.length
|
||||
? Object.assign({}, c, { children: this.injectBusinessSkillConfigMenu(c.children) })
|
||||
: c
|
||||
)
|
||||
const idx = next.findIndex(c => {
|
||||
const p = String(c.path || '')
|
||||
return p === '/test-platform/case' || c.name === '用例管理'
|
||||
})
|
||||
if (idx >= 0) {
|
||||
next.splice(idx, 0, makeItem())
|
||||
} else {
|
||||
next.unshift(makeItem())
|
||||
}
|
||||
return next
|
||||
}
|
||||
return (menus || []).map(item => {
|
||||
if (item.name === '用例周期' && item.children && item.children.length) {
|
||||
return Object.assign({}, item, { children: mergeCycleChildren(item.children.slice()) })
|
||||
}
|
||||
if (item.children && item.children.length) {
|
||||
return Object.assign({}, item, { children: this.injectBusinessSkillConfigMenu(item.children) })
|
||||
}
|
||||
return item
|
||||
})
|
||||
},
|
||||
/** 左侧栏顶级顺序：首页 → 用例周期 → Bug管理 → 造数 → 系统管理 → 其它 */
|
||||
representativeMenuPath(menu) {
|
||||
const direct = String((menu && menu.path) || '').trim()
|
||||
@@ -264,6 +365,7 @@ export default {
|
||||
if (command === 'logout') {
|
||||
localStorage.removeItem('authUser')
|
||||
localStorage.removeItem('accessToken')
|
||||
localStorage.removeItem('refreshToken')
|
||||
localStorage.removeItem('userMenus')
|
||||
this.$store.commit('ClearCurrentUser')
|
||||
this.$message.success('已退出登录')
|
||||
@@ -276,49 +378,386 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.auto-test-main {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #070b16;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
height: 100vh;
|
||||
min-width: 1100px;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.22), transparent 30%), #070b16;
|
||||
}
|
||||
|
||||
.aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, #07111f 0%, #081426 46%, #050914 100%);
|
||||
box-shadow: 12px 0 38px rgba(0, 0, 0, 0.42), inset -1px 0 0 rgba(56, 189, 248, 0.14);
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
.aside-menu-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.aside-menu-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.aside-menu-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background: rgba(148, 163, 184, 0.35);
|
||||
}
|
||||
|
||||
.aside-menu-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.aside--collapse .brand-panel {
|
||||
justify-content: center;
|
||||
padding: 18px 8px;
|
||||
}
|
||||
|
||||
.brand-panel {
|
||||
flex-shrink: 0;
|
||||
height: 72px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 18px;
|
||||
color: #e0f2fe;
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.96) 100%);
|
||||
border-bottom: 1px solid rgba(56, 189, 248, 0.18);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 0 22px rgba(56, 189, 248, 0.48), 0 12px 30px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: #67e8f9;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
/*min-height: 400px;*/
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
padding: 0 20px 0 0;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo {
|
||||
height: 100%;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo >>> .el-menu-item,
|
||||
.el-menu-vertical-demo >>> .el-submenu__title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 4px 10px;
|
||||
border-radius: 13px;
|
||||
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo >>> .el-menu-item.is-active {
|
||||
color: #e0f2fe !important;
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.95) 0%, rgba(79, 70, 229, 0.95) 100%) !important;
|
||||
box-shadow: 0 0 24px rgba(56, 189, 248, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo >>> .el-menu-item:hover,
|
||||
.el-menu-vertical-demo >>> .el-submenu__title:hover {
|
||||
background: rgba(14, 165, 233, 0.12) !important;
|
||||
color: #e0f2fe !important;
|
||||
}
|
||||
|
||||
.workspace-shell {
|
||||
min-width: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 64px !important;
|
||||
line-height: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px 0 18px !important;
|
||||
background: rgba(8, 14, 30, 0.88);
|
||||
border-bottom: 1px solid rgba(56, 189, 248, 0.18);
|
||||
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.28);
|
||||
border-radius: 12px;
|
||||
color: #7dd3fc;
|
||||
background: rgba(14, 165, 233, 0.1);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.header-icon:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.system-name span {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
font-weight: 800;
|
||||
color: #e0f2fe;
|
||||
}
|
||||
|
||||
.system-name small {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #c4d7f2;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-label {
|
||||
color: #409EFF;
|
||||
.theme-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-switch:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.user-name-dropdown {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-label {
|
||||
color: #67e8f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-canvas {
|
||||
height: calc(100vh - 64px);
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: radial-gradient(circle at 82% 14%, rgba(34, 211, 238, 0.14), transparent 24%), linear-gradient(135deg, #08111f 0%, #0b1020 45%, #070b16 100%);
|
||||
}
|
||||
|
||||
.main-form {
|
||||
min-height: calc(100vh - 104px);
|
||||
}
|
||||
|
||||
.theme-shell-light.auto-test-main {
|
||||
background: #eef4ff;
|
||||
}
|
||||
|
||||
.theme-shell-light .app-shell {
|
||||
background: radial-gradient(circle at 18% 8%, rgba(59, 130, 246, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
|
||||
}
|
||||
|
||||
.theme-shell-light .aside {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 48%, #eaf2ff 100%);
|
||||
box-shadow: 10px 0 30px rgba(37, 99, 235, 0.12), inset -1px 0 0 #dbe5f3;
|
||||
}
|
||||
|
||||
.theme-shell-light .brand-panel {
|
||||
color: #0f172a;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eaf2ff 100%);
|
||||
border-bottom-color: #dbe5f3;
|
||||
}
|
||||
|
||||
.theme-shell-light .brand-mark {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
|
||||
}
|
||||
|
||||
.theme-shell-light .brand-subtitle {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo {
|
||||
background: #f4f8ff !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu,
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu--inline {
|
||||
background: #f4f8ff !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item,
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title {
|
||||
background: transparent !important;
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item.is-active {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
|
||||
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item:hover,
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title:hover {
|
||||
background: #eaf2ff !important;
|
||||
color: #1d4ed8 !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .header {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: #dbe5f3;
|
||||
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.theme-shell-light .header-icon,
|
||||
.theme-shell-light .theme-switch,
|
||||
.theme-shell-light .user-name-dropdown {
|
||||
color: #1d4ed8;
|
||||
background: #f8fbff;
|
||||
border-color: #dbe5f3;
|
||||
}
|
||||
|
||||
.theme-shell-light .header-icon:hover,
|
||||
.theme-shell-light .theme-switch:hover {
|
||||
background: #eaf2ff;
|
||||
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.theme-shell-light .system-name span {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-shell-light .system-name small,
|
||||
.theme-shell-light .login-label {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-shell-light .header-user {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.theme-shell-light .main-canvas,
|
||||
.theme-shell-light .main-form {
|
||||
background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
|
||||
}
|
||||
|
||||
/* 深色壳下内容区兜底：避免旧缓存 bundle 未加载 App.vue 全局样式时出现白卡片/白分页 */
|
||||
.theme-shell-dark >>> .page-section.el-card {
|
||||
background: #111827;
|
||||
border-color: rgba(148, 163, 184, 0.2);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.theme-shell-dark >>> .page-section .el-card__header {
|
||||
background: #162033;
|
||||
border-bottom-color: rgba(148, 163, 184, 0.18);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.theme-shell-dark >>> .page-section .el-table,
|
||||
.theme-shell-dark >>> .page-section .el-table__expanded-cell,
|
||||
.theme-shell-dark >>> .page-section .el-table th,
|
||||
.theme-shell-dark >>> .page-section .el-table tr,
|
||||
.theme-shell-dark >>> .page-section .el-table td {
|
||||
background-color: #111827 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.theme-shell-dark >>> .page-section .el-table th,
|
||||
.theme-shell-dark >>> .page-section .el-table thead th {
|
||||
background: #1f2937 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
.theme-shell-dark >>> .page-section .el-form-item__label {
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.theme-shell-dark >>> .page-section .el-input__inner,
|
||||
.theme-shell-dark >>> .page-section .el-textarea__inner,
|
||||
.theme-shell-dark >>> .page-section .el-select .el-input__inner {
|
||||
background-color: #0f172a;
|
||||
border-color: rgba(148, 163, 184, 0.28);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.theme-shell-dark >>> .page-section .el-pagination,
|
||||
.theme-shell-dark >>> .page-section .el-pagination button,
|
||||
.theme-shell-dark >>> .page-section .el-pagination span:not([class*=suffix]) {
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.theme-shell-dark >>> .page-section .el-pagination .btn-prev,
|
||||
.theme-shell-dark >>> .page-section .el-pagination .btn-next,
|
||||
.theme-shell-dark >>> .page-section .el-pager li {
|
||||
background: #111827;
|
||||
color: #dbeafe;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<el-option v-for="item in moduleOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用例编号">
|
||||
<el-form-item v-if="form.id" label="用例编号">
|
||||
<el-input v-model="form.caseKey" placeholder="不填则由后端自动生成"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
999
src/components/TestPlatform/Case/DocumentSourcePanel.vue
Normal file
999
src/components/TestPlatform/Case/DocumentSourcePanel.vue
Normal file
@@ -0,0 +1,999 @@
|
||||
<template>
|
||||
<div class="document-source-panel">
|
||||
<div v-if="!compact" class="document-source-main">
|
||||
<div class="document-source-head">
|
||||
<span class="document-source-title">文档源</span>
|
||||
<span class="document-source-hint">PRD / 飞书</span>
|
||||
</div>
|
||||
|
||||
<el-form :inline="true" size="mini" class="document-source-filters" @submit.native.prevent>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="docQuery.type" clearable placeholder="全部" style="width: 88px;">
|
||||
<el-option label="PDF" :value="1"></el-option>
|
||||
<el-option label="飞书" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="docQuery.status" clearable placeholder="全部" style="width: 100px;">
|
||||
<el-option label="待解析" :value="0"></el-option>
|
||||
<el-option label="已解析" :value="1"></el-option>
|
||||
<el-option label="已生成用例" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="docQuery.keyword"
|
||||
clearable
|
||||
placeholder="来源"
|
||||
style="width: 120px;"
|
||||
@keyup.enter.native="handleDocSearch">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :disabled="!projectId" @click="handleDocSearch">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="mini" :disabled="!projectId" @click="openCreateDialog">新建</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="mini" :disabled="!projectId" @click="openBatchModuleDialog">批量建模块</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
ref="docTable"
|
||||
v-loading="docLoading"
|
||||
:data="docTableData"
|
||||
border
|
||||
size="small"
|
||||
:height="tableHeight"
|
||||
highlight-current-row
|
||||
class="document-source-table"
|
||||
:empty-text="projectId ? '暂无文档' : '请先选择项目'"
|
||||
@row-click="handleDocRowClick">
|
||||
<el-table-column prop="id" label="ID" width="56"></el-table-column>
|
||||
<el-table-column label="类型" width="72">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="scope.row.type === 2 ? 'warning' : 'info'">{{ formatDocType(scope.row.type) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="88">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="docStatusTagType(scope.row.status)">{{ formatDocStatus(scope.row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="来源" min-width="100" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.source }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updated_time" label="更新时间" width="136" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" @click.stop="openDetail(scope.row)">详情</el-button>
|
||||
<el-dropdown trigger="click" @command="cmd => handleDocCommand(cmd, scope.row)">
|
||||
<el-button type="text" size="mini">更多</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-if="scope.row.type === 2" command="refresh">刷新飞书</el-dropdown-item>
|
||||
<el-dropdown-item command="generate">生成用例</el-dropdown-item>
|
||||
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
||||
<el-dropdown-item command="delete" divided>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="document-source-pagination">
|
||||
<el-pagination
|
||||
small
|
||||
layout="total, prev, pager, next"
|
||||
:current-page="docPageNo"
|
||||
:page-size="docPageSize"
|
||||
:total="docTotal"
|
||||
@current-change="handleDocPageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情 -->
|
||||
<el-drawer title="文档详情" :visible.sync="detailVisible" direction="rtl" size="480px" append-to-body>
|
||||
<div v-loading="detailLoading" class="document-detail-body">
|
||||
<template v-if="detailRecord">
|
||||
<el-descriptions :column="1" size="small" border>
|
||||
<el-descriptions-item label="ID">{{ detailRecord.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">{{ formatDocType(detailRecord.type) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">{{ formatDocStatus(detailRecord.status) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="来源">{{ detailRecord.source }}</el-descriptions-item>
|
||||
<el-descriptions-item label="版本">{{ detailRecord.version }}</el-descriptions-item>
|
||||
<el-descriptions-item label="AI 模型">{{ detailRecord.ai_model || '—' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ detailRecord.created_time }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">{{ detailRecord.updated_time }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="document-detail-content-label">内容</div>
|
||||
<el-input v-model="detailContentDisplay" type="textarea" :rows="14" readonly></el-input>
|
||||
</template>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 新建 -->
|
||||
<el-dialog title="新建文档" :visible.sync="createVisible" width="560px" append-to-body @close="resetCreateForm">
|
||||
<el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="96px" size="small">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="createForm.type" style="width: 100%;" @change="onCreateTypeChange">
|
||||
<el-option label="PDF" :value="1"></el-option>
|
||||
<el-option label="飞书链接" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="createForm.type === 1">
|
||||
<el-form-item label="PDF 上传">
|
||||
<div class="pdf-upload-row">
|
||||
<el-button size="small" type="primary" plain :disabled="!projectId" @click="triggerPdfMultiSelect">选择 PDF（可多选）</el-button>
|
||||
<span class="pdf-upload-hint">每个文件将单独请求上传接口</span>
|
||||
</div>
|
||||
<input
|
||||
ref="pdfMultiInput"
|
||||
type="file"
|
||||
class="hidden-pdf-input"
|
||||
multiple
|
||||
accept=".pdf,application/pdf"
|
||||
@change="onPdfMultiInputChange">
|
||||
<ul v-if="pdfPendingFiles.length" class="pdf-pending-list">
|
||||
<li v-for="(f, idx) in pdfPendingFiles" :key="idx + f.name + f.size" class="pdf-pending-item">
|
||||
<span class="pdf-pending-name">{{ f.name }}</span>
|
||||
<span class="pdf-pending-size">（{{ formatFileSize(f.size) }}）</span>
|
||||
<el-button type="text" size="mini" @click="removePdfPending(idx)">移除</el-button>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else class="pdf-upload-empty">未选择文件</p>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-form-item label="来源" prop="source">
|
||||
<el-input v-model="createForm.source" placeholder="飞书文档链接"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容">
|
||||
<el-input v-model="createForm.content" type="textarea" :rows="4" placeholder="可选"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button size="small" @click="createVisible = false">取消</el-button>
|
||||
<template v-if="createForm.type === 1">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="pdfUploading"
|
||||
:disabled="!pdfPendingFiles.length || !projectId"
|
||||
@click="submitAllPdfUploads">
|
||||
上传全部
|
||||
</el-button>
|
||||
</template>
|
||||
<el-button v-else type="primary" size="small" :loading="createSubmitting" @click="submitCreate">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-dialog title="编辑文档" :visible.sync="editVisible" width="520px" append-to-body @close="resetEditForm">
|
||||
<el-form ref="editFormRef" :model="editForm" label-width="96px" size="small">
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="editForm.type" style="width: 100%;">
|
||||
<el-option label="PDF" :value="1"></el-option>
|
||||
<el-option label="飞书链接" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="来源">
|
||||
<el-input v-model="editForm.source"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容">
|
||||
<el-input v-model="editForm.content" type="textarea" :rows="5"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="AI 模型">
|
||||
<el-input v-model="editForm.ai_model" placeholder="可选"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button size="small" @click="editVisible = false">取消</el-button>
|
||||
<el-button type="primary" size="small" :loading="editSubmitting" @click="submitEdit">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 生成 / 匹配 / 导入 -->
|
||||
<el-drawer
|
||||
title="从文档生成用例"
|
||||
:visible.sync="generateVisible"
|
||||
direction="rtl"
|
||||
size="640px"
|
||||
append-to-body
|
||||
@close="resetGenerateState">
|
||||
<div v-if="activeDocument" class="generate-drawer-head">
|
||||
<el-tag size="small">文档 #{{ activeDocument.id }}</el-tag>
|
||||
<span class="generate-drawer-source">{{ activeDocument.source }}</span>
|
||||
</div>
|
||||
<el-form :inline="true" size="small" class="generate-form">
|
||||
<el-form-item label="默认优先级">
|
||||
<el-select v-model="genForm.priority" style="width: 100px;">
|
||||
<el-option label="P0" :value="1"></el-option>
|
||||
<el-option label="P1" :value="2"></el-option>
|
||||
<el-option label="P2" :value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用例类型">
|
||||
<el-input-number v-model="genForm.caseType" :min="1" :max="99" size="small"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="generateLoading" @click="runGenerate">生成预览</el-button>
|
||||
<el-button :loading="matchLoading" :disabled="!previewCases.length" @click="runMatch">匹配模块</el-button>
|
||||
<el-button type="success" :loading="importLoading" :disabled="!previewCases.length" @click="runImport">导入选中</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="previewCases" border size="small" max-height="420">
|
||||
<el-table-column width="48">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.selected"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="120" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="模块" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.module_name || '—' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模块ID" width="88">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model.number="scope.row.module_id" size="mini" placeholder="必填"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<p v-if="previewTotal" class="generate-total-hint">共 {{ previewTotal }} 条预览（导入前请为每行填写模块ID）</p>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 批量建模块 -->
|
||||
<el-dialog title="批量创建模块" :visible.sync="batchModuleVisible" width="480px" append-to-body>
|
||||
<p class="batch-module-tip">每行一个模块名称，将创建在当前项目下。</p>
|
||||
<el-input v-model="batchModuleText" type="textarea" :rows="8" placeholder="例如：用户管理 订单中心"></el-input>
|
||||
<span slot="footer">
|
||||
<el-button size="small" @click="batchModuleVisible = false">取消</el-button>
|
||||
<el-button type="primary" size="small" :loading="batchModuleSubmitting" @click="submitBatchModules">创建</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import {
|
||||
getDocumentList,
|
||||
getDocumentDetail,
|
||||
uploadDocumentPdf,
|
||||
createDocument,
|
||||
updateDocument,
|
||||
deleteDocument,
|
||||
refreshDocument,
|
||||
generateDocumentCases,
|
||||
matchDocumentModules,
|
||||
importDocumentCases,
|
||||
batchCreateDocumentModules
|
||||
} from '@/api/documentApi'
|
||||
|
||||
export default {
|
||||
name: 'DocumentSourcePanel',
|
||||
props: {
|
||||
productId: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
projectId: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
/** 文档列表表格高度（独立 Tab 可传更大值） */
|
||||
tableHeight: {
|
||||
type: [Number, String],
|
||||
default: 360
|
||||
},
|
||||
/** 仅保留新建/编辑等弹窗，不展示列表与筛选；不自动请求文档列表 */
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
docQuery: {
|
||||
type: '',
|
||||
status: '',
|
||||
keyword: ''
|
||||
},
|
||||
docPageNo: 1,
|
||||
docPageSize: 10,
|
||||
docTotal: 0,
|
||||
docTableData: [],
|
||||
docLoading: false,
|
||||
detailVisible: false,
|
||||
detailLoading: false,
|
||||
detailRecord: null,
|
||||
createVisible: false,
|
||||
createSubmitting: false,
|
||||
pdfUploading: false,
|
||||
pdfPendingFiles: [],
|
||||
createForm: {
|
||||
type: 1,
|
||||
source: '',
|
||||
content: ''
|
||||
},
|
||||
createRules: {
|
||||
source: [{ required: true, message: '请输入飞书链接', trigger: 'blur' }]
|
||||
},
|
||||
editVisible: false,
|
||||
editSubmitting: false,
|
||||
editForm: {
|
||||
documentId: null,
|
||||
type: 1,
|
||||
source: '',
|
||||
content: '',
|
||||
ai_model: ''
|
||||
},
|
||||
generateVisible: false,
|
||||
generateLoading: false,
|
||||
matchLoading: false,
|
||||
importLoading: false,
|
||||
activeDocument: null,
|
||||
genForm: {
|
||||
priority: 2,
|
||||
caseType: 1
|
||||
},
|
||||
previewCases: [],
|
||||
previewTotal: 0,
|
||||
batchModuleVisible: false,
|
||||
batchModuleText: '',
|
||||
batchModuleSubmitting: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['currentUser']),
|
||||
detailContentDisplay() {
|
||||
if (!this.detailRecord) return ''
|
||||
return this.detailRecord.content || ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
projectId: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.docPageNo = 1
|
||||
if (this.compact) {
|
||||
if (!val) {
|
||||
this.docTableData = []
|
||||
this.docTotal = 0
|
||||
}
|
||||
return
|
||||
}
|
||||
if (val) {
|
||||
this.fetchDocuments()
|
||||
} else {
|
||||
this.docTableData = []
|
||||
this.docTotal = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDocType(type) {
|
||||
if (type === 2) return '飞书'
|
||||
if (type === 1) return 'PDF'
|
||||
return '—'
|
||||
},
|
||||
formatDocStatus(status) {
|
||||
const map = { 0: '待解析', 1: '已解析', 2: '已生成用例' }
|
||||
return map[status] !== undefined ? map[status] : '—'
|
||||
},
|
||||
docStatusTagType(status) {
|
||||
if (status === 0) return 'info'
|
||||
if (status === 1) return 'success'
|
||||
if (status === 2) return 'warning'
|
||||
return ''
|
||||
},
|
||||
cleanParams(obj) {
|
||||
return Object.keys(obj || {}).reduce((acc, key) => {
|
||||
const v = obj[key]
|
||||
if (v !== '' && v !== undefined && v !== null) {
|
||||
acc[key] = v
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
fetchDocuments() {
|
||||
if (!this.projectId) {
|
||||
this.docTableData = []
|
||||
this.docTotal = 0
|
||||
return
|
||||
}
|
||||
this.docLoading = true
|
||||
const params = this.cleanParams({
|
||||
productId: this.productId || undefined,
|
||||
projectId: this.projectId,
|
||||
type: this.docQuery.type,
|
||||
status: this.docQuery.status,
|
||||
keyword: this.docQuery.keyword,
|
||||
pageNo: this.docPageNo,
|
||||
pageSize: this.docPageSize
|
||||
})
|
||||
getDocumentList(params)
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.list || data.items || []
|
||||
this.docTableData = Array.isArray(list) ? list : []
|
||||
this.docTotal = Number(data.total || 0)
|
||||
})
|
||||
.catch(() => {
|
||||
this.docTableData = []
|
||||
this.docTotal = 0
|
||||
})
|
||||
.finally(() => {
|
||||
this.docLoading = false
|
||||
})
|
||||
},
|
||||
handleDocSearch() {
|
||||
this.docPageNo = 1
|
||||
this.fetchDocuments()
|
||||
},
|
||||
handleDocPageChange(p) {
|
||||
this.docPageNo = p
|
||||
this.fetchDocuments()
|
||||
},
|
||||
handleDocRowClick(row) {
|
||||
if (this.compact || !this.$refs.docTable) return
|
||||
if (this.$refs.docTable.setCurrentRow) {
|
||||
this.$refs.docTable.setCurrentRow(row)
|
||||
}
|
||||
},
|
||||
syncDocumentListAfterMutation() {
|
||||
if (this.compact) {
|
||||
this.$emit('document-changed')
|
||||
} else {
|
||||
this.fetchDocuments()
|
||||
}
|
||||
},
|
||||
openDetail(row) {
|
||||
this.detailVisible = true
|
||||
this.detailRecord = Object.assign({}, row)
|
||||
this.detailLoading = true
|
||||
getDocumentDetail({ documentId: row.id })
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
this.detailRecord = data
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
this.detailLoading = false
|
||||
})
|
||||
},
|
||||
openCreateDialog() {
|
||||
if (!this.productId || !this.projectId) {
|
||||
this.$message.warning('请先选择产品与项目')
|
||||
return
|
||||
}
|
||||
this.createForm = {
|
||||
type: 1,
|
||||
source: '',
|
||||
content: ''
|
||||
}
|
||||
this.pdfPendingFiles = []
|
||||
this.createVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.createFormRef && this.$refs.createFormRef.clearValidate()
|
||||
})
|
||||
},
|
||||
resetCreateForm() {
|
||||
this.createForm = { type: 1, source: '', content: '' }
|
||||
this.pdfPendingFiles = []
|
||||
if (this.$refs.pdfMultiInput) {
|
||||
this.$refs.pdfMultiInput.value = ''
|
||||
}
|
||||
},
|
||||
onCreateTypeChange() {
|
||||
this.pdfPendingFiles = []
|
||||
if (this.$refs.pdfMultiInput) {
|
||||
this.$refs.pdfMultiInput.value = ''
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.createFormRef && this.$refs.createFormRef.clearValidate()
|
||||
})
|
||||
},
|
||||
triggerPdfMultiSelect() {
|
||||
this.$refs.pdfMultiInput && this.$refs.pdfMultiInput.click()
|
||||
},
|
||||
onPdfMultiInputChange(e) {
|
||||
const input = e && e.target
|
||||
const picked = input && input.files ? Array.from(input.files) : []
|
||||
if (input) {
|
||||
input.value = ''
|
||||
}
|
||||
const pdfs = picked.filter(f => {
|
||||
const name = String(f.name || '').toLowerCase()
|
||||
return name.endsWith('.pdf') || f.type === 'application/pdf'
|
||||
})
|
||||
if (picked.length && pdfs.length < picked.length) {
|
||||
this.$message.warning('已忽略非 PDF 文件')
|
||||
}
|
||||
const seen = new Set(this.pdfPendingFiles.map(x => `${x.name}_${x.size}`))
|
||||
pdfs.forEach(f => {
|
||||
const key = `${f.name}_${f.size}`
|
||||
if (!seen.has(key)) {
|
||||
seen.add(key)
|
||||
this.pdfPendingFiles.push(f)
|
||||
}
|
||||
})
|
||||
},
|
||||
removePdfPending(index) {
|
||||
this.pdfPendingFiles.splice(index, 1)
|
||||
},
|
||||
formatFileSize(bytes) {
|
||||
const n = Number(bytes)
|
||||
if (!Number.isFinite(n) || n < 0) return '—'
|
||||
if (n < 1024) return `${n} B`
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
|
||||
return `${(n / 1024 / 1024).toFixed(1)} MB`
|
||||
},
|
||||
async submitAllPdfUploads() {
|
||||
if (!this.productId || !this.projectId) {
|
||||
this.$message.warning('请先选择产品与项目')
|
||||
return
|
||||
}
|
||||
const files = this.pdfPendingFiles.slice()
|
||||
if (!files.length) {
|
||||
this.$message.warning('请先选择 PDF 文件')
|
||||
return
|
||||
}
|
||||
const productId = Number(this.productId)
|
||||
const projectId = Number(this.projectId)
|
||||
const createdBy = this.currentUser && this.currentUser.id ? this.currentUser.id : undefined
|
||||
this.pdfUploading = true
|
||||
const failed = []
|
||||
let ok = 0
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i]
|
||||
try {
|
||||
await uploadDocumentPdf({ file, productId, projectId, createdBy })
|
||||
ok += 1
|
||||
} catch (e) {
|
||||
failed.push(file)
|
||||
}
|
||||
}
|
||||
this.pdfUploading = false
|
||||
this.pdfPendingFiles = failed
|
||||
if (ok) {
|
||||
this.syncDocumentListAfterMutation()
|
||||
}
|
||||
if (ok && !failed.length) {
|
||||
this.$message.success(`已上传 ${ok} 个 PDF`)
|
||||
this.createVisible = false
|
||||
} else if (ok && failed.length) {
|
||||
this.$message.warning(`成功 ${ok} 个，失败 ${failed.length} 个；失败项仍留在列表中，可修正后重试`)
|
||||
} else {
|
||||
this.$message.error('上传失败，请检查网络或文件后重试')
|
||||
}
|
||||
},
|
||||
submitCreate() {
|
||||
if (this.createForm.type === 1) {
|
||||
this.$message.info('PDF 请使用「选择 PDF」并点击「上传全部」')
|
||||
return
|
||||
}
|
||||
this.$refs.createFormRef.validate(valid => {
|
||||
if (!valid) return
|
||||
this.createSubmitting = true
|
||||
const payload = {
|
||||
productId: Number(this.productId),
|
||||
projectId: Number(this.projectId),
|
||||
type: this.createForm.type,
|
||||
source: this.createForm.source,
|
||||
content: this.createForm.content || undefined
|
||||
}
|
||||
if (this.currentUser && this.currentUser.id) {
|
||||
payload.createdBy = this.currentUser.id
|
||||
}
|
||||
createDocument(payload)
|
||||
.then(() => {
|
||||
this.$message.success('创建成功')
|
||||
this.createVisible = false
|
||||
this.syncDocumentListAfterMutation()
|
||||
})
|
||||
.finally(() => {
|
||||
this.createSubmitting = false
|
||||
})
|
||||
})
|
||||
},
|
||||
handleDocCommand(cmd, row) {
|
||||
if (cmd === 'refresh') {
|
||||
this.doRefresh(row)
|
||||
} else if (cmd === 'generate') {
|
||||
this.openGenerate(row)
|
||||
} else if (cmd === 'edit') {
|
||||
this.openEdit(row)
|
||||
} else if (cmd === 'delete') {
|
||||
this.doDelete(row)
|
||||
}
|
||||
},
|
||||
doRefresh(row) {
|
||||
this.$confirm('确认从飞书重新拉取内容？', '提示', { type: 'warning' })
|
||||
.then(() => {
|
||||
return refreshDocument({ documentId: row.id })
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('已刷新')
|
||||
this.fetchDocuments()
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
doDelete(row) {
|
||||
this.$confirm('确认删除该文档？', '提示', { type: 'warning' })
|
||||
.then(() => {
|
||||
return deleteDocument({ documentId: row.id })
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('已删除')
|
||||
this.fetchDocuments()
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
openEdit(row) {
|
||||
this.editForm = {
|
||||
documentId: row.id,
|
||||
type: row.type,
|
||||
source: row.source || '',
|
||||
content: row.content || '',
|
||||
ai_model: row.ai_model || ''
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
resetEditForm() {
|
||||
this.editForm = { documentId: null, type: 1, source: '', content: '', ai_model: '' }
|
||||
},
|
||||
submitEdit() {
|
||||
if (!this.editForm.documentId) return
|
||||
this.editSubmitting = true
|
||||
updateDocument({
|
||||
documentId: this.editForm.documentId,
|
||||
type: this.editForm.type,
|
||||
source: this.editForm.source,
|
||||
content: this.editForm.content,
|
||||
ai_model: this.editForm.ai_model || undefined
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('保存成功')
|
||||
this.editVisible = false
|
||||
this.fetchDocuments()
|
||||
})
|
||||
.finally(() => {
|
||||
this.editSubmitting = false
|
||||
})
|
||||
},
|
||||
openGenerate(row) {
|
||||
this.activeDocument = row
|
||||
this.previewCases = []
|
||||
this.previewTotal = 0
|
||||
this.genForm = { priority: 2, caseType: 1 }
|
||||
this.generateVisible = true
|
||||
},
|
||||
resetGenerateState() {
|
||||
this.activeDocument = null
|
||||
this.previewCases = []
|
||||
this.previewTotal = 0
|
||||
},
|
||||
runGenerate() {
|
||||
if (!this.activeDocument || !this.projectId) return
|
||||
this.generateLoading = true
|
||||
generateDocumentCases({
|
||||
documentIds: [this.activeDocument.id],
|
||||
projectId: Number(this.projectId),
|
||||
priority: this.genForm.priority,
|
||||
caseType: this.genForm.caseType,
|
||||
tags: ['AI生成']
|
||||
})
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.cases || []
|
||||
this.previewTotal = Number(data.total || list.length || 0)
|
||||
this.previewCases = list.map(item =>
|
||||
Object.assign({}, item, {
|
||||
selected: true,
|
||||
module_id: item.module_id != null && item.module_id !== '' ? Number(item.module_id) : null,
|
||||
module_name: item.module_name || ''
|
||||
})
|
||||
)
|
||||
if (!this.previewCases.length) {
|
||||
this.$message.info('未返回预览用例')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.generateLoading = false
|
||||
})
|
||||
},
|
||||
runMatch() {
|
||||
if (!this.activeDocument || !this.previewCases.length) return
|
||||
this.matchLoading = true
|
||||
const casesPayload = this.previewCases.map(c => ({
|
||||
title: c.title,
|
||||
precondition: c.precondition,
|
||||
steps: c.steps,
|
||||
expected_result: c.expected_result,
|
||||
priority: c.priority,
|
||||
case_type: c.case_type,
|
||||
tags: c.tags,
|
||||
module_name: c.module_name,
|
||||
module_id: c.module_id
|
||||
}))
|
||||
matchDocumentModules({
|
||||
documentId: this.activeDocument.id,
|
||||
cases: casesPayload
|
||||
})
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || []
|
||||
const arr = Array.isArray(data) ? data : []
|
||||
const byTitle = {}
|
||||
arr.forEach(row => {
|
||||
if (row && row.title) byTitle[row.title] = row
|
||||
})
|
||||
this.previewCases = this.previewCases.map(row => {
|
||||
const m = byTitle[row.title]
|
||||
if (m) {
|
||||
return Object.assign({}, row, {
|
||||
module_name: m.module_name != null ? m.module_name : row.module_name,
|
||||
module_id: m.module_id != null ? Number(m.module_id) : row.module_id
|
||||
})
|
||||
}
|
||||
return row
|
||||
})
|
||||
this.$message.success('匹配完成')
|
||||
})
|
||||
.finally(() => {
|
||||
this.matchLoading = false
|
||||
})
|
||||
},
|
||||
runImport() {
|
||||
if (!this.activeDocument || !this.currentUser || !this.currentUser.id) {
|
||||
this.$message.warning('未获取到当前用户，请重新登录')
|
||||
return
|
||||
}
|
||||
const selected = this.previewCases.filter(c => c.selected)
|
||||
if (!selected.length) {
|
||||
this.$message.warning('请至少选择一条用例')
|
||||
return
|
||||
}
|
||||
for (let i = 0; i < selected.length; i++) {
|
||||
const c = selected[i]
|
||||
if (!c.module_id && c.module_id !== 0) {
|
||||
this.$message.warning(`请填写模块ID：${c.title || ''}`)
|
||||
return
|
||||
}
|
||||
if (!c.title || !c.steps) {
|
||||
this.$message.warning('标题与步骤为必填')
|
||||
return
|
||||
}
|
||||
}
|
||||
const cases = selected.map(c => ({
|
||||
selected: true,
|
||||
module_id: Number(c.module_id),
|
||||
title: c.title,
|
||||
precondition: c.precondition || '',
|
||||
steps: c.steps,
|
||||
expected_result: c.expected_result || '',
|
||||
priority: c.priority != null ? Number(c.priority) : 2,
|
||||
case_type: c.case_type != null ? Number(c.case_type) : 1,
|
||||
tags: Array.isArray(c.tags) ? c.tags : ['AI生成']
|
||||
}))
|
||||
this.$confirm(
|
||||
'请确认已完成对预览用例的审核。导入选中行后将写入正式用例列表，是否继续？',
|
||||
'确认导入',
|
||||
{ type: 'warning', confirmButtonText: '确认导入' }
|
||||
)
|
||||
.then(() => {
|
||||
this.importLoading = true
|
||||
return importDocumentCases({
|
||||
documentId: this.activeDocument.id,
|
||||
userId: this.currentUser.id,
|
||||
cases
|
||||
})
|
||||
})
|
||||
.then(res => {
|
||||
if (!res) return
|
||||
const data = (res && res.data) || res || {}
|
||||
const n = data.successCount != null ? data.successCount : cases.length
|
||||
this.$message.success(`导入成功 ${n} 条`)
|
||||
this.generateVisible = false
|
||||
this.$emit('refresh-cases')
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
this.importLoading = false
|
||||
})
|
||||
},
|
||||
openBatchModuleDialog() {
|
||||
if (!this.projectId) {
|
||||
this.$message.warning('请先选择项目')
|
||||
return
|
||||
}
|
||||
this.batchModuleText = ''
|
||||
this.batchModuleVisible = true
|
||||
},
|
||||
submitBatchModules() {
|
||||
const lines = String(this.batchModuleText || '')
|
||||
.split(/\r?\n/)
|
||||
.map(s => s.trim())
|
||||
.filter(Boolean)
|
||||
if (!lines.length) {
|
||||
this.$message.warning('请输入至少一个模块名称')
|
||||
return
|
||||
}
|
||||
this.batchModuleSubmitting = true
|
||||
batchCreateDocumentModules({
|
||||
projectId: Number(this.projectId),
|
||||
moduleNames: lines
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('模块创建成功')
|
||||
this.batchModuleVisible = false
|
||||
this.$emit('refresh-modules')
|
||||
})
|
||||
.finally(() => {
|
||||
this.batchModuleSubmitting = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.document-source-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.document-source-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
padding: 0 2px 8px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.document-source-title {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.document-source-hint {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.document-source-filters {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.document-source-filters /deep/ .el-form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.document-source-table {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.document-source-table /deep/ .el-table__body tr.current-row > td {
|
||||
background-color: #ecf5ff !important;
|
||||
}
|
||||
|
||||
.document-source-pagination {
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.document-detail-body {
|
||||
padding: 0 4px 16px;
|
||||
}
|
||||
|
||||
.document-detail-content-label {
|
||||
margin: 12px 0 6px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.generate-drawer-head {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.generate-drawer-source {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.generate-form {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.generate-total-hint {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.batch-module-tip {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.hidden-pdf-input {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pdf-upload-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pdf-upload-hint {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.pdf-upload-empty {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.pdf-pending-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pdf-pending-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.pdf-pending-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.pdf-pending-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.pdf-pending-size {
|
||||
color: #909399;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
379
src/components/TestPlatform/Plan/PlanAutomationExecutionList.vue
Normal file
379
src/components/TestPlatform/Plan/PlanAutomationExecutionList.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="page-wrap">
|
||||
<page-section title="自动化执行结果">
|
||||
<div class="filter-toolbar">
|
||||
<el-form :inline="true" size="small" class="filter-toolbar-form" @submit.native.prevent>
|
||||
<el-form-item label="产品">
|
||||
<el-input :value="productName" disabled style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目">
|
||||
<el-input :value="projectName" disabled style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划">
|
||||
<el-input :value="planNameDisplay" disabled style="width: 220px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="filter-toolbar-actions">
|
||||
<el-button size="small" @click="goBackToRun">返回执行</el-button>
|
||||
<el-button size="small" @click="goPlanList">返回计划</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" border style="margin-top: 12px;">
|
||||
<el-table-column label="执行单号" min-width="180" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.execution_no || scope.row.executionNo || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="mainStatusTag(scope.row.status)">{{ mainStatusLabel(scope.row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="环境" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.env_code || scope.row.envCode || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="总数" width="72">
|
||||
<template slot-scope="scope">{{ scope.row.total_count != null ? scope.row.total_count : scope.row.totalCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="通过" width="72">
|
||||
<template slot-scope="scope">{{ scope.row.passed_count != null ? scope.row.passed_count : scope.row.passedCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="失败" width="72">
|
||||
<template slot-scope="scope">{{ scope.row.failed_count != null ? scope.row.failed_count : scope.row.failedCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" min-width="160">
|
||||
<template slot-scope="scope">{{ scope.row.created_time || scope.row.createdTime || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行详情" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="goToExecutionDetail(scope.row)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报告" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
v-if="getReportUrl(scope.row)"
|
||||
:href="getReportUrl(scope.row)"
|
||||
target="_blank"
|
||||
type="primary">
|
||||
打开
|
||||
</el-link>
|
||||
<span v-else-if="isReportLoading(scope.row)" class="report-loading">
|
||||
<i class="el-icon-loading"></i>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
class="pager"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page="pageNo"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange" />
|
||||
</page-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageSection from '@/components/TestPlatform/common/PageSection'
|
||||
import { getAutomationExecutionList, postAutomationExecutionPoll } from '@/api/automationApi'
|
||||
|
||||
const MAIN_STATUS_LABELS = {
|
||||
0: '待触发',
|
||||
1: '触发中',
|
||||
2: '排队中',
|
||||
3: '执行中',
|
||||
4: '成功',
|
||||
5: '失败',
|
||||
6: '已取消',
|
||||
7: '触发失败',
|
||||
8: '回调异常'
|
||||
}
|
||||
|
||||
/** 终态：一般不再有报告 URL 更新 */
|
||||
const TERMINAL = new Set([4, 5, 6, 7, 8])
|
||||
/** 无报告也可停止加载 */
|
||||
const TERMINAL_NO_REPORT_EXPECTED = new Set([6, 7, 8])
|
||||
|
||||
const POLL_MS = 5000
|
||||
|
||||
export default {
|
||||
name: 'PlanAutomationExecutionList',
|
||||
components: { PageSection },
|
||||
data() {
|
||||
return {
|
||||
projectId: this.$route.query.projectId || '',
|
||||
planId: this.$route.query.planId || '',
|
||||
loading: false,
|
||||
rows: [],
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
pollTimer: null,
|
||||
/** executionId -> 本轮 poll 请求中 */
|
||||
pollInflight: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
productName() {
|
||||
return this.$route.query.productName || ''
|
||||
},
|
||||
projectName() {
|
||||
return this.$route.query.projectName || ''
|
||||
},
|
||||
planNameDisplay() {
|
||||
return this.$route.query.planName || ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query': {
|
||||
handler() {
|
||||
this.projectId = this.$route.query.projectId || ''
|
||||
this.planId = this.$route.query.planId || ''
|
||||
this.pageNo = 1
|
||||
this.stopPoll()
|
||||
this.fetchList()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchList()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopPoll()
|
||||
},
|
||||
methods: {
|
||||
getReportUrl(row) {
|
||||
if (!row) return ''
|
||||
const u = row.report_url || row.reportUrl
|
||||
return u && String(u).trim() ? String(u).trim() : ''
|
||||
},
|
||||
rowExecutionId(row) {
|
||||
if (!row) return null
|
||||
const id = row.id != null ? row.id : row.execution_id || row.executionId
|
||||
return id != null && id !== '' ? Number(id) : null
|
||||
},
|
||||
rowStatusNum(row) {
|
||||
const s = row && row.status
|
||||
const n = Number(s)
|
||||
return Number.isFinite(n) ? n : -1
|
||||
},
|
||||
/** 仍可能通过 poll 拿到报告地址 */
|
||||
needsReportPoll(row) {
|
||||
if (this.getReportUrl(row)) return false
|
||||
const st = this.rowStatusNum(row)
|
||||
if (TERMINAL_NO_REPORT_EXPECTED.has(st)) return false
|
||||
return true
|
||||
},
|
||||
/** 轮询未停且该行仍可能出报告时，报告列持续显示加载（含两次 poll 间隔） */
|
||||
isReportLoading(row) {
|
||||
if (this.getReportUrl(row)) return false
|
||||
if (!this.needsReportPoll(row)) return false
|
||||
return this.pollTimer != null || !!this.pollInflight[this.rowExecutionId(row)]
|
||||
},
|
||||
mainStatusLabel(s) {
|
||||
return MAIN_STATUS_LABELS[s] != null ? MAIN_STATUS_LABELS[s] : s == null ? '-' : String(s)
|
||||
},
|
||||
mainStatusTag(s) {
|
||||
const map = { 0: 'info', 1: 'warning', 2: 'warning', 3: 'primary', 4: 'success', 5: 'danger', 6: 'info', 7: 'danger', 8: 'danger' }
|
||||
return map[s] || 'info'
|
||||
},
|
||||
mergePollIntoRow(executionId, d) {
|
||||
if (!d || typeof d !== 'object') return
|
||||
const idx = this.rows.findIndex(r => this.rowExecutionId(r) === executionId)
|
||||
if (idx < 0) return
|
||||
const row = this.rows[idx]
|
||||
const next = Object.assign({}, row)
|
||||
const pick = (snake, camel) => {
|
||||
if (d[snake] !== undefined && d[snake] !== null && d[snake] !== '') next[snake] = d[snake]
|
||||
if (d[camel] !== undefined && d[camel] !== null && d[camel] !== '') next[camel] = d[camel]
|
||||
}
|
||||
if (d.status !== undefined && d.status !== null) next.status = d.status
|
||||
pick('report_url', 'reportUrl')
|
||||
pick('console_url', 'consoleUrl')
|
||||
pick('jenkins_build_url', 'jenkinsBuildUrl')
|
||||
pick('jenkins_build_number', 'jenkinsBuildNumber')
|
||||
pick('end_time', 'endTime')
|
||||
if (d.duration_seconds != null || d.durationSeconds != null) {
|
||||
next.duration_seconds = d.duration_seconds != null ? d.duration_seconds : d.durationSeconds
|
||||
}
|
||||
this.$set(this.rows, idx, next)
|
||||
},
|
||||
pollOne(executionId) {
|
||||
if (executionId == null || Number.isNaN(executionId)) return Promise.resolve()
|
||||
this.$set(this.pollInflight, executionId, true)
|
||||
return postAutomationExecutionPoll({ executionId })
|
||||
.then(res => {
|
||||
if (!res || res.code !== 20000) return
|
||||
const d = res.data
|
||||
if (!d || typeof d !== 'object') return
|
||||
const rid = d.id != null ? Number(d.id) : executionId
|
||||
this.mergePollIntoRow(rid, d)
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
this.$delete(this.pollInflight, executionId)
|
||||
})
|
||||
},
|
||||
runPollTick() {
|
||||
const targets = this.rows
|
||||
.map(r => this.rowExecutionId(r))
|
||||
.filter(id => id != null && !Number.isNaN(id))
|
||||
.filter(id => {
|
||||
const row = this.rows.find(x => this.rowExecutionId(x) === id)
|
||||
return row && this.needsReportPoll(row)
|
||||
})
|
||||
if (!targets.length) {
|
||||
this.stopPoll()
|
||||
return
|
||||
}
|
||||
targets.forEach(id => {
|
||||
if (this.pollInflight[id]) return
|
||||
this.pollOne(id)
|
||||
})
|
||||
},
|
||||
startPoll() {
|
||||
this.stopPoll()
|
||||
this.runPollTick()
|
||||
this.pollTimer = window.setInterval(() => this.runPollTick(), POLL_MS)
|
||||
},
|
||||
stopPoll() {
|
||||
if (this.pollTimer != null) {
|
||||
clearInterval(this.pollTimer)
|
||||
this.pollTimer = null
|
||||
}
|
||||
},
|
||||
fetchList() {
|
||||
const pid = this.planId
|
||||
const projId = this.projectId
|
||||
if (!pid || !projId) {
|
||||
this.rows = []
|
||||
this.total = 0
|
||||
this.stopPoll()
|
||||
return
|
||||
}
|
||||
this.stopPoll()
|
||||
this.loading = true
|
||||
getAutomationExecutionList({
|
||||
planId: Number(pid),
|
||||
projectId: Number(projId),
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.list || data.items || []
|
||||
this.rows = Array.isArray(list) ? list.map(x => Object.assign({}, x)) : []
|
||||
this.total = Number(data.total != null ? data.total : this.rows.length)
|
||||
this.$nextTick(() => {
|
||||
const any = this.rows.some(r => this.needsReportPoll(r))
|
||||
if (any) this.startPoll()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.rows = []
|
||||
this.total = 0
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.pageNo = 1
|
||||
this.fetchList()
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.pageNo = page
|
||||
this.fetchList()
|
||||
},
|
||||
automationRunQuery() {
|
||||
const q = this.$route.query || {}
|
||||
return {
|
||||
productId: q.productId || undefined,
|
||||
productName: q.productName || '',
|
||||
projectId: this.projectId || undefined,
|
||||
projectName: q.projectName || '',
|
||||
planId: this.planId || undefined,
|
||||
planName: q.planName || '',
|
||||
environmentId: q.environmentId || undefined,
|
||||
jenkinsUrl: q.jenkinsUrl || undefined
|
||||
}
|
||||
},
|
||||
goBackToRun() {
|
||||
this.stopPoll()
|
||||
this.$router.push({
|
||||
path: '/test-platform/plan/automation',
|
||||
query: this.automationRunQuery()
|
||||
})
|
||||
},
|
||||
/** 进入与执行后相同的计划自动化执行详情页（主单 + 执行明细） */
|
||||
goToExecutionDetail(row) {
|
||||
const id = this.rowExecutionId(row)
|
||||
if (id == null || Number.isNaN(id)) {
|
||||
this.$message.warning('缺少执行单 ID')
|
||||
return
|
||||
}
|
||||
this.stopPoll()
|
||||
this.$router.push({
|
||||
path: '/test-platform/plan/automation',
|
||||
query: Object.assign({}, this.automationRunQuery(), { executionId: id })
|
||||
})
|
||||
},
|
||||
goPlanList() {
|
||||
this.stopPoll()
|
||||
this.$router.push({
|
||||
path: '/test-platform/plan',
|
||||
query: {
|
||||
productId: this.$route.query.productId || undefined,
|
||||
projectId: this.projectId || undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-wrap {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.filter-toolbar-form {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-toolbar-actions {
|
||||
flex-shrink: 0;
|
||||
padding-top: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.report-loading {
|
||||
color: #409eff;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
842
src/components/TestPlatform/Plan/PlanAutomationRun.vue
Normal file
842
src/components/TestPlatform/Plan/PlanAutomationRun.vue
Normal file
@@ -0,0 +1,842 @@
|
||||
<template>
|
||||
<div class="page-wrap">
|
||||
<page-section title="计划自动化执行">
|
||||
<div class="filter-toolbar">
|
||||
<el-form :inline="true" size="small" class="filter-toolbar-form" @submit.native.prevent>
|
||||
<el-form-item label="产品">
|
||||
<el-input :value="productName" disabled style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目">
|
||||
<el-input :value="projectName" disabled style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划">
|
||||
<div class="plan-title-row">
|
||||
<el-input :value="planNameDisplay" disabled class="plan-name-input" />
|
||||
<template v-if="planJenkinsUrl">
|
||||
<span class="plan-jenkins-sep">·</span>
|
||||
<el-link
|
||||
:href="planJenkinsUrl"
|
||||
:title="planJenkinsUrl"
|
||||
target="_blank"
|
||||
type="primary"
|
||||
class="plan-jenkins-link">
|
||||
自动化执行 Jenkins
|
||||
</el-link>
|
||||
</template>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="filter-toolbar-actions">
|
||||
<el-button size="small" @click="goExecutionResultList">执行结果列表</el-button>
|
||||
<el-button size="small" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card v-if="!executionId" class="run-card" shadow="never">
|
||||
<el-form ref="runFormRef" :model="runForm" :rules="runRules" label-width="108px" size="small">
|
||||
<el-form-item label="执行环境" prop="envCode">
|
||||
<el-select v-model="runForm.envCode" placeholder="请选择环境编码" filterable style="width: 280px;">
|
||||
<el-option
|
||||
v-for="opt in envOptions"
|
||||
:key="'env-' + opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="执行模式">
|
||||
<el-radio-group v-model="runForm.runMode">
|
||||
<el-radio :label="1">串行</el-radio>
|
||||
<el-radio :label="2">并行</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划轮次">
|
||||
<el-input-number v-model="runForm.roundNo" :min="1" :step="1" controls-position="right" placeholder="可选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model.trim="runForm.remark" maxlength="200" show-word-limit style="width: 420px;" placeholder="可选" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="table-toolbar">
|
||||
<span class="hint">勾选后点击「执行已选用例」将传 caseIds；翻页会保留已勾选项。不勾选可「执行计划内全部自动化用例」。</span>
|
||||
<el-button size="small" :loading="casesLoading" @click="refreshPlanCaseList">刷新用例列表</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="caseTable"
|
||||
v-loading="casesLoading"
|
||||
:data="planCaseRows"
|
||||
border
|
||||
row-key="planCaseId"
|
||||
@selection-change="onSelectionChange">
|
||||
<el-table-column type="selection" width="48" :reserve-selection="true" />
|
||||
<el-table-column prop="caseKey" label="用例编号" min-width="120" />
|
||||
<el-table-column prop="caseTitle" label="用例名称" min-width="200" />
|
||||
<el-table-column label="自动化" width="88">
|
||||
<template slot-scope="scope">{{ formatAuto(scope.row) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
class="plan-case-pager"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page="planCasePageNo"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="planCasePageSize"
|
||||
:total="planCaseTotal"
|
||||
@size-change="handlePlanCaseSizeChange"
|
||||
@current-change="handlePlanCaseCurrentChange" />
|
||||
|
||||
<div class="run-actions">
|
||||
<el-button type="primary" :loading="runSubmitting" @click="submitRun(true)">执行计划内全部自动化用例</el-button>
|
||||
<el-button type="success" :loading="runSubmitting" :disabled="!selectedRows.length" @click="submitRun(false)">
|
||||
执行已选用例（{{ selectedRows.length }}）
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<template v-else>
|
||||
<el-card class="exec-card" shadow="never">
|
||||
<div class="exec-head">
|
||||
<div>
|
||||
<span class="exec-no">{{ executionSummary.execution_no || executionSummary.executionNo || '-' }}</span>
|
||||
<el-tag size="small" class="exec-tag" :type="mainStatusTag(executionSummary.status)">
|
||||
{{ mainStatusLabel(executionSummary.status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="exec-actions">
|
||||
<el-button size="small" :loading="detailLoading" @click="refreshExecution">刷新</el-button>
|
||||
<el-button size="small" @click="resetRunAnother">再跑一轮</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exec-desc">
|
||||
<el-row :gutter="12" type="flex" class="exec-desc-row">
|
||||
<el-col :span="12">
|
||||
<div class="exec-desc-item"><span class="exec-desc-label">环境</span>{{ executionSummary.env_code || executionSummary.envCode || '-' }}</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="exec-desc-item"><span class="exec-desc-label">模式</span>{{ (executionSummary.run_mode || executionSummary.runMode) === 2 ? '并行' : '串行' }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="12" type="flex" class="exec-desc-row">
|
||||
<el-col :span="12">
|
||||
<div class="exec-desc-item"><span class="exec-desc-label">总数</span>{{ pickCount(executionSummary, 'total_count', 'totalCount') }}</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="exec-desc-item">
|
||||
<span class="exec-desc-label">通过 / 失败</span>
|
||||
{{ pickCount(executionSummary, 'passed_count', 'passedCount') }} /
|
||||
{{ pickCount(executionSummary, 'failed_count', 'failedCount') }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="exec-desc-item exec-desc-block">
|
||||
<span class="exec-desc-label">Jenkins</span>
|
||||
<el-link v-if="jenkinsLink" :href="jenkinsLink" target="_blank" type="primary">{{ jenkinsLink }}</el-link>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
<div class="exec-desc-item exec-desc-block">
|
||||
<span class="exec-desc-label">控制台</span>
|
||||
<el-link v-if="consoleLink" :href="consoleLink" target="_blank" type="primary">打开</el-link>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
<div class="exec-desc-item exec-desc-block">
|
||||
<span class="exec-desc-label">报告</span>
|
||||
<el-link v-if="reportLink" :href="reportLink" target="_blank" type="primary">打开</el-link>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="polling" class="poll-hint">执行中，每 5 秒自动刷新状态…</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="case-list-card" shadow="never">
|
||||
<div slot="header" class="card-header">执行明细</div>
|
||||
<el-table v-loading="caseListLoading" :data="executionCaseRows" border max-height="420">
|
||||
<el-table-column prop="run_order" label="#" width="56">
|
||||
<template slot-scope="scope">{{ scope.row.run_order != null ? scope.row.run_order : scope.row.runOrder }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="case_key" label="编号" min-width="100">
|
||||
<template slot-scope="scope">{{ scope.row.case_key || scope.row.caseKey }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="case_title" label="标题" min-width="160">
|
||||
<template slot-scope="scope">{{ scope.row.case_title || scope.row.caseTitle }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="caseStatusTag(scope.row.status)">{{ caseStatusLabel(scope.row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="result_message" label="结果" min-width="120" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.result_message || scope.row.resultMessage || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗时(s)" width="88">
|
||||
<template slot-scope="scope">{{ scope.row.duration_seconds != null ? scope.row.duration_seconds : scope.row.durationSeconds }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="case-pager"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:page-sizes="[20, 50, 100, 200]"
|
||||
:page-size="casePageSize"
|
||||
:current-page="casePageNo"
|
||||
:total="caseListTotal"
|
||||
@size-change="handleCaseListSizeChange"
|
||||
@current-change="handleCasePageChange" />
|
||||
</el-card>
|
||||
</template>
|
||||
</page-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageSection from '@/components/TestPlatform/common/PageSection'
|
||||
import { getPlanCaseList } from '@/api/planApi'
|
||||
import { getProjectEnvironments } from '@/api/projectApi'
|
||||
import {
|
||||
getAutomationExecutionCaseList,
|
||||
getAutomationExecutionDetail,
|
||||
postAutomationExecutionPoll,
|
||||
runAutomationPlan
|
||||
} from '@/api/automationApi'
|
||||
|
||||
const MAIN_STATUS_LABELS = {
|
||||
0: '待触发',
|
||||
1: '触发中',
|
||||
2: '排队中',
|
||||
3: '执行中',
|
||||
4: '成功',
|
||||
5: '失败',
|
||||
6: '已取消',
|
||||
7: '触发失败',
|
||||
8: '回调异常'
|
||||
}
|
||||
|
||||
const CASE_STATUS_LABELS = {
|
||||
0: '待执行',
|
||||
1: '执行中',
|
||||
2: '通过',
|
||||
3: '失败',
|
||||
4: '阻塞',
|
||||
5: '跳过',
|
||||
6: '未找到',
|
||||
7: '已取消'
|
||||
}
|
||||
|
||||
/** 主单终态：文档 4~8 */
|
||||
const MAIN_TERMINAL = new Set([4, 5, 6, 7, 8])
|
||||
|
||||
function pickEnvCode(item) {
|
||||
if (!item) return ''
|
||||
const c = item.code || item.env_code || item.envCode
|
||||
if (c != null && String(c).trim() !== '') return String(c).trim()
|
||||
const name = (item.name || '').trim()
|
||||
if (name) return name
|
||||
if (item.id != null) return String(item.id)
|
||||
return ''
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PlanAutomationRun',
|
||||
components: { PageSection },
|
||||
data() {
|
||||
return {
|
||||
projectId: this.$route.query.projectId || '',
|
||||
planId: this.$route.query.planId || '',
|
||||
routeEnvId: this.$route.query.environmentId || '',
|
||||
casesLoading: false,
|
||||
planCaseRows: [],
|
||||
planCasePageNo: 1,
|
||||
planCasePageSize: 10,
|
||||
planCaseTotal: 0,
|
||||
selectedRows: [],
|
||||
envOptions: [],
|
||||
runForm: {
|
||||
envCode: '',
|
||||
runMode: 1,
|
||||
roundNo: null,
|
||||
remark: ''
|
||||
},
|
||||
runRules: {
|
||||
envCode: [{ required: true, message: '请选择执行环境', trigger: 'change' }]
|
||||
},
|
||||
runSubmitting: false,
|
||||
executionId: null,
|
||||
executionSummary: {},
|
||||
executionCaseRows: [],
|
||||
caseListLoading: false,
|
||||
caseListTotal: 0,
|
||||
casePageNo: 1,
|
||||
casePageSize: 50,
|
||||
detailLoading: false,
|
||||
pollTimer: null,
|
||||
polling: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
productName() {
|
||||
return this.$route.query.productName || ''
|
||||
},
|
||||
projectName() {
|
||||
return this.$route.query.projectName || ''
|
||||
},
|
||||
planNameDisplay() {
|
||||
return this.$route.query.planName || ''
|
||||
},
|
||||
/** 与计划列表入口一致，由路由 query 传入（计划级 jenkins_url） */
|
||||
planJenkinsUrl() {
|
||||
const q = this.$route.query || {}
|
||||
const raw = q.jenkinsUrl != null && String(q.jenkinsUrl).trim() !== '' ? q.jenkinsUrl : q.jenkins_url
|
||||
if (raw == null || String(raw).trim() === '') return ''
|
||||
return String(raw).trim()
|
||||
},
|
||||
jenkinsLink() {
|
||||
const e = this.executionSummary
|
||||
return e.jenkins_build_url || e.jenkinsBuildUrl || ''
|
||||
},
|
||||
consoleLink() {
|
||||
const e = this.executionSummary
|
||||
return e.console_url || e.consoleUrl || ''
|
||||
},
|
||||
reportLink() {
|
||||
const e = this.executionSummary
|
||||
return e.report_url || e.reportUrl || ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query': {
|
||||
handler() {
|
||||
this.projectId = this.$route.query.projectId || ''
|
||||
this.planId = this.$route.query.planId || ''
|
||||
this.routeEnvId = this.$route.query.environmentId || ''
|
||||
this.applyRouteExecutionContext()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.bootstrap()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopPolling()
|
||||
},
|
||||
methods: {
|
||||
/** 兼容下划线 / 驼峰；0 为有效计数（Vue2 模板不支持 ??） */
|
||||
pickCount(row, snakeKey, camelKey) {
|
||||
const o = row || {}
|
||||
const a = o[snakeKey]
|
||||
if (a != null && a !== '') return a
|
||||
const b = o[camelKey]
|
||||
if (b != null && b !== '') return b
|
||||
return '-'
|
||||
},
|
||||
parseRouteExecutionId() {
|
||||
const q = this.$route.query || {}
|
||||
const raw = q.executionId != null && q.executionId !== '' ? q.executionId : q.execution_id
|
||||
if (raw === '' || raw === undefined || raw === null) return null
|
||||
const n = Number(raw)
|
||||
return Number.isNaN(n) ? null : n
|
||||
},
|
||||
/** 与路由同步：带 executionId 则进入执行详情；去掉则回到选例执行 */
|
||||
applyRouteExecutionContext() {
|
||||
const exId = this.parseRouteExecutionId()
|
||||
if (exId != null) {
|
||||
if (this.executionId !== exId) {
|
||||
this.stopPolling()
|
||||
this.executionId = exId
|
||||
this.loadEnvironments().then(() => this.applyDefaultEnvFromRoute())
|
||||
return this.refreshExecution().then(() => this.startPollingIfNeeded())
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
if (this.executionId != null) {
|
||||
this.resetRunAnother()
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
syncRouteExecutionId(id) {
|
||||
if (id == null) return
|
||||
const q = Object.assign({}, this.$route.query || {}, { executionId: id })
|
||||
this.$router.replace({ path: '/test-platform/plan/automation', query: q }).catch(() => {})
|
||||
},
|
||||
bootstrap() {
|
||||
const exId = this.parseRouteExecutionId()
|
||||
if (exId != null) {
|
||||
this.executionId = exId
|
||||
this.loadEnvironments().then(() => {
|
||||
this.applyDefaultEnvFromRoute()
|
||||
})
|
||||
return this.refreshExecution().then(() => this.startPollingIfNeeded())
|
||||
}
|
||||
this.executionId = null
|
||||
return this.loadEnvironments().then(() => {
|
||||
this.applyDefaultEnvFromRoute()
|
||||
this.fetchPlanCases()
|
||||
})
|
||||
},
|
||||
loadEnvironments() {
|
||||
const pid = Number(this.projectId)
|
||||
if (!pid || Number.isNaN(pid)) {
|
||||
this.envOptions = []
|
||||
return Promise.resolve()
|
||||
}
|
||||
return getProjectEnvironments(pid, { pageNo: 1, pageSize: 1000 })
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.items || data.list || data.data || []
|
||||
this.envOptions = (Array.isArray(list) ? list : []).map(item => {
|
||||
const value = pickEnvCode(item)
|
||||
const labelName = (item.name || value || '').trim() || value
|
||||
return {
|
||||
value,
|
||||
label: value && labelName !== value ? `${labelName}（${value}）` : labelName,
|
||||
raw: item
|
||||
}
|
||||
}).filter(o => o.value)
|
||||
})
|
||||
.catch(() => {
|
||||
this.envOptions = []
|
||||
})
|
||||
},
|
||||
applyDefaultEnvFromRoute() {
|
||||
const eid = this.routeEnvId
|
||||
if (!eid || !this.envOptions.length) return
|
||||
const found = this.envOptions.find(
|
||||
o => o.raw && String(o.raw.id) === String(eid)
|
||||
)
|
||||
if (found && found.value) {
|
||||
this.runForm.envCode = found.value
|
||||
}
|
||||
},
|
||||
fetchPlanCases() {
|
||||
if (!this.planId || !this.projectId) {
|
||||
this.planCaseRows = []
|
||||
this.planCaseTotal = 0
|
||||
return
|
||||
}
|
||||
this.casesLoading = true
|
||||
getPlanCaseList(this.projectId, this.planId, {
|
||||
pageNo: this.planCasePageNo,
|
||||
pageSize: this.planCasePageSize
|
||||
})
|
||||
.then(listRes => {
|
||||
const data = (listRes && listRes.data) || listRes || {}
|
||||
const list = data.list || data.items || []
|
||||
this.planCaseTotal = Number(data.total != null ? data.total : (Array.isArray(list) ? list.length : 0))
|
||||
this.planCaseRows = (Array.isArray(list) ? list : []).map(item => ({
|
||||
planCaseId: item.id,
|
||||
caseId: item.case_id != null ? item.case_id : item.caseId,
|
||||
caseKey: item.case_key || item.caseKey || '',
|
||||
caseTitle: item.case_title || item.caseTitle || item.title || '',
|
||||
isAuto: item.is_auto != null ? item.is_auto : item.isAuto
|
||||
}))
|
||||
})
|
||||
.catch(() => {
|
||||
this.planCaseRows = []
|
||||
this.planCaseTotal = 0
|
||||
})
|
||||
.finally(() => {
|
||||
this.casesLoading = false
|
||||
})
|
||||
},
|
||||
refreshPlanCaseList() {
|
||||
this.planCasePageNo = 1
|
||||
this.fetchPlanCases()
|
||||
},
|
||||
handlePlanCaseSizeChange(size) {
|
||||
this.planCasePageSize = size
|
||||
this.planCasePageNo = 1
|
||||
this.fetchPlanCases()
|
||||
},
|
||||
handlePlanCaseCurrentChange(page) {
|
||||
this.planCasePageNo = page
|
||||
this.fetchPlanCases()
|
||||
},
|
||||
onSelectionChange(rows) {
|
||||
this.selectedRows = rows || []
|
||||
},
|
||||
formatAuto(row) {
|
||||
const v = row && row.isAuto
|
||||
if (v === 1 || v === true || v === '1') return '是'
|
||||
if (v === 0 || v === false || v === '0') return '否'
|
||||
return '-'
|
||||
},
|
||||
submitRun(runAll) {
|
||||
if (!this.$refs.runFormRef) return
|
||||
this.$refs.runFormRef.validate(valid => {
|
||||
if (!valid) return
|
||||
const planId = Number(this.planId)
|
||||
if (!planId || Number.isNaN(planId)) {
|
||||
this.$message.warning('计划 ID 无效')
|
||||
return
|
||||
}
|
||||
if (!runAll && (!this.selectedRows || !this.selectedRows.length)) {
|
||||
this.$message.warning('请先勾选要执行的用例')
|
||||
return
|
||||
}
|
||||
const payload = {
|
||||
planId,
|
||||
envCode: this.runForm.envCode,
|
||||
runMode: this.runForm.runMode || 1
|
||||
}
|
||||
const rn = this.runForm.roundNo
|
||||
if (rn != null && rn !== '' && !Number.isNaN(Number(rn))) {
|
||||
payload.roundNo = Number(rn)
|
||||
}
|
||||
if (this.runForm.remark) {
|
||||
payload.remark = this.runForm.remark
|
||||
}
|
||||
if (!runAll) {
|
||||
const ids = this.selectedRows.map(r => Number(r.caseId)).filter(id => !Number.isNaN(id))
|
||||
if (!ids.length) {
|
||||
this.$message.warning('勾选用例缺少 caseId')
|
||||
return
|
||||
}
|
||||
payload.caseIds = ids
|
||||
}
|
||||
this.runSubmitting = true
|
||||
runAutomationPlan(payload)
|
||||
.then(res => {
|
||||
const body = (res && res.data) || res || {}
|
||||
const id = body.id
|
||||
if (id == null) {
|
||||
this.$message.error('未返回 execution id')
|
||||
return
|
||||
}
|
||||
this.$message.success((res && res.msg) || (res && res.message) || '已提交自动化执行')
|
||||
this.executionId = id
|
||||
this.executionSummary = body
|
||||
this.casePageNo = 1
|
||||
this.refreshExecution().then(() => {
|
||||
this.startPollingIfNeeded()
|
||||
this.syncRouteExecutionId(id)
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
this.runSubmitting = false
|
||||
})
|
||||
})
|
||||
},
|
||||
refreshExecution() {
|
||||
if (!this.executionId) return Promise.resolve()
|
||||
this.detailLoading = true
|
||||
const d1 = getAutomationExecutionDetail(this.executionId)
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
this.executionSummary = data && typeof data === 'object' ? data : {}
|
||||
})
|
||||
.catch(() => {})
|
||||
const d2 = this.loadExecutionCasePage()
|
||||
return Promise.all([d1, d2]).finally(() => {
|
||||
this.detailLoading = false
|
||||
})
|
||||
},
|
||||
loadExecutionCasePage() {
|
||||
if (!this.executionId) return Promise.resolve()
|
||||
this.caseListLoading = true
|
||||
return getAutomationExecutionCaseList({
|
||||
executionId: this.executionId,
|
||||
pageNo: this.casePageNo,
|
||||
pageSize: this.casePageSize
|
||||
})
|
||||
.then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.list || data.items || []
|
||||
this.executionCaseRows = Array.isArray(list) ? list : []
|
||||
this.caseListTotal = Number(data.total != null ? data.total : this.executionCaseRows.length)
|
||||
})
|
||||
.catch(() => {
|
||||
this.executionCaseRows = []
|
||||
this.caseListTotal = 0
|
||||
})
|
||||
.finally(() => {
|
||||
this.caseListLoading = false
|
||||
})
|
||||
},
|
||||
handleCasePageChange(p) {
|
||||
this.casePageNo = p
|
||||
this.loadExecutionCasePage()
|
||||
},
|
||||
handleCaseListSizeChange(size) {
|
||||
this.casePageSize = size
|
||||
this.casePageNo = 1
|
||||
this.loadExecutionCasePage()
|
||||
},
|
||||
mainStatusLabel(s) {
|
||||
return MAIN_STATUS_LABELS[s] != null ? MAIN_STATUS_LABELS[s] : s == null ? '-' : String(s)
|
||||
},
|
||||
mainStatusTag(s) {
|
||||
const map = { 0: 'info', 1: 'warning', 2: 'warning', 3: 'primary', 4: 'success', 5: 'danger', 6: 'info', 7: 'danger', 8: 'danger' }
|
||||
return map[s] || 'info'
|
||||
},
|
||||
caseStatusLabel(s) {
|
||||
return CASE_STATUS_LABELS[s] != null ? CASE_STATUS_LABELS[s] : s == null ? '-' : String(s)
|
||||
},
|
||||
caseStatusTag(s) {
|
||||
const map = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger', 4: 'warning', 5: 'info', 6: 'info', 7: 'info' }
|
||||
return map[s] || 'info'
|
||||
},
|
||||
isTerminalMainStatus(s) {
|
||||
return s != null && MAIN_TERMINAL.has(Number(s))
|
||||
},
|
||||
/** 与执行结果列表页 poll 一致：合并返回字段到主单摘要 */
|
||||
mergePollIntoExecutionSummary(d) {
|
||||
if (!d || typeof d !== 'object') return
|
||||
const next = Object.assign({}, this.executionSummary)
|
||||
if (d.status !== undefined && d.status !== null) next.status = d.status
|
||||
const setUrlPair = (snake, camel) => {
|
||||
if (d[snake] != null && String(d[snake]).trim() !== '') next[snake] = d[snake]
|
||||
if (d[camel] != null && String(d[camel]).trim() !== '') next[camel] = d[camel]
|
||||
}
|
||||
setUrlPair('report_url', 'reportUrl')
|
||||
setUrlPair('console_url', 'consoleUrl')
|
||||
setUrlPair('jenkins_build_url', 'jenkinsBuildUrl')
|
||||
if (d.jenkins_build_number != null || d.jenkinsBuildNumber != null) {
|
||||
const n = d.jenkins_build_number != null ? d.jenkins_build_number : d.jenkinsBuildNumber
|
||||
next.jenkins_build_number = n
|
||||
next.jenkinsBuildNumber = n
|
||||
}
|
||||
if (d.end_time != null && String(d.end_time).trim() !== '') next.end_time = d.end_time
|
||||
if (d.endTime != null && String(d.endTime).trim() !== '') next.endTime = d.endTime
|
||||
if (d.duration_seconds != null || d.durationSeconds != null) {
|
||||
const sec = d.duration_seconds != null ? d.duration_seconds : d.durationSeconds
|
||||
next.duration_seconds = sec
|
||||
next.durationSeconds = sec
|
||||
}
|
||||
if (d.id != null) next.id = d.id
|
||||
this.executionSummary = next
|
||||
},
|
||||
/** 仅轮询 poll 更新主单；不轮询执行明细列表（与执行结果列表页一致） */
|
||||
startPollingIfNeeded() {
|
||||
this.stopPolling()
|
||||
const s = this.executionSummary && this.executionSummary.status
|
||||
if (this.isTerminalMainStatus(s)) {
|
||||
this.polling = false
|
||||
return
|
||||
}
|
||||
if (!this.executionId) {
|
||||
this.polling = false
|
||||
return
|
||||
}
|
||||
this.polling = true
|
||||
const tick = () => {
|
||||
postAutomationExecutionPoll({ executionId: this.executionId })
|
||||
.then(res => {
|
||||
if (!res || res.code !== 20000) return
|
||||
const d = res.data
|
||||
if (!d || typeof d !== 'object') return
|
||||
this.mergePollIntoExecutionSummary(d)
|
||||
if (this.isTerminalMainStatus(this.executionSummary.status)) {
|
||||
this.stopPolling()
|
||||
this.loadExecutionCasePage()
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
tick()
|
||||
this.pollTimer = window.setInterval(tick, 5000)
|
||||
},
|
||||
stopPolling() {
|
||||
if (this.pollTimer != null) {
|
||||
clearInterval(this.pollTimer)
|
||||
this.pollTimer = null
|
||||
}
|
||||
this.polling = false
|
||||
},
|
||||
resetRunAnother() {
|
||||
this.stopPolling()
|
||||
this.executionId = null
|
||||
this.executionSummary = {}
|
||||
this.executionCaseRows = []
|
||||
this.caseListTotal = 0
|
||||
this.casePageNo = 1
|
||||
this.planCasePageNo = 1
|
||||
if (this.$refs.caseTable) {
|
||||
this.$refs.caseTable.clearSelection()
|
||||
}
|
||||
this.selectedRows = []
|
||||
const q = Object.assign({}, this.$route.query || {})
|
||||
delete q.executionId
|
||||
delete q.execution_id
|
||||
this.$router.replace({ path: '/test-platform/plan/automation', query: q }).catch(() => {})
|
||||
this.fetchPlanCases()
|
||||
},
|
||||
goExecutionResultList() {
|
||||
const q = this.$route.query || {}
|
||||
this.$router.push({
|
||||
path: '/test-platform/plan/automation/executions',
|
||||
query: {
|
||||
productId: q.productId || undefined,
|
||||
productName: q.productName || '',
|
||||
projectId: this.projectId || undefined,
|
||||
projectName: q.projectName || '',
|
||||
planId: this.planId || undefined,
|
||||
planName: this.planNameDisplay || q.planName || '',
|
||||
environmentId: q.environmentId || undefined,
|
||||
jenkinsUrl: q.jenkinsUrl || undefined
|
||||
}
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.stopPolling()
|
||||
this.$router.push({
|
||||
path: '/test-platform/plan',
|
||||
query: {
|
||||
productId: this.$route.query.productId || undefined,
|
||||
projectId: this.projectId || undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-wrap {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.filter-toolbar-form {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.plan-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.plan-name-input {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.plan-jenkins-sep {
|
||||
color: #c0c4cc;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.plan-jenkins-link {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-toolbar-actions {
|
||||
flex-shrink: 0;
|
||||
padding-top: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.run-card,
|
||||
.exec-card,
|
||||
.case-list-card {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 12px 0 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.run-actions {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.exec-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.exec-no {
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.exec-tag {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.exec-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.exec-desc {
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.exec-desc-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.exec-desc-item {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.exec-desc-block {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.exec-desc-label {
|
||||
display: inline-block;
|
||||
min-width: 88px;
|
||||
margin-right: 8px;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.poll-hint {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.plan-case-pager {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.case-pager {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page-wrap">
|
||||
<page-section :title="isEditMode ? '编辑计划' : '计划构建'">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" size="small">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="200px" size="small">
|
||||
<el-form-item label="产品名称" prop="productId">
|
||||
<el-select
|
||||
v-model="form.productId"
|
||||
@@ -70,6 +70,12 @@
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否自动化测试计划" prop="isAuto">
|
||||
<el-select v-model.number="form.isAuto" placeholder="请选择" style="width: 200px;">
|
||||
<el-option :value="0" label="否" />
|
||||
<el-option :value="1" label="是" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="start_time">
|
||||
<el-date-picker
|
||||
v-model="form.start_time"
|
||||
@@ -93,6 +99,14 @@
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.description" type="textarea" :rows="4"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动化执行 Jenkins URL">
|
||||
<el-input
|
||||
v-model.trim="form.jenkins_url"
|
||||
maxlength="512"
|
||||
show-word-limit
|
||||
placeholder="选填，自动化触发时使用的 Jenkins 地址"
|
||||
style="width: 480px;" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="submitForm">保存计划</el-button>
|
||||
@@ -128,7 +142,10 @@ export default {
|
||||
environment_id: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
description: ''
|
||||
description: '',
|
||||
jenkins_url: '',
|
||||
/** 是否自动化测试计划：0 否，1 是，提交字段名 isAuto */
|
||||
isAuto: 0
|
||||
},
|
||||
rules: {
|
||||
productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
|
||||
@@ -245,6 +262,8 @@ export default {
|
||||
end_time: this.form.end_time,
|
||||
description: this.form.description
|
||||
}
|
||||
payload.jenkins_url = (this.form.jenkins_url || '').trim()
|
||||
payload.isAuto = this.form.isAuto === 1 ? 1 : 0
|
||||
this.saving = true
|
||||
const request = this.isEditMode
|
||||
? updatePlan(projectId, this.planId, payload)
|
||||
@@ -344,6 +363,10 @@ export default {
|
||||
this.form.start_time = this.toDatePickerValue(this.pickPlanDetailStartRaw(data))
|
||||
this.form.end_time = this.toDatePickerValue(this.pickPlanDetailEndRaw(data))
|
||||
this.form.description = data.description || ''
|
||||
this.form.jenkins_url = data.jenkins_url || data.jenkinsUrl || ''
|
||||
const autoRaw = data.isAuto !== undefined && data.isAuto !== null ? data.isAuto : data.is_auto
|
||||
this.form.isAuto =
|
||||
autoRaw === true || autoRaw === 1 || autoRaw === '1' ? 1 : 0
|
||||
}).catch(() => {})
|
||||
},
|
||||
initByRouteProject() {
|
||||
|
||||
@@ -89,6 +89,8 @@ export default {
|
||||
tableData: [],
|
||||
selectedRows: [],
|
||||
associatedCaseIdMap: {},
|
||||
/** 自动化测试计划（is_auto=1）：用例列表只按是否实现自动化过滤，不按评审通过状态过滤 */
|
||||
planIsAutomation: false,
|
||||
queryForm: {
|
||||
keyword: '',
|
||||
moduleName: ''
|
||||
@@ -146,10 +148,14 @@ export default {
|
||||
const params = {
|
||||
keyword: this.queryForm.keyword || undefined,
|
||||
module_name: this.queryForm.moduleName || undefined,
|
||||
status: 4,
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize
|
||||
}
|
||||
if (this.planIsAutomation) {
|
||||
params.isAuto = 1
|
||||
} else {
|
||||
params.status = 4
|
||||
}
|
||||
Promise.all([this.loadAssociatedCaseIds(), getCaseList(this.projectId, params)]).then(([, res]) => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.list || data.items || []
|
||||
@@ -169,13 +175,20 @@ export default {
|
||||
isCaseAssociated(caseId) {
|
||||
return !!this.associatedCaseIdMap[caseId]
|
||||
},
|
||||
loadPlanOwner() {
|
||||
if (!this.projectId || !this.planId || this.ownerId) {
|
||||
/** 拉计划详情：负责人 + 是否自动化测试计划（关联用例列表筛选依赖） */
|
||||
loadPlanContext() {
|
||||
if (!this.projectId || !this.planId) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
return getPlanDetail(this.projectId, this.planId).then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
this.ownerId = data.owner_id || data.ownerId || ''
|
||||
const raw = (res && res.data) || res || {}
|
||||
const inner = raw.plan || raw.detail
|
||||
const data = inner && typeof inner === 'object' ? Object.assign({}, raw, inner) : raw
|
||||
if (!this.ownerId) {
|
||||
this.ownerId = data.owner_id || data.ownerId || ''
|
||||
}
|
||||
const autoRaw = data.isAuto !== undefined && data.isAuto !== null ? data.isAuto : data.is_auto
|
||||
this.planIsAutomation = autoRaw === 1 || autoRaw === true || autoRaw === '1'
|
||||
}).catch(() => {})
|
||||
},
|
||||
handleSelectionChange(rows) {
|
||||
@@ -232,7 +245,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadPlanOwner().finally(() => {
|
||||
this.loadPlanContext().finally(() => {
|
||||
this.fetchCases()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -27,6 +27,12 @@
|
||||
style="margin-top: 12px;">
|
||||
<el-table-column prop="planCaseId" label="计划用例ID" width="120"></el-table-column>
|
||||
<el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
|
||||
<el-table-column label="模块路径" min-width="200" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.modulePath || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模块名称" min-width="140" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.moduleName || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
|
||||
<el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
|
||||
<el-table-column label="执行状态" width="110">
|
||||
@@ -156,6 +162,8 @@ export default {
|
||||
statusLabel: this.formatExecuteStatus(item.status),
|
||||
actualResult: item.actual_result || item.actualResult || '',
|
||||
caseKey: item.case_key || item.caseKey || '',
|
||||
modulePath: item.module_path || item.modulePath || '',
|
||||
moduleName: item.module_name || item.moduleName || '',
|
||||
caseTitle: item.case_title || item.caseTitle || item.title || '',
|
||||
title: item.title || item.case_title || item.caseTitle || ''
|
||||
}))
|
||||
|
||||
@@ -74,7 +74,9 @@
|
||||
</el-form>
|
||||
<el-table v-loading="loading" :data="tableData" border style="margin-top: 16px;">
|
||||
<el-table-column prop="name" label="计划名称" min-width="180"></el-table-column>
|
||||
<el-table-column prop="version" label="版本" width="120"></el-table-column>
|
||||
<el-table-column label="是否自动化测试" width="140">
|
||||
<template slot-scope="scope">{{ formatPlanIsAuto(scope.row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间" min-width="170">
|
||||
<template slot-scope="scope">{{ formatDateTime(getStartTimeValue(scope.row)) }}</template>
|
||||
</el-table-column>
|
||||
@@ -90,19 +92,20 @@
|
||||
<el-table-column label="状态" width="110">
|
||||
<template slot-scope="scope">{{ formatStatus(scope.row.status) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="600">
|
||||
<el-table-column label="操作" width="660">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="goEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="goAssociateCases(scope.row)">关联用例</el-button>
|
||||
<el-button type="text" @click="goExecute(scope.row)">执行</el-button>
|
||||
<el-button v-if="!isPlanAutomation(scope.row)" type="text" @click="goExecute(scope.row)">执行</el-button>
|
||||
<el-button type="text" @click="goProgress(scope.row)">进度</el-button>
|
||||
<el-button type="text" @click="openHookSendDialog(scope.row)">机器人消息</el-button>
|
||||
<el-button type="text" @click="runAutoCases(scope.row)">执行自动化用例</el-button>
|
||||
<el-button type="text" @click="openHookSendDialog(scope.row)">发送消息</el-button>
|
||||
<el-button v-if="isPlanAutomation(scope.row)" type="text" @click="runAutoCases(scope.row)">执行自动化用例</el-button>
|
||||
<el-button type="text" class="danger-text" @click="confirmDeletePlan(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog
|
||||
title="发送机器人消息"
|
||||
title="发送消息"
|
||||
:visible.sync="hookSendDialogVisible"
|
||||
width="600px"
|
||||
append-to-body
|
||||
@@ -180,7 +183,7 @@
|
||||
|
||||
<script>
|
||||
import PageSection from '@/components/TestPlatform/common/PageSection'
|
||||
import { getPlanList } from '@/api/planApi'
|
||||
import { deletePlan, getPlanList } from '@/api/planApi'
|
||||
import { getProductList } from '@/api/productApi'
|
||||
import {
|
||||
getProjectDetail,
|
||||
@@ -535,6 +538,28 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmDeletePlan(row) {
|
||||
if (!row || row.id == null) {
|
||||
this.$message.warning('缺少计划信息')
|
||||
return
|
||||
}
|
||||
if (!this.projectId) {
|
||||
this.$message.warning('请先选择项目')
|
||||
return
|
||||
}
|
||||
const name = (row.name || '').trim() || `计划 #${row.id}`
|
||||
this.$confirm(`确定删除计划「${name}」吗？删除后不可恢复。`, '删除确认', {
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => deletePlan(row.id))
|
||||
.then(() => {
|
||||
this.$message.success('删除成功')
|
||||
this.fetchList()
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
goAssociateCases(row) {
|
||||
const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
|
||||
const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
|
||||
@@ -769,8 +794,31 @@ export default {
|
||||
this.hookSendSubmitting = false
|
||||
})
|
||||
},
|
||||
runAutoCases() {
|
||||
this.$message.info('执行自动化用例功能开发中')
|
||||
runAutoCases(row) {
|
||||
if (!row || row.id == null) {
|
||||
this.$message.warning('缺少计划信息')
|
||||
return
|
||||
}
|
||||
if (!this.projectId) {
|
||||
this.$message.warning('请先选择项目')
|
||||
return
|
||||
}
|
||||
const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
|
||||
const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
|
||||
const jenkinsUrl = (row.jenkins_url || row.jenkinsUrl || '').trim()
|
||||
this.$router.push({
|
||||
path: '/test-platform/plan/automation',
|
||||
query: {
|
||||
productId: this.selectedProductId || undefined,
|
||||
productName: (product && product.name) || '',
|
||||
projectId: this.projectId,
|
||||
projectName: (project && project.name) || '',
|
||||
planId: row.id,
|
||||
planName: row.name || '',
|
||||
environmentId: row.environment_id != null ? row.environment_id : row.environmentId,
|
||||
jenkinsUrl: jenkinsUrl || undefined
|
||||
}
|
||||
})
|
||||
},
|
||||
goProgress(row) {
|
||||
const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
|
||||
@@ -787,6 +835,19 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
formatPlanIsAuto(row) {
|
||||
if (!row) return '-'
|
||||
const v = row.isAuto !== undefined && row.isAuto !== null ? row.isAuto : row.is_auto
|
||||
if (v === 1 || v === true || v === '1') return '是'
|
||||
if (v === 0 || v === false || v === '0') return '否'
|
||||
return '-'
|
||||
},
|
||||
/** 列表 is_auto === 1：自动化测试计划，只展示「执行自动化用例」 */
|
||||
isPlanAutomation(row) {
|
||||
if (!row) return false
|
||||
const v = row.isAuto !== undefined && row.isAuto !== null ? row.isAuto : row.is_auto
|
||||
return v === 1 || v === true || v === '1'
|
||||
},
|
||||
formatStatus(value) {
|
||||
const map = { 0: '草稿', 1: '进行中', 2: '已完成', 3: '已归档', 4: '已通过' }
|
||||
return map[value] || value
|
||||
@@ -872,6 +933,14 @@ export default {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.danger-text {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.danger-text:hover {
|
||||
color: #f78989;
|
||||
}
|
||||
|
||||
.hook-send-result {
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
|
||||
@@ -84,6 +84,12 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
|
||||
<el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
|
||||
<el-table-column label="自动化执行 Jenkins URL" min-width="180" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<el-link v-if="scope.row.jenkinsUrl" :href="scope.row.jenkinsUrl" target="_blank" type="primary">打开</el-link>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="statusTagType(scope.row.statusCode)">{{ statusLabel(scope.row.statusCode) }}</el-tag>
|
||||
@@ -224,7 +230,8 @@ export default {
|
||||
caseTitle: item.case_title || item.caseTitle || item.title || '',
|
||||
title: item.title || item.case_title || item.caseTitle || '',
|
||||
statusCode: this.toNumber(item.status),
|
||||
actualResult: item.actual_result || item.actualResult || ''
|
||||
actualResult: item.actual_result || item.actualResult || '',
|
||||
jenkinsUrl: item.jenkins_url || item.jenkinsUrl || ''
|
||||
}))
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
@@ -0,0 +1,820 @@
|
||||
<template>
|
||||
<div class="page-wrap">
|
||||
<page-section title="业务技能配置">
|
||||
<el-form :inline="true" size="small" class="filter-bar" @submit.native.prevent>
|
||||
<el-form-item label="产品">
|
||||
<el-select
|
||||
v-model="selectedProductId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择产品"
|
||||
style="width: 200px;"
|
||||
@change="handleProductChange"
|
||||
@focus="loadProductOptions">
|
||||
<el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目">
|
||||
<el-select
|
||||
v-model="selectedProjectId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择项目"
|
||||
style="width: 220px;"
|
||||
:disabled="!selectedProductId"
|
||||
@change="handleProjectChange">
|
||||
<el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-tabs v-model="configActiveTab" class="skill-rule-tabs" style="margin-top: 8px;" @tab-click="onConfigTabClick">
|
||||
<el-tab-pane label="Skills 配置" name="skills">
|
||||
<el-form :inline="true" size="small" class="toolbar-form" @submit.native.prevent>
|
||||
<el-form-item label="模块">
|
||||
<el-select v-model="skillQuery.moduleId" clearable filterable placeholder="全部" style="width: 180px;" :disabled="!projectId">
|
||||
<el-option v-for="m in flatModuleOptions" :key="m.id" :label="m.name" :value="m.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字">
|
||||
<el-input v-model="skillQuery.keyword" clearable style="width: 160px;" @keyup.enter.native="fetchSkillList" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="skillQuery.status" clearable placeholder="全部" style="width: 100px;">
|
||||
<el-option v-for="o in statusOptions" :key="'s-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="skillQuery.skillType" clearable placeholder="全部" style="width: 130px;">
|
||||
<el-option v-for="o in skillTypeOptions" :key="'t-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="风险">
|
||||
<el-select v-model="skillQuery.riskLevel" clearable placeholder="全部" style="width: 100px;">
|
||||
<el-option v-for="o in riskLevelOptions" :key="'r-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :disabled="!projectId" @click="skillPageNo = 1; fetchSkillList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="resetSkillQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" plain :disabled="!projectId" @click="openSkillCreate">新建 Skill</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="skillLoading" :data="skillList" border size="small" style="margin-top: 8px;">
|
||||
<el-table-column prop="id" label="ID" width="72" />
|
||||
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="code" label="编码" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="类型" width="100">
|
||||
<template slot-scope="scope">{{ formatSkillType(scope.row.skill_type) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="风险" width="88">
|
||||
<template slot-scope="scope">{{ formatRiskLevel(scope.row.risk_level) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="88">
|
||||
<template slot-scope="scope">{{ formatConfigStatus(scope.row.status) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标签" min-width="120" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ formatTagsCol(scope.row.tags) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updated_time" label="更新时间" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="140" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="openSkillEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" style="color: #F56C6C;" @click="removeSkill(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pager-wrap">
|
||||
<el-pagination
|
||||
:current-page="skillPageNo"
|
||||
:page-size="skillPageSize"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:total="skillTotal"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="onSkillSize"
|
||||
@current-change="onSkillPage" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="业务规则配置" name="rules">
|
||||
<el-form :inline="true" size="small" class="toolbar-form" @submit.native.prevent>
|
||||
<el-form-item label="模块">
|
||||
<el-select v-model="ruleQuery.moduleId" clearable filterable placeholder="全部" style="width: 180px;" :disabled="!projectId">
|
||||
<el-option v-for="m in flatModuleOptions" :key="'r-' + m.id" :label="m.name" :value="m.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字">
|
||||
<el-input v-model="ruleQuery.keyword" clearable style="width: 160px;" @keyup.enter.native="fetchRuleList" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="ruleQuery.status" clearable placeholder="全部" style="width: 100px;">
|
||||
<el-option v-for="o in statusOptions" :key="'rs-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级">
|
||||
<el-select v-model="ruleQuery.priority" clearable placeholder="全部" style="width: 100px;">
|
||||
<el-option v-for="o in priorityOptions" :key="'p-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :disabled="!projectId" @click="rulePageNo = 1; fetchRuleList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="resetRuleQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" plain :disabled="!projectId" @click="openRuleCreate">新建规则</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="ruleLoading" :data="ruleList" border size="small" style="margin-top: 8px;">
|
||||
<el-table-column prop="id" label="ID" width="72" />
|
||||
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="rule_code" label="规则编码" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="优先级" width="100">
|
||||
<template slot-scope="scope">{{ formatPriority(scope.row.priority) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="88">
|
||||
<template slot-scope="scope">{{ formatConfigStatus(scope.row.status) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标签" min-width="120" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ formatTagsCol(scope.row.tags) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updated_time" label="更新时间" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="140" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="openRuleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" style="color: #F56C6C;" @click="removeRule(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pager-wrap">
|
||||
<el-pagination
|
||||
:current-page="rulePageNo"
|
||||
:page-size="rulePageSize"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:total="ruleTotal"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="onRuleSize"
|
||||
@current-change="onRulePage" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</page-section>
|
||||
|
||||
<el-dialog :title="skillDialogMode === 'create' ? '新建 Skill' : '编辑 Skill'" :visible.sync="skillDialogVisible" width="720px" @close="resetSkillForm">
|
||||
<el-form ref="skillFormRef" :model="skillForm" :rules="skillFormActiveRules" label-width="120px" size="small">
|
||||
<el-form-item label="模块" prop="moduleId">
|
||||
<el-select v-model="skillForm.moduleId" clearable filterable placeholder="可选" style="width: 100%;" :disabled="!projectId">
|
||||
<el-option v-for="m in flatModuleOptions" :key="'sf-' + m.id" :label="m.name" :value="m.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="skillForm.name" />
|
||||
</el-form-item>
|
||||
<template v-if="skillDialogMode === 'edit'">
|
||||
<el-form-item label="编码">
|
||||
<el-input v-model="skillForm.code" disabled placeholder="创建后不可修改" />
|
||||
</el-form-item>
|
||||
<el-form-item label="触发条件" prop="triggerCondition">
|
||||
<el-input v-model="skillForm.triggerCondition" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="推理路径">
|
||||
<el-input v-model="skillForm.reasoningPath" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="输出规范">
|
||||
<el-input v-model="skillForm.outputSpec" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="skillForm.description" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="skillForm.skillType" style="width: 100%;">
|
||||
<el-option v-for="o in skillTypeOptions" :key="'sfo-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="风险等级">
|
||||
<el-select v-model="skillForm.riskLevel" style="width: 100%;">
|
||||
<el-option v-for="o in riskLevelOptions" :key="'sfr-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="skillForm.status" style="width: 100%;">
|
||||
<el-option v-for="o in statusOptions" :key="'sfs-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签">
|
||||
<el-select v-model="skillForm.tags" multiple filterable allow-create default-first-option placeholder="输入后回车可新增" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button size="small" @click="skillDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" size="small" :loading="skillSubmitting" @click="submitSkill">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="ruleDialogMode === 'create' ? '新建业务规则' : '编辑业务规则'" :visible.sync="ruleDialogVisible" width="720px" @close="resetRuleForm">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="ruleRules" label-width="120px" size="small">
|
||||
<el-form-item label="模块" prop="moduleId">
|
||||
<el-select v-model="ruleForm.moduleId" clearable filterable placeholder="可选" style="width: 100%;" :disabled="!projectId">
|
||||
<el-option v-for="m in flatModuleOptions" :key="'rf-' + m.id" :label="m.name" :value="m.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="ruleDialogMode === 'edit'" label="规则编码">
|
||||
<el-input v-model="ruleForm.ruleCode" disabled placeholder="由系统分配" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规则内容" prop="ruleContent">
|
||||
<el-input v-model="ruleForm.ruleContent" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="适用场景">
|
||||
<el-input v-model="ruleForm.applicableScene" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="示例">
|
||||
<el-input v-model="ruleForm.example" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级">
|
||||
<el-select v-model="ruleForm.priority" style="width: 100%;">
|
||||
<el-option v-for="o in priorityOptions" :key="'rfo-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="ruleForm.status" style="width: 100%;">
|
||||
<el-option v-for="o in statusOptions" :key="'rfs-' + o.value" :label="o.label" :value="o.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签">
|
||||
<el-select v-model="ruleForm.tags" multiple filterable allow-create default-first-option placeholder="输入后回车可新增" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button size="small" @click="ruleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" size="small" :loading="ruleSubmitting" @click="submitRule">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageSection from '@/components/TestPlatform/common/PageSection'
|
||||
import { getModuleTree } from '@/api/caseApi'
|
||||
import {
|
||||
createSkill,
|
||||
createBusinessRule,
|
||||
deleteSkill,
|
||||
deleteBusinessRule,
|
||||
getSkillDetail,
|
||||
getSkillList,
|
||||
getBusinessRuleDetail,
|
||||
getBusinessRuleList,
|
||||
updateSkill,
|
||||
updateBusinessRule
|
||||
} from '@/api/skillRuleApi'
|
||||
import { getProductList } from '@/api/productApi'
|
||||
import { getProjectList } from '@/api/projectApi'
|
||||
import {
|
||||
readLastProductProjectCache,
|
||||
saveLastProductProjectCache,
|
||||
pickIdFromOptions
|
||||
} from '@/utils/lastProductProjectCache'
|
||||
|
||||
export default {
|
||||
name: 'BusinessSkillRuleConfig',
|
||||
components: { PageSection },
|
||||
data() {
|
||||
const routeTab = this.$route.query && this.$route.query.tab
|
||||
const initialTab =
|
||||
routeTab === 'rules' || routeTab === 'business-rules' ? 'rules' : 'skills'
|
||||
return {
|
||||
configActiveTab: initialTab,
|
||||
selectedProductId: '',
|
||||
selectedProjectId: '',
|
||||
productOptions: [],
|
||||
projectOptions: [],
|
||||
moduleTree: [],
|
||||
skillQuery: { moduleId: '', keyword: '', status: '', skillType: '', riskLevel: '' },
|
||||
skillPageNo: 1,
|
||||
skillPageSize: 20,
|
||||
skillList: [],
|
||||
skillTotal: 0,
|
||||
skillLoading: false,
|
||||
skillDialogVisible: false,
|
||||
skillDialogMode: 'create',
|
||||
skillSubmitting: false,
|
||||
skillForm: {},
|
||||
ruleQuery: { moduleId: '', keyword: '', status: '', priority: '' },
|
||||
rulePageNo: 1,
|
||||
rulePageSize: 20,
|
||||
ruleList: [],
|
||||
ruleTotal: 0,
|
||||
ruleLoading: false,
|
||||
ruleDialogVisible: false,
|
||||
ruleDialogMode: 'create',
|
||||
ruleSubmitting: false,
|
||||
ruleForm: {},
|
||||
ruleRules: {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
ruleContent: [{ required: true, message: '请输入规则内容', trigger: 'blur' }]
|
||||
},
|
||||
statusOptions: [
|
||||
{ value: 1, label: '启用' },
|
||||
{ value: 2, label: '停用' },
|
||||
{ value: 3, label: '草稿' }
|
||||
],
|
||||
skillTypeOptions: [
|
||||
{ value: 1, label: '通用测试策略' },
|
||||
{ value: 2, label: '历史缺陷模式' },
|
||||
{ value: 3, label: '边界场景' },
|
||||
{ value: 4, label: '接口测试' },
|
||||
{ value: 5, label: 'UI 测试' },
|
||||
{ value: 6, label: '性能测试' },
|
||||
{ value: 7, label: '安全测试' },
|
||||
{ value: 8, label: '数据一致性' },
|
||||
{ value: 9, label: '并发/幂等' },
|
||||
{ value: 99, label: '其他' }
|
||||
],
|
||||
riskLevelOptions: [
|
||||
{ value: 0, label: '高风险' },
|
||||
{ value: 1, label: '中高风险' },
|
||||
{ value: 2, label: '中风险' },
|
||||
{ value: 3, label: '低风险' }
|
||||
],
|
||||
priorityOptions: [
|
||||
{ value: 0, label: '高优先级' },
|
||||
{ value: 1, label: '中高优先级' },
|
||||
{ value: 2, label: '中优先级' },
|
||||
{ value: 3, label: '低优先级' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
projectId() {
|
||||
return this.selectedProjectId || ''
|
||||
},
|
||||
flatModuleOptions() {
|
||||
const out = []
|
||||
const walk = (list, prefix) => {
|
||||
;(list || []).forEach(item => {
|
||||
const name = prefix ? `${prefix} / ${item.name}` : item.name
|
||||
out.push({ id: item.id, name })
|
||||
const ch = item.children || item.child_list || item.childList || []
|
||||
if (Array.isArray(ch) && ch.length) walk(ch, name)
|
||||
})
|
||||
}
|
||||
walk(this.moduleTree, '')
|
||||
return out
|
||||
},
|
||||
skillFormActiveRules() {
|
||||
if (this.skillDialogMode === 'create') {
|
||||
return {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
return {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
triggerCondition: [{ required: true, message: '请输入触发条件', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query.tab'(val) {
|
||||
const next = val === 'rules' || val === 'business-rules' ? 'rules' : 'skills'
|
||||
if (this.configActiveTab !== next) {
|
||||
this.configActiveTab = next
|
||||
}
|
||||
if (!this.projectId) return
|
||||
if (next === 'rules') this.fetchRuleList()
|
||||
else this.fetchSkillList()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetSkillFormModel()
|
||||
this.resetRuleFormModel()
|
||||
this.bootstrap()
|
||||
},
|
||||
methods: {
|
||||
cleanParams(obj) {
|
||||
const r = {}
|
||||
Object.keys(obj || {}).forEach(k => {
|
||||
const v = obj[k]
|
||||
if (v !== '' && v !== undefined && v !== null) r[k] = v
|
||||
})
|
||||
return r
|
||||
},
|
||||
/** 新建 Skill 时后端要求 code 唯一，由前端自动生成 */
|
||||
generateAutoSkillCode() {
|
||||
const t = Date.now()
|
||||
const r = Math.random().toString(36).slice(2, 10).toUpperCase()
|
||||
return `SKILL_AUTO_${t}_${r}`
|
||||
},
|
||||
onConfigTabClick(tab) {
|
||||
const name = tab && tab.name
|
||||
const q = Object.assign({}, this.$route.query || {})
|
||||
if (name === 'rules') {
|
||||
q.tab = 'rules'
|
||||
} else {
|
||||
delete q.tab
|
||||
}
|
||||
const prev = JSON.stringify(this.$route.query || {})
|
||||
const next = JSON.stringify(q)
|
||||
if (prev !== next) {
|
||||
this.$router.replace({ path: this.$route.path, query: q }).catch(() => {})
|
||||
}
|
||||
},
|
||||
formatTagsCol(tags) {
|
||||
if (Array.isArray(tags)) return tags.join('、')
|
||||
return tags || '—'
|
||||
},
|
||||
formatSkillType(v) {
|
||||
const o = this.skillTypeOptions.find(x => x.value === v)
|
||||
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||
},
|
||||
formatRiskLevel(v) {
|
||||
const o = this.riskLevelOptions.find(x => x.value === v)
|
||||
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||
},
|
||||
formatPriority(v) {
|
||||
const o = this.priorityOptions.find(x => x.value === v)
|
||||
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||
},
|
||||
formatConfigStatus(v) {
|
||||
const o = this.statusOptions.find(x => x.value === v)
|
||||
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||
},
|
||||
resetSkillFormModel() {
|
||||
this.skillForm = {
|
||||
skillId: null,
|
||||
moduleId: '',
|
||||
name: '',
|
||||
code: '',
|
||||
description: '',
|
||||
triggerCondition: '',
|
||||
reasoningPath: '',
|
||||
outputSpec: '',
|
||||
skillType: 1,
|
||||
riskLevel: 2,
|
||||
tags: [],
|
||||
status: 1
|
||||
}
|
||||
},
|
||||
resetRuleFormModel() {
|
||||
this.ruleForm = {
|
||||
ruleId: null,
|
||||
moduleId: '',
|
||||
name: '',
|
||||
ruleCode: '',
|
||||
ruleContent: '',
|
||||
applicableScene: '',
|
||||
example: '',
|
||||
priority: 2,
|
||||
tags: [],
|
||||
status: 1
|
||||
}
|
||||
},
|
||||
bootstrap() {
|
||||
this.loadProductOptions().then(() => {
|
||||
const routePid = this.$route.query.productId ? Number(this.$route.query.productId) : ''
|
||||
const routeProj = this.$route.query.projectId ? Number(this.$route.query.projectId) : ''
|
||||
if (routePid) {
|
||||
this.selectedProductId = routePid
|
||||
return this.loadProjectOptions(routePid).then(() => {
|
||||
if (routeProj) this.selectedProjectId = pickIdFromOptions(this.projectOptions, routeProj)
|
||||
})
|
||||
}
|
||||
const cached = readLastProductProjectCache()
|
||||
if (cached && cached.productId != null && cached.projectId != null) {
|
||||
this.selectedProductId = pickIdFromOptions(this.productOptions, cached.productId)
|
||||
return this.loadProjectOptions(this.selectedProductId).then(() => {
|
||||
this.selectedProjectId = pickIdFromOptions(this.projectOptions, cached.projectId)
|
||||
})
|
||||
}
|
||||
return Promise.resolve()
|
||||
}).then(() => {
|
||||
if (this.projectId) {
|
||||
this.loadModuleTree()
|
||||
if (this.configActiveTab === 'rules') this.fetchRuleList()
|
||||
else this.fetchSkillList()
|
||||
}
|
||||
})
|
||||
},
|
||||
loadProductOptions() {
|
||||
if (this.productOptions.length) return Promise.resolve()
|
||||
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
this.productOptions = data.items || data.list || data.data || []
|
||||
}).catch(() => { this.productOptions = [] })
|
||||
},
|
||||
loadProjectOptions(productId) {
|
||||
if (!productId) {
|
||||
this.projectOptions = []
|
||||
return Promise.resolve()
|
||||
}
|
||||
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
this.projectOptions = data.items || data.list || data.data || []
|
||||
}).catch(() => { this.projectOptions = [] })
|
||||
},
|
||||
loadModuleTree() {
|
||||
if (!this.projectId) {
|
||||
this.moduleTree = []
|
||||
return
|
||||
}
|
||||
getModuleTree({ projectId: this.projectId }).then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.list || data.items || []
|
||||
this.moduleTree = Array.isArray(list) ? list : []
|
||||
}).catch(() => { this.moduleTree = [] })
|
||||
},
|
||||
handleProductChange() {
|
||||
this.selectedProjectId = ''
|
||||
this.projectOptions = []
|
||||
this.moduleTree = []
|
||||
this.skillList = []
|
||||
this.ruleList = []
|
||||
this.skillTotal = 0
|
||||
this.ruleTotal = 0
|
||||
this.loadProjectOptions(this.selectedProductId)
|
||||
},
|
||||
handleProjectChange() {
|
||||
if (this.selectedProductId && this.selectedProjectId) {
|
||||
saveLastProductProjectCache(this.selectedProductId, this.selectedProjectId)
|
||||
}
|
||||
this.skillPageNo = 1
|
||||
this.rulePageNo = 1
|
||||
this.loadModuleTree()
|
||||
if (this.projectId) {
|
||||
if (this.configActiveTab === 'rules') this.fetchRuleList()
|
||||
else this.fetchSkillList()
|
||||
} else {
|
||||
this.skillList = []
|
||||
this.ruleList = []
|
||||
this.skillTotal = 0
|
||||
this.ruleTotal = 0
|
||||
}
|
||||
},
|
||||
resetSkillQuery() {
|
||||
this.skillQuery = { moduleId: '', keyword: '', status: '', skillType: '', riskLevel: '' }
|
||||
this.skillPageNo = 1
|
||||
this.fetchSkillList()
|
||||
},
|
||||
resetRuleQuery() {
|
||||
this.ruleQuery = { moduleId: '', keyword: '', status: '', priority: '' }
|
||||
this.rulePageNo = 1
|
||||
this.fetchRuleList()
|
||||
},
|
||||
fetchSkillList() {
|
||||
if (!this.projectId) return
|
||||
this.skillLoading = true
|
||||
const params = this.cleanParams(Object.assign({}, this.skillQuery, {
|
||||
pageNo: this.skillPageNo,
|
||||
pageSize: this.skillPageSize,
|
||||
projectId: this.projectId
|
||||
}))
|
||||
getSkillList(params).then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.list || data.items || []
|
||||
this.skillList = Array.isArray(list) ? list : []
|
||||
this.skillTotal = Number(data.total || 0)
|
||||
}).catch(() => {
|
||||
this.skillList = []
|
||||
this.skillTotal = 0
|
||||
}).finally(() => { this.skillLoading = false })
|
||||
},
|
||||
fetchRuleList() {
|
||||
if (!this.projectId) return
|
||||
this.ruleLoading = true
|
||||
const params = this.cleanParams(Object.assign({}, this.ruleQuery, {
|
||||
pageNo: this.rulePageNo,
|
||||
pageSize: this.rulePageSize,
|
||||
projectId: this.projectId
|
||||
}))
|
||||
getBusinessRuleList(params).then(res => {
|
||||
const data = (res && res.data) || res || {}
|
||||
const list = data.list || data.items || []
|
||||
this.ruleList = Array.isArray(list) ? list : []
|
||||
this.ruleTotal = Number(data.total || 0)
|
||||
}).catch(() => {
|
||||
this.ruleList = []
|
||||
this.ruleTotal = 0
|
||||
}).finally(() => { this.ruleLoading = false })
|
||||
},
|
||||
onSkillSize(s) {
|
||||
this.skillPageSize = s
|
||||
this.skillPageNo = 1
|
||||
this.fetchSkillList()
|
||||
},
|
||||
onSkillPage(p) {
|
||||
this.skillPageNo = p
|
||||
this.fetchSkillList()
|
||||
},
|
||||
onRuleSize(s) {
|
||||
this.rulePageSize = s
|
||||
this.rulePageNo = 1
|
||||
this.fetchRuleList()
|
||||
},
|
||||
onRulePage(p) {
|
||||
this.rulePageNo = p
|
||||
this.fetchRuleList()
|
||||
},
|
||||
openSkillCreate() {
|
||||
if (!this.projectId) {
|
||||
this.$message.warning('请先选择项目')
|
||||
return
|
||||
}
|
||||
this.skillDialogMode = 'create'
|
||||
this.resetSkillFormModel()
|
||||
this.skillDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.skillFormRef && this.$refs.skillFormRef.clearValidate())
|
||||
},
|
||||
openSkillEdit(row) {
|
||||
if (!row || !row.id) return
|
||||
getSkillDetail(row.id).then(res => {
|
||||
const d = (res && res.data) || res || {}
|
||||
this.skillDialogMode = 'edit'
|
||||
this.skillForm = {
|
||||
skillId: d.id,
|
||||
moduleId: d.module_id != null && d.module_id !== '' ? d.module_id : '',
|
||||
name: d.name || '',
|
||||
code: d.code || '',
|
||||
description: d.description || '',
|
||||
triggerCondition: d.trigger_condition || '',
|
||||
reasoningPath: d.reasoning_path || '',
|
||||
outputSpec: d.output_spec || '',
|
||||
skillType: d.skill_type !== undefined ? d.skill_type : 1,
|
||||
riskLevel: d.risk_level !== undefined ? d.risk_level : 2,
|
||||
tags: Array.isArray(d.tags) ? d.tags.slice() : [],
|
||||
status: d.status !== undefined ? d.status : 1
|
||||
}
|
||||
this.skillDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.skillFormRef && this.$refs.skillFormRef.clearValidate())
|
||||
})
|
||||
},
|
||||
resetSkillForm() {
|
||||
this.resetSkillFormModel()
|
||||
},
|
||||
submitSkill() {
|
||||
const form = this.$refs.skillFormRef
|
||||
if (!form) return
|
||||
form.validate(valid => {
|
||||
if (!valid) return
|
||||
const tags = Array.isArray(this.skillForm.tags) ? this.skillForm.tags.filter(Boolean) : []
|
||||
this.skillSubmitting = true
|
||||
const done = () => { this.skillSubmitting = false }
|
||||
if (this.skillDialogMode === 'create') {
|
||||
createSkill(this.cleanParams({
|
||||
projectId: this.projectId,
|
||||
moduleId: this.skillForm.moduleId || undefined,
|
||||
name: this.skillForm.name,
|
||||
code: this.generateAutoSkillCode(),
|
||||
description: this.skillForm.description || undefined,
|
||||
triggerCondition: '由系统自动创建，可在编辑中完善。',
|
||||
skillType: this.skillForm.skillType,
|
||||
riskLevel: this.skillForm.riskLevel,
|
||||
tags,
|
||||
status: this.skillForm.status
|
||||
})).then(() => {
|
||||
this.$message.success('创建成功')
|
||||
this.skillDialogVisible = false
|
||||
this.fetchSkillList()
|
||||
}).finally(done)
|
||||
} else {
|
||||
updateSkill(this.cleanParams({
|
||||
skillId: this.skillForm.skillId,
|
||||
name: this.skillForm.name,
|
||||
description: this.skillForm.description || undefined,
|
||||
triggerCondition: this.skillForm.triggerCondition,
|
||||
reasoningPath: this.skillForm.reasoningPath || undefined,
|
||||
outputSpec: this.skillForm.outputSpec || undefined,
|
||||
skillType: this.skillForm.skillType,
|
||||
riskLevel: this.skillForm.riskLevel,
|
||||
tags,
|
||||
status: this.skillForm.status
|
||||
})).then(() => {
|
||||
this.$message.success('保存成功')
|
||||
this.skillDialogVisible = false
|
||||
this.fetchSkillList()
|
||||
}).finally(done)
|
||||
}
|
||||
})
|
||||
},
|
||||
removeSkill(row) {
|
||||
this.$confirm('确认删除该 Skill？', '提示', { type: 'warning' }).then(() => {
|
||||
deleteSkill(row.id).then(() => {
|
||||
this.$message.success('已删除')
|
||||
this.fetchSkillList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
openRuleCreate() {
|
||||
if (!this.projectId) {
|
||||
this.$message.warning('请先选择项目')
|
||||
return
|
||||
}
|
||||
this.ruleDialogMode = 'create'
|
||||
this.resetRuleFormModel()
|
||||
this.ruleDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.ruleFormRef && this.$refs.ruleFormRef.clearValidate())
|
||||
},
|
||||
openRuleEdit(row) {
|
||||
if (!row || !row.id) return
|
||||
getBusinessRuleDetail(row.id).then(res => {
|
||||
const d = (res && res.data) || res || {}
|
||||
this.ruleDialogMode = 'edit'
|
||||
this.ruleForm = {
|
||||
ruleId: d.id,
|
||||
moduleId: d.module_id != null && d.module_id !== '' ? d.module_id : '',
|
||||
name: d.name || '',
|
||||
ruleCode: d.rule_code || '',
|
||||
ruleContent: d.rule_content || '',
|
||||
applicableScene: d.applicable_scene || '',
|
||||
example: d.example || '',
|
||||
priority: d.priority !== undefined ? d.priority : 2,
|
||||
tags: Array.isArray(d.tags) ? d.tags.slice() : [],
|
||||
status: d.status !== undefined ? d.status : 1
|
||||
}
|
||||
this.ruleDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.ruleFormRef && this.$refs.ruleFormRef.clearValidate())
|
||||
})
|
||||
},
|
||||
resetRuleForm() {
|
||||
this.resetRuleFormModel()
|
||||
},
|
||||
submitRule() {
|
||||
const form = this.$refs.ruleFormRef
|
||||
if (!form) return
|
||||
form.validate(valid => {
|
||||
if (!valid) return
|
||||
const tags = Array.isArray(this.ruleForm.tags) ? this.ruleForm.tags.filter(Boolean) : []
|
||||
this.ruleSubmitting = true
|
||||
const done = () => { this.ruleSubmitting = false }
|
||||
if (this.ruleDialogMode === 'create') {
|
||||
createBusinessRule(this.cleanParams({
|
||||
projectId: this.projectId,
|
||||
moduleId: this.ruleForm.moduleId || undefined,
|
||||
name: this.ruleForm.name,
|
||||
ruleContent: this.ruleForm.ruleContent,
|
||||
applicableScene: this.ruleForm.applicableScene || undefined,
|
||||
example: this.ruleForm.example || undefined,
|
||||
priority: this.ruleForm.priority,
|
||||
tags,
|
||||
status: this.ruleForm.status
|
||||
})).then(() => {
|
||||
this.$message.success('创建成功')
|
||||
this.ruleDialogVisible = false
|
||||
this.fetchRuleList()
|
||||
}).finally(done)
|
||||
} else {
|
||||
updateBusinessRule(this.cleanParams({
|
||||
ruleId: this.ruleForm.ruleId,
|
||||
name: this.ruleForm.name,
|
||||
ruleContent: this.ruleForm.ruleContent,
|
||||
applicableScene: this.ruleForm.applicableScene || undefined,
|
||||
example: this.ruleForm.example || undefined,
|
||||
priority: this.ruleForm.priority,
|
||||
tags,
|
||||
status: this.ruleForm.status
|
||||
})).then(() => {
|
||||
this.$message.success('保存成功')
|
||||
this.ruleDialogVisible = false
|
||||
this.fetchRuleList()
|
||||
}).finally(done)
|
||||
}
|
||||
})
|
||||
},
|
||||
removeRule(row) {
|
||||
this.$confirm('确认删除该业务规则？', '提示', { type: 'warning' }).then(() => {
|
||||
deleteBusinessRule(row.id).then(() => {
|
||||
this.$message.success('已删除')
|
||||
this.fetchRuleList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-wrap {
|
||||
padding: 20px;
|
||||
}
|
||||
.filter-bar {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.toolbar-form {
|
||||
margin-top: 0;
|
||||
}
|
||||
.pager-wrap {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.skill-rule-tabs /deep/ .el-tabs__header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,24 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div id="backgroud" :class="themeClass">
|
||||
<button class="login-theme-switch" type="button" @click="toggleTheme">
|
||||
<i :class="themeIcon"></i>
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
<div class="login-hero">
|
||||
<div class="login-brand-mark">效</div>
|
||||
<h1>效能平台</h1>
|
||||
<p>统一管理测试协作、缺陷跟踪、用例周期与数据工具。</p>
|
||||
</div>
|
||||
<div class="content_right">
|
||||
<div class="login-body-title">
|
||||
<h2>登录</h2>
|
||||
<h2>欢迎登录</h2>
|
||||
<p>Quality Workspace</p>
|
||||
</div>
|
||||
<div class="messge">
|
||||
<span>{{ msg }}</span>
|
||||
</div>
|
||||
<div class="cr_top">
|
||||
<div class="ct_input" style="height: 60px;width: 254px">
|
||||
<div class="ct_input">
|
||||
<span class="ct-img-yhm"> </span>
|
||||
<input
|
||||
id="username"
|
||||
@@ -23,7 +33,7 @@
|
||||
placeholder="用户名"
|
||||
@keyup.enter="handleLogin">
|
||||
</div>
|
||||
<div class="ct_input" style="height:60px;width: 254px">
|
||||
<div class="ct_input">
|
||||
<span class="ct_img_mm"> </span>
|
||||
<input
|
||||
id="password"
|
||||
@@ -57,10 +67,34 @@ export default {
|
||||
return {
|
||||
msg: '',
|
||||
username: '',
|
||||
password: ''
|
||||
password: '',
|
||||
uiTheme: localStorage.getItem('uiTheme') || 'dark'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass() {
|
||||
return this.uiTheme === 'light' ? 'theme-login-light' : 'theme-login-dark'
|
||||
},
|
||||
themeLabel() {
|
||||
return this.uiTheme === 'light' ? '深色' : '浅色'
|
||||
},
|
||||
themeIcon() {
|
||||
return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
toggleTheme() {
|
||||
this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
|
||||
localStorage.setItem('uiTheme', this.uiTheme)
|
||||
this.applyTheme()
|
||||
},
|
||||
handleLogin() {
|
||||
if (!this.username || !this.password) {
|
||||
this.msg = 'username、password 为必传参数'
|
||||
@@ -92,6 +126,12 @@ export default {
|
||||
} else {
|
||||
localStorage.removeItem('accessToken')
|
||||
}
|
||||
const rt = data.refresh_token || data.refreshToken
|
||||
if (rt) {
|
||||
localStorage.setItem('refreshToken', rt)
|
||||
} else {
|
||||
localStorage.removeItem('refreshToken')
|
||||
}
|
||||
this.$store.commit('SetCurrentUser', user)
|
||||
this.$store.commit('SetRole', user.roleIds)
|
||||
this.$store.commit('SetUserMenus', [])
|
||||
@@ -120,67 +160,147 @@ export default {
|
||||
<style scoped>
|
||||
@import "../../assets/css/Form.css";
|
||||
|
||||
.content_right {
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
border-color: rgba(250, 255, 251, .8);
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
outline: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
#backgroud {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 80px;
|
||||
background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-hero {
|
||||
width: 420px;
|
||||
color: #f8fbff;
|
||||
}
|
||||
|
||||
.login-brand-mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
|
||||
}
|
||||
|
||||
.login-hero h1 {
|
||||
margin: 24px 0 14px;
|
||||
font-size: 42px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
|
||||
}
|
||||
|
||||
.login-hero p {
|
||||
margin: 0;
|
||||
color: #9fb8d4;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.login-theme-switch {
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.login-theme-switch:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.content_right {
|
||||
padding: 34px 36px 30px;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
color: #dbeafe;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
position: static;
|
||||
width: 330px;
|
||||
min-height: 340px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.login-body-title h2 {
|
||||
font-size: 26px;
|
||||
color: #e0f2fe;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-body-title p {
|
||||
color: #67e8f9;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.cr_top .ct_input {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: #67e8f9;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn:hover {
|
||||
color: #bae6fd;
|
||||
}
|
||||
|
||||
.messge {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
margin-top: 14px;
|
||||
height: 22px;
|
||||
text-align: left;
|
||||
padding-left: 24px;
|
||||
color: #D60909;
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.content_right .cr_top {
|
||||
position: relative;
|
||||
margin: 0 23px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content_right .input_text {
|
||||
margin-bottom: 18px;
|
||||
background: #fff;
|
||||
background: rgba(8, 18, 36, 0.86);
|
||||
}
|
||||
|
||||
.account-oprate {
|
||||
width: 252px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ct_img_mm,
|
||||
.ct-img-yhm {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 8px;
|
||||
top: 16px;
|
||||
left: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png");
|
||||
opacity: 0.82;
|
||||
filter: invert(78%) sepia(37%) saturate(773%) hue-rotate(153deg) brightness(103%) contrast(93%);
|
||||
}
|
||||
|
||||
.ct-img-yhm {
|
||||
@@ -189,39 +309,52 @@ export default {
|
||||
|
||||
.input_text {
|
||||
display: inline-block;
|
||||
width: 224px;
|
||||
height: 24px;
|
||||
padding: 8px 0 8px 28px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 14px 0 42px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
color: #e0f2fe;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
border-radius: 14px;
|
||||
vertical-align: middle;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.input_text:hover {
|
||||
border-color: rgba(82, 168, 236, .8);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6);
|
||||
.input_text::placeholder {
|
||||
color: #6f8baa;
|
||||
}
|
||||
|
||||
.input_text:hover,
|
||||
.input_text:focus {
|
||||
border-color: rgba(103, 232, 249, 0.72);
|
||||
background: rgba(8, 18, 36, 0.96);
|
||||
box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 0 20px rgba(56, 189, 248, 0.14);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn_login:hover {
|
||||
background-color: #3e82dc;
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
|
||||
}
|
||||
|
||||
.btn_login {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
width: 254px;
|
||||
height: 37px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
border: 1px solid #4591f5;
|
||||
background-color: #4591f5;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 14px;
|
||||
color: #06111f;
|
||||
border: 1px solid rgba(103, 232, 249, 0.68);
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
margin-bottom: 16px;
|
||||
-webkit-appearance: none;
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -267,4 +400,95 @@ ul {
|
||||
padding: 0;
|
||||
font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.theme-login-light#backgroud {
|
||||
background: radial-gradient(circle at 15% 18%, rgba(59, 130, 246, 0.14), transparent 26%), radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #eaf2ff 100%);
|
||||
}
|
||||
|
||||
.theme-login-light .login-theme-switch {
|
||||
color: #1d4ed8;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.theme-login-light .login-theme-switch:hover {
|
||||
background: #eaf2ff;
|
||||
box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-login-light .login-brand-mark {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24);
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero h1 {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero p {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.theme-login-light .content_right {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #334155;
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 24px 70px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.theme-login-light .login-body-title h2 {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-login-light .login-body-title p,
|
||||
.theme-login-light .account-oprate .regist-btn {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-login-light .account-oprate .regist-btn:hover {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.theme-login-light .content_right .input_text {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text {
|
||||
color: #0f172a;
|
||||
border-color: #d8e1ef;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text:hover,
|
||||
.theme-login-light .input_text:focus {
|
||||
border-color: #60a5fa;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.theme-login-light .ct_img_mm,
|
||||
.theme-login-light .ct-img-yhm {
|
||||
opacity: 0.72;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.theme-login-light .btn_login {
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
}
|
||||
|
||||
.theme-login-light .btn_login:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
|
||||
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,27 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div class="register-head" style="padding-top: 20px"></div>
|
||||
<div id="backgroud" :class="themeClass">
|
||||
<button class="register-theme-switch" type="button" @click="toggleTheme">
|
||||
<i :class="themeIcon"></i>
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
<div class="register-hero">
|
||||
<div class="register-brand-mark">效</div>
|
||||
<h1>效能平台</h1>
|
||||
<p>创建账号后即可进入统一测试协作、用例管理与质量工作台。</p>
|
||||
<div class="register-feature-list">
|
||||
<span>测试协作</span>
|
||||
<span>用例管理</span>
|
||||
<span>质量工作台</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="location-title"><h1>注册</h1></div>
|
||||
<div class="location-title">
|
||||
<span class="register-card-kicker">Create Account</span>
|
||||
<h1>创建账号</h1>
|
||||
<p>注册后开启你的质量效能工作区</p>
|
||||
</div>
|
||||
|
||||
<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
|
||||
<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-position="top" class="demo-ruleForm">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
@@ -77,10 +94,34 @@ export default {
|
||||
username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
|
||||
password: [{ required: true, validator: validatePass, trigger: 'blur' }],
|
||||
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
|
||||
}
|
||||
},
|
||||
uiTheme: localStorage.getItem('uiTheme') || 'dark'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass() {
|
||||
return this.uiTheme === 'light' ? 'theme-register-light' : 'theme-register-dark'
|
||||
},
|
||||
themeLabel() {
|
||||
return this.uiTheme === 'light' ? '深色' : '浅色'
|
||||
},
|
||||
themeIcon() {
|
||||
return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
toggleTheme() {
|
||||
this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
|
||||
localStorage.setItem('uiTheme', this.uiTheme)
|
||||
this.applyTheme()
|
||||
},
|
||||
open(message) {
|
||||
this.$alert(message, '提示', {
|
||||
confirmButtonText: '确定'
|
||||
@@ -116,35 +157,349 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "../../assets/css/Form.css";
|
||||
<style scoped>
|
||||
#backgroud {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 72px;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
padding: 72px 48px;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#backgroud.theme-register-dark {
|
||||
background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
|
||||
}
|
||||
|
||||
#backgroud.theme-register-light {
|
||||
background: radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.14), transparent 28%), radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.16), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef6ff 48%, #eaf2ff 100%);
|
||||
}
|
||||
|
||||
.register-hero {
|
||||
flex: 0 0 420px;
|
||||
max-width: 420px;
|
||||
color: #f8fbff;
|
||||
}
|
||||
|
||||
.register-brand-mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
|
||||
}
|
||||
|
||||
.register-hero h1 {
|
||||
margin: 24px 0 14px;
|
||||
font-size: 42px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
|
||||
}
|
||||
|
||||
.register-hero p {
|
||||
margin: 0;
|
||||
color: #9fb8d4;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.register-feature-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.register-feature-list span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
color: #bae6fd;
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.register-theme-switch {
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.register-theme-switch:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.model {
|
||||
position: relative;
|
||||
flex: 0 0 420px;
|
||||
width: 420px;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 34px 36px 30px;
|
||||
border-radius: 24px;
|
||||
text-align: left;
|
||||
background: rgba(15, 23, 42, 0.82);
|
||||
color: #dbeafe;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.location-title {
|
||||
text-align: center;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.register-card-kicker {
|
||||
display: inline-flex;
|
||||
margin-bottom: 10px;
|
||||
color: #67e8f9;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.location-title h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 28px;
|
||||
color: #e0f2fe;
|
||||
}
|
||||
|
||||
.location-title p {
|
||||
margin: 0;
|
||||
color: #9fb8d4;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.register-head {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
float: left;
|
||||
width: 80%;
|
||||
.demo-ruleForm {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.register-actions .el-form-item__content {
|
||||
.demo-ruleForm >>> .el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.model >>> .el-form-item__label {
|
||||
padding: 0 0 7px;
|
||||
color: #cbd5e1;
|
||||
line-height: 1.2;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.model >>> .el-input__inner {
|
||||
height: 44px;
|
||||
background: rgba(8, 18, 36, 0.86);
|
||||
border-color: rgba(56, 189, 248, 0.22);
|
||||
color: #f8fafc;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.model >>> .el-input__inner:hover,
|
||||
.model >>> .el-input__inner:focus {
|
||||
border-color: #38bdf8;
|
||||
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
|
||||
}
|
||||
|
||||
.register-actions {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.register-actions >>> .el-form-item__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.login-link-wrap {
|
||||
.enter-btn {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
height: 46px;
|
||||
border: 1px solid rgba(103, 232, 249, 0.68);
|
||||
border-radius: 14px;
|
||||
color: #06111f;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 16px 34px rgba(59, 130, 246, 0.25);
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.enter-btn:hover {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
|
||||
}
|
||||
|
||||
.login-link-btn {
|
||||
align-self: flex-end;
|
||||
padding-right: 0;
|
||||
margin-top: 10px;
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
.theme-register-light .register-hero {
|
||||
color: #10233f;
|
||||
}
|
||||
|
||||
.theme-register-light .register-brand-mark {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
|
||||
box-shadow: 0 20px 48px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.theme-register-light .register-hero h1 {
|
||||
color: #0f172a;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.theme-register-light .register-hero p {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.theme-register-light .register-feature-list span {
|
||||
color: #1d4ed8;
|
||||
background: rgba(37, 99, 235, 0.08);
|
||||
border-color: rgba(37, 99, 235, 0.16);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.theme-register-light .register-theme-switch {
|
||||
color: #1d4ed8;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border-color: rgba(37, 99, 235, 0.18);
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.theme-register-light .register-theme-switch:hover {
|
||||
background: #eff6ff;
|
||||
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.14);
|
||||
}
|
||||
|
||||
.theme-register-light .model {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: #1e293b;
|
||||
border-color: rgba(37, 99, 235, 0.14);
|
||||
box-shadow: 0 28px 70px rgba(37, 99, 235, 0.14);
|
||||
}
|
||||
|
||||
.theme-register-light .register-card-kicker {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-register-light .location-title h1 {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-register-light .location-title p {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.theme-register-light .model >>> .el-form-item__label {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.theme-register-light .model >>> .el-input__inner {
|
||||
background: #ffffff;
|
||||
border-color: #dbe7f6;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-register-light .model >>> .el-input__inner:hover,
|
||||
.theme-register-light .model >>> .el-input__inner:focus {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.theme-register-light .enter-btn {
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
}
|
||||
|
||||
.theme-register-light .enter-btn:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
|
||||
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
|
||||
.theme-register-light .login-link-btn {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
#backgroud {
|
||||
gap: 40px;
|
||||
padding: 72px 28px 36px;
|
||||
}
|
||||
|
||||
.register-hero {
|
||||
flex-basis: 360px;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
#backgroud {
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
padding: 80px 18px 28px;
|
||||
}
|
||||
|
||||
.register-hero,
|
||||
.model {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
.register-hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-brand-mark,
|
||||
.register-feature-list {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,6 +8,14 @@ import ElementUI from 'element-ui';
|
||||
import store from '@/vuex/store'
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import axios from 'axios'
|
||||
|
||||
function applyInitialTheme() {
|
||||
const theme = localStorage.getItem('uiTheme') || 'dark'
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
}
|
||||
applyInitialTheme()
|
||||
|
||||
Vue.use(ElementUI);
|
||||
Vue.prototype.$axios = axios
|
||||
|
||||
|
||||
@@ -96,6 +96,13 @@ export default new Router({
|
||||
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectSettings'], resolve)
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/test-platform/skill-rules',
|
||||
name: 'BusinessSkillRuleConfig',
|
||||
components: {
|
||||
Manage: (resolve) => require(['@/components/TestPlatform/SkillRule/BusinessSkillRuleConfig'], resolve)
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/test-platform/case',
|
||||
name: 'CaseList',
|
||||
@@ -138,6 +145,20 @@ export default new Router({
|
||||
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanExecute'], resolve)
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/test-platform/plan/automation',
|
||||
name: 'PlanAutomationRun',
|
||||
components: {
|
||||
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanAutomationRun'], resolve)
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/test-platform/plan/automation/executions',
|
||||
name: 'PlanAutomationExecutionList',
|
||||
components: {
|
||||
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanAutomationExecutionList'], resolve)
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/test-platform/plan/progress',
|
||||
name: 'PlanProgress',
|
||||
|
||||
58
src/utils/authToken.js
Normal file
58
src/utils/authToken.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import axios from 'axios'
|
||||
|
||||
/** 与 request 实例一致，避免走带拦截器的 axios 造成循环 */
|
||||
const REFRESH_URL = '/it/api/auth/refresh'
|
||||
|
||||
let inflightRefresh = null
|
||||
|
||||
/**
|
||||
* 静默续期：POST /auth/refresh（仅当业务接口返回 code 451 时由 request 响应拦截器调用）
|
||||
* body 优先 refreshToken，否则传 accessToken；成功 code=20000 且 data.token
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
export function tryRefreshAccessToken() {
|
||||
if (inflightRefresh) {
|
||||
return inflightRefresh
|
||||
}
|
||||
const refreshToken = localStorage.getItem('refreshToken')
|
||||
const accessToken = localStorage.getItem('accessToken')
|
||||
if (!refreshToken && !accessToken) {
|
||||
return Promise.resolve(false)
|
||||
}
|
||||
inflightRefresh = axios({
|
||||
method: 'post',
|
||||
url: REFRESH_URL,
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(accessToken ? { accessToken } : {})
|
||||
},
|
||||
data: refreshToken ? { refreshToken } : accessToken ? { accessToken } : {}
|
||||
})
|
||||
.then(res => {
|
||||
const body = res && res.data
|
||||
if (!body || body.code !== 20000) {
|
||||
return false
|
||||
}
|
||||
const d = body.data || {}
|
||||
const token = d.token || body.token
|
||||
if (token) {
|
||||
localStorage.setItem('accessToken', token)
|
||||
}
|
||||
const rt = d.refresh_token || d.refreshToken
|
||||
if (rt) {
|
||||
localStorage.setItem('refreshToken', rt)
|
||||
}
|
||||
return !!token
|
||||
})
|
||||
.catch(() => false)
|
||||
.finally(() => {
|
||||
inflightRefresh = null
|
||||
})
|
||||
return inflightRefresh
|
||||
}
|
||||
|
||||
export function clearTokenStorage() {
|
||||
localStorage.removeItem('accessToken')
|
||||
localStorage.removeItem('refreshToken')
|
||||
}
|
||||
@@ -41,7 +41,7 @@ export function normalizeUploadPathSlashes(url) {
|
||||
|
||||
/**
|
||||
* 静态资源（Bug 上传图）访问根，不含末尾 /
|
||||
* - 开发环境默认 http://localhost:5010（与后端文件服务常见端口一致）
|
||||
* - 开发环境默认 http://localhost:8881（与后端文件服务常见端口一致）
|
||||
* - 可在 index.html 里设置 window.__BUG_UPLOAD_ORIGIN__ 覆盖
|
||||
* - 打包时可配置 VUE_APP_BUG_UPLOAD_ORIGIN（需在 webpack DefinePlugin 中注入）
|
||||
*/
|
||||
@@ -56,14 +56,14 @@ export function getBugUploadStaticOrigin() {
|
||||
} catch (e) { /* ignore */ }
|
||||
try {
|
||||
if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development') {
|
||||
return 'http://localhost:5010'
|
||||
return 'http://localhost:8881'
|
||||
}
|
||||
} catch (e2) { /* ignore */ }
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 浏览器实际加载图片用的地址：/uploads/... 在开发环境走 5010 端口
|
||||
* 浏览器实际加载图片用的地址：/uploads/... 在开发环境走 8881 端口
|
||||
* 存库仍可为接口返回的完整 URL，仅展示/预览时改写
|
||||
*/
|
||||
export function rewriteBugImageUrlForAccess(url) {
|
||||
@@ -155,7 +155,7 @@ export function isStepsLikelyHtml(s) {
|
||||
return /<\s*(p|div|br|img|span|ul|ol|li|h[1-6]|table|strong|em)\b/i.test(String(s || '').trim())
|
||||
}
|
||||
|
||||
/** 将 HTML 中 img 的 src 改写为可访问地址（开发环境 /uploads → 5010） */
|
||||
/** 将 HTML 中 img 的 src 改写为可访问地址（开发环境 /uploads → 8881） */
|
||||
export function rewriteImgSrcsInHtml(html) {
|
||||
return String(html || '').replace(/(<img\b[^>]*\bsrc\s*=\s*)(["'])([^"']*)\2/gi, function (_m, pre, q, src) {
|
||||
const fixed = rewriteBugImageUrlForAccess(normalizeUploadPathSlashes(src))
|
||||
|
||||
@@ -1,15 +1,65 @@
|
||||
import axios from 'axios'
|
||||
import { Message } from 'element-ui';
|
||||
import { Message } from 'element-ui'
|
||||
import router from '../router/index'
|
||||
const service = axios.create({
|
||||
// baseURL: 'http://10.250.0.252:5010', // api 的 base_url
|
||||
// baseURL: '', // api 的 base_url
|
||||
baseURL: '/it/api', // api 的 base_url
|
||||
import store from '@/vuex/store'
|
||||
import { clearTokenStorage, tryRefreshAccessToken } from './authToken'
|
||||
|
||||
timeout: 90000 // request timeout
|
||||
const service = axios.create({
|
||||
baseURL: '/it/api',
|
||||
timeout: 90000
|
||||
})
|
||||
|
||||
// 请求拦截 设置统一header
|
||||
function pushLoginExpired(message) {
|
||||
clearTokenStorage()
|
||||
localStorage.removeItem('authUser')
|
||||
localStorage.removeItem('userMenus')
|
||||
store.commit('ClearCurrentUser')
|
||||
router.push({ name: 'login' })
|
||||
Message.error(message || '登录已失效，请重新登录')
|
||||
}
|
||||
|
||||
function apiCode(data) {
|
||||
if (!data || data.code === undefined || data.code === null) return null
|
||||
const n = Number(data.code)
|
||||
return Number.isFinite(n) ? n : null
|
||||
}
|
||||
|
||||
function isMissingToken(data) {
|
||||
return apiCode(data) === 40001
|
||||
}
|
||||
|
||||
/** 仅 451：token 无效或已过期，走静默续期并重试一次 */
|
||||
function isTokenExpiredRefreshable(data) {
|
||||
return apiCode(data) === 451
|
||||
}
|
||||
|
||||
function isForbiddenApi(data) {
|
||||
return apiCode(data) === 40003
|
||||
}
|
||||
|
||||
/** @param {{ config: object, data?: object }} ctx */
|
||||
function handleTokenExpiredRefreshAndRetry(ctx) {
|
||||
const cfg = (ctx && ctx.config) || {}
|
||||
const pdata = (ctx && ctx.data) || {}
|
||||
if (cfg.__retriedTokenRefresh) {
|
||||
pushLoginExpired(pdata.message || 'token无效或已过期！')
|
||||
return Promise.reject(new Error('token无效或已过期'))
|
||||
}
|
||||
return tryRefreshAccessToken().then(ok => {
|
||||
if (!ok) {
|
||||
pushLoginExpired(pdata.message || 'token无效或已过期！')
|
||||
return Promise.reject(new Error('token无效或已过期'))
|
||||
}
|
||||
const nextCfg = Object.assign({}, cfg, { __retriedTokenRefresh: true })
|
||||
nextCfg.headers = Object.assign({}, nextCfg.headers || {})
|
||||
const newAt = localStorage.getItem('accessToken')
|
||||
if (newAt) {
|
||||
nextCfg.headers.accessToken = newAt
|
||||
}
|
||||
return service.request(nextCfg)
|
||||
})
|
||||
}
|
||||
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
const accessToken = localStorage.getItem('accessToken')
|
||||
@@ -18,36 +68,51 @@ service.interceptors.request.use(
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
error => Promise.reject(error)
|
||||
)
|
||||
|
||||
// 响应拦截 401 token过期处理
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
const data = response && response.data ? response.data : {}
|
||||
// 兼容后端返回结构：{ success, code, message, data }
|
||||
if (data && data.code === 500) {
|
||||
Message.error('服务异常')
|
||||
return Promise.reject(new Error(data.message || '服务异常'))
|
||||
} else if (data && data.code === 451) {
|
||||
router.push({ name: 'login' })
|
||||
Message.error(data.message || '登录已失效，请重新登录')
|
||||
return Promise.reject(new Error(data.message || '登录已失效'))
|
||||
} else if (data && data.success === false) {
|
||||
Message.error(data.message || '请求失败')
|
||||
return Promise.reject(new Error(data.message || '请求失败'))
|
||||
} else if (data && data.code !== undefined && data.code !== 20000) {
|
||||
Message.error(data.message || '请求失败')
|
||||
return Promise.reject(new Error(data.message || '请求失败'))
|
||||
} else {
|
||||
return response.data
|
||||
}
|
||||
if (data && isMissingToken(data)) {
|
||||
pushLoginExpired(data.message || '缺少token！')
|
||||
return Promise.reject(new Error(data.message || '缺少token'))
|
||||
}
|
||||
if (data && isTokenExpiredRefreshable(data)) {
|
||||
return handleTokenExpiredRefreshAndRetry({ config: response.config, data })
|
||||
}
|
||||
if (data && isForbiddenApi(data)) {
|
||||
Message.error(data.message || '无权限访问该接口！')
|
||||
return Promise.reject(new Error(data.message || '无权限访问该接口'))
|
||||
}
|
||||
if (data && data.success === false) {
|
||||
Message.error(data.message || '请求失败')
|
||||
return Promise.reject(new Error(data.message || '请求失败'))
|
||||
}
|
||||
if (data && data.code !== undefined && data.code !== 20000) {
|
||||
Message.error(data.message || '请求失败')
|
||||
return Promise.reject(new Error(data.message || '请求失败'))
|
||||
}
|
||||
return response.data
|
||||
},
|
||||
error => {
|
||||
// 非 2xx 时会进入这里（如 40009/40012），后端通常会带 JSON body
|
||||
const data = error && error.response && error.response.data ? error.response.data : null
|
||||
const res = error && error.response
|
||||
const data = res && res.data ? res.data : null
|
||||
if (data && isMissingToken(data) && error.config) {
|
||||
pushLoginExpired(data.message || '缺少token！')
|
||||
return Promise.reject(new Error(data.message || '缺少token'))
|
||||
}
|
||||
if (data && isTokenExpiredRefreshable(data) && error.config && !error.config.__retriedTokenRefresh) {
|
||||
return handleTokenExpiredRefreshAndRetry({ config: error.config, data })
|
||||
}
|
||||
if (data && isForbiddenApi(data)) {
|
||||
Message.error(data.message || '无权限访问该接口！')
|
||||
return Promise.reject(error)
|
||||
}
|
||||
if (data && typeof data === 'object') {
|
||||
if (data.success === false) {
|
||||
Message.error(data.message || '请求失败')
|
||||
|
||||
Reference in New Issue
Block a user