thoth-frontend-test/src/views/Platform/useCase/updateUse.vue

<template>
  <div id="window-judge" style="background:#F2F3F6;min-height:95vh;">
    <el-container>
      <el-header style="background:#ffffff;height:auto; width:94%;margin:3%; font-size:14px;border-radius:8px;">
        <el-form ref="caseData" :model="caseData" label-width="90pt" style="margin:1%;" :rules="createFormData">
          <el-row>
            <el-col :span="20">
              <el-form-item label="前置条件" label-width="80pt" prop="caseCondition">
                <el-input v-model="caseData.caseCondition" placeholder="请输入内容" style="margin-left:1.3%;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <div style="white-space:nowrap; display:flex;">
                <el-form-item label="用例优先级" prop="casePriority" style="flex:1">
                  <el-select v-model="caseData.casePriority" clearable placeholder="用例优先级" style="width: 100%">
                    <el-option v-for="item in priorityStrings" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="API" prop="api" style="flex:1"><el-input v-model="caseData.api" clearable autocomplete="off" style="width: 100%; margin-left:3%;" /></el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-header>
      <el-main style="background:#ffffff;height:auto; width:94%;margin: 0 3% 3% 3%; font-size:14px;border-radius:8px;">
        <!-- 编辑 -->
        <el-form label-width="80px" :model="caseData" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-bottom:2%;">
          <el-row>
            <el-col :span="20" style="margin:2% 0 0 0; white-space:nowrap;">
              <el-form-item label="执行步骤">
                <el-input v-model="caseData.description" type="textarea" :rows="4" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="预期结果">
                <el-input v-model="caseData.expectedResult" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="display:flex;">
            <el-row style="flex:1;">
              <el-col :span="22">
                <el-form-item label="附件">
                  <el-upload class="upload-demo" drag action="http://star.xiaojukeji.com/upload/img.node" multiple :on-success="(response, file, fileList)=>{return constractSuccUpload(response, file, fileList )}" :on-progress="DisableButton">
                    <i class="el-icon-plus avatar-uploader-icon"> 添加图片 </i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="flex:1;">
              <el-col :span="20">
                <el-form-item label="备注">
                  <el-input v-model="caseData.remark" type="textarea" :rows="8" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-show="btn_show" align="center" class="cla">
            <el-table v-show="btn_show" :data="uptataKey" fit style="width: 90%;">
              <el-table-column label="" min-width="150">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="" min-width="300">
                <template slot-scope="scope"><a :href="scope.row.url" style="color:blue;">{{ scope.row.url }}</a></template>
              </el-table-column>
              <el-table-column fixed="right" label="" width="50" align="center">
                <template slot-scope="scope">
                  <el-button class="deleteSty" @click="deleteURL(scope.row)"> x </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        <el-row>
          <el-col :span="22" style="text-align:right; ">
            <el-button :disabled="dis" type="primary" @click="caseCreateCase(caseData)">保 存</el-button>
            <el-button style="margin:9% 0 0 4%;" @click="$router.go(-1)">取 消</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import { updateCaseData, queryCasesData } from '@/api/caseProject.js'

export default {
  data() {
    return {
      userNames: localStorage.getItem('username'),
      bizJson: localStorage.getItem('key'),
      startId: '',
      caseData: {},
      btn_show: false,
      dis: false,
      id: '',
      arry: [],
      arr: [],
      uptataKey: [],
      createFormData: {
        caseCondition: [{ required: true, message: '前置条件不能为空', trigger: 'change' }],
        api: [{ required: true, message: '对应接口不能为空', trigger: 'change' }],
        casePriority: [{ required: true, message: '用例优先级不能为空', trigger: 'change' }]
      },
      priorityStrings: [{ name: 'p0', value: 0 }, { name: 'p1', value: 1 }, { name: 'p2', value: 2 }, { name: 'p3', value: 3 }]
    }
  },
  created() {
    this.initCode()
  },
  methods: {
    // 初始化
    initCode() {
      if (this.$route.query.id) {
        this.url = window.location.href // 获取url中"?"符后的字串
        this.id = this.url.split('?id=')
        this.startId = this.id[1]
        queryCasesData({ caseFolderId: this.id[1] }).then(res => {
          for (var el of res.data.list) {
            el.caseFolderId === Number(this.id[1]) ? this.caseData = el : ''
            if (this.caseData.accessory !== '') {
              this.btn_show = true
              var obj = JSON.parse(this.caseData.accessory.split('{}')[0])
              for (var a of obj) {
                this.uptataKey.push(a)
              }
              break
            }
          }
        })
      }
    },

    DisableButton() {
      this.dis = true
    },

    // 图片上传成功的回调(编辑)
    constractSuccUpload(response, file, fileList) {
      this.dis = false
      const fileUrl = { name: file.name, url: 'http:' + file.response.url }
      this.uptataKey.push(fileUrl)
    },

    deleteURL(vel) {
      for (var i = 0; i < this.uptataKey.length; i++) {
        if (this.uptataKey[i].name === vel.name) {
          this.uptataKey.splice(i, 1)
        }
      }
    },

    // 新建Data
    caseCreateCase(vel) {
      this.caseData = vel
      this.caseData.accessory = JSON.stringify(this.uptataKey)
      updateCaseData(this.caseData).then(res => {
        this.$message({ type: 'success', message: res.msg })
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style>
.cla .el-table td {
  padding:0px;
}
.deleteSty {
  cursor: pointer;
  border: none;
}
.bgColorSz {
    width: 100%;
    height: 96vh;
    background: #F2F3F6;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
</style>