安全规程与资质管理模块

zhangwencui

12 小时以前 45c5ff14bebbba8eb3496871ed3f41ee4e36f835

安全规程与资质管理模块

 src/api/safeProduction/safeQualifications.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,61 @@
// å‘货台账页面接口
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function qualificationsListPage(query) {
  return request({
    url: "/safeCertification/page",
    method: "get",
    params: query,
  });
}

// æ–°å¢žå®‰å…¨è§„程与资质管理
export function safeCertificationAdd(query) {
    return request({
        url: '/safeCertification',
        method: 'post',
        data: query
    })
}
// ä¿®æ”¹å®‰å…¨è§„程与资质管理
export function safeCertificationUpdate(query) {
    return request({
        url: '/safeCertification',
        method: 'put',
        data: query
    })
}
// åˆ é™¤å®‰å…¨è§„程与资质管理
export function safeCertificationDel(ids) {
    return request({
        url: '/safeCertification/' + ids,
        method: 'delete',
        data: ids
    })
}

// æŸ¥è¯¢é™„件列表
export function fileListPage(query) {
  return request({
    url: "/safeCertificationFile/listPage",
    method: "get",
    params: query,
  });
}
// æ·»åŠ é™„件
export function safeCertificationFileAdd(query) {
    return request({
        url: '/safeCertificationFile/add',
        method: 'post',
        data: query
    })
}
// åˆ é™¤é™„件
export function safeCertificationFileDel(ids) {
    return request({
        url: '/safeCertificationFile/del',
        method: 'delete',
        data: ids
    })
}

 src/views/safeProduction/safeQualifications/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,860 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="规程资质名称：">
          <el-input v-model="searchForm.name"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="规程资质类型：">
          <el-select v-model="searchForm.type"
                     placeholder="请选择"
                     clearable
                     style="width: 200px"
                     prefix-icon="Search"
                     @change="handleQuery">
            <el-option v-for="item in type_qualification"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="规程资质编号：">
          <el-input v-model="searchForm.code"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery"> æœç´¢ </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary"
                     @click="openForm('add')">
            æ–°å¢žè§„程资质
          </el-button>
          <!-- <el-button type="primary"
                     plain
                     @click="handleImport">导入</el-button>
          <el-button @click="handleOut">导出</el-button> -->
          <el-button type="danger"
                     plain
                     @click="handleDelete">删除</el-button>
          <!-- <el-button type="primary"
                     plain
                     @click="handlePrint">打印</el-button> -->
        </div>
      </div>
      <el-table :data="tableData"
                border
                v-loading="tableLoading"
                @selection-change="handleSelectionChange"
                :expand-row-keys="expandedRowKeys"
                :row-key="(row) => row.id"
                :row-class-name="getRowClass"
                style="width: 100%"
                height="calc(100vh - 18.5em)">
        <el-table-column align="center"
                         type="selection"
                         width="55"
                         fixed="left" />
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="60" />
        <el-table-column label="规程资质名称"
                         prop="name"
                         width="180"
                         show-overflow-tooltip />
        <el-table-column label="规程资质编号"
                         prop="code"
                         show-overflow-tooltip />
        <el-table-column label="规程资质类型"
                         prop="type"
                         show-overflow-tooltip />
        <el-table-column label="版本号"
                         prop="version"
                         width="180"
                         show-overflow-tooltip />
        <el-table-column label="备注"
                         prop="remark"
                         show-overflow-tooltip />
        <el-table-column label="有效期"
                         prop="effectiveTime"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column fixed="right"
                         label="操作"
                         min-width="100"
                         align="center">
          <template #default="scope">
            <el-button link
                       type="primary"
                       size="small"
                       @click="openForm('edit', scope.row)">编辑</el-button>
            <el-button link
                       type="primary"
                       size="small"
                       @click="downLoadFile(scope.row)">附件</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0"
                  :total="total"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page="page.current"
                  :limit="page.size"
                  @pagination="paginationChange" />
    </div>
    <FormDialog v-model="dialogFormVisible"
                :title="operationType === 'add' ? '新增规程资质页面' : '编辑规程资质页面'"
                :width="'70%'"
                :operation-type="operationType"
                @close="closeDia"
                @confirm="submitForm"
                @cancel="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="规程资质名称："
                          prop="name">
              <el-input v-model="form.name"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规程资质编号："
                          prop="code">
              <el-input v-model="form.code"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="规程资质类型："
                          prop="type">
              <el-select v-model="form.type"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in type_qualification"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本号："
                          prop="version">
              <el-input v-model="form.version"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="有效期："
                          prop="effectiveTime">
              <el-date-picker style="width: 100%"
                              v-model="form.effectiveTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable
                              :disabled="operationType === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注·："
                          prop="remark">
              <el-input v-model="form.remark"
                        placeholder="请输入"
                        clearable
                        type="textarea"
                        :rows="1"
                        :disabled="operationType === 'view'" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </FormDialog>
    <!-- é™„件列表弹窗 -->
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    :show-upload-button="true"
                    :show-delete-button="true"
                    :upload-method="handleUpload"
                    :delete-method="handleFileDelete"
                    title="附件列表" />
  </div>
