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

<template>
  <!-- 提测报告，新增服务端报告 -->
  <div class="eleStyle">
    <div style="height:100%;width:94%; background:#ffffff; margin: 3%; border-radius: 8px; overflow: hidden;">
      <el-form ref="fromDev" :model="fromDev" :rules="serviceDataRules" style="margin: 2% 3%;">
        <div class="double">
          <el-form-item label="标题" prop="name">
            <el-input v-model="fromDev.name" style="width:50vw;" placeholder="报告标题(端-版本-需求提测报告)" />
          </el-form-item>
          <el-form-item label="by" prop="submitter">
            <el-input v-model="fromDev.submitter" style="width: 25vw;" placeholder="who" />
          </el-form-item>
        </div>

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

        <div class="double" style="white-space: nowrap;">
          <el-form-item label="* 是否延期">
            <div style="margin-left: 15px;">
              <el-button :type="lateStatusBtn" style="margin: 0 10px;" class="tag" @click="lateStatusChange(2)"> 是 </el-button>
              <el-button :type="lateStatusBtn1" class="tag" @click="lateStatusChange(1)"> 否 </el-button>
            </div>
          </el-form-item>
          <el-form-item v-if="showDelay" label="延期原因" prop="lateReason"><el-input v-model="fromDev.lateReason" style="width: 50vw;" /></el-form-item>
        </div>

        <div class="double" style="white-space: nowrap;">
          <el-form-item label="* 涉及安全项">
            <el-button :type="getInfoBtn" style="margin: 0 10px;" class="tag" @click="showStatusData(2)"> 是 </el-button>
            <el-button :type="getInfoBtn1" style="margin-left: 14px;" class="tag" @click="showStatusData(1)"> 否 </el-button>
          </el-form-item>
          <el-form-item v-if="showData" label="完成结果" prop="safeInfo"><el-input v-model="fromDev.safeInfo" style="width: 50vw;" /></el-form-item>
        </div>

        <el-form-item label="SDL链接 : "><el-link href="http://wiki.intra.xiaojukeji.com/pages/viewpage.action?pageId=237016271" type="primary" target="_blank"> 普惠SDL准入标准</el-link></el-form-item>

        <div class="double">
          <el-form-item label="是否跟版" prop="isEdition"><el-input v-model="fromDev.isEdition" style="width:30vw;" placeholder="请填写" /></el-form-item>
          <el-form-item label="开发时间" prop="devTimeStart">
            <el-date-picker v-model="fromDev.devTimeStart" type="date" style="width:20vw; margin-right:2%;" placeholder="选择日期" />
            <el-date-picker v-model="fromDev.devTimeEnd" type="date" style="width:20vw;" placeholder="选择日期" />
          </el-form-item>
        </div>

        <div class="double">
          <el-form-item label=" 优 先 级" prop="priority">
            <el-select v-model="fromDev.priority" style="width:30vw;" 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="planLaunchTime">
            <el-date-picker v-model="fromDev.planLaunchTime" type="date" style="width:40vw;" placeholder="选择日期" />
          </el-form-item>
        </div>

        <div class="double">
          <el-form-item label=" prd地址 " prop="prdUrl"><el-input v-model="fromDev.prdUrl" style="width:30vw;" placeholder="请提供wiki链接" /></el-form-item>
          <el-form-item label="实际提测时间" prop="launchTime">
            <el-date-picker v-model="fromDev.launchTime" type="date" style="width:40vw;" placeholder="选择日期" />
          </el-form-item>
        </div>
        <div class="double">
          <el-col :span="24">
            <el-form-item label="设计方案" prop="devUrl"><el-input v-model="fromDev.devUrl" style="width:85vw;" placeholder="请提供wiki链接，包含接口定义，数据库改动，依赖关系" /></el-form-item>
          </el-col>
        </div>

        <div class="double">
          <el-col :span="24">
            <el-form-item label="自测结果" prop="selfTestInfo"><el-input v-model="fromDev.selfTestInfo" style="width:85vw;" placeholder="请提供wiki链接（提测前QA需提供准人case）" /></el-form-item>
          </el-col>
        </div>
        <div class="double">
          <el-col :span="24">
            <el-form-item label="测试建议" prop="testSuggest"><el-input v-model="fromDev.testSuggest" style="width:83.5vw;" type="textarea" :rows="5" placeholder="改动点影响分析：是否影响老功能，那些老功能需要回归接口是否影响上下游系统，有没有通知相关人性能，安全" /></el-form-item>
          </el-col>
        </div>
        <el-form-item label="提测模块" style="margin: 2px 0;" />
        <div id="DetailsOfProposal" class="toolbar" />
        <div id="DetailsOfProposal1" class="text" />

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

        <div id="editorContent" class="toolbar" />
        <div id="editorContent1" class="text" />

        <div class="backStyle">三. 其他</div>
        <div class="double">
          <el-col :span="24">
            <el-form-item label="新增配置"><el-input v-model="fromDev.configInfo" style="width:85vw;" type="textarea" :rows="2" placeholder="全局变量、kdiamond配置、降级点、新增topic等，disconf配置，apollo配置说明用途" /></el-form-item>
          </el-col>
        </div>
        <div class="double" align="right">
          <el-col :span="24">
            <el-form-item label="其他"><el-input v-model="fromDev.others" style="padding-left: 25px; text-align: right; width: 85vw;" type="textarea" :rows="5" placeholder="请输入其他内容…" /></el-form-item>
          </el-col>
        </div>

        <div class="double" align="right" style="margin: 5vw 0 3vw 60vw;">
          <div><el-button @click="clickPreview(fromDev)"> 预 览 </el-button></div>
          <div v-show="showButton"><el-button type="primary" @click="getCreateData(fromDev)"> 保 存 </el-button></div>
          <div v-show="showButton1"><el-button type="primary" @click="getQueryData(fromDev)"> 更 新 </el-button></div>
          <div><el-button @click="open(fromDev)"> 取 消 </el-button></div>
        </div>
      </el-form>
    </div>
  </div>
