vue opd、xml文件上传解析 、双击修改、 导出文件

vue opd、xml文件上传解析成表格 、双击修改、 导出文件
目前解析的是固定标签
上传采用el-upload

<el-upload
          ref="upload"
          class="upload-demo"
          drag
          action=""
          :limit="1"
          :accept="accept"
          :on-change="successChange"
          :auto-upload="false"
          multiple
        >
          <img src="@/assets/opdUpload.png" alt="">
          <div class="el-upload__text">点击或拖拽文件进行上传</div>
        </el-upload>
        

上传成功回调 successChange

 successChange (file, fileList) {
      if (file.status === 'ready') {
        this.loading = true
        var imgURL = URL.createObjectURL(file.raw)
        var xmlhttp = null
        var xmlDoc = null
        if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest()
        } else {
          xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
        }
        xmlhttp.open('GET', imgURL, false)
        xmlhttp.send()
        xmlDoc = xmlhttp.responseXML
        // 解析OPDEntry
        var OPDEntry = xmlDoc.getElementsByTagName('OPDEntry')
        var list = []
        for (let i = 0; i < OPDEntry.length; i++) {
          let obj = {}
          obj = {
            name: OPDEntry[i].getAttribute('Name'),
            documentName: 'OPDEntry',
            documentList: [],
            id: this.generateUUID()
          }
          // 解析Parameter
          var parameter = OPDEntry[i].getElementsByTagName('Parameter')
          for (let j = 0; j < parameter.length; j++) {
            obj.documentList.push({
              id: this.generateUUID(),
              parentId: obj.id,
              documentName: 'Parameter',
              name: parameter[j].getAttribute('Name'),
              Value: parameter[j].getAttribute('Value')
            })
          }
          list.push(JSON.parse(JSON.stringify(obj)))
        }
        // 解析OPDEntry
        var assemble = xmlDoc.getElementsByTagName('Assemble')
        for (let ij = 0; ij < assemble.length; ij++) {
          // 获取第一层级的标签
          let obj = {}
          obj = {
            name: assemble[ij].getAttribute('Name'),
            Tag: assemble[ij].getAttribute('Tag'),
            Type: assemble[ij].getAttribute('Type'),
            OPD: assemble[ij].getAttribute('OPD'),
            ItemClass: assemble[ij].getAttribute('ItemClass'),
            documentList: [],
            documentName: 'Assemble',
            id: this.generateUUID()
          }
          // 获取第一层级的标签的子级
          var assembleChildren = []
          assembleChildren = assemble[ij].children
          // 标签一样 第一次直接跳过子级遍历
          if (assembleChildren.length > 0) {
            for (let pj = 0; pj < assembleChildren.length; pj++) {
              obj.documentList.push({
                id: this.generateUUID(),
                documentName: 'Assemble',
                parentId: obj.id,
                Tag: assembleChildren[pj].getAttribute('Tag'),
                Type: assembleChildren[pj].getAttribute('Type'),
                OPD: assembleChildren[pj].getAttribute('OPD'),
                ItemClass: assembleChildren[pj].getAttribute('ItemClass'),
                name: assembleChildren[pj].getAttribute('Name'),
                Value: assembleChildren[pj].getAttribute('Value')
              })
            }
            list.push(JSON.parse(JSON.stringify(obj)))
            ij = ij + assembleChildren.length
          }
        }
        this.opdLoadList = list
        this.loading = false
        this.dialogVisible = false
        this.opdTable = true
        this.$refs.upload.clearFiles() // 去掉文件列表
      }

上传 解析就好了
双击编辑

editClick (data, index) {
      // //记录点击次数
      this.treeClickCount++
      // 单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
      if (this.treeClickCount >= 2) {
        return
      }
      // 计时器,计算300毫秒为单位,可自行修改
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          // 把次数归零
          this.checkId = null
          this.checkIndex = null
          this.treeClickCount = 0
        } else if (this.treeClickCount > 1) {
          // 双击事件
          // 把次数归零
          this.treeClickCount = 0
          this.checkId = data.id
          this.checkIndex = index
          console.log(data)
        }
      }, 300)
    },

文件导出

exportOPd () {
      var OPDEntryDoc = ''
      var assembleDoc = ''
      this.opdLoadList.forEach((item, index) => {
        if (item.documentName === 'OPDEntry') {
          OPDEntryDoc += `<OPDEntry ${item.name ? `Name="${item.name}"` : ''} ${item.Tag ? `Tag="${item.Tag}"` : ''} ${item.Type ? `Type="${item.Type}"` : ''} ${item.Value ? `Value="${item.Value}"` : ''} ${item.remarks ? `remarks="${item.remarks}"` : ''}>${this.parameterHandel(item, 'Parameter')}</OPDEntry>`
        }
        if (item.documentName === 'Assemble') {
          assembleDoc += `<Assemble ${item.name ? `Name="${item.name}"` : ''} ${item.Tag ? `Tag="${item.Tag}"` : ''} ${item.OPD ? `OPD="${item.OPD}"` : ''}  ${item.Type ? `Type="${item.Type}"` : ''} ${item.Value ? `Value="${item.Value}"` : ''} ${item.remarks ? `remarks="${item.remarks}"` : ''}>${this.parameterHandel(item, 'Assemble')}</Assemble>`
        }
      })
      const xmlDoc = '<?xml version="1.0" encoding="GB2312"?> <!-- Created by SIM_DEMO by (hy) --> <Simulation> <OPDEntrys>' + OPDEntryDoc + '</OPDEntrys><Assembles>' + assembleDoc + '</Assembles></Simulation>'
      var eleLink = document.createElement('a')
      eleLink.download = 'filename.opd'
      eleLink.style.display = 'none'
      var blob = new Blob([xmlDoc])
      eleLink.href = URL.createObjectURL(blob)
      document.body.appendChild(eleLink)
      eleLink.click()
      document.body.removeChild(eleLink)
    },
    parameterHandel (data, tages) {
      let html = ''
      data.documentList.forEach(item => {
        html += `<${tages} ${item.ItemClass ? `ItemClass="${item.ItemClass}"` : ''} ${item.name ? `Name="${item.name}"` : ''} ${item.OPD ? `OPD="${item.OPD}"` : ''} ${item.Tag ? `Tag="${item.Tag}"` : ''} ${item.Type ? `Type="${item.Type}"` : ''} ${item.Value ? `Value="${item.Value}"` : ''} ${item.remarks ? `remarks="${item.remarks}"` : ''} />`
      })
      return html
    },```