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

<template>
  <div>
    <section class="main-section">
      <div class="Layout_space_between">
        <div class="el-main-title">
          <div class="title-left-icon" />
          <div class="title-left-name">提测报告</div>
        </div>
        <el-button class="task-report-btn" type="text" @click="getTest(10086)">{{ dataStatus?'查看历史':"回到最新" }}</el-button>
      </div>
      <div class="detail-info">
        <el-table
          :data="testData"
          size="small"
          :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500' }"
          show-overflow-tooltip="true"
          max-height="300"
        >
          <el-table-column label="标题名称" min-width="120">
            <template slot-scope="scope">
              <a v-if="dataStatus" href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row, 2)">{{ scope.row.reportName }}</a>
              <a v-if="!dataStatus" href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row, 2)">{{ scope.row.name }}</a>
              <br>{{ scope.row.returnReason }}
            </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">
              <span v-if="dataStatus">{{ scope.row.reportorObject === null ? '' : scope.row.reportorObject.name }}</span>
              <span v-if="!dataStatus">{{ scope.row.createrObject.name }}</span>
            </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-column v-if="dataStatus" 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="launchRepulseInfo" 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="Layout_space_between">
        <div class="el-main-title">
          <div class="title-left-icon" />
          <div class="title-left-name">测试日报</div>
        </div>
        <el-button class="task-report-btn" type="text" @click="getDaily(10011)">{{ dailyDataStatus?'查看历史':"回到最新" }}</el-button>
      </div>
      <div class="detail-info">
        <el-table :data="dailyData" size="small" :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500' }" show-overflow-tooltip="true">
          <el-table-column label="标题名称" min-width="120">
            <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">
              <span v-if="dailyDataStatus">{{ !scope.row.reportorObject? '':scope.row.reportorObject.name }}</span>
              <span v-if="!dailyDataStatus">{{ scope.row.createrObject.name }}</span>
            </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-column v-if="dailyDataStatus" label="操作" width="200">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.status === 0 ? true : false" class="btn" @click="dailyButtom(5,scope.row.id, scope.row)">发送</span>
                <span v-if="scope.row.status === 0 ? true : false" style="margin: 0 30px;" class="btn" @click="dailyButtom(6,scope.row.id, scope.row)">编辑</span>
                <span v-if="scope.row.status === 0 ? true : false" class="btn" @click="dailyButtom(4,scope.row.id, scope.row )">删除</span>
                <span v-if="scope.row.status === 3 ? true : false" class="btn" @click="dailyButtom(3,scope.row.id, scope.row)">复制</span>
                <el-dialog :title="titName" :visible.sync="dialog_daily" 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="launchRepulseInfo" type="textarea" placeholder="请输入打回原因..." :rows="3" />
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" size="mini" @click="dailySend(scope.row.id)">确 定</el-button>
                    <el-button type="danger" size="mini" @click="dialog_daily = false">取 消</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, 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="Layout_space_between">
        <div class="el-main-title">
          <div class="title-left-icon" />
          <div class="title-left-name">准出报告</div>
        </div>
        <el-button class="task-report-btn" type="text" @click="getClient(10000)">{{ releaseDataStatus?'查看历史':"回到最新" }}</el-button>
      </div>
      <div class="detail-info">
        <el-table :data="clientData" size="small" :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500' }" show-overflow-tooltip="true">
          <el-table-column label="标题名称" min-width="120">
            <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">
              <span v-if="!releaseDataStatus">{{ scope.row.reportStatusString }}</span>
              <span v-if="releaseDataStatus">{{ scope.row.statusString }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报告人" min-width="100" align="center">
            <template slot-scope="scope">
              <span v-if="!releaseDataStatus">{{ scope.row.createrObject.name }}</span>
              <span v-if="releaseDataStatus">{{ scope.row.reportorObject === null ? '' :scope.row.reportorObject.name }}</span>
            </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-column v-if="releaseDataStatus" label="操作" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 1 ? false : true">
                <span v-if="scope.row.status === 2 ? true : false" class="btn" @click="clientButtom(5,scope.row.id, scope.row)">发送</span>
                <span v-if="scope.row.status === 2 ? true : false" style="margin: 0 30px;" class="btn" @click="clientButtom(6,scope.row.id, scope.row)">编辑</span>
                <span v-if="scope.row.status === 2 ? true : false" class="btn" @click="clientButtom(4,scope.row.id, scope.row )">删除</span>
                <el-dialog :title="titName" :visible.sync="dialog_client" 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="launchRepulseInfo" type="textarea" placeholder="请输入打回原因..." :rows="3" />
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" size="mini" @click="clientSend(scope.row.id)">确 定</el-button>
                    <el-button type="danger" size="mini" @click="dialog_client = false">取 消</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, 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" />
    <ReleaseReport v-if="dialogClient" ref="ClientReport" />
  </div>
</template>
<script>
import {
  dailyReport,
  projectTestReport,
  launchTest,
  launchTestDelete
} from '@/api/taskIndex' // ajax
import '@/styles/PublicStyle/index.scss'
import TestReport from '@/views/reportManagement/components/TestingReport' // 提测
import DailyReport from '@/views/reportManagement/components/DailyReport' // 日报
import ReleaseReport from '@/views/reportManagement/components/ReleaseReport' // 准出
import { dailyReportDelete, projectTestReportDelete } from '@/api/testPresentetion' // 日报
import { reportdelivertestGetByTaskId, reportreleaseGetByTaskId, dailyReportGetByTaskIdV2, reportdelivertestUpdate, reportdelivertestCheckStatus } from '@/api/reportTemplate'
export default {
  components: {
    TestReport,
    DailyReport,
    ReleaseReport
  },
  data() {
    return {
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      taskId: Number(this.$route.query.id), // 任务id
      stColors: ['#409EFF', '#07BCA4', '#F56C6C', '#07BCA4'],
      dataStatus: true, // 数据状态
      releaseDataStatus: true, // 准出
      dailyDataStatus: true, // 日报
      dialog_testData: false, // 打回弹窗
      dialog_daily: false, // 测试报告dialog
      dialog_client: false, // 准出报告dialog
      launchRepulseInfo: '', // 打回原因
      CallBackStatus: '', // 打回状态
      CallBackId: '', // 打回id
      reportData: {},
      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(val) { // 获取提测
      val === 10086 ? this.dataStatus = !this.dataStatus : ''
      if (this.dataStatus) {
        const data = { taskId: this.taskId, bizId: localStorage.getItem('bizId'), curIndex: this.testPages.curIndex, pageSize: this.testPages.pageSize }
        const res = await reportdelivertestGetByTaskId(data)
        if (res.code === 200) {
          this.testData = res.data.list
          this.testPages.total = res.data.total
        }
      } else {
        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(val) { // 获取日报
      val === 10011 ? this.dailyDataStatus = !this.dailyDataStatus : ''
      if (this.dailyDataStatus) {
        const indexPage = { taskId: this.taskId, bizId: localStorage.getItem('bizId'), curIndex: this.clientPages.curIndex, pageSize: this.clientPages.pageSize }
        const res = await dailyReportGetByTaskIdV2(indexPage)
        if (res.code === 200) {
          this.dailyData = res.data.list
          this.dailyPages.total = res.data.total
        }
      } else {
        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(val) { // 获取准出
      val === 10000 ? this.releaseDataStatus = !this.releaseDataStatus : ''
      if (this.releaseDataStatus) {
        const indexPage = { taskId: this.taskId, bizId: localStorage.getItem('bizId'), curIndex: this.clientPages.curIndex, pageSize: this.clientPages.pageSize }
        const res = await reportreleaseGetByTaskId(indexPage)
        if (res.code === 200) {
          this.clientData = res.data.list
          this.clientPages.total = res.data.total
        }
      } else {
        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 userData = { id: '', ename: this.userInformation, name: this.userNames }
      if (this.Str === '通过' || this.Str === '打回') {
        const data = {
          id: this.reportData.id,
          moduleId: this.reportData.moduleId,
          bizId: this.reportData.bizId,
          taskIds: [this.taskId],
          reportName: this.reportData.reportName,
          returnReason: this.launchRepulseInfo,
          status: this.Str === '打回' ? 2 : 1
        }
        const res = await reportdelivertestUpdate(data)
        if (res.code === 200) {
          this.getTest()
          this.$message({ message: res.msg, type: 'success', offset: 150 })
        }
      } else if (this.Str === '删除') {
        const res = await launchTestDelete(this.reportData.id)
        if (res.code === 200) {
          this.$message({ type: 'success', message: '删除成功' })
        }
      }
    },

    async dailySend(e) { // 测试日报删除
      console.log(e)
      const res = await dailyReportDelete(e)
      if (res.code === 200) {
        this.$message({ type: 'success', message: '删除成功' })
      }
    },

    async clientSend() { // 准出报告删除
      const res = await projectTestReportDelete(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.$router.push({ name: '日报详情', query: { id: ele.id }})
          break
        case 1:
          this.$router.push({ name: '准出详情', query: { id: ele.id }})
          break
        case 2:
          this.$router.push({ name: '提测详情', query: { id: ele.id }})
          break
      }
    },
    back(e, ele, data) { // 提测报告
      this.reportData = data
      this.dataStatus ? this.requireName = data.reportName : 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)]
          reportdelivertestCheckStatus([this.taskId]).then(res => {
            if (res.code === 200) {
              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
      }
    },
    dailyButtom(e, ele, data) { // 测试报告
      this.requireName = data.reportName
      this.CallBackStatus = e
      this.CallBackId = ele
      switch (e) {
        case 3:
          this.dialogDaily = true
          this.$nextTick(() => {
            this.$refs.DailyReport.init(4, data)
          })
          break
        case 4:
          this.dialog_daily = true
          this.titName = '删除确认'
          this.Str = '删除'
          break
        case 5:
          this.dialogDaily = true
          this.$nextTick(() => {
            this.$refs.DailyReport.init(3, data)
          })
          break
        case 6:
          this.dialogDaily = true
          this.$nextTick(() => {
            this.$refs.DailyReport.init(2, data)
          })
          break
      }
    },
    clientButtom(e, ele, data) { // 准出报告
      this.requireName = data.reportName
      this.CallBackStatus = e
      this.CallBackId = ele
      switch (e) {
        case 4:
          this.dialog_client = true
          this.titName = '删除确认'
          this.Str = '删除'
          break
        case 5:
          this.dialogClient = true
          this.$nextTick(() => {
            this.$refs.ClientReport.init(3, data)
          })
          break
        case 6:
          this.dialogClient = true
          this.$nextTick(() => {
            this.$refs.ClientReport.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;
}
.task-report-btn {
  margin-right: 30px;
}
</style>