文书管理

zhanghua

2022-11-17 66a8754e17eb6ecbc3fd251be683dd15408e3869

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

@@ -1,8 +1,337 @@
<template>
  <div>inquest_record</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>
      <span style="font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p>
      <span>勘验（检查）时间：</span>
      <input style="width: 100px" v-model="form.jc_year" /><span>年</span>
      <input style="width: 60px" v-model="form.jc_month" /><span>月</span
      ><input style="width: 60px" v-model="form.jc_day" /><span>日</span
      ><input style="width: 60px" v-model="form.jc_begin_h" /><span>时</span
      ><input style="width: 60px" v-model="form.jc_begin_m" /><span>分至</span
      ><input style="width: 60px" v-model="form.jc_end_h" /><span>时</span
      ><input style="width: 60px" v-model="form.jc_end_m" /><span>分</span>
    </p>
    <p>
      <span>勘验（检查）地点：</span
      ><input style="width: 610px" v-model="form.jc_address" />
    </p>
    <p>
      <span>勘验（检查）人：</span
      ><input style="width: 260px" v-model="form.jc_user1" /><span
        >执法证号：</span
      ><input style="width: 275px" v-model="form.jc_card1" />
    </p>
    <p style="text-indent: 112pt">
      <input style="width: 260px" v-model="form.jc_user2" /><span
        >执法证号：</span
      ><input style="width: 275px" v-model="form.jc_card2" />
    </p>
    <p>
      <span>记{{ "\u3000\u3000" }}录{{ "\u3000\u3000" }}人：</span
      ><input style="width: 260px" v-model="form.recorder" />
      <span>天气情况：</span
      ><input style="width: 275px" v-model="form.weather" />
    </p>
    <p>
      <span>被勘验（检查）人姓名或名称：</span
      ><input style="width: 515px" v-model="form.bjc_name" />
    </p>
    <p>
      <span>身份证号或统一社会信用代码：</span
      ><input style="width: 515px" v-model="form.bjc_code" />
    </p>
    <p>
      <span>住址或住所：</span
      ><input style="width: 300px" v-model="form.bjc_address" /><span
        >联系电话：</span
      ><input style="width: 272px" v-model="form.bjc_phone" />
    </p>
    <p>
      <span>在场人：</span
      ><input style="width: 340px" v-model="form.current_person" /><span
        >职务：</span
      ><input style="width: 308px" v-model="form.position" />
    </p>
    <p>
      <span>联系电话：</span
      ><input style="width: 300px" v-model="form.current_person_phone" /><span
        >与本案关系：</span
      ><input style="width: 275px" v-model="form.relation" />
    </p>
    <p>
      <span>见证人：</span
      ><input style="width: 706px" v-model="form.eyewitness" />
    </p>
    <p style="text-indent: 24pt">
      <span>出示证件、表明身份的记录：我们是</span
      ><input style="width: 400px" v-model="form.enforcement_team" /><span
        >的行政执法人员，这是我们的执法证件（出示证件），请过目确认。答：</span
      ><input style="width: 400px" v-model="form.answer1" />
    </p>
    <p style="text-indent: 24pt">
      <span
        >告知相关权利和义务的记录：我们今天依法进行勘验（检查）并了解有关情况，有关单位和个人应当积极配合，如实说明情况并提供文件、资料，不得拒绝、阻碍、隐瞒或者提供虚假情况。同时如果认为我们与本案有利害关系，可能影响公正办案，可以申请我们回避，并说明理由。请问是否需要执法人员回避？答：</span
      ><input style="width: 400px" v-model="form.answer2" />
    </p>
    <p style="text-indent: 24pt">
      <span>现场勘验（检查）情况：</span
      ><input style="width: 700px" v-model="form.situation" /><span
        class="underline"
        >（笔录尾页应注明“上述笔录内容，记录属实”）
      </span>
    </p>
    <p style="margin: 0pt 3.5pt 0pt 0pt">
      <span style="font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p style="margin: 0pt 3.5pt 0pt 0pt">
      <span>被勘验（检查）人签名：</span
      ><span class="underline">{{
        "\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000"
      }}</span
      ><span>{{ "\u3000" }}</span
      ><span class="underline">{{ "\u3000\u3000\u3000\u3000\u3000" }}</span
      ><span>年</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>月</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>日</span>
    </p>
    <p style="margin: 0pt 3.5pt 0pt 0pt">
      <span>勘验（检查）人签名：</span
      ><span class="underline">{{
        "\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000"
      }}</span
      ><span>、</span
      ><span class="underline">{{
        "\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000"
      }}</span
      ><span>{{ "\u3000" }}</span
      ><span class="underline">{{ "\u3000\u3000\u3000\u3000\u3000" }}</span
      ><span>年</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>月</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>日</span>
    </p>
    <p style="margin: 0pt 3.5pt 0pt 0pt">
      <span>记录人签名：</span><span>  </span
      ><span class="underline">{{
        "\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000"
      }}</span
      ><span>{{ "\u3000" }}</span
      ><span class="underline">{{ "\u3000\u3000\u3000\u3000\u3000" }}</span
      ><span>年</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>月</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>日</span>
    </p>
    <p style="margin: 0pt 3.5pt 0pt 0pt">
      <span>见证人签名：</span
      ><span class="underline">{{
        "\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000"
      }}</span
      ><span>{{ "\u3000" }}</span
      ><span class="underline">{{ "\u3000\u3000\u3000\u3000\u3000" }}</span
      ><span>年</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>月</span><span class="underline">{{ "\u3000\u3000\u3000" }}</span
      ><span>日</span>
    </p>
    <p style="margin: 0pt 3.5pt 0pt 0pt">
      <span>备注：</span><span>（如有见证人，应备注见证人身份等基本信息）</span>
    </p>
    <p
      style="
        line-height: 22pt;
        margin: 0pt;
        orphans: 0;
        text-align: right;
        widows: 0;
      "
    >
      <span style="font-family: 'Times New Roman'; font-size: 14pt"
        >&#xa0;</span
      >
    </p>
    <p>
      <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);
}
export default {
  data() {
    return {
      form: {
        org_name: "", //行政机关名称
        jc_year: "", //检查时间-年
        jc_month: "", //检查时间-月
        jc_day: "", //检查时间-日
        jc_begin_h: "", //检查时间-开始时
        jc_begin_m: "", //检查时间-开始分
        jc_end_h: "", //检查时间-结束时
        jc_end_m: "", //检查时间-结束分
        jc_address: "", //检查地点
        jc_user1: "", //检查人1-名字
        jc_card1: "", //检查人1-证号
        jc_user2: "", //检查人2-名字
        jc_card2: "", //检查人2-证号
        recorder: "", //记录人
        weather: "", //天气情况
        bjc_name: "", //被检查人姓名或名称
        bjc_code: "", //被检查身份证或社会信用代码
        bjc_address: "", //被检查人住址
        bjc_phone: "", //被检查人电话
        current_person: "", //在场人
        position: "", //职务
        current_person_phone: "", //在场人电话
        relation: "", //与本案关系
        eyewitness: "", //见证人
        enforcement_team: "", //执法单位
        answer1: "", //回答1
        answer2: "", //回答2
        situation: "", //现场检查情况
      },
    };
  },
  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模版*/
        "/inquest_record.docx", //"https://docxtemplater.com/tag-example.docx"
        function (error, content) {
          // eslint-disable-next-line no-debugger
          debugger;
          if (error) {
            throw error;
          }
          const zip = new PizZip(content);
          const doc = new Docxtemplater(zip, {
            paragraphLoop: true,
            linebreaks: true,
          });
          debugger;
          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: 90%;
  margin: auto;
  line-height: 2 !important;
}
p {
  margin: 0pt;
  orphans: 0;
  text-align: justify;
  widows: 0;
}
span {
  font-family: 仿宋_GB2312;
  font-size: 14pt;
}

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

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