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

<template>
  <div id="init-window" style="position:relative; min-height:95vh; background:#F2F3F6;">
    <router-view />
    <div v-show="div1" 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;" @click="click_fa">
              <br>
              <p v-show="node_Data" style="color: #DCDFE6; margin: 100% 0;font-size:14px; text-align:center;" @click="createFolder">新建文件夹</p>
              <el-tree
                v-if="dataShow"
                :data="data1"
                node-key="id"
                draggable
                :expand-on-click-node="false"
                :default-expanded-keys="[1]"
                :default-checked-keys="[5]"
                @node-drag-start="handleDragStart"
                @node-drag-enter="handleDragEnter"
                @node-drag-leave="handleDragLeave"
                @node-drag-over="handleDragOver"
                @node-drag-end="handleDragEnd"
                @node-drop="handleDrop"
                @node-click="clickFun"
              >
                <span slot-scope="{ node, data }" style="width:100%;" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                  <span :title="data.label" class="span_el" @dblclick="dblclick(data)">{{ node.label }}</span>
                  <el-input v-if="data.que" ref="get_Input" v-model="node_Name.name" size="mini" @blur="queryNodeName(node_Name.name, data)">输入框</el-input>
                  <el-dropdown v-show="data.del" style="margin-left:10px" trigger="click">
                    <span class="el-dropdown-link">
                      ···<i class="el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="createFolder">新建节点</el-dropdown-item>
                      <el-dropdown-item @click.native="dblclick(data)">编辑节点</el-dropdown-item>
                      <el-dropdown-item @click.native="() => remove(node, data)">删除节点</el-dropdown-item>
                      <el-dropdown-item @click.native="() => append(data)">新建子节点</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </el-tree>
              <el-input v-if="Folder_Show" ref="input1" v-model="add_Folder" size="mini" placeholder="新建文件夹" @blur="hide_input(add_Folder)" />
            </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 style="white-space:nowrap; display: flex; justify-content: center; align-items: center;margin-top:1.3%;">
                  用例名称
                  <el-input v-model="createParticipation.title" clearable placeholder="请输入内容" style="margin-left:0.5%;" />
                  <el-button style="margin-left:1%;" type="primary" @click="queryCaseData(createParticipation)">查询</el-button>
                  <el-button @click="queryUpdateCreatd('', 3)">新增</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col style="white-space:nowrap; display: flex; justify-content: center; align-items: center;margin:1.3% 0;">
                  <div style="flex:1;display: flex;justify-content: center; align-items: center">
                    序列号 &nbsp;<el-input v-model="createParticipation.id" placeholder="用例名" clearable style="width: 42%;margin: 0 2% 0 2%;" class="filter-item" />
                    优先级
                    <el-select v-model="createParticipation.casePriority" style="width: 40%;margin: 0 4% 0 3%;" clearable placeholder="优先级">
                      <el-option v-for="item in priorityStrings" :key="item.value" :label="item.name" :value="item.value" />
                    </el-select>
                  </div>
                  <div style="flex:1;display: flex;justify-content: center; align-items: center">
                    操作人 &nbsp;<el-input v-model="createParticipation.modifier" placeholder="操作人" clearable style="width: 100%;margin-left:1.7%;" class="filter-item" />
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col style="white-space:nowrap; display: flex; justify-content: center; align-items: center;margin-bottom:1%;">
                  <div style="flex:1;display: flex;justify-content: center; align-items: center">
                    创建时间
                    <el-date-picker v-model="createParticipation.createTime" style="width:40%;margin: 0 3% 0 1%;" type="datetime" placeholder="开始日期" /><span style="margin: 0 1.1% 0 1.1% ;"> 一 </span>
                    <el-date-picker v-model="createParticipation.modifyTime" style="width:40%;margin: 0 4% 0 3%;" type="datetime" placeholder="结束日期" />
                  </div>
                  <div style="flex:1;display: flex;justify-content: center; align-items: center">
                    项目名称 <el-input v-model="createParticipation.projectName" placeholder="创建人" clearable style="width: 50%;margin: 0 2% 0 1%;" class="filter-item" />
                    需求名称<el-input v-model="createParticipation.taskName" placeholder="创建人" clearable style="width: 50%;margin-left:2%;" class="filter-item" />
                  </div>
                  <input id="imFile" ref="imFile" type="file" style="display: none" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="importFile(this)">
                </el-col>
              </el-row>
            </el-header>
            <el-main style="background:#ffffff; width:98%;margin:0% 1% 1% 1%; font-size:14px;border-radius:8px;">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-success="handlePreview"
                multiple
                :limit="3"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <el-button type="primary" style="margin-left:1%;width:10%;" @click="uploadFile()">导入</el-button>
              <el-tooltip class="item" effect="light" content="导出勾选项，没有勾选将导出模版" placement="top">
                <el-button style="margin-left:2%;width:10%;" @click="exportExcel">导出</el-button>
              </el-tooltip>
              <!-- 主页table -->
              <el-table :data="gridData" size="mini" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" style="width: 100%; font-size:13px;margin-top:1%;" border @select-all="clickAllData" @selection-change="handleSelectionChange">
                <el-table-column type="selection" min-width="50" align="center" @change="clickAllData(gridData)" />
                <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"><span style="color:#409EFF; cursor: pointer" @click="queryUpdateCreatd(scope.row, 1)">{{ scope.row.title }}</span></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-column label="操作" min-width="150px" align="center">
                  <template slot-scope="scope">
                    <!-- <el-button size="mini" class="btn_query" plain @click="queryUpdateCreatd(scope.row, 1)">查看</el-button> -->
                    <el-button size="mini" type="primary" plain @click="queryUpdateCreatd(scope.row, 2)">编辑</el-button>
                    <el-button size="mini" type="danger" plain @click="deleteCaseData(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 导出文件内容 -->
              <el-table v-show="false" id="out-table" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="id" label="序号" width="50" />
                <el-table-column prop="caseCondition" label="前置条件" />
                <el-table-column prop="description" label="测试步骤" />
                <el-table-column prop="expectedResult" label="期望结果" />
                <el-table-column prop="api" label="对应api" />
                <el-table-column prop="accessory" label="附件" />
                <el-table-column prop="casePriority" label="用例优先级" />
                <el-table-column prop="remark" label="备注" />
              </el-table>
              <div align="center" class="block">
                <el-pagination :current-page="curIndex" background :page-sizes="[5]" :page-size="pageSize" layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import { createFolderData, queryAllFolderData, queryCasesData, deleteFolderData, deleteCaseData, updateFolderData, caseUpdateFolderName } from '@/api/caseProject.js'
