소스 검색

委外项目页面增加打印功能

ljb 9 달 전
부모
커밋
6a49c804de
1개의 변경된 파일35개의 추가작업 그리고 12개의 파일을 삭제
  1. 35 12
      src/views/project-manage/components/outsourcing-doc.vue

+ 35 - 12
src/views/project-manage/components/outsourcing-doc.vue

@@ -1,12 +1,12 @@
 <template>
   <div v-loading="loading">
-    <div class="header-btn" style="width: 1200px; margin: 0 auto; text-align: right;">
-      <el-button type="primary">下载</el-button>
-      <el-button type="primary">打印</el-button>
+    <div class="header-btn">
       <el-button type="primary" @click="handleAddClick">新增</el-button>
+      <el-button type="primary" v-print="'#printWrap'">打印</el-button>
     </div>
-    <div class="doc-page">
-      <h3 class="page-title" style="margin: 24px 0 20px;">委外项目管理</h3>
+    
+    <div id="printWrap" class="doc-page">
+      <h3 class="page-title">委外项目管理</h3>
       <year-month-select v-model="params.yearAndMonth" :showMonth="false"></year-month-select>
       <table class="doc-table">
         <tbody>
@@ -31,7 +31,7 @@
                     <td width="8%">技术合同登记类型</td>
                     <td width="8%">技术合同登记金额(万元)</td>
                     <td width="31%">附件上传</td>
-                    <td width="5%">操作</td>
+                    <td width="5%" class="operate-col">操作</td>
                   </tr>
                 </thead>
                 <tbody>
@@ -56,9 +56,9 @@
                         </template>
                         <span v-else>{{ item[key] }}</span>
                       </td>
-                      <td width="10%">
-                        <el-button type="text" @click="handleEditClick(item)">编辑</el-button>
-                        <el-button type="text" style="margin-left: 0;" @click="handleDel(item)">删除</el-button>
+                      <td class="operate-col" width="10%">
+                        <el-button type="text" class="printHide" @click="handleEditClick(item)">编辑</el-button>
+                        <el-button type="text" class="printHide" style="margin-left: 0;" @click="handleDel(item)">删除</el-button>
                       </td>
                     </tr>
                   </template>
@@ -72,7 +72,7 @@
         </tbody>
       </table>
 
-      <p class="tip">注:可一次上传多个相关文件(文档、表格、图片等)。 支持格式:DOC, PDF, Excel, PNG, JPG, PPT 等。 请确保文件内容清晰有效。</p>
+      <p class="tip printHide">注:可一次上传多个相关文件(文档、表格、图片等)。 支持格式:DOC, PDF, Excel, PNG, JPG, PPT 等。 请确保文件内容清晰有效。</p>
 
       <el-drawer
         :visible.sync="drawerVisible"
@@ -105,6 +105,10 @@ export default {
   },
   data() {
     return {
+      printBill: {
+        el: '#printWrap',
+        preview: true  
+      },
       loading: false,
 
       list: [],
@@ -408,11 +412,19 @@ export default {
 .page-title {
   text-align: center;
   font-size: 24px;
+  padding: 24px 0 20px;
+  margin: 0;
 }
 
 .doc-page {
   width: 1200px;
-  margin: 30px auto;
+  height: auto;
+  margin: 0 auto;
+}
+.header-btn {
+  width: 1200px;
+  margin: 0 auto;
+  text-align: right;
 }
 .doc-table {
   width: 100%;
@@ -430,16 +442,21 @@ export default {
   color: #333;
   width: 35%;
 }
+.doc-table {
+  padding: 0;
+}
 .doc-table tr td {
   border: 1px solid #333;
 }
 
 
+.child-table {
+  border: none;
+}
 .child-table tr {
   td {
     border: none;
     border-right: 1px solid #333;
-    // padding: 6px;
     padding: 0 6px;
     text-align: center;
     color: #666;
@@ -485,4 +502,10 @@ export default {
   margin-top: 12px;
   font-size: 12px;
 }
+
+@media print {
+  .doc-page {
+    zoom: 70%;
+  }
+}
 </style>