outWeightPrint.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  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">{{kehu}}</td> -->
  125. <td class="col">{{tableData.contractManagement?tableData.contractManagement.buyerPhone:""}}</td>
  126. <td class="col col-bgc">车牌号</td>
  127. <td class="col" colspan="2">{{tableData.carNumber}}</td>
  128. </tr>
  129. <tr class="row">
  130. <td class="col col-bgc">出库单位</td>
  131. <td class="col" colspan="2">{{tableData.contractManagement?tableData.contractManagement.seller:tableData.compName}}</td>
  132. <!-- <td class="col" colspan="2">{{tableData.contractManagement?tableData.contractManagement.seller:tableData.compName}}</td> -->
  133. <td class="col col-bgc">联系人</td>
  134. <!-- <td class="col">{{tableData.person}}</td> -->
  135. <td class="col">{{kehu}}</td>
  136. <td class="col col-bgc">联系电话</td>
  137. <td colspan="2" class="col">{{kehuphone}}</td>
  138. <!-- <td class="col" colspan="2">{{tableData.personPhone}}</td> -->
  139. </tr>
  140. <tr class="row">
  141. <td class="col col-bgc">货名</td>
  142. <td class="col">{{tableData.goodsName}}</td>
  143. <td class="col col-bgc">类型</td>
  144. <td class="col">{{tableData.type}}</td>
  145. <td class="col col-bgc">容重(克/升)</td>
  146. <td class="col">{{tableData.qualityInspectionManagement ?
  147. tableData.qualityInspectionManagement.bulkDensity:""}}</td>
  148. <!-- <td class="col col-bgc">不完善粒(%)</td>
  149. <td class="col">{{tableData.qualityInspectionManagement ?tableData.qualityInspectionManagement.imperfectGrain:""}}</td> -->
  150. <td class="col col-bgc">水分(%)</td>
  151. <td class="col">{{ tableData.qualityInspectionManagement ? tableData.qualityInspectionManagement.waterContent:""}}</td>
  152. </tr>
  153. <tr class="row">
  154. <td class="col col-bgc">等级</td>
  155. <td class="col">{{tableData.qualityInspectionManagement ?
  156. tableData.qualityInspectionManagement.grade:""}}</td>
  157. <td class="col col-bgc">热损伤(%)</td>
  158. <td class="col">{{tableData.qualityInspectionManagement ?
  159. tableData.qualityInspectionManagement.jiaorenli:""}}</td>
  160. <td class="col col-bgc">杂质(%)</td>
  161. <td class="col">{{ tableData.qualityInspectionManagement ?
  162. tableData.qualityInspectionManagement.impurity:""}}</td>
  163. <td class="col col-bgc">扣杂</td>
  164. <td class="col">{{tableData.qualityInspectionManagement ?
  165. tableData.qualityInspectionManagement.buckleMiscellaneous:""}}</td>
  166. </tr>
  167. <!-- <tr class="row">
  168. <td class="col col-bgc">杂质(%)</td>
  169. <td class="col">{{ tableData.qualityInspectionManagement ?
  170. tableData.qualityInspectionManagement.impurity:""}}</td>
  171. <td class="col col-bgc">霉变粒(%)</td>
  172. <td class="col">{{tableData.qualityInspectionManagement ?
  173. tableData.qualityInspectionManagement.mildewGrain:""}}</td>
  174. <td class="col col-bgc">扣杂</td>
  175. <td class="col">{{tableData.qualityInspectionManagement ?
  176. tableData.qualityInspectionManagement.buckleMiscellaneous:""}}</td>
  177. <td class="col" colspan="2"></td>
  178. </tr> -->
  179. <tr class="row">
  180. <td class="col col-bgc">毛重(公斤)</td>
  181. <td class="col">{{tableData.grossWeight}}</td>
  182. <td class="col col-bgc">皮重(公斤)</td>
  183. <td class="col">{{tableData.tare}}</td>
  184. <td class="col col-bgc">扣重(公斤)</td>
  185. <td class="col">{{tableData.buckleMiscellaneous}}</td>
  186. <td class="col col-bgc">净重(公斤)</td>
  187. <td class="col">{{tableData.netWeight}}</td>
  188. </tr>
  189. <tr class="row">
  190. <td class="col col-bgc">箱号-1</td>
  191. <td class="col">{{tableData.boxNo}}</td>
  192. <td class="col col-bgc">箱号-2</td>
  193. <td class="col">{{tableData.boxNoOther}}</td>
  194. <td class="col col-bgc">封号-1</td>
  195. <td class="col">{{tableData.titleNo}}</td>
  196. <td class="col col-bgc">封号-2</td>
  197. <td class="col">{{tableData.titleNoOther}}</td>
  198. </tr>
  199. <tr class="row">
  200. <td class="col col-bgc" colspan="2">毛重检斤时间</td>
  201. <td class="col" colspan="2">{{tableData.grossDate}}</td>
  202. <td class="col col-bgc" colspan="2"> 皮重检斤时间</td>
  203. <td class="col" colspan="2">{{tableData.tareDate}}</td>
  204. </tr>
  205. </table>
  206. <div class="bottom">
  207. <div class="bottom-row1">
  208. <div>毛检:{{tableData.secretaryWeigher}}</div>
  209. <div style="margin-left:60px">皮检:{{tableData.skinInspector}}</div>
  210. <!-- <div>{{tableData.qualityDate}}</div> -->
  211. </div>
  212. <div class="bottom-row2">
  213. <div class="left">
  214. <img :src="tableData.codeUrl" alt="" />
  215. </div>
  216. <div class="config">收货单位签名或盖章:</div>
  217. <div class="autograph">客户签名:</div>
  218. <div class="autograph">司机签名:</div>
  219. </div>
  220. </div>
  221. </div>
  222. <div class="small-content" v-if="smallContent">
  223. <div class="small-row">
  224. <div class="listName">出库检斤单</div>
  225. <img :src="tableData.codeUrl" alt="" class="img_css" />
  226. </div>
  227. <div class="small-row" v-if="tableData.number">
  228. <div>业务编号</div>
  229. <div>{{tableData.number}}</div>
  230. </div>
  231. <div class="small-row" else>
  232. <div>移库任务编号</div>
  233. <div>{{tableData.moveTaskNo}}</div>
  234. </div>
  235. <div class="small-row">
  236. <div>收货单位</div>
  237. <div v-if="tableData.number">{{tableData.contractManagement?tableData.contractManagement.buyer:""}}</div>
  238. <div else>{{tableData.compName}}</div>
  239. </div>
  240. <div class="small-row">
  241. <div>车牌号</div>
  242. <div>{{tableData.carNumber}}</div>
  243. </div>
  244. <div class="small-row">
  245. <div>出库单位</div>
  246. <div>{{tableData.contractManagement?tableData.contractManagement.seller:tableData.compName}}</div>
  247. </div>
  248. <div class="small-row">
  249. <div>联系人</div>
  250. <div>{{tableData.person}}</div>
  251. </div>
  252. <div class="small-row">
  253. <div>联系电话</div>
  254. <div>{{tableData.personPhone}}</div>
  255. </div>
  256. <div class="small-row">
  257. <div>货名</div>
  258. <div>{{tableData.goodsName}}</div>
  259. </div>
  260. <div class="small-row">
  261. <div>类型</div>
  262. <div>{{tableData.type}}</div>
  263. </div>
  264. <div class="small-row">
  265. <div>毛重(公斤)</div>
  266. <div>{{tableData.grossWeight}}</div>
  267. </div>
  268. <div class="small-row">
  269. <div>毛检时间</div>
  270. <div>{{tableData.grossDate}}</div>
  271. </div>
  272. <div class="small-row">
  273. <div>皮重(公斤</div>
  274. <div>{{tableData.tare}}</div>
  275. </div>
  276. <div class="small-row">
  277. <div>皮检时间</div>
  278. <div>{{tableData.tareDate}}</div>
  279. </div>
  280. <div class="small-row">
  281. <div>扣重(公斤)</div>
  282. <div>{{tableData.buckleMiscellaneous}}</div>
  283. </div>
  284. <div class="small-row">
  285. <div>净重(公斤)</div>
  286. <div>{{tableData.netWeight}}</div>
  287. </div>
  288. <div class="small-row">
  289. <div>发货单位签名或盖章:</div>
  290. </div>
  291. <div class="small-row">
  292. <div>客户签名:</div>
  293. </div>
  294. </div>
  295. </div>
  296. </body>
  297. <script src="../cdn/vue/2.6.10/vue.min.js"></script>
  298. <script src="../cdn/element-ui/2.13.2/index.js"></script>
  299. <script type="text/javascript">
  300. new Vue({
  301. el: '#app',
  302. data: {
  303. tableData: {
  304. // qualityInspectionManagement:{}
  305. },
  306. kehu:'',
  307. kehuphone:'',
  308. name: "",
  309. bigContent: false,
  310. smallContent: false
  311. },
  312. computed: {},
  313. methods: {
  314. tableRowClassName({
  315. row,
  316. rowIndex
  317. }) {
  318. if (rowIndex === 1) {
  319. return 'warning-row';
  320. } else if (rowIndex === 3) {
  321. return 'success-row';
  322. }
  323. return '';
  324. },
  325. getQueryVariable(variable) {
  326. var query = window.location.search.substring(1);
  327. var vars = query.split("&");
  328. for (var i = 0; i < vars.length; i++) {
  329. var pair = vars[i].split("=");
  330. if (pair[0] == variable) {
  331. return pair[1];
  332. }
  333. }
  334. return (false);
  335. },
  336. printSmall() { },
  337. printBig() { },
  338. },
  339. mounted() {
  340. this.kehu=JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffName
  341. this.kehuphone=JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffMobilePhone
  342. let _data = JSON.parse(localStorage.getItem('ck_bd_printData1'))
  343. let _type = this.getQueryVariable("type")
  344. if (_type == 2) {
  345. this.bigContent = true
  346. this.smallContent = false
  347. } else {
  348. this.smallContent = true
  349. this.bigContent = false
  350. }
  351. console.log(_data, "sddsd")
  352. this.tableData = _data
  353. console.log(this.tableData)
  354. document.title = "粮食检斤单"
  355. window.print()
  356. window.onafterprint = function (event) {
  357. window.history.back(-1)
  358. };
  359. },
  360. watch: {}
  361. })
  362. </script>
  363. </html>