面损表打印样式

src/views/reportForms/fabric-loss-table.vue

@@ -1,11 +1,11 @@
 <template>
   <!-- 面料损耗表 -->
   <div id="fabricLossTable" >
-    <div id="mmmm">
+    <div >
     <!-- 主要信息 点击搜索后 全部回显-->
     <a-card title="主要信息" >
       <a-row :gutter="24" >
-        <div class="table-page-search-wrapper">
+        <div class="table-page-search-wrapper" >
           <a-form-model layout="inline" ref="form" :model="fabricLoss" :rules="validatorRules" class="kk">
             <a-col :md="6" :sm="8">
               <a-form-model-item label="计划单号">
@@ -14,8 +14,16 @@
                   v-model="planNO"
                   enter-button
                   @search="onSearch($event,'0')"
+                  v-show='showSelect==0'
                 />
-                <a-button type="primary" :disabled="edit == '0'" @click="onSearch(planNO,'1')">更新</a-button>
+                <a-input-search
+                  placeholder="请输入计划单号"
+                  v-text="planNO"
+                  enter-button
+                  @search="onSearch($event,'0')"
+                  v-show='showSelect==1'
+                />
+                <a-button type="primary" :disabled="edit == '0'" @click="onSearch(planNO,'1')" class="noprint">更新</a-button>
               </a-form-model-item>
             </a-col>
 
@@ -83,7 +91,7 @@
               </a-form-model-item>
             </a-col>
 
-            <a-col :md="6" :sm="8">
+            <a-col :md="6" :sm="8" class="noprint">
               <a-button type="primary" @click="openEnclosure">附件</a-button>
             </a-col>
           </a-form-model>
@@ -91,11 +99,11 @@
       </a-row>
     </a-card>
     </div>
-    <div id="cbn">
+    <div >
     <!-- 子表 -->
     <a-card style="margin:10px 0;">
-      <div id="cbn">
-        <div class="purchase-order-table">
+      <!-- 采购订单 -->
+      <div class="purchase-order-table">
         <h6 class="table-title">采购订单</h6>
 
         <a-table
@@ -300,7 +308,7 @@
           </span>
         </a-table>
       </div>
-      </div>
+
       
 
       <!-- 备注信息 1 根据角色判断 显示备注 1 或备注 2-->
@@ -337,7 +345,7 @@
       <!-- 页面底部保存 -->
       <a-row :gutter="24" style="marginTop:40px;float:right" class="noprint">
         <a-col :md="12" :sm="12" style="display:flex">
-          <a-button type="primary" @click="daYin" style="margin-right:6px">
+          <a-button type="primary" @click="daYin" style="margin-right:6px" :disabled ="PrintButton">
             打印
           </a-button> 
             <a-button type="primary" @click="save">
