11月14

src/xt_pages/outpatientCharges/invoiceTemplate/printtwelve.vue

 <template>
   <div id='invoice-print' style="position: relative;">
-    <!-- <div style="position: absolute;top:90px;left:81px;">
-      阜阳经沃血液透析中心
-    </div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:120px;left:81px;">
-        小米
-      </div>
-      <div style="position: absolute;top:120px;left:200px;">
-        号码
-      </div>
-    </div>
-
-    <div style="display: flex;">
-      <div style="position: absolute;top:150px;left:81px;">
-        医保证号:
-      </div>
-      <div style="position: absolute;top:150px;left:190px;">
-        人员类别:
-      </div>
-      <div style="position: absolute;top:150px;left:252px;">
-       2023-09-28
-      </div>
-    </div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:170px;left:106px;">目录内</div>
-      <div style="position: absolute;top:170px;left:146px;">目录外</div>
-      <div style="position: absolute;top:170px;left:232px;">目录内</div>
-      <div style="position: absolute;top:170px;left:272px;">目录外</div>
-    </div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:190px;left:106px;">目录内</div>
-      <div style="position: absolute;top:190px;left:146px;">目录外</div>
-      <div style="position: absolute;top:190px;left:232px;">目录内</div>
-      <div style="position: absolute;top:190px;left:272px;">目录外</div>
-    </div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:210px;left:106px;">目录内</div>
-      <div style="position: absolute;top:210px;left:146px;">目录外</div>
-      <div style="position: absolute;top:210px;left:232px;">目录内</div>
-      <div style="position: absolute;top:210px;left:272px;">目录外</div>
-    </div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:230px;left:106px;">目录内</div>
-      <div style="position: absolute;top:230px;left:146px;">目录外</div>
-      <div style="position: absolute;top:230px;left:232px;">目录内</div>
-      <div style="position: absolute;top:230px;left:272px;">目录外</div>
-    </div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:250px;left:106px;">目录内</div>
-      <div style="position: absolute;top:250px;left:146px;">目录外</div>
-      <div style="position: absolute;top:250px;left:232px;">目录内</div>
-      <div style="position: absolute;top:250px;left:272px;">目录外</div>
-    </div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:270px;left:106px;">目录内</div>
-      <div style="position: absolute;top:270px;left:146px;">目录外</div>
-      <div style="position: absolute;top:270px;left:232px;">目录内</div>
-      <div style="position: absolute;top:270px;left:272px;">目录外</div>
-    </div> -->
-    <!--金额 -->
-    <!-- <div style="display: flex;">
-      <div style="position: absolute;top:290px;left:146px;">280</div>
-      <div style="position: absolute;top:290px;left:242px;">个人支付：9.92</div>
-    </div>
-    <div style="position: absolute;top:310px;left:146px;">贰佰捌拾整</div>
-    <div style="position: absolute;top:330px;left:190px;">目录内金额</div>
-    <div style="position: absolute;top:350px;left:252px;">个人医保</div>
-    <div style="display: flex;">
-      <div style="position: absolute;top:370px;left:106px;">收款人员</div>
-      <div style="position: absolute;top:370px;left:252px;">流水号</div>
-    </div> -->
-    <!-- 附件 -->
-    <div v-for="(item,index) in Arr" :key="index">
-      <div :style="{position: 'absolute',top:(60 + (index * 450))  + 'px',left:'30px'}">
+    <div>
+      <div style="position: absolute;top:60px;left:30px">
         阜阳经沃血液透析中心
       </div>
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(80 + (index * 450))  + 'px',left:'30px'}">
+        <div :style="{position: 'absolute',top:'80px',left:'30px'}">
           {{paramsObj.name}}
         </div>
-        <div :style="{position: 'absolute',top:(80 + (index * 450))  + 'px',left:'200px'}">
+        <div :style="{position: 'absolute',top:'80px',left:'200px'}">
           {{list.order.fa_piao_number}}
         </div>
       </div>
 
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(100 + (index * 450))  + 'px',left:'81px'}">
+        <div :style="{position: 'absolute',top:'100px',left:'81px'}">
         </div>
-        <div :style="{position: 'absolute',top:(100 + (index * 450))  + 'px',left:'190px'}">
+        <div :style="{position: 'absolute',top:'100px',left:'190px'}">
           
         </div>
