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

<template>
  <!-- 准出报告，新增客户端报告 -->
  <el-form ref="ClientData" :inline="true" :model="ClientData" :rules="serviceDataRules" style="margin:7% 3%;">
    <el-row :gutter="20">
      <el-col :span="13">
        <el-form-item class="backStyle" prop="reportName">
          <el-input v-model="ClientData.reportName" style="width:40vw;" placeholder="报告标题(xxx项目准出报告)" />
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="by" prop="ownner" style="margin: 20px 0 0 60px;margin-left:70px;background: white">
          <el-input v-model="ClientData.ownner" style="width:20vw; 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="backStyle" /></el-col></el-row>
    <el-row :gutter="20" type="flex">
      <el-col :span="12">
        <el-form-item label="测试结果" class="backStyle" prop="status">
          <el-radio-group v-model="ClientData.status">
            <el-radio style="margin: 0 90px;" label="1" @change="changeStatus(1)">通过</el-radio>
            <el-radio style="padding-right: 140px;" label="2" @change="changeStatus">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="准入结果" prop="smokeTestResult" class="backStyle" style="margin-left:77px;"><el-input v-model="ClientData.smokeTestResult" style="width:30.5vw;" placeholder="准入次数/通过次数/失败次数" /></el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="23">
      <el-col :span="23">
        <el-form-item label="开发人员" prop="developer" class="backStyle"><el-input v-model=" ClientData.developer" style="width:30.5vw;" /></el-form-item>
        <el-form-item label="开发周期" prop="devTimeEnd" class="backStyle" style="margin-left:80px;">
          <el-date-picker v-model="ClientData.devTimeEnd" style="width:14.5vw;" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" /> —
          <el-date-picker v-model="ClientData.devTimeStart" style="width:14.5vw;" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="23">
      <el-col :span="23">
        <el-form-item label="测试人员" prop="tester" class="backStyle"><el-input v-model="ClientData.tester" style="width:30.5vw;" /></el-form-item>
        <el-form-item label="测试周期" prop="testTimeEnd" class="backStyle" style="margin-left:80px;">
          <el-date-picker v-model="ClientData.testTimeEnd" style="width:14.5vw;" type="date" placeholder="选择日期" /> —
          <el-date-picker v-model="ClientData.testTimeStart" style="width:14.5vw;" type="date" placeholder="选择日期" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex">
      <el-col :span="12">
        <el-form-item label="准出延期" class="backStyle" prop="taskLateStatus">
          <el-radio-group v-model="ClientData.taskLateStatus">
            <el-radio style="margin: 0 90px;" label="2" @change="clickshow">否</el-radio>
            <el-radio style="padding-right: 177px;" label="1" @change="clickshow(1)">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="showDelay" prop="taskLateReason" label="延期原因" class="backStyle" style="margin-left:82px;"><el-input v-model="ClientData.taskLateReason" style="width:30.5vw;" /></el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="二、项目背景" class="backStyle" />

    <div id="editorElem" class="toolbar" />
    <div id="editorElem1" class="text" style="text-align:left;cellspacing:0;cellpadding:0;min-height:100px;" />

    <el-form-item label="三、测试项" class="backStyle" />
    <p class="p">功能测试 <el-radio-group v-model="pftResult"> <el-radio :label="3">未执行</el-radio><el-radio :label="1">测试通过</el-radio><el-radio :label="2">测试未通过</el-radio></el-radio-group></p>

    <div id="editorElems" class="toolbar" />
    <div id="editorElems1" class="text" style="text-align:left;cellspacing:0;cellpadding:0;min-height:100px;" />

    <p class="p">兼容测试<el-radio-group v-model="sctResult"><el-radio :label="1">测试通过</el-radio><el-radio :label="2">测试未通过</el-radio></el-radio-group></p>

    <div id="editorFrom" class="toolbar" />
    <div id="editorFrom1" class="text" style="text-align:left;cellspacing:0;cellpadding:0;min-height:100px;" />

    <el-form-item label="四、产品验收" class="backStyle" />
    <el-row :gutter="20">
      <el-col :span="6">
        <p class="p">验收结果<el-radio-group v-model="acceptanceResult"><el-radio :label="3">未执行</el-radio><el-radio :label="1">测试通过</el-radio><el-radio :label="2">测试未通过</el-radio></el-radio-group></p>
      </el-col>
    </el-row>
    <div id="editorFro" class="toolbar" />
    <div id="editorFro1" class="text" style="text-align:left;cellspacing:0;cellpadding:0;min-height:100px;" />

    <el-form-item label="五、bug指标" class="backStyle" />

    <div id="editorEle" class="toolbar" />
    <div id="editorEle1" class="text" style="text-align:left;cellspacing:0;cellpadding:0;min-height:100px;" />

    <el-row :gutter="24" style="margin:70px 0 0 150px;" type="flex" justify="center">
      <el-col :span="8"><el-button type="info" @click="clickPreview(ClientData)"> 预 览 </el-button></el-col>
      <el-col v-show="showButton" :span="8"><el-button type="info" @click="getCreateData(ClientData)"> 保 存 </el-button></el-col>
      <el-col v-show="showButton1" :span="8"><el-button type="info" @click="getQueryData(ClientData)"> 更 新 </el-button></el-col>
      <el-col :span="8"><el-button type="info" @click="open(ClientData)"> 取 消 </el-button></el-col>
    </el-row>
  </el-form>
