thoth-frontend-test/src/views/Platform/testPage.vue

<template>
  <!-- 测试计划管理 -->
  <div id="init-window" style="position:relative; min-height:95vh; font-size:14px background:#F2F3F6;">
    <router-view />
    <div style="position: absolute;width: 100%;">
      <div style="background:#F2F3F6;">
        <el-container>
          <el-aside width="17%" style=" background: #FFF;margin: 1% 0 1% 1%; border-radius:8px;">
            <div class="nav_Input" style="min-height:90vh;">
              <br>
              <el-tree :data="data1" style="overflow-x:auto; min-width:100%;display:inline-block !important" :default-expanded-keys="key_arr" :expand-on-click-node="true" node-key="id" @node-click="clickFun">
                <span slot-scope="{ node, data }" style="width:100%;" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                  <span class="span-ellipsis" :title="data.label">{{ node.label }}</span>
                  <el-dropdown v-show="data.del" style="margin-left:10px" trigger="click">
                    <span v-show="data.codes === '1' ? false : true" class="el-dropdown-link">
                      ···<i class="el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-show="data.codes !== '2'" @click.native="dblclick(data)">编辑测试计划</el-dropdown-item>
                      <el-dropdown-item v-show="data.codes !== '2'" @click.native="() => remove(node, data)">删除测试计划</el-dropdown-item>
                      <el-dropdown-item v-show="data.codes === '2'" @click.native="createdTest(data)">新建测试计划</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </el-tree>
            </div>
          </el-aside>
          <el-container>
            <el-header style="background:#ffffff; height: auto; width: 98%; margin: 1%; font-size: 13px; border-radius: 8px;">
              <el-row>
                <el-col :span="24" style="white-space:nowrap; display: flex; justify-content: left; align-items: center;">
                  序列号
                  <el-input v-model="test_plan.id" clearable placeholder="请填写" style="width: 20%; margin: 3% 2%" />
                  测试计划状态
                  <el-select v-model="test_plan.region" clearable placeholder="请选择" style="width: 20%; margin: 3% 2%">
                    <el-option v-for="item in projectTypeStrings" :key="item.code" :label="item.msg" :value="item.code" />
                  </el-select>
                  <el-button type="primary" @click="queryCaseData(test_plan)">查询</el-button>
                  <el-button type="primary" style="margin: 3% 2%" @click="createGetShow">新增</el-button>
                </el-col>
              </el-row>
            </el-header>
            <div style="background:#ffffff; width: 98%; margin: 0 1% 1% 1%; font-size: 14px; border-radius: 8px;">
              <el-row :gutter="20" style="margin: 3%;text-align:center">
                <el-col :span="6" style="border-right: 1px solid #D8D8D8; color:#07BCA4;"><img :src="clicked_1" style="margin-right: 6%;width:5%;">通过 {{ num.Count1 }} 个, 占比 {{ num.Rate1 }} %</el-col>
                <el-col :span="6" style="border-right: 1px solid #D8D8D8; color:#F56C6C;"><img :src="clicked_2" style="margin-right: 6%;width:5%;">失败 {{ num.Count2 }} 个, 占比 {{ num.Rate2 }} %</el-col>
                <el-col :span="6" style="border-right: 1px solid #D8D8D8; color:#F5A623;"><img :src="clicked_3" style="margin-right: 6%;width:5%;">阻塞 {{ num.Count3 }} 个, 占比 {{ num.Rate3 }} %</el-col>
                <el-col :span="6" style=" color:#73C5FA;"><img :src="clicked_4" style="margin-right: 6%;width:5%;">未执行{{ num.Count4 }}个,占比{{ num.Rate4 }}%</el-col>
              </el-row>
            </div>
            <el-main style="background:#ffffff; width:98%;margin:0% 1% 1% 1%; font-size:14px;border-radius:8px;">
              <!-- 主页table -->
              <el-table :data="gridData" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" border fit tooltip-effect="dark" size="mini" style="width: 100%">
                <el-table-column label="序列号" min-width="100" align="center"><template slot-scope="scope">{{ scope.row.ids }}</template></el-table-column>

                <el-table-column label="用例名" min-width="200" align="center">
                  <template slot-scope="scope"><span style="color:#409EFF; cursor: pointer" @click="go_query(scope.row)">{{ scope.row.title }}</span></template>
                </el-table-column>

                <el-table-column prop="creatorName" label="执行状态" min-width="100" align="center">
                  <template slot-scope="scope">
                    <el-row :gutter="20" style="margin: 3%;text-align:center">
                      <el-col :span="6"><img style=" cursor: pointer;" :src="scope.row.keys === 1 ? clicked_1: Unclicked_1" @click="Unclicked(clicked_1, scope.$index, scope.row )"></el-col>
                      <el-col :span="6"><img style=" cursor: pointer;" :src="scope.row.keys === 2 ? clicked_2: Unclicked_2" @click="Unclicked2(clicked_2, scope.$index, scope.row)"></el-col>
                      <el-col :span="6"><img style=" cursor: pointer;" :src="scope.row.keys === 3 ? clicked_3: Unclicked_3" @click="Unclicked3(clicked_3, scope.$index, scope.row)"></el-col>
                      <el-col :span="6"><img style=" cursor: pointer;" :src="scope.row.keys === 0 ? clicked_4: Unclicked_4" @click="Unclicked4(clicked_4, scope.$index, scope.row)"></el-col>
                    </el-row>
                  </template>
                </el-table-column>

                <el-table-column label="操作" min-width="200" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain @click="go_Bug(scope.row)">提bug</el-button>
                    <el-button size="mini" type="danger" plain @click="deleteCaseData(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div align="center"> <!--分页-->
                <el-pagination :current-page="curIndex" :page-size="pageSize" background layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>

            </el-main>
          </el-container>
        </el-container>
        <!-- 新建测试计划 -->
        <el-dialog title="新建测试计划" :visible.sync="dialogFormVisibleUpdate" width="30%" center>
          <el-form ref="caseData" label-position="left" :model="caseData" label-width="120px" :rules="createFormData">
            <el-form-item label="测试计划名称" prop="testPlanName">
              <el-input v-model="caseData.testPlanName" clearable autocomplete="off" placeholder="请输入测试计划名称" style="width: 90%" />
            </el-form-item>
            <el-form-item label="测试计划类型" prop="projectType">
              <el-select v-model="caseData.caserojectType" placeholder="请选择【准入计划】【非准入计划】" style="width: 90%">
                <el-option v-for="item in testPlanTypeEnum" :key="item.code" :label="item.msg" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="端类型" prop="taskType">
              <el-select v-model="caseData.taskType" placeholder="请选择【服务端】【客户端】" style="width: 90%">
                <el-option v-for="item in taskTypeStrings" :key="item.code" :label="item.msg" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="caseCreateCase(caseData, titleName)">确 定</el-button>
            <el-button type="danger" @click="dialogFormVisibleUpdate = false">关 闭</el-button>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogFormVisibleUpdateOne" width="70%" center>
          <el-row :gutter="20">
            <el-col :span="4" style="text-align:right; margin-top:0.7%;"><strong>用例目录</strong></el-col>
            <el-col :span="4">
              <el-select v-model="case_from.one" size="small" clearable placeholder="请选择" @change="case_fromOne(case_from.one)">
                <el-option v-for="item in case_one" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-col>
            <el-col v-if="caseShwo_two" :span="4">
              <el-select v-model="case_from.two" size="small" clearable placeholder="请选择" @change="case_fromTwo(case_from.two)">
                <el-option v-for="item in case_two" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-col>
            <el-col v-if="caseShwo_three" :span="4">
              <el-select v-model="case_from.three" size="small" clearable placeholder="请选择" @change="case_fromThree(case_from.three)">
                <el-option v-for="item in case_three" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-col>
            <el-col v-if="caseShwo_four" :span="4">
              <el-select v-model="case_from.four" size="small" clearable placeholder="请选择" @change="case_fromFour(case_from.four)">
                <el-option v-for="item in case_four" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-col>
          </el-row>
          <div align="center">
            <el-table :data="grid_Data" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" border tooltip-effect="dark" size="mini" style="width: 83%; margin:2% 0;" @selection-change="handleSelectionChange">
              <el-table-column type="selection" min-width="50" align="center" @change="clickAllData(grid_Data)" />
              <el-table-column prop="id" label="序列号" min-width="80" align="center">
                <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column prop="caseCondition" :show-overflow-tooltip="true" label="用例名称" min-width="240" align="center">
                <template slot-scope="scope">{{ scope.row.title }}</template>
              </el-table-column>
              <el-table-column prop="casePriority" label="优先级" min-width="80" align="center">
                <template slot-scope="scope">{{ scope.row.casePriorityName }}</template>
              </el-table-column>
              <el-table-column prop="creatorName" label="操作人" min-width="110" align="center">
                <template slot-scope="scope">{{ scope.row.modifier }}</template>
              </el-table-column>
            </el-table>
            <el-pagination :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total="total_one" background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
          </div>

          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="case_CreateCase()">保 存</el-button>
            <el-button size="small" type="danger" @click="dialogFormVisibleUpdateOne = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { queryCasesData, createTestPlan, updateTestPlan, deleteTestPlanCase, deleteTestPlan, updateTestPlanCase, queryTestPlanTree, queryTestPlanCaseList, queryAllFolderData, createTestPlanCaseList, getWebShowMap, passRateOfTestPlan } from '@/api/caseProject.js'
