thoth-frontend-test/src/views/Platform/presentation/PresentReport.vue

<template>
  <!-- 提测报告，新增客户端报告 -->
  <div>
    <el-form ref="dataChange" :inline="true" :model="dataChange" :rules="serviceDataRules" style="padding:30px; margin:7% 3%;background:#fff;">
      <el-row :gutter="20">
        <el-col :span="13">
          <el-form-item prop="name">
            <el-input v-model="dataChange.name" style="width:38vw;" placeholder="报告标题(端-版本-需求提测报告)" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="by" prop="submitter" style="margin-left:80px;background: white">
            <el-input v-model="dataChange.submitter" style="width:20vw; margin-left:30px; border:2px solid #ccc;border-radius: 4px;" placeholder="who" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20"><el-col :span="12"><el-form-item label="一、提测详情" class="cententTit" /></el-col></el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <el-form-item label="是否延期" prop="lateStatus">
            <el-radio-group v-model="dataChange.lateStatus">
              <el-radio style="margin: 0 90px;" label="2" @change="lateStatusChange">否</el-radio>
              <el-radio style="padding-right: 185px;" label="1" @change="lateStatusChange(1)">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="showDelay" label="延期原因" prop="lateReason" style="margin-left:75px;"><el-input v-model="dataChange.lateReason" style="width:29.8vw;" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23">
        <el-col :span="23">
          <el-form-item label="测试地址 " prop="packageUrl"><el-input v-model="dataChange.packageUrl" style="width:72.5vw; padding-left:7px;" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23">
        <el-col :span="23">
          <el-form-item label="打包分支 " prop="packageBranch"><el-input v-model="dataChange.packageBranch" style="width:72.5vw; padding-left:7px;" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <el-form-item label="提测环境 " prop="env"><el-input v-model="dataChange.env" style="width:30.8vw; padding-left:7px;" /></el-form-item>
          <el-form-item label="优先级 " prop="priority" style="margin-left:75px;">
            <el-select v-model="dataChange.priority" style="width:30.7vw;padding-left:18px;" placeholder="请选择优先级">
              <el-option v-for="item in priorityStrings" :key="item.value" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <el-form-item label="新增Apollo" prop="configIn">
            <el-radio-group v-model="dataChange.configIn">
              <el-radio style="margin: 0 83px;" label="2" @change="changeApollo">否</el-radio>
              <el-radio style="padding-right: 185px;" label="1" @change="changeApollo(1)">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="showApollo" label="Apollo名称" prop="configInfo" style="margin-left:75px;"><el-input v-model="dataChange.configInfo" style="width:28.5vw;" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <el-form-item label="依赖组件" prop="dependent">
            <el-radio-group v-model="dataChange.dependent">
              <el-radio style="margin: 0 90px;" label="2" @change="changeRelyOn">否</el-radio>
              <el-radio style="padding-right: 185px;" label="1" @change="changeRelyOn(1)">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="showRelyOn" label="组件名称" prop="dependentComponents" style="margin-left:75px;"><el-input v-model="dataChange.dependentComponents" style="width:29.3vw;" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23">
        <el-col :span="23">
          <el-form-item label="PM & UI " prop="pmUi"><el-input v-model="dataChange.pmUi" style="width:72.5vw; padding-left:7px;" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23">
        <el-col :span="23">
          <el-form-item label="需求list" prop="functionInfo" style="padding:2px;"><el-input v-model="dataChange.functionInfo" style="width:73vw;" type="textarea" :rows="5" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23">
        <el-col :span="23" style="padding-top:20px;">
          <el-form-item label="自测结果"><el-input v-model="dataChange.selfTestInfo" style="width:73vw;" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23">
        <el-col :span="23">
          <el-form-item label="涉及接口" style="padding:2px;"><el-input v-model="dataChange.interfaceInfo" style="width:73vw;" type="textarea" :rows="3" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23">
        <el-col :span="23">
          <el-form-item label="测试建议" style="padding:2px;"><el-input v-model="dataChange.testSuggest" style="width:73vw;" type="textarea" :rows="5" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="23"><el-col :span="12"><el-form-item label="二、联调详情" class="cententTit" /></el-col></el-row>
      <el-row :gutter="23">
        <el-col style="width:79.5vw;">
          <div id="DetailsOfProposal" class="toolbar" />
          <div id="DetailsOfProposal1" class="text" style="text-align:left;cellspacing:0;cellpadding:0;" />
        </el-col>
      </el-row>
      <el-row :gutter="23"><el-col><el-form-item label="三、其他" class="cententTit" style="margin-top:20px;" /></el-col></el-row>
      <el-row :gutter="23">
        <el-col :span="23">
          <el-form-item label="其他"><el-input v-model="dataChange.others" style="padding-left:25px;width:75vw;" type="textarea" :rows="5" /></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin:70px 0 0 150px;" type="flex" justify="center">
        <el-col :span="8"><el-button type="info" @click="clickPreview(dataChange)"> 预 览 </el-button></el-col>
        <el-col v-show="showButton" :span="8"><el-button type="info" @click="getCreateData(dataChange)"> 保 存 </el-button></el-col>
        <el-col v-show="showButton1" :span="8"><el-button type="info" @click="getQueryData(dataChange)"> 更 新 </el-button></el-col>
        <el-col :span="8"><el-button type="info" @click="open(dataChange)"> 取 消 </el-button></el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { launchTestUpdate, launchTestCreate } from '@/api/InterfaceReport'