-        <div :style="{position: 'absolute',top:(100 + (index * 450))  + 'px',left:'300px'}">
+        <div :style="{position: 'absolute',top:'100px',left:'300px'}">
         {{printDate}}
         </div>
       </div>
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(155+(index * 450))+'px',left:'75px'}">{{list.westernMedicineCostTotal?list.westernMedicineCostTotal:""}}</div>
-        <div :style="{position: 'absolute',top:(155+(index * 450))+'px',left:'121px'}"></div>
-        <div :style="{position: 'absolute',top:(155+(index * 450))+'px',left:'270px'}">{{ list.operationCostTotal?list.operationCostTotal:""}}</div>
-        <div :style="{position: 'absolute',top:(155+(index * 450))+'px',left:'310px'}"></div>
+        <div :style="{position: 'absolute',top:'155px',left:'75px'}">{{list.westernMedicineCostTotal?list.westernMedicineCostTotal:""}}</div>
+        <div :style="{position: 'absolute',top:'155px',left:'121px'}"></div>
+        <div :style="{position: 'absolute',top:'155px',left:'270px'}">{{ list.operationCostTotal?list.operationCostTotal:""}}</div>
+        <div :style="{position: 'absolute',top:'155px',left:'310px'}"></div>
       </div>
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(190+(index * 450))+'px',left:'75px'}">{{list.chineseTraditionalMedicineCostTotal?list.chineseTraditionalMedicineCostTotal:""}}</div>
-        <div :style="{position: 'absolute',top:(190+(index * 450))+'px',left:'121px'}"></div>
-        <div :style="{position: 'absolute',top:(190+(index * 450))+'px',left:'270px'}">{{list.laboratoryCostTotal?list.laboratoryCostTotal:""}}</div>
-        <div :style="{position: 'absolute',top:(190+(index * 450))+'px',left:'310px'}"></div>
+        <div :style="{position: 'absolute',top:'190px',left:'75px'}">{{list.chineseTraditionalMedicineCostTotal?list.chineseTraditionalMedicineCostTotal:""}}</div>
+        <div :style="{position: 'absolute',top:'190px',left:'121px'}"></div>
+        <div :style="{position: 'absolute',top:'190px',left:'270px'}">{{list.laboratoryCostTotal?list.laboratoryCostTotal:""}}</div>
+        <div :style="{position: 'absolute',top:'190px',left:'310px'}"></div>
       </div>
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(210+(index * 450))+'px',left:'75px'}"></div>
-        <div :style="{position: 'absolute',top:(210+(index * 450))+'px',left:'121px'}"></div>
-        <div :style="{position: 'absolute',top:(210+(index * 450))+'px',left:'270px'}"></div>
-        <div :style="{position: 'absolute',top:(210+(index * 450))+'px',left:'310px'}"></div>
+        <div :style="{position: 'absolute',top:'210px',left:'75px'}"></div>
+        <div :style="{position: 'absolute',top:'210px',left:'121px'}"></div>
+        <div :style="{position: 'absolute',top:'210px',left:'270px'}"></div>
+        <div :style="{position: 'absolute',top:'210px',left:'310px'}"></div>
       </div>
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(230+(index * 450))+'px',left:'75px'}">{{list.checkCostTotal?list.checkCostTotal:""}}</div>
-        <div :style="{position: 'absolute',top:(230+(index * 450))+'px',left:'121px'}"></div>
-        <div :style="{position: 'absolute',top:(230+(index * 450))+'px',left:'270px'}"></div>
-        <div :style="{position: 'absolute',top:(230+(index * 450))+'px',left:'310px'}"></div>
+        <div :style="{position: 'absolute',top:'230px',left:'75px'}">{{list.checkCostTotal?list.checkCostTotal:""}}</div>
+        <div :style="{position: 'absolute',top:'230px',left:'121px'}"></div>
+        <div :style="{position: 'absolute',top:'230px',left:'270px'}"></div>
+        <div :style="{position: 'absolute',top:'230px',left:'310px'}"></div>
       </div>
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(250+(index * 450))+'px',left:'75px'}">{{list.treatCostTotal?list.treatCostTotal:""}}</div>
-        <div :style="{position: 'absolute',top:(250+(index * 450))+'px',left:'121px'}"></div>
-        <div :style="{position: 'absolute',top:(250+(index * 450))+'px',left:'270px'}">{{list.materialCostTotal?list.materialCostTotal:""}}</div>
-        <div :style="{position: 'absolute',top:(250+(index * 450))+'px',left:'310px'}"></div>
+        <div :style="{position: 'absolute',top:'250px',left:'75px'}">{{list.treatCostTotal?list.treatCostTotal:""}}</div>
+        <div :style="{position: 'absolute',top:'250px',left:'121px'}"></div>
+        <div :style="{position: 'absolute',top:'250px',left:'270px'}">{{list.materialCostTotal?list.materialCostTotal:""}}</div>
+        <div :style="{position: 'absolute',top:'250px',left:'310px'}"></div>
       </div>
       <div style="display: flex;">
