mes-admin-backend-ui/src/view/performance/printYgjjmx.vue

<template>
  <div style="width: 30vw; height: 50vh">
    <el-form inline @submit.prevent>
      <el-form-item label="日期选择">
        <div class="block">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="到"
            start-placeholder="起始日期"
            end-placeholder="结束日期"
            value-format="YYYY.MM.DD"
            style="width: 250px"
          />
        </div>
      </el-form-item>

      <el-form-item label="员工编号">
        <el-input
          v-model="input"
          autocomplete="off"
          style="width: 110px"
          @keyup.enter="handleEnter"
        />
      </el-form-item>
      <el-form-item label="">
        <el-input
          v-model="ygxm"
          autocomplete="off"
          style="width: 128px"
          readonly
        />
      </el-form-item>

      <br />
      <el-form-item label="">
        <el-button @click="handlePrint"> 打印 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Ygjjmx",
};
// 2工单超节损统计(按工序)
import service from "@/utils/request";
//获取员工姓名
const reportName = (params) => {
  return service({
    url: "/mes_server/reporting_work/getStaffName",
    method: "get",
    params,
  });
};
//员工计件明细
const getPieceDetail = (params) => {
  return service({
    url: "/mes_server/employee_daily_salary/getPieceDetail",
    method: "get",
    params,
  });
};
</script>

<script setup>
import { ref, defineProps } from "vue";
import { hiprint } from "vue-plugin-hiprint";
import { ElMessage, dayjs } from "element-plus";

// const props = defineProps(['gdbh'])
const props = defineProps({
  ygbh: {
    type: String,
    default: "",
  },
});
const input = ref(props["ygbh"]);
const ygxm = ref("");
const date = ref([
  dayjs().startOf("month").format("YYYY.MM.DD"),
  dayjs().format("YYYY.MM.DD"),
]);

