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

<template>
  <!-- 提测报告，新增客户端报告 -->
  <div class="eleStyle">
    <el-form ref="dataChange" :model="dataChange" :rules="serviceDataRules" style="margin:2% 0%;">
      <div class="double">
        <el-form-item label="标题" prop="name">
          <el-input v-model="dataChange.name" size="small" style="width: 20vw" placeholder="报告标题(端-版本-需求提测报告)" />
        </el-form-item>
        <el-form-item label="by" prop="submitter">
          <el-input v-model="dataChange.submitter" size="small" placeholder="who" />
        </el-form-item>
      </div>

      <div class="backStyle">一. 提测详情</div>

      <div class="double" style="display: flex; justify-content: space-between; white-space: nowrap;">
        <el-form-item label="* 是否延期" style="text-align:right;">
          <el-button :type="lateStatusBtn" style="margin: 0 20px;" size="small" class="tag" @click="lateStatusChange(2)"> 是 </el-button>
          <el-button :type="lateStatusBtn1" class="tag" size="small" @click="lateStatusChange(1)"> 否 </el-button>
        </el-form-item>
        <el-form-item v-if="showDelay" label="延期原因" prop="lateReason"><el-input v-model="dataChange.lateReason" size="small" style="width: 25vw;" /></el-form-item>
      </div>

      <div class="double" style="display: flex; justify-content: space-between; white-space: nowrap;">
        <el-form-item label="* 新增Apollo" style="text-align:right;">
          <el-button :type="configInBtn" style="margin: 0 6px" size="small" class="tag" @click="changeApollo(1)"> 是 </el-button>
          <el-button :type="configInBtn1" style="margin-left: 24px" size="small" class="tag" @click="changeApollo(2)"> 否 </el-button>
        </el-form-item>
        <el-form-item v-if="showApollo" label="Apollo名称" prop="configInfo"><el-input v-model="dataChange.configInfo" size="small" style="width: 25vw;" /></el-form-item>
      </div>

      <div class="double" style="display: flex; justify-content: space-between; white-space: nowrap;">
        <el-form-item label="* 依赖组件" style="text-align:right;">
          <el-button :type="dependentBtn" style="margin: 0 20px;" size="small" class="tag" @click="changeRelyOn(1)"> 是 </el-button>
          <el-button :type="dependentBtn1" class="tag" size="small" @click="changeRelyOn(2)"> 否 </el-button>
        </el-form-item>
        <el-form-item v-if="showRelyOn" label="组件名称" prop="dependentComponents"><el-input v-model="dataChange.dependentComponents" size="small" style="width: 25vw;" /></el-form-item>
      </div>

      <div class="CodeReview" style="display: flex; justify-content: space-between; white-space: nowrap;">
        <el-form-item label="* CodeReview">
          <el-button :type="CodeReview" style="margin: 0 17px 0 8px;" size="small" class="tag" @click="changeCodeReview(1)"> 是 </el-button>
          <el-button :type="CodeReview1" class="tag" size="small" @click="changeCodeReview(0)"> 否 </el-button>
        </el-form-item>
        <el-form-item v-if="showCodeReview" class="double" label="执行人" prop="crBy"><el-input v-model="dataChange.crBy" size="small" style="width: 25vw;" /></el-form-item>
      </div>

      <div class="double">
        <el-form-item label="测试地址" prop="packageUrl"><el-input v-model="dataChange.packageUrl" size="small" style="width:15vw;" /></el-form-item>
        <el-form-item label="打包分支" prop="packageBranch"><el-input v-model="dataChange.packageBranch" size="small" style="width:25vw;" /></el-form-item>
      </div>

      <div class="double">
        <el-form-item label=" 优 先 级" prop="priority">
          <el-select v-model="dataChange.priority" size="small" style="width:15vw;" placeholder="请选择优先级">
            <el-option v-for="item in priorityStrings" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="提测环境" prop="env"><el-input v-model="dataChange.env" size="small" style="width:25vw;" /></el-form-item>
      </div>

      <div class="double">
        <el-col :span="24">
          <el-form-item label="PM & UI" prop="pmUi"><el-input v-model="dataChange.pmUi" size="small" style="width:100%;" /></el-form-item>
        </el-col>
      </div>

      <div class="double">
        <el-col :span="24">
          <el-form-item label="自测结果" prop="selfTestInfo"><el-input v-model="dataChange.selfTestInfo" size="small" style="width:100%;" /></el-form-item>
        </el-col>
      </div>

      <div class="double">
        <el-col :span="24">
          <el-form-item label="需求list" prop="functionInfo"><el-input v-model="dataChange.functionInfo" size="small" style="width:85vw;margin-left:9px;" /></el-form-item>
        </el-col>
      </div>

      <div class="double">
        <el-col :span="24">
          <el-form-item label="涉及接口"><el-input v-model="dataChange.interfaceInfo" size="small" style="width:85vw;margin-left:9px;" type="textarea" :rows="5" /></el-form-item>
        </el-col>
      </div>

      <div class="double">
        <el-col :span="24">
          <el-form-item label="测试建议"><el-input v-model="dataChange.testSuggest" size="small" style="width:85vw;margin-left:9px;" type="textarea" :rows="5" /></el-form-item>
        </el-col>
      </div>

      <div class="backStyle">二. 联调详情</div>

      <div id="DetailsOfProposal" class="toolbar" />
      <div id="DetailsOfProposal1" class="text" />

      <div class="backStyle">三. 其他</div>

      <div class="double">
        <el-col :span="24">
          <el-form-item label="其他"><el-input v-model="dataChange.others" size="small" style="width:85vw;margin-left:13px;" type="textarea" :rows="5" /></el-form-item>
        </el-col>
      </div>
    </el-form>
  </div>
