2021-06-12园区管理系统

一、预览功能
这个项目的预览的文件流是后端直接转成了html格式 所以直接展示即可

          <div>
            <el-popover
              class="popover"
              placement="bottom-end"
              width="1800"
              trigger="click"
            >
              <p class="popover1" v-html="infomonth12">
                {{ infomonth12 }}
              </p>
              <el-button slot="reference" type="primary" class="mr30" @click="submit12">
                预览
              </el-button>
            </el-popover>
          </div>
        </div>

 // 预览功能1
    submit1() {
      this.loading = true
      totalRentReportReview({
        start: null,
        limit: 100,
        year: this.$moment(this.allYear).format('YYYY')
      }).then(res => {
        console.log('预览功能1', res.data)
        this.infotails = res.data
      })
      this.loading = false
    },

二、生成的清单上的备注没有显示 就是导出的word文档字段不全

关于如何将表格中的数据导出word文档

<el-link
              v-if="
                scope.row.contractState === 5
              "
              type="info"
              :underline="false"
              @click="exportWord(scope.row)"
            >
              生成清单
            </el-link>

// 导出清单
    exportWord(v) {
      const obj = {
        contractId: v.id
      }
      getEarlyByContractId(obj).then(res => {
        console.log('res', res)
        // res.data.earlyEndContractReturnVO.allRemark = '备注：' + res.data.earlyEndContractReturnVO.allRemark
        const docs = res.data
        docs.earlyEndContractReturnVO.earlyEndDate = dateToChina(docs.earlyEndContractReturnVO.earlyEndDate)
        docs.cwbList = docs.cwbList.filter(item => item.payStatus === 1)
        docs.cwbList.forEach((data, index) => {
          data.index = index + 1
          data.dueDate = dateToChina(data.dueDate)
        })
        const noewTime = this.$moment().locale('zh-cn').format('YYYY年MM月DD日')

        const docxsrc = './cylc.docx' // 模板文件的位置
        const docxname = v.enterpriseName + noewTime + '出园清单'
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
          // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error
          }

          // 创建一个PizZip实例，内容为模板的内容
          const zip = new PizZip(content)
          // 创建并加载docx templater实例对象
          const doc = new Docxtemplater().loadZip(zip)
          // 设置模板变量的值
          console.log('docs: ', docs)
          doc.setData({
            ...docs,
            ...docs.earlyEndContractReturnVO,
            noewTime: noewTime

          })

          try {
            // 用模板变量的值替换所有模板变量
            doc.render()
          } catch (error) {
            // 抛出异常
            const e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            }
            console.log(
              JSON.stringify({
                error: e
              })
            )
            throw error
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          const out = doc.getZip().generate({
            type: 'blob',
            mimeType:
              'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
          })
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, docxname)
        })
      })
    },

三、点击某一行，增加选中光标带突出显示
vue element table 点击行时，选中行保持高亮（背景有颜色）

<el-table
        v-loading="loading"
        :data="officetabledata"
        border
        stripe
        :height="tableHeight"
        tooltip-effect="dark"
        style="width: 100%;font-size:14px"
        size="small"
        highlight-current-row
      >

可以自定义颜色 注意要写在全局作用域下才会生效

.el-table__body tr.current-row>td {
   background: #f57878 !important;
}

模板导入功能

 <el-upload
            style="margin: 0 10px"
            action=""
            accept=".xls, .xlsx"
            :http-request="requestHandel"
            :show-file-list="false"
          >
            <el-button type="primary">
              模板导入
            </el-button>

 // 上传文件
    requestHandel(item) {
      const form = new FormData()
      const token = getToken()
      form.append('Token', token)
      form.append('enterpriseFile', item.file)
      roomImport(form).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '导入成功!'
          })
          this.init()
          // this.getUser() // 导入成功刷新列表
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },

模板下载功能

<el-button type="text" @click="roomDownloads">
            模板下载
          </el-button>

// 模板下载这个接口
    async roomDownloads() {
      const res = await roomDownload()
      if (res.status === 200 && res.data) {
        var fileName = '新增企业模板导入.xlsx'
        const blob = new Blob([res.data], { type: 'application/excel' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        link.click()
        link.remove()
      }
    },