thoth-frontend-test/src/views/projectManage/taskList/components/reportList.vue

<template>
  <div>
    <section class="main-section">
      <div class="el-main-title">
        <div class="title-left-icon" />
        <div class="title-left-name">提测报告</div>
      </div>
      <div class="detail-info">
        <el-table
          :data="testData"
          size="small"
          :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500', textAlign: 'center' }"
          show-overflow-tooltip="true"
          max-height="300"
        >
          <el-table-column label="标题名称" min-width="150">
            <template slot-scope="scope">
              <span class="btn" @click="toReportView(scope.row, 2)">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="100" align="center">
            <template slot-scope="scope">
              <span :style="{color: stColors[scope.row.status]}"> {{ scope.row.statusString }} </span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" min-width="100" align="center">
            <template slot-scope="scope">{{ scope.row.createrObject.name }}</template>
          </el-table-column>
          <el-table-column label="创建日期" min-width="150" align="center">
            <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 1 ? false : true">
                <span v-if="scope.row.status === 3 ? true : false" class="btn" @click="back(1,scope.row.id, scope.row)">通过</span>
                <span v-if="scope.row.status === 3 ? true : false" style="margin-left: 30px;" class="btn" @click="back(2,scope.row.id, scope.row)">打回</span>
                <span v-if="scope.row.status === 0 ? true : false" class="btn" @click="back(5,scope.row.id, scope.row)">发送</span>
                <span v-if="scope.row.status === 0 ? true : false" style="margin: 0 30px;" class="btn" @click="back(6,scope.row.id, scope.row)">编辑</span>
                <span v-if="scope.row.status === 0 ? true : false" class="btn" @click="back(4,scope.row.id, scope.row )">删除</span>
                <span v-if="scope.row.status === 2 ? true : false" class="btn" @click="back(3,scope.row.id, scope.row)">重新提测</span>
                <el-dialog :title="titName" :visible.sync="dialog_testData" width="30%" :close-on-click-modal="false">
                  <div style="position: absolute; top: 23px; left: 12px;width:4px;height:17px;background:#409EFF;border-radius:1px;" />
                  <div align="center">
                    <div>是否{{ Str }}以下提测?</div>
                    <div style="color: #f79232;">{{ requireName }}</div>
                  </div>
                  <el-input v-show="Str === '打回'" v-model="CallBackTheReason" type="textarea" placeholder="请输入打回原因..." :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="endDialog">取 消</el-button>
                  </span>
                </el-dialog>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24">
          <div align="right">
            <el-pagination
              :page-sizes="[5, 10, 15, testPages.total]"
              :current-page="testPages.curIndex"
              :page-size="testPages.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="testPages.total"
              @size-change="testSizeChange"
              @current-change="testCurrentChange"
            />
          </div>
        </el-col>
      </div>
    </section>
    <section class="main-section">
      <div class="el-main-title">
        <div class="title-left-icon" />
        <div class="title-left-name">日报报告</div>
      </div>
      <div class="detail-info">
        <el-table :data="dailyData" size="small" :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500', textAlign: 'center' }" show-overflow-tooltip="true">
          <el-table-column label="标题名称" min-width="100" align="center">
            <template slot-scope="scope">
              <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row, 0)">{{ scope.row.reportName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="100" align="center">
            <template slot-scope="scope">{{ scope.row.statusString }}</template>
          </el-table-column>
          <el-table-column label="创建人" min-width="100" align="center">
            <template slot-scope="scope">{{ scope.row.createrObject.name }}</template>
          </el-table-column>
          <el-table-column label="创建日期" min-width="100" align="center">
            <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
          </el-table-column>
        </el-table>
        <el-col :span="24">
          <div align="right">
            <el-pagination
              :page-sizes="[5, 10, 15, dailyPages.total]"
              :current-page="dailyPages.curIndex"
              :page-size="dailyPages.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="dailyPages.total"
              @size-change="dailySizeChange"
              @current-change="dailyCurrentChange"
            />
          </div>
        </el-col>
      </div>
    </section>
    <section class="main-section">
      <div class="el-main-title">
        <div class="title-left-icon" />
        <div class="title-left-name">准出报告</div>
      </div>
      <div class="detail-info">
        <el-table :data="clientData" size="small" :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500', textAlign: 'center' }" show-overflow-tooltip="true">
          <el-table-column label="标题名称" min-width="100" align="center">
            <template slot-scope="scope">
              <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row, 1)">{{ scope.row.reportName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="100" align="center">
            <template slot-scope="scope">{{ scope.row.reportStatusString }}</template>
          </el-table-column>
          <el-table-column label="创建人" min-width="100" align="center">
            <template slot-scope="scope">{{ scope.row.createrObject.name }}</template>
          </el-table-column>
          <el-table-column label="创建日期" min-width="100" align="center">
            <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
          </el-table-column>
        </el-table>
        <el-col :span="24">
          <div align="right">
            <el-pagination
              :page-sizes="[5, 10, 15, clientPages.total]"
              :current-page="clientPages.curIndex"
              :page-size="clientPages.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="clientPages.total"
              @size-change="clientSizeChange"
              @current-change="clientCurrentChange"
            />
          </div>
        </el-col>
      </div>
    </section>
    <!-- 弹框 -->
    <Test-report v-if="dialogTest" ref="TestReport" />
    <Daily-report v-if="dialogDaily" ref="DailyReport" />
    <Client-report v-if="dialogClient" ref="ClientReport" />
  </div>