</template>

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

export default {
  name: 'PresentReport',
  props: {
    clienData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      priorityStrings: [{ name: 'p0', value: 0 }, { name: 'p1', value: 1 }, { name: 'p2', value: 2 }, { name: 'p3', value: 3 }],
      serviceDataRules: {
        selfTestInfo: [{ required: true, message: '自测结果不能为空', trigger: 'change' }],
        name: [{ required: true, message: '报告标题不能为空', trigger: 'change' }],
        submitter: [{ required: true, message: 'by不能为空', trigger: 'change' }],
        pmUi: [{ required: true, message: 'PM & UI不能为空', trigger: 'change' }],
        lateStatus: [{ required: false, message: '是否延期不能为空', trigger: 'change' }],
        lateReason: [{ required: true, message: '延期原因不能为空', trigger: 'change' }],
        dependent: [{ required: false, message: '依赖组建不能为空', trigger: 'change' }],
        configIn: [{ required: false, 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' }],
        configInfo: [{ required: true, message: 'Apollo名称不能为空', trigger: 'change' }],
        dependentComponents: [{ required: true, message: '组件名称不能为空', trigger: 'change' }],
        crBy: [{ required: true, message: '执行人不能为空', trigger: 'change' }]
      },
      lateStatusBtn: 'info',
      lateStatusBtn1: 'success',
      configInBtn: 'info',
      configInBtn1: 'danger',
      dependentBtn: 'info',
      dependentBtn1: 'danger',
      CodeReview: 'info',
      CodeReview1: 'danger',
      showDelay: false,
      showApollo: false,
      showRelyOn: false,
      showCodeReview: false, // 执行人
      userData: '',
      objData: '',
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      id: '',
      name: '',
      dataChange: {
        cr: 0
      },
      DetailsOfProposal: '',
      lateStatus: 1,
      bizIdCode: '',
      projectIdCode: '',
      ids: [],
      configIn: 2,
      dependent: 2,
      clien: '',
      cr: ''
    }
  },
  created() {
    this.getRouterData()
  },
  mounted() {
    this.$nextTick(function() {
      this.$on('getRouterData', function() {
        this.getRouterData()
      })
    })
    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>`)
  },
  methods: {
    getRouterData() {
      console.log(this.clienData, '提测客户端')
      this.dataChange = this.clienData
      this.dataChange.cr = 0
      this.dataChange.configIn = 2
      if (this.dataChange.id) {
        if (this.dataChange.lateStatus === 1) {
          this.lateStatusBtn1 = 'success'
          this.lateStatusBtn = 'info'
          this.lateStatus = 1
          this.showDelay = false
        } else {
          this.lateStatusBtn1 = 'info'
          this.lateStatusBtn = 'danger'
          this.lateStatus = 2
          this.showDelay = true
        }
        if (this.dataChange.configInfo !== '') {
          this.configInBtn = 'success'
          this.configInBtn1 = 'info'
          this.confidgIn = 1
          this.showApollo = true
        } else {
          this.configInBtn = 'info'
          this.configInBtn1 = 'danger'
          this.configIn = 2
          this.showApollo = false
        }
        if (this.dataChange.dependentComponents !== '') {
          this.dependentBtn = 'success'
          this.dependentBtn1 = 'info'
          this.dependent = 1
          this.showRelyOn = true
        } else {
          this.dependentBtn = 'info'
          this.dependentBtn1 = 'danger'
          this.dependent = 2
          this.showRelyOn = false
        }
        if (this.dataChange.crBy !== '' && this.fromDev.crBy !== null) { // 执行人
          this.CodeReview = 'success'
          this.CodeReview1 = 'info'
          this.dataChange.cr = 1
          this.showCodeReview = true
        } else {
          this.CodeReview = 'info'
          this.CodeReview1 = 'danger'
          this.dataChange.cr = 0
          this.$set(this.dataChange, 'crBy', '')
          this.showCodeReview = false
        }
        this.$nextTick(() => {
          this.DetailsOfProposal.txt.html(this.dataChange.joinTest)
        })
      }
      if (!this.clienData[0] === undefined) {
        Object.assign(this.$data, this.$options.data())
      }
    },
    getQueryData(ele) {
      this.$refs['dataChange'].validate((valid) => {
        if (valid) {
          this.dataChange = ele
          this.dataChange.lateStatus = this.lateStatus
          this.dataChange.id === undefined ? this.dataChange.id = this.clien : ''
          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: '更新成功' })
              this.$emit('fatherMethod', res.data)
            } else {
              this.$message.error('更新失败')
            }
          })
        } else {
          return false
        }
      })
    },
    parentHandleclick(e, task, id) { // 判断新建还是编辑
      if (e === 1) {
        this.ids = task
        this.getCreateData(this.dataChange)
      } else {
        this.clien = id
        this.getQueryData(this.dataChange)
      }
    },
    getCreateData(ele) {
      console.log(ele, '提测客户端吧')
      this.$refs['dataChange'].validate((valid) => {
        if (valid) {
          this.dataChange = ele
          this.dataChange.configInfo ? '' : this.dataChange.configInfo = ''
          this.dataChange.dependentComponents ? '' : this.dataChange.dependentComponents = ''
          typeof (this.DetailsOfProposal) === 'string' ? this.dataChange.joinTest = this.DetailsOfProposal : ''
          this.dataChange.bizId = Number(localStorage.getItem('bizId'))
          this.dataChange.taskIds = this.ids
          this.dataChange.lateStatus = this.lateStatus
          this.dataChange.type = 1
          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.success(res.msg)
              this.$emit('fatherMethod', res.data)
            }
          })
        } else {
          this.$message.error('必填项不能为空')
          return false
        }
      })
    },

    // 是否延期
    lateStatusChange(e) {
      if (e === 2) {
        this.lateStatusBtn = 'danger'
        this.lateStatusBtn1 = 'info'
        this.lateStatus = 2
        this.showDelay = true
      } else {
        this.lateStatusBtn = 'info'
        this.lateStatusBtn1 = 'success'
        this.lateStatus = 1
        this.showDelay = false
        this.$set(this.dataChange, 'lateReason', '')
      }
    },

    // 新增Apollo
    changeApollo(e) {
      if (e === 1) {
        this.configInBtn = 'success'
        this.configInBtn1 = 'info'
        this.configIn = 1
        this.showApollo = true
      } else {
        this.$set(this.dataChange, 'configInfo', '')
        this.configInBtn = 'info'
        this.configInBtn1 = 'danger'
        this.configIn = 2
        this.showApollo = false
      }
    },

    // 依赖组件
    changeRelyOn(e) {
      if (e === 1) {
        this.dependentBtn = 'success'
        this.dependentBtn1 = 'info'
        this.dependent = 1
        this.showRelyOn = true
      } else {
        this.$set(this.dataChange, 'dependentComponents', '')
        this.dependentBtn = 'info'
        this.dependentBtn1 = 'danger'
        this.dependent = 2
        this.showRelyOn = false
      }
    },

    // CodeReview
    changeCodeReview(e) {
      if (e === 1) {
        this.CodeReview = 'success'
        this.CodeReview1 = 'info'
        this.dataChange.cr = 1
        this.showCodeReview = true
      } else {
        this.CodeReview = 'info'
        this.CodeReview1 = 'danger'
        this.dataChange.cr = 0
        this.$set(this.dataChange, 'crBy', '')
        this.showCodeReview = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .eleStyle {
    width: 100%;
    height:100%;
    display: inline-block;
  }
  .backStyle {
    font-size: 17px;
    font-weight: bold;
    border-radius: 4px;
    margin: 1% 0;
  }
  .tag {
     width:80px;
     text-align: center;
     cursor:pointer
  }
  .toolbar {
    border: 1px solid #DEE2E7;
  }
  .text {
    font-size: 15px;
    color: #606266;
    border: 1px solid #DEE2E7;
    height: auto;
  }
  .CodeReview {
    /deep/ .el-form-item__label {
      width: 106px;
    }
  }

</style>
<style lang="stylus" scoped>
  .double
    display flex
    justify-content space-between
  .double >>> .el-form-item__content
    display flex
  .double >>> .el-form-item__label
    margin-right 14.19px
</style>