PMAoRuiJing_Web.git

<template>
  <div class="header_nox">
    <el-button type="warning" circle @click="exportWord">下载</el-button>
    <el-button type="primary" circle v-show="!editable" @click="editable = !editable">编辑</el-button>
    <el-button type="primary" v-show="editable" @click="saveData">确定</el-button>
  </div>
  <div id="printContent" ref="imageWrapper">
    <h3>集罐机工序生产质量记录</h3>
    <div class="title_form">
      <div class="title_form_input">
        <span>生产线：</span>
        <span>{{ headData.head.shengcx }}</span>
      </div>
      <div class="title_form_input">
        <span>产品：</span>
        <span>{{ headData.head.chanpin }}</span>
      </div>
      <div class="title_form_input">
        <span>日期：</span>
        <span>{{ headData.head.reportTime }}</span>
      </div>
      <div class="title_form_input">
        <span>班次：</span>
        <span>{{ headData.head.banci }}</span>
      </div>
 
      <!-- <div class="title_form_input">
                <span>生产线：</span>
                <span>四线</span>
              </div> -->
    </div>
    <el-divider />
 
    <HJTABLE
      :SClist="rdList"
      :tableHeader="rdHeader"
      :labelName="labelName.b1"
      :editable="editable"
    ></HJTABLE>
    <HJTABLE
      :SClist="SClist"
      :tableHeader="tableHeader"
      :editable="editable"
    ></HJTABLE>
    <HJTABLE
      :SClist="ytfpData"
      :tableHeader="ytfpHeader"
      :labelName="labelName.b2"
      :editable="editable"
    ></HJTABLE>
    <HJTABLE
      :SClist="hjfpData"
      :tableHeader="hjfpHeader"
      :labelName="labelName.b2"
      :editable="editable"
    ></HJTABLE>
    <HJTABLE
      :SClist="zlList"
      :tableHeader="zlHeader"
      :labelName="labelName.b3"
      :editable="editable"
    ></HJTABLE>
    <HJTABLE
      :SClist="flList"
      :tableHeader="flHeader"
      :labelName="labelName.b4"
      :editable="editable"
    ></HJTABLE>
  </div>
</template>
 
