style(接口自动化): 步骤最大化时内容过多样式调整
This commit is contained in:
fit2-zhao
parent
816cb4780c
commit
319450d701
|
|
@ -1,21 +1,23 @@
|
|||
<template>
|
||||
<el-card class="api-component">
|
||||
<el-card>
|
||||
<div class="header" @click="active(data)">
|
||||
<slot name="beforeHeaderLeft">
|
||||
<div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
|
||||
<div class="el-step__icon-inner">{{data.index}}</div>
|
||||
</div>
|
||||
<el-tag class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-tag>
|
||||
<el-tag class="ms-left-btn" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-tag>
|
||||
<el-tag size="mini" v-if="data.method">{{data.method}}</el-tag>
|
||||
</slot>
|
||||
|
||||
<span @click.stop>
|
||||
<span>
|
||||
<slot name="headerLeft">
|
||||
<i class="icon el-icon-arrow-right" :class="{'is-active': data.active}"
|
||||
@click="active(data)" v-if="data.type!='scenario' && !isMax "/>
|
||||
<el-input :draggable="draggable" v-if="isShowInput && isShowNameInput" size="mini" v-model="data.name" class="name-input"
|
||||
@blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit" :disabled="data.disabled"/>
|
||||
<span v-else>
|
||||
<span @click.stop v-if="isShowInput && isShowNameInput">
|
||||
<el-input :draggable="draggable" size="mini" v-model="data.name" class="name-input"
|
||||
@blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit" :disabled="data.disabled"/>
|
||||
</span>
|
||||
<span :class="isMax?'ms-step-name':'scenario-name'" v-else>
|
||||
{{data.name}}
|
||||
<i class="el-icon-edit" style="cursor:pointer" @click="editName" v-tester v-if="data.referenced!='REF' && !data.disabled"/>
|
||||
</span>
|
||||
|
|
@ -159,7 +161,8 @@
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.ms-left-buttion {
|
||||
.ms-left-btn {
|
||||
font-size: 13px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -173,15 +176,24 @@
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.node-title {
|
||||
.ms-step-name {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
font-size: 13px;
|
||||
margin: 0 5px;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
width: 100px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.scenario-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-step__icon {
|
||||
|
|
|
|||
|
|
@ -5,21 +5,32 @@
|
|||
<ms-aside-container>
|
||||
<!-- 场景步骤内容 -->
|
||||
<div v-loading="loading">
|
||||
<el-tree node-key="resourceId" :props="props" :data="scenarioDefinition"
|
||||
<el-tree node-key="resourceId"
|
||||
:props="props"
|
||||
:data="scenarioDefinition"
|
||||
:default-expanded-keys="expandedNode"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
@node-expand="nodeExpand"
|
||||
@node-collapse="nodeCollapse"
|
||||
:allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" v-if="!loading" draggable>
|
||||
<span class="custom-tree-node father" slot-scope="{ node, data}">
|
||||
<!-- 步骤组件-->
|
||||
<ms-component-config :isMax="true" :type="data.type" :scenario="data" :response="response" :currentScenario="currentScenario"
|
||||
:currentEnvironmentId="currentEnvironmentId" :node="node" :project-list="projectList" :env-map="projectEnvMap"
|
||||
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload" @openScenario="openScenario"/>
|
||||
</span>
|
||||
<span class="custom-tree-node father" slot-scope="{ node, data}">
|
||||
<!-- 步骤组件-->
|
||||
<ms-component-config
|
||||
:isMax="true"
|
||||
:type="data.type"
|
||||
:scenario="data"
|
||||
:response="response"
|
||||
:currentScenario="currentScenario"
|
||||
:currentEnvironmentId="currentEnvironmentId"
|
||||
:node="node"
|
||||
:project-list="projectList"
|
||||
:env-map="projectEnvMap"
|
||||
@remove="remove" @copyRow="copyRow"
|
||||
@suggestClick="suggestClick"
|
||||
@refReload="refReload" @openScenario="openScenario"/>
|
||||
</span>
|
||||
</el-tree>
|
||||
|
||||
<div @click="fabClick">
|
||||
<vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
|
||||
:click-auto-close="false">
|
||||
|
|
@ -41,39 +52,39 @@
|
|||
|
||||
<ms-main-container>
|
||||
<!-- 第一层当前节点内容-->
|
||||
<ms-component-config :isMax="false"
|
||||
:showBtn="false"
|
||||
:type="selectedTreeNode.type"
|
||||
:scenario="selectedTreeNode"
|
||||
:response="response"
|
||||
:currentScenario="currentScenario"
|
||||
:currentEnvironmentId="currentEnvironmentId"
|
||||
:node="selectedNode"
|
||||
:project-list="projectList"
|
||||
:env-map="projectEnvMap"
|
||||
:draggable="false"
|
||||
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload" @openScenario="openScenario"
|
||||
v-if="selectedTreeNode && selectedNode"/>
|
||||
<ms-component-config
|
||||
:isMax="false"
|
||||
:showBtn="false"
|
||||
:type="selectedTreeNode.type"
|
||||
:scenario="selectedTreeNode"
|
||||
:response="response"
|
||||
:currentScenario="currentScenario"
|
||||
:currentEnvironmentId="currentEnvironmentId"
|
||||
:node="selectedNode"
|
||||
:project-list="projectList"
|
||||
:env-map="projectEnvMap"
|
||||
:draggable="false"
|
||||
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload" @openScenario="openScenario"
|
||||
v-if="selectedTreeNode && selectedNode"/>
|
||||
<!-- 请求下还有的子步骤-->
|
||||
<div v-if="selectedTreeNode && selectedTreeNode.hashTree && showNode(selectedTreeNode)">
|
||||
<div v-for="item in selectedTreeNode.hashTree" :key="item.id" class="ms-col-one">
|
||||
<ms-component-config :showBtn="false"
|
||||
:isMax="false"
|
||||
:type="item.type"
|
||||
:scenario="item"
|
||||
:response="response"
|
||||
:currentScenario="currentScenario"
|
||||
:currentEnvironmentId="currentEnvironmentId"
|
||||
:project-list="projectList"
|
||||
:env-map="projectEnvMap"
|
||||
:draggable="false"
|
||||
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick"
|
||||
@refReload="refReload" @openScenario="openScenario"
|
||||
v-if="selectedTreeNode && selectedNode"/>
|
||||
|
||||
<ms-component-config
|
||||
:showBtn="false"
|
||||
:isMax="false"
|
||||
:type="item.type"
|
||||
:scenario="item"
|
||||
:response="response"
|
||||
:currentScenario="currentScenario"
|
||||
:currentEnvironmentId="currentEnvironmentId"
|
||||
:project-list="projectList"
|
||||
:env-map="projectEnvMap"
|
||||
:draggable="false"
|
||||
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick"
|
||||
@refReload="refReload" @openScenario="openScenario"
|
||||
v-if="selectedTreeNode && selectedNode"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,14 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.scenario-aside {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #EBEEF5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.hiddenBottom i {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue