large-vue/src/views/screen/engineering/issueSubDia.vue

<template>
  <div class="issueDia">
    <div style="width: 100%;height: 35px;margin-bottom: 20px;display: flex;justify-content: center">
      <img src="../../../assets/zhang/engineer/issueTitle.png">
      <div class="myTitle">问题上报</div>
      <div style=""></div>
      <div style="width: 20px;height: 20px;position: absolute;top: 5px;right: 15px" @click="close">
        <img src="../../../assets/zhang/engineer/ownCloseBtn.png">
      </div>
    </div>
    <div v-if="dialogVisible" style="z-index: 10000;display: flex;justify-content: center;align-items: center;background-color: transparent;position: absolute;width: 100%;height: 100%" @click="handleCloseView">
        <img width="600px" :src="dialogImageUrl" alt="">
    </div>


    <div class="me">
      <div style="width: 35%;color: #00ffff;">
<!--        <div style="text-align: right;margin-bottom: 10px;height: 32px;line-height: 32px">时间：</div>-->
        <div style="text-align: right;margin-bottom: 20px;height: 32px;line-height: 32px">标题：</div>
        <div style="text-align: right;margin-bottom: 25px;height: 32px;line-height: 32px">发起人：</div>
        <div style="text-align: right;margin-bottom: 125px;">内容：</div>
        <div style="text-align: right;margin-bottom: 125px;">整改要求：</div>
        <div style="text-align: right">截图附件：</div>
      </div>
      <div style="width: 65%;">
<!--        <el-date-picker
          style="margin-bottom: 10px"
          v-model="value"
          type="date"
          placeholder="选择日期">
        </el-date-picker>-->
        <div>
          <el-input v-model="title" placeholder="请输入标题" style="margin-bottom: 20px;width: 220px"></el-input>
        </div>

        <div>
          <el-input v-model="person" placeholder="请输入发起人" style="margin-bottom: 20px;width: 220px"></el-input>
        </div>

        <el-input v-model="description" type="textarea" :rows=6 placeholder="请输入内容" resize="none" style="margin-bottom: 20px;width: 350px"></el-input>

        <el-input v-model="need" type="textarea" :rows=6 placeholder="请输入整改要求" resize="none" style="margin-bottom: 20px;width: 350px"></el-input>

        <div style="width: 130px;height: 130px;background: rgba(15, 86, 86, 0.54);margin-bottom: 10px;mborder-radius: 4px;color: #00ffff;position: relative;font-size: 45px;display: flex;align-items: center">
          <i v-if="!fileFlag" class="el-icon-plus" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></i>
          <input v-if="!fileFlag" type="file" ref="fileInput" accept=".png, .jpg" @change="handleFileChange" style="display: none;position: absolute;left: -1000px"/>
          <div v-if="!fileFlag" @click="triggerFileInput" style="width: 100%;height: 100%;cursor: pointer;position: absolute;"></div>
          <div class="sth" v-if="fileFlag">
            <div style="width: 0;height: 0;border-left: 30px solid transparent;border-top: 30px solid #000000;position: absolute;top: 0;right: 0">
            </div>
            <div class="close-icon" @click="handleRemove"></div>
            <div style="width: 100%;height: 50%">
              <div style="width: 100%;height: 50%;display: flex;justify-content: center;align-items: start">
                <i class="el-icon-view" @click="handlePictureCardPreview"></i>
              </div>
              <div style="width: 100%;height: 50%;display: flex;justify-content: center;color: #00FFFF;font-size: 14px;align-items: end">预览</div>
            </div>
          </div>
          <img width="100%" :src="dialogImageUrl" v-if="fileFlag" style="height: 100%;object-fit: cover;">
        </div>
        <el-button style="width: 100px;margin-top: 10px;margin-right: 10px;border: 1px solid #00FFFF;border-radius: 2px;" @click="add">提交</el-button>
        <el-button style="width: 100px;margin-top: 10px;background: rgba(15, 86, 86, 0.54);color: #00ffff;border: 1px solid #00FFFF;border-radius: 2px;" @click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { add } from "@/api/screen/service";
import pinyin from "../data/pinyin.js";
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import ImageModule from 'docxtemplater-image-module-free'

