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

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

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

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

      <div class="double" style="white-space: nowrap;">
        <el-form-item label="* 涉及安全项">
          <el-button :type="getInfoBtn" style="margin: 0 10px;" size="small" class="tag" @click="showStatusData(2)"> 是 </el-button>
          <el-button :type="getInfoBtn1" style="margin-left: 14px;" size="small" 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" size="small" style="width: 25vw;" /></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" size="small" style="width:15vw;" placeholder="请填写" /></el-form-item>
        <el-form-item label="开发时间" prop="devTimeStart">
          <el-date-picker v-model="fromDev.devTimeStart" type="date" size="small" style="width:12.5vw; margin-right:2%;" placeholder="选择日期" />
          <el-date-picker v-model="fromDev.devTimeEnd" type="date" size="small" style="width:12.5vw;" placeholder="选择日期" />
        </el-form-item>
      </div>

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

      <div class="double">
        <el-form-item label=" prd地址 " prop="prdUrl"><el-input v-model="fromDev.prdUrl" size="small" style="width:15vw;" placeholder="请提供wiki链接" /></el-form-item>
        <el-form-item label="实际提测时间" prop="launchTime">
          <el-date-picker v-model="fromDev.launchTime" type="date" size="small" style="width:25vw;" placeholder="选择日期" />
        </el-form-item>
      </div>
      <div class="double">
        <el-col :span="24">
          <el-form-item label="设计方案" prop="devUrl"><el-input v-model="fromDev.devUrl" size="small" 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" size="small" 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" size="small" 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;" size="small" 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;" size="small" type="textarea" :rows="5" placeholder="请输入其他内容…" /></el-form-item>
        </el-col>
      </div>
    </el-form>
  </div>
</template>

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

export default {
  name: 'PresentationReport',
  props: {
    clienData: {
      type: Object,
      required: true
    }
  },
  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' }],
        safeInfo: [{ required: true, message: '完成结果不能为空', trigger: 'change' }]
      },
      objData: '',
      lateStatusBtn: 'info',
      lateStatusBtn1: 'info',
      getInfoBtn: 'info',
      getInfoBtn1: 'info',
      userData: '',
      showDelay: false,
      labelWidth: '60px',
      lateStatus: '',
      getInfo: '',
      fromDev: {},
      ids: [],
      editorContent: '',
      showData: false,
      DetailsOfProposal: '',
      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() {
      console.log(this.clienData, '提测服务端')
      this.fromDev = this.clienData
      if (this.fromDev.id) {
        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.$nextTick(() => {
          this.fromDev.joinTest !== null ? this.editorContent.txt.html(this.fromDev.joinTest) : ''
          this.fromDev.moduleInfo !== null ? this.DetailsOfProposal.txt.html(this.fromDev.moduleInfo) : ''
        })
      }
    },
    getQueryData(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.lateStatus = this.lateStatus
          this.fromDev.id === undefined ? this.fromDev.id = this.clien : ''
          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.$emit('fatherMethod', res.data)
            } else {
              this.$message.error('更新失败')
            }
          })
        } else {
          return false
        }
      })
    },
    parentHandleclick(e, task, id) { // 判断创建还是编辑
      if (e === 1) {
        this.ids = task
        this.getCreateData(this.fromDev)
      } else {
        this.clien = id
        this.getQueryData(this.fromDev)
      }
    },
    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.bizId = Number(localStorage.getItem('bizId'))
          this.fromDev.taskIds = this.ids
          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.success(res.msg)
              this.$emit('fatherMethod', res.data)
            }
          })
        } 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
      }
    }
  }
}
</script>

<style scoped>
.eleStyle {
    width: 100%;
    height:100%;
    display: inline-block;
  }
  .tag {
     width:60px;
     text-align: center;
     cursor:pointer
  }
  .backStyle {
    font-size: 17px;
    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>