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

<template>
  <div class="eleStyle">
    <el-container class="header_sty">
      <el-header class="public_header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="测试日报" name="first" />
          <el-tab-pane label="准出报告" name="second" />
          <el-tab-pane label="提测报告" name="third" />
        </el-tabs>
      </el-header>
      <el-main class="public_main report-Layout">
        <div class="Layout_space_between distance">
          <div class="Layout_space_between">
            <span style="width: 100px;">{{ title }}</span>
            <el-input v-model="state" size="medium" filterable placeholder="报告名称搜索" style="width:100%;" @change="getList(state)" />
          </div>
          <el-button type="primary" size="medium" @click="getQueryData(1), centerDialogVisible = true">新建{{ title }}</el-button>
        </div>
        <el-table v-loading="loading" :data="tableData" size="mini" :header-cell-style="{ background: '#F2F3F6' }" border style="width: 100%" :show-overflow-tooltip="true">
          <el-table-column label="报告名称" min-width="280" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <a v-if="title === '测试日报' || title === '准出报告'" href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row)">{{ scope.row.reportName }}</a>
              <a v-if="title === '提测报告'" href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row)">{{ scope.row.name }}</a>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="150" align="center">
            <template slot-scope="scope">{{ scope.row.statusString }}</template>
          </el-table-column>
          <el-table-column label="报告人" min-width="180" align="center">
            <template slot-scope="scope">
              <div v-if="title === '测试日报' || title === '准出报告'">{{ scope.row.ownner }}</div>
              <div v-if="title === '提测报告'">{{ scope.row.submitter }}</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="280" align="center">
            <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" min-width="230">
            <template slot-scope="scope">
              <div v-if="title === '测试日报'">
                <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="dailyButtom(5,scope.row)">发送</span>
                <span v-if="scope.row.status === 0 ? true : false" style="margin: 0 30px;" class="didi-hover" @click="dailyButtom(6,scope.row)">编辑</span>
                <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
                <span v-if="scope.row.status === 1 ? true : false" class="didi-hover" @click="dailyButtom(3,scope.row)">复制</span>
              </div>
              <div v-if="title === '准出报告'">
                <div v-if="scope.row.status === 1 ? false : true">
                  <span v-if="scope.row.status === 2 ? true : false" class="didi-hover" @click="clientButtom(5,scope.row)">发送</span>
                  <span v-if="scope.row.status === 2 ? true : false" style="margin: 0 30px;" class="didi-hover" @click="clientButtom(6,scope.row)">编辑</span>
                  <span v-if="scope.row.status === 2 ? true : false" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
                </div>
              </div>
              <div v-if="title === '提测报告'">
                <div v-if="scope.row.status === 1 ? false : true">
                  <span v-if="scope.row.status === 3 ? true : false" class="didi-hover" @click="report_click(1,scope.row)">通过</span>
                  <span v-if="scope.row.status === 3 ? true : false" style="margin-left: 30px;" class="didi-hover" @click="report_click(2,scope.row)">打回</span>
                  <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="report_click(5,scope.row)">发送</span>
                  <span v-if="scope.row.status === 0 ? true : false" style="margin: 0 30px;" class="didi-hover" @click="report_click(6,scope.row)">编辑</span>
                  <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
                  <span v-if="scope.row.status === 2 ? true : false" class="didi-hover" @click="report_click(3,scope.row)">重新提测</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer class="public_footer">
        <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-footer>
    </el-container>
    <!-- 日报/准出/提测选择任务 -->
    <el-dialog title="选择任务" :visible.sync="centerDialogVisible" width="30%" center>
      <div class="Layout_space_between">
        <div style="width:100px;">选择任务 :</div>
        <el-select v-model="queryData.code" filterable placeholder="请选择任务" size="mini" style="width:100%;">
          <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="createPresentation(queryData.code)">创建</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="report_from.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 v-if="title === '提测报告'">是否{{ report_from.statusString }}以下提测?</div>
        <div v-if="title === '测试日报'">是否{{ report_from.statusString }}以下测试日报?</div>
        <div v-if="title === '准出报告'">是否{{ report_from.statusString }}以下准出报告?</div>
        <div style="color: #f79232;">{{ report_from.name }}</div>
      </div>
      <el-input v-show="report_from.statusString === '打回'" v-model="report_from.reason" 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>

    <TestReport v-if="dialogVisible1" ref="TestReport" />
    <DailyReport v-if="dialogDaily" ref="DailyReport" />
    <ClientReport v-if="dialogClient" ref="ClientReport" />
  </div>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import { dailyReportList, dailyReportDelete } from '@/api/testPresentetion' // 日报