</template>
<script>
import {
  dailyReport,
  projectTestReport,
  launchTest,
  launchTestUpdate,
  launchTestDelete
} from '@/api/taskIndex' // ajax
import TestReport from '@/views/Platform/presentation/Templates/TestReport' // 提测
import DailyReport from '@/views/Platform/presentation/Templates/DailyReport' // 日报
import ClientReport from '@/views/Platform/presentation/Templates/ClientReport' // 准出
export default {
  components: {
    TestReport,
    DailyReport,
    ClientReport
  },
  data() {
    return {
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      taskId: Number(this.$route.query.id), // 任务id
      stColors: ['#409EFF', '#07BCA4', '#F56C6C', '#07BCA4'],
      dialog_testData: false, // 打回弹窗
      CallBackTheReason: '', // 打回原因
      CallBackStatus: '', // 打回状态
      CallBackId: '', // 打回id
      titName: '', // 打回title
      Str: '', // 打回操作名称
      requireName: '', // 归属需求name
      testData: [], // 提测信息
      testPages: { // 提测分页
        curIndex: 1,
        pageSize: 5,
        total: 0
      },
      dailyData: [], // 日报信息
      dailyPages: { // 提测分页
        curIndex: 1,
        pageSize: 5,
        total: 0
      },
      clientData: [], // 准出信息
      clientPages: {// 准出分页
        curIndex: 1,
        pageSize: 5,
        total: 0
      },
      dialogTest: false, // 新建提测报告
      dialogDaily: false, // 新建日报报告
      dialogClient: false // 新建准出报告
    }
  },
  created() {
    this.getTest()
    this.getDaily()
    this.getClient()
  },
  methods: {
    async getTest() { // 获取提测
      const params = { taskId: this.taskId, curIndex: this.testPages.curIndex, pageSize: this.testPages.pageSize }
      const res = await launchTest(params)
      if (res.code === 200) {
        this.testData = res.data.list
        this.testPages.total = res.data.total
      }
    },
    async getDaily() { // 获取日报
      const params = { taskId: this.taskId, curIndex: this.dailyPages.curIndex, pageSize: this.dailyPages.pageSize }
      const res = await dailyReport(params)
      if (res.code === 200) {
        this.dailyData = res.data.list
        this.dailyPages.total = res.data.total
      }
    },
    async getClient() { // 获取准出
      const params = { taskId: this.taskId, curIndex: this.clientPages.curIndex, pageSize: this.clientPages.pageSize }
      const res = await projectTestReport(params)
      if (res.code === 200) {
        this.clientData = res.data.list
        this.clientPages.total = res.data.total
      }
    },
    testSizeChange(e) { // 提测分页
      this.testPages.pageSize = e
      this.getTest()
    },
    testCurrentChange(e) { // 提测分页
      this.testPages.curIndex = e
      this.getTest()
    },
    dailySizeChange(e) { // 日报分页
      this.dailyPages.pageSize = e
      this.getDaily()
    },
    dailyCurrentChange(e) { // 日报分页
      this.dailyPages.curIndex = e
      this.getDaily()
    },
    clientSizeChange(e) { // 准出分页
      this.clientPages.pageSize = e
      this.getClient()
    },
    clientCurrentChange(e) { // 准出分页
      this.clientPages.curIndex = e
      this.getClient()
    },
    async passOrBackSend() { // 提测打回
      this.dialog_testData = false
      const launchTestInfo = { status: this.CallBackStatus, id: this.CallBackId }
      const userData = { id: '', ename: this.userInformation, name: this.userNames }
      const objData = { launchTestInfo: launchTestInfo, user: userData }
      if (this.Str === '通过' || this.Str === '打回') {
        const res = await launchTestUpdate(objData)
        if (res.code === 200) {
          this.getTest()
          this.$message({ message: res.msg, type: 'success', offset: 150 })
        } else {
          this.$message({ message: res.msg, type: 'error', offset: 150 })
        }
      } else if (this.Str === '删除') {
        const res = await launchTestDelete(userData, this.CallBackId)
        if (res.code === 200) {
          this.$message({ type: 'success', message: '删除成功' })
        }
      }
    },
    endDialog() { // 结束对话框
      this.dialog_testData = false
      this.$message({ type: 'warning', message: '已取消' })
    },
    toReportView(ele, index) { // 进入报告详情页
      switch (index) {
        case 0:
          this.dialogDaily = true
          this.$nextTick(() => {
            this.$refs.DailyReport.init(3, ele)
          })
          break
        case 1:
          this.dialogClient = true
          this.$nextTick(() => {
            this.$refs.ClientReport.init(3, ele)
          })
          break
        case 2:
          this.dialogTest = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(3, ele)
          })
          break
      }
    },
    back(e, ele, data) { // 打回
      this.requireName = data.name
      this.CallBackStatus = e
      this.CallBackId = ele
      switch (e) {
        case 1:
          this.dialog_testData = true
          this.titName = '提测确认'
          this.Str = '通过'
          break
        case 2:
          this.dialog_testData = true
          this.titName = '提测确认'
          this.Str = '打回'
          break
        case 3:
          data.taskIds = [Number(this.taskId)]
          this.dialogTest = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(4, data)
          })
          break
        case 4:
          this.dialog_testData = true
          this.titName = '删除确认'
          this.Str = '删除'
          break
        case 5:
          this.dialogTest = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(3, data)
          })
          break
        case 6:
          this.dialogTest = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(2, data)
          })
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/detail-pages.scss';
.main-section {
  @include main-section;
  overflow: auto;
  .detail-info {
    padding: 0 34px 20px 34px;
  }
}
.btn{
  cursor: pointer;
}
</style>