dy-admin-manager/src/views/tenantSetting/model/addProtocol.vue

<template>
  <div id="addProtocol">
    <el-form :model="form" label-width="100px" class="form" ref="form">
      <el-form-item
        label="协议名称"
        prop="name"
        :rules="[
          {
            required: true,
            message: '请输入协议名称',
            trigger: 'blur'
          }
        ]"
      >
        <el-input
          v-model="form.name"
          placeholder="请输入协议名称"
          style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="协议号"
        prop="code"
        :rules="[
          {
            required: true,
            message: '请输入协议号',
            trigger: 'blur'
          }
        ]"
      >
        <el-input
          v-model="form.code"
          placeholder="请输入协议号"
          style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="上传协议"
        prop="url"
        :rules="[
          {
            required: true,
            message: '请上传协议',
            trigger: 'blur, change'
          }
        ]"
      >
        <singe-file-upload
          tips="仅支持上传 doc/docx 格式文件"
          buttonText="点击上传协议"
          accept=".doc, .docx"
          @inputFile="readFileInputEventAsArrayBuffer"
          v-model="form.url"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close()">取 消</el-button>
      <el-button type="primary" @click="addSubmit">下一步</el-button>
    </span>

    <el-dialog
      title="查看协议"
      :visible.sync="lookVisible"
      width="415px"
      append-to-body
    >
      <previewProtocol
        @close="lookVisible = false"
        :form="form"
        v-if="lookVisible"
      />
    </el-dialog>
  </div>
</template>

<script>
import previewProtocol from "@/views/tenantSetting/model/previewProtocol";
import mammoth from "mammoth";
import { headHtml, footerHtml } from './protocolTemplate'
export default {
  components: { previewProtocol },
  data() {
    return {
      form: {
        name: null,
        code: null,
        url: null,
        fileSubmit: null, // 后台需要html内容
        fileContent: null, // 文件内容
      },
      lookVisible: false
    };
  },
  mounted() {
  },
  methods: {
    addSubmit() {
      this.$refs['form'].validate((_) => {
        if(_) {
          this.lookVisible = true
          console.log(this.form)
        }
      })
    },
    displayResult(result) {
      let html = result.value;
      let newHTML = html.replace(//g, '')
      .replace('<h1>', '<h2 style="font-size: 16px;font-weight: bold; padding-top: 15px;">')
      this.form.fileSubmit = headHtml(false) + newHTML + footerHtml(false)
      this.form.fileContent = headHtml() + newHTML + footerHtml()
    },
    readFileInputEventAsArrayBuffer(file) {
      let reader = new FileReader();
      let that = this
      reader.onload = function(loadEvent) {
        let arrayBuffer = loadEvent.target.result; //arrayBuffer
        mammoth
          .convertToHtml({ arrayBuffer: arrayBuffer })
          .then(function(result) {
            console.log(result)
            that.displayResult(result)
          })
          .done();
      };
      reader.readAsArrayBuffer(file.raw);
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-footer {
  display: block;
  text-align: right;
}
/deep/ .el-dialog__body {
  padding: 10px 10px 20px;
}
</style>