-        <div :style="{position: 'absolute',top:(270+(index * 450))+'px',left:'75px'}"></div>
-        <div :style="{position: 'absolute',top:(270+(index * 450))+'px',left:'121px'}"></div>
-        <div :style="{position: 'absolute',top:(270+(index * 450))+'px',left:'270px'}"></div>
-        <div :style="{position: 'absolute',top:(270+(index * 450))+'px',left:'310px'}"></div>
+        <div :style="{position: 'absolute',top:'270px',left:'75px'}"></div>
+        <div :style="{position: 'absolute',top:'270px',left:'121px'}"></div>
+        <div :style="{position: 'absolute',top:'270px',left:'270px'}"></div>
+        <div :style="{position: 'absolute',top:'270px',left:'310px'}"></div>
       </div>
     <!--金额 -->
     <div style="display: flex;">
-      <div :style="{position: 'absolute',top:(310+(index * 450))+'px',left:'146px',}">{{list.order.medfee_sumamt}}</div>
-      <div :style="{position: 'absolute',top:(310+(index * 450))+'px',left:'270px'}">个人支付：{{list.order.psn_cash_pay}}</div>
+      <div :style="{position: 'absolute',top:'310px',left:'146px',}">{{list.order.medfee_sumamt}}</div>
+      <div :style="{position: 'absolute',top:'310px',left:'270px'}">个人支付：{{list.order.psn_cash_pay}}</div>
     </div>
-    <div :style="{position: 'absolute',top:(330+(index * 450))+'px',left:'190px'}">{{zhongwen}}</div>
-    <div :style="{position: 'absolute',top:(350+(index * 450))+'px',left:'190px'}">{{'统筹支付:' + list.order.hifp_pay}}</div>
-    <div :style="{position: 'absolute',top:(370+(index * 450))+'px',left:'300px'}">{{list.order.acct_pay}}</div>
+    <div :style="{position: 'absolute',top:'330px',left:'190px'}">{{zhongwen}}</div>
+    <div :style="{position: 'absolute',top:'350px',left:'190px'}">{{'统筹支付:' + list.order.hifp_pay}}</div>
+    <div :style="{position: 'absolute',top:'370px',left:'300px'}">{{list.order.acct_pay}}</div>
     <div style="display: flex;">
-      <div :style="{position: 'absolute',top:(390+(index * 450))+'px',left:'106px'}">{{list.admin_user_name}}</div>
-      <div :style="{position: 'absolute',top:(390+(index * 450))+'px',left:'300px'}">{{list.order_number}}</div>
+      <div :style="{position: 'absolute',top:'390px',left:'106px'}">{{list.admin_user_name}}</div>
+      <div :style="{position: 'absolute',top:'390px',left:'300px'}">{{list.order_number}}</div>
     </div>
 
