成本分配表打印

src/views/reportForms/cost-allocation-table.vue

@@ -3,10 +3,10 @@
   <div id="costAllocationTable">
     <a-card :bordered="false">
       <!-- 主表信息 点击搜索后 回显--->
+                <a-row :gutter="24">
       <div class="table-page-search-wrapper">
         <!-- ref="form" :model="costAllocationTable" -->
-        <a-form-model layout="inline">
-          <a-row :gutter="24">
+        <a-form-model layout="inline" class="kk">
             <a-col :md="6" :sm="8">
               <a-form-model-item label="计划单号" prop="plannum">
                 <a-input-search
@@ -15,6 +15,14 @@
                   v-model="detailsPlanNum.planNum"
                   @search="onSearch"
                   :loading="this.loading"
+                  v-show='showSelect==0'
+                />
+                <a-input-search
+                  placeholder="请输入计划单号"
+                  v-text="detailsPlanNum.planNum"
+                  enter-button
+                  @search="onSearch($event,'0')"
+                  v-show='showSelect==1'
                 />
               </a-form-model-item>
             </a-col>
@@ -158,20 +166,21 @@
               </a-form-model-item>
             </a-col>
 
-            <a-col :md="6" :sm="8">
+            <a-col :md="6" :sm="8" class="noprint">
               <h4 style="color:red;">
                 标记
                 <span>（计算结果是负值时，该标记是红色）</span>
               </h4>
             </a-col>
-          </a-row>
+
         </a-form-model>
       </div>
+                </a-row>
     </a-card>
 
     <!--tabs 组件引入  -->
     <a-card :bordered="false" style=" marginTop:10px;">
-      <div><tabs ref="unitTabs" /></div>
+      <div><tabs ref="unitTabs" :showSelect='showSelect' /></div>
     </a-card>
 
     <!-- 事故单 -->
@@ -185,7 +194,7 @@
           :data-source="accidentListData"
           bordered
           :pagination="false"
-          :scroll="{ y: 300 }"
+          :scroll="{ }"
         >
           <!-- 事故单 -->
           <span slot="accidentNum" slot-scope="text">
@@ -214,20 +223,19 @@
         <div class="noteDetail">
           <a-form-model ref="form" :model="detailsPlanNum">
             <a-form-model-item prop="remarks">
-              <a-input
-                type="textarea"
-                v-model="detailsPlanNum.remarks"
-                placeholder="请输入备注"
-                style="minHeight:100px;"
-              />
+              <a-input  type="textarea" v-model="detailsPlanNum.remarks" placeholder="请输入备注"   style="minHeight:100px;"  v-show='showSelect==0' />
+              <a-input type="textarea" v-text="detailsPlanNum.remarks" style="minHeight:100px;" v-show='showSelect==1'/>
             </a-form-model-item>
           </a-form-model>
         </div>
       </div>
 
       <!-- 页面底部保存 -->
-      <a-row :gutter="24" style="marginTop:40px;float:right">
-        <a-col :md="12" :sm="12">
+      <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" :disabled ="PrintButton">
+            打印
+          </a-button> 
           <a-button type="primary" @click="save" :disabled="isDisabled">
             保存
           </a-button>