</template>

<script setup>
  import { getToken } from "@/utils/auth";
  import pagination from "@/components/PIMTable/Pagination.vue";
  import { onMounted, ref, getCurrentInstance } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import useUserStore from "@/store/modules/user";
  import { userListNoPage } from "@/api/system/user.js";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
  import {
    qualificationsListPage,
    safeCertificationAdd,
    safeCertificationUpdate,
    safeCertificationDel,
    fileListPage,
    safeCertificationFileAdd,
    safeCertificationFileDel,
  } from "@/api/safeProduction/safeQualifications.js";
  import useFormData from "@/hooks/useFormData.js";
  import request from "@/utils/request";
  import dayjs from "dayjs";

  const userStore = useUserStore();
  const { proxy } = getCurrentInstance();
  const tableData = ref([]);
  const selectedRows = ref([]);
  const userList = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
  });
  const total = ref(0);

  // ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
  const operationType = ref("");
  const dialogFormVisible = ref(false);
  const data = reactive({
    searchForm: {
      name: "", // è§„程资质名称
      code: "", // è§„程资质编号
      type: "", // è§„程资质类型
    },
    form: {
      salesContractNo: "",
      salesman: "",
      customerId: "",
      entryPerson: "",
      entryDate: "",
      maintenanceTime: "",
      executionDate: "",
    },
    rules: {
      code: [{ required: true, message: "请输入", trigger: "blur" }],
      name: [{ required: true, message: "请输入", trigger: "blur" }],
      type: [{ required: true, message: "请选择", trigger: "change" }],
      effectiveTime: [{ required: true, message: "请选择", trigger: "change" }],
      version: [{ required: true, message: "请输入", trigger: "blur" }],
    },
  });
  // è§„程资质类型选项
  const { type_qualification } = proxy.useDict("type_qualification");
  const { form, rules } = toRefs(data);
  const { form: searchForm } = useFormData(data.searchForm);
  // äº§å“è¡¨å•å¼¹æ¡†æ•°æ®
  const productFormVisible = ref(false);

  const quotationLoading = ref(false);
  const quotationList = ref([]);
  const quotationSearchForm = reactive({
    quotationNo: "",
    customer: "",
  });

  // å¯¼å…¥ç›¸å…³
  const importUploadRef = ref(null);
  const importUpload = reactive({
    title: "导入销售台账",
    open: false,
    url: import.meta.env.VITE_APP_BASE_API + "/sales/ledger/import",
    headers: { Authorization: "Bearer " + getToken() },
    isUploading: false,
    beforeUpload: file => {
      const isExcel = file.name.endsWith(".xlsx") || file.name.endsWith(".xls");
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        proxy.$modal.msgError("上传文件只能是 xlsx/xls æ ¼å¼!");
        return false;
      }
      if (!isLt10M) {
        proxy.$modal.msgError("上传文件大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    onChange: (file, fileList) => {
      console.log("文件状态改变", file, fileList);
    },
    onProgress: (event, file, fileList) => {
      console.log("上传中...", event.percent);
    },
    onSuccess: (response, file, fileList) => {
      console.log("上传成功", response, file, fileList);
      importUpload.isUploading = false;
      if (response.code === 200) {
        proxy.$modal.msgSuccess("导入成功");
        importUpload.open = false;
        if (importUploadRef.value) {
          importUploadRef.value.clearFiles();
        }
        getList();
      } else {
        proxy.$modal.msgError(response.msg || "导入失败");
      }
    },
    onError: (error, file, fileList) => {
      console.error("上传失败", error, file, fileList);
      importUpload.isUploading = false;
      proxy.$modal.msgError("导入失败，请重试");
    },
  });

  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    // åªæœ‰åœ¨ç‚¹å‡»æœç´¢æŒ‰é’®æ—¶æ‰é‡ç½®é¡µç åˆ°ç¬¬ä¸€é¡µ
    // é¿å…è¡¨å•å­—段change事件干扰分页
    if (arguments.length === 0) {
      page.current = 1;
    }
    expandedRowKeys.value = [];
    getList();
  };
  const paginationChange = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    const { entryDate, ...rest } = searchForm;
    // å°†èŒƒå›´æ—¥æœŸå­—段传递给后端
    const params = { ...rest, ...page };
    // ç§»é™¤å½•å…¥æ—¥æœŸçš„默认值设置，只保留范围日期字段
    delete params.entryDate;
    return qualificationsListPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        total.value = res.data.total;
        return res;
      })
      .catch(() => {
        tableLoading.value = false;
      });
  };

  const findNodeById = (nodes, productId) => {
    for (let i = 0; i < nodes.length; i++) {
      if (nodes[i].value === productId) {
        return nodes[i].label; // æ‰¾åˆ°èŠ‚点，返回该节点
      }
      if (nodes[i].children && nodes[i].children.length > 0) {
        const foundNode = findNodeById(nodes[i].children, productId);
        if (foundNode) {
          return foundNode; // åœ¨å­èŠ‚点中找到，返回该节点
        }
      }
    }
    return null; // æ²¡æœ‰æ‰¾åˆ°èŠ‚点，返回null
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
    console.log("selection", selectedRows.value);
  };
  const expandedRowKeys = ref([]);
  // æ‰“开弹框
  const openForm = async (type, row) => {
    operationType.value = type;
    if (type === "add") {
      form.value = {
        salesContractNo: "",
        salesman: "",
        customerId: "",
        entryPerson: "",
        entryDate: "",
        maintenanceTime: "",
        executionDate: "",
      };
    } else {
      form.value = row;
    }
    dialogFormVisible.value = true;
  };

  const fetchQuotationList = async () => {
    quotationLoading.value = true;
    try {
      const params = {
        // å…¼å®¹åŽç«¯åˆ†é¡µå­—段：这里沿用报价页面已有可用的字段命名
        currentPage: 1,
        pageSize: 100,
        ...quotationSearchForm,
        status: "通过",
      };
      const res = await getQuotationList(params);
      quotationList.value = res?.data?.records || [];
    } finally {
      quotationLoading.value = false;
    }
  };

  // æäº¤è¡¨å•
  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (operationType.value === "add") {
          safeCertificationAdd(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        } else {
          safeCertificationUpdate(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        }
      }
    });
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
  };
  // å…³é—­äº§å“å¼¹æ¡†
  const closeProductDia = () => {
    proxy.resetForm("productFormRef");
    productFormVisible.value = false;
  };
  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        safeCertificationDel(ids).then(res => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };

  /**
   * åˆ¤æ–­æ˜¯å¦å¯ä»¥å‘è´§
   * åªæœ‰åœ¨äº§å“çŠ¶æ€æ˜¯å……足，发货状态是待发货和审核拒绝的时候才可以发货
   * @param row è¡Œæ•°æ®
   */
  const canShip = row => {
    // äº§å“çŠ¶æ€å¿…须是充足（approveStatus === 1）
    if (row.approveStatus !== 1) {
      return false;
    }

    // èŽ·å–发货状态
    const shippingStatus = row.shippingStatus;

    // å¦‚果已发货（有发货日期或车牌号），不能再次发货
    if (row.shippingDate || row.shippingCarNumber) {
      return false;
    }

    // å‘货状态必须是"待发货"或"审核拒绝"
    const statusStr = shippingStatus ? String(shippingStatus).trim() : "";
    return statusStr === "待发货" || statusStr === "审核拒绝";
  };

  /**
   * ä¸‹è½½æ–‡ä»¶
   *
   * @param row ä¸‹è½½æ–‡ä»¶çš„相关信息对象
   */
  const fileListRef = ref(null);
  const fileListDialogVisible = ref(false);
  const currentFileRow = ref(null);
  const downLoadFile = row => {
    currentFileRow.value = row;
    fileListPage({ safeCertificationId: row.id }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.data.records);
      }
    });
  };
  const currentFactoryName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentFactoryName.value = res.user.currentFactoryName;
  };

  /**
   * èŽ·å–行类名，用于判断当前日期是否接近有效期15天内
   * @param row è¡Œæ•°æ®
   * @returns ç±»å
   */
  const getRowClass = ({ row }) => {
    if (!row.effectiveTime) return "";

    const now = new Date();
    const effectiveTime = new Date(row.effectiveTime);
    const diffTime = effectiveTime - now;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    if (diffDays >= 0 && diffDays <= 15) {
      return "warning-row";
    }

    return "";
  };

  onMounted(() => {
    getList();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
    getCurrentFactoryName();
  });
  // ä¸Šä¼ é™„件
  const handleUpload = async () => {
    if (!currentFileRow.value) {
      proxy.$modal.msgWarning("请先选择数据");
      return null;
    }

    return new Promise(resolve => {
      // åˆ›å»ºä¸€ä¸ªéšè—çš„文件输入元素
      const input = document.createElement("input");
      input.type = "file";
      input.style.display = "none";
      input.onchange = async e => {
        const file = e.target.files[0];
        if (!file) {
          resolve(null);
          return;
        }

        try {
          // ä½¿ç”¨ FormData ä¸Šä¼ æ–‡ä»¶
          const formData = new FormData();
          formData.append("file", file);

          const uploadRes = await request({
            url: "/file/upload",
            method: "post",
            data: formData,
            headers: {
              "Content-Type": "multipart/form-data",
              Authorization: `Bearer ${getToken()}`,
            },
          });

          if (uploadRes.code === 200) {
            // ä¿å­˜é™„件信息
            const fileData = {
              safeCertificationId: currentFileRow.value.id,
              name: uploadRes.data.originalName || file.name,
              url: uploadRes.data.tempPath || uploadRes.data.url,
            };

            const saveRes = await safeCertificationFileAdd(fileData);
            if (saveRes.code === 200) {
              proxy.$modal.msgSuccess("文件上传成功");
              // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
              const listRes = await fileListPage({
                safeCertificationId: currentFileRow.value.id,
              });
              if (listRes.code === 200 && fileListRef.value) {
                const fileList = (listRes.data?.records || []).map(item => ({
                  name: item.name,
                  url: item.url,
                  id: item.id,
                  ...item,
                }));
                fileListRef.value.setList(fileList);
              }
              // è¿”回新文件信息
              resolve({
                name: fileData.name,
                url: fileData.url,
                id: saveRes.data?.id,
              });
            } else {
              proxy.$modal.msgError(saveRes.msg || "文件保存失败");
              resolve(null);
            }
          } else {
            proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
            resolve(null);
          }
        } catch (error) {
          proxy.$modal.msgError("文件上传失败");
          resolve(null);
        } finally {
          document.body.removeChild(input);
        }
      };

      document.body.appendChild(input);
      input.click();
    });
  };
  // åˆ é™¤é™„件
  const handleFileDelete = async row => {
    try {
      const res = await safeCertificationFileDel([row.id]);
      if (res.code === 200) {
        proxy.$modal.msgSuccess("删除成功");
        // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
        if (currentFileRow.value && fileListRef.value) {
          const listRes = await fileListPage({
            safeCertificationId: currentFileRow.value.id,
          });
          if (listRes.code === 200) {
            const fileList = (listRes.data?.records || []).map(item => ({
              name: item.name,
              url: item.url,
              id: item.id,
              ...item,
            }));
            fileListRef.value.setList(fileList);
          }
        }
        return true; // è¿”回 true è¡¨ç¤ºåˆ é™¤æˆåŠŸï¼Œç»„件会更新列表
      } else {
        proxy.$modal.msgError(res.msg || "删除失败");
        return false;
      }
    } catch (error) {
      proxy.$modal.msgError("删除失败");
      return false;
    }
  };