<script>
const item = {
  name: "",
  birth: "",
  province: "",
  city: "",
  address: "",
  phone: "",
};
const header = {
  prop: "key",
  label: "自定义",
  editable: false,
  type: "input",
};
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { jiguanVoLast, save } from "@/api/JiGuan";
import html2canvas from "html2canvas";
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import HJTABLE from "@/components/arj/arj-table";
import { useRouter } from "vue-router";
import { headReport } from "@/api/head";
export default {
  name: "",
  components: { HJTABLE },
  props: {},
  setup(props) {
    const router = useRouter();
    const flHeader = reactive([
      {
        prop: "name",
        label: "名称",
        editable: false,
        type: "text",
      },
      {
        prop: "num",
        label: "数量",
        editable: false,
        type: "input",
      },
      {
        prop: "fuliaoGood",
        label: "合格",
        editable: false,
        type: "input",
      },
      {
        prop: "fuliaoBad",
        label: "不合格",
        editable: false,
        type: "text",
      },
      {
        prop: "fuliaoSm",
        label: "不合格说明",
        editable: false,
        type: "input",
      },
    ]);
    const zlHeader = reactive([
      {
        prop: "rdTime1",
        label: "时间",
        editable: false,
        type: "text",
      },
      {
        prop: "waiguanRy",
        label: "外观人员",
        editable: false,
        type: "input",
      },
      {
        prop: "guanneiJyy",
        label: "罐内检验员",
        editable: false,
        type: "input",
      },
      {
        prop: "jiguanRy",
        label: "集罐人员",
        editable: false,
        type: "text",
      },
      {
        prop: "choujianJg",
        label: "抽检结果",
        editable: false,
        type: "input",
      },
      {
        prop: "choujianJgzt",
        label: "抽检状态",
        editable: false,
        type: "input",
      },
      {
        prop: "wenti",
        label: "主要质量问题",
        editable: false,
        type: "input",
      },
    ]);
    const ytfpHeader = reactive([
      {
        prop: "total",
        label: "印铁废品(总计)",
        editable: false,
        type: "text",
      },
      {
        prop: "chongyingNum",
        label: "重印",
        editable: false,
        type: "input",
      },
      {
        prop: "zazhidianNum",
        label: "杂质点",
        editable: false,
        type: "input",
      },
      {
        prop: "neiyinseNum",
        label: "内印色",
        editable: false,
        type: "input",
      },
      {
        prop: "moranNum",
        label: "墨染",
        editable: false,
        type: "input",
      },
      {
        prop: "sechaNum",
        label: "色差",
        editable: false,
        type: "input",
      },
      {
        prop: "neiwaitucashangNum",
        label: "内外涂擦伤",
        editable: false,
        type: "input",
      },
 
      {
        prop: "neiwaituYwNum",
        label: "内外涂油污",
        editable: false,
        type: "input",
      },
      {
        prop: "louyinNum",
        label: "漏印",
        editable: false,
        type: "input",
      },
      {
        prop: "gaiyahenNum",
        label: "盖压痕",
        editable: false,
        type: "input",
      },
      {
        prop: "gaijianjiaoNum",
        label: "盖溅痕",
        editable: false,
        type: "input",
      },
 
      {
        prop: "zanggaiNum",
        label: "脏盖",
        editable: false,
        type: "input",
      },
      {
        prop: "sutiehexianNum",
        label: "素铁黑线",
        editable: false,
        type: "input",
      },
    ]);
 
    const hjfpHeader = reactive([
      {
        prop: "total",
        label: "生产废品(总计)",
        editable: false,
        type: "text",
      },
      {
        prop: "jianxieNum",
        label: "剪斜",
        editable: false,
        type: "input",
      },
      {
        prop: "hanjiebuliangNum",
        label: "焊接不良",
        editable: false,
        type: "input",
      },
      {
        prop: "waitubuliangNum",
        label: "外涂不良",
        editable: false,
        type: "input",
      },
      {
        prop: "gunjinBlNum",
        label: "滚筋不良",
        editable: false,
        type: "input",
      },
 
      {
        prop: "fengkouBlNum",
        label: "封口不良",
        editable: false,
        type: "input",
      },
      {
        prop: "bieguanNum",
        label: "瘪罐",
        editable: false,
        type: "input",
      },
      {
        prop: "youguanNum",
        label: "油罐",
        editable: false,
        type: "input",
      },
      {
        prop: "zangguanNum",
        label: "脏罐",
        editable: false,
        type: "input",
      },
      {
        prop: "shiyanFpNum",
        label: "实验废品",
        editable: false,
        type: "input",
      },
      {
        prop: "huashangNum",
        label: "划伤",
        editable: false,
        type: "input",
      },
      {
        prop: "hongkaoBsNum",
        label: "烘烤变色",
        editable: false,
        type: "input",
      },
      {
        prop: "suojinBlNum",
        label: "缩筋不良",
        editable: false,
        type: "input",
      },
    ]);
    const tableHeader = reactive([
      {
        prop: "shengchanTime1",
        label: "生产时间",
        editable: false,
        type: "text",
      },
      {
        prop: "fuliaoCjTime",
        label: "辅料厂家/日期",
        editable: false,
        type: "input",
      },
      {
        prop: "shengchanPh",
        label: "生产批号/包号",
        editable: false,
        type: "input",
      },
      {
        prop: "num",
        label: "数量",
        editable: false,
        type: "text",
      },
      {
        prop: "chanpinBh",
        label: "生产产品板号",
        editable: false,
        type: "input",
      },
      {
        prop: "shengchanBs",
        label: "生产包数",
        editable: false,
        type: "input",
      },
    ]);
    const rdHeader = reactive([
      {
        prop: "jiaobanFs",
        label: "包装方式",
        editable: false,
        type: "text",
      },
      {
        prop: "jiebanSy",
        label: "接班剩余",
        editable: false,
        type: "input",
      },
      {
        prop: "jiaobanSy",
        label: "交班剩余",
        editable: false,
        type: "input",
      },
    ]);
    let tableData = reactive([]);
    const formInline = reactive({
      user: "",
      region: "",
    });
    const imageWrapper = ref(null);
 
    let headData = reactive({
      head: {},
    });
    let hanjiRdData = reactive({
      jiguanRd2List: {},
      feipinYintieList: {},
      feipinJiguanList: {},
      jiguanZhiliangRdList: {},
      jiguanFuliaoRdList: {},
      jiguanRd: {},
    });
 
    let SClist = ref([]);
    let hjData = ref({});
    let ytfpData = ref([]);
    let hjfpData = ref([]);
    let zlList = ref([]);
    let flList = ref([]);
    let rdList = ref([]);
    let labelName = {
      b1: "生产记录",
      b2: "废品统计",
      b3: "质量记录",
      b4: "辅料检查记录",
    };
    let editable = ref(false);
 
    const submitForm = () => {};
 
    const handleEdit = (row) => {
      row.editable = true;
    };
    const handleDelete = (index) => {
      this.tableData.splice(index, 1);
    };
    const prepend = (index) => {
      item.editable = true;
      this.tableData.splice(index, 0, item);
    };
    const append = (index) => {
      item.editable = true;
      this.tableData.splice(index + 1, 0, item);
    };
    const deleteCurrentColumn = (index) => {
      this.tableHeader.splice(index, 1);
    };
    const insertBefore = (index) => {
      header.editable = true;
      this.tableHeader.splice(index, 0, header);
    };
    const getListData = async () => {
      const data = await jiguanVoLast();
      parse(data);
    };
    function parse(data) {
      headData.head = data.data.head;
      headData.head.reportTime = headData.head.reportTime.substr(0, 10);
      hanjiRdData.jiguanRd2List = data.data.jiguanRd2List;
      console.log("jiguan....", data);
      hjData.value = {
        ...headData.head,
 
        ...data.data.jiguanRd,
        t1: SClist,
        t2: ytfpData,
        t3: hjfpData,
        t4: zlList,
        t5: flList,
      };
 
      // tableHeader.forEach(e=>{
      //   // SClist.push({e.})
      // })
 
      SClist.value = data.data.jiguanRd2List;
      hjfpData.value = data.data.feipinJiguanList;
      ytfpData.value = data.data.feipinYintieList;
      zlList.value = data.data.jiguanZhiliangRdList;
      flList.value = data.data.jiguanFuliaoRdList;
      rdList.value = [data.data.jiguanRd];
 
      SClist.value.filter((item) => {
        if (item != null)
          item.shengchanTime1 = item.shengchanTime.substr(11, 5);
 
        return item;
      });
 
      zlList.value.filter((item) => {
        if (item != null && item.rdTime != null)
          item.rdTime1 = item.rdTime.substr(11, 5);
 
        return item;
      });
    }
    const saveData = async () => {
      editable = false;
      let data = {
        jiguanRd2List: SClist.value,
        feipinYintieList: ytfpData.value,
        feipinJiguanList: hjfpData.value,
        jiguanZhiliangRdList: zlList.value,
        jiguanFuliaoRdList: flList.value,
        jiguanRd: rdList.value[0],
        head: headData.head,
      };
      console.log("save data...", data);
      const dt = await save(data);
      if (dt.code == 0) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
      }
      console.log(dt);
    };
    //截图
    const toImage = () => {
      html2canvas(imageWrapper.value, {
        logging: false,
        allowTaint: true,
        scale: window.devicePixelRatio,
        // width: shareContent.clientWidth, //dom 原始宽度
        // height: shareContent.clientHeight,
        scrollY: 0,
        scrollX: 0,
        useCORS: true,
        backgroundColor: "#ffffff",
      }).then(function (canvas) {
        // console.log(canvas);
        let imgUrl = canvas.toDataURL("image/png");
        var tempLink = document.createElement("a"); // 创建一个a标签
        tempLink.style.display = "none";
        tempLink.href = imgUrl;
        tempLink.setAttribute("download", "集罐机工序生产质量记录"); // 给a标签添加下载属性
        if (typeof tempLink.download === "undefined") {
          tempLink.setAttribute("target", "_blank");
        }
        document.body.appendChild(tempLink); // 将a标签添加到body当中
        tempLink.click(); // 启动下载
        document.body.removeChild(tempLink); // 下载完毕删除a标签
        window.URL.revokeObjectURL(imgUrl);
      });
    };
    // 点击导出word
    function exportWord() {
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("jiguan2.docx", function (error, content) {
        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }
 
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip).setOptions({
          nullGetter: function () {
            return "";
          },
        });
        // 设置模板变量的值
        doc.setData({
          ...hjData.value,
 
          // table: hanjiRdData.hanjiRd,
        });
 
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          };
          console.log(JSON.stringify({ error: e }));
          throw error;
        }
 
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "集罐机工序生产质量记录.docx");
      });
    }
    const getRouterData = async (req) => {
      console.log("req....", req);
      const data = await headReport(req);
      console.log("jbj router data.....", data);
 
      parse(data);
    };
    onMounted(() => {
      console.log("rrrrrrrrrrr", router.currentRoute.value.query);
      let head_id = router.currentRoute.value.query.id;
      let leixing = router.currentRoute.value.query.leixing;
      console.log("vue recv....", head_id, leixing);
      if (head_id == null) {
        getListData();
      } else {
        getRouterData({ head_id: head_id, leixing: leixing });
      }
    });
    return {
      saveData,
      submitForm,
      formInline,
      tableData,
      ytfpHeader,
      hjfpHeader,
      zlHeader,
      flHeader,
      insertBefore,
      deleteCurrentColumn,
      append,
      prepend,
      handleDelete,
      handleEdit,
      tableHeader,
      getListData,
      headData,
      toImage,
      imageWrapper,
      SClist,
      ytfpData,
      hjfpData,
      zlList,
      flList,
      rdList,
      rdHeader,
      exportWord,
      labelName,
      editable,
    };
  },
};
</script>
<style lang="scss" scoped>
.header_nox {
  text-align: right;
}
 
#printContent h3 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 26px;
  font-weight: bold;
}
 
.title_form {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // margin-bottom: 20px;
}
 
.title_form_input {
  font-size: 16px;
}
</style>