处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

 src/views/operate/writManager/components/instruct_notification/edit.vue

@@ -1,8 +1,289 @@
<template>
  <div></div>
  <div class="content">
    <p style="text-align: center">
      <input
        placeholder="填写行政执法机关名称"
        v-model="form.org_name"
        style="font-family: 方正小标宋简体; font-size: 22pt; text-align: center"
      />
    </p>
    <p style="text-align: center">
      <span style="font-family: 方正小标宋简体; font-size: 22pt"
        >责令改正通知书</span
      >
    </p>
    <p style="line-height: 34pt; text-align: right">
      <input style="width: 80px" v-model="form.subordinate" /><span
        class="font-weight"
        >综执责改通字</span
      ><span class="font-weight">〔</span
      ><input
        style="width: 40px; text-align: center"
        v-model="form.word"
      /><span class="font-weight">〕</span><span class="font-weight">第</span
      ><input
        style="width: 40px; text-align: center"
        v-model="form.number"
      /><span class="font-weight">号</span>
    </p>
    <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
      <span
        style="color: #060606; font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p style="line-height: 26pt">
      <span>当事人：</span><span class="underline">  </span>
      <input
        placeholder="当事人姓名或者名称"
        style="width: 260px"
        v-model="form.name"
      />
    </p>
    <p style="line-height: 26pt">
      <span>地{{ "\u3000" }}址：</span><span class="underline">  </span>
      <input
        placeholder="当事人家庭住址或者住所地"
        style="width: 260px"
        v-model="form.address"
      />
    </p>
    <p style="line-height: 26pt; text-indent: 24pt">
      <span>经查，你（单位）</span><span class="underline">  </span
      ><input
        placeholder="写明当事人的违法事实包括违法的时间、地点和具体违法行为内容等"
        style="width: 760px"
        v-model="form.illegal_content"
      /><span>。</span><span>你（单位）的上述行为已经违反了</span>

      <input
        placeholder=""
        style="width: 770px"
        v-model="form.deregulationist"
      />
      <span>的规定</span><span>。</span>
    </p>
    <p style="line-height: 26pt; text-indent: 24pt">
      <span style="color: #060606; font-family: 仿宋_GB2312; font-size: 14pt"
        >依据</span
      >
      <input
        placeholder=""
        style="width: 700px"
        v-model="form.according_to_law"
      />
      <span style="color: #060606; font-family: 仿宋_GB2312; font-size: 14pt"
        >的规定，现责令你（单位）</span
      >
      <input
        placeholder="写明改正的具体内容、要求，注明逾期不改或者拒不改正应承担的法律责任"
        style="width: 760px"
        v-model="form.correction"
      />
      <span style="color: #060606; font-family: 仿宋_GB2312; font-size: 14pt"
        >。</span
      >
    </p>
    <p
      style="line-height: 26pt; margin: 0pt 1.4pt 0pt 0pt; text-indent: 22.9pt"
    >
      <span style="font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p
      style="line-height: 26pt; margin: 0pt 1.4pt 0pt 0pt; text-indent: 22.9pt"
    >
      <span style="font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p
      style="line-height: 26pt; margin: 0pt 1.4pt 0pt 0pt; text-indent: 22.9pt"
    >
      <span style="font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p class="right_span">
      <span style="font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p class="right_span">
      <input v-model="form.org_name" style="text-align: right" />
    </p>
    <p class="right_span">
      <input v-model="form.year" style="width: 80px; text-align: center" /><span>年</span>
      <input v-model="form.month" style="width: 40px; text-align: center" /><span>月</span>
      <input v-model="form.day" style="width: 40px; text-align: center" /><span>日</span>
    </p>
    <p style="text-indent: 11.4pt">
      <span style="font-family: Calibri; font-size: 10.5pt">&#xa0;</span>
    </p>
    <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
      <span style="font-family: Calibri; font-size: 10.5pt">&#xa0;</span>
    </p>

    <div class="optionBtn">
      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleSubmit"
        >保 存
      </el-button>

      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handlePrint"
        >打 印
      </el-button>

      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleExport"
        >导出word
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
    
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("writ");
import JSZipUtils from "jszip-utils";
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import { saveAs } from "file-saver";
function loadFile(url, callback) {
  JSZipUtils.getBinaryContent(url, callback);
}
</script>
export default {
  data() {
    return {
      form: {
        org_name: "", //行政机关名称
        subordinate: "",
        word: "",
        number: "",
        name: "",
        address: "",
        illegal_content: "",
        deregulationist: "",
        according_to_law: "",
        correction: "",
        year: "",
        month: "",
        day: "",
      },
    };
  },
  created() {
    if (this.writ && this.writ.value) {
      this.form = JSON.parse(this.writ.value);
    }
  },
  methods: {
    ...mapActions(["updateWrit"]),

    handleSubmit() {
      var data = {
        baseCaseId: this.writ.baseCaseId,
        value: JSON.stringify(this.form),
      };
      this.updateWrit(data).then((res) => {
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.$emit("closeDialog", { flag: false, index: 1 });
      });
    },
    handlePrint(e) {},
    handleExport(e) {
      let that = this;
      loadFile(
        /*获取doc模版*/
        "/instruct_to_correct_notification.docx", //"https://docxtemplater.com/tag-example.docx"
        function (error, content) {
          // eslint-disable-next-line no-debugger

          if (error) {
            throw error;
          }
          const zip = new PizZip(content);
          const doc = new Docxtemplater(zip, {
            paragraphLoop: true,
            linebreaks: true,
          });

          doc.setData(that.form);
          /*向文档中写入数据*/
          doc.render();

          /*输出文档*/
          const out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          // Output the document using Data-URI
          saveAs(out, "责令改正通知书.docx");
        }
      );
    },
  },
  props: ["writ", "changeDialog"],
};
</script>
<style scoped>
.content {
  width: 805px;
  margin: auto;
  line-height: 2 !important;
}

p {
  margin: 0pt;
  orphans: 0;
  /* text-align: justify; */
  widows: 0;
}
span {
  font-family: 仿宋_GB2312;
  font-size: 14pt;
}
.font-weight {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}

.right_span {
  line-height: 26pt;
  margin: 0pt 7pt 0pt 0pt;
  orphans: 0;
  text-align: right;
  widows: 0;
}

input {
  outline-style: none;
  border: 0px;
  border-bottom: 1px solid #000;
  padding: 5px;
  font-size: 14pt;
  font-family: "Microsoft soft";
}

.optionBtn {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
.btn {
  padding: 12px 50px;
}
</style>