vue+element实现按钮不可点击、上传、嵌套页面交互等

 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>