warehouseBatchPrint.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="../cdn/element-ui/2.13.2/theme-chalk/index.css">
  6. <title></title>
  7. <style>
  8. body{
  9. margin: 0;
  10. }
  11. table tr th,
  12. table tr td {
  13. border: 2px solid #333333;
  14. padding: 5px;
  15. height: 37px;
  16. box-sizing: border-box;
  17. }
  18. #app {
  19. /* height: 98vh; */
  20. position: relative;
  21. }
  22. .content {
  23. width: 1000px;
  24. padding: 30px 20px 20px 20px;
  25. font-size: 18px;
  26. height:573px;
  27. top: 0;
  28. bottom: 0;
  29. left: 0;
  30. right: 0;
  31. }
  32. table {
  33. width: 100%;
  34. text-align: center;
  35. border-collapse: collapse;
  36. border: 3px solid #333333;
  37. }
  38. .col-bgc {
  39. background: #f6f7fb;
  40. }
  41. .bottom-row1 {
  42. display: flex;
  43. /* justify-content: space-between; */
  44. margin-top: 10px;
  45. }
  46. .bottom-row2 {
  47. display: flex;
  48. }
  49. .number {
  50. text-align: right;
  51. margin-bottom: 10px;
  52. margin-top: 20px;
  53. }
  54. .config {
  55. margin-top: 10px;
  56. margin-right: 240px;
  57. }
  58. .autograph {
  59. margin-top: 10px;
  60. }
  61. .title {
  62. text-align: center;
  63. font-size: 36px;
  64. font-weight: 500;
  65. margin-bottom: 20px;
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <div id="app">
  71. <div class="content" v-for="(item,index) in tableData" v-if="!isDDPrint||isEWPrint">
  72. <!-- <div v-if="item.inOutFlag == '2'" class="title">{{item.companyName}}</div>
  73. <div v-else class="title">{{item.contractManagementInfo?item.contractManagementInfo.seller:item.companyName}}
  74. </div> -->
  75. <div></div>
  76. <div v-if="item.inOutFlag == '2'" class="title">入库检斤单</div>
  77. <div v-else class="title">出库检斤单</div>
  78. <div class="number" v-if="isEWPrint">{{item.contractManagementInfo?item.contractManagementInfo.contractNo:''}}</div>
  79. <table class="table">
  80. <tr class="row">
  81. <td class="col col-bgc">出货单位</td>
  82. <td class="col" colspan="">
  83. {{item.contractManagementInfo?item.contractManagementInfo.seller:item.warehouseName}}
  84. <!-- {{item.companyName}} -->
  85. </td>
  86. <td class="col col-bgc">车牌号</td>
  87. <td class="col" colspan="">{{item.carNo}}</td>
  88. <td class="col col-bgc">货名</td>
  89. <td class="col" colspan="3">{{item.goodsName}}</td>
  90. </tr>
  91. <tr class="row">
  92. <td class="col col-bgc">收货单位</td>
  93. <td class="col" colspan="">
  94. <!-- {{item.contractManagementInfo?item.contractManagementInfo.buyer:item.receiveWarehouse}} -->
  95. {{item.companyName}}
  96. </td>
  97. <td class="col col-bgc">类型</td>
  98. <td class="col" colspan="">{{item.type}}</td>
  99. <td class="col col-bgc">等级</td>
  100. <td class="col" colspan="3">{{item.grade}}</td>
  101. </tr>
  102. <tr class="row">
  103. <td class="col col-bgc">检斤时间</td>
  104. <td class="col" colspan="">{{item.updateDate}}</td>
  105. <td class="col col-bgc">水分(%)</td>
  106. <td class="col">{{item.waterContent}}
  107. </td>
  108. <td class="col col-bgc">热损伤(%)</td>
  109. <td class="col" colspan="3">{{item.jiaorenli}}</td>
  110. </tr>
  111. <tr class="row">
  112. <td class="col col-bgc">杂质(%)</td>
  113. <td class="col">{{item.impurity}}</td>
  114. <td class="col col-bgc">霉变粒(%)</td>
  115. <td class="col">{{item.mildewGrain}}
  116. </td>
  117. <td class="col col-bgc">容量</td>
  118. <td class="col">{{item.bulkDensity}}
  119. </td>
  120. <td class="col col-bgc">不完善粒(%)</td>
  121. <td class="col">{{item.imperfectGrain}}
  122. </td>
  123. </tr>
  124. <tr class="row">
  125. <td class="col col-bgc" colspan="">毛重(吨)</td>
  126. <td class="col" colspan="">{{item.grossWeight}}</td>
  127. <td class="col col-bgc" colspan="">皮重(吨)</td>
  128. <td class="col" colspan="">{{item.tare}}</td>
  129. <td class="col col-bgc" colspan="">扣重(吨)</td>
  130. <td class="col" colspan="">{{item.deductionWeight ? item.deductionWeight : '0'}}</td>
  131. <td class="col col-bgc" colspan="">净重(吨)</td>
  132. <td class="col" colspan="">{{item.netWeight}}</td>
  133. </tr>
  134. </table>
  135. <div class="bottom">
  136. <div class="bottom-row1">
  137. <div>检斤员:{{item.backOffice}}</div>
  138. </div>
  139. <div class="bottom-row2">
  140. <div class="config">收货单位签名或盖章:</div>
  141. <div class="config">客户签名:</div>
  142. <div class="autograph">司机签名:</div>
  143. </div>
  144. </div>
  145. </div>
  146. <!-- 打印额外 -->
  147. <div class="content" v-for="(item,index) in tableDataEW" v-if="isDDPrint||isEWPrint">
  148. <!-- <div v-if="item.inOutFlag == '2'" class="title">{{item.companyName}}</div>
  149. <div v-else class="title">{{item.contractManagementInfo?item.contractManagementInfo.seller:item.companyName}}
  150. </div> -->
  151. <div></div>
  152. <div v-if="item.inOutFlag == '2'" class="title">入库检斤单</div>
  153. <div v-else class="title">出库检斤单</div>
  154. <div class="number" v-if="isEWPrint">{{item.contractManagementInfo?item.contractManagementInfo.contractNo:''}}</div>
  155. <table class="table">
  156. <tr class="row">
  157. <td class="col col-bgc">出货单位</td>
  158. <td class="col" colspan="">
  159. <!-- {{item.contractManagementInfo?item.contractManagementInfo.seller:item.warehouseName}} -->
  160. {{item.customer}}
  161. </td>
  162. <td class="col col-bgc">车牌号</td>
  163. <td class="col" colspan="">{{item.carNo}}</td>
  164. <td class="col col-bgc">货名</td>
  165. <td class="col" colspan="3">{{item.goodsName}}</td>
  166. </tr>
  167. <tr class="row">
  168. <td class="col col-bgc">收货单位</td>
  169. <td class="col" colspan="">
  170. <!-- {{item.contractManagementInfo?item.contractManagementInfo.buyer:item.receiveWarehouse}} -->
  171. {{item.companyName}}
  172. </td>
  173. <td class="col col-bgc">类型</td>
  174. <td class="col" colspan="">{{item.type}}</td>
  175. <td class="col col-bgc">等级</td>
  176. <td class="col" colspan="3">{{item.grade}}</td>
  177. </tr>
  178. <tr class="row">
  179. <td class="col col-bgc">检斤时间</td>
  180. <td class="col" colspan="">{{item.updateDate}}</td>
  181. <td class="col col-bgc">水分(%)</td>
  182. <td class="col">{{item.warehouseInOutDetail.waterContent}}
  183. </td>
  184. <td class="col col-bgc">热损伤(%)</td>
  185. <td class="col" colspan="3">{{item.warehouseInOutDetail.jiaorenli}}</td>
  186. </tr>
  187. <tr class="row">
  188. <td class="col col-bgc">杂质(%)</td>
  189. <td class="col">{{item.warehouseInOutDetail.impurity}}</td>
  190. <td class="col col-bgc">霉变粒(%)</td>
  191. <td class="col">{{item.warehouseInOutDetail.mildewGrain}}
  192. </td>
  193. <td class="col col-bgc">容重</td>
  194. <td class="col">{{item.warehouseInOutDetail.bulkDensity}}
  195. </td>
  196. <td class="col col-bgc">不完善粒(%)</td>
  197. <td class="col">{{item.warehouseInOutDetail.imperfectGrain}}
  198. </td>
  199. </tr>
  200. <tr class="row">
  201. <td class="col col-bgc" colspan="">毛重(吨)</td>
  202. <td class="col" colspan="">{{item.grossWeight}}</td>
  203. <td class="col col-bgc" colspan="">皮重(吨)</td>
  204. <td class="col" colspan="">{{item.tare}}</td>
  205. <td class="col col-bgc" colspan="">扣重(吨)</td>
  206. <td class="col" colspan="">{{item.deductionWeight ? item.deductionWeight : '0'}}</td>
  207. <td class="col col-bgc" colspan="">净重(吨)</td>
  208. <td class="col" colspan="">{{item.netWeight}}</td>
  209. </tr>
  210. </table>
  211. <div class="bottom">
  212. <div class="bottom-row1">
  213. <div>检斤员:{{item.backOffice}}</div>
  214. </div>
  215. <div class="bottom-row2">
  216. <div class="config">收货单位签名或盖章:</div>
  217. <div class="config">客户签名:</div>
  218. <div class="autograph">司机签名:</div>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. </body>
  224. <script src="../cdn/vue/2.6.10/vue.min.js"></script>
  225. <script src="../cdn/element-ui/2.13.2/index.js"></script>
  226. <script type="text/javascript">
  227. new Vue({
  228. el: '#app',
  229. data: {
  230. tableData: {},
  231. tableDataEW: [],
  232. name: "",
  233. isDDPrint :false,
  234. isEWPrint:false,
  235. },
  236. computed: {},
  237. methods: {
  238. tableRowClassName({
  239. row,
  240. rowIndex
  241. }) {
  242. if (rowIndex === 1) {
  243. return 'warning-row';
  244. } else if (rowIndex === 3) {
  245. return 'success-row';
  246. }
  247. return '';
  248. },
  249. getQueryVariable(variable) {
  250. var query = window.location.search.substring(1);
  251. var vars = query.split("&");
  252. for (var i = 0; i < vars.length; i++) {
  253. var pair = vars[i].split("=");
  254. if (pair[0] == variable) {
  255. return pair[1];
  256. }
  257. }
  258. return (false);
  259. },
  260. printSmall() {},
  261. printBig() {},
  262. },
  263. mounted() {
  264. let _ew = decodeURIComponent(this.getQueryVariable("selectEW"))
  265. let _ewdd = decodeURIComponent(this.getQueryVariable("selectEWDD"))
  266. if(_ew== 'true'){
  267. this.tableDataEW = JSON.parse(localStorage.getItem('ewWarehouseBatchPrint'))
  268. this.isEWPrint = true
  269. }else{
  270. this.isEWPrint = false
  271. }
  272. if(_ewdd== 'true'){
  273. this.tableDataEW = JSON.parse(localStorage.getItem('ewWarehouseBatchPrint'))
  274. this.isDDPrint = true
  275. }else{
  276. this.isDDPrint = false
  277. }
  278. this.tableData = JSON.parse(localStorage.getItem("warehouseBatchPrint"))
  279. console.log("打印数据", this.tableData)
  280. document.title = "粮食检斤单"
  281. window.print()
  282. window.onafterprint = function(event) {
  283. window.history.back(-1)
  284. };
  285. },
  286. watch: {}
  287. })
  288. </script>
  289. </html>