payprint.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  6. <title></title>
  7. <style>
  8. table,
  9. table tr th,
  10. table tr td {
  11. border: 2px solid #333333;
  12. padding: 5px 0;
  13. }
  14. #app {
  15. height: 88vh;
  16. position: relative;
  17. }
  18. .content {
  19. width: 1000px;
  20. /* height: 583px; */
  21. margin: auto;
  22. /* position: absolute; */
  23. /* top: -5vh; */
  24. /* bottom: 0;
  25. left: 0;
  26. right: 0; */
  27. }
  28. table {
  29. width: 100%;
  30. text-align: center;
  31. border-collapse: collapse;
  32. border: 3px solid #333333;
  33. }
  34. .col-bgc {
  35. background: #f6f7fb;
  36. }
  37. .bottom-row1 {
  38. display: flex;
  39. justify-content: space-between;
  40. margin: 20px 0;
  41. }
  42. .bottom-row2 {
  43. display: flex;
  44. margin: 10px 0;
  45. }
  46. img {
  47. width: 41px;
  48. height: 41px;
  49. /* margin-right: 118px; */
  50. }
  51. .config {
  52. margin-right: 240px;
  53. }
  54. .bottom-row3 {
  55. margin: 10px 0;
  56. }
  57. .title {
  58. text-align: center;
  59. font-size: 24px;
  60. }
  61. .number {
  62. text-align: right;
  63. margin-bottom: 10px;
  64. }
  65. .small-row {
  66. display: flex;
  67. }
  68. .small-content {
  69. width: 400px;
  70. margin: 0 auto;
  71. border: 1px solid #ccc;
  72. padding: 20px 20px 160px 20px;
  73. position: absolute;
  74. top: 0;
  75. bottom: 0;
  76. left: 0;
  77. right: 0;
  78. margin: auto;
  79. height: 650px;
  80. }
  81. .small-title {
  82. text-align: center;
  83. font-size: 18px;
  84. display: flex;
  85. justify-content: space-between;
  86. align-items: center;
  87. }
  88. .small-row {
  89. display: flex;
  90. justify-content: space-between;
  91. margin: 10px;
  92. }
  93. .small-img {
  94. margin-right: 0;
  95. }
  96. .sign {
  97. margin-right: 100px;
  98. }
  99. .header {
  100. display: flex;
  101. justify-content: space-between;
  102. font-size: 16px;
  103. margin: 10px 0;
  104. }
  105. .header1 {
  106. font-size: 24px;
  107. /* margin: 30px 60px 10px 60px; */
  108. display: flex;
  109. justify-content: center;
  110. }
  111. .line {
  112. height: 2px;
  113. width: 410px;
  114. margin: 3px auto;
  115. background: black;
  116. }
  117. .line:nth-of-type(3) {
  118. margin-bottom: 30px;
  119. }
  120. .header-top {
  121. display: flex;
  122. justify-content: space-between;
  123. }
  124. .sfcard {}
  125. .sfcard-content {
  126. display: flex;
  127. align-items: center;
  128. justify-content: space-evenly;
  129. }
  130. .sfcard-content img {
  131. width: 45%;
  132. height: 58vh;
  133. }
  134. .sfcard-title {
  135. font-size: 28px;
  136. text-align: center;
  137. margin: 10px 0;
  138. }
  139. .avatar {
  140. /* margin-bottom: 120px; */
  141. }
  142. .avatar:nth-of-type(2) {
  143. /* margin-bottom: 140px; */
  144. }
  145. .center {
  146. height: 120vh;
  147. }
  148. /* .onlypz-center{
  149. height: 130vh;
  150. } */
  151. </style>
  152. </head>
  153. <body>
  154. <div id="app">
  155. <div v-if='selectPrint'>
  156. <div v-for="(item,index) in printData1" :key="index">
  157. <div class="content">
  158. <div class="sfcard" v-if="isShowPrintType1">
  159. <div class="sfcard-title">
  160. {{ printData1[index].customerName}}{{printData1[index].identityAuthenticationInfo.customerNumberCard}}
  161. </div>
  162. <div class="sfcard-content">
  163. <img :src="customerList1[index].imgURl.imageUrl1" class="avatar" />
  164. <img :src="customerList1[index].imgURl.imageUrl2" class="avatar" />
  165. </div>
  166. </div>
  167. <div class="bankcard" v-if="isShowPrintType2">
  168. <div class="sfcard-title">
  169. {{printData1[index].identityAuthenticationInfo.bankDeposit}}{{printData1[index].identityAuthenticationInfo.bankCard}}
  170. </div>
  171. <div class="sfcard-content">
  172. <img :src="customerList1[index].imgURl.imageUrl3" class="avatar" />
  173. <img :src="customerList1[index].imgURl.imageUrl4" class="avatar" />
  174. </div>
  175. </div>
  176. <div class="center" v-if="isShowPrintType3">
  177. <div class="header1">{{ printData1[index].compName}}结算凭证</div>
  178. <div class="line"></div>
  179. <div class="line"></div>
  180. <div class="header">
  181. <div>单位名称:{{ printData1[index].compName}}</div>
  182. <!-- <div>税务登记编号:91230230MA1BNL7Q93</div> -->
  183. </div>
  184. <div class="header-top">
  185. <div>单位:公斤/元</div>
  186. <div>No.</div>
  187. </div>
  188. <div class="header-top">
  189. <div>开票日期:{{printData1[index].createDate}}</div>
  190. <!-- <div>开票日期:{{new Date(yyyy,mm,dd)}}</div> -->
  191. <div class="number">{{dealNo(printData1[index].paymentNo)}}</div>
  192. </div>
  193. <table class="table">
  194. <tr class="row">
  195. <td rowspan="4" class="col col-bgc">买方</td>
  196. <td class="col col-bgc">单位名称</td>
  197. <td class="col" colspan="3">{{ printData1[index].compName}}</td>
  198. <td rowspan="4" class="col col-bgc">卖方</td>
  199. <td class="col col-bgc">姓名</td>
  200. <td class="col" colspan="4">{{ printData1[index].customerName}}</td>
  201. </tr>
  202. <tr class="row">
  203. <td class="col col-bgc">税务登记号</td>
  204. <td class="col" colspan="3">{{ printData1[index].taxRegistrationNo}}</td>
  205. <td class="col col-bgc">身份证号</td>
  206. <td class="col" colspan="4">
  207. {{ printData1[index].identityAuthenticationInfo.customerNumberCard}}
  208. </td>
  209. </tr>
  210. <tr class="row">
  211. <td class="col col-bgc">业务编号</td>
  212. <td class="col" colspan="3">{{ printData1[index].paymentNo}}</td>
  213. <td class="col col-bgc">卡号</td>
  214. <td class="col" colspan="4">
  215. {{printData1[index].identityAuthenticationInfo.bankDeposit}}{{printData1[index].identityAuthenticationInfo.bankCard}}
  216. </td>
  217. </tr>
  218. <tr class="row">
  219. <td class="col col-bgc">收货仓库</td>
  220. <td class="col" colspan="3">{{printData1[index].warehouseName}}</td>
  221. <td class="col col-bgc">地址</td>
  222. <td class="col" colspan="4">
  223. {{printData1[index].identityAuthenticationInfo.compAddress}}
  224. </td>
  225. </tr>
  226. <tr class="row">
  227. <td class="col col-bgc">货名</td>
  228. <td class="col col-bgc">类型</td>
  229. <td class="col col-bgc">等级</td>
  230. <td class="col col-bgc">水分%</td>
  231. <td class="col col-bgc">杂质%</td>
  232. <td class="col col-bgc">毛重</td>
  233. <td class="col col-bgc">皮重</td>
  234. <td class="col col-bgc">扣杂重</td>
  235. <td class="col col-bgc">净重</td>
  236. <td class="col col-bgc">纯重</td>
  237. </tr>
  238. <tr class="row">
  239. <td class="col">{{ printData1[index].goodsName}}</td>
  240. <td class="col">{{ printData1[index].type}}</td>
  241. <td class="col">
  242. {{ printData1[index].qualityInspectionManagement.grade}}
  243. </td>
  244. <td class="col">
  245. {{ printData1[index].qualityInspectionManagement.waterContent}}
  246. </td>
  247. <td class="col">
  248. {{ printData1[index].qualityInspectionManagement.impurity}}
  249. </td>
  250. <td class="col">{{ printData1[index].grossWeight}}</td>
  251. <td class="col">{{ printData1[index].tare}}</td>
  252. <td class="col">
  253. {{ printData1[index].weighingManagement.buckleMiscellaneous}}
  254. </td>
  255. <td class="col">{{ printData1[index].netWeight}}</td>
  256. <td class="col">{{ printData1[index].pureWeight}}</td>
  257. </tr>
  258. <tr class="row">
  259. <td class="col col-bgc" v-if="printData1[index].type == '潮粮'">
  260. 净重单价
  261. </td>
  262. <td class="col col-bgc" v-if="printData1[index].type == '干粮'">单价</td>
  263. <td class="col col-bgc">扣单价</td>
  264. <td class="col col-bgc">粮款</td>
  265. <td class="col col-bgc">称重补助</td>
  266. <td class="col col-bgc">运费补助</td>
  267. <td class="col col-bgc">卸车补助</td>
  268. <td class="col col-bgc">其他补助</td>
  269. <td class="col col-bgc">称重扣款</td>
  270. <td class="col col-bgc">运费扣款</td>
  271. <td class="col col-bgc">卸车扣款</td>
  272. </tr>
  273. <tr class="row">
  274. <td class="col " v-if="printData1[index].type == '潮粮'">
  275. {{printData1[index].tidalGrainPrice}}
  276. </td>
  277. <td class="col " v-if="printData1[index].type == '干粮'">
  278. {{printData1[index].qualityInspectionManagement.dryGrainPrice}}
  279. </td>
  280. <td class="col ">{{ printData1[index].unitDeduction}}</td>
  281. <td class="col ">{{ printData1[index].grainMoney}}</td>
  282. <td class="col ">{{ printData1[index].weighingSubsidy}}</td>
  283. <td class="col ">{{ printData1[index].freightSubsidy}}</td>
  284. <td class="col ">{{ printData1[index].unloadSubsidy}}</td>
  285. <td class="col ">{{ printData1[index].otherSubsidy}}</td>
  286. <td class="col ">{{ printData1[index].weighingDeduction}}</td>
  287. <td class="col ">{{ printData1[index].freightDeduction}}</td>
  288. <td class="col ">{{ printData1[index].unloadDeduction}}</td>
  289. </tr>
  290. <tr class="row">
  291. <td class="col col-bgc">质量扣款</td>
  292. <td class="col col-bgc">其他扣款</td>
  293. <td class="col col-bgc" v-if="printData.type == '潮粮'">
  294. 纯重单价
  295. </td>
  296. <td class="col col-bgc">合计应付</td>
  297. <td class="col col-bgc">购粮性质</td>
  298. <td class="col col-bgc">车牌号</td>
  299. <td class="col col-bgc" colspan="5">记事</td>
  300. </tr>
  301. <tr class="row">
  302. <td class="col ">{{ printData1[index].qualityDeduction}}</td>
  303. <td class="col ">{{ printData1[index].otherDeduction}}</td>
  304. <td class="col " v-if="printData1[index].type == '潮粮'">
  305. {{ printData1[index].solidGrainPrice}}
  306. </td>
  307. <td class="col ">{{ printData1[index].calculationPayable}}</td>
  308. <td class="col ">
  309. {{ printData1[index].qualityInspectionManagement.natureOfGrainPurchase}}
  310. </td>
  311. <td class="col ">{{ printData1[index].carNo}}</td>
  312. <td class="col " colspan="5">{{ printData1[index].remarks}}</td>
  313. </tr>
  314. <tr class="row">
  315. <td class="col col-bgc">实付金额</td>
  316. <td class="col " colspan="2">{{printData1[index].actualPayment}}</td>
  317. <td class="col col-bgc" colspan="3">人民币(大写)</td>
  318. <td class="col " colspan="4">{{printData1[index].capitalize}}</td>
  319. </tr>
  320. </table>
  321. <div class="bottom">
  322. <div class="bottom-row1">
  323. <div>
  324. 质检:{{
  325. printData1[index].qualityInspectionManagement.qualityInspector}}
  326. </div>
  327. <div>
  328. 毛检:{{ printData1[index].weighingManagement.secretaryWeigher}}
  329. </div>
  330. <div>皮检:{{ printData1[index].weighingManagement.skinInspector}}</div>
  331. <div>结算:{{ printData1[index].settlementClerk}}</div>
  332. <div>付款:{{ printData1[index].cashier}}</div>
  333. <div>复点:{{ }}</div>
  334. <div></div>
  335. </div>
  336. <div class="bottom-row2">
  337. <!-- <div class="left">
  338. <img src="../../../../public/img/add.png" alt="" />
  339. </div> -->
  340. <div class="config">收货单位签名或盖章</div>
  341. <div class="">客户签名</div>
  342. </div>
  343. <!-- <div class="bottom-row3">扫一扫</div> -->
  344. <!-- <div class="bottom-row4">
  345. <el-button type="primary">关闭</el-button>
  346. <el-button type="primary" @click="printSmall">打印小票</el-button>
  347. <el-button type="primary" @click="printBig">打印单据</el-button>
  348. </div> -->
  349. </div>
  350. </div>
  351. </div>
  352. </div>
  353. </div>
  354. <div class="content" v-else>
  355. <div class="sfcard" v-if="isShowPrintType1">
  356. <div class="sfcard-title">
  357. {{ printData.customerName}}{{ printData.identityAuthenticationInfo.customerNumberCard}}</div>
  358. <div class="sfcard-content">
  359. <img :src="imageUrl1" class="avatar" />
  360. <img :src="imageUrl2" class="avatar" />
  361. </div>
  362. </div>
  363. <div class="bankcard" v-if="isShowPrintType2">
  364. <div class="sfcard-title">
  365. {{printData.identityAuthenticationInfo.bankDeposit}}{{printData.identityAuthenticationInfo.bankCard}}</div>
  366. <div class="sfcard-content">
  367. <img :src="imageUrl3" class="avatar" />
  368. <img :src="imageUrl4" class="avatar" />
  369. </div>
  370. </div>
  371. <div class="center" v-if="isShowPrintType3">
  372. <div class="header1">{{ printData.compName}}结算凭证</div>
  373. <div class="line"></div>
  374. <div class="line"></div>
  375. <div class="header">
  376. <div>单位名称:{{ printData.compName}}</div>
  377. <!-- <div>税务登记编号:91230230MA1BNL7Q93</div> -->
  378. </div>
  379. <div class="header-top">
  380. <div>单位:公斤/元</div>
  381. <div>No.</div>
  382. </div>
  383. <div class="header-top">
  384. <div>开票日期:{{printData.createDate}}</div>
  385. <!-- <div>开票日期:{{new Date(yyyy,mm,dd)}}</div> -->
  386. <div class="number">{{dealNo(printData.paymentNo)}}</div>
  387. </div>
  388. <table class="table">
  389. <tr class="row">
  390. <td rowspan="4" class="col col-bgc">买方</td>
  391. <td class="col col-bgc">单位名称</td>
  392. <td class="col" colspan="3">{{ printData.compName}}</td>
  393. <td rowspan="4" class="col col-bgc">卖方</td>
  394. <td class="col col-bgc">姓名</td>
  395. <td class="col" colspan="4">{{ printData.customerName}}</td>
  396. </tr>
  397. <tr class="row">
  398. <td class="col col-bgc">税务登记号</td>
  399. <td class="col" colspan="3">{{ printData.taxRegistrationNo}}</td>
  400. <td class="col col-bgc">身份证号</td>
  401. <td class="col" colspan="4">
  402. {{ printData.identityAuthenticationInfo.customerNumberCard}}
  403. </td>
  404. </tr>
  405. <tr class="row">
  406. <td class="col col-bgc">业务编号</td>
  407. <td class="col" colspan="3">{{ printData.paymentNo}}</td>
  408. <td class="col col-bgc">卡号</td>
  409. <td class="col" colspan="4">
  410. {{printData.identityAuthenticationInfo.bankDeposit}}{{printData.identityAuthenticationInfo.bankCard}}
  411. </td>
  412. </tr>
  413. <tr class="row">
  414. <td class="col col-bgc">收货仓库</td>
  415. <td class="col" colspan="3">{{printData.warehouseName}}</td>
  416. <td class="col col-bgc">地址</td>
  417. <td class="col" colspan="4">
  418. {{printData.identityAuthenticationInfo.compAddress}}
  419. </td>
  420. </tr>
  421. <tr class="row">
  422. <td class="col col-bgc">货名</td>
  423. <td class="col col-bgc">类型</td>
  424. <td class="col col-bgc">等级</td>
  425. <td class="col col-bgc">水分%</td>
  426. <td class="col col-bgc">杂质%</td>
  427. <td class="col col-bgc">毛重</td>
  428. <td class="col col-bgc">皮重</td>
  429. <td class="col col-bgc">扣杂重</td>
  430. <td class="col col-bgc">净重</td>
  431. <td class="col col-bgc">纯重</td>
  432. </tr>
  433. <tr class="row">
  434. <td class="col">{{ printData.goodsName}}</td>
  435. <td class="col">{{ printData.type}}</td>
  436. <td class="col">
  437. {{ printData.qualityInspectionManagement.grade}}
  438. </td>
  439. <td class="col">
  440. {{ printData.qualityInspectionManagement.waterContent}}
  441. </td>
  442. <td class="col">
  443. {{ printData.qualityInspectionManagement.impurity}}
  444. </td>
  445. <td class="col">{{ printData.grossWeight}}</td>
  446. <td class="col">{{ printData.tare}}</td>
  447. <td class="col">
  448. {{ printData.weighingManagement.buckleMiscellaneous}}
  449. </td>
  450. <td class="col">{{ printData.netWeight}}</td>
  451. <td class="col">{{ printData.pureWeight}}</td>
  452. </tr>
  453. <tr class="row">
  454. <td class="col col-bgc" v-if="printData.type == '潮粮'">
  455. 净重单价
  456. </td>
  457. <td class="col col-bgc" v-if="printData.type == '干粮'">单价</td>
  458. <td class="col col-bgc">扣单价</td>
  459. <td class="col col-bgc">粮款</td>
  460. <td class="col col-bgc">称重补助</td>
  461. <td class="col col-bgc">运费补助</td>
  462. <td class="col col-bgc">卸车补助</td>
  463. <td class="col col-bgc">其他补助</td>
  464. <td class="col col-bgc">称重扣款</td>
  465. <td class="col col-bgc">运费扣款</td>
  466. <td class="col col-bgc">卸车扣款</td>
  467. </tr>
  468. <tr class="row">
  469. <td class="col " v-if="printData.type == '潮粮'">
  470. {{printData.tidalGrainPrice}}
  471. </td>
  472. <td class="col " v-if="printData.type == '干粮'">
  473. {{printData.qualityInspectionManagement.dryGrainPrice}}
  474. </td>
  475. <td class="col ">{{ printData.unitDeduction}}</td>
  476. <td class="col ">{{ printData.grainMoney}}</td>
  477. <td class="col ">{{ printData.weighingSubsidy}}</td>
  478. <td class="col ">{{ printData.freightSubsidy}}</td>
  479. <td class="col ">{{ printData.unloadSubsidy}}</td>
  480. <td class="col ">{{ printData.otherSubsidy}}</td>
  481. <td class="col ">{{ printData.weighingDeduction}}</td>
  482. <td class="col ">{{ printData.freightDeduction}}</td>
  483. <td class="col ">{{ printData.unloadDeduction}}</td>
  484. </tr>
  485. <tr class="row">
  486. <td class="col col-bgc">质量扣款</td>
  487. <td class="col col-bgc">其他扣款</td>
  488. <td class="col col-bgc" v-if="printData.type == '潮粮'">
  489. 纯重单价
  490. </td>
  491. <td class="col col-bgc">合计应付</td>
  492. <td class="col col-bgc">购粮性质</td>
  493. <td class="col col-bgc">车牌号</td>
  494. <td class="col col-bgc" colspan="5">记事</td>
  495. </tr>
  496. <tr class="row">
  497. <td class="col ">{{ printData.qualityDeduction}}</td>
  498. <td class="col ">{{ printData.otherDeduction}}</td>
  499. <td class="col " v-if="printData.type == '潮粮'">
  500. {{ printData.solidGrainPrice}}
  501. </td>
  502. <td class="col ">{{ printData.calculationPayable}}</td>
  503. <td class="col ">
  504. {{ printData.qualityInspectionManagement.natureOfGrainPurchase}}
  505. </td>
  506. <td class="col ">{{ printData.carNo}}</td>
  507. <td class="col " colspan="5">{{ printData.remarks}}</td>
  508. </tr>
  509. <tr class="row">
  510. <td class="col col-bgc">实付金额</td>
  511. <td class="col " colspan="2">{{printData.actualPayment}}</td>
  512. <td class="col col-bgc" colspan="3">人民币(大写)</td>
  513. <td class="col " colspan="4">{{printData.capitalize}}</td>
  514. </tr>
  515. </table>
  516. <div class="bottom">
  517. <div class="bottom-row1">
  518. <div>
  519. 质检:{{
  520. printData.qualityInspectionManagement.qualityInspector}}
  521. </div>
  522. <div>
  523. 毛检:{{ printData.weighingManagement.secretaryWeigher}}
  524. </div>
  525. <div>皮检:{{ printData.weighingManagement.skinInspector}}</div>
  526. <div>结算:{{ printData.settlementClerk}}</div>
  527. <div>付款:{{ printData.cashier}}</div>
  528. <div>复点:{{ }}</div>
  529. <div></div>
  530. </div>
  531. <div class="bottom-row2">
  532. <!-- <div class="left">
  533. <img src="../../../../public/img/add.png" alt="" />
  534. </div> -->
  535. <div class="config">收货单位签名或盖章</div>
  536. <div class="">客户签名</div>
  537. </div>
  538. <!-- <div class="bottom-row3">扫一扫</div> -->
  539. <!-- <div class="bottom-row4">
  540. <el-button type="primary">关闭</el-button>
  541. <el-button type="primary" @click="printSmall">打印小票</el-button>
  542. <el-button type="primary" @click="printBig">打印单据</el-button>
  543. </div> -->
  544. </div>
  545. </div>
  546. </div>
  547. <div class="small-content" v-if="smallContent">
  548. <div class="small-title">
  549. <div>
  550. {{printData.compName}}结算凭证
  551. </div>
  552. <img class="small-img" src="../img/add.png" alt="" />
  553. </div>
  554. <div class="small-row">
  555. <div>开票日期</div>
  556. <div>{{printData.createDate}}</div>
  557. </div>
  558. <div class="small-row">
  559. <div>买方单位名称</div>
  560. <div>{{printData.compName}}</div>
  561. </div>
  562. <div class="small-row">
  563. <div>买方姓名</div>
  564. <div>{{printData.customerName}}</div>
  565. </div>
  566. <div class="small-row">
  567. <div>税务登记号</div>
  568. <div>{{printData.taxRegistrationNo}}</div>
  569. </div>
  570. <div class="small-row">
  571. <div>身份证号</div>
  572. <div>{{printData.customerNumberCard}}</div>
  573. </div>
  574. <div class="small-row">
  575. <div>化验单号</div>
  576. <div>{{printData.paymentNo}}</div>
  577. </div>
  578. <div class="small-row">
  579. <div>卡号</div>
  580. <div>{{printData.bankCard}}</div>
  581. </div>
  582. <div class="small-row">
  583. <div>收货仓库</div>
  584. <div>{{printData.warehouseName}}</div>
  585. </div>
  586. <div class="small-row">
  587. <div>货名</div>
  588. <div>{{printData.goodsName}}</div>
  589. </div>
  590. <div class="small-row">
  591. <div>类型</div>
  592. <div>{{printData.type}}</div>
  593. </div>
  594. <div class="small-row">
  595. <div>等级</div>
  596. <div>{{printData.grade}}</div>
  597. </div>
  598. <div class="small-row">
  599. <div>水分%</div>
  600. <div>{{printData.waterContent}}</div>
  601. </div>
  602. <div class="small-row">
  603. <div>杂质%</div>
  604. <div>{{printData.impurity}}</div>
  605. </div>
  606. <div class="small-row">
  607. <div>毛重</div>
  608. <div>{{printData.grossWeight}}</div>
  609. </div>
  610. <div class="small-row">
  611. <div>皮重</div>
  612. <div>{{printData.tare}}</div>
  613. </div>
  614. <div class="small-row">
  615. <div>扣杂重</div>
  616. <div>{{printData.weighingManagement.buckleMiscellaneous}}</div>
  617. </div>
  618. <div class="small-row">
  619. <div>净重</div>
  620. <div>{{printData.netWeight}}</div>
  621. </div>
  622. <div class="small-row">
  623. <div>纯重</div>
  624. <div>{{printData.pureWeight}}</div>
  625. </div>
  626. <div class="small-row">
  627. <div>净重单价</div>
  628. <div>{{printData.tidalGrainPrice}}</div>
  629. </div>
  630. <div class="small-row">
  631. <div>粮款</div>
  632. <div>{{printData.grainMoney}}</div>
  633. </div>
  634. <div class="small-row">
  635. <div>称重补助</div>
  636. <div>{{printData.weighingSubsidy}}</div>
  637. </div>
  638. <div class="small-row">
  639. <div>运费补助</div>
  640. <div>{{printData.freightSubsidy}}</div>
  641. </div>
  642. <div class="small-row">
  643. <div>卸车补助</div>
  644. <div>{{printData.unloadSubsidy}}</div>
  645. </div>
  646. <div class="small-row">
  647. <div>其他补助</div>
  648. <div>{{printData.otherSubsidy}}</div>
  649. </div>
  650. <div class="small-row">
  651. <div>称重扣款</div>
  652. <div>{{printData.weighingDeduction}}</div>
  653. </div>
  654. <div class="small-row">
  655. <div>运费扣款</div>
  656. <div>{{printData.freightDeduction}}</div>
  657. </div>
  658. <div class="small-row">
  659. <div>卸车扣款</div>
  660. <div>{{printData.unloadDeduction}}</div>
  661. </div>
  662. <div class="small-row">
  663. <div>质量扣款</div>
  664. <div>{{printData.qualityDeduction}}</div>
  665. </div>
  666. <div class="small-row">
  667. <div>其他扣款</div>
  668. <div>{{printData.otherDeduction}}</div>
  669. </div>
  670. <div class="small-row">
  671. <div>纯重单价</div>
  672. <div>{{printData.solidGrainPrice}}</div>
  673. </div>
  674. <div class="small-row">
  675. <div>合计应付</div>
  676. <div>{{printData.calculationPayable}}</div>
  677. </div>
  678. <div class="small-row">
  679. <div>购粮性质</div>
  680. <div>{{printData.natureOfGrainPurchase}}</div>
  681. </div>
  682. <div class="small-row">
  683. <div>车牌号</div>
  684. <div>{{printData.carNo}}</div>
  685. </div>
  686. <div class="small-row">
  687. <div>记事</div>
  688. <div>{{printData.remarks}}</div>
  689. </div>
  690. <div class="small-row">
  691. <div>实付金额</div>
  692. <div>{{printData.actualPayment}}</div>
  693. </div>
  694. <div class="small-row">
  695. <div>人民币(大写)</div>
  696. <div>{{printData.capitalize}}</div>
  697. </div>
  698. <div class="small-row">
  699. <div>质检</div>
  700. <div>{{printData.qualityInspector}}</div>
  701. </div>
  702. <div class="small-row">
  703. <div>毛检</div>
  704. <div>{{printData.secretaryWeigher}}</div>
  705. </div>
  706. <div class="small-row">
  707. <div>皮检</div>
  708. <div>{{printData.skinInspector}}</div>
  709. </div>
  710. <div class="small-row">
  711. <div>结算</div>
  712. <div>{{printData.settlementClerk}}</div>
  713. </div>
  714. <div class="small-row">
  715. <div>付款</div>
  716. <div>{{printData.actualPayment}}</div>
  717. </div>
  718. <div class="small-row">
  719. <div>复点</div>
  720. <div>&nbsp;&nbsp;&nbsp;</div>
  721. </div>
  722. </div>
  723. </div>
  724. </body>
  725. <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  726. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  727. <script type="text/javascript">
  728. new Vue({
  729. el: '#app',
  730. data: {
  731. isShowPrintType1: false,
  732. isShowPrintType2: false,
  733. isShowPrintType3: false,
  734. isShowPrintType4: false,
  735. showType: [],
  736. printData: {},
  737. printData1: [],
  738. customerList: {},
  739. customerList1: [],
  740. name: '',
  741. bigContent: false,
  742. smallContent: false,
  743. date: '',
  744. imageUrl1: '',
  745. imageUrl2: '',
  746. imageUrl3: '',
  747. imageUrl4: '',
  748. identity: [],
  749. bank: [],
  750. selectPrint: false,
  751. onlyShowPz:false,
  752. },
  753. computed: {},
  754. methods: {
  755. dealNo(str) {
  756. return str.slice(4)
  757. },
  758. tableRowClassName({
  759. row,
  760. rowIndex
  761. }) {
  762. if (rowIndex === 1) {
  763. return 'warning-row'
  764. } else if (rowIndex === 3) {
  765. return 'success-row'
  766. }
  767. return ''
  768. },
  769. getQueryVariable(variable) {
  770. var query = window.location.search.substring(1)
  771. var vars = query.split('&')
  772. for (var i = 0; i < vars.length; i++) {
  773. var pair = vars[i].split('=')
  774. if (pair[0] == variable) {
  775. return pair[1]
  776. }
  777. }
  778. return false
  779. },
  780. printSmall() {},
  781. printBig() {}
  782. },
  783. mounted() {
  784. this.date = new Date().toLocaleString()
  785. let _data = decodeURIComponent(this.getQueryVariable('dataList'))
  786. if (!_data) {
  787. this.selectPrint = true;
  788. this.printData1 = JSON.parse(localStorage.getItem('selectPrint_selectPrintList'))
  789. } else {
  790. this.printData = JSON.parse(_data)
  791. this.selectPrint = false;
  792. }
  793. let _type = decodeURIComponent(this.getQueryVariable('type'))
  794. this.showType = decodeURIComponent(this.getQueryVariable('printTypeList'))
  795. // this.pzList = this.showType.split(',')
  796. // if((this.showType.indexOf('打印结算凭证')>-1)&&this.pzList.length==1){
  797. // this.onlyShowPz = true
  798. // }
  799. // this.pageType = decodeURIComponent(this.getQueryVariable('printTypeList'))
  800. let _data1 = decodeURIComponent(this.getQueryVariable('customerList'))
  801. if (!_data1) {
  802. this.customerList1 = JSON.parse(localStorage.getItem('selectPrint_selectCustomerList'))
  803. } else {
  804. this.customerList = JSON.parse(_data1)
  805. }
  806. console.log('cwprint', localStorage.getItem('cwprint'))
  807. var cwprint = localStorage.getItem('cwprint')
  808. if (cwprint == "true") {
  809. if (this.selectPrint) {
  810. for (let i = 0; i < this.customerList1.length; i++) {
  811. let _url1 = this.customerList1[i].cardAddressUrl.split(',')
  812. let _url2 = this.customerList1[i].payeeAddressUrl.split(',')
  813. this.customerList1[i].imgURl = {
  814. imageUrl1: _url1[0],
  815. imageUrl2: _url1[1],
  816. imageUrl3: _url2[0],
  817. imageUrl4: _url2[0]
  818. }
  819. }
  820. } else {
  821. this.identity = this.customerList.cardAddressUrl.split(',')
  822. this.bank = this.customerList.payeeAddressUrl.split(',')
  823. this.imageUrl1 = this.identity[0]
  824. this.imageUrl2 = this.identity[1]
  825. this.imageUrl3 = this.bank[0]
  826. this.imageUrl4 = this.bank[1]
  827. }
  828. let _lsit = this.showType.split(',')
  829. for (let i = 0; i < _lsit.length; i++) {
  830. switch (_lsit[i]) {
  831. case '打印身份证(正反面)':
  832. this.isShowPrintType1 = !this.isShowPrintType1
  833. break
  834. case '打印银行卡(正反面)':
  835. this.isShowPrintType2 = !this.isShowPrintType2
  836. break
  837. case '打印结算凭证':
  838. this.isShowPrintType3 = !this.isShowPrintType3
  839. case '打印发票':
  840. this.isShowPrintType4 = !this.isShowPrintType4
  841. break
  842. }
  843. }
  844. } else {
  845. this.isShowPrintType3 = true
  846. }
  847. if (_type == 2) {
  848. this.bigContent = true
  849. this.smallContent = false
  850. } else {
  851. this.smallContent = true
  852. this.bigContent = false
  853. }
  854. if(this.printData.compName==undefined) this.printData.compName=''
  855. document.title = this.printData.compName + '结算凭证'
  856. window.print()
  857. // sessionStorage.removeItem('selectPrint_selectPrintList');
  858. // sessionStorage.removeItem('selectPrint_selectCustomerList');
  859. window.onafterprint = function(event) {
  860. window.history.back(-1)
  861. }
  862. },
  863. watch: {}
  864. })
  865. </script>
  866. </html>