outWeightPrint.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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. .number {
  9. width: 50%;
  10. text-align: right;
  11. margin: 0 0 10px 0;
  12. }
  13. .No {
  14. width: 50%;
  15. text-align: left;
  16. }
  17. .title {
  18. text-align: center;
  19. font-size: 28px;
  20. font-weight: 600;
  21. }
  22. .title_top {
  23. display: flex
  24. }
  25. table,
  26. table tr th,
  27. table tr td {
  28. border: 2px solid #333333;
  29. padding: 5px 0;
  30. }
  31. table {
  32. width: 100%;
  33. min-height: 25px;
  34. line-height: 25px;
  35. text-align: center;
  36. border-collapse: collapse;
  37. border: 3px solid #333333;
  38. }
  39. .col-bgc {
  40. background: #f6f7fb;
  41. }
  42. .bottom-row1 {
  43. display: flex;
  44. margin: 10px 0;
  45. }
  46. .bottom-row2 {
  47. display: flex;
  48. margin: 10px 0;
  49. }
  50. img {
  51. width: 120px;
  52. height: 120px;
  53. margin-right: 118px;
  54. }
  55. .config {
  56. margin-top: 20px;
  57. width: 30%;
  58. min-width: 200px;
  59. }
  60. .autograph {
  61. margin-top: 20px;
  62. width: 30%;
  63. min-width: 200px;
  64. }
  65. .bottom-row3 {
  66. margin: 10px 0;
  67. }
  68. .bottom-row4 {
  69. margin-top: 50px;
  70. text-align: center;
  71. }
  72. .small-content {
  73. width: 400px;
  74. margin: 0 auto;
  75. border: 1px solid #ccc;
  76. padding: 20px 20px 160px 20px;
  77. position: absolute;
  78. top: 0;
  79. bottom: 0;
  80. left: 0;
  81. right: 0;
  82. margin: auto;
  83. height: 650px;
  84. margin-top: 20px;
  85. }
  86. .small-title {
  87. text-align: center;
  88. font-size: 18px;
  89. display: flex;
  90. justify-content: space-between;
  91. align-items: center;
  92. }
  93. .small-row {
  94. display: flex;
  95. justify-content: space-between;
  96. margin: 10px;
  97. }
  98. .listName{
  99. font-size: 22px;
  100. font-weight: 600;
  101. margin-top: 20px;
  102. }
  103. .img_css{
  104. width: 70px;
  105. height: 70px;
  106. margin-right: 0px;
  107. }
  108. </style>
  109. </head>
  110. <body>
  111. <div id="app">
  112. <div v-if="bigContent">
  113. <div class="title">出库检斤单</div>
  114. <div class="title_top">
  115. <div class="No" v-if="tableData.contractNo">{{tableData.contractNo}}</div>
  116. <div class="No" else>{{tableData.moveTaskNo}}</div>
  117. <div class="number">{{tableData.number}}</div>
  118. </div>
  119. <table class="table">
  120. <tr class="row">
  121. <td class="col col-bgc">收货单位</td>
  122. <td class="col" colspan="2">{{tableData.customer?tableData.customer:(tableData.contractManagement?tableData.contractManagement.buyer:"")}}</td>
  123. <td class="col col-bgc">客户电话</td>
  124. <td class="col">{{tableData.contractManagement?tableData.contractManagement.buyerPhone:""}}</td>
  125. <td class="col col-bgc">车牌号</td>
  126. <td class="col" colspan="2">{{tableData.carNumber}}</td>
  127. </tr>
  128. <tr class="row">
  129. <td class="col col-bgc">出库单位</td>
  130. <td class="col" colspan="2">{{tableData.contractManagement?tableData.contractManagement.seller:tableData.compName}}</td>
  131. <td class="col col-bgc">联系人</td>
  132. <td class="col">{{tableData.person}}</td>
  133. <td class="col col-bgc">联系电话</td>
  134. <td class="col" colspan="2">{{tableData.personPhone}}</td>
  135. </tr>
  136. <tr class="row">
  137. <td class="col col-bgc">货名</td>
  138. <td class="col">{{tableData.goodsName}}</td>
  139. <td class="col col-bgc">类型</td>
  140. <td class="col">{{tableData.type}}</td>
  141. <td class="col col-bgc">容量(克/升)</td>
  142. <td class="col">{{tableData.qualityInspectionManagement ?
  143. tableData.qualityInspectionManagement.bulkDensity:""}}</td>
  144. <!-- <td class="col col-bgc">不完善粒(%)</td>
  145. <td class="col">{{tableData.qualityInspectionManagement ?tableData.qualityInspectionManagement.imperfectGrain:""}}</td> -->
  146. <td class="col col-bgc">水分(%)</td>
  147. <td class="col">{{ tableData.qualityInspectionManagement ? tableData.qualityInspectionManagement.waterContent:""}}</td>
  148. </tr>
  149. <tr class="row">
  150. <td class="col col-bgc">等级</td>
  151. <td class="col">{{tableData.qualityInspectionManagement ?
  152. tableData.qualityInspectionManagement.grade:""}}</td>
  153. <td class="col col-bgc">热损伤(%)</td>
  154. <td class="col">{{tableData.qualityInspectionManagement ?
  155. tableData.qualityInspectionManagement.jiaorenli:""}}</td>
  156. <td class="col col-bgc">杂质(%)</td>
  157. <td class="col">{{ tableData.qualityInspectionManagement ?
  158. tableData.qualityInspectionManagement.impurity:""}}</td>
  159. <td class="col col-bgc">扣杂</td>
  160. <td class="col">{{tableData.qualityInspectionManagement ?
  161. tableData.qualityInspectionManagement.buckleMiscellaneous:""}}</td>
  162. </tr>
  163. <!-- <tr class="row">
  164. <td class="col col-bgc">杂质(%)</td>
  165. <td class="col">{{ tableData.qualityInspectionManagement ?
  166. tableData.qualityInspectionManagement.impurity:""}}</td>
  167. <td class="col col-bgc">霉变粒(%)</td>
  168. <td class="col">{{tableData.qualityInspectionManagement ?
  169. tableData.qualityInspectionManagement.mildewGrain:""}}</td>
  170. <td class="col col-bgc">扣杂</td>
  171. <td class="col">{{tableData.qualityInspectionManagement ?
  172. tableData.qualityInspectionManagement.buckleMiscellaneous:""}}</td>
  173. <td class="col" colspan="2"></td>
  174. </tr> -->
  175. <tr class="row">
  176. <td class="col col-bgc">毛重(公斤)</td>
  177. <td class="col">{{tableData.grossWeight}}</td>
  178. <td class="col col-bgc">皮重(公斤)</td>
  179. <td class="col">{{tableData.tare}}</td>
  180. <td class="col col-bgc">扣重(公斤)</td>
  181. <td class="col">{{tableData.buckleMiscellaneous}}</td>
  182. <td class="col col-bgc">净重(公斤)</td>
  183. <td class="col">{{tableData.netWeight}}</td>
  184. </tr>
  185. <tr class="row">
  186. <td class="col col-bgc">箱号-1</td>
  187. <td class="col">{{tableData.boxNo}}</td>
  188. <td class="col col-bgc">箱号-2</td>
  189. <td class="col">{{tableData.boxNoOther}}</td>
  190. <td class="col col-bgc">封号-1</td>
  191. <td class="col">{{tableData.titleNo}}</td>
  192. <td class="col col-bgc">封号-2</td>
  193. <td class="col">{{tableData.titleNoOther}}</td>
  194. </tr>
  195. <tr class="row">
  196. <td class="col col-bgc" colspan="2">毛重检斤时间</td>
  197. <td class="col" colspan="2">{{tableData.grossDate}}</td>
  198. <td class="col col-bgc" colspan="2"> 皮重检斤时间</td>
  199. <td class="col" colspan="2">{{tableData.tareDate}}</td>
  200. </tr>
  201. </table>
  202. <div class="bottom">
  203. <div class="bottom-row1">
  204. <div>毛检:{{tableData.secretaryWeigher}}</div>
  205. <div style="margin-left:60px">皮检:{{tableData.skinInspector}}</div>
  206. <!-- <div>{{tableData.qualityDate}}</div> -->
  207. </div>
  208. <div class="bottom-row2">
  209. <div class="left">
  210. <img :src="tableData.codeUrl" alt="" />
  211. </div>
  212. <div class="config">收货单位签名或盖章:</div>
  213. <div class="autograph">客户签名:</div>
  214. <div class="autograph">司机签名:</div>
  215. </div>
  216. </div>
  217. </div>
  218. <div class="small-content" v-if="smallContent">
  219. <div class="small-row">
  220. <div class="listName">出库检斤单</div>
  221. <img :src="tableData.codeUrl" alt="" class="img_css" />
  222. </div>
  223. <div class="small-row" v-if="tableData.number">
  224. <div>业务编号</div>
  225. <div>{{tableData.number}}</div>
  226. </div>
  227. <div class="small-row" else>
  228. <div>移库任务编号</div>
  229. <div>{{tableData.moveTaskNo}}</div>
  230. </div>
  231. <div class="small-row">
  232. <div>收货单位</div>
  233. <div v-if="tableData.number">{{tableData.contractManagement?tableData.contractManagement.buyer:""}}</div>
  234. <div else>{{tableData.compName}}</div>
  235. </div>
  236. <div class="small-row">
  237. <div>车牌号</div>
  238. <div>{{tableData.carNumber}}</div>
  239. </div>
  240. <div class="small-row">
  241. <div>出库单位</div>
  242. <div>{{tableData.contractManagement?tableData.contractManagement.seller:tableData.compName}}</div>
  243. </div>
  244. <div class="small-row">
  245. <div>联系人</div>
  246. <div>{{tableData.person}}</div>
  247. </div>
  248. <div class="small-row">
  249. <div>联系电话</div>
  250. <div>{{tableData.personPhone}}</div>
  251. </div>
  252. <div class="small-row">
  253. <div>货名</div>
  254. <div>{{tableData.goodsName}}</div>
  255. </div>
  256. <div class="small-row">
  257. <div>类型</div>
  258. <div>{{tableData.type}}</div>
  259. </div>
  260. <div class="small-row">
  261. <div>毛重(公斤)</div>
  262. <div>{{tableData.grossWeight}}</div>
  263. </div>
  264. <div class="small-row">
  265. <div>毛检时间</div>
  266. <div>{{tableData.grossDate}}</div>
  267. </div>
  268. <div class="small-row">
  269. <div>皮重(公斤</div>
  270. <div>{{tableData.tare}}</div>
  271. </div>
  272. <div class="small-row">
  273. <div>皮检时间</div>
  274. <div>{{tableData.tareDate}}</div>
  275. </div>
  276. <div class="small-row">
  277. <div>扣重(公斤)</div>
  278. <div>{{tableData.buckleMiscellaneous}}</div>
  279. </div>
  280. <div class="small-row">
  281. <div>净重(公斤)</div>
  282. <div>{{tableData.netWeight}}</div>
  283. </div>
  284. <div class="small-row">
  285. <div>发货单位签名或盖章:</div>
  286. </div>
  287. <div class="small-row">
  288. <div>客户签名:</div>
  289. </div>
  290. </div>
  291. </div>
  292. </body>
  293. <script src="../cdn/vue/2.6.10/vue.min.js"></script>
  294. <script src="../cdn/element-ui/2.13.2/index.js"></script>
  295. <script type="text/javascript">
  296. new Vue({
  297. el: '#app',
  298. data: {
  299. tableData: {
  300. // qualityInspectionManagement:{}
  301. },
  302. name: "",
  303. bigContent: false,
  304. smallContent: false
  305. },
  306. computed: {},
  307. methods: {
  308. tableRowClassName({
  309. row,
  310. rowIndex
  311. }) {
  312. if (rowIndex === 1) {
  313. return 'warning-row';
  314. } else if (rowIndex === 3) {
  315. return 'success-row';
  316. }
  317. return '';
  318. },
  319. getQueryVariable(variable) {
  320. var query = window.location.search.substring(1);
  321. var vars = query.split("&");
  322. for (var i = 0; i < vars.length; i++) {
  323. var pair = vars[i].split("=");
  324. if (pair[0] == variable) {
  325. return pair[1];
  326. }
  327. }
  328. return (false);
  329. },
  330. printSmall() { },
  331. printBig() { },
  332. },
  333. mounted() {
  334. let _data = JSON.parse(localStorage.getItem('ck_bd_printData1'))
  335. let _type = this.getQueryVariable("type")
  336. if (_type == 2) {
  337. this.bigContent = true
  338. this.smallContent = false
  339. } else {
  340. this.smallContent = true
  341. this.bigContent = false
  342. }
  343. console.log(_data, "sddsd")
  344. this.tableData = _data
  345. console.log(this.tableData)
  346. document.title = "粮食检斤单"
  347. window.print()
  348. window.onafterprint = function (event) {
  349. window.history.back(-1)
  350. };
  351. },
  352. watch: {}
  353. })
  354. </script>
  355. </html>