import { projectTestReportList, projectTestReportDelete } from '@/api/ResultPage' // 准出
import { launchTestList, launchTestDelete, taskListCreate } from '@/api/InterfaceReport' // 提测
import TestReport from '@/views/Platform/presentation/Templates/TestReport' // 提测
import DailyReport from '@/views/Platform/presentation/Templates/DailyReport' // 日报
import ClientReport from '@/views/Platform/presentation/Templates/ClientReport' // 准出
import { launchTestUpdate } from '@/api/InterfaceReport'

export default {
  name: 'TestPresentation',
  components: {
    TestReport,
    DailyReport,
    ClientReport
  },
  data() {
    return {
      activeName: 'first',
      title: '测试日报', // 报告title
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      bizJson: localStorage.getItem('bizId'),
      centerDialogVisible: false,
      dialog_testData: false, // 操作弹窗
      report_data: {}, // 当前点击数据
      userData: { id: '', ename: this.userInformation, name: this.userNames },
      loading: true,
      pageSize: 15,
      curIndex: 1,
      total: 0,
      state: '',
      restaurants: [],
      queryData: {
        state: ''
      },
      report_from: {
        name: '',
        titName: '',
        statusString: ''
      },
      tableData: [],
      z_name: '',
      restaurants2: [],
      dialogVisible1: false, // 提测弹窗
      dialogDaily: false,
      dialogClient: false,
      indexPage: {
        pageSize: 15,
        curIndex: 1
      }
    }
  },
  destroyed() {
    this.$store.state.data.status = false
  },
  created() {
    this.getList()
    this.$store.state.data.status = true
  },
  mounted() {
    this.getQueryData()
  },
  methods: {
    handleClick(tab, event) {
      this.curIndex = 1
      this.loading = true
      switch (Number(tab.index)) {
        case 0:
          this.title = '测试日报'
          this.getList()
          break
        case 1:
          this.title = '准出报告'
          this.getList()
          break
        case 2:
          this.title = '提测报告'
          this.getList()
          break
      }
    },
    async getList(e) { // 报告list
      this.loading = true
      this.z_name = e
      const indexPage = { reportName: e, bizId: localStorage.getItem('bizId'), pageSize: this.pageSize, curIndex: this.curIndex }
      if (this.title === '测试日报') {
        const res = await dailyReportList(indexPage)
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.total
        }
      }
      if (this.title === '准出报告') {
        const res = await projectTestReportList(indexPage)
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.total
        }
      }
      if (this.title === '提测报告') {
        const data = { name: e, bizId: localStorage.getItem('bizId'), pageSize: this.pageSize, curIndex: this.curIndex }
        const res = await launchTestList(data)
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.total
        }
      }
      this.loading = false
    },

    async passOrBackSend() { // 提测打回
      this.dialog_testData = false
      const launchTestInfo = { status: this.report_data.status, id: this.report_data.id, launchRepulseInfo: this.report_from.reason }
      const userData = { id: '', ename: this.userInformation, name: this.userNames }
      const objData = { launchTestInfo: launchTestInfo, user: userData }
      if (this.report_from.statusString === '通过' || this.report_from.statusString === '打回') {
        const res = await launchTestUpdate(objData)
        if (res.code === 200) {
          this.getList()
          this.$message({ message: res.msg, type: 'success', offset: 150 })
        }
      } else if (this.report_from.statusString === '删除') {
        switch (this.title) {
          case '测试日报':
            dailyReportDelete(this.userData, this.report_data.id).then(res => {
              if (res.code === 200) {
                this.$message({ type: 'success', message: '删除成功' })
                this.getList()
              }
            })
            break
          case '准出报告':
            projectTestReportDelete(this.userData, this.report_data.id).then(res => {
              if (res.code === 200) {
                this.$message({ type: 'success', message: '删除成功' })
                this.getList()
              }
            })
            break
          case '提测报告':
            launchTestDelete(this.userData, this.report_data.id).then(res => {
              if (res.code === 200) {
                this.$message({ type: 'success', message: '删除成功' })
                this.getList()
              }
            })
            break
        }
      }
    },

    dailyButtom(e, data) { // 测试报告
      console.log(data, 'xsaxsaxasxsxaxas')
      this.report_data = data
      switch (e) {
        case 3:
          this.dialogDaily = true
          this.$nextTick(() => {
            this.$refs.DailyReport.init(4, data)
          })
          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, data) { // 准出报告
      this.report_data = data
      switch (e) {
        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
      }
    },

    report_click(e, data) { // 提测报告
      this.report_from.name = data.name || data.reportName
      this.report_data = data
      switch (e) {
        case 1:
          this.dialog_testData = true
          this.report_from.titName = '提测确认'
          this.report_from.statusString = '通过'
          break
        case 2:
          this.dialog_testData = true
          this.report_from.titName = '提测确认'
          this.report_from.statusString = '打回'
          break
        case 3:
          data.taskIds = [Number(this.taskId)]
          this.dialogVisible1 = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(4, data)
          })
          break
        case 4:
          this.dialog_testData = true
          this.report_from.titName = '删除确认'
          this.report_from.statusString = '删除'
          break
        case 5:
          this.dialogVisible1 = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(3, data)
          })
          break
        case 6:
          this.dialogVisible1 = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(2, data)
          })
          break
      }
    },
    // queryPresentation(data) { // 报告编辑
    //   switch (this.title) {
    //     case '测试日报':
    //       this.dialogDaily = true
    //       this.$nextTick(() => {
    //         this.$refs.DailyReport.init(2, data)
    //       })
    //       break
    //     case '准出报告':
    //       this.dialogClient = true
    //       this.$nextTick(() => {
    //         this.$refs.ClientReport.init(2, data)
    //       })
    //       break
    //     case '提测报告':
    //       this.dialogVisible1 = true
    //       this.$nextTick(() => {
    //         this.$refs.TestReport.init(2, data)
    //       })
    //       break
    //   }
    // },
    // 获取任务数据
    getQueryData() {
      this.$set(this.queryData, 'TestReport', '')
      this.$set(this.queryData, 'ClientReport', '')
      this.$set(this.queryData, 'code', '')
      this.restaurants = []
      taskListCreate({ bizId: localStorage.getItem('bizId') }).then(res => {
        this.restaurants = res.data.taskInfoList
      })
    },

    createPresentation(e) {
      if (e !== '') {
        switch (this.title) {
          case '测试日报':
            this.dialogDaily = true
            this.$nextTick(() => {
              this.$refs.DailyReport.init(7, [e])
            })
            break
          case '准出报告':
            this.dialogClient = true
            this.$nextTick(() => {
              this.$refs.ClientReport.init(7, [e])
            })
            break
          case '提测报告':
            this.dialogVisible1 = true
            this.$nextTick(() => {
              this.$refs.TestReport.init(7, [e])
            })
            break
        }
        this.$set(this.queryData, 'code', '')
        this.centerDialogVisible = false
      } else {
        this.$message({ message: '提示，请选择要添加的任务ID', type: 'warning' })
      }
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },

    // 日报/准出/提测
    toReportView(ele) {
      switch (this.title) {
        case '测试日报':
          this.dialogDaily = true
          this.$nextTick(() => {
            this.$refs.DailyReport.init(3, ele)
          })
          break
        case '准出报告':
          this.dialogClient = true
          this.$nextTick(() => {
            this.$refs.ClientReport.init(3, ele)
          })
          break
        case '提测报告':
          this.dialogVisible1 = true
          this.$nextTick(() => {
            this.$refs.TestReport.init(3, ele)
          })
          break
      }
    },
    endDialog() { // 结束对话框
      this.dialog_testData = false
      this.$message({ type: 'warning', message: '已取消' })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getList(this.z_name)
    },
    handleCurrentChange(curIndex) {
      this.curIndex = curIndex
      this.getList(this.z_name)
    }
  }
}
</script>
<style scoped>
  .eleStyle {
    width: 100%;
    height:100%;
    background:#F2F3F6;
    display: inline-block;
  }
  .header_sty {
    font-size: 14px;
    background:#ffffff;
    margin: 10px;
    border-radius: 4px;
    overflow: hidden;
  }
  .distance {
    margin-bottom: 20px;
  }
  .report-Layout {
    min-height: calc(100vh - 221px)
  }
</style>
<style lang="stylus">
.el-tabs__nav-wrap::after {
    background-color: #FFF !important;
    }
</style>