</template>

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

export default {
  name: 'PresentationReport',
  data() {
    return {
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      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' }],
        devTimeStart: [{ required: true, message: '开发时间不能为空', trigger: 'change' }],
        safeInfo: [{ required: false, message: '涉及安全项不能为空', trigger: 'change' }],
        lateStatus: [{ required: false, message: '是否延期不能为空', trigger: 'change' }],
        lateReason: [{ required: true, message: '延期原因不能为空', trigger: 'change' }],
        planLaunchTime: [{ required: true, message: '计划提测时间不能为空', trigger: 'change' }],
        launchTime: [{ required: true, message: '实际提测时间不能为空', trigger: 'change' }],
        priority: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
        prdUrl: [{ required: true, message: 'prd地址不能为空', trigger: 'change' }],
        devUrl: [{ required: true, message: '设计方案不能为空', trigger: 'change' }],
        selfTestInfo: [{ required: true, message: '自测结果不能为空', trigger: 'change' }],
        testSuggest: [{ required: true, message: '测试建议不能为空', trigger: 'change' }],
        isEdition: [{ required: true, message: '是否跟版不能为空', trigger: 'change' }],
        getInfo: [{ required: true, message: '涉及安全项不能为空', trigger: 'change' }]
      },
      objData: '',
      lateStatusBtn: 'info',
      lateStatusBtn1: 'info',
      getInfoBtn: 'info',
      getInfoBtn1: 'info',
      showButton: true,
      showButton1: false,
      userData: '',
      showDelay: false,
      labelWidth: '60px',
      lateStatus: '',
      getInfo: '',
      fromDev: {},
      editorContent: '',
      showData: false,
      DetailsOfProposal: '',
      bizIdCode: '',
      projectIdCode: ''
    }
  },
  created() {
    this.getRouterData()
  },
  mounted() {
    this.editorContent = new E('#editorContent', '#editorContent1')
    this.DetailsOfProposal = new E('#DetailsOfProposal', '#DetailsOfProposal1')

    this.editorContent.customConfig.zIndex = 110
    this.DetailsOfProposal.customConfig.zIndex = 110

    this.editorContent.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table']
    this.DetailsOfProposal.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table']

    this.editorContent.customConfig.onchange = (html) => { this.editorContent = html }
    this.DetailsOfProposal.customConfig.onchange = (html) => { this.DetailsOfProposal = html }

    this.editorContent.create()
    this.DetailsOfProposal.create()

    this.editorContent.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.DetailsOfProposal.txt.html(`<p></p><table width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>提测模块</th><th>提测分支</th><th>对应RD</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() {
      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
        launchTest({ id: this.$route.query.id }).then((res) => {
          this.fromDev = res.data
          if (this.fromDev.lateReason !== '') {
            this.lateStatusBtn1 = 'info'
            this.lateStatusBtn = 'danger'
            this.lateStatus = 2
            this.showDelay = true
          } else {
            this.lateStatusBtn1 = 'success'
            this.lateStatusBtn = 'info'
            this.lateStatus = 1
            this.showDelay = false
          }
          if (this.fromDev.safeInfo !== '') {
            this.getInfoBtn1 = 'info'
            this.getInfoBtn = 'danger'
            this.lateStatus = 2
            this.showData = true
          } else {
            this.getInfoBtn1 = 'success'
            this.getInfoBtn = 'info'
            this.lateStatus = 1
            this.showData = false
            this.$set(this.fromDev, 'safeInfo', '')
          }
          this.editorContent.txt.html(this.fromDev.joinTest)
          this.DetailsOfProposal.txt.html(this.fromDev.moduleInfo)
        })
      }
    },
    getQueryData(ele) {
      this.fromDev = ele
      typeof (this.editorContent) === 'string' ? this.fromDev.joinTest = this.editorContent : ''
      typeof (this.DetailsOfProposal) === 'string' ? this.fromDev.moduleInfo = this.DetailsOfProposal : ''
      this.fromDev.lateStatus = this.lateStatus
      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
      this.objData = { launchTestInfo: this.fromDev, user: this.userData }
      launchTestUpdate(this.objData).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: '更新成功' })
          this.$router.go(-1)
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    open(ele) {
      this.$confirm('是否放弃修改，离开页面？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '继续修改',
        cancelButtonText: '放弃修改'
      })
        .then(() => { this.$message({ type: 'info', message: '继续修改' }) })
        .catch(action => { action === 'cancel' ? this.$router.push({ path: '/Platform/presentation/Assumptions' }) : '' })
    },
    getCreateData(ele) {
      this.$refs['fromDev'].validate((valid) => {
        if (valid) {
          this.fromDev = ele
          typeof (this.editorContent) === 'string' ? this.fromDev.joinTest = this.editorContent : ''
          typeof (this.DetailsOfProposal) === 'string' ? this.fromDev.moduleInfo = this.DetailsOfProposal : ''
          this.fromDev.lateReason = ele.lateReason
          this.fromDev.lateStatus = this.lateStatus
          this.fromDev.projectId = this.$route.query.task.projectId
          if (this.$route.query.task) { // 任务提测
            this.fromDev.bizId = this.bizIdCode
            this.fromDev.taskId = this.projectIdCode
          }
          this.fromDev.type = 2
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { launchTestInfo: this.fromDev, 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 {
          return false
        }
      })
    },
    lateStatusChange(e) {
      if (e === 1) {
        this.lateStatusBtn1 = 'success'
        this.lateStatusBtn = 'info'
        this.lateStatus = 1
        this.showDelay = false
        this.$set(this.fromDev, 'lateReason', '')
      } else {
        this.lateStatusBtn1 = 'info'
        this.lateStatusBtn = 'danger'
        this.lateStatus = 2
        this.showDelay = true
      }
    },
    showStatusData(e) {
      if (e === 1) {
        this.getInfoBtn1 = 'success'
        this.getInfoBtn = 'info'
        this.showData = false
        this.$set(this.fromDev, 'safeInfo', '')
      } else {
        this.getInfoBtn1 = 'info'
        this.getInfoBtn = 'danger'
        this.showData = true
      }
    },

    clickPreview(ele) {
      this.$router.push({ path: '/Platform/presentation/acceptTheReport', query: { id: this.$route.query.id }})
    }
  }
}
</script>

<style scoped>
.eleStyle {
    width: 100%;
    height:100%;
    background:#F2F3F6;
    display: inline-block;
  }
  .tag {
     width:80px;
     text-align: center;
     cursor:pointer
  }
  .backStyle {
    font-size: 19px;
    font-weight: bold;
    border-radius: 4px;
    margin: 1% 0;
  }
  .toolbar {
    border: 2px solid #DEE2E7;
  }
  .text {
   font-size: 15px;
   color: #606266;
   border: 2px solid #DEE2E7;
   height: auto;
  }
</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>