</script>

<style scoped lang="scss">
  .ml-10 {
    margin-left: 10px;
  }

  .table_list {
    margin-top: unset;
  }

  :deep(.warning-row) {
    background-color: #fef0f0 !important;
  }

  :deep(.warning-row td) {
    // color: #cf1322 !important;
  }

  .actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .print-preview-dialog {
    .el-dialog__body {
      padding: 0;
      max-height: 80vh;
      overflow-y: auto;
    }
  }

  .print-preview-container {
    .print-preview-header {
      padding: 15px;
      border-bottom: 1px solid #e4e7ed;
      text-align: center;

      .el-button {
        margin: 0 10px;
      }
    }

    .print-preview-content {
      padding: 20px;
      background-color: #f5f5f5;
      min-height: 400px;
    }
  }

  .print-page {
    width: 220mm;
    height: 90mm;
    padding: 10mm;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  .delivery-note {
    width: 100%;
    height: 100%;
    font-family: "SimSun", serif;
    font-size: 10px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
  }

  .header {
    text-align: center;
    margin-bottom: 8px;

    .company-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .document-title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .info-section {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info-row {
      line-height: 20px;

      .label {
        font-weight: bold;
        width: 60px;
        font-size: 14px;
      }

      .value {
        margin-right: 20px;
        min-width: 80px;
        font-size: 14px;
      }
    }
  }

  .table-section {
    margin-bottom: 4px;
    flex: 1;

    .product-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #000;

      th,
      td {
        border: 1px solid #000;
        padding: 6px;
        text-align: center;
        font-size: 14px;
        line-height: 1.4;
      }

      th {
        font-weight: bold;
      }

      .total-label {
        text-align: right;
        font-weight: bold;
      }

      .total-value {
        font-weight: bold;
      }
    }
  }

  .footer-section {
    .footer-row {
      display: flex;
      margin-bottom: 3px;
      line-height: 20px;
      justify-content: space-between;

      .footer-item {
        display: flex;
        margin-right: 20px;

        .label {
          font-weight: bold;
          width: 80px;
          font-size: 14px;
        }

        .value {
          min-width: 80px;
          font-size: 14px;
        }

        &.address-item {
          .address-value {
            min-width: 200px;
          }
        }
      }
    }
  }

  @media print {
    .app-container {
      display: none;
    }

    .print-page {
      box-shadow: none;
      margin: 0;
      padding: 10mm;
      padding-left: 20mm;
      page-break-inside: avoid;
      page-break-after: always;
    }
    .print-page:last-child {
      page-break-after: avoid;
    }
  }
</style>