SchemeView.vue

<template>
  <el-drawer
    title="试验方案"
    :visible.sync="dialogManger.dialogVisible"
    direction="rtl"
    size="80%"
    :before-close="handleClose"
    :wrapper-closable="false"
  >
    <template slot="title">
      <div class="custom_title">试验方案</div>
    </template>

    <div class="main-content-style">
      <!--card统计值-->
      <div class="message-list">
        <div class="message-box" style="background-color: #2eba3c">
          <div class="message-detail">
            <div class="detail-title">测试用例(条)</div>
            <div class="detail-num mt10">
              {{ model.useCaseNum }}
            </div>
          </div>
          <svg-icon
            class="message-icon"
            width="64px"
            height="64px"
            icon-class="tag_shechaxize"
          ></svg-icon>
        </div>
        <div class="message-box" style="background-color: #477bba">
          <div class="message-detail">
            <div class="detail-title">标准条款（条）</div>
            <div class="detail-num mt10">{{ model.standardNum }}%</div>
          </div>
          <svg-icon
            class="message-icon"
            width="64px"
            height="64px"
            icon-class="tag_fuhelv"
          ></svg-icon>
        </div>
        <div class="message-box" style="background-color: #eca740">
          <div class="message-detail">
            <div class="detail-title">测试通过率(%)</div>
            <div class="detail-num mt10">
              {{ model.testPass }}
            </div>
          </div>
          <svg-icon
            class="message-icon"
            width="64px"
            height="64px"
            icon-class="tag_biaozhuntiaokuan"
          ></svg-icon>
        </div>
        <div class="message-box" style="background-color: #47baba">
          <div class="message-detail">
            <div class="detail-title">测试通过(个)</div>
            <div class="detail-num mt10">{{ model.testPassNum }}%</div>
          </div>
          <svg-icon
            class="message-icon"
            width="64px"
            height="64px"
            icon-class="tag_biaozhuntiaokuan"
          ></svg-icon>
        </div>
        <div class="message-box" style="background-color: #6c47ba">
          <div class="message-detail">
            <div class="detail-title">测试未通过（个）</div>
            <div class="detail-num mt10">
              {{
                model.testNoPassNum === null || undefined || ''
                  ? 0
                  : model.testNoPassNum
              }}
            </div>
          </div>
          <svg-icon
            class="message-icon"
            icon-class="tag_shenehrenshu"
            width="64px"
            height="64px"
          ></svg-icon>
        </div>
      </div>

      <!--审查表单概要-->

      <div class="form-review-questionnaire">
        <div class="title-display">
          <span class="title-i"></span>
          <span class="title-content">试验表单概要</span>
          <div class="control-btns">
            <div class="control-btn" @click="openAll()">
              <icon-park
                type="down-c"
                theme="outline"
                size="16"
                style="margin-right: 5px"
                fill="#303133"
              />
              全部展开
            </div>
            <div class="control-btn" @click="closeAll()">
              <icon-park
                type="up-c"
                theme="outline"
                size="16"
                style="margin-right: 5px"
                fill="#303133"
              />
              全部收起
            </div>
          </div>
        </div>
        <!--审查表单概要-->
        <collapse v-model="activeNames" class="mt10">
          <collapse-item
            v-for="(item, key) in model.modelTestTaskViewResponseList"
            :key="key"
            :name="item.serial_number"
          >
            <span slot="title" style="width: 100%">
              <div class="standard-box">
                <div class="standard-left">
                  <div class="standard-title">
                    <div class="standard">标准要求：</div>
                    {{ item.serial_number + item.requirements }}
                  </div>
                </div>
                <!-- <div class="standard-result">
                    审查结果：
                    <span v-if="item.passed == 1" class="green">符合</span>
                    <span v-else class="orange">不符合</span>
                  </div> -->
              </div>
            </span>
            <table class="table">
              <tr>
                <th>测试场景</th>
                <th>测试方法</th>
                <th>用例编号</th>
                <th>用例名称</th>
                <th>对应输入</th>
                <th class="investigate-result">测试结果</th>
              </tr>
              <template v-for="(v, k) in item.case_result_list">
                <tr :key="k">
                  <td>
                    {{ v.scenario }}
                  </td>
                  <td>
                    {{ v.test_type }}
                  </td>
                  <td>
                    {{ v.serial_number }}
                  </td>
                  <td>
                    {{ v.name }}
                  </td>
                  <td></td>
                  <td align="center" class="investigate-result">
                    <!-- <el-tag
                        v-if="reviewDetail.result.passed === 1"
                        size="medium"
                        type="success"
                        >通过</el-tag
                      > -->
                    <el-tag
                      v-if="v.status === 'UNPROCESSED'"
                      size="medium"
                      type="warning"
                    >
                      未处理
                    </el-tag>
                    <el-tag
                      v-if="v.status === 'PASSED'"
                      size="medium"
                      type="warning"
                    >
                      通过
                    </el-tag>
                    <el-tag
                      v-if="v.status === 'FAILED'"
                      size="medium"
                      type="warning"
                    >
                      失败
                    </el-tag>
                    <el-tag
                      v-if="v.status === 'PROCESSING'"
                      size="medium"
                      type="warning"
                    >
                      处理中
                    </el-tag>
                    <el-tag
                      v-if="v.status === 'IGNORED'"
                      size="medium"
                      type="warning"
                    >
                      已忽略
                    </el-tag>
                  </td>
                </tr>
              </template>
            </table>
          </collapse-item>
        </collapse>
      </div>
    </div>
    <div class="dialog-button">
      <el-button size="mini" @click="dialogManger.dialogVisible = false"
        >关 闭</el-button
      >
    </div>
  </el-drawer>
</template>
<script>
import { testDetail } from '@/api/task/test'
import collapse from '@/components/Collapse/collapse'
import collapseItem from '@/components/Collapse/collapse-item'
export default {
  components: {
    collapse: collapse,
    'collapse-item': collapseItem
  },
  props: {
    dialogManger: {
      type: Object,
      default: () => {
        return {
          dialogVisible: false,
          source: {},
          dialogEditId: undefined
        }
      }
    }
  },
  data() {
    return {
      loading: true,
      model: {
        modelTestTaskViewResponseList: []
      },
      activeNames: []
    }
  },
  watch: {
    async 'dialogManger.dialogVisible'(newValue) {
      if (newValue) {
        await this.getTestDetail(this.dialogManger.dialogEditId)
        this.openAll()
      }
    }
  },
  methods: {
    /** 关闭抽屉 */
    handleClose() {
      this.dialogManger.dialogVisible = false
    },
    /** 获取任务详情 */
    async getTestDetail(id) {
      this.loading = true
      const res = await testDetail({ taskId: id })
      this.model = res.data
      this.loading = false
    },
    /** 全部展开 */
    openAll() {
      this.activeNames = this.model.modelTestTaskViewResponseList.map(i => {
        return i.serial_number
      })
    },
    /** 全部收起 */
    closeAll() {
      this.activeNames = []
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-button {
  position: fixed;
  bottom: 0px;
  background: #ffffff;
  right: 0;
  padding: 20px;
  text-align: end;
}

.form-review-questionnaire {
  padding: 0 38px;
}
.el-table {
  width: auto;
}
::v-deep .el-drawer__header {
  margin-bottom: 0px !important;
}
.custom_title {
  color: #303133 !important;
  font-size: 18px;
  font-weight: 400;
}
</style>