export default {
  name: "IssueSubDia",
  props: {
    projectName:{
      type: String,
      default: ''
    },
    constructionUnit:{
      type: String,
      default: ''
    },
    supervisionUnit:{
      type: String,
      default: ''
    },
    projectId:{
      type: Number,
      default: null
    },
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageSrc: null,
      file:null,
      title:'',
      person:null,
      description:'',
      need:'',
      fileFlag: false,
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      value:"2020-01-01",
      check:false,
      checked:false
    };
  },
  mounted() {
    this.dialogImageUrl = this.imgUrl
},
  methods: {
    loadTemplate() {
      return fetch("/template.docx")
        .then(response => response.arrayBuffer())
        .then(buffer => {
          return buffer;
        });
    },

    generateWord() {
      this.loadTemplate()
        .then((buffer) => {
          const imageOptions = {
            centered: false,
            getImage: (tagValue) => this.base64ToArrayBuffer(tagValue),
            getSize: () => [150, 100],
          };
          const today = new Date();
          const formattedDate = `${today.getFullYear()}.${today.getMonth() + 1}.${today.getDate()}`;
          // 加载 Word 模板和图片插件模块
          const zip = new PizZip(buffer);
          const doc = new Docxtemplater(zip, { modules: [new ImageModule(imageOptions)] });

          // 设置填充模板的数据
          const templateData = {
            createTime: formattedDate,
            projectName: this.projectName,
            constructionUnit: this.constructionUnit,
            supervisionUnit: this.supervisionUnit,
            description: this.description,
            need: this.need,
            image: this.imageSrc,
          };

          doc.setData(templateData);

          try {
            doc.render();
            const out = doc.getZip().generate({ type: "blob" });
            saveAs(out, "generated-file.docx");
            console.log("Word文档已生成并下载！");
          } catch (error) {
            console.error("生成 Word 文件时出错:", error);
          }
        })
        .catch((error) => {
          console.error("加载模板文件时出错:", error);
        });
    },

    base64ToArrayBuffer(base64) {
      const binaryString = atob(base64.split(",")[1]);
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      return bytes.buffer;
    },

    triggerFileInput(){
      this.$refs.fileInput.click();
    },
    add() {
      if (this.file == null){
        return
      }

      const issueData = {
        title:this.title,
        description:this.description,
        need:this.need,
        projectId: this.projectId,
        person: this.person,
        delFlag: 0,
        status: 0,
      };

      const formData = new FormData();
      formData.append("file", this.file);
      formData.append("issue", new Blob([JSON.stringify(issueData)], { type: "application/json" }));

      this.generateWord();

      add(formData).then((res) => {
        if (Number(res.code) === 200) {
          this.close();
        }
      }).catch((err) => {
        console.error("提交失败：", err);
      });
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.file = file
        this.fileFlag = true
        this.dialogImageUrl = URL.createObjectURL(file)
        const reader = new FileReader();
        reader.onload = (e) => {
          const base64String = e.target.result;
          this.imageSrc = base64String;
        };
        reader.readAsDataURL(file);
      }
    },
    handleRemove() {
      this.fileFlag = false
      this.dialogImageUrl = ''
    },
    handlePictureCardPreview() {
      this.dialogVisible = true;
    },
    handleCloseView() {
      this.dialogVisible = false;
    },

    change(){
      this.checked = !this.check
    },
    changed(){
      this.check = !this.checked
    },
    choose(){
      this.$emit("choose");
    },

    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.close-icon {
  position: absolute;
  right: 2px;
  top: 3px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.close-icon::before,
.close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background-color: #00FFFF;
  transform-origin: center;
  transform: translate(-50%, -50%);
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg); /* 旋转 45 度 */
}

.close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg); /* 旋转 -45 度 */
}

.myTitle{
  color: #00F6EC;
  font-size: 16px;
  position: absolute;
  left: 40px;
  top: 6px;
}
.me{
  display: flex;flex-wrap: wrap;justify-content: space-around;height: 100%;overflow: auto;
}
.me::-webkit-scrollbar {
  display: none;
}
.sth{
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  transition: background-color 0.5s ease;
}
.sth:hover{
  opacity: 1;
  background: rgba(5, 28, 38, 0.58);
}

.el-scrollbar {
  background: #15696b;
  border: 1px solid #00ffff;
  ul {
    li {
      color: #fff;
    }
  }
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #15696b;
  color: #00ffff;
}
.el-select-dropdown__item.selected {
  color: #00ffff;
}
.el-select .el-input .el-select__caret {
  display: none;
}
.issueDia {
  position: relative;
  width: 640px;
  height: 708px;
  background-size: cover;

  background-image: radial-gradient(circle at 50% 50%, #031417b3 0%, #0C1A1A 84%);
}

::v-deep .el-input__inner{
  color: #00ffff;
  background-color: rgba(15, 86, 86, 0.54);
  border: 1px solid #00ffff4d;
}
::v-deep .el-textarea__inner{
  color: #00ffff;
  background-color: rgba(15, 86, 86, 0.54);
  border: 1px solid #00ffff4d;
}
::v-deep .el-button{
  font-weight: bold;
  color: rgba(2, 24, 24, 0.71);
  background-color: #00ffff;
}
::v-deep .el-checkbox__inner{
  background-color: #15696b;
}
::v-deep .is-checked .el-checkbox__inner{
  color: #00ffff;
  background-color: #00ffff;
}
::v-deep .el-checkbox__inner::after{
  border-color: rgba(2, 24, 24, 0.71);
  border-width: 2px;
}
::v-deep .el-checkbox__label{
  color: #15696b;
}
::v-deep .is-checked .el-checkbox__label{
  color: #00ffff;
}
::v-deep .el-input__prefix{
  color: #00F6EC;
}
::v-deep .el-input__inner::placeholder{
  color: #199294;
}
::v-deep .el-textarea__inner::placeholder{
  color: #199294;
}
</style>