import E from 'wangeditor'

export default {
  name: 'PresentReport',
  data() {
    return {
      priorityStrings: [{ name: 'p0', value: 0 }, { name: 'p1', value: 1 }, { name: 'p2', value: 2 }, { name: 'p3', value: 3 }],
      serviceDataRules: {
        name: [{ required: true, message: '报告标题不能为空', trigger: 'change' }],
        submitter: [{ required: true, message: 'by不能为空', trigger: 'change' }],
        pmUi: [{ required: true, message: 'PM & UI不能为空', trigger: 'change' }],
        lateStatus: [{ required: true, message: '是否延期不能为空', trigger: 'change' }],
        lateReason: [{ required: true, message: '延期原因不能为空', trigger: 'change' }],
        dependent: [{ required: true, message: '依赖组建不能为空', trigger: 'change' }],
        configIn: [{ required: true, message: '新增Apollo不能为空', trigger: 'change' }],
        priority: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
        packageUrl: [{ required: true, message: '测试地址不能为空', trigger: 'change' }],
        packageBranch: [{ required: true, message: '打包分支不能为空', trigger: 'change' }],
        functionInfo: [{ required: true, message: '需求list不能为空', trigger: 'change' }],
        env: [{ required: true, message: '提测环境不能为空', trigger: 'change' }]
      },
      showDelay: false,
      showApollo: false,
      showRelyOn: false,
      showButton: true,
      showButton1: '',
      userData: '',
      objData: '',
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      id: '',
      name: '',
      labelWidth: '60px',
      dataChange: {},
      DetailsOfProposal: '',
      lateStatus: '',
      configInfo: '',
      dependentComponents: '',
      bizIdCode: '',
      projectIdCode: ''
    }
  },
  created() {
    this.getRouterData()
  },
  mounted() {
    this.DetailsOfProposal = new E('#DetailsOfProposal', '#DetailsOfProposal1')
    this.DetailsOfProposal.customConfig.zIndex = 110
    this.DetailsOfProposal.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table']
    this.DetailsOfProposal.customConfig.onchange = (html) => { this.DetailsOfProposal = html }
    this.DetailsOfProposal.create()
    this.DetailsOfProposal.txt.html(`<p></p><table width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>端类型</th><th>联调RD</th><th>联调结果</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table><p></p>`)
    this.getRouterData1()
  },
  methods: {
    getRouterData() {
      this.showButton = true
      this.showButton1 = false
      if (this.$route.query.task) {
        this.bizIdCode = this.$route.query.task.bizId
        this.projectIdCode = this.$route.query.task.id
      }
      if (this.$route.query.data) {
        this.showButton1 = true
        this.showButton = false
        this.dataChange = this.$route.query.data
        if (this.dataChange.lateStatus === 1) {
          this.dataChange.lateStatus = '1'
          this.showDelay = true
        } else {
          this.dataChange.lateStatus = '2'
          this.showDelay = false
        }
        if (this.dataChange.configInfo !== '') {
          this.dataChange.configIn = '1'
          this.showApollo = true
        } else {
          this.dataChange.configIn = '2'
          this.showApollo = false
        }
        if (this.dataChange.dependentComponents !== '') {
          this.dataChange.dependent = '1'
          this.showRelyOn = true
        } else {
          this.dataChange.dependent = '2'
          this.showRelyOn = false
        }
      }
    },
    getQueryData(ele) {
      this.dataChange = ele
      typeof (this.DetailsOfProposal) === 'string' ? this.dataChange.joinTest = this.DetailsOfProposal : ''
      this.userData = { ename: this.userInformation, name: this.userNames }
      this.objData = { launchTestInfo: this.dataChange, user: this.userData }
      launchTestUpdate(this.objData).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: '更新成功' })
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    getCreateData(ele) {
      this.$refs['dataChange'].validate((valid) => {
        if (valid) {
          this.dataChange = ele
          typeof (this.DetailsOfProposal) === 'string' ? this.dataChange.joinTest = this.DetailsOfProposal : ''
          // this.dataChange.joinTest = this.DetailsOfProposal
          if (this.$route.query.task) {
            this.dataChange.taskId = this.projectIdCode
            this.dataChange.bizId = this.bizIdCode
          }

          this.dataChange.type = 1
          this.dataChange.lateStatus === 1 ? this.dataChange.lateStatus = 1 : this.dataChange.lateStatus = 2
          this.dataChange.configInfo === 1 ? this.dataChange.configInfo = ele.lateReason : this.dataChange.configInfo = ''
          this.dataChange.dependentComponents === 1 ? this.dataChange.dependentComponents = ele.lateReason : this.dataChange.dependentComponents = ''
          this.userData = { ename: this.userInformation, name: this.userNames }
          this.objData = { launchTestInfo: this.dataChange, user: this.userData }
          launchTestCreate(this.objData).then(res => {
            if (res.code === 200) {
              this.$message({ type: 'success', message: '保存成功' })
              this.$router.go(-1)
            } else {
              this.$message.error('保存失败')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getRouterData1() {
      this.DetailsOfProposal.txt.html(this.dataChange.joinTest)
    },
    open(ele) {
      this.$confirm('是否放弃修改，离开页面？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '继续修改',
        cancelButtonText: '放弃修改'
      })
        .then(() => { this.$message({ type: 'info', message: '继续修改' }) })
        .catch(action => { action === 'cancel' ? this.$router.go(-1) : '' })
    },
    lateStatusChange(e) {
      e === 1 ? this.showDelay = true : this.showDelay = false
    },
    changeApollo(e) {
      e === 1 ? this.showApollo = true : this.showApollo = false
    },
    changeRelyOn(e) {
      e === 1 ? this.showRelyOn = true : this.showRelyOn = false
    },
    clickPreview(ele) {
      this.$router.push({ path: '/Platform/presentation/acceptTheReport', query: { data: ele }})
    }
  }
}
</script>

<style scoped>
  .el-col {
    white-space:nowrap;
  }
  .el-form-item {
    background: #ccc;
    border-radius: 4px;
    padding:2px;
  }
  .cententTit {
    padding-right:100px;
  }
  .toolbar {
    border: 2px solid #ccc;
  }
  .text {
    font-size: 15px;
    color: #606266;
    border: 2px solid #ccc;
    height: aotu;
  }
  body {
    background: #ccc;
  }

</style>