修改所有测试页面样式

This commit is contained in:
haifeng414 2020-02-15 10:44:10 +08:00
parent 70becf8c29
commit 3b8f2ff32b
2 changed files with 148 additions and 74 deletions

View File

@ -1,70 +1,79 @@
<template> <template>
<div class="testplan-container"> <div class="testplan-container">
<div> <div class="main-content">
<el-row> <el-card>
<el-col :span="22" :offset="1"> <div slot="header">
<el-table <el-row type="flex" justify="space-between" align="middle">
stripe <span class="title">测试</span>
ref="multipleTable" <span class="search">
:data="tableData" <el-input type="text" size="small" placeholder="根据ID名称搜索" prefix-icon="el-icon-search" maxlength="60"
tooltip-effect="dark" v-model="condition" clearable/>
style="width: 100%" </span>
@selection-change="handleSelectionChange"> </el-row>
<el-table-column </div>
type="selection" <el-table :data="tableData" style="width: 100%">
width="55"> <el-table-column
</el-table-column> type="selection"
<el-table-column width="55">
prop="name" </el-table-column>
label="名称"> <el-table-column
</el-table-column> prop="name"
<el-table-column label="名称"
prop="description" width="150"
label="描述" show-overflow-tooltip>
show-overflow-tooltip> </el-table-column>
</el-table-column> <el-table-column
<el-table-column prop="description"
prop="projectName" label="描述"
label="所属项目"> show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="创建时间"> prop="projectName"
<template slot-scope="scope"> label="所属项目"
<span>{{ scope.row.createTime | timestampFormatDate }}</span> width="150"
</template> show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="updateTime" width="250"
label="更新时间"> label="创建时间">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span> <span>{{ scope.row.createTime | timestampFormatDate }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="操作"> width="250"
<template slot-scope="scope"> label="更新时间">
<el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button> <template slot-scope="scope">
<el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button> <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> <el-table-column
</el-col> width="150"
</el-row> label="操作">
<el-row> <template slot-scope="scope">
<el-col :span="22" :offset="1"> <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
<div class="table-page"> <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
<el-pagination </template>
@size-change="handleSizeChange" </el-table-column>
@current-change="handleCurrentChange" </el-table>
:current-page.sync="currentPage" <div>
:page-sizes="[5, 10, 20, 50, 100]" <el-row>
:page-size="pageSize" <el-col :span="22" :offset="1">
layout="total, sizes, prev, pager, next, jumper" <div class="table-page">
:total="total"> <el-pagination
</el-pagination> @size-change="handleSizeChange"
</div> @current-change="handleCurrentChange"
</el-col> :current-page.sync="currentPage"
</el-row> :page-sizes="[5, 10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</el-card>
</div> </div>
</div> </div>
</template> </template>
@ -75,6 +84,7 @@
return { return {
queryPath: "/testplan/list", queryPath: "/testplan/list",
deletePath: "/testplan/delete", deletePath: "/testplan/delete",
condition: "",
tableData: [], tableData: [],
multipleSelection: [], multipleSelection: [],
currentPage: 1, currentPage: 1,
@ -155,7 +165,16 @@
<style scoped> <style scoped>
.testplan-container { .testplan-container {
background: white; padding: 15px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.main-content {
margin: 0 auto;
width: 100%;
max-width: 1200px;
} }
.table-page { .table-page {

View File

@ -1,12 +1,63 @@
<style>
</style>
<template> <template>
<div> <el-row>
我是第二个子组件 <el-col :span="8">
<el-button @click="testChange()" type="text" size="small">修改TestPlan值</el-button> <div>
</div> <el-row>
<el-col :span="12">
<div>
并发用户
<el-input
type="number"
placeholder="请输入线程数"
v-model="threadNumber"
show-word-limit
>
</el-input>
</div>
</el-col>
<el-col :span="12">
<div>
压测时长
<el-input
type="number"
placeholder="请输入时长min"
v-model="duration"
show-word-limit
>
</el-input>
</div>
</el-col>
</el-row>
<el-row>
<div>
<div style="width: 80px;">
<el-input
type="number"
v-model="rampUpTime"
show-word-limit
>
</el-input>
</div>
分钟内
<div style="width: 80px;">
<el-input
type="number"
v-model="rampUpCount"
show-word-limit
>
</el-input>
</div>
次增加并发用户
</div>
</el-row>
</div>
</el-col>
<el-col :span="16">
压力预估图
</el-col>
</el-row>
</template> </template>
<script> <script>
@ -14,6 +65,10 @@
name: "TestPlanPressureConfig", name: "TestPlanPressureConfig",
data() { data() {
return { return {
threadNumber: 10,
duration: 10,
rampUpTime: 5,
rampUpCount: 2,
} }
}, },
methods: { methods: {