import { mockUrl } from '@/apiConfig/api'
import FileSaver from 'file-saver'
import axios from 'axios'
import XLSX from 'xlsx'
import Utils from '../../util.js'

export default {
  name: 'UseCasePage',
  data() {
    return {
      fileList: [],
      div1: true,
      id: '',
      label: '',
      node_Name: {},
      Folder_Show: false,
      add_Folder: '',
      node_Data: false,
      dataShow: true,
      priorityStrings: [{ name: 'p0', value: 0 }, { name: 'p1', value: 1 }, { name: 'p2', value: 2 }, { name: 'p3', value: 3 }],
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      bizJson: localStorage.getItem('key'),
      userData: '',
      caseInfo: '',
      pageSize: 5,
      curIndex: 1,
      startId: '',
      created_id: '-1',
      end: '',
      total: 0,
      createParticipation: {},
      moduleTypeStr: [],
      gridData: [],
      formData: {},
      data1: [],
      tableData: [],
      imFile: '',
      failNum: '',
      successNum: '',
      startKey: '',
      obj: '',
      end_Data: '',
      return_URL: ''
    }
  },
  created() {
    // this.moduleTypeArr()
  },
  mounted() {
    var that = this
    Utils.$on('demo', function(msg) {
      that.AllQueryFolderData(msg)
    })
    this.imFile = document.getElementById('imFile')
    this.initWindow()
    this.AllQueryFolderData(localStorage.getItem('key'))
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 左侧导航栏
    AllQueryFolderData(e) {
      if (e !== '') {
        this.gridData = []
        this.data1 = []
        this.formData = { bizId: e }
        queryAllFolderData(this.formData).then(res => {
          if (res.code === 200) {
            for (var ele of res.data) {
              var arr = {}
              arr.id = ele.id
              arr.label = ele.folderName
              arr.children = []
              if (ele.subCaseFolderInfos !== null) {
                for (var vel of ele.subCaseFolderInfos) {
                  var add = {}
                  add.id = vel.id
                  add.label = vel.folderName
                  add.children = []
                  if (vel.subCaseFolderInfos !== null) {
                    for (var v of vel.subCaseFolderInfos) {
                      var as = {}
                      as.id = v.id
                      as.label = v.folderName
                      as.children = []
                      if (v.subCaseFolderInfos != null) {
                        for (var a of v.subCaseFolderInfos) {
                          var add4 = {}
                          add4.id = a.id
                          add4.label = a.folderName
                          as.children.push(add4)
                        }
                      }
                      add.children.push(as)
                    }
                  }
                  arr.children.push(add)
                }
              }
              this.data1.push(arr)
            }
            if (this.data1.length === 0) {
              this.node_Data = true
              this.dataShow = false
            } else {
              this.node_Data = false
              this.dataShow = true
            }
          } else {
            this.dataShow = false
            this.node_Data = true
            this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
          }
        })
      } else {
        this.dataShow = false
        this.node_Data = true
        this.$message({ message: '请先选择业务线', type: 'error', duration: 1000, offset: 150 })
      }
    },

    // 双击编辑
    dblclick(data) {
      this.label = data.label// 当前选中的名称
      this.id = data.id // 当前选中id
      this.$set(data, 'label', '')
      this.$set(data, 'que', true)
      this.$set(data, 'del', false)
      this.$set(this.node_Name, 'name', this.label)
      setTimeout(() => { this.$refs.get_Input.focus() }, 100)
      this.$nextTick(() => {
        this.$refs.get_Input.focus()
      })
    },

    // 添加节点
    append(data) {
      console.log(data)
      var id = 1
      const newChild = { id: id++, label: '新建子节点', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
      this.formData = {
        bizId: this.bizJson,
        folderName: newChild.label,
        xmindUrl: '',
        parentFolderId: this.startId,
        creator: this.userInformation,
        modifier: this.userInformation
      }
      createFolderData(this.formData).then(res => {
      //   if (res.code === 200) {
      //     this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
      //     this.data1 = []
      //     this.AllQueryFolderData(this.bizJson)
      //     this.add_Folder = ''
      //   } else {
      //     this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
      //     this.add_Folder = ''
      //   }
      })
    },

    // 更新节点
    queryNodeName(val, data) {
      var mun = ''
      for (var el of this.data1) { // 最外层id
        if (data.id === el.id) { // 双击获取的ID和最外层的ID匹配
          mun = '-1' // 有赋值为 -1
        } else {
          mun = '' // 没有赋值为点击的父元素
        }
      }
      if (val === '') { // 判断用户是否有输入
        val = this.label // 没有输入拿之前的label替代
        this.end_Data = { parentFolderId: mun, folderName: val, xmindUrl: '', id: data.id, bizId: localStorage.getItem('key'), modifier: this.userInformation, creator: this.userInformation }
      } else {
        this.end_Data = { parentFolderId: mun, folderName: val, xmindUrl: '', id: data.id, bizId: localStorage.getItem('key'), modifier: this.userInformation, creator: this.userInformation }
      }
      this.$set(data, 'que', false) // 失去焦点隐藏input
      this.$set(this.node_Name, 'name', '') // 清空input
      caseUpdateFolderName(this.end_Data).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: res.msg, duration: 1000 })
          this.data1 = []
          this.AllQueryFolderData(localStorage.getItem('key'))
        } else {
          this.$message({ type: 'error', message: res.msg, duration: 1000 })
          this.data1 = []
          this.AllQueryFolderData(localStorage.getItem('key'))
        }
      })
    },

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

    // 隐藏主页样式
    initWindow() {
      if (!document.getElementById('window-judge')) {
        document.getElementById('init-window').parentNode.style.overflow = 'auto'
      } else {
        document.getElementById('init-window').parentNode.style.overflow = 'hidden'
      }
    },
    // moduleTypeArr() {
    //   axios.get('https://star.xiaojukeji.com/upload/getPresignedUrl.node?name=“文件名”').then(res => {
    //     console.log(res)
    //   })
    //   settingQueryModuleInfoListData(this.formData).then(res => {
    //     this.moduleTypeStr = res.data
    //   })
    // },
    handleSizeChange(size) {
      this.pageSize = size
      this.pageIndex()
    },
    handleCurrentChange(curIndex) {
      this.curIndex = curIndex
      this.pageIndex()
    },
    pageIndex() {
      this.formData = {
        pageSize: this.pageSize,
        curIndex: this.curIndex,
        caseFolderId: this.startId
      }

      queryCasesData(this.formData).then(res => {
        this.gridData = res.data.list
      })
    },
    clickAllData(rows) {
      this.formData = {
        caseFolderId: this.startId
      }
      queryCasesData(this.formData).then(res => {
        this.tableData = res.data
      })
    },

    // 点击空白创建最外层nav
    click_fa() {
      this.created_id = '-1'
    },

    // 新建文件夹
    createFolder() {
      this.Folder_Show = true
      this.add_Folder = ''
      this.node_Data = false
      setTimeout(() => { this.$refs.input1.focus() }, 100)
    },

    // input失去焦点新增（或取消）
    hide_input(vel) {
      if (vel !== '') {
        this.created_id === '' ? this.created_id = '-1' : ''
        this.formData = {
          bizId: this.bizJson,
          folderName: vel,
          xmindUrl: '',
          parentFolderId: this.created_id,
          creator: this.userInformation,
          modifier: this.userInformation
        }
        createFolderData(this.formData).then(res => {
          if (res.code === 200) {
            this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
            // this.createCaseCode = false
            this.dataShow = true
            this.node_Data = false
            this.data1 = []
            this.AllQueryFolderData(this.bizJson)
            this.created_id = ''
          } else {
            this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
            this.created_id = ''
          }
        })
        this.Folder_Show = false
      } else {
        this.$message({ message: '取消创建文件夹', type: 'success', duration: 1000, offset: 150 })
        this.Folder_Show = false
        this.node_Data = true
      }
    },

    // 查询
    queryCaseData(ele) {
      if (this.createParticipation.caseName === '') return false
      if (this.startId === '') {
        this.$message({ message: '提示, 👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      } else {
        this.createParticipation = ele
        this.createParticipation.caseFolderId = this.startId
        this.createParticipation.pageSize = this.pageSize
        this.createParticipation.curIndex = this.curIndex
        queryCasesData(this.createParticipation).then(res => {
          this.gridData = res.data.list
        })
      }
    },

    queryUpdateCreatd(ele, e) {
      if (this.startId === '') {
        this.$message({ message: '提示, 👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      } else {
        switch (e) {
          case 1: // 查看
            this.$router.push({ path: '/Platform/useCasePage/queryUse', query: { id: ele.id, caseFolderId: ele.caseFolderId }})
            break
          case 2: // 编辑
            // this.div1 = false
            this.$router.push({ path: '/Platform/useCasePage/createUse', query: { id: ele.id, caseFolderId: ele.caseFolderId }})
            break
          case 3: // 新增
            this.$router.push({ path: '/Platform/useCasePage/createUse', query: { data: this.startId }})
            break
        }
      }
    },
    handleSelectionChange(val) {
      this.tableData = val
    },

    // nav
    handleDragStart(node, ev) {
      console.log('节点开始拖拽时触发的事件', node.key)
      this.startKey = node.key
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('拖拽进入其他节点时触发的事件', dropNode.data.id)
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('拖拽离开某个节点时触发的事件', dropNode.data.id)
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('在拖拽节点时触发的事件', dropNode.data.id)
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('拖拽结束时（可能未成功）触发的事件', dropNode && dropNode.key, dropType)
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('拖拽成功完成时触发的事件', dropNode.key, dropType)
      var startEnd = { parentFolderId: dropNode.key, id: this.startKey, bizId: localStorage.getItem('key'), modifier: this.userInformation, creator: this.userInformation, xmindUrl: '' }
      this.ConfirmSubmission(startEnd)
    },

    ConfirmSubmission(vel) {
      updateFolderData(vel).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: res.msg, duration: 1000 })
          this.data1 = []
          this.AllQueryFolderData(localStorage.getItem('key'))
        } else {
          this.$message({ type: 'error', message: res.msg, duration: 1000 })
          this.data1 = []
          this.AllQueryFolderData(localStorage.getItem('key'))
        }
      })
    },
    // 删除
    remove(node, data) {
      this.$confirm('是否确认删除', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.formData = {
            id: node.data.id,
            modifier: node.data.id
          }
          deleteFolderData(this.formData).then(res => {
            if (res.code === 200) {
              this.$message({ type: 'success', message: '已删除' })
              this.data1 = []
              this.AllQueryFolderData(localStorage.getItem('key'))
            } else {
              this.$message({ type: 'error', message: res.msg, duration: 1000 })
            }
          })
        })
        .catch(action => {
          this.$message({ type: 'success', message: '已取消' })
        })
    },
    // Nav 当前点击
    clickFun(e) {
      this.startId = e.id
      this.created_id = e.id
      this.formData = {
        pageSize: 5,
        curIndex: 1,
        caseFolderId: e.id
      }
      queryCasesData(this.formData).then(res => {
        this.gridData = res.data.list
        this.total = res.data.total
      })
    },

    // 表格信息删除
    deleteCaseData(e) {
      if (this.startId === '') {
        this.$message({ message: '提示, 👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      } else {
        this.$confirm('是否确认删除', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.caseInfo = { id: e, modifier: this.userInformation }
            deleteCaseData(this.caseInfo).then(res => {
              if (res.code === 200) {
                var data = {
                  pageSize: this.pageSize,
                  curIndex: this.curIndex,
                  caseFolderId: this.startId
                }
                queryCasesData(data).then(res => {
                  this.gridData = res.data.list
                  this.$message({ type: 'success', message: '已删除' })
                })
              } else {
                this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
              }
            })
          })
          .catch(action => { this.$message({ type: 'success', message: '已取消' }) })
      }
    },

    //  导出
    exportExcel() {
      if (this.startId === '') {
        this.$message({ message: '提示，👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      } else {
      /* generate workbook object from table */
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* get binary string as output */
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
        } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
        return wbout
      }
    },

    // 导入excel
    importFile() {
      var obj = this.imFile

      if (!obj.files) {
        return
      }
      var f = obj.files[0]
      var formData = new FormData()
      formData.append('file', f)
      // var tow = f.name.split('.')
      // axios.post('https://star.xiaojukeji.com/upload/getPresignedUrl.node?name=' + tow[0] + '&customAcl=public-read&cacheStrategy=max-age=31536000', {
      //   // 单独配置
      //   withCredentials: false
      // })
      //   .then(function(res) {
      //     console.log(res.data)
      //     this.return_URL = res.data.url
      //     axios.post(this.return_URL, formData).then(res => {
      //       console.log(res)
      //     })
      //   })
      //   .catch(function(err) {
      //     console.error('1' + err)
      //   })

      var caseInfo = {
        bizId: this.bizJson,
        creator: this.userNames,
        modifier: this.userNames,
        caseFolderId: this.startId
      }
      formData.append('caseInfo', JSON.stringify(caseInfo))
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios.post(mockUrl + '/case/uploadCase', formData, config).then(res => {
        var code = res.data.data
        this.successNum = code.successNum
        this.failNum = code.failNum
        console.log(res)
        if (res.data.code === 200) {
          if (this.failNum === 0) {
            this.updateCaseListData()
          } else {
            this.haha = '上传成功' + this.successNum + '上传失败' + this.failNum
            this.$notify({ title: 'error', message: this.haha, type: 'success', duration: 2000 })
          }

          this.$refs.imFile.value = null
        } else {
          this.$message({ type: 'success', message: '导入失败' })
        }
      })
    },

    // fixdata: function(data) { // 文件流转BinaryString
    //   var o = ''
    //   var l = 0
    //   var w = 10240
    //   for (; l < data.byteLength / w; ++l) {
    //     o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
    //   }
    //   o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
    //   return o
    // },

    // 按钮导入
    uploadFile() {
      if (this.startId === '') {
        this.$message({ message: '提示，👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      } else {
        this.$refs.imFile.click()
      }
    },

    updateCaseListData() {
      this.createParticipation.caseFolderId = this.startId
      queryCasesData(this.createParticipation).then(res => {
        this.gridData = res.data
        this.$message({ type: res.msg, message: res.msg, duration: 1000 })
      })
    }
  }
}
</script>

<style>
.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;
  }
  .span_el {
    display: block;
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
  }
  .btn_query .el-button--primary.is-plain {
    color: #000000 !important;
    background: #F9F9FA !important;
    border-color: #F9F9FA !important;
  }
  .button_query :hover{
    background: #409EFF;
    color: #FFFFFF;
  }
</style>