@@ -419,6 +427,8 @@ export default {
   },
   data() {
     return {
+      PrintButton:true,//打印按钮
+      showSelect:0,//计划号是否是输入框
       fabricLoss: {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[],fabricCostAssistList:[],fabricCostClothList:[],fabricCostClothesList:[],fabricCostInvoiceList:[],fabricExpensesList:[],fabricAccidentList:[]}, // 主表信息
       loading: false, // 表格加载
       validatorRules: {
@@ -538,7 +548,7 @@ export default {
         { title: '颜色', dataIndex: 'ccolor', width: 110, className: 'replacecolor' },
         { title: '损耗', dataIndex: 'cquantityLoss',  width: 100,className: 'replacecolor' },
         { title: '多发少发', dataIndex: 'iquantityMoreLess', width: 100, className: 'replacecolor' },
-        { title: '附件', dataIndex: 'enclosure', width: 100, className: 'replacecolor', scopedSlots: { customRender: 'enclosure' }}
+        { title: '附件', dataIndex: 'enclosure', width: 100, className: 'noprint', scopedSlots: { customRender: 'enclosure' }}
       ],
 
       // 成本发票 表头
@@ -722,22 +732,33 @@ export default {
 	        //  gridStyle:'border:2px solid #3971A5;text-align: center',
 	        //  gridHeaderStyle:'color:red; border:2px solid #3971A5;'
 	    //  })
-       const html = window.document.getElementById('fabricLossTable').innerHTML
+         this.showSelect = 1
+         this.$nextTick(() => {
+          const html = window.document.getElementById('fabricLossTable').innerHTML 
          const win = window.open();
          const style = '<style>\n'
          +'.noprint{display:none}'
          +'.ant-table-body{overflow-x: hidden !important }' //去除滚动条
-         +'.kk{display:flex}' //主要信息并排
-         + 'table{width: 100%;border-collapse: collapse;border-spacing: 0;overflow-x:hidden;}\n'
-         + 'th,td{width: 5%;height: 18px;padding:11px;border: 1px solid #999;font-size: 12px;color: #666;max-width:2000px}\n'
+         +'.kk{display:flex;flex-wrap: wrap}' //主要信息并排
+         +'.ant-col-sm-8{width:40%;margin-bottom: 6px;}'
+         +'.ant-form-item-label{width:45%}'
+         +'.ant-card-head-title{font-weight: bold;font-size: 0.67em;margin-bottom: 9px;}'
+         +'.ant-form-item-control-wrapper{width:100%}'
+         +'.ant-input{width:100%}'
+         +'.ant-form-item{display:flex}'
+         + 'table{width: 100% !important;border-collapse: collapse;border-spacing: 0;overflow-x:hidden;}\n'
+         + 'th,td{width:5%;height: 18px;border: 1px solid #999;font-size: 12px;color: #666;max-width:2000px;text-align: center;}\n'
+         +'.ant-table-row-cell-break-word{width:5% !important}'
          + 'th{color: #333}\n'
          + 'a{color: #666; text-decoration:none;}\n'
-         + 'tr[empty-template] td{text-align: center}\n'
          + '</style>';
          win.document.write(style+html);
          win.focus();
          win.print();
          win.close();
+		     this.showSelect = 0
+        })
+        
     },
     // 【计划单号】 搜索
     onSearch(value,update) {
@@ -749,6 +770,7 @@ export default {
           getFabricLossDatas({csocode:value,update:update}).then(res => {
             this.loading = false;
             if (res.success) {
+              this.PrintButton = false
               // 开票成本成衣：获取原币和本币金额是否完全相同，完全相同隐藏美元列
               var findList = this.fabricLoss.fabricCostClothesList.filter(e=>e.ioriSum!=e.isum);
               if (findList.length == 0)
@@ -790,10 +812,31 @@ export default {
               this.fabricLoss = {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[],fabricCostAssistList:[],fabricCostClothList:[],fabricCostClothesList:[],fabricCostInvoiceList:[],fabricExpensesList:[],fabricAccidentList:[]};
               this.$message.info(res.message);
             }
+            this.judgeListLength()
           })
         })
       }
     },
+    //判断哪个列表为空
+    judgeListLength(){
+      var data = [
+        {List:this.fabricLoss.fabricPoOrderList,class:'.purchase-order-table'},
+        {List:this.fabricLoss.fabricOMOrderList1,class:'.outsource-orders-table'},
+        {List:this.fabricLoss.fabricOMOrderList2,class:'.outsourceOrder-abroad-table'},
+        {List:this.fabricLoss.fabricCostInvoiceList,class:'.cost-invoice-table'},
+        {List:this.fabricLoss.fabricCostClothList,class:'.costInvoice-fabric-table'},
+        {List:this.fabricLoss.fabricCostClothesList,class:'.costInvoice-clothes-table'},
+        {List:this.fabricLoss.fabricCostAssistList,class:'.costInvoice-ingredient-table'},
+        {List:this.fabricLoss.fabricExpensesList,class:'.costPay-table'},
+        {List:this.fabricLoss.fabricAccidentList,class:'.accidentBill-table'},
+      ]
+      data.map(item=>{
+        if(item.List.length == 0){
+           var bb =document.querySelector(item.class)
+            bb.className = 'noprint'
+        }
+      })
+    },
     // 【采购数量】单元格 弹框
     purchaseQuantityCustomCell(record) {
       return {