fix: 修复左侧模块树拉宽后点击模块名称又恢复默认宽度

This commit is contained in:
RubyLiu 2023-11-14 18:25:57 +08:00 committed by 刘瑞斌
parent 84467c1063
commit 4a2694e77e
17 changed files with 961 additions and 694 deletions

View File

@ -1,6 +1,7 @@
<template>
<ms-container v-if="renderComponent" v-loading="loading">
<ms-aside-container v-show="isAsideHidden">
<ms-aside-container v-show="isAsideHidden" pageKey="API_AUTOMATION">
<template #default>
<ms-api-scenario-module
:show-operator="true"
@nodeSelectEvent="nodeChange"
@ -17,6 +18,7 @@
:type="'edit'"
:total="total"
ref="nodeTree" />
</template>
</ms-aside-container>
<ms-main-container>
<el-tabs v-model="activeName" @tab-click="addTab" @tab-remove="closeConfirm">

View File

@ -1,6 +1,6 @@
<template>
<ms-container>
<ms-aside-container>
<ms-aside-container pageKey="API_SCENARIO">
<ms-api-scenario-module
@selectModule="selectModule"
@getApiModuleTree="initTree"

View File

@ -1,7 +1,8 @@
<template>
<div>
<ms-container v-if="renderComponent">
<ms-aside-container v-show="isAsideHidden">
<ms-aside-container v-show="isAsideHidden" pageKey="API_DEFINITION">
<template #default>
<ms-api-module
:show-operator="true"
:default-protocol="defaultProtocol"
@ -22,6 +23,7 @@
:total="total"
:current-version="currentVersion"
ref="nodeTree" />
</template>
</ms-aside-container>
<ms-main-container>
@ -293,7 +295,7 @@ import {useApiStore} from '@/store';
import { buildTree } from 'metersphere-frontend/src/model/NodeTree';
import { createMockConfig, getMockApiParams, mockExpectConfig } from '@/api/api-mock';
import MockEditDrawer from '@/business/definition/components/mock/MockEditDrawer';
import {getUserDefaultApiType} from "metersphere-frontend/src/api/environment";
import { getUserDefaultApiType } from 'metersphere-frontend/src/api/environment';
const store = useApiStore();
export default {
@ -482,11 +484,11 @@ export default {
},
},
beforeCreate() {
getUserDefaultApiType().then(response => {
getUserDefaultApiType().then((response) => {
if (!this.currentProtocol) {
this.currentProtocol = response.data;
}
})
});
},
created() {
let routeParamObj = this.$route.params;
@ -693,7 +695,7 @@ export default {
const { id, userGroups } = getCurrentUser();
if (userGroups) {
//
let index = userGroups.findIndex(ug => ug.sourceId === getCurrentProjectID());
let index = userGroups.findIndex((ug) => ug.sourceId === getCurrentProjectID());
if (index !== -1) {
return id;
}

View File

@ -109,7 +109,7 @@
<!--前置返回-->
<el-tab-pane :label="$t('api_test.definition.request.pre_return')" v-if="scenarioDefinition != undefined">
<ms-container :class="{ 'maximize-container': !asideHidden }" v-outside-click="outsideClick">
<ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px">
<ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px" pageKey="API_VARIABLE_ADVANCE">
<div v-loading="loading" v-show="!asideHidden">
<el-tree
node-key="resourceId"

View File

@ -1,17 +1,24 @@
<template>
<el-aside :width="width" class="ms-aside-container"
<el-aside
:width="asideHidden ? '0' : defaultWidth"
class="ms-aside-container"
:id="id"
:style="{
'margin-left': !asideHidden ? 0 : '-' + width,
'min-width': minWidth + 'px',
'max-width': maxWidth + 'px',
'height': calHeight,
}">
<div v-if="enableAsideHidden" class="hiddenBottom" :style="{'top': hiddenBottomTop ? hiddenBottomTop : 0}" @click="asideHidden = !asideHidden">
:style="{ 'min-width': minWidth, 'max-width': maxWidth }"
>
<div
v-if="enableAsideHidden"
class="hiddenBottom"
:style="{ top: hiddenBottomTop ? hiddenBottomTop : 0 }"
@click="asideHidden = !asideHidden"
>
<i v-if="!asideHidden" class="el-icon-arrow-left" />
<i v-if="asideHidden" class="el-icon-arrow-right" />
</div>
<div style="overflow: scroll" class="ms-aside-node-tree" :style="{'height': containerCalHeight }">
<div
style="overflow: scroll"
class="ms-aside-node-tree"
:style="{ height: containerCalHeight }"
>
<slot></slot>
</div>
<ms-horizontal-drag-bar v-if="draggable" />
@ -21,56 +28,60 @@
<script>
import MsHorizontalDragBar from "./dragbar/MsLeft2RightDragBar";
import { getUUID } from "../utils";
import {boolean} from "../../public/js/dev/mock";
export default {
name: "MsAsideContainer",
components: { MsHorizontalDragBar },
props: {
width: {
type: String,
default: '300px'
},
enableAsideHidden: {
type: Boolean,
default: true
default: true,
},
width: {
type: String,
default: "300px",
},
minWidth: {
type: String,
default: null
default: null,
},
maxWidth: {
type: String,
default: null
default: null,
},
height: {
type: String,
default: null
default: null,
},
enableAutoHeight: {
type: Boolean,
default: false
default: false,
},
defaultHiddenBottomTop: {
type: Number,
default: null
default: null,
},
pageKey: {
type: String,
default: null,
},
draggable: {
type: Boolean,
default: true,
}
},
},
watch: {
asideHidden() {
this.$emit('setAsideHidden', this.asideHidden);
}
this.$emit("setAsideHidden", this.asideHidden);
},
},
computed: {
calHeight() {
return this.height ? (this.height + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 50px)')
},
containerCalHeight() {
return this.height ? (this.height - 30 + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 62px)')
return this.height
? this.height - 30 + "px"
: this.enableAutoHeight
? null
: "calc(100vh - 62px)";
},
},
created() {
@ -80,37 +91,76 @@ export default {
this.$nextTick(() => {
this.setHiddenBottomTop();
});
if (this.pageKey) {
const rememberKey = "WIDTH_" + this.pageKey;
const rememberWidth = localStorage.getItem(rememberKey);
if (rememberWidth) {
//
this.defaultWidth = rememberWidth;
} else {
this.defaultWidth = this.width;
}
const element = document.getElementById(this.id);
const MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
this.observer = new MutationObserver(() => {
// localStorage
const width = getComputedStyle(element).getPropertyValue("width");
if (!this.asideHidden) {
localStorage.setItem(rememberKey, width);
//
this.defaultWidth = width;
}
});
this.observer.observe(element, {
attributes: true,
attributeFilter: ["style"],
attributeOldValue: true,
});
}
},
beforeDestroyed() {
if (this.observer) {
this.observer.disconnect();
this.observer.takeRecords();
this.observer = null;
}
},
data() {
return {
asideHidden: false,
hiddenBottomTop: null,
id: null
}
id: null,
defaultWidth: this.width,
observer: null,
};
},
methods: {
setHiddenBottomTop() {
if (this.defaultHiddenBottomTop) {
this.hiddenBottomTop = this.defaultHiddenBottomTop + 'px';
this.hiddenBottomTop = this.defaultHiddenBottomTop + "px";
} else {
let e = document.getElementById(this.id);
const e = document.getElementById(this.id);
if (!e) return;
// 3/1
this.hiddenBottomTop = e.clientHeight / 3 + 'px';
}
}
}
this.hiddenBottomTop = e.clientHeight / 3 + "px";
}
},
},
};
</script>
<style scoped>
.ms-aside-container {
border: 1px solid #E6E6E6;
border: 1px solid #e6e6e6;
padding: 10px;
border-radius: 2px;
box-sizing: border-box;
background-color: #FFF;
background-color: #fff;
/*height: calc(100vh - 80px);*/
border-right: 0px;
position: relative;
@ -148,5 +198,4 @@ export default {
margin-left: 0;
color: white;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<ms-container>
<ms-aside-container>
<ms-aside-container pageKey="FILE_MANAGE">
<ms-file-module @nodeSelectEvent="change" @myFile="myFile" @setNodeTree="setNodeTree" ref="module"/>
</ms-aside-container>
<ms-main-container>

View File

@ -1,6 +1,6 @@
<template>
<ms-container :is-show-warning="isShowWarning && isSystemGroup">
<ms-aside-container :enable-aside-hidden="enableAsideHidden" :width="enableAsideHidden ? '300px' : '0px'">
<ms-aside-container pageKey="SETTING" :enable-aside-hidden="enableAsideHidden" :width="enableAsideHidden ? '300px' : '0px'">
<ms-setting-menu/>
</ms-aside-container>
<ms-main-container>

View File

@ -48,14 +48,17 @@
<div class="content-box">
<div class="body-wrap">
<ms-aside-container
:min-width="'350'"
:max-width="'800'"
min-width="350px"
max-width="800px"
:enable-aside-hidden="false"
:default-hidden-bottom-top="200"
:enable-auto-height="true"
pageKey="CASE_RELEVANCE"
>
<div class="aside-wrap">
<span v-if="isAcrossSpace" class="menu-title">{{ $t("commons.space") }}:</span>
<span v-if="isAcrossSpace" class="menu-title"
>{{ $t("commons.space") }}:</span
>
<el-select
v-if="isAcrossSpace"
filterable
@ -92,8 +95,13 @@
<div class="options">
<div class="options-btn">
<div class="check-row" v-if="selectCounts > 0">
<div class="label">{{$t('case.selected')}} {{ selectCounts }} {{$t('case.strip')}}</div>
<div class="clear" @click="clearSelect">{{$t('case.clear')}}</div>
<div class="label">
{{ $t("case.selected") }} {{ selectCounts }}
{{ $t("case.strip") }}
</div>
<div class="clear" @click="clearSelect">
{{ $t("case.clear") }}
</div>
</div>
<div class="cancel">
<el-button size="small" @click="visible = false">{{
@ -139,7 +147,7 @@ export default {
SelectMenu,
MsDialogHeader,
TableSelectCountBar,
MsAsideContainer
MsAsideContainer,
},
data() {
return {

View File

@ -4,6 +4,7 @@
width="500px"
:default-hidden-bottom-top="200"
:enable-auto-height="true"
pageKey="API_CASE_FAILURE_RESULT"
>
<el-card>
<el-scrollbar>

View File

@ -4,6 +4,7 @@
width="500px"
:default-hidden-bottom-top="200"
:enable-auto-height="true"
pageKey="API_SCENARIO_FAILURE_RESULT"
>
<el-card>
<el-scrollbar>

View File

@ -1,7 +1,13 @@
<template>
<el-container>
<ms-aside-container width="500px" :default-hidden-bottom-top="200" :enable-auto-height="true">
<load-failure-result :class="{'init-height': !showResponse}"
<ms-aside-container
width="500px"
:default-hidden-bottom-top="200"
:enable-auto-height="true"
pageKey="LOAD_ALL_RESULT"
>
<load-failure-result
:class="{ 'init-height': !showResponse }"
:is-db="isDb"
:is-all="isAll"
:share-id="shareId"
@ -10,13 +16,14 @@
:report="report"
:plan-id="planId"
@rowClick="getReport"
@setSize="setAllSize"/>
@setSize="setAllSize"
/>
</ms-aside-container>
<ms-main-container>
<div v-if="showResponse">
<div v-if="!isTemplate && reportShow">
<micro-app v-if="isShare"
<micro-app
v-if="isShare"
route-name="sharePerReportView"
service="performance"
:route-params="{
@ -24,26 +31,31 @@
isShare,
shareId,
isPlanReport: true,
}"/>
<micro-app v-else
}"
/>
<micro-app
v-else
route-name="perReportView"
service="performance"
:route-params="{
reportId,
}"/>
}"
/>
</div>
<load-case-report-view v-else
<load-case-report-view
v-else
:is-plan-report="true"
:share-id="shareId"
:is-share="isShare"
:plan-report-template="response"
:report-id="reportId"
ref="loadCaseReportView"/>
ref="loadCaseReportView"
/>
</div>
<div class="empty" v-show="!showResponse">
{{ $t("test_track.plan.load_case.content_empty") }}
</div>
<div class="empty" v-show="!showResponse">{{ $t('test_track.plan.load_case.content_empty') }}</div>
</ms-main-container>
</el-container>
</template>
@ -54,7 +66,10 @@ import LoadCaseReportView from "../load/LoadCaseReportView";
import TypeTableItem from "../../../../../../common/tableItems/planview/TypeTableItem";
import MethodTableItem from "../../../../../../common/tableItems/planview/MethodTableItem";
import StatusTableItem from "../../../../../../common/tableItems/planview/StatusTableItem";
import {checkoutLoadReport, shareCheckoutLoadReport} from "@/api/remote/plan/test-plan";
import {
checkoutLoadReport,
shareCheckoutLoadReport,
} from "@/api/remote/plan/test-plan";
import LoadFailureResult from "@/business/plan/view/comonents/report/detail/component/LoadFailureResult";
import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
@ -66,9 +81,12 @@ export default {
components: {
MsMainContainer,
MsAsideContainer,
LoadFailureResult, StatusTableItem, MethodTableItem, TypeTableItem,
LoadFailureResult,
StatusTableItem,
MethodTableItem,
TypeTableItem,
LoadCaseReportView,
MicroApp
MicroApp,
},
props: {
planId: String,
@ -79,8 +97,8 @@ export default {
isDb: Boolean,
isAll: {
type: Boolean,
default: false
}
default: false,
},
},
data() {
return {
@ -88,8 +106,8 @@ export default {
showResponse: false,
reportId: "",
response: null,
reportShow: true
}
reportShow: true,
};
},
methods: {
getReport(row) {
@ -103,20 +121,18 @@ export default {
} else {
let param = {
testPlanLoadCaseId: row.id,
reportId: row.loadReportId
}
reportId: row.loadReportId,
};
if (!row.loadReportId) {
this.showResponse = false;
return;
}
if (this.isShare) {
shareCheckoutLoadReport(this.shareId, param)
.then(r => {
shareCheckoutLoadReport(this.shareId, param).then((r) => {
this.openReport(r.data, row.loadReportId);
});
} else {
checkoutLoadReport(param)
.then(r => {
checkoutLoadReport(param).then((r) => {
this.openReport(r.data, row.loadReportId);
});
}
@ -124,7 +140,6 @@ export default {
},
openReport(exist, loadReportId) {
if (exist) {
if (this.reportId === loadReportId) {
return;
}
@ -137,14 +152,16 @@ export default {
});
} else {
this.showResponse = false;
this.$message.warning(this.$t('test_track.plan.load_case.report_not_found'));
this.$message.warning(
this.$t("test_track.plan.load_case.report_not_found")
);
}
},
setAllSize(size) {
this.$emit('setSize', size);
}
}
}
this.$emit("setSize", size);
},
},
};
</script>
<style scoped>

View File

@ -4,6 +4,7 @@
width="500px"
:default-hidden-bottom-top="200"
:enable-auto-height="true"
pageKey="UI_SCENARIO_FAILURE_RESULT"
>
<el-card>
<el-scrollbar>
@ -45,7 +46,11 @@
prop="lastResult"
>
<template v-slot:default="{ row }">
<ms-test-plan-api-status :status="row.lastResult === 'UnExecute' ? 'PENDING' : row.lastResult" />
<ms-test-plan-api-status
:status="
row.lastResult === 'UnExecute' ? 'PENDING' : row.lastResult
"
/>
</template>
</ms-table-column>
</ms-table>
@ -134,7 +139,6 @@ export default {
Running: "Running",
UnExecute: "Prepare",
},
};
},
mounted() {

View File

@ -6,26 +6,36 @@
:data="testReviews"
:current-data="currentReview"
:title="$t('test_track.review_view.review')"
@dataChange="changeReview"/>
@dataChange="changeReview"
/>
</template>
<template v-slot:menu>
<el-menu v-if="isMenuShow" :active-text-color="color"
class="el-menu-demo header-menu" mode="horizontal" @select="handleSelect"
:default-active="activeIndex">
<el-menu-item index="functional">{{ $t('test_track.functional_test_case') }}</el-menu-item>
<el-menu
v-if="isMenuShow"
:active-text-color="color"
class="el-menu-demo header-menu"
mode="horizontal"
@select="handleSelect"
:default-active="activeIndex"
>
<el-menu-item index="functional">{{
$t("test_track.functional_test_case")
}}</el-menu-item>
</el-menu>
</template>
</ms-test-plan-header-bar>
<test-review-function v-if="activeIndex === 'functional'" :redirectCharType="redirectCharType"
:clickType="clickType" :review-id="reviewId" :version-enable="versionEnable"
ref="testReviewFunction"/>
<test-review-function
v-if="activeIndex === 'functional'"
:redirectCharType="redirectCharType"
:clickType="clickType"
:review-id="reviewId"
:version-enable="versionEnable"
ref="testReviewFunction"
/>
</div>
</template>
<script>
import MsMainContainer from "metersphere-frontend/src/components/MsMainContainer";
import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
import MsContainer from "metersphere-frontend/src/components/MsContainer";
@ -51,7 +61,7 @@ export default {
MsContainer,
NodeTree,
TestReviewRelevance,
SelectMenu
SelectMenu,
},
data() {
return {
@ -65,30 +75,30 @@ export default {
activeIndex: "functional",
isMenuShow: true,
//-
redirectCharType: '',
redirectCharType: "",
//-
clickType: '',
clickType: "",
projectId: null,
versionEnable: false,
}
};
},
computed: {
reviewId: function () {
return this.$route.params.reviewId;
},
color: function () {
return `var(--primary_color)`
}
return `var(--primary_color)`;
},
},
created() {
let projectId = this.$route.query.projectId;
if (projectId) {
sessionStorage.setItem(PROJECT_ID, projectId);
}
this.$EventBus.$on('projectChange', this.handleProjectChange);
this.$EventBus.$on("projectChange", this.handleProjectChange);
},
destroyed() {
this.$EventBus.$off('projectChange', this.handleProjectChange);
this.$EventBus.$off("projectChange", this.handleProjectChange);
},
mounted() {
this.initData();
@ -103,12 +113,12 @@ export default {
}
},
watch: {
'$route'(to, from) {
$route(to, from) {
this.openTestCaseEdit(to.path);
},
reviewId() {
this.initData();
}
},
},
activated() {
this.genRedirectParam();
@ -117,7 +127,7 @@ export default {
handleProjectChange() {
if (this.$route.path.indexOf("track/review") > -1) {
this.$nextTick(() => {
this.$router.push('/track/review/all');
this.$router.push("/track/review/all");
});
}
},
@ -128,9 +138,12 @@ export default {
this.redirectCharType = this.$route.params.charType;
this.clickType = this.$route.params.clickType;
if (this.redirectCharType != "") {
if (this.redirectCharType == 'scenario') {
this.activeIndex = 'api';
} else if (this.redirectCharType != null && this.redirectCharType != '') {
if (this.redirectCharType == "scenario") {
this.activeIndex = "api";
} else if (
this.redirectCharType != null &&
this.redirectCharType != ""
) {
this.activeIndex = this.redirectCharType;
}
} else {
@ -146,15 +159,14 @@ export default {
this.$refs.testReviewRelevance.openTestReviewRelevanceDialog();
},
getTestReviews() {
testReviewListAll()
.then((response) => {
testReviewListAll().then((response) => {
this.testReviews = response.data;
this.testReviews.forEach(review => {
this.testReviews.forEach((review) => {
if (this.reviewId && review.id === this.reviewId) {
this.currentReview = review;
}
});
})
});
},
nodeChange(node, nodeIds, pNodes) {
this.selectNodeIds = nodeIds;
@ -162,27 +174,25 @@ export default {
},
changeReview(review) {
this.currentReview = review;
this.$router.push('/track/review/view/' + review.id);
this.$router.push("/track/review/view/" + review.id);
},
getNodeTreeByReviewId() {
if (this.reviewId) {
testCaseNodeListReview(this.reviewId)
.then((response) => {
testCaseNodeListReview(this.reviewId).then((response) => {
this.treeNodes = response.data;
})
});
}
},
openTestCaseEdit(path) {
if (path.indexOf("/review/view/edit") >= 0) {
let caseId = this.$route.params.caseId;
getTestReviewTestCase(caseId)
.then((response) => {
getTestReviewTestCase(caseId).then((response) => {
let testCase = response.data;
if (testCase) {
this.$refs.testPlanTestCaseList.handleEdit(testCase);
this.$router.push('/track/review/view/' + testCase.reviewId);
this.$router.push("/track/review/view/" + testCase.reviewId);
}
})
});
}
},
reloadMenu() {
@ -196,18 +206,16 @@ export default {
return;
}
if (hasLicense()) {
versionEnableByProjectId(this.projectId)
.then((response) => {
versionEnableByProjectId(this.projectId).then((response) => {
this.versionEnable = response.data;
})
});
}
},
}
}
},
};
</script>
<style scoped>
:deep(.ms-main-container) {
height: calc(100vh - 93px);
}

View File

@ -1,58 +1,89 @@
<template>
<div>
<el-dialog :title="$t('test_track.review_view.relevance_case')" :visible.sync="dialogFormVisible" @close="close"
<el-dialog
:title="$t('test_track.review_view.relevance_case')"
:visible.sync="dialogFormVisible"
@close="close"
width="75%"
:close-on-click-modal="false"
:fullscreen="isFullScreen"
top="50px" :destroy-on-close="true"
append-to-body>
<template slot="title" :slot-scope="$t('test_track.review_view.relevance_case')" v-if="!$slots.headerBtn">
<ms-dialog-header :title="$t('test_track.review_view.relevance_case')" @cancel="dialogFormVisible = false"
top="50px"
:destroy-on-close="true"
append-to-body
>
<template
slot="title"
:slot-scope="$t('test_track.review_view.relevance_case')"
v-if="!$slots.headerBtn"
>
<ms-dialog-header
:title="$t('test_track.review_view.relevance_case')"
@cancel="dialogFormVisible = false"
@confirm="saveReviewRelevance"
@fullScreen="fullScreen"
:enable-full-screen="false"
:is-full-screen.sync="isFullScreen">
:is-full-screen.sync="isFullScreen"
>
<template #other>
<table-select-count-bar :count="selectCounts" style="float: left; margin: 5px;"/>
<table-select-count-bar
:count="selectCounts"
style="float: left; margin: 5px"
/>
</template>
</ms-dialog-header>
</template>
<el-container class="main-content">
<ms-aside-container
:min-width="'350'"
:max-width="'600'"
min-width="350px"
max-width="600px"
:enable-aside-hidden="false"
:default-hidden-bottom-top="200"
:enable-auto-height="true"
pageKey="TEST_REVIEW_RELEVANCE_CASE"
>
>
<select-menu
:data="projects"
width="173px"
:current-data="currentProject"
:title="$t('test_track.switch_project')"
@dataChange="changeProject"/>
<node-tree class="node-tree"
@dataChange="changeProject"
/>
<node-tree
class="node-tree"
:all-label="$t('commons.all_label.review')"
v-loading="result.loading"
local-suffix="test_case"
default-label="未规划用例"
@nodeSelectEvent="nodeChange"
:tree-nodes="treeNodes"
ref="nodeTree"/>
ref="nodeTree"
/>
</ms-aside-container>
<el-container>
<el-main class="case-content">
<ms-table-header :tip="$t('review.search_by_id_or_name_or_tag')" :condition.sync="condition" @search="search"
title="" :show-create="false">
<ms-table-header
:tip="$t('review.search_by_id_or_name_or_tag')"
:condition.sync="condition"
@search="search"
title=""
:show-create="false"
>
<template v-slot:searchBarBefore>
<version-select v-xpack :project-id="projectId" @changeVersion="changeVersion" margin-right="20"/>
<version-select
v-xpack
:project-id="projectId"
@changeVersion="changeVersion"
margin-right="20"
/>
</template>
</ms-table-header>
<ms-table :data="testReviews"
@filter-change="filter" row-key="id"
<ms-table
:data="testReviews"
@filter-change="filter"
row-key="id"
v-loading="result.loading"
:total="total"
:page-size.sync="pageSize"
@ -61,14 +92,15 @@
@refresh="getReviews"
@selectCountChange="setSelectCounts"
:condition="condition"
ref="table">
ref="table"
>
<el-table-column
v-if="!customNum"
prop="num"
min-width="120"
sortable
:label="$t('commons.id')">
:label="$t('commons.id')"
>
</el-table-column>
<el-table-column
@ -76,14 +108,16 @@
prop="customNum"
min-width="120"
sortable
:label="$t('commons.id')">
:label="$t('commons.id')"
>
</el-table-column>
<el-table-column
prop="name"
:label="$t('test_track.case.name')"
min-width="120"
show-overflow-tooltip>
show-overflow-tooltip
>
<template v-slot:default="scope">
{{ scope.row.name }}
</template>
@ -95,7 +129,8 @@
:label="$t('test_track.case.version')"
column-key="versionId"
:filters="versionFilters"
style="width: 100%">
style="width: 100%"
>
<template v-slot:default="scope">
{{ scope.row.versionName }}
</template>
@ -107,9 +142,13 @@
column-key="priority"
:label="$t('test_track.case.priority')"
min-width="120"
show-overflow-tooltip>
show-overflow-tooltip
>
<template v-slot:default="scope">
<priority-table-item :value="scope.row.priority" :priority-options="priorityFilters"/>
<priority-table-item
:value="scope.row.priority"
:priority-options="priorityFilters"
/>
</template>
</el-table-column>
@ -118,7 +157,8 @@
column-key="reviewStatus"
:label="$t('test_track.case.status')"
min-width="120"
show-overflow-tooltip>
show-overflow-tooltip
>
<template v-slot:default="scope">
<review-status :value="scope.row.reviewStatus" />
</template>
@ -126,25 +166,23 @@
<ms-update-time-column />
<ms-create-time-column />
</ms-table>
<ms-table-pagination :change="getReviews" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
<ms-table-pagination
:change="getReviews"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"
/>
</el-main>
</el-container>
</el-container>
</el-dialog>
<switch-project ref="switchProject" @getProjectNode="getProjectNode" />
</div>
</template>
<script>
import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
import NodeTree from "metersphere-frontend/src/components/module/MsNodeTree";
import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
@ -156,17 +194,27 @@ import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader";
import SwitchProject from "../../../case/components/SwitchProject";
import { TEST_REVIEW_RELEVANCE_CASE_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
import ReviewStatus from "@/business/case/components/ReviewStatus";
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import elTableInfiniteScroll from "el-table-infinite-scroll";
import SelectMenu from "@/business/common/SelectMenu";
import { hasLicense } from "metersphere-frontend/src/utils/permission";
import {_filter, initCondition} from "metersphere-frontend/src/utils/tableUtils";
import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token";
import {
_filter,
initCondition,
} from "metersphere-frontend/src/utils/tableUtils";
import {
getCurrentProjectID,
getCurrentUserId,
getCurrentWorkspaceId,
} from "metersphere-frontend/src/utils/token";
import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
import MsDialogHeader from "metersphere-frontend/src/components/MsDialogHeader";
import MsTable from "metersphere-frontend/src/components/table/MsTable";
import TableSelectCountBar from "metersphere-frontend/src/components/table/TableSelectCountBar";
import VersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
import {getTestCaseReviewRelevance, getTestCaseReviewsCasePage} from "@/api/test-review";
import {
getTestCaseReviewRelevance,
getTestCaseReviewsCasePage,
} from "@/api/test-review";
import { testCaseNodeListReviewRelate } from "@/api/test-case-node";
import { getVersionFilters } from "@/business/utils/sdk-utils";
import { projectRelated } from "@/api/project";
@ -191,7 +239,7 @@ export default {
MsTableHeader,
SwitchProject,
ReviewStatus,
'VersionSelect': VersionSelect,
VersionSelect: VersionSelect,
MsTablePagination,
MsDialogHeader,
MsTable,
@ -199,11 +247,11 @@ export default {
MsCreateTimeColumn,
},
directives: {
'el-table-infinite-scroll': elTableInfiniteScroll
"el-table-infinite-scroll": elTableInfiniteScroll,
},
data() {
return {
openType: 'relevance',
openType: "relevance",
checked: true,
result: {},
currentProject: {},
@ -215,8 +263,8 @@ export default {
treeNodes: [],
selectNodeIds: [],
selectNodeNames: [],
projectId: '',
projectName: '',
projectId: "",
projectName: "",
projects: [],
pageSize: 10,
currentPage: 1,
@ -224,29 +272,29 @@ export default {
lineStatus: true,
customNum: false,
condition: {
components: TEST_REVIEW_RELEVANCE_CASE_CONFIGS
components: TEST_REVIEW_RELEVANCE_CASE_CONFIGS,
},
priorityFilters: [],
statusFilters: [
{text: this.$t('test_track.review.prepare'), value: 'Prepare'},
{text: this.$t('test_track.review.pass'), value: 'Pass'},
{text: this.$t('test_track.review.un_pass'), value: 'UnPass'},
{text: this.$t('test_track.review.again'), value: 'Again'},
{text: this.$t('test_track.review.underway'), value: 'Underway'},
{ text: this.$t("test_track.review.prepare"), value: "Prepare" },
{ text: this.$t("test_track.review.pass"), value: "Pass" },
{ text: this.$t("test_track.review.un_pass"), value: "UnPass" },
{ text: this.$t("test_track.review.again"), value: "Again" },
{ text: this.$t("test_track.review.underway"), value: "Underway" },
],
selectCounts: null,
isFullScreen: false,
screenHeight: 'calc(100vh - 420px)'
screenHeight: "calc(100vh - 420px)",
};
},
props: {
reviewId: {
type: String
type: String,
},
versionEnable: {
type: Boolean,
default: false
}
default: false,
},
},
watch: {
reviewId() {
@ -264,7 +312,7 @@ export default {
this.getVersionOptions();
this.getProjectNode();
this.getCustomNum();
}
},
},
mounted() {
if (hasLicense()) {
@ -278,24 +326,30 @@ export default {
loadConditionComponents() {
getTestTemplate(this.projectId).then((template) => {
this.initPriorityFilters(template);
this.condition.components = initTestCaseConditionComponents(this.condition, template.customFields, false);
this.condition.components = initTestCaseConditionComponents(
this.condition,
template.customFields,
false
);
});
},
initPriorityFilters(template) {
template.customFields.forEach(field => {
if (field.name === '用例等级') {
template.customFields.forEach((field) => {
if (field.name === "用例等级") {
this.priorityFilters = field.options;
}
})
});
},
fullScreen() {
this.isFullScreen = !this.isFullScreen;
this.screenHeight = this.isFullScreen ? 'calc(100vh - 180px)' : 'calc(100vh - 420px)'
this.screenHeight = this.isFullScreen
? "calc(100vh - 180px)"
: "calc(100vh - 420px)";
},
setConditionModuleIdParam() {
this.condition.components.forEach(component => {
if (component.key === 'moduleIds') {
component.options.params = {"projectId": this.projectId};
this.condition.components.forEach((component) => {
if (component.key === "moduleIds") {
component.options.params = { projectId: this.projectId };
}
});
},
@ -319,15 +373,14 @@ export default {
*/
//
if (this.condition.selectAll) {
param.testCaseIds = ['all'];
param.testCaseIds = ["all"];
}
getTestCaseReviewRelevance(param)
.then(() => {
getTestCaseReviewRelevance(param).then(() => {
this.selectIds.clear();
this.selectCounts = 0;
this.$success(this.$t('commons.save_success'));
this.$success(this.$t("commons.save_success"));
this.dialogFormVisible = false;
this.$emit('refresh');
this.$emit("refresh");
});
},
buildPagePath(path) {
@ -345,8 +398,11 @@ export default {
this.result.loading = true;
initCondition(this.condition, this.condition.selectAll);
this.condition.projectId = this.projectId || getCurrentProjectID();
getTestCaseReviewsCasePage(this.currentPage, this.pageSize, this.condition)
.then((response) => {
getTestCaseReviewsCasePage(
this.currentPage,
this.pageSize,
this.condition
).then((response) => {
let data = response.data;
this.total = data.itemCount;
this.testReviews = data.listObject;
@ -376,30 +432,32 @@ export default {
if (this.condition.projectId) {
delete this.condition.projectId;
}
this.projectId = '';
this.projectId = "";
},
filter(filters) {
_filter(filters, this.condition);
this.search();
},
toggleSelection(rows) {
rows.forEach(row => {
this.selectIds.forEach(id => {
rows.forEach((row) => {
this.selectIds.forEach((id) => {
if (row.id === id) {
// true
this.$refs.table.toggleRowSelection(row, true)
this.$refs.table.toggleRowSelection(row, true);
}
})
})
});
});
},
getProject() {
if (this.reviewId) {
projectRelated({userId: getCurrentUserId(), workspaceId: getCurrentWorkspaceId()})
.then((res) => {
projectRelated({
userId: getCurrentUserId(),
workspaceId: getCurrentWorkspaceId(),
}).then((res) => {
let data = res.data;
if (data) {
this.projects = data;
const index = data.findIndex(d => d.id === getCurrentProjectID());
const index = data.findIndex((d) => d.id === getCurrentProjectID());
if (index !== -1) {
this.projectId = data[index].id;
this.projectName = data[index].name;
@ -414,7 +472,11 @@ export default {
}
},
switchProject() {
this.$refs.switchProject.open({id: this.reviewId, url: '/test/case/review/project/', type: 'review'});
this.$refs.switchProject.open({
id: this.reviewId,
url: "/test/case/review/project/",
type: "review",
});
},
search() {
this.currentPage = 1;
@ -428,7 +490,9 @@ export default {
},
getProjectNode(projectId, condition) {
return new Promise((resolve) => {
const index = this.projects.findIndex(project => project.id === projectId);
const index = this.projects.findIndex(
(project) => project.id === projectId
);
if (index !== -1) {
this.projectName = this.projects[index].name;
this.currentProject = this.projects[index];
@ -436,8 +500,11 @@ export default {
if (projectId) {
this.projectId = projectId;
}
testCaseNodeListReviewRelate({reviewId: this.reviewId, projectId: this.projectId, ...condition})
.then((response) => {
testCaseNodeListReviewRelate({
reviewId: this.reviewId,
projectId: this.projectId,
...condition,
}).then((response) => {
this.treeNodes = response.data;
resolve();
});
@ -445,30 +512,29 @@ export default {
});
},
getVersionOptions() {
getVersionFilters(this.projectId)
.then(r => this.versionFilters = r.data);
getVersionFilters(this.projectId).then(
(r) => (this.versionFilters = r.data)
);
},
changeVersion(version) {
this.condition.versionId = version || null;
this.search();
},
getCustomNum() {
getProjectApplicationConfig('CASE_CUSTOM_NUM')
.then(result => {
getProjectApplicationConfig("CASE_CUSTOM_NUM").then((result) => {
let data = result.data;
if (data && data.typeValue === 'true') {
if (data && data.typeValue === "true") {
this.customNum = true;
} else {
this.customNum = false;
}
});
},
}
}
},
};
</script>
<style scoped>
.tb-edit .el-input {
display: none;
color: black;
@ -476,12 +542,10 @@ export default {
.tb-edit .current-row .el-input {
display: block;
}
.tb-edit .current-row .el-input + span {
display: none;
}
.node-tree {
@ -519,5 +583,4 @@ export default {
margin-right: 12px;
margin-bottom: 10px;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<ms-container>
<ms-aside-container>
<ms-aside-container pageKey="WORKSTATION_DETAIL">
<project-menu
ref="projectMenu"
@setProject="setProject"
@ -15,17 +15,27 @@
<el-row>
<table-header
ref="tableHeader"
:select-show=!isFocus
:select-show="!isFocus"
@rushTableNode="rushTableNode"
>
</table-header>
</el-row>
<el-row>
<template
v-if="currentTodo === 'performance'||((currentTodo === 'api_automation'||currentTodo === 'track_case'||currentTodo === 'api_case')&& isUpcoming ===false)">
<mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"/>
v-if="
currentTodo === 'performance' ||
((currentTodo === 'api_automation' ||
currentTodo === 'track_case' ||
currentTodo === 'api_case') &&
isUpcoming === false)
"
>
<mx-version-select
v-xpack
:project-id="projectId"
@changeVersion="changeVersion"
/>
</template>
<ms-tab-button
v-if="currentTodo === 'track_case' && isUpcoming === true"
@ -35,20 +45,26 @@
:left-content="$t('test_track.case.list')"
:right-tip="$t('commons.dash_board')"
:right-content="$t('commons.dash_board')"
:middle-button-enable="false">
:middle-button-enable="false"
>
<template v-slot:version>
<mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"/>
<mx-version-select
v-xpack
:project-id="projectId"
@changeVersion="changeVersion"
/>
</template>
<div v-if="activeDom === 'left'" style="padding-top: 20px">
<case-table-list
v-if="currentTodo === 'track_case'"
@refresh="refresh"
@setCondition="setCondition"
:is-focus=isFocus
:is-creation=isCreation
:is-focus="isFocus"
:is-creation="isCreation"
:custom-num="custom_num"
:current-version="currentVersion"
ref="caseTableList">
ref="caseTableList"
>
</case-table-list>
</div>
</ms-tab-button>
@ -56,31 +72,42 @@
v-if="currentTodo === 'track_case' && isUpcoming === false"
@refresh="refresh"
@setCondition="setCondition"
:is-focus=isFocus
:is-creation=isCreation
:is-focus="isFocus"
:is-creation="isCreation"
:current-version="currentVersion"
:custom-num="custom_num"
ref="caseTableList">
ref="caseTableList"
>
</case-table-list>
<status-tap-button
v-if="(currentTodo ==='api_automation'||currentTodo ==='api_case'||currentTodo === 'api_definition') && isUpcoming===true"
v-if="
(currentTodo === 'api_automation' ||
currentTodo === 'api_case' ||
currentTodo === 'api_definition') &&
isUpcoming === true
"
:active-status="activeStatus"
@update:activeStatus="updateActiveStatus"
:left-tip="$t('commons.to_be_completed')"
:left-content="$t('commons.to_be_completed')"
:right-tip="$t('commons.pending_upgrade')"
:right-content="$t('commons.pending_upgrade')"
:middle-button-enable="false">
:middle-button-enable="false"
>
<template v-slot:version>
<mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"/>
<mx-version-select
v-xpack
:project-id="projectId"
@changeVersion="changeVersion"
/>
</template>
<div style="padding-top: 20px">
<api-case-table-list
v-if="currentTodo === 'api_case'"
:is-focus=isFocus
:is-creation=isCreation
:is-upcoming=isUpcoming
:relevanceProjectId=projectId
:is-focus="isFocus"
:is-creation="isCreation"
:is-upcoming="isUpcoming"
:relevanceProjectId="projectId"
:current-version="currentVersion"
:current-protocol="currentProtocol"
ref="apiCaseTableList"
@ -88,10 +115,11 @@
</api-case-table-list>
<automation-table-list
v-if="currentTodo === 'api_automation'"
:is-focus=isFocus
:is-creation=isCreation
:is-focus="isFocus"
:is-creation="isCreation"
:current-version="currentVersion"
ref="automationTableList">
ref="automationTableList"
>
</automation-table-list>
<api-definition-table-list
v-if="currentTodo === 'api_definition'"
@ -99,9 +127,9 @@
:current-protocol="currentProtocol"
:queryDataType="queryDataType"
:current-version="currentVersion"
:is-focus=isFocus
:is-creation=isCreation
:is-upcoming=isUpcoming
:is-focus="isFocus"
:is-creation="isCreation"
:is-upcoming="isUpcoming"
ref="apiDefinitionTableList"
>
</api-definition-table-list>
@ -109,10 +137,10 @@
</status-tap-button>
<api-case-table-list
v-if="currentTodo === 'api_case' && isUpcoming === false"
:is-focus=isFocus
:is-creation=isCreation
:is-upcoming=isUpcoming
:relevanceProjectId=projectId
:is-focus="isFocus"
:is-creation="isCreation"
:is-upcoming="isUpcoming"
:relevanceProjectId="projectId"
:current-version="currentVersion"
:current-protocol="currentProtocol"
ref="apiCaseTableList"
@ -120,28 +148,31 @@
</api-case-table-list>
<automation-table-list
v-if="currentTodo === 'api_automation' && isUpcoming === false"
:is-focus=isFocus
:is-creation=isCreation
:is-focus="isFocus"
:is-creation="isCreation"
:current-version="currentVersion"
ref="automationTableList">
ref="automationTableList"
>
</automation-table-list>
<plan-table-list
v-if="currentTodo === 'track_plan'"
:is-focus=isFocus
:is-creation=isCreation
ref="testPlanList">
:is-focus="isFocus"
:is-creation="isCreation"
ref="testPlanList"
>
</plan-table-list>
<review-table-list
v-if="currentTodo === 'track_review'"
:is-focus=isFocus
:is-creation=isCreation
ref="testPlanList">
:is-focus="isFocus"
:is-creation="isCreation"
ref="testPlanList"
>
</review-table-list>
<issue-table-list
v-if="currentTodo === 'track_issue'"
@handlePageChange="getIssues"
:is-focus=isFocus
:is-creation=isCreation
:is-focus="isFocus"
:is-creation="isCreation"
@refresh="getIssues"
ref="issueTableList"
>
@ -153,21 +184,20 @@
:queryDataType="queryDataType"
:current-version="currentVersion"
:is-read-only="false"
:is-focus=isFocus
:is-creation=isCreation
:is-upcoming=isUpcoming
:is-focus="isFocus"
:is-creation="isCreation"
:is-upcoming="isUpcoming"
ref="apiDefinitionTableList"
>
</api-definition-table-list>
<performance-table-list
v-if="currentTodo === 'performance'"
:is-focus=isFocus
:is-creation=isCreation
:is-focus="isFocus"
:is-creation="isCreation"
:current-version="currentVersion"
ref="performanceTableList"
>
</performance-table-list>
</el-row>
</el-card>
</ms-main-container>
@ -191,13 +221,13 @@ import {getIssues} from "@/api/issue";
import {
fullScreenLoading,
getUUID,
stopFullScreenLoading
stopFullScreenLoading,
} from "metersphere-frontend/src/utils";
import {
getCurrentProjectID,
getCurrentUser,
getCurrentUserId,
getCurrentWorkspaceId
getCurrentWorkspaceId,
} from "metersphere-frontend/src/utils/token";
import { switchProject } from "metersphere-frontend/src/api/project";
import MsTabButton from "metersphere-frontend/src/components/MsTabButton";
@ -209,10 +239,8 @@ import {getDefaultSecondLevelMenu} from "metersphere-frontend/src/router";
import { getUserProjectList } from "@/api/project";
import { PROJECT_NAME } from "metersphere-frontend/src/utils/constants";
export default {
name: 'WorkstationDetail',
name: "WorkstationDetail",
components: {
MsMainContainer,
MsContainer,
@ -229,7 +257,7 @@ export default {
ApiCaseTableList,
MsTabButton,
StatusTapButton,
MxVersionSelect
MxVersionSelect,
},
watch: {
tableKey() {
@ -239,44 +267,44 @@ export default {
this.changeTableByState();
},
currentTodo() {
this.activeStatus = 'left'
this.activeStatus = "left";
},
currentTodoName() {
this.$nextTick(function () {
this.$refs.tableHeader.setActiveIndex(this.currentTodoName);
this.rushTableNode(this.currentTodoName)
})
}
this.rushTableNode(this.currentTodoName);
});
},
},
data() {
return {
projectId: '',
tableKey: '',
currentTodo: 'track_case',
projectId: "",
tableKey: "",
currentTodo: "track_case",
condition: {},
custom_num: false,
currentProtocol: 'HTTP',
currentProtocol: "HTTP",
activeTab: "api",
apiTabs: [{
title: this.$t('api_test.definition.api_title'),
name: 'default',
apiTabs: [
{
title: this.$t("api_test.definition.api_title"),
name: "default",
type: "list",
closable: false
}],
apiDefaultTab: 'default',
closable: false,
},
],
apiDefaultTab: "default",
selectCase: {},
userId: getCurrentUser().id,
currentProjectId: '',
activeDom: 'left',
activeStatus: '',
currentProjectId: "",
activeDom: "left",
activeStatus: "",
currentVersion: null,
searchArray: [],
userStore: {}
}
userStore: {},
};
},
inject: [
'reloadTopMenus'
],
inject: ["reloadTopMenus"],
computed: {
queryDataType: function () {
let routeParam = this.$route.params.dataType;
@ -288,18 +316,23 @@ export default {
methods: {
reloadPage: function () {
// todo refactor permission check
let redirectUrl = sessionStorage.getItem('redirectUrl');
let redirectUrl = sessionStorage.getItem("redirectUrl");
let copyRedirectUrl = redirectUrl;
if (!copyRedirectUrl) {
this.$router.push("/");
this.reload();
return;
}
if (copyRedirectUrl.startsWith("/track") || copyRedirectUrl.startsWith("/performance")
|| copyRedirectUrl.startsWith("/api") || copyRedirectUrl.startsWith("/ui") || copyRedirectUrl.startsWith("/workstation")) {
if (
copyRedirectUrl.startsWith("/track") ||
copyRedirectUrl.startsWith("/performance") ||
copyRedirectUrl.startsWith("/api") ||
copyRedirectUrl.startsWith("/ui") ||
copyRedirectUrl.startsWith("/workstation")
) {
//
copyRedirectUrl = getDefaultSecondLevelMenu(copyRedirectUrl);
if (copyRedirectUrl !== '/') {
if (copyRedirectUrl !== "/") {
this.$router.push(copyRedirectUrl);
this.reloadTopMenus();
this.reload();
@ -307,13 +340,24 @@ export default {
}
}
//
let projectPermission = hasPermissions('PROJECT_USER:READ', 'PROJECT_ENVIRONMENT:READ', 'PROJECT_OPERATING_LOG:READ', 'PROJECT_FILE:READ+JAR', 'PROJECT_FILE:READ+FILE', 'PROJECT_CUSTOM_CODE:READ');
let uiPermission = hasPermissions('PROJECT_UI_ELEMENT:READ', 'PROJECT_UI_SCENARIO:READ', 'PROJECT_UI_REPORT:READ');
let projectPermission = hasPermissions(
"PROJECT_USER:READ",
"PROJECT_ENVIRONMENT:READ",
"PROJECT_OPERATING_LOG:READ",
"PROJECT_FILE:READ+JAR",
"PROJECT_FILE:READ+FILE",
"PROJECT_CUSTOM_CODE:READ"
);
let uiPermission = hasPermissions(
"PROJECT_UI_ELEMENT:READ",
"PROJECT_UI_SCENARIO:READ",
"PROJECT_UI_REPORT:READ"
);
let redirectMap = {
project: projectPermission,
ui: uiPermission,
};
let locations = redirectUrl.split('/');
let locations = redirectUrl.split("/");
if (locations.length > 2 && !redirectMap[locations[1]]) {
let v = true;
for (const k in redirectMap) {
@ -338,9 +382,9 @@ export default {
}
const loading = fullScreenLoading(this);
switchProject({ id: this.userId, lastProjectId: projectId })
.then(response => {
.then((response) => {
this.userStore.switchProject(response);
this.$EventBus.$emit('projectChange');
this.$EventBus.$emit("projectChange");
this.changeProjectName(projectId);
//
this.reloadPage();
@ -352,7 +396,7 @@ export default {
},
changeProjectName(projectId) {
if (projectId) {
let project = this.searchArray.filter(p => p.id === projectId);
let project = this.searchArray.filter((p) => p.id === projectId);
if (project.length > 0) {
sessionStorage.setItem(PROJECT_NAME, project[0].name);
}
@ -362,34 +406,38 @@ export default {
this.tableKey = tableKey;
},
changeTableByState() {
if (this.currentTodo === 'api_automation' && this.$refs.automationTableList) {
if (this.activeStatus === 'left') {
this.$refs.automationTableList.changeTabState('finish')
if (
this.currentTodo === "api_automation" &&
this.$refs.automationTableList
) {
if (this.activeStatus === "left") {
this.$refs.automationTableList.changeTabState("finish");
} else {
this.$refs.automationTableList.changeTabState('update')
this.$refs.automationTableList.changeTabState("update");
}
}
if (this.currentTodo === 'api_case' && this.$refs.apiCaseTableList) {
if (this.activeStatus === 'left') {
this.$refs.apiCaseTableList.changeTabState('finish')
if (this.currentTodo === "api_case" && this.$refs.apiCaseTableList) {
if (this.activeStatus === "left") {
this.$refs.apiCaseTableList.changeTabState("finish");
} else {
this.$refs.apiCaseTableList.changeTabState('update')
this.$refs.apiCaseTableList.changeTabState("update");
}
}
if (this.currentTodo === 'api_definition' && this.$refs.apiDefinitionTableList) {
if (this.activeStatus === 'left') {
this.$refs.apiDefinitionTableList.changeTabState("finish")
if (
this.currentTodo === "api_definition" &&
this.$refs.apiDefinitionTableList
) {
if (this.activeStatus === "left") {
this.$refs.apiDefinitionTableList.changeTabState("finish");
} else {
this.$refs.apiDefinitionTableList.changeTabState("update")
this.$refs.apiDefinitionTableList.changeTabState("update");
}
}
},
getTableData() {
this.currentTodo = this.tableKey
},
refresh() {
this.currentTodo = this.tableKey;
},
refresh() {},
setCondition(data) {
this.condition = data;
},
@ -419,18 +467,19 @@ export default {
for (let index in this.apiTabs) {
let tab = this.apiTabs[index];
if (tab.name === this.apiDefaultTab) {
tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
tab.title =
this.$t("api_test.definition.request.edit_api") + "-" + data.name;
break;
}
}
},
handleTabsEdit(targetName, action, api) {
if (!this.projectId) {
this.$warning(this.$t('commons.check_project_tip'));
this.$warning(this.$t("commons.check_project_tip"));
return;
}
if (targetName === undefined || targetName === null) {
targetName = this.$t('api_test.definition.request.title');
targetName = this.$t("api_test.definition.request.title");
}
let newTabName = getUUID();
this.apiTabs.push({
@ -446,16 +495,20 @@ export default {
this.apiDefaultTab = newTabName;
},
updateActiveDom(activeDom) {
if (activeDom === 'right') {
this.$alert(this.$t('commons.function_planning'), this.$t('commons.dash_board'), {
confirmButtonText: '确定',
callback: action => {
if (activeDom === "right") {
this.$alert(
this.$t("commons.function_planning"),
this.$t("commons.dash_board"),
{
confirmButtonText: "确定",
callback: (action) => {
/*this.$message({
type: 'info',
message: `action: ${ action }`
});*/
},
}
});
);
}
this.activeDom = activeDom;
},
@ -463,7 +516,7 @@ export default {
this.activeStatus = activeStatus;
},
setCurrentProtocol(protocol) {
this.currentProtocol = protocol
this.currentProtocol = protocol;
},
changeVersion(currentVersion) {
this.currentVersion = currentVersion || null;
@ -471,16 +524,18 @@ export default {
init() {
let data = {
userId: getCurrentUserId(),
workspaceId: getCurrentWorkspaceId()
workspaceId: getCurrentWorkspaceId(),
};
this.loading = true;
getUserProjectList(data)
.then(response => {
getUserProjectList(data).then((response) => {
this.searchArray = response.data;
let projectId = getCurrentProjectID();
if (projectId) {
// projectId ;
if (this.searchArray.length > 0 && this.searchArray.map(p => p.id).indexOf(projectId) === -1) {
if (
this.searchArray.length > 0 &&
this.searchArray.map((p) => p.id).indexOf(projectId) === -1
) {
this.change(this.items[0].id);
}
} else {
@ -493,23 +548,23 @@ export default {
},
setDefaultCurrentTodo() {
// TABTAB
if (hasPermissions('PROJECT_TRACK_CASE:READ')) {
this.currentTodo = 'track_case';
} else if (hasPermissions('PROJECT_TRACK_PLAN:READ')) {
this.currentTodo = 'track_plan';
} else if (hasPermissions('PROJECT_TRACK_REVIEW:READ')) {
this.currentTodo = 'track_review';
} else if (hasPermissions('PROJECT_TRACK_ISSUE:READ')) {
this.currentTodo = 'track_issue';
} else if (hasPermissions('PROJECT_API_DEFINITION:READ')) {
this.currentTodo = 'api_definition';
} else if (hasPermissions('PROJECT_API_SCENARIO:READ')) {
this.currentTodo = 'api_automation';
} else if (hasPermissions('PROJECT_PERFORMANCE_TEST:READ')) {
this.currentTodo = 'performance';
}
if (hasPermissions("PROJECT_TRACK_CASE:READ")) {
this.currentTodo = "track_case";
} else if (hasPermissions("PROJECT_TRACK_PLAN:READ")) {
this.currentTodo = "track_plan";
} else if (hasPermissions("PROJECT_TRACK_REVIEW:READ")) {
this.currentTodo = "track_review";
} else if (hasPermissions("PROJECT_TRACK_ISSUE:READ")) {
this.currentTodo = "track_issue";
} else if (hasPermissions("PROJECT_API_DEFINITION:READ")) {
this.currentTodo = "api_definition";
} else if (hasPermissions("PROJECT_API_SCENARIO:READ")) {
this.currentTodo = "api_automation";
} else if (hasPermissions("PROJECT_PERFORMANCE_TEST:READ")) {
this.currentTodo = "performance";
}
},
},
props: {
isFocus: {
type: Boolean,
@ -525,24 +580,24 @@ export default {
},
currentTodoName: {
type: String,
default: 'track_case',
}
default: "track_case",
},
},
mounted() {
this.$nextTick(function () {
this.$refs.tableHeader.setActiveIndex(this.currentTodoName);
this.rushTableNode(this.currentTodoName)
})
this.activeStatus = 'left'
this.rushTableNode(this.currentTodoName);
});
this.activeStatus = "left";
if (this.isUpcoming === true) {
if (this.currentTodo === 'api_automation') {
this.$refs.automationTableList.changeTabState('finish')
if (this.currentTodo === "api_automation") {
this.$refs.automationTableList.changeTabState("finish");
}
if (this.currentTodo === 'api_case') {
this.$refs.apiCaseTableList.changeTabState('finish')
if (this.currentTodo === "api_case") {
this.$refs.apiCaseTableList.changeTabState("finish");
}
if (this.currentTodo === 'api_definition') {
this.$refs.apiDefinitionTableList.changeTabState('finish')
if (this.currentTodo === "api_definition") {
this.$refs.apiDefinitionTableList.changeTabState("finish");
}
}
},
@ -551,7 +606,7 @@ export default {
this.init();
this.userStore = useUserStore();
},
}
};
</script>
<style scoped>
.workstation-card {

View File

@ -2,35 +2,71 @@
<div>
<el-card class="table-card" v-loading="loading">
<template v-slot:header>
<ms-table-header :create-tip="btnTips" :condition.sync="condition" :show-create="!readOnly"
@search="search" @create="createEnvironment" :create-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE_GROUP']">
<ms-table-header
:create-tip="btnTips"
:condition.sync="condition"
:show-create="!readOnly"
@search="search"
@create="createEnvironment"
:create-permission="[
'WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE_GROUP',
]"
>
</ms-table-header>
</template>
<el-table :data="environmentGroupList"
style="width: 100%" ref="table"
<el-table
:data="environmentGroupList"
style="width: 100%"
ref="table"
row-key="id"
@expand-change="expandChange"
:height="screenHeight">
:height="screenHeight"
>
<el-table-column type="expand" prop="id">
<template v-slot:default="scope">
<environment-group-row :env-group-id="scope.row.id" ref="environmentGroupRow"
<environment-group-row
:env-group-id="scope.row.id"
ref="environmentGroupRow"
:read-only="!scope.row.readOnly"
style="overflow-x:hidden; overflow-y: auto; height: 180px;"/>
style="overflow-x: hidden; overflow-y: auto; height: 180px"
/>
</template>
</el-table-column>
<el-table-column :label="$t('commons.name')" prop="name" show-overflow-tooltip min-width="200">
<el-table-column
:label="$t('commons.name')"
prop="name"
show-overflow-tooltip
min-width="200"
>
<template v-slot:default="scope">
<span @click.stop v-if="scope.row.showNameInput">
<el-input size="mini" v-model="scope.row.name" class="name-input" @blur="updateGroupName(scope.row)" show-word-limit
maxlength="50" :placeholder="$t('commons.input_name')" ref="nameEdit"/>
<el-input
size="mini"
v-model="scope.row.name"
class="name-input"
@blur="updateGroupName(scope.row)"
show-word-limit
maxlength="50"
:placeholder="$t('commons.input_name')"
ref="nameEdit"
/>
</span>
<span v-else>
<span>{{ scope.row.name }}</span>
<i class="el-icon-edit" style="cursor:pointer;margin-left: 4px;" @click="editName(scope.row)" v-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP']"/>
<i
class="el-icon-edit"
style="cursor: pointer; margin-left: 4px"
@click="editName(scope.row)"
v-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP']"
/>
</span>
</template>
</el-table-column>
<el-table-column prop="createTime" :label="$t('commons.create_time')" min-width="200">
<el-table-column
prop="createTime"
:label="$t('commons.create_time')"
min-width="200"
>
<template v-slot:default="scope">
<span>{{ scope.row.createTime | datetimeFormat }}</span>
</template>
@ -38,27 +74,46 @@
<el-table-column :label="$t('commons.operating')" width="350">
<template v-slot:default="scope">
<div v-if="!readOnly">
<ms-table-operator @editClick="editEnvironment(scope.row)"
:edit-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP']"
:delete-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE_GROUP']"
@deleteClick="deleteEnvironment(scope.row)">
<ms-table-operator
@editClick="editEnvironment(scope.row)"
:edit-permission="[
'WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP',
]"
:delete-permission="[
'WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE_GROUP',
]"
@deleteClick="deleteEnvironment(scope.row)"
>
<template v-slot:middle>
<ms-table-operator-button :tip="$t('commons.copy')" @exec="copyEnvironment(scope.row)"
v-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY_GROUP']"
icon="el-icon-document-copy" type="info"/>
<ms-table-operator-button
:tip="$t('commons.copy')"
@exec="copyEnvironment(scope.row)"
v-permission="[
'WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY_GROUP',
]"
icon="el-icon-document-copy"
type="info"
/>
</template>
</ms-table-operator>
</div>
</template>
</el-table-column>
</el-table>
<ms-table-pagination :change="init" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
<ms-table-pagination
:change="init"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"
/>
</el-card>
<edit-environment-group ref="editEnvironmentGroup" @refresh="init" />
<ms-delete-confirm :title="$t('workspace.env_group.delete')" @delete="_handleDelete" ref="deleteConfirm"/>
<ms-delete-confirm
:title="$t('workspace.env_group.delete')"
@delete="_handleDelete"
ref="deleteConfirm"
/>
</div>
</template>
@ -78,7 +133,7 @@ import {
copyEnvironmentGroup,
delEnvironmentById,
getEnvironmentGroupPages,
modifyEnvironmentGroup
modifyEnvironmentGroup,
} from "@/api/environment";
export default {
@ -94,34 +149,34 @@ export default {
MsTableButton,
MsTableHeader,
EnvironmentGroupRow,
MsDeleteConfirm
MsDeleteConfirm,
},
data() {
return {
btnTips: this.$t('workspace.env_group.create'),
envGroupId: '',
btnTips: this.$t("workspace.env_group.create"),
envGroupId: "",
condition: {},
environmentGroupList: [],
loading: false,
currentPage: 1,
pageSize: 10,
total: 0,
showNameInput: false
}
showNameInput: false,
};
},
props: {
screenHeight: {
type: String,
default() {
return 'calc(100vh - 170px)';
}
return "calc(100vh - 170px)";
},
},
readOnly: {
type: Boolean,
default() {
return false;
}
}
},
},
},
created() {
this.init();
@ -131,7 +186,11 @@ export default {
},
methods: {
init() {
this.loading = getEnvironmentGroupPages(this.currentPage, this.pageSize, this.condition).then(res => {
this.loading = getEnvironmentGroupPages(
this.currentPage,
this.pageSize,
this.condition
).then((res) => {
let data = res.data;
let { listObject, itemCount } = data;
this.environmentGroupList = listObject;
@ -147,7 +206,7 @@ export default {
},
deleteEnvironment(row) {
if (row.system) {
this.$warning(this.$t('group.admin_not_allow_delete'));
this.$warning(this.$t("group.admin_not_allow_delete"));
return;
}
this.$refs.deleteConfirm.open(row);
@ -165,7 +224,7 @@ export default {
},
_handleDelete(row) {
delEnvironmentById(row.id).then(() => {
this.$success(this.$t('commons.delete_success'));
this.$success(this.$t("commons.delete_success"));
this.init();
});
},
@ -188,17 +247,15 @@ export default {
let param = {
id: row.id,
name: row.name,
workspaceId: row.workspaceId
workspaceId: row.workspaceId,
};
modifyEnvironmentGroup(param).then(() => {
this.$success(this.$t("commons.modify_success"));
this.init();
});
}
},
}
},
};
</script>
<style scoped>
</style>
<style scoped></style>