-      <div v-for="(ite,index2) in item" :key="index2" style="">
-
-        <div :style="{position: 'absolute',top:(90 + (index * 450))  + 'px',left:(400 + (index2 * 200)) + 'px'}">{{list.order_number}}</div>
-        <div :style="{position: 'absolute',top:(110 + (index * 450))  + 'px',left:(490 + (index2 * 200)) + 'px'}">{{ite.name}}</div>
-        <div :style="{position: 'absolute',top:(130 + (index * 450))  + 'px',left:(490 + (index2 * 200)) + 'px'}">{{ite.item}}</div>
-        <div :style="{position: 'absolute',top:(300 + (index * 450))  + 'px',left:(490 + (index2 * 200)) + 'px'}">{{ite.doctor_name}}</div>
-        <div :style="{position: 'absolute',top:(320 + (index * 450))  + 'px',left:(490 + (index2 * 200)) + 'px'}">{{ite.total}}</div>
-        <div :style="{position: 'absolute',top:(340 + (index * 450))  + 'px',left:(490 + (index2 * 200)) + 'px'}">{{ite.operator}}</div>
-        <div :style="{position: 'absolute',top:(360 + (index * 450))  + 'px',left:(490 + (index2 * 200)) + 'px'}">{{ite.printDate}}</div>
-        <!-- 附件 -->
-        <!-- <div :style="{position: 'absolute',top:(120 + (index * 350))  + 'px',left:'490px'}">号码</div>
-        <div :style="{position: 'absolute',top:(150 + (index * 350))  + 'px',left:'490px'}">{{ite}}</div>
-        <div :style="{position: 'absolute',top:(170 + (index * 350))  + 'px',left:'490px'}">项目</div>
-        <div :style="{position: 'absolute',top:(310 + (index * 350))  + 'px',left:'490px'}">金额</div>
-        <div :style="{position: 'absolute',top:(330 + (index * 350))  + 'px',left:'490px'}">收款人</div>
-        <div :style="{position: 'absolute',top:(350 + (index * 350))  + 'px',left:'490px'}">日期</div> -->
-        <!-- 附件 -->
-        <!-- <div :style="{position: 'absolute',top:(120 + (index * 350))  + 'px',left:'588px'}">号码</div>
-        <div :style="{position: 'absolute',top:(150 + (index * 350))  + 'px',left:'588px'}">{{ite}}</div>
-        <div :style="{position: 'absolute',top:(170 + (index * 350))  + 'px',left:'588px'}">项目</div>
-        <div :style="{position: 'absolute',top:(310 + (index * 350))  + 'px',left:'588px'}">金额</div>
-        <div :style="{position: 'absolute',top:(330 + (index * 350))  + 'px',left:'588px'}">收款人</div>
-        <div :style="{position: 'absolute',top:(350 + (index * 350))  + 'px',left:'588px'}">日期</div> -->
+      <div v-for="(items,index) in Arr" :key="index" style="">
+        <div v-for="(ite,index2) in items" :key="index2">
+          <div :style="{position: 'absolute',top:'90px',left:(400 + (index * 200)) + 'px'}">{{list.order_number}}</div>
+          <div :style="{position: 'absolute',top:'110px',left:(490 + (index * 200)) + 'px'}">{{Arr[0][0].name}}</div>
+          <div :style="{position: 'absolute',top:(130 + (index2 * 20))  + 'px',left:(490 + (index * 200)) + 'px'}">{{ite.item}} {{ite.total}}</div>
+          <div :style="{position: 'absolute',top:'300px',left:(490 + (index * 200)) + 'px'}">{{Arr[0][0].doctor_name}}</div>
+          <div :style="{position: 'absolute',top:'320px',left:(490 + (index * 200)) + 'px'}">{{list.order.psn_cash_pay}}</div>
+          <div :style="{position: 'absolute',top:'340px',left:(490 + (index * 200)) + 'px'}">{{Arr[0][0].operator}}</div>
+          <div :style="{position: 'absolute',top:'360px',left:(490 + (index * 200)) + 'px'}">{{Arr[0][0].printDate}}</div>
+        </div>
       </div>
 
     </div>
       Arr:[],
       // pageArrs:['西药费','化验费','治疗费','处置费',,'输氧费','其他']
       // pageArrs:['西药费','化验费','治疗费','处置费','中成药','诊疗费','材料费',
-      //         '护理费','注射费','检查费'],
+      //         '护理费','注射费','检查费','输氧费','其他'],
     }
   },
   created(){
     console.log('paramsObj',this.paramsObj)
-    // console.log('vvvv',this.group(this.pageArrs,3));
+    // console.log('vvvv',this.group(this.pageArrs,4));
+    // this.Arr = this.group(this.pageArrs,4)
     let params = {
       order_id: this.paramsObj.order_id,
       patient_id: this.paramsObj.patient_id,
           this.pageArr.push(obj)
         }
 
-
         if(this.list.chineseTraditionalMedicineCostTotal > 0){
           let obj = {
             name: this.paramsObj.name,
           this.pageArr.push(obj)
         }
 
-
         if(this.list.laboratoryCostTotal > 0){
           let obj = {
             name:this.paramsObj.name,
           this.pageArr.push(obj)
         }
 
-
         if(this.list.checkCostTotal > 0){
           let obj = {
             name: this.paramsObj.name,
           this.pageArr.push(obj)
         }
 
-
         if(this.list.materialCostTotal > 0){
           let obj = {
             name:this.paramsObj.name,
           //   num=1
           // }
         // // }
-        // console.log('2222',this.pageArr,Math.ceil(this.pageArr.length/3));
-        this.Arr = this.group(this.pageArr,3)
+        console.log('2222',this.pageArr);
+        this.Arr = this.group(this.pageArr,4)
         console.log('3333',this.Arr)
 
       })