style(接口测试): 优化接口用例编辑抽屉的布局
--story=1011683 --user=宋天阳 固定接口case执行按钮行 https://www.tapd.cn/55049933/s/1360395
This commit is contained in:
song-tianyang
建国
parent
d805b50884
commit
bc5dc86247
|
|
@ -1,207 +1,214 @@
|
|||
<template>
|
||||
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase, $event)" v-loading="saveLoading">
|
||||
<div @click="active(apiCase)" v-if="type !== 'detail'">
|
||||
<el-row>
|
||||
<el-col :span="api.protocol === 'HTTP' ? 4 : 8" v-loading="loading && !(apiCase.active || type === 'detail')">
|
||||
<span @click.stop>
|
||||
<i class="icon el-icon-arrow-right" :class="{ 'is-active': apiCase.active }" @click="active(apiCase)" />
|
||||
<el-input
|
||||
v-if="!apiCase.id || isShowInput"
|
||||
size="small"
|
||||
v-model="apiCase.name"
|
||||
:name="index"
|
||||
:key="index"
|
||||
class="ms-api-header-select"
|
||||
style="width: 180px"
|
||||
:readonly="!hasPermission('PROJECT_API_DEFINITION:READ+EDIT_CASE')"
|
||||
:placeholder="$t('commons.input_name')"
|
||||
ref="nameEdit" />
|
||||
<span v-else>
|
||||
<el-tooltip :content="apiCase.id ? apiCase.name : ''" placement="top">
|
||||
<span>{{ apiCase.id ? apiCase.name : '' | ellipsis }}</span>
|
||||
</el-tooltip>
|
||||
|
||||
<i class="el-icon-edit" style="cursor: pointer" @click="showInput(apiCase)" />
|
||||
</span>
|
||||
|
||||
<el-link type="primary" style="margin-left: 10px" @click="openHis(apiCase)" v-if="apiCase.id">{{
|
||||
$t('operating_log.change_history')
|
||||
}}</el-link>
|
||||
</span>
|
||||
<div v-if="apiCase.id" style="color: #999999; font-size: 12px">
|
||||
<span style="margin-left: 10px">
|
||||
{{ apiCase.updateTime | datetimeFormat }}
|
||||
{{ apiCase.updateUser }}
|
||||
{{ $t('api_test.definition.request.update_info') }}
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="apiCase.priority"
|
||||
class="ms-api-select"
|
||||
@change="changePriority(apiCase)"
|
||||
:disabled="readonly">
|
||||
<el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="api.protocol === 'HTTP' ? 4 : 0">
|
||||
<span v-if="api.protocol === 'HTTP'">
|
||||
<el-tag
|
||||
size="mini"
|
||||
:style="{
|
||||
'background-color': getColor(true, apiCase.request.method),
|
||||
border: getColor(true, apiCase.request.method),
|
||||
}"
|
||||
class="api-el-tag">
|
||||
{{ apiCase.request.method }}
|
||||
</el-tag>
|
||||
<el-tooltip :content="apiCase.request.path">
|
||||
<span class="ms-col-name">{{ apiCase.request.path }}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-container>
|
||||
<el-header style="margin-bottom: 20px">
|
||||
<div @click="active(apiCase)" v-if="type !== 'detail'" ref="elementHeader">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="apiCase.caseStatus"
|
||||
style="margin-right: 5px"
|
||||
@change="saveTestCase(apiCase, true)"
|
||||
:disabled="readonly">
|
||||
<el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="tag-item" @click.stop>
|
||||
<el-tooltip
|
||||
:content="$t('commons.follow')"
|
||||
placement="bottom"
|
||||
effect="dark"
|
||||
v-if="!showFollow"
|
||||
:disabled="true">
|
||||
<i
|
||||
class="el-icon-star-off"
|
||||
style="
|
||||
color: var(--primary_color);
|
||||
font-size: 25px;
|
||||
margin-top: 2px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="saveFollow" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:content="$t('commons.cancel')"
|
||||
placement="bottom"
|
||||
effect="dark"
|
||||
v-if="showFollow"
|
||||
:disabled="true">
|
||||
<i
|
||||
class="el-icon-star-on"
|
||||
style="color: #783987; font-size: 28px; margin-top: 2px; margin-right: 15px; cursor: pointer"
|
||||
@click="saveFollow"
|
||||
v-if="showFollow" />
|
||||
</el-tooltip>
|
||||
<el-col
|
||||
:span="api.protocol === 'HTTP' ? 4 : 8"
|
||||
v-loading="loading && !(apiCase.active || type === 'detail')">
|
||||
<span @click.stop>
|
||||
<i class="icon el-icon-arrow-right" :class="{ 'is-active': apiCase.active }" @click="active(apiCase)" />
|
||||
<el-input
|
||||
v-if="!apiCase.id || isShowInput"
|
||||
size="small"
|
||||
v-model="apiCase.name"
|
||||
:name="index"
|
||||
:key="index"
|
||||
class="ms-api-header-select"
|
||||
style="width: 180px"
|
||||
:readonly="!hasPermission('PROJECT_API_DEFINITION:READ+EDIT_CASE')"
|
||||
:placeholder="$t('commons.input_name')"
|
||||
ref="nameEdit" />
|
||||
<span v-else>
|
||||
<el-tooltip :content="apiCase.id ? apiCase.name : ''" placement="top">
|
||||
<span>{{ apiCase.id ? apiCase.name : '' | ellipsis }}</span>
|
||||
</el-tooltip>
|
||||
|
||||
<i class="el-icon-edit" style="cursor: pointer" @click="showInput(apiCase)" />
|
||||
</span>
|
||||
|
||||
<el-link type="primary" style="margin-left: 10px" @click="openHis(apiCase)" v-if="apiCase.id">{{
|
||||
$t('operating_log.change_history')
|
||||
}}</el-link>
|
||||
</span>
|
||||
<div v-if="apiCase.id" style="color: #999999; font-size: 12px">
|
||||
<span style="margin-left: 10px">
|
||||
{{ apiCase.updateTime | datetimeFormat }}
|
||||
{{ apiCase.updateUser }}
|
||||
{{ $t('api_test.definition.request.update_info') }}
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 5px">
|
||||
<div class="tag-item" @click.stop>
|
||||
<ms-input-tag
|
||||
:currentScenario="apiCase"
|
||||
ref="tag"
|
||||
@keyup.enter.native="saveTestCase(apiCase, true)"
|
||||
:read-only="readonly" />
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="3">
|
||||
<span @click.stop v-if="!loaded">
|
||||
<ms-tip-button
|
||||
@click="singleRun(apiCase)"
|
||||
:tip="$t('api_test.run')"
|
||||
icon="el-icon-video-play"
|
||||
v-permission="['PROJECT_API_DEFINITION:READ+RUN']"
|
||||
class="run-button"
|
||||
size="mini"
|
||||
:disabled="!apiCase.id || loaded"
|
||||
circle
|
||||
v-if="!loading" />
|
||||
<el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
|
||||
<el-button
|
||||
:disabled="!apiCase.id"
|
||||
@click.once="stop(apiCase)"
|
||||
<el-col :span="2">
|
||||
<el-select
|
||||
size="mini"
|
||||
style="color: white; padding: 0; width: 28px; height: 28px"
|
||||
class="stop-btn"
|
||||
circle>
|
||||
<div style="transform: scale(0.72)">
|
||||
<span style="margin-left: -3.5px; font-weight: bold">STOP</span>
|
||||
v-model="apiCase.priority"
|
||||
class="ms-api-select"
|
||||
@change="changePriority(apiCase)"
|
||||
:disabled="readonly">
|
||||
<el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="api.protocol === 'HTTP' ? 4 : 0">
|
||||
<span v-if="api.protocol === 'HTTP'">
|
||||
<el-tag
|
||||
size="mini"
|
||||
:style="{
|
||||
'background-color': getColor(true, apiCase.request.method),
|
||||
border: getColor(true, apiCase.request.method),
|
||||
}"
|
||||
class="api-el-tag">
|
||||
{{ apiCase.request.method }}
|
||||
</el-tag>
|
||||
<el-tooltip :content="apiCase.request.path">
|
||||
<span class="ms-col-name">{{ apiCase.request.path }}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="apiCase.caseStatus"
|
||||
style="margin-right: 5px"
|
||||
@change="saveTestCase(apiCase, true)"
|
||||
:disabled="readonly">
|
||||
<el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="tag-item" @click.stop>
|
||||
<el-tooltip
|
||||
:content="$t('commons.follow')"
|
||||
placement="bottom"
|
||||
effect="dark"
|
||||
v-if="!showFollow"
|
||||
:disabled="true">
|
||||
<i
|
||||
class="el-icon-star-off"
|
||||
style="
|
||||
color: var(--primary_color);
|
||||
font-size: 25px;
|
||||
margin-top: 2px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="saveFollow" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:content="$t('commons.cancel')"
|
||||
placement="bottom"
|
||||
effect="dark"
|
||||
v-if="showFollow"
|
||||
:disabled="true">
|
||||
<i
|
||||
class="el-icon-star-on"
|
||||
style="color: #783987; font-size: 28px; margin-top: 2px; margin-right: 15px; cursor: pointer"
|
||||
@click="saveFollow"
|
||||
v-if="showFollow" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 5px">
|
||||
<div class="tag-item" @click.stop>
|
||||
<ms-input-tag
|
||||
:currentScenario="apiCase"
|
||||
ref="tag"
|
||||
@keyup.enter.native="saveTestCase(apiCase, true)"
|
||||
:read-only="readonly" />
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span @click.stop>
|
||||
<ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" />
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<ms-api-report-status :status="apiCase.execResult" />
|
||||
<div v-if="apiCase.id" style="color: #999999; font-size: 12px; padding: 5px">
|
||||
<span> {{ apiCase.execTime | datetimeFormat }}</span>
|
||||
{{ apiCase.updateUser }}
|
||||
<el-col :span="3">
|
||||
<span @click.stop v-if="!loaded">
|
||||
<ms-tip-button
|
||||
@click="singleRun(apiCase)"
|
||||
:tip="$t('api_test.run')"
|
||||
icon="el-icon-video-play"
|
||||
v-permission="['PROJECT_API_DEFINITION:READ+RUN']"
|
||||
class="run-button"
|
||||
size="mini"
|
||||
:disabled="!apiCase.id || loaded"
|
||||
circle
|
||||
v-if="!loading" />
|
||||
<el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
|
||||
<el-button
|
||||
:disabled="!apiCase.id"
|
||||
@click.once="stop(apiCase)"
|
||||
size="mini"
|
||||
style="color: white; padding: 0; width: 28px; height: 28px"
|
||||
class="stop-btn"
|
||||
circle>
|
||||
<div style="transform: scale(0.72)">
|
||||
<span style="margin-left: -3.5px; font-weight: bold">STOP</span>
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span @click.stop>
|
||||
<ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" />
|
||||
</span>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<ms-api-report-status :status="apiCase.execResult" />
|
||||
<div v-if="apiCase.id" style="color: #999999; font-size: 12px; padding: 5px">
|
||||
<span> {{ apiCase.execTime | datetimeFormat }}</span>
|
||||
{{ apiCase.updateUser }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-link style="float: right" type="primary" @click.stop @click="showHistory(apiCase.id)">
|
||||
{{ $t('commons.execute_history') }}
|
||||
</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main :style="{ height: componentHeight + 'px' }">
|
||||
<!-- 请求参数-->
|
||||
<el-collapse-transition>
|
||||
<div v-if="apiCase.active || type === 'detail'" v-loading="loading">
|
||||
<el-divider></el-divider>
|
||||
<p class="tip">{{ $t('api_test.definition.request.req_param') }}</p>
|
||||
<ms-api-request-form
|
||||
:isShowEnable="true"
|
||||
:showScript="true"
|
||||
:headers="apiCase.request.headers"
|
||||
:response="apiCase.responseData"
|
||||
:request="apiCase.request"
|
||||
:case-id="apiCase.apiDefinitionId"
|
||||
v-if="api.protocol === 'HTTP'" />
|
||||
<tcp-format-parameters
|
||||
:showScript="true"
|
||||
:show-pre-script="true"
|
||||
:request="apiCase.request"
|
||||
:response="apiCase.responseData"
|
||||
v-if="api.method === 'TCP' || api.method === 'ESB'" />
|
||||
<ms-sql-basis-parameters
|
||||
:showScript="true"
|
||||
:request="apiCase.request"
|
||||
:response="apiCase.responseData"
|
||||
v-if="api.method === 'SQL'" />
|
||||
<ms-dubbo-basis-parameters
|
||||
:showScript="true"
|
||||
:request="apiCase.request"
|
||||
:response="apiCase.responseData"
|
||||
v-if="api.protocol === 'DUBBO'" />
|
||||
<!-- HTTP 请求返回数据 -->
|
||||
<p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
|
||||
<api-response-component
|
||||
:currentProtocol="apiCase.request.protocol"
|
||||
:api-item="apiCase"
|
||||
:result="apiCase.responseData" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-link style="float: right" type="primary" @click.stop @click="showHistory(apiCase.id)">
|
||||
{{ $t('commons.execute_history') }}
|
||||
</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 请求参数-->
|
||||
<el-collapse-transition>
|
||||
<div v-if="apiCase.active || type === 'detail'" v-loading="loading">
|
||||
<el-divider></el-divider>
|
||||
<p class="tip">{{ $t('api_test.definition.request.req_param') }}</p>
|
||||
<ms-api-request-form
|
||||
:isShowEnable="true"
|
||||
:showScript="true"
|
||||
:headers="apiCase.request.headers"
|
||||
:response="apiCase.responseData"
|
||||
:request="apiCase.request"
|
||||
:case-id="apiCase.apiDefinitionId"
|
||||
v-if="api.protocol === 'HTTP'" />
|
||||
<tcp-format-parameters
|
||||
:showScript="true"
|
||||
:show-pre-script="true"
|
||||
:request="apiCase.request"
|
||||
:response="apiCase.responseData"
|
||||
v-if="api.method === 'TCP' || api.method === 'ESB'" />
|
||||
<ms-sql-basis-parameters
|
||||
:showScript="true"
|
||||
:request="apiCase.request"
|
||||
:response="apiCase.responseData"
|
||||
v-if="api.method === 'SQL'" />
|
||||
<ms-dubbo-basis-parameters
|
||||
:showScript="true"
|
||||
:request="apiCase.request"
|
||||
:response="apiCase.responseData"
|
||||
v-if="api.protocol === 'DUBBO'" />
|
||||
<!-- HTTP 请求返回数据 -->
|
||||
<p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
|
||||
<api-response-component
|
||||
:currentProtocol="apiCase.request.protocol"
|
||||
:api-item="apiCase"
|
||||
:result="apiCase.responseData" />
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</el-collapse-transition>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<ms-change-history ref="changeHistory" />
|
||||
<el-dialog
|
||||
:visible.sync="syncCaseVisible"
|
||||
|
|
@ -326,6 +333,7 @@ export default {
|
|||
checkedCases: new Set(),
|
||||
visible: false,
|
||||
condition: {},
|
||||
componentHeight: document.body.clientHeight - 170,
|
||||
responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
|
||||
isShowInput: false,
|
||||
methodColorMap: new Map(API_METHOD_COLOUR),
|
||||
|
|
@ -367,6 +375,7 @@ export default {
|
|||
return 0;
|
||||
},
|
||||
},
|
||||
caseItemHeight: Number,
|
||||
api: {
|
||||
type: Object,
|
||||
default() {
|
||||
|
|
@ -388,6 +397,7 @@ export default {
|
|||
this.$EventBus.$off('showXpackCaseSet');
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', this.resizeTable, false);
|
||||
store.scenarioEnvMap = undefined;
|
||||
if (this.apiCase.request && this.apiCase.request.hashTree && this.apiCase.request.hashTree.length > 0) {
|
||||
let index = this.apiCase.request.hashTree.findIndex((item) => item.type === 'Assertions');
|
||||
|
|
@ -421,8 +431,12 @@ export default {
|
|||
});
|
||||
}
|
||||
this.reload();
|
||||
this.resizeTable();
|
||||
},
|
||||
watch: {
|
||||
caseItemHeight() {
|
||||
this.changeScreen(this.caseItemHeight);
|
||||
},
|
||||
'apiCase.name': {
|
||||
handler(v) {
|
||||
this.saveStatus();
|
||||
|
|
@ -477,6 +491,25 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
changeScreen(height) {
|
||||
let headerHeight = 100 + this.$refs.elementHeader.clientHeight;
|
||||
if (height > headerHeight) {
|
||||
this.componentHeight = height - headerHeight;
|
||||
} else {
|
||||
this.componentHeight = headerHeight;
|
||||
}
|
||||
},
|
||||
resizeTable() {
|
||||
if (this.$refs.elementHeader) {
|
||||
let headerHeight = 100 + this.$refs.elementHeader.clientHeight;
|
||||
let documentClientHeight = document.body.clientHeight;
|
||||
if (documentClientHeight > headerHeight) {
|
||||
this.componentHeight = documentClientHeight - headerHeight;
|
||||
} else {
|
||||
this.componentHeight = headerHeight;
|
||||
}
|
||||
}
|
||||
},
|
||||
setOriginal(scenarioDefinition) {
|
||||
for (let i in scenarioDefinition) {
|
||||
let typeArray = ['JDBCPostProcessor', 'JDBCSampler', 'JDBCPreProcessor'];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<div v-if="visible">
|
||||
<ms-drawer :size="60" @close="apiCaseClose" direction="bottom" ref="testCaseDrawer" class="ms-drawer-case-header">
|
||||
<ms-drawer
|
||||
:size="60"
|
||||
@close="apiCaseClose"
|
||||
@changeScreen="changeScreen"
|
||||
direction="bottom"
|
||||
ref="testCaseDrawer"
|
||||
class="ms-drawer-case-header">
|
||||
<template v-slot:header>
|
||||
<api-case-header
|
||||
:api="api"
|
||||
|
|
@ -32,6 +38,7 @@
|
|||
@showHistory="showHistory"
|
||||
@reLoadCase="reLoadCase"
|
||||
:environment="environment"
|
||||
:case-item-height="caseItemHeight"
|
||||
@setSelectedCaseId="setSelectedCaseId"
|
||||
:is-case-edit="isCaseEdit"
|
||||
:api="api"
|
||||
|
|
@ -60,7 +67,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {apiTestCaseList, editApiCaseByParam, getCaseById, getPassRateById} from '@/api/api-test-case';
|
||||
import { apiTestCaseList, editApiCaseByParam, getCaseById, getPassRateById } from '@/api/api-test-case';
|
||||
import { getMaintainer } from '@/api/project';
|
||||
import ApiCaseHeader from './ApiCaseHeader';
|
||||
import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
|
||||
|
|
@ -105,6 +112,7 @@ export default {
|
|||
apiCaseList: [],
|
||||
batchLoadingIds: [],
|
||||
singleLoading: false,
|
||||
caseItemHeight: 100,
|
||||
singleRunId: '',
|
||||
runData: [],
|
||||
reportId: '',
|
||||
|
|
@ -155,6 +163,9 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
changeScreen(height) {
|
||||
this.caseItemHeight = height;
|
||||
},
|
||||
getMaintainerOptions() {
|
||||
getMaintainer().then((response) => {
|
||||
this.maintainerOptions = response.data;
|
||||
|
|
@ -432,8 +443,8 @@ export default {
|
|||
this.apiCaseList[0].responseData = data;
|
||||
this.apiCaseList[0].passRate = passRate;
|
||||
this.$refs.apiCaseItem.runLoading = false;
|
||||
store.currentApiCase = {refresh: true, id: data.id, status: status, passRate: passRate};
|
||||
})
|
||||
store.currentApiCase = { refresh: true, id: data.id, status: status, passRate: passRate };
|
||||
});
|
||||
}
|
||||
},
|
||||
errorRefresh() {
|
||||
|
|
@ -677,6 +688,7 @@ export default {
|
|||
.ms-drawer-case-header :deep(.ms-drawer-header) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,31 @@
|
|||
<template>
|
||||
<div v-if="visible" id="ms-drawer" class="ms-drawer" :class="directionStyle"
|
||||
:style="{width: w + 'px', height: h + 'px'}" ref="msDrawer">
|
||||
<div
|
||||
v-if="visible"
|
||||
id="ms-drawer"
|
||||
class="ms-drawer"
|
||||
:class="directionStyle"
|
||||
:style="{ width: w + 'px', height: h + 'px' }"
|
||||
ref="msDrawer"
|
||||
>
|
||||
<ms-bottom2-top-drag-bar v-if="direction == 'bottom'" />
|
||||
|
||||
<ms-bottom2-top-drag-bar v-if="direction == 'bottom'"/>
|
||||
<ms-right2-left-drag-bar v-if="direction == 'right'" />
|
||||
|
||||
<ms-right2-left-drag-bar v-if="direction == 'right'"/>
|
||||
|
||||
<ms-right2-left-drag-bar v-if="direction == 'default'"/>
|
||||
<ms-right2-left-drag-bar v-if="direction == 'default'" />
|
||||
|
||||
<div class="ms-drawer-header">
|
||||
<slot name="header"></slot>
|
||||
<i v-if="isShowClose" class="el-icon-close" @click="close"/>
|
||||
<ms-full-screen-button v-if="showFullScreen" :is-full-screen.sync="isFullScreen"/>
|
||||
<i v-if="isShowClose" class="el-icon-close" @click="close" />
|
||||
<ms-full-screen-button
|
||||
v-if="showFullScreen"
|
||||
:is-full-screen.sync="isFullScreen"
|
||||
/>
|
||||
</div>
|
||||
<div class="ms-drawer-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<ms-left2-right-drag-bar v-if="direction == 'left'"/>
|
||||
<ms-left2-right-drag-bar v-if="direction == 'left'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,51 +37,56 @@ import MsFullScreenButton from "./MsFullScreenButton";
|
|||
|
||||
export default {
|
||||
name: "MsDrawer",
|
||||
components: {MsFullScreenButton, MsBottom2TopDragBar, MsLeft2RightDragBar, MsRight2LeftDragBar},
|
||||
components: {
|
||||
MsFullScreenButton,
|
||||
MsBottom2TopDragBar,
|
||||
MsLeft2RightDragBar,
|
||||
MsRight2LeftDragBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
directionStyle: 'left-style',
|
||||
dragBarDirection: 'vertical',
|
||||
directionStyle: "left-style",
|
||||
dragBarDirection: "vertical",
|
||||
isFullScreen: false,
|
||||
originalW: 0,
|
||||
originalH: 0,
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
direction: {
|
||||
type: String,
|
||||
default() {
|
||||
return "left";
|
||||
}
|
||||
},
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 40;
|
||||
}
|
||||
},
|
||||
},
|
||||
showFullScreen: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
isShowClose: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
|
|
@ -81,71 +94,71 @@ export default {
|
|||
watch: {
|
||||
isFullScreen() {
|
||||
if (this.isFullScreen) {
|
||||
this.fullScreen()
|
||||
this.fullScreen();
|
||||
} else {
|
||||
this.unFullScreen();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setfullScreen() {
|
||||
if (!this.isFullScreen) {
|
||||
this.$nextTick(() => {
|
||||
this.isFullScreen = true;
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
init() {
|
||||
window.addEventListener("resize", this.listenScreenChange, false);
|
||||
// todo 其他方向待优化
|
||||
switch (this.direction) {
|
||||
case 'left':
|
||||
case "left":
|
||||
this.w = this.getWidthPercentage(this.size);
|
||||
this.h = this.getHeightPercentage(100);
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.directionStyle = 'left-style';
|
||||
this.dragBarDirection = 'horizontal';
|
||||
this.directionStyle = "left-style";
|
||||
this.dragBarDirection = "horizontal";
|
||||
break;
|
||||
case 'right':
|
||||
case "right":
|
||||
this.w = this.getWidthPercentage(this.size);
|
||||
this.h = this.getHeightPercentage(100);
|
||||
this.x = document.body.clientWidth - this.w;
|
||||
this.y = 0;
|
||||
this.directionStyle = 'right-style';
|
||||
this.dragBarDirection = 'horizontal';
|
||||
this.directionStyle = "right-style";
|
||||
this.dragBarDirection = "horizontal";
|
||||
break;
|
||||
case 'top':
|
||||
case "top":
|
||||
this.w = this.getWidthPercentage(100);
|
||||
this.h = this.getHeightPercentage(this.size);
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.directionStyle = 'top-style';
|
||||
this.dragBarDirection = 'vertical';
|
||||
this.directionStyle = "top-style";
|
||||
this.dragBarDirection = "vertical";
|
||||
break;
|
||||
case 'bottom':
|
||||
case "bottom":
|
||||
this.w = this.getWidthPercentage(100);
|
||||
this.h = this.getHeightPercentage(this.size);
|
||||
this.x = 0;
|
||||
this.y = document.body.clientHeight - this.h;
|
||||
this.directionStyle = 'bottom-style';
|
||||
this.dragBarDirection = 'vertical';
|
||||
this.directionStyle = "bottom-style";
|
||||
this.dragBarDirection = "vertical";
|
||||
break;
|
||||
default:
|
||||
this.w = this.getWidthPercentage(this.size);
|
||||
this.h = this.getHeightPercentage(100);
|
||||
this.x = document.body.clientWidth - this.w;
|
||||
this.y = 0;
|
||||
this.directionStyle = 'right-style';
|
||||
this.dragBarDirection = 'horizontal';
|
||||
this.directionStyle = "right-style";
|
||||
this.dragBarDirection = "horizontal";
|
||||
break;
|
||||
}
|
||||
},
|
||||
getWidthPercentage(per) {
|
||||
return document.body.clientWidth * per / 100.0;
|
||||
return (document.body.clientWidth * per) / 100.0;
|
||||
},
|
||||
getHeightPercentage(per) {
|
||||
return document.body.clientHeight * per / 100.0;
|
||||
return (document.body.clientHeight * per) / 100.0;
|
||||
},
|
||||
fullScreen() {
|
||||
if (this.originalW === 0) {
|
||||
|
|
@ -156,13 +169,15 @@ export default {
|
|||
}
|
||||
this.w = document.body.clientWidth;
|
||||
this.h = document.body.clientHeight;
|
||||
this.$emit("changeScreen", this.h);
|
||||
},
|
||||
unFullScreen() {
|
||||
this.w = this.originalW;
|
||||
this.h = this.originalH;
|
||||
this.$emit("changeScreen", this.h);
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.$emit("close");
|
||||
window.removeEventListener("resize", this.listenScreenChange);
|
||||
},
|
||||
listenScreenChange() {
|
||||
|
|
@ -171,16 +186,16 @@ export default {
|
|||
this.h = document.body.clientHeight;
|
||||
} else {
|
||||
switch (this.direction) {
|
||||
case 'left':
|
||||
case "left":
|
||||
this.h = document.documentElement.clientHeight;
|
||||
break;
|
||||
case 'right':
|
||||
case "right":
|
||||
this.h = document.documentElement.clientHeight;
|
||||
break;
|
||||
case 'top':
|
||||
case "top":
|
||||
this.w = document.documentElement.clientWidth;
|
||||
break;
|
||||
case 'bottom':
|
||||
case "bottom":
|
||||
this.w = document.documentElement.clientWidth;
|
||||
break;
|
||||
default:
|
||||
|
|
@ -189,18 +204,19 @@ export default {
|
|||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.ms-drawer {
|
||||
background-color: white;
|
||||
border: 1px #DCDFE6 solid;
|
||||
-webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
|
||||
border: 1px #dcdfe6 solid;
|
||||
-webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
|
||||
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
|
||||
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
|
||||
z-index: 999 !important;
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
|
|
@ -269,5 +285,4 @@ export default {
|
|||
right: 40px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue