test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

拖拽

This commit is contained in:
q4speed 2020-05-21 15:56:29 +08:00
parent 1f4e2e14da
commit 162bc3d418
2 changed files with 69 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/business/components/api/test/components/ApiRequestConfig.vue
View File

@ -1,38 +1,44 @@
<template>
<div class="request-container">
<div class="request-item" v-for="(request, index) in requests" :key="index" @click="select(request)"
:class="{'selected': isSelected(request)}">
<el-row type="flex">
<div class="request-method">
{{request.method}}
</div>
<div class="request-name">
{{request.name}}
</div>
<div class="request-btn">
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link el-icon-more"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{type: 'copy', index: index}">
{{$t('api_test.request.copy')}}
</el-dropdown-item>
<el-dropdown-item :command="{type: 'delete', index: index}">
{{$t('api_test.request.delete')}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-row>
</div>
<draggable :list="requests" group="Request" class="request-draggable" ghost-class="request-ghost">
<div class="request-item" v-for="(request, index) in requests" :key="index" @click="select(request)"
:class="{'selected': isSelected(request)}">
<el-row type="flex">
<div class="request-method">
{{request.method}}
</div>
<div class="request-name">
{{request.name}}
</div>
<div class="request-btn">
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link el-icon-more"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{type: 'copy', index: index}">
{{$t('api_test.request.copy')}}
</el-dropdown-item>
<el-dropdown-item :command="{type: 'delete', index: index}">
{{$t('api_test.request.delete')}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-row>
</div>
</draggable>
<el-button class="request-create" type="primary" size="mini" icon="el-icon-plus" plain @click="createRequest"/>
</div>
</template>
<script>
import {Request} from "../model/ScenarioModel";
import draggable from 'vuedraggable';
export default {
name: "MsApiRequestConfig",
components: {draggable},
props: {
requests: Array,
open: Function
@ -136,4 +142,9 @@
.request-create {
width: 100%;
}
.request-ghost {
opacity: 0.5;
background-color: #909399;
}
</style>

56
frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
View File

@ -3,29 +3,31 @@
<el-aside class="scenario-aside">
<div class="scenario-list">
<ms-api-collapse v-model="activeName" @change="handleChange" accordion>
<ms-api-collapse-item v-for="(scenario, index) in scenarios" :key="index"
:title="scenario.name" :name="index">
<template slot="title">
<div class="scenario-name">
{{scenario.name}}
<span id="hint" v-if="!scenario.name">
<draggable :list="scenarios" group="Scenario" class="scenario-draggable" ghost-class="scenario-ghost">
<ms-api-collapse-item v-for="(scenario, index) in scenarios" :key="index"
:title="scenario.name" :name="index">
<template slot="title">
<div class="scenario-name">
{{scenario.name}}
<span id="hint" v-if="!scenario.name">
{{$t('api_test.scenario.config')}}
</span>
</div>
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link el-icon-more scenario-btn"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{type: 'copy', index: index}">
{{$t('api_test.scenario.copy')}}
</el-dropdown-item>
<el-dropdown-item :command="{type:'delete', index:index}">
{{$t('api_test.scenario.delete')}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<ms-api-request-config :requests="scenario.requests" :open="select"/>
</ms-api-collapse-item>
</div>
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link el-icon-more scenario-btn"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{type: 'copy', index: index}">
{{$t('api_test.scenario.copy')}}
</el-dropdown-item>
<el-dropdown-item :command="{type:'delete', index:index}">
{{$t('api_test.scenario.delete')}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<ms-api-request-config :requests="scenario.requests" :open="select"/>
</ms-api-collapse-item>
</draggable>
</ms-api-collapse>
</div>
<el-button class="scenario-create" type="primary" size="mini" icon="el-icon-plus" plain @click="createScenario"/>
@ -48,6 +50,7 @@
import MsApiRequestForm from "./ApiRequestForm";
import MsApiScenarioForm from "./ApiScenarioForm";
import {Scenario, Request} from "../model/ScenarioModel";
import draggable from 'vuedraggable';
export default {
name: "MsApiScenarioConfig",
@ -57,7 +60,8 @@
MsApiScenarioForm,
MsApiRequestForm,
MsApiCollapse,
MsApiCollapseItem
MsApiCollapseItem,
draggable
},
props: {
@ -183,4 +187,12 @@
right: 0;
bottom: 0;
}
.scenario-ghost {
opacity: 0.5;
}
.scenario-draggable {
background-color: #909399;
}
</style>