const handlePrint = async () => {
  // 引入后初始化
  hiprint.init();
  const template = {
    panels: [
      {
        index: 0,
        name: 1,
        paperType: "A4",
        height: 210,
        width: 297,
        paperHeader: 78,
        paperFooter: 577.5,
        printElements: [
          {
            options: {
              left: 320,
              top: 20,
              height: 18,
              width: 130,
              title: "员工计件明细记录",
              coordinateSync: false,
              widthHeightSync: false,
              fontSize: 15,
              textAlign: "center",
              textContentVerticalAlign: "middle",
              qrCodeLevel: 0,
              draggable: false,
            },
            printElementType: {
              title: "文本",
              type: "text",
            },
          },
          {
            options: {
              left: 320,
              top: 45,
              height: 12,
              width: 130,
              title: "文本",
              right: 451.83339436848956,
              bottom: 57.08334859212239,
              vCenter: 391.83339436848956,
              hCenter: 52.20834859212239,
              field: "rqfw",
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              textAlign: "center",
              textContentVerticalAlign: "middle",
              qrCodeLevel: 0,
              draggable: false,
            },
            printElementType: {
              title: "文本",
              type: "text",
            },
          },
          {
            options: {
              left: 30,
              top: 65,
              height: 12,
              width: 130,
              right: 451.83339436848956,
              bottom: 57.08334859212239,
              vCenter: 391.83339436848956,
              hCenter: 52.20834859212239,
              field: "ygzl",
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              textContentVerticalAlign: "middle",
              qrCodeLevel: 0,
              draggable: false,
              fontSize: 9.75,
              color: "#0000ff",
            },
            printElementType: {
              title: "文本",
              type: "text",
            },
          },
          {
            options: {
              left: 600,
              top: 66,
              height: 12,
              width: 140,
              title: "文本",
              right: 756.5624885559082,
              bottom: 76.50000286102295,
              vCenter: 691.3124885559082,
              hCenter: 70.50000286102295,
              coordinateSync: false,
              widthHeightSync: false,
              textAlign: "right",
              textContentVerticalAlign: "middle",
              qrCodeLevel: 0,
              draggable: false,
              field: "dysj",
              hideTitle: true,
            },
            printElementType: {
              title: "文本",
              type: "text",
            },
          },
          {
            options: {
              left: 20,
              top: 80,
              height: 470,
              width: 795,
              field: "table",
              coordinateSync: false,
              widthHeightSync: false,
              fontSize: 7.5,
              lineHeight: 12,
              tableHeaderRowHeight: 30,
              tableHeaderBackground: "#ffffff",
              tableHeaderFontSize: 9,
              tableBodyRowHeight: 25,
              columns: [
                [
                  {
                    width: 50,
                    title: "日期",
                    titleSync: false,
                    field: "rq",
                    checked: true,
                    columnId: "rq",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 40,
                    title: "工单编号",
                    titleSync: false,
                    field: "gdbh",
                    checked: true,
                    columnId: "gdbh",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 135,
                    title: "工序名称",
                    titleSync: false,
                    field: "gxmc",
                    checked: true,
                    columnId: "gxmc",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 40,
                    title: "机台",
                    titleSync: false,
                    field: "jt",
                    checked: true,
                    columnId: "jt",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 50,
                    title: "班组产量",
                    titleSync: false,
                    field: "bzcl",
                    checked: true,
                    columnId: "bzcl",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 30,
                    title: "保养工时",
                    titleSync: false,
                    field: "bygs",
                    checked: true,
                    columnId: "bygs",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 30,
                    title: "装版工时",
                    titleSync: false,
                    field: "zbgs",
                    checked: true,
                    columnId: "zbgs",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 30,
                    title: "打样工时",
                    titleSync: false,
                    field: "dygs",
                    checked: true,
                    columnId: "dygs",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 30,
                    title: "异常停机",
                    titleSync: false,
                    field: "yctj",
                    checked: true,
                    columnId: "yctj",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "补产标准",
                    titleSync: false,
                    field: "bcbz",
                    checked: true,
                    columnId: "bcbz",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "班组补产",
                    titleSync: false,
                    field: "bzbc",
                    checked: true,
                    columnId: "bzbc",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "日定额",
                    titleSync: false,
                    field: "rde",
                    checked: true,
                    columnId: "rde",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "达标定额",
                    titleSync: false,
                    field: "dbde",
                    checked: true,
                    columnId: "dbde",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "千件工价",
                    titleSync: false,
                    field: "qjgj",
                    checked: true,
                    columnId: "qjgj",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "个人计件工资",
                    titleSync: false,
                    field: "grjjgz",
                    checked: true,
                    columnId: "grjjgz",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "个人加班工资",
                    titleSync: false,
                    field: "grjbgz",
                    checked: true,
                    columnId: "grjbgz",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                  {
                    width: 45,
                    title: "比例",
                    titleSync: false,
                    field: "bl",
                    checked: true,
                    columnId: "bl",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    align: "right",
                    halign: "center",
                    tableQRCodeLevel: 0,
                    tableSummaryTitle: true,
                    tableSummary: "",
                  },
                ],
              ],
            },
            printElementType: {
              title: "表格",
              type: "table",
              editable: true,
              columnDisplayEditable: true,
              columnDisplayIndexEditable: true,
              columnTitleEditable: true,
              columnResizable: true,
              columnAlignEditable: true,
              isEnableEditField: true,
              isEnableContextMenu: true,
              isEnableInsertRow: true,
              isEnableDeleteRow: true,
              isEnableInsertColumn: true,
              isEnableDeleteColumn: true,
              isEnableMergeCell: true,
            },
          },
        ],
        paperNumberLeft: 736.5,
        paperNumberTop: 66,
        paperNumberContinue: true,
        paperNumberFormat: "（第paperNo页 共paperCount页）",
        backgroundColor: "#ffffff",
        overPrintOptions: {
          content: "",
          opacity: 0.7,
          type: 1,
        },
        watermarkOptions: {
          content: "",
          fillStyle: "rgba(87, 13, 248, 0.5)",
          fontSize: "36px",
          rotate: 25,
          width: 413,
          height: 310,
          timestamp: true,
          format: "YYYY-MM-DD HH:mm",
        },
      },
    ],
  };
  const hiprintTemplate = new hiprint.PrintTemplate({ template });
  const params = {
    start_time: date.value[0],
    end_time: date.value[1],
    code: input.value,
  };
  console.log(params);
  const res = await getPieceDetail(params);
  if (res?.["code"] === 0) {
    const { data } = res;
    if (!data) {
      ElMessage({
        type: "info",
        message: res["msg"],
      });
      return;
    }
    let preRq = "";
    const getRq = (val) => {
      const result = val === preRq ? "" : val;
      preRq = val;
      return result;
    };
    const tableData = {
      rqfw: `(${params["start_time"]} - ${params["end_time"]})`,
      ygzl: `员工资料:${data?.[0]?.["员工资料"]}`,
      dysj: `打印时间:${dayjs().format("YYYY.MM.DD HH:mm:ss")}`,
      table: data?.map((item, index) => ({
        rq: getRq(item["sczl_rq"]),
        gdbh: item["sczl_gdbh"],
        gxmc: item["sczl_type"].substring(0, 20),
        jt: item["sczl_jtbh"],
        bzcl: item["班组车头产量"],
        bygs: item["保养工时"],
        zbgs: item["装版工时"],
        dygs: item["打样工时"],
        yctj: item["异常停机工时"],
        bcbz: item["补产标准"],
        bzbc: item["班组补产"],
        rde: item["日定额"],
        dbde: item["达标定额"],
        qjgj: item["千件工价"],
        grjjgz: item["个人计件工资"],
        grjbgz: item["个人加班工资"],
        bl: item["个人比例"],
      })),
    };
    hiprintTemplate.print(tableData);
  }
};

async function handleEnter(params) {
  const res = await reportName({ code: input.value });
  if (res?.["code"] === 0) {
    ygxm.value = res?.["data"];
  }
}
</script>

<style scoped></style>