Commit 8a8f53f2 authored by 王晓铜's avatar 王晓铜

修改按钮大小以及模块回显问题

parent ec15a684
......@@ -12,7 +12,7 @@
<el-form-item>
<!-- 列表展示 -->
<el-table :data="sceneTestcaseList" border style="width: 100%;margin-top:20px;cursor:pointer" row-key="sequence">
<el-table-column prop='sequence' label="序号" width="50px" align="center"></el-table-column>
<el-table-column prop='sequence' label="序号" width="60px" align="center"></el-table-column>
<el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="col[index].prop" :label="item.label" align="center"></el-table-column>
<el-table-column label="操作">
<slot slot-scope="scope">
......@@ -25,6 +25,7 @@
<el-form-item>
<el-button type="success" plain @click="DialogVisible = true" class="el-icon-circle-plus">添加</el-button>
<div style="margin-top:20px;float:right;margin-right:300px">
<el-button @click="cancelSceneCaseFrom">取 消</el-button>
<el-button type="primary" @click="addSceneCaseFrom">确 定</el-button>
</div>
......@@ -61,151 +62,186 @@
<!-- 编辑场景用例 -->
<el-dialog title="编辑场景用例" :visible.sync="editDialogVisible" width="60%">
<!-- <el-card> -->
<el-form>
<el-form-item label="用例名称:" style="width:310px">
<el-input v-model="sceneCaseForm.name"></el-input>
</el-form-item>
<el-collapse v-model="activeNames">
<!-- Headers -->
<el-collapse-item name="1" title="请求头">
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="10">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="2">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in headersList" :key="index">
<el-col :span="6">
<div class="div-top">
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="10">
<div class="div-left">
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值" type="textarea" autosize></el-input>
</div>
</el-col>
<el-col :span="2">
<div class="div-operation">
<el-button size="mini" type="danger" @click="advanceDelss(index)" icon="el-icon-delete" style="height:32px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-button type="success" plain @click="AddHeaderListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
<!-- 请求参数 -->
<el-collapse-item name="2" title="请求参数">
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="10">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="2">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in requestParamsList" :key="index">
<el-col :span="6">
<div class="div-top">
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="10">
<div class="div-left">
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值" type="textarea" autosize></el-input>
</div>
</el-col>
<el-col :span="2">
<div class="div-operation">
<el-button size="mini" type="danger" @click="requestParamsDel(index)" icon="el-icon-delete" style="height:32px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-button type="success" plain @click="AddRequestParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
<el-form>
<!-- <el-form-item label="用例名称:" style="width:310px;">
<el-input v-model="caseForm.name" :disabled="true"></el-input>
</el-form-item> -->
<el-collapse v-model="activeNames">
<!-- Headers -->
<el-collapse-item name="1" title="请求头">
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="10">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="2">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in headersList" :key="index">
<el-col :span="6">
<div class="div-top">
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="10">
<div class="div-left">
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值" type="textarea"></el-input>
</div>
</el-col>
<el-col :span="2">
<div class="div-operation">
<el-button size="mini" type="danger" @click="advanceDelss(index)" icon="el-icon-delete" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-button type="success" plain @click="AddHeaderListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
<!-- 请求参数 -->
<el-collapse-item name="2" title="请求参数">
<!-- 响应解析列表 -->
<el-collapse-item name="3" title="响应提取">
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">变量名称</div>
</el-col>
<el-col :span="10">
<div class="grid-content" style="margin-left:15px">json表达式/正则表达式</div>
</el-col>
<el-col :span="2">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in responseList" :key="index">
<el-col :span="6">
<div class="div-top">
<el-input v-model.trim="item.paramsName" placeholder="请输入变量名称"></el-input>
</div>
</el-col>
<el-col :span="10">
<div class="div-left">
<el-input v-model.trim="item.paramsValue" placeholder="请输入表达式" type="textarea" autosize></el-input>
</div>
</el-col>
<el-col :span="2">
<div class="div-operation">
<el-button size="mini" type="danger" @click="responeDel(index)" icon="el-icon-delete" style="height:32px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-button type="success" plain @click="AddResponseListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
<!-- 断言 -->
<el-collapse-item name="4" title="结果断言">
<el-table :data="assertionList" border style="width:100%;margin-top: 15px;">
<el-table-column label="Json表达式" width="350">
<template slot-scope="scope">
<el-input v-model="scope.row.check">
</el-input>
</template>
</el-table-column>
<el-table-column label="比较符" width="250">
<template slot-scope="scope">
<el-select v-model="scope.row.comparator" placeholder="请选择">
<el-option v-for="item in selectAssertionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="预期结果" width="350">
<template slot-scope="scope">
<el-input v-model="scope.row.expect">
</el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="danger" icon="el-icon-delete" @click="AssertionDelete(scope.$index)" style="height:32px">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="success" plain @click="AddAssertionListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="10">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="2">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in requestParamsList" :key="index">
<el-col :span="6">
<div class="div-top">
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="10">
<div class="div-left">
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值" type="textarea"></el-input>
</div>
</el-col>
<el-col :span="2">
<div class="div-operation">
<el-button size="mini" type="danger" @click="requestParamsDel(index)" icon="el-icon-delete" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-button type="success" plain @click="AddRequestParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
<!-- 参数列表 -->
<!-- <el-collapse-item name="3" title="参数变量">
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="10">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="2">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in paramsList" :key="index">
<el-col :span="6">
<div class="div-top">
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="10">
<div class="div-left">
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值" type="textarea"></el-input>
</div>
</el-col>
<el-col :span="2">
<div class="div-operation">
<el-button size="mini" type="danger" @click="paramsDel(index)" icon="el-icon-delete" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-button type="success" plain @click="AddParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item> -->
<!-- 响应解析列表 -->
<el-collapse-item name="3" title="响应提取">
</el-collapse>
<div style="margin-top:20px;margin-left:400px">
<el-button @click="cancelCaseFrom">取 消</el-button>
<el-button type="primary" @click="addCaseFrom">确 定</el-button>
</div>
</el-form>
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">变量名称</div>
</el-col>
<el-col :span="10">
<div class="grid-content" style="margin-left:15px">json路径表达式</div>
</el-col>
<el-col :span="2">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in responseList" :key="index">
<el-col :span="6">
<div class="div-top">
<el-input v-model.trim="item.paramsName" placeholder="请输入变量名称"></el-input>
</div>
</el-col>
<el-col :span="10">
<div class="div-left">
<el-input v-model.trim="item.paramsValue" placeholder="请输入表达式" type="textarea"></el-input>
</div>
</el-col>
<el-col :span="2">
<div class="div-operation">
<el-button size="mini" type="danger" @click="responeDel(index)" icon="el-icon-delete" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-button type="success" plain @click="AddResponseListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
<!-- 断言 -->
<el-collapse-item name="4" title="结果断言">
<el-table :data="assertionList" border style="width:100%;margin-top: 15px;">
<el-table-column label="Json表达式" width="350">
<template slot-scope="scope">
<el-input v-model="scope.row.check">
</el-input>
</template>
</el-table-column>
<el-table-column label="比较符" width="250">
<template slot-scope="scope">
<el-select v-model="scope.row.comparator" placeholder="请选择">
<el-option v-for="item in selectAssertionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="预期结果" width="350">
<template slot-scope="scope">
<el-input v-model="scope.row.expect">
</el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="danger" icon="el-icon-delete" @click="AssertionDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="success" plain @click="AddAssertionListRow()" class="el-icon-circle-plus">添加行</el-button>
</el-collapse-item>
</el-collapse>
<div style="margin-top:20px;margin-left:400px">
<el-button @click="cancelCaseFrom">取 消</el-button>
<el-button type="primary" @click="addCaseFrom">确 定</el-button>
</div>
</el-form>
<!-- </el-card> -->
</el-dialog>
</div>
......@@ -223,9 +259,8 @@ export default {
data() {
return {
col: [
{ label: '用例名称', prop: 'name' },
{ label: '模块名称', prop: 'moduleName' },
{ label: '接口地址', prop: 'interfaceUrl' }
{ label: '接口名称', prop: 'interfaceName' },
{ label: '模块名称', prop: 'moduleName' }
],
queryProjectList: {
pageNum: 1,
......@@ -290,7 +325,7 @@ export default {
},
sequence: 0,
caseId: '',
name: '',
caseName: '',
headers: '',
parameters: '',
extract: '',
......@@ -397,7 +432,6 @@ export default {
getSceneCaseList() {
getSceneCaseList(this.sceneCaseInfo).then((resp) => {
this.sceneTestcaseList = resp.data.data
console.log('列表信息', this.sceneTestcaseList)
})
},
// 获取模块列表
......@@ -436,11 +470,10 @@ export default {
validate: this.sceneCaseForm.caseDetialList[0].validate,
id: this.sceneCaseForm.caseDetialList[0].id,
interfaceId: this.sceneCaseForm.caseDetialList[0].interfaceId,
interfaceUrl: this.sceneCaseForm.caseDetialList[0].interfaceUrl,
sceneId: this.sceneCaseInfo.sceneId,
sequence: this.sceneTestcaseList.length + 1
})
console.log('save----', this.sceneTestcaseList)
// console.log('save----', this.sceneTestcaseList)
this.DialogVisible = false
this.sceneCaseForm.moduleFrom = ''
this.sceneCaseForm.interfaceFrom = ''
......@@ -460,7 +493,7 @@ export default {
this.sceneCaseForm.sequence = row.sequence
this.sceneCaseForm.interfaceId = row.interfaceId
this.sceneCaseForm.caseId = row.id
this.sceneCaseForm.name = row.name
this.sceneCaseForm.caseName = row.name
var newHeaders = JSON.parse(row.headers)
// 请求头(将json字符串转化为对象)
this.headersList = []
......@@ -608,11 +641,10 @@ export default {
this.sceneTestcaseList[i].parameters = this.sceneCaseForm.parameters
this.sceneTestcaseList[i].extract = this.sceneCaseForm.extract
this.sceneTestcaseList[i].validate = this.sceneCaseForm.validate
this.sceneTestcaseList[i].name = this.sceneCaseForm.name
}
}
this.editDialogVisible = false
console.log('新集合信息', this.sceneTestcaseList)
// console.log('新集合信息', this.sceneTestcaseList)
},
cancelCaseFrom() {
this.editDialogVisible = false
......@@ -637,7 +669,7 @@ export default {
width: 300px;
}
.div-top {
margin-top: 5px;
margin-top: 10px;
}
.div-left {
margin-left: 5px;
......
......@@ -147,6 +147,7 @@ export default {
}
},
created() {
this.getProjectList()
this.getModelList()
},
methods: {
......
......@@ -15,10 +15,10 @@
<!-- <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column> -->
<el-table-column label="操作">
<slot slot-scope="scope">
<el-button type="success" icon="el-icon-link" @click="executeSceneFrom(scope.row)">执行</el-button>
<el-button type="warning" icon="el-icon-edit" @click="editeSceneFrom(scope.row)">编辑场景</el-button>
<el-button type="warning" icon="el-icon-edit" @click="editeSceneCaseFrom(scope.row)">编辑场景用例</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="checkReport(scope.row)">查看报告</el-button>
<el-button type="success" size="medium" icon="el-icon-link" @click="executeSceneFrom(scope.row)" style="width:80px;margin-left:1px">执行</el-button>
<el-button type="warning" size="medium" icon="el-icon-edit" @click="editeSceneFrom(scope.row)" style="width:110px;margin-left:1px">编辑场景</el-button>
<el-button type="warning" size="medium" icon="el-icon-edit" @click="editeSceneCaseFrom(scope.row)" style="width:135px;margin-left:1px">编辑场景用例</el-button>
<el-button type="primary" size="medium" icon="el-icon-circle-check" @click="checkReport(scope.row)" style="width:110px;margin-left:1px">查看报告</el-button>
<!-- <el-button type="danger" icon="el-icon-delete" @click="deleSceneFrom(scope.row)">删除</el-button> -->
</slot>
</el-table-column>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment