thoth-frontend-test/src/views/projectManage/taskList/taskPreview.vue

<template>
  <div class="set-background">
    <div style="width:96%">
      <div class="block">
        <div class="operate-flex">
          <div style="width:100%">
            <span>状态</span>
            <el-select v-model="form.status" size="medium" style="width:30%;margin-right: 15px;" clearable placeholder="状态" @change="updateaddTaskData(form)">
              <el-option v-for="item in processStatusEnumList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
            <span>优先级</span>
            <el-select v-model="form.priority" size="medium" style="width:30%;margin-right: 15px;" clearable placeholder="优先级" @change="updateaddTaskData(form)">
              <el-option v-for="item in bugLevelStr" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </div>
          <div style="display:flex">
            <el-button type="primary" plain size="medium" @click="createReport(1, form)">新建提测报告</el-button>
            <el-button type="primary" plain size="medium" @click="createReport(2, form)">新建日报报告</el-button>
            <el-button type="primary" plain size="medium" @click="createReport(3, form)">新建准出报告</el-button>
            <el-button type="primary" plain size="medium" @click="createReport(4, form)">新建bug</el-button>
            <el-button type="primary" plain size="medium" @click="projectShowData(form.id)">编辑</el-button>
          </div>
        </div>
        <div class="display-messege">
          <span style="font-weight:bold;">任务名称 :</span>&nbsp;&nbsp;&nbsp;{{ form.name }}
        </div>
        <div class="display-messege">
          <div class="divide-fourparts"><span style="font-weight:bold;">业务线 :</span>&nbsp;&nbsp;&nbsp;{{ form.bizIdString }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">任务类型 :</span>&nbsp;&nbsp;&nbsp;{{ form.taskType }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">产品 :</span>&nbsp;&nbsp;&nbsp;{{ form.pm }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">分组 :</span>&nbsp;&nbsp;&nbsp;{{ form.group }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-fourparts"><span style="font-weight:bold;">平台类型 :</span>&nbsp;&nbsp;&nbsp;{{ form.typeString }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">是否免测 :</span>&nbsp;&nbsp;&nbsp;{{ form.noTestString }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">测试 :</span>&nbsp;&nbsp;&nbsp;{{ form.qa }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">标签 :</span>&nbsp;&nbsp;&nbsp;{{ form.tag }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-fourparts"><span style="font-weight:bold;">业务模块 :</span>&nbsp;&nbsp;&nbsp;{{ form.clientTypeString }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">打回次数 :</span>&nbsp;&nbsp;&nbsp;{{ form.reopen }}</div>
          <div class="divide-fourparts"><span style="font-weight:bold;">开发 :</span>&nbsp;&nbsp;&nbsp;{{ form.rd }}</div>
        </div>
        <div class="display-messege-end-one">
          <div class="divide-fullparts"><span style="font-weight:bold;">描述 :</span>&nbsp;&nbsp;&nbsp;{{ form.description }}</div>
        </div>
        <div class="display-messege-end">
          <div class="divide-fullparts"><span style="font-weight:bold;">技术文档 :</span>&nbsp;&nbsp;&nbsp;{{ form.devUrl }}</div>
        </div>
        <div class="display-messege-end">
          <div class="divide-fullparts"><span style="font-weight:bold;">需求文档 :</span>&nbsp;&nbsp;&nbsp;{{ form.mrdUrl }}</div>
        </div>
      </div>
      <div class="block">
        <el-tabs v-model="activeName">
          <el-tab-pane label="提测报告" name="first">
            <el-table
              :data="listTaskDatas"
              height="215"
              border
              style="width: 100%"
              size="medium"
            >
              <el-table-column
                prop="id"
                label="ID"
                align="center"
                width="80"
              />
              <el-table-column
                prop="name"
                label="标题名称"
                align="center"
              >
                <template slot-scope="scope">
                  <el-link style="font-weight: 400;" type="primary" :underline="false" @click="JumpDetection(scope.row.id)">{{ scope.row.name }}</el-link>
                </template>
              </el-table-column>
              <el-table-column
                label="状态"
                align="center"
                width="130"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.statusString === '打回' ? 'danger' : 'success'"
                    disable-transitions
                  >{{ scope.row.statusString }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="gmtCreate"
                label="创建时间"
                align="center"
              />
              <el-table-column
                label="操作"
                align="center"
                width="300"
              >
                <template slot-scope="scope">
                  <div>
                    <el-button size="mini" type="primary" plain @click="pass(1,scope.row.id)">通过</el-button>
                    <el-button size="mini" type="danger" plain @click="back(2,scope.row.id)">打回</el-button>
                    <el-dialog
                      title="打回原因"
                      :visible.sync="centerDialogVisible"
                      width="30%"
                    >
                      <el-input v-model="CallBackTheReason" type="textarea" :rows="3" />
                      <span slot="footer" class="dialog-footer">
                        <el-button type="primary" size="mini" @click="passOrBackSend()">确 定</el-button>
                        <el-button type="danger" size="mini" @click="centerDialogVisible = false">取 消</el-button>
                      </span>
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="日报报告" name="second">
            <el-table
              :data="dailyTestReports"
              height="215"
              border
              style="width: 100%"
              size="medium"
            >
              <el-table-column
                prop="id"
                label="ID"
                align="center"
                width="80"
              />
              <el-table-column
                prop="reportName"
                label="标题名称"
                align="center"
              >
                <template slot-scope="scope">
                  <el-link style="font-weight: 400;" type="primary" :underline="false" @click="JumpDaily(scope.row.id)">{{ scope.row.reportName }}</el-link>
                </template>
              </el-table-column>
              <el-table-column
                prop="gmtCreate"
                label="创建时间"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="准出报告" name="third">
            <el-table
              :data="projectTestReports"
              height="215"
              border
              style="width: 100%"
              size="medium"
            >
              <el-table-column
                prop="id"
                label="ID"
                align="center"
                width="80"
              />
              <el-table-column
                prop="reportName"
                label="标题名称"
                align="center"
              >
                <template slot-scope="scope">
                  <el-link style="font-weight: 400;" type="primary" :underline="false" @click="JumpOut(scope.row.id)">{{ scope.row.reportName }}</el-link>
                </template>
              </el-table-column>
              <el-table-column
                label="状态"
                align="center"
                width="130"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.statusString === '打回' ? 'danger' : 'success'"
                    disable-transitions
                  >{{ scope.row.statusString }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="gmtCreate"
                label="创建时间"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="Bug报告" name="forth">
            <el-table
              :data="projectBug"
              height="215"
              border
              style="width: 100%"
              size="medium"
            >
              <el-table-column
                prop="id"
                label="ID"
                align="center"
                width="80"
              />
              <el-table-column
                prop="bugName"
                label="标题名称"
                align="center"
              >
                <template slot-scope="scope">
                  <el-link style="font-weight: 400;" type="primary" :underline="false" @click="turnToBugCreate(scope.row.id)">{{ scope.row.bugName }}</el-link>
                </template>
              </el-table-column>
              <el-table-column
                label="状态"
                align="center"
                width="130"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.bugStatusName === '打回' ? 'danger' : 'success'"
                    disable-transitions
                  >{{ scope.row.bugStatusName }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="gmtCreate"
                label="创建时间"
                align="center"
              />
              <el-table-column
                prop="currentHandler"
                label="当前处理人"
                align="center"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="block-end">
        <div class="display-messege">
          <div class="divide-twoparts"><span style="font-weight:bold;">需求评审时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.mrdTime }}</div>
          <div class="divide-twoparts"><span style="font-weight:bold;">计划提测时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.launchTestPlanTime }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-twoparts"><span style="font-weight:bold;">计划开始开发时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.startDevPlanTime }}</div>
          <div class="divide-twoparts"><span style="font-weight:bold;">计划测试完成时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.testFinishPlanTime }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-twoparts"><span style="font-weight:bold;">计划上线时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.onlinePlanTime }}</div>
          <div class="divide-twoparts"><span style="font-weight:bold;">冒烟测试完成时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.smokeTestFinishTime }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-twoparts"><span style="font-weight:bold;">实际提测时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.launchTestRealTime }}</div>
          <div class="divide-twoparts"><span style="font-weight:bold;">实际上线时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.onlineRealTime }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-twoparts"><span style="font-weight:bold;">实际开始开发时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.startDevRealTime }}</div>
          <div class="divide-twoparts"><span style="font-weight:bold;">实际测试完成时间 :</span>&nbsp;&nbsp;&nbsp;{{ form.testFinishRealTime }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-fullparts"><span style="font-weight:bold;">备注 :</span>&nbsp;&nbsp;&nbsp;{{ form.remark }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTaskData, launchTestUpdate, updateTaskList } from '@/api/projectPage.js'
import { bugGetEnum } from '@/api/defectManage' // 下拉菜单data

export default {
  data() {
    return {
      form: {},
      CallBackTheReason: '',
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      bizJson: localStorage.getItem('key'),
      listTaskDatas: [], // 提测报告table
      dailyTestReports: [], // 日报报告table
      projectTestReports: [], // 准出报告table
      projectBug: [], // bug报告table
      CallBackStatus: '',
      CallBackId: '',
      centerDialogVisible: false,
      processStatusEnumList: [],
      bugLevelStr: [],
      activeName: 'first'
    }
  },
  created() {
    this.bugListSelect()
    this.getList()
  },
  methods: {
    // id get
    getList() {
      getTaskData(this.$route.query.id).then(res => {
        this.form = res.data
        this.listTaskDatas = res.data.launchTestInfoList
        // this.listTaskDatas.statusString = this.form.statusString
        this.projectTestReports = res.data.projectTestReports
        // this.projectTestReports.statusString = this.form.statusString
        this.dailyTestReports = res.data.dailyTestReports
        this.projectBug = res.data.bugBaseInfoDOS
      })
    },
    // 打回
    back(e, ele) {
      this.centerDialogVisible = true
      this.CallBackStatus = e
      this.CallBackId = ele
    },
    // 通过
    pass(e, ele) {
      this.CallBackStatus = e
      this.CallBackId = ele
      this.passOrBackSend()
    },
    // 查看页面更改状态 优先级
    updateaddTaskData(vel) {
      this.formTask = vel
      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
      this.objData = { taskInfo: this.formTask, user: this.userData }
      updateTaskList(this.objData).then(response => {
        if (response.code === 200) {
          this.getList()
          this.successFun('modify')
        } else {
          this.errorFun(response.msg)
        }
      })
    },
    passOrBackSend() {
      this.centerDialogVisible = false
      const tt = { status: this.CallBackStatus, id: this.CallBackId }
      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
      this.objData = { launchTestInfo: tt, user: this.userData }
      launchTestUpdate(this.objData).then(res => {
        res.code === 200 ? this.successFun('operate') : this.errorFun(res.msg)
        this.getList()
      })
    },
    // 所有下拉菜单数据
    bugListSelect() {
      bugGetEnum().then(res => {
        this.bugLevelStr = res.data.priorityEnumList
        this.processStatusEnumList = res.data.processStatusEnumList
      })
    },
    // 创建日报 提测 准出 Bug报告跳转
    createReport(e, ele) {
      if (ele.typeString !== '服务端') {
        switch (e) {
          case 1:
            this.$router.push({ path: '/Platform/presentation/PresentReport', query: { task: ele }}) // 客户端提测
            break
          case 2:
            this.$router.push({ path: '/Platform/presentation/DailyNewsAdded', query: { task: ele }}) // 客户端日报
            break
          case 3:
            this.$router.push({ path: '/Platform/presentation/ClientAcceptance', query: { task: ele }}) // 客户端准出
            break
          case 4:
            this.$router.push({ name: '新建Bug', query: { id: ele.id }}) // 缺陷报告
            break
        }
      } else {
        switch (e) {
          case 1:
            this.$router.push({ path: '/Platform/presentation/presentationReport', query: { task: ele }}) // 服务端提测
            break
          case 2:
            this.$router.push({ path: '/Platform/presentation/DailyNewsAdded', query: { task: ele }}) // 服务端日报
            break
          case 3:
            this.$router.push({ path: '/Platform/presentation/Acceptance', query: { task: ele }}) // 服务端准出
            break
          case 4:
            this.$router.push({ name: '新建Bug', query: { id: ele.id }}) // 缺陷报告
            break
        }
      }
    },
    projectShowData(e) {
      this.$router.push({ name: '任务更新', query: { id: e }})
    },
    // 日报预览跳转
    JumpDaily(val) {
      this.$router.push({ path: '/Platform/presentation/testPresenyL', query: { id: val }})
    },
    // 提测预览跳转
    JumpDetection(val) {
      this.$router.push({ path: '/Platform/presentation/acceptTheReport', query: { id: val }})
    },
    // 准出预览跳转
    JumpOut(val) {
      this.$router.push({ path: '/Platform/presentation/ResultPageyL', query: { id: val }})
    },
    // bug报告跳转
    turnToBugCreate(e) {
      this.$router.push({ name: '查看Bug', query: { id: e }}) // 缺陷报告
    },
    successFun(successText) {
      this.$notify({ title: 'Success', message: `${successText} Successfully`, type: 'success', duration: 2000 })
    },
    errorFun(errorText) {
      this.$notify({ title: 'Failed', message: errorText, type: 'error', duration: 2000 })
    }
  }
}
</script>

<style lang="stylus" scoped>

  .set-background
    background-color #F2F3F6
    display flex
    justify-content center
    min-width 1000px
    .block
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 100%
      margin 20px 0
      padding 10px 30px
    .block >>> .el-tabs__nav-wrap::after
      background-color white
    .block >>> th
      background-color #F0F2F4 !important
    .block >>> .el-dialog__header
      padding 20px 20px 0px 20px
      display flex
    .block-end
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 100%
      margin 20px 0
      padding 15px 30px 1px 30px
    .operate-flex
      height 50px
      margin-bottom 25px
      display flex
      justify-content space-between
      align-items center
    .operate-flex span
      margin-right 10px
    .display-messege
      font-size 14px
      font-family PingFangSC-Regular,PingFangSC
      font-weight 400
      color rgba(51,59,74,1)
      display flex
      width 100%
      margin-bottom 15px
    .display-messege-end-one
      font-size 14px
      font-family PingFangSC-Regular,PingFangSC
      font-weight 400
      color rgba(51,59,74,1)
      display flex
      width 100%
      margin 30px 0 15px 0
    .display-messege-end
      font-size 14px
      font-family PingFangSC-Regular,PingFangSC
      font-weight 400
      color rgba(51,59,74,1)
      display flex
      width 100%
      margin-bottom 15px
    .divide-fourparts
      width 25%
      white-space pre-wrap
      word-wrap break-word
      padding-right 30px
      span
        white-space nowrap
    .divide-twoparts
      width 50%
      white-space pre-wrap
      word-wrap break-word
      padding-right 30px
      span
        white-space nowrap
    .divide-fullparts
      width 100%
      white-space pre-wrap
      word-wrap break-word
      padding-right 30px
      span
        white-space nowrap
</style>