import clicked_1 from '@/assets/通过点击后状态.png'
import clicked_2 from '@/assets/失败点击后状态.png'
import clicked_3 from '@/assets/阻塞点击后状态.png'
import clicked_4 from '@/assets/未执行点击后状态.png'
import Unclicked_1 from '@/assets/通过未点击状态.png'
import Unclicked_2 from '@/assets/失败未点击状态.png'
import Unclicked_3 from '@/assets/阻塞未点击状态.png'
import Unclicked_4 from '@/assets/未执行未点击状态.png'
export default {
  name: 'Testpage',
  data() {
    return {
      test_plan: {},
      caseShwo_two: false,
      caseShwo_three: false,
      caseShwo_four: false,
      titleName: '',
      num: {},
      clicked_1: clicked_1,
      clicked_2: clicked_2,
      clicked_3: clicked_3,
      clicked_4: clicked_4,
      Unclicked_1: Unclicked_1,
      Unclicked_2: Unclicked_2,
      Unclicked_3: Unclicked_3,
      Unclicked_4: Unclicked_4,
      dialogFormVisibleUpdate: false,
      dialogFormVisibleUpdateOne: false,
      testPlanTypeEnum: [],
      projectTypeStrings: [],
      taskTypeStrings: [],
      userInformation: localStorage.getItem('username'),
      bizJson: localStorage.getItem('key'),
      createTimeData: '',
      pageSize: 8,
      curIndex: 1,
      pageSize_one: 8,
      curIndex_one: 1,
      startId: '',
      Parentids: '',
      createParticipation: {},
      gridData: [],
      pegs: '',
      caseData: {
        caserojectType: 2,
        taskType: 2
      },
      createFormData: {
        testPlanName: [{ required: true, message: '测试计划名称不能为空', trigger: 'change' }],
        caserojectType: [{ required: true, message: '测试计划类型不能为空', trigger: 'change' }]
      },
      dialogTableVisible: false,
      formData: {},
      taskids: '',
      data1: [],
      data2: [],
      total: 0,
      total_one: 0,
      excelData: [],
      imFile: '',
      failNum: '',
      successNum: '',
      startKey: '',
      caseFolderId: '',
      obj: '',
      grid_Data: [],
      case_from: {},
      case_one: [],
      case_two: [],
      case_three: [],
      case_four: [],
      add_Folder: {},
      Selection: [],
      key_arr: [],
      arr: {},
      add: {},
      as: {}
    }
  },
  created() {
    this.AllQueryFolderData()
    this.caseFolder_Nav()
    this.get_selectData()
  },
  mounted() {
    this.imFile = document.getElementById('imFile')
  },
  methods: {
    // init初始化
    AllQueryFolderData() {
      queryTestPlanTree({ bizId: localStorage.getItem('key') }).then(res => {
        if (res.code === 200) {
          this.data1 = res.data.map(item => ({
            ...item,
            codes: '1',
            projectIds: item.id,
            label: item.projectName,
            children: item.taskNameMapList.map(eachData => ({
              ...eachData,
              Parentids: item.id,
              codes: '2',
              label: eachData.taskName,
              children: eachData.testPlanInfos.map(key => ({
                ...key,
                codes: '3',
                taskids: eachData.id,
                label: key.testPlanName
              }))
            }))
          }))
        } else {
          this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
        }
      })
    },

    caseFolder_Nav() {
      queryAllFolderData({ bizId: localStorage.getItem('key') }).then(res => {
        if (res.code === 200) {
          for (var ele of res.data) {
            this.arr = {}
            this.arr.id = ele.id
            this.arr.label = ele.folderName
            this.arr.children = []
            if (ele.subCaseFolderInfos !== null) {
              for (var vel of ele.subCaseFolderInfos) {
                this.add = {}
                this.add.id = vel.id
                this.add.label = vel.folderName
                this.add.children = []
                if (vel.subCaseFolderInfos !== null) {
                  for (var v of vel.subCaseFolderInfos) {
                    this.as = {}
                    this.as.id = v.id
                    this.as.label = v.folderName
                    this.as.children = []
                    if (v.subCaseFolderInfos != null) {
                      for (var a of v.subCaseFolderInfos) {
                        var add4 = {}
                        add4.id = a.id
                        add4.label = a.folderName
                        this.as.children.push(add4)
                      }
                    }
                    this.add.children.push(this.as)
                  }
                }
                this.arr.children.push(this.add)
              }
            }
            this.data2.push(this.arr)
          }
        } else {
          this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
        }
      })
    },

    // 获取下拉数据
    get_selectData() {
      getWebShowMap().then(res => {
        this.projectTypeStrings = res.data.testPlanStatusEnum
        this.taskTypeStrings = res.data.clientEnum
        this.testPlanTypeEnum = res.data.testPlanTypeEnum
      })
    },

    // 导航栏编辑
    dblclick(data) {
      this.caseData = data
      this.$set(this.caseData, 'testPlanName', data.testPlanName)
      this.caseData.caserojectType = data.testPlanType
      this.titleName = '编辑'
      this.dialogFormVisibleUpdate = true
    },

    // 导航栏_新增
    createdTest(data) {
      this.caseData = data
      this.$set(this.caseData, 'testPlanName', '')
      this.$set(this.caseData, 'caserojectType', 2)
      this.$set(this.caseData, 'taskType', 2)
      this.titleName = '新增'
      // this.$refs['caseData'].clearValidate()
      this.dialogFormVisibleUpdate = true
    },

    // 显示隐藏删除图标
    mouseenter(data) {
      this.$set(data, 'del', true)
    },
    mouseleave(data) {
      this.$set(data, 'del', false)
    },

    // 删除
    remove(node, data) {
      this.$confirm('是否确认删除', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.key_arr = []
          var caseData = {
            projectId: data.projectId,
            modifier: this.userInformation,
            taskId: data.taskId,
            bizId: this.bizJson,
            id: data.id
          }
          deleteTestPlan(caseData).then(res => {
            if (res.code === 200) {
              this.$message({ type: 'success', message: '已删除' })
              this.data1 = []
              this.AllQueryFolderData()
              this.key_arr.push(this.startId)
            } else {
              this.$message({ type: 'error', message: res.msg, duration: 1000 })
            }
          })
        })
        .catch(action => {
          this.$message({ type: 'success', message: '已取消' })
        })
    },

    // 分页
    handleSizeChange(size) {
      this.pageSize = size
      this.pageIndex()
    },
    handleCurrentChange(curIndex) {
      this.curIndex = curIndex
      this.pageIndex()
    },
    pageIndex() {
      queryTestPlanCaseList({ pageSize: this.pageSize, curIndex: this.curIndex, testPlanId: this.startId }).then(res => {
        this.gridData = res.data
        this.total = res.total
      })
    },

    handleSizeChange1(size) {
      console.log(size, '1')
      this.pageSize_one = size
      this.pageIndex1()
    },
    handleCurrentChange1(curIndex) {
      this.curIndex_one = curIndex
      this.pageIndex1()
    },

    pageIndex1() {
      queryCasesData({ pageSize: this.pageSize_one, curIndex: this.curIndex_one, caseFolderId: this.caseFolderId }).then(res => {
        this.grid_Data = res.data.list
        this.total_one = res.data.total
      })
    },

    // 新增/编辑 提交
    caseCreateCase(vel, e) {
      this.key_arr = []
      if (e === '编辑') {
        var caseData = vel
        updateTestPlan(caseData).then(res => {
          this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
          this.dialogFormVisibleUpdate = false
          this.AllQueryFolderData()
          this.key_arr.push(this.startId)
        })
      }
      if (e === '新增') {
        this.$refs['caseData'].validate((valid) => {
          if (valid) {
            caseData = {
              caserojectType: vel.caserojectType,
              testPlanName: vel.testPlanName,
              taskType: vel.taskType,
              projectId: vel.Parentids,
              creator: this.userInformation,
              modifier: this.userInformation,
              taskId: vel.id,
              bizId: this.bizJson
            }
            createTestPlan(caseData).then(res => {
              if (res.code === 200) {
                this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
                this.dialogFormVisibleUpdate = false
                this.AllQueryFolderData()
                this.key_arr.push(this.startId)
              } else {
                this.$notify({ title: '提示', message: res.msg, duration: 2000 })
              }
            })
          }
        })
      }
      this.key_arr.push(vel.id)
    },
    // 查询
    queryCaseData(ele) {
      if (this.createParticipation.testPlanName === '') return false
      if (this.pegs !== '3') {
        this.$message({ message: '提示, 👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      } else {
        this.createParticipation.testPlanId = this.startId
        this.createParticipation.id = ele.id
        this.createParticipation.status = ele.region
        this.createParticipation.pageSize = this.pageSize
        this.createParticipation.curIndex = this.curIndex
        queryTestPlanCaseList(this.createParticipation).then(res => {
          this.gridData = []
          res.data.map(item => {
            item.caseInfo.ids = item.id
            item.caseInfo.status_case = item.status
            item.caseInfo.keys = item.status
            item.caseInfo.thrr = this.startId
            this.gridData.push(item.caseInfo)
          })
          this.total = res.data.length
        })
      }
    },

    // 新增
    createGetShow() {
      this.titleName = '新增'
      this.case_from = {}
      this.caseShwo_three = false
      this.caseShwo_two = false
      this.caseShwo_four = false
      this.grid_Data = []
      if (this.pegs !== '3') {
        this.$message({ message: '提示, 👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      } else {
        this.dialogFormVisibleUpdateOne = true
        this.case_one = this.data2
      }
    },

    // 复选框单选
    handleSelectionChange(val) {
      this.Selection = []
      for (var e of val) {
        this.Selection.push(e.id)
      }
    },

    // 新建tableData
    case_CreateCase() {
      createTestPlanCaseList({ testPlanId: this.startId, caseIds: this.Selection, creator: this.userInformation, modifier: this.userInformation }).then(res => {
        this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
        this.dialogFormVisibleUpdateOne = false
        this.queryCaseData('')
      })
    },

    // table全选调用查询接口
    clickAllData(rows) {
      queryCasesData({ caseFolderId: this.startId }).then(res => {
        var table_Data = res.data.list
        for (var el of table_Data) {
          this.Selection.push(el.id)
        }
      })
    },
    // 改变case_one
    case_fromOne(e) {
      this.caseFolderId = e
      if (e === '') {
        this.caseShwo_two = false
        this.$set(this.case_from, 'two', '')
        this.caseShwo_three = false
        this.$set(this.case_from, 'three', '')
        this.caseShwo_four = false
        this.$set(this.case_from, 'four', '')
        this.grid_Data = []
      } else {
        queryCasesData({ pageSize: this.pageSize, curIndex: this.curIndex, caseFolderId: e }).then(res => {
          this.grid_Data = res.data.list
          this.total_one = res.data.total
        })

        for (var one of this.data2) {
          if (one.id === e) {
            this.case_two = one.children
            if (this.case_two.length !== 0) {
              this.caseShwo_two = true
            } else {
              this.caseShwo_two = false
            }
          }
        }
      }
    },
    // 改变case_two
    case_fromTwo(e) {
      this.caseFolderId = e
      if (e === '') {
        this.caseShwo_three = false
        this.$set(this.case_from, 'three', '')
        this.caseShwo_four = false
        this.$set(this.case_from, 'four', '')
        this.grid_Data = []
      } else {
        queryCasesData({ pageSize: this.pageSize, curIndex: this.curIndex, caseFolderId: e }).then(res => {
          this.grid_Data = res.data.list
          this.total_one = res.data.total
        })
        for (var two of this.case_two) {
          if (two.id === e) {
            this.case_three = two.children
            if (this.case_three.length !== 0) {
              this.caseShwo_three = true
            } else {
              this.caseShwo_three = false
            }
          }
        }
      }
    },

    // 改变case_three
    case_fromThree(e) {
      this.caseFolderId = e
      if (e === '') {
        this.caseShwo_four = false
        this.$set(this.case_from, 'four', '')
        this.grid_Data = []
      } else {
        queryCasesData({ pageSize: this.pageSize, curIndex: this.curIndex, caseFolderId: e }).then(res => {
          this.grid_Data = res.data.list
          this.total_one = res.data.total
        })
        for (var three of this.case_three) {
          if (three.id === e) {
            this.case_four = three.children
            if (this.case_four.length !== 0) {
              this.caseShwo_four = true
            } else {
              this.caseShwo_four = false
            }
          }
        }
      }
    },
    // 改变case_four
    case_fromFour(e) {
      this.caseFolderId = e
      this.grid_Data = []
      queryCasesData({ pageSize: this.pageSize, curIndex: this.curIndex, caseFolderId: e }).then(res => {
        this.grid_Data = res.data.list
        this.total_one = res.data.total
      })
    },

    // 点击节点
    clickFun(e) {
      console.log(e)
      this.test_plan = {}
      this.pegs = ''
      e.codes === '1' ? this.Parentids = e.id : ''
      e.codes === '2' ? this.taskids = e.id : ''
      if (e.codes === '3') {
        this.pegs = '3'
        this.startId = e.id
        queryTestPlanCaseList({ pageSize: this.pageSize, curIndex: this.curIndex, testPlanId: e.id }).then(res => {
          this.gridData = []
          res.data.map(item => {
            item.caseInfo.thrr = e.id
            item.caseInfo.ids = item.id
            item.caseInfo.status_case = item.status
            item.caseInfo.keys = item.status
            this.gridData.push(item.caseInfo)
          })
          this.total = this.gridData.length
        })
        this.implement()
      }
    },

    Unclicked(e, index, ele) {
      this.gridData[index].keys = 1
      updateTestPlanCase({ creator: this.userInformation, modifier: this.userInformation, id: ele.ids, status: 1, testPlanId: ele.thrr }).then(res => { this.implement() })
    },
    Unclicked2(e, index, ele) {
      this.gridData[index].keys = 2
      updateTestPlanCase({ creator: this.userInformation, modifier: this.userInformation, id: ele.ids, status: 2, testPlanId: ele.thrr }).then(res => { this.implement() })
    },
    Unclicked3(e, index, ele) {
      this.gridData[index].keys = 3
      updateTestPlanCase({ creator: this.userInformation, modifier: this.userInformation, id: ele.ids, status: 3, testPlanId: ele.thrr }).then(res => { this.implement() })
    },
    Unclicked4(e, index, ele) {
      console.log(ele)
      this.gridData[index].keys = 0
      updateTestPlanCase({ creator: this.userInformation, modifier: this.userInformation, id: ele.ids, status: 0, testPlanId: ele.thrr }).then(res => { this.implement() })
    },

    // 跳转bug页面
    go_Bug(e) {
      this.$router.push({ path: '/Platform/defectManagement/bugCreate', query: { ids: e.ids, testPlanId: e.thrr }})
    },

    // 跳转查看页面
    go_query(e) {
      this.$router.push({ path: '/Platform/useCasePage/queryUse', query: { id: e.id }})
    },

    // 执行结果
    implement() {
      passRateOfTestPlan({ testPlanId: this.startId }).then(res => {
        this.num = {
          Count1: res.data.successCount,
          Rate1: Math.floor(res.data.successRate * 1000) / 1000,
          Count2: res.data.failCount,
          Rate2: Math.floor(res.data.failRate * 1000) / 1000,
          Count3: res.data.blockCount,
          Rate3: Math.floor(res.data.blockRate * 1000) / 1000,
          Count4: res.data.defaultCount,
          Rate4: Math.floor(res.data.defaultRate * 1000) / 1000
        }
      })
    },

    // 删除table信息
    deleteCaseData(e) {
      console.log(e, '删除')
      this.$confirm('是否确认删除', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteTestPlanCase({ id: e.ids, modifier: this.userInformation }).then(res => {
          if (res.code === 200) {
            queryTestPlanCaseList({ testPlanId: e.thrr, pageSize: this.pageSize, curIndex: this.curIndex }).then(res => {
              this.gridData = []
              res.data.map(item => {
                item.caseInfo.thrr = e.thrr
                item.caseInfo.ids = item.id
                item.caseInfo.status_case = item.status
                item.caseInfo.keys = item.status
                this.gridData.push(item.caseInfo)
              })
              this.total = this.gridData.total
            })
            this.$message({ type: 'success', message: '已删除' })
          } else {
            this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
          }
        })
      }).catch(action => { this.$message({ message: '已取消', type: 'error', duration: 1000, offset: 150 }) })
    }
  }
}
</script>

<style>
.span-ellipsis {
 width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .nav_Input .el-input--mini .el-input__inner {
   height: 23px !important;
  }
  .nav_Input .el-tree-node__content {
    color: #333B4A;
  }
  .nav_Input .el-tree-node__content .el-tree-node__expand-icon{
      color: #333B4A;
  }
  .nav_Input .el-tree-node__expand-icon.is-leaf{
        color: transparent !important;
        cursor: default !important
  }
  .nav_Input .el-tree-node__children .custom-tree-node{
      color: #6F7C93;
  }
  /* .span_el {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  } */
  .btn_query .el-button--primary.is-plain {
    color: #000000 !important;
    background: #F9F9FA !important;
    border-color: #F9F9FA !important;
  }
</style>