log:
1、实现下拉框选择参数后可点击按钮
2、文件上传
3、iframe嵌套
<template>
<div>
<div>
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-col :span="4">
<el-form-item label="操作人员" prop="person">
<el-select v-model="formData.person" placeholder="请选择人员" @change="selectService()" clearable :style="{width: '100%'}">
<el-option v-for="(item, index) in personList" :key="index" :label="item.person"
:value="index" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="服务" prop="service">
<el-select v-model="formData.service" placeholder="请选择服务" @change="selectVersion(formData.service)" filterable clearable
:disabled="formData.person===''?true:false"
:style="{width: '100%'}">
<el-option v-for="(item, index) in serviceList" :key="index" :label="item.service"
:value="index" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="版本" prop="version">
<el-select v-model="formData.version" placeholder="请选择版本" @change="selectCaseList()" filterable clearable :style="{width: '100%'}"
:disabled="formData.service===''?true:false">
<el-option v-for="(item, index) in versionList" :key="index" :label="item.version"
:value="index" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-upload :on-success="UploadSuccessRead" :file-list="fileList" action="/fileUpload/"
:disabled="formData.person===1 || formData.version ===''?true:false">
<el-button class="bt" type="primary" icon="el-icon-upload el-icon--right"
:disabled="formData.person===1 || formData.version ===''?true:false">上传用例</el-button>
</el-upload>
</el-col>
</el-form>
</el-row>
</div>
<div>
<el-form>
<el-col :span="5">
<el-form-item>
<el-button class="bt" type="primary" size="medium" @click="interfaceTest()"
:disabled="formData.person==='' || formData.service==='' || formData.version === ''?true:false"
:loading="loadingbut"
> {{loadingbuttext}} </el-button>
</el-form-item>
</el-col>
</el-form>
</div>
<div id="htmlDiv" v-if="targeturl !== ''">
<iframe id="refreshAlarm" class="iframe" :src="targeturl" frameborder="0" width="100%" height="700" />
</div>
<div v-else>
<el-table :data="caseList" height="600">
<el-table-column prop="0" label="编号">
</el-table-column>
<el-table-column prop="1" label="用例名称">
</el-table-column>
<el-table-column prop="2" label="接口前缀">
</el-table-column>
<el-table-column prop="3" label="请求路径">
</el-table-column>
<el-table-column prop="4" label="请求类型">
</el-table-column>
<el-table-column prop="6" label="请求参数">
</el-table-column>
<el-table-column prop="7" label="检查点">
</el-table-column>
</el-table-column>
<el-table-column prop="8" label="是否运行状态">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import app from "@/api/interface";
export default {
data() {
return {
loadingbut:false,
loadingbuttext:'执行用例',
username:app.user,
formData: {
person: '',
service:'',
version:'',
},
rules: {
personList: [{
required: true,
message: '请选择人员',
trigger: 'change'
}],
service: [{
required: true,
message: '请选择服务',
trigger: 'change'
}],
version: [{
required: true,
message: '请选择版本',
trigger: 'change'
}],
},
personList: [{
"person": "测试",
}, {
"person": "开发",
}],
serviceList:[],
versionList:[],
targeturl:'',
caseList:[],
fileList:[],
}
},
methods: {
interfaceTest(){
this.loadingbut = true;
this.loadingbuttext = '执行中...'
this.$axios
.get('/test_interface/',{params:
{
version_id:this.versionList[this.formData.version]["id"],
service_id:this.serviceList[this.formData.service]["id"],
username:this.username,
}
})
.then((res)=>{
if(res.data["success"]==='true'){
this.loadingbut = false;
this.loadingbuttext = '执行用例';
this.readHtml()
document.getElementById("refreshAlarm").src="http://";
console.log(this.targeturl)
this.$message({
message: '执行完成',
type: 'success'
})
}
})
},
HtmlDow(){
this.$axios
.get('/HtmlDownload/')
.then((res)=>{
})
},
readHtml(){
this.targeturl='http://'
},
selectService(){
this.$axios
.get('/selectService/')
.then((res)=>{
if (res.status===200){
console.log(this.formData.person)
this.serviceList = res.data
}
})
},
selectVersion(service_id){
console.log(this.serviceList[service_id]["id"])
this.$axios
.get('/selectVersion/',{params:{service_id:this.serviceList[service_id]["id"]}})
.then((res)=>{
this.versionList = res.data
})
},
fileUpload(){
this.$axios
.post('/fileUpload/')
.then((res)=>{
})
},
UploadSuccessRead(){
this.targeturl='',
this.$axios
.get('/readExcelCase/')
.then((res)=>{
this.caseList = res.data;
this.saveCase()
})
},
saveCase(){
this.targeturl='',
this.$axios
.get('/saveCase/',
{params:
{
version_id:this.versionList[this.formData.version]["id"],
service_id:this.serviceList[this.formData.service]["id"]
}
})
},
selectCaseList(){
this.targeturl='',
this.caseList=[]
this.$axios
.get('/selectCase/',
{params:
{
version_id:this.versionList[this.formData.version]["id"],
service_id:this.serviceList[this.formData.service]["id"]
}
})
.then((res)=>{
if(res.data.case==="null"){
this.caseList=[]
}else{
this.caseList = res.data
}
})
}
}
}
</script>
<style>
</style>