</template>

<script>
import { projectTestReportUpdate, projectTestReportCreate } from '@/api/ResultPage'
import E from 'wangeditor'
export default {
  name: 'ClientAcceptance',
  data() {
    return {
      userData: '',
      objData: '',
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      bizIdData: localStorage.getItem('key'),
      serviceDataRules: {
        reportName: [{ required: true, message: '报告标题不能为空', trigger: 'change' }],
        ownner: [{ required: true, message: 'by不能为空', trigger: 'change' }],
        status: [{ required: true, message: '测试结果不能为空', trigger: 'change' }],
        taskLateStatus: [{ required: true, message: '准出延期不能为空', trigger: 'change' }],
        taskLateReason: [{ required: true, message: '延期原因不能为空', trigger: 'change' }],
        smokeTestResult: [{ required: true, message: '准入结果不能为空', trigger: 'change' }],
        developer: [{ required: true, message: '开发人员不能为空', trigger: 'change' }],
        devTimeEnd: [{ required: true, message: '开发周期不能为空', trigger: 'change' }],
        tester: [{ required: true, message: '测试人员不能为空', trigger: 'change' }],
        testTimeEnd: [{ required: true, message: '测试周期不能为空', trigger: 'change' }]
      },
      showButton: true,
      showButton1: '',
      content: null,
      editorContent: '',
      showDelay: false,
      labelWidth: '60px',
      status: '',
      taskLateStatus: '',
      pftResult: '',
      sctResult: '',
      acceptanceResult: '',
      ClientData: {},
      editorElem: [],
      editorElems: []
    }
  },
  created() {
    this.getRouterData()
  },
  mounted() {
    this.editorElem = new E('#editorElem', '#editorElem1')
    this.editorElems = new E('#editorElems', '#editorElems1')
    this.editorFrom = new E('#editorFrom', '#editorFrom1')
    this.editorFro = new E('#editorFro', '#editorFro1')
    this.editorEle = new E('#editorEl', '#editorEle1')

    this.editorElem.customConfig.zIndex = 110
    this.editorElems.customConfig.zIndex = 110
    this.editorFrom.customConfig.zIndex = 110
    this.editorFro.customConfig.zIndex = 110
    this.editorEle.customConfig.zIndex = 110

    this.editorElem.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify']
    this.editorElems.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify']
    this.editorFrom.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify']
    this.editorFro.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify']
    this.editorEle.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify']

    this.editorElem.customConfig.onchange = (html) => { this.editorElem = html }
    this.editorElems.customConfig.onchange = (html) => { this.editorElems = html }
    this.editorFrom.customConfig.onchange = (html) => { this.editorFrom = html }
    this.editorFro.customConfig.onchange = (html) => { this.editorFro = html }
    this.editorEle.customConfig.onchange = (html) => { this.editorEle = html }

    this.editorElem.create()
    this.editorElems.create()
    this.editorFrom.create()
    this.editorFro.create()
    this.editorEle.create()

    this.editorElems.txt.html(`<p></p><table width="100%"><colgroup><col width="20%"><col width="20%"><col width="20%"><col width="20%"><col width="20%"></colgroup><thead><tr><th>页面</th><th>模块</th><th>接口</th><th>测试结果</th><th>备注</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table><p></p>`)
    this.editorFrom.txt.html(`<p>1、机型兼容</p><table width="100%"><colgroup><col width="20%"><col width="20%"><col width="20%"><col width="20%"></colgroup><thead><tr><th>手机型号</th><th>操作系统</th><th>分辨率</th><th>（微信版本号）</tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table><p>2、网络兼容</p><table width="100%"><colgroup><col width="20%"><col width="20%"><col width="20%"></colgroup><thead><tr><th>WIFI</th><th>4G</th><th>5G</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>3、容器兼容</p><br>`)
    this.editorFro.txt.html(`<p></p><table width="100%"><colgroup><col width="20%"><col width="20%"><col width="20%"><col width="20%"><col width="20%"></colgroup><thead><tr><th>验收项</th><th>验收点</th><th>验收人</th><th>验收结果</th><th>备注</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table><p></p>`)
    this.editorEle.txt.html(`<p></p><table width="100%"><colgroup><col width="20%"><col width="20%"><col width="20%"><col width="20%"><col width="20%"></colgroup><thead><tr><th>bug总数</th><th>已解决bug数</th><th>遗留bug数</th><th>bug解决率</th><th>备注</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table><p>遗留问题：</p><br>`)
    this.getRouterData1()
  },
  methods: {
    getRouterData() {
      this.showButton = true
      this.showButton1 = false
      if (this.$route.query.data) {
        this.showButton1 = true
        this.showButton = false
        this.ClientData = this.$route.query.data
        this.pftResult = this.ClientData.pftResult
        this.sctResult = this.ClientData.sctResult
        if (this.ClientData.status === 1) {
          this.status = '1'
          this.ClientData.status = '1'
        } else {
          this.status = '2'
          this.ClientData.status = '2'
        }
        if (this.ClientData.taskLateStatus === 1) {
          this.taskLateStatus = '1'
          this.ClientData.taskLateStatus = '1'
          this.showDelay = true
        } else {
          this.taskLateStatus = '2'
          this.ClientData.taskLateStatus = '2'
          this.showDelay = false
        }
      }
    },
    getRouterData1() {
      this.editorElem.txt.html(this.ClientData.projectBackground)
      this.editorElems.txt.html(this.ClientData.fctInfo)
      this.editorFrom.txt.html(this.ClientData.sctInfo)
      this.editorFro.txt.html(this.ClientData.acceptanceResultInfo)
      this.editorEle.txt.html(this.ClientData.bugTarget)
    },
    open(ele) {
      this.$confirm('是否放弃修改，离开页面？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '继续修改',
        cancelButtonText: '放弃修改'
      })
        .then(() => { this.$message({ type: 'info', message: '继续修改' }) })
        .catch(action => { action === 'cancel' ? this.$router.go(-1) : '' })
    },
    getCreateData(ele) {
      this.$refs['ClientData'].validate((valid) => {
        if (valid) {
          this.ClientData = ele
          typeof (this.editorElem) === 'string' ? this.ClientData.projectBackground = this.editorElem : ''
          typeof (this.editorElems) === 'string' ? this.ClientData.fctInfo = this.editorElems : ''
          typeof (this.editorFrom) === 'string' ? this.ClientData.sctInfo = this.editorFrom : ''
          typeof (this.editorFro) === 'string' ? this.ClientData.acceptanceResultInfo = this.editorFro : ''
          typeof (this.editorEle) === 'string' ? this.ClientData.bugTarget = this.editorEle : ''
          this.ClientData.pftResult = this.pftResult
          this.ClientData.sctResult = this.sctResult
          this.ClientData.acceptanceResult = this.acceptanceResult
          this.ClientData.taskId = this.$route.query.id
          this.ClientData.bizId = this.bizIdData
          this.ClientData.status = this.status
          this.ClientData.taskLateStatus = this.taskLateStatus
          this.ClientData.type = 1
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { projectTestReport: this.ClientData, user: this.userData }
          projectTestReportCreate(this.objData).then(res => {
            if (res.code === 200) {
              this.$message({ type: 'success', message: '保存成功' })
              this.$router.go(-1)
            } else {
              this.$message.error('保存失败')
            }
          })
        } else {
          return false
        }
      })
    },
    getQueryData(ele) {
      this.ClientData = ele
      typeof (this.editorElem) === 'string' ? this.ClientData.projectBackground = this.editorElem : ''
      typeof (this.editorElems) === 'string' ? this.ClientData.fctInfo = this.editorElems : ''
      typeof (this.editorFrom) === 'string' ? this.ClientData.sctInfo = this.editorFrom : ''
      typeof (this.editorFro) === 'string' ? this.ClientData.acceptanceResultInfo = this.editorFro : ''
      typeof (this.editorEle) === 'string' ? this.ClientData.bugTarget = this.editorEle : ''
      this.ClientData.pftResult = this.pftResult
      this.ClientData.sctResult = this.sctResult
      this.ClientData.acceptanceResult = this.acceptanceResult
      this.ClientData.status = this.status
      this.ClientData.taskLateStatus = this.taskLateStatus
      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
      this.objData = { projectTestReport: this.ClientData, user: this.userData }
      projectTestReportUpdate(this.objData).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: '更新成功' })
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    clickPreview(ele) {
      this.$router.push({ path: '/Platform/presentation/ResultPageyL', query: { data: ele }})
    },
    clickshow(e) {
      e === 1 ? this.taskLateStatus = '1' : this.taskLateStatus = '2'
      e === 1 ? this.showDelay = true : this.showDelay = false
    },
    changeStatus(e) {
      e === 1 ? this.status = '1' : this.status = '2'
    }
  }
}
</script>

<style scoped>
  .el-col {
    white-space:nowrap;
  }
  .backStyle {
    margin:20px 0;
    background: #ccc;
    border-radius: 4px;
    padding:2px;
  }
  .toolbar {
     width: 79vw;
    border: 2px solid #ccc;
  }
  .text {
    font-size: 15px;
    color:#606266;
     width: 79vw;
    border: 2px solid #ccc;
    height: aotu;
  }
  .p {
    font-size: 15px;
    color:#606266;
  }
</style>