@@ -274,6 +282,8 @@ export default {
   data() {
     return {
       key: '', //客户输入的订单号
+      PrintButton:true,//打印按钮
+      showSelect:0,//计划号是否是输入框
       loading: false, // 表格加载
       detailsPlanNum: {
         planNum: ''
@@ -331,6 +341,7 @@ export default {
         this.loading = true
         seachPlanNum({ plannum: this.detailsPlanNum.planNum, type: 'query' }).then(res => {
           if (res.success) {
+            this.PrintButton = false
              this.loading = false
             this.detailsPlanNum = res.result //所有详情
             this.accidentListData = res.result.syCostAllocationAccidentList //事故单
@@ -416,6 +427,60 @@ export default {
        })
        this.detailsPlanNum.shortvalue = this.detailsPlanNum.shortseveral*average
     },
+    daYin(){
+      //  printJS({
+	    //      printable:this.fabricLoss.fabricOMOrderList1,
+	    //      properties:[
+      //        {field:'cvcname',displayName:'制造工艺',columnSize:1},
+      //        {field:'cvenAbbName',displayName:'工厂',columnSize:1},
+      //        {field:'iquantityOut',displayName:'材料出库数量',columnSize:1},
+      //        {field:'iquantity', displayName:'计划数量',columnSize:1},
+      //        {field:'iquantityIn', displayName:'采购入库数量',columnSize:1},
+      //        {field:'cinvCode', displayName:'物料编码',columnSize:1},
+      //        {field:'cinvName', displayName:'货物名称',columnSize:1},
+      //        {field:'ccolor', displayName:'颜色',columnSize:1},
+      //        {field:'cquantityLoss', displayName:'损耗',columnSize:1},
+      //        {field:'iquantityMoreLess', displayName:'多发少发',columnSize:1},
+      //        ],
+	    //      type:'json',
+	    //      header:'C001',
+	         //样式设置
+	        //  gridStyle:'border:2px solid #3971A5;text-align: center',
+	        //  gridHeaderStyle:'color:red; border:2px solid #3971A5;'
+	    //  })
+         this.showSelect = 1
+         this.$nextTick(() => {
+          const html = window.document.getElementById('costAllocationTable').innerHTML 
+         const win = window.open();
+         const style = '<style>\n'
+         +'.noprint{display:none}'
+        //  +'.ant-table-body-inner{overflow-x: hidden !important;overflow-y: hidden !important }' //去除滚动条
+          +'.ant-table-body{overflow-x: hidden !important ;overflow-y: hidden !important}' 
+           +'.ant-table-header {overflow-x: hidden !important ;overflow-y: hidden !important}' 
+           +'.ant-table-fixed-left{display: none !important}' 
+           +'.ant-tabs-nav-container{display: none !important}' 
+         +'.kk{display:flex;flex-wrap: wrap}' //主要信息并排
+         +'.ant-col-sm-8{width:40%;margin-bottom: 6px;}'
+         +'.ant-form-item-label{width:55%;font-size: 12px;}'
+         +'.ant-form-item-children{font-size: 12px}'
+         +'.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'
+         + '</style>';
+         win.document.write(style+html);
+         win.focus();
+         win.print();
+        //  win.close();
+		     this.showSelect = 0
+        })
+        
+    },
     //计算事故单美元金额和事故单人民币金额
     accidentCalculation(val){
       var usaMoney = 0,

src/views/reportForms/cost-allocation-table/tabs.vue

@@ -14,7 +14,7 @@
             :data-source="fabData"
             bordered
             :pagination="false"
-            :scroll="{ x: 1500, y: 300 }"
+            :scroll="{ x: 1500 }"
           >
           <!-- 表头 -->
            <span slot="transferCostTitle" class="fontColor">
@@ -45,7 +45,7 @@
             :data-source="ingData"
             bordered
             :pagination="false"
-            :scroll="{ x: 1000, y: 300 }"
+            :scroll="{ x: 1000 }"
           >
           <!-- 表头 -->
           <span slot="transferCostTitle" class="fontColor">
@@ -72,7 +72,7 @@
             :data-source="shipData"
             bordered
             :pagination="false"
-            :scroll="{ x: 1000, y: 300 }"
+            :scroll="{ x: 1000 }"
           >
           </a-table>
         </div>
@@ -83,58 +83,67 @@
           <div style="border: 1px solid #e8e8e8;padding: 20px 20px 0 20px;">
             <a-row :gutter="24">
               <div class="table-page-search-wrapper">
-                <a-form layout="inline">
+                <a-form layout="inline" class="kk">
                   <a-col :md="6" :sm="8">
                     <a-form-item label="出货数量合计" >
-                      <a-input v-model="sumInfo.shipQua"></a-input>
+                      <a-input v-model="sumInfo.shipQua" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.shipQua}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="辅料金额合计">
-                      <a-input v-model="sumInfo.ingAmount"></a-input>
+                      <a-input v-model="sumInfo.ingAmount" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.ingAmount}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="辅料不含税金额合计" >
-                      <a-input v-model="sumInfo.ingExcludAmount"></a-input>
+                      <a-input v-model="sumInfo.ingExcludAmount" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.ingExcludAmount}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="出运美元外销总价" >
-                      <a-input v-model="sumInfo.exportPriceUSD"></a-input>
+                      <a-input v-model="sumInfo.exportPriceUSD" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.exportPriceUSD}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="出运加工费">
-                      <a-input v-model="sumInfo.shipProcesFees"></a-input>
+                      <a-input v-model="sumInfo.shipProcesFees" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.shipProcesFees}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="面料不含税金额合计">
-                      <a-input v-model="sumInfo.fabricExcludTax"></a-input>
+                      <a-input v-model="sumInfo.fabricExcludTax" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.fabricExcludTax}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="出运人民币外销金额">
-                      <a-input v-model="sumInfo.exportedAmountRMB"></a-input>
+                      <a-input v-model="sumInfo.exportedAmountRMB" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.exportedAmountRMB}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="合计金额">
-                      <a-input v-model="sumInfo.amountTotal"></a-input>
+                      <a-input v-model="sumInfo.amountTotal" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.amountTotal}}</span>
                     </a-form-item>
                   </a-col>
 
                   <a-col :md="6" :sm="8">
                     <a-form-item label="面料金额合计" >
-                      <a-input v-model="sumInfo.fabricAmount"></a-input>
+                      <a-input v-model="sumInfo.fabricAmount" v-show='showSelect==0'></a-input>
+                      <span v-show='showSelect==1'>{{sumInfo.fabricAmount}}</span>
                     </a-form-item>
                   </a-col>
                 </a-form>
@@ -427,6 +436,12 @@ export default {
       activeKey: '0',
       sumInfo: {} //合计对象
     }
+  },
+   props: {
+    showSelect: {
+      type: String,
+      default: null
+    }
   },
   created() {},
   methods: {