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

<template>
  <div id="init-window" style="position:relative; min-height:95vh; 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>
              <p v-show="node_Data" style="cursor: pointer; margin: 100% 0;font-size:14px; text-align:center;" @click="createFolder">新建文件夹</p>
              <el-tree
                v-if="dataShow"
                style="overflow-x:auto; min-width:100%;display:inline-block !important"
                :data="data1"
                node-key="id"
                draggable
                :default-expanded-keys="key_arr"
                :expand-on-click-node="false"
                @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" @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-button type="primary" style="margin-left:1%;" @click="uploadFile()">导入</el-button>
              <el-tooltip class="item" effect="light" content="导出勾选项，没有勾选将导出excel模版" placement="top">
                <el-button style="margin-left:2%;" @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" 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="description" label="测试步骤" />
                <el-table-column prop="expectedResult" label="期望结果" />
                <el-table-column prop="casePriority" label="优先级" />
                <el-table-column prop="caseCondition" label="前置条件" />
                <el-table-column prop="api" label="api" />
                <el-table-column prop="accessory" 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 {
      key_arr: [],
      fileList: [],
      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: '',
      end: '',
      total: 0,
      createParticipation: {},
      moduleTypeStr: [],
      gridData: [],
      formData: {},
      data1: [],
      tableData: [],
      imFile: '',
      failNum: '',
      o_number: '',
      successNum: '',
      startKey: '',
      obj: '',
      end_Data: '',
      return_URL: ''
    }
  },
  created() {
    this.AllQueryFolderData(localStorage.getItem('key'))
  },
  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: {
    // 左侧导航栏
    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) {
      this.formData = {
        bizId: this.bizJson,
        folderName: '新建子节点',
        xmindUrl: '',
        parentFolderId: this.startId,
        creator: this.userInformation,
        modifier: this.userInformation
      }
      createFolderData(this.formData).then(res => {
        console.log(res.data)
        if (res.code === 200) {
          const newChild = { id: res.data, label: '新建子节点', children: [] }
          if (!data.children) {
            this.$set(data, 'children', [])
          }
          data.children.push(newChild)
          this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
          this.data1 = []
          this.AllQueryFolderData(this.bizJson)
          this.key_arr.push(this.startId)
          this.add_Folder = ''
        } else {
          this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
          this.add_Folder = ''
        }
      })
    },

    // 更新节点
    queryNodeName(val, data) {
      if (val === '') { // 判断用户是否有输入
        val = this.label // 没有输入拿之前的label替代
        this.end_Data = { folderName: val, xmindUrl: '', id: data.id, bizId: localStorage.getItem('key'), modifier: this.userInformation, creator: this.userInformation }
      } else {
        this.end_Data = { 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'
      }
    },

    // 分页信息
    handleSizeChange(size) {
      this.pageSize = size
      this.pageIndex()
    },
    handleCurrentChange(curIndex) {
      this.curIndex = curIndex
      this.pageIndex()
    },
    pageIndex() {
      queryCasesData({ caseFolderId: this.startId, curIndex: this.curIndex, pageSize: this.pageSize }).then(res => {
        this.gridData = res.data.list
      })
    },

    // table全选调用查询接口
    clickAllData(rows) {
      queryCasesData({ caseFolderId: this.startId }).then(res => {
        this.tableData = res.data.list
      })
    },

    // 新建文件夹
    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.formData = {
          bizId: this.bizJson,
          folderName: vel,
          xmindUrl: '',
          parentFolderId: '-1',
          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.dataShow = true
            this.node_Data = false
            this.data1 = []
            this.AllQueryFolderData(this.bizJson)
          } else {
            this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
          }
        })
        this.Folder_Show = false
      } else {
        if (this.data1 === '') {
          this.node_Data = true
        } else {
          this.Folder_Show = false
          this.node_Data = false
        }
        this.$message({ message: '取消创建文件夹', type: 'success', duration: 1000, offset: 150 })
      }
    },

    // 查询
    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.$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 = []
      for (var e of val) {
        this.tableData.push(e.id)
      }
    },

    // 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: '已取消' })
        })
    },

    // 点击节点
    clickFun(e) {
      console.log(e)
      if (this.startId !== e.id) {
        this.key_arr = []
      }
      this.startId = e.id
      queryCasesData({ pageSize: 5, curIndex: 1, caseFolderId: e.id }).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() {
      var case_from = {
        accessory: '/Users/didi/Desktop',
        caseFolderId: this.startId,
        caseIds: this.tableData
      }
      axios({
        method: 'post',
        url: 'http://10.179.24.176:8980/case/downloadCase', // 请求地址
        data: case_from, // 参数
        responseType: 'blob' // 表明返回服务器返回的数据类型
      })
        .then((res) => {
          const content = res
          const blob = new Blob([content])
          if ('download' in document.createElement('a')) { // 非IE下载
            const elink = document.createElement('a')
            elink.download = '导出信息.xls'
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          }
        })
      // if (this.startId === '') {
      //   this.$message({ message: '提示，👈请选择目录', type: 'success', duration: 1000, offset: 150 })
      // } else {
      //   var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      //   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
      // }
    },
    downLoadXls(data, filename) {
      // var blob = new Blob([data], {type: 'application/vnd.ms-excel'})接收的是blob，若接收的是文件流，需要转化一下
      if (typeof window.chrome !== 'undefined') {
        // Chrome version
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(data)
        link.download = filename
        link.click()
      } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // IE version
        var blob = new Blob([data], { type: 'application/force-download' })
        window.navigator.msSaveBlob(blob, filename)
      } else {
        // Firefox version
        var file = new File([data], filename, { type: 'application/force-download' })
        window.open(URL.createObjectURL(file))
      }
    },

    // 导入excel
    importFile() {
      var obj = this.imFile
      if (!obj.files) { return }
      var f = obj.files[0]
      console.log(f)
      var a_name = f.name.split('.')
      console.log(a_name[1])
      if (a_name[1] === 'xlsx') {
        var formData = new FormData()
        formData.append('file', f)
        var caseInfo = {
          bizId: this.bizJson,
          creator: this.userNames,
          modifier: this.userNames,
          caseFolderId: this.startId
        }
        formData.append('caseInfo', JSON.stringify(caseInfo))
        axios.post(mockUrl + '/case/uploadCase', formData, { headers: { 'Content-Type': 'multipart/form-data' }}).then(res => {
          var code = res.data.data
          this.successNum = code.successNum
          this.failNum = code.failNum
          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: '导入失败' })
          }
        })
      }

      if (a_name[1] === 'xmind') {
        var formData_s = new FormData()
        formData_s.append('file', f)
        axios.post('http://star.xiaojukeji.com/upload/img.node', formData_s, { headers: { 'Content-Type': 'application/json; charset=UTF-8' }}).then(res => {
          console.error(res)
        })
      }
      // if (a_name[1] !== 'ximnd') {
      //   if (a_name[1] !== 'xlsx') {
      //     this.$message({ type: 'error', message: '导入失败，不支持文件类型' })
      //   }
      // }
    },

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

    updateCaseListData() {
      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
        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;
    text-overflow: ellipsis;
  }
  .btn_query .el-button--primary.is-plain {
    color: #000000 !important;
    background: #F9F9FA !important;
    border-color: #F9F9FA !important;
  }
   .nav_Input .el-tree-node__children .custom-tree-node{
      color: #6F7C93;
  }
  .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
  }
</style>