purchaseOrderPrint.vue 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. <template>
  2. <div class="main-contain">
  3. <div class="position">
  4. <bread-crumb :crumbs="crumbs"></bread-crumb>
  5. <el-row style="float: right">
  6. <el-col :span="24">
  7. <el-button
  8. size="small"
  9. icon="el-icon-printer"
  10. type="primary"
  11. @click="printAction"
  12. >打印</el-button
  13. >
  14. </el-col>
  15. </el-row>
  16. </div>
  17. <div class="app-container" style="background-color: white">
  18. <div id="print_content">
  19. <div class="print_main_content">
  20. <div class="order_title_panl">
  21. <div style="font-size: 22px; font-weight: bold">{{ orgName }}</div>
  22. <span style="font-weight: 500; font-size: 18px">购货单</span>
  23. </div>
  24. <div style="display: flex; justify-content: space-between">
  25. <div style="text-align: left; margin-bottom: 1px; font-size: 18px">
  26. 供应商:{{ getSupplyName(supplier_id) }}
  27. </div>
  28. <div style="margin-bottom: 1px; font-size: 18px">
  29. 单据日期:{{ rate_of_concession }}
  30. </div>
  31. <div style="margin-bottom: 1px; font-size: 18px">
  32. 单据编号:{{ number }}
  33. </div>
  34. <div style="margin-bottom: 1px; font-size: 18px">币别:RMB</div>
  35. </div>
  36. <div class="table_panel">
  37. <table class="table">
  38. <thead>
  39. <tr>
  40. <td style="line-height: 18px" width="80">序号</td>
  41. <td style="line-height: 18px" width="80">商品</td>
  42. <td style="line-height: 18px" width="80">单位</td>
  43. <td style="line-height: 18px" width="80">数量</td>
  44. <td style="line-height: 18px" width="80">购货单价</td>
  45. <td style="line-height: 18px" width="80">折扣率</td>
  46. <td style="line-height: 18px" width="80">折扣额</td>
  47. <td style="line-height: 18px" width="60">购物金额</td>
  48. <td style="line-height: 18px" width="80">仓库</td>
  49. </tr>
  50. </thead>
  51. <tbody>
  52. <tr v-for="(item, index) in tableList" :key="index">
  53. <td style="line-height: 18px">
  54. <span>{{ index + 1 }}</span>
  55. </td>
  56. <td style="line-height: 18px">
  57. <span>{{ item.name }}</span>
  58. </td>
  59. <td style="line-height: 18px">
  60. <span>{{ item.supply_unit }}</span>
  61. </td>
  62. <td style="line-height: 18px">
  63. <span>{{ item.count }}</span>
  64. </td>
  65. <td style="line-height: 18px">
  66. <span>{{ item.price }}</span>
  67. </td>
  68. <td style="line-height: 18px">
  69. <span>{{ rate_of_concession }}</span>
  70. </td>
  71. <td style="line-height: 18px">
  72. <span>{{ discount_amount }}</span>
  73. </td>
  74. <td style="line-height: 18px">
  75. <span>{{ (item.count * item.price).toFixed(2) }}</span>
  76. </td>
  77. <td style="line-height: 18px"><span></span></td>
  78. </tr>
  79. <tr>
  80. <td>合计</td>
  81. <td colspan="12" style="text-align: right"></td>
  82. </tr>
  83. </tbody>
  84. </table>
  85. <!-- <div style="margin-top: 1px">
  86. <div style="width: 100px">折扣额:</div>
  87. <div style="width: 100px"></div>
  88. <div style="width: 100px">折扣金额:</div>
  89. <div style="width: 100px"><span></span></div>
  90. <div style="width: 100px">本次付款:</div>
  91. <div style="width: 100px"><span></span></div>
  92. <div style="width: 100px">本次欠款:</div>
  93. <div style="width: 100px"></div>
  94. </div>
  95. <div style="margin-top: 1px">
  96. <div style="width: 100px">备注</div>
  97. <div style="width: 100px"></div>
  98. </div>
  99. <div style="margin-top: 1px">
  100. <div style="width: 100px">制单人:</div>
  101. <div style="width: 100px"></div>
  102. <div style="width: 100px">收货人签字:</div>
  103. <div style="width: 100px"><span></span></div>
  104. <div style="width: 100px">供应商签字:</div>
  105. <div style="width: 100px"><span></span></div>
  106. </div> -->
  107. </div>
  108. <div
  109. style="
  110. width: 100%;
  111. display: flex;
  112. flex: 1;
  113. justify-content: flex-start;
  114. flex-wrap: wrap;
  115. "
  116. >
  117. <div
  118. style="
  119. width: 25%;
  120. text-align: left;
  121. margin-bottom: 1px;
  122. font-size: 18px;
  123. "
  124. >
  125. 供应商:
  126. </div>
  127. <div
  128. style="
  129. width: 25%;
  130. text-align: left;
  131. margin-bottom: 1px;
  132. font-size: 18px;
  133. "
  134. >
  135. 折扣金额:
  136. </div>
  137. <div
  138. style="
  139. width: 25%;
  140. text-align: left;
  141. margin-bottom: 1px;
  142. font-size: 18px;
  143. "
  144. >
  145. 本次付款:
  146. </div>
  147. <div
  148. style="
  149. width: 25%;
  150. text-align: left;
  151. margin-bottom: 1px;
  152. font-size: 18px;
  153. "
  154. >
  155. 本次欠款:
  156. </div>
  157. <div
  158. style="
  159. width: 100%;
  160. text-align: left;
  161. margin-bottom: 1px;
  162. font-size: 18px;
  163. "
  164. >
  165. 备注:
  166. </div>
  167. <div
  168. style="
  169. width: 25%;
  170. text-align: left;
  171. margin-bottom: 1px;
  172. font-size: 18px;
  173. "
  174. >
  175. 制单人:
  176. </div>
  177. <div
  178. style="
  179. width: 25%;
  180. text-align: left;
  181. margin-bottom: 1px;
  182. font-size: 18px;
  183. "
  184. >
  185. 收货人签字:
  186. </div>
  187. <div
  188. style="
  189. width: 25%;
  190. text-align: left;
  191. margin-bottom: 1px;
  192. font-size: 18px;
  193. "
  194. >
  195. 供应商签字:
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </template>
  203. <script>
  204. import BreadCrumb from "@/xt_pages/components/bread-crumb";
  205. import { fetchAllAdminUsers } from "@/api/doctor";
  206. import { getPurchaseOrderDetail } from "@/api/supply";
  207. import print from "print-js";
  208. import { getLodop } from "@/assets/LodopFuncs";
  209. const moment = require("moment");
  210. import { uParseTime } from "@/utils/tools";
  211. export default {
  212. components: {
  213. BreadCrumb,
  214. },
  215. data() {
  216. return {
  217. size: "medium ",
  218. crumbs: [
  219. { path: false, name: "库存管理" },
  220. { path: false, name: "耗材管理" },
  221. { path: false, name: "入库单打印" },
  222. ],
  223. isEdit: 0,
  224. checked: false,
  225. signAndWeighBoxPatients: "sign-and-weigh-box-patients",
  226. time_now: moment(new Date()).add("year", 0).format("YYYY-MM-DD"),
  227. orgName: "",
  228. orgId: "",
  229. adminUserOptions: [],
  230. tableList: [],
  231. number: "",
  232. id: "",
  233. supplier_id: "",
  234. rate_of_concession: "",
  235. discount_amount: "",
  236. supplyList: [],
  237. document_date: "",
  238. };
  239. },
  240. methods: {
  241. printAction: function () {
  242. const style =
  243. "@media print { .print_main_content { background-color: white; width:960px; margin:0 auto; padding: 0 0 20px 0; } .order_title_panl { text-align: center; } .main_title { font-size: 18px; line-height: 40px; font-weight: 500; } .table_panel { } .table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } thead tr td { border: 1px solid; text-align: center; font-size: 14px; padding: 1px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 12px; padding: 10px 5px; white-space: pre-line;} .proj { padding: 5px 0; text-align: left; } .proj_title { font-size: 16px; font-weight: 500; line-height: 25px; } .proj_item { font-size: 15px; line-height: 20px; } .zone_name { font-weight: 500; } }";
  244. printJS({
  245. printable: "print_content",
  246. type: "html",
  247. documentTitle: " ",
  248. style: style,
  249. scanStyles: false,
  250. });
  251. },
  252. // 打印功能
  253. btnClickPrint: function () {
  254. let LODOP = getLodop(); //调用getLodop获取LODOP对象
  255. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整页缩放打印输出");
  256. LODOP.ADD_PRINT_BARCODE(15, 15, 300, 300, "QRCode", "xxxxxxxxxxxxx");
  257. LODOP.SET_PRINT_STYLEA(0, "Stretch", 1); //(可变形)扩展缩放模式
  258. LODOP.PREVIEW(); //预览(预览打印无脚标)
  259. // LODOP.PRINT(); //打印
  260. LODOP.RINT_DESIGN();
  261. },
  262. getTime(val) {
  263. if (val < 0) {
  264. return "";
  265. }
  266. if (val == "") {
  267. return "";
  268. } else {
  269. return uParseTime(val, "{y}-{m}-{d}");
  270. }
  271. },
  272. fetchAllAdminUsers() {
  273. fetchAllAdminUsers().then((response) => {
  274. if (response.data.state == 1) {
  275. this.adminUserOptions = response.data.data.users;
  276. }
  277. });
  278. },
  279. getXuserName(id) {
  280. if (id <= 0) {
  281. return "";
  282. }
  283. var name = "";
  284. if (
  285. this.adminUserOptions == null ||
  286. typeof this.adminUserOptions.length === "undefined"
  287. ) {
  288. return name;
  289. }
  290. var leng = this.adminUserOptions.length;
  291. if (leng == 0) {
  292. return name;
  293. }
  294. for (let index = 0; index < leng; index++) {
  295. if (this.adminUserOptions[index].id == id) {
  296. name = this.adminUserOptions[index].name;
  297. break;
  298. }
  299. }
  300. return name;
  301. },
  302. getPurchaseOrderDetail() {
  303. var id = this.$route.query.id;
  304. getPurchaseOrderDetail(id).then((response) => {
  305. if (response.data.state == 1) {
  306. var info = response.data.data.info;
  307. this.is_check = info.is_check;
  308. this.number = info.number;
  309. this.id = info.id;
  310. this.supplier_id = info.supplier_id;
  311. this.rate_of_concession = info.rate_of_concession;
  312. this.discount_amount = info.discount_amount;
  313. this.document_date = info.document_date;
  314. var orderInfo = response.data.data.orderInfo;
  315. var supplyList = response.data.data.supplyList;
  316. this.supplyList = supplyList;
  317. for (let i = 0; i < orderInfo.length; i++) {
  318. orderInfo[i].supply_count = orderInfo[i].count;
  319. orderInfo[i].supply_price = orderInfo[i].price;
  320. orderInfo[i].supply_remake = orderInfo[i].remark;
  321. orderInfo[i].type = orderInfo[i].is_source;
  322. orderInfo[i].project_id = orderInfo[i].project_id;
  323. }
  324. console.log("orderINFO23323232", orderInfo);
  325. this.tableList = orderInfo;
  326. }
  327. });
  328. },
  329. getSupplyName(id) {
  330. var name = "";
  331. for (let i = 0; i < this.supplyList.length; i++) {
  332. if (id == this.supplyList[i].id) {
  333. name = this.supplyList[i].supplier_name;
  334. }
  335. }
  336. return name;
  337. },
  338. },
  339. created() {
  340. this.orgName = this.$store.getters.xt_user.org.org_name;
  341. this.orgId = this.$store.getters.xt_user.org.id;
  342. this.fetchAllAdminUsers();
  343. this.getPurchaseOrderDetail();
  344. },
  345. };
  346. </script>
  347. <style rel="stylesheet/scss" lang="scss" scoped>
  348. .print_main_content {
  349. background-color: white;
  350. max-width: 1500px;
  351. margin: 0 auto;
  352. padding: 0 0 20px 0;
  353. .order_title_panl {
  354. text-align: center;
  355. .main_title {
  356. font-size: 18px;
  357. line-height: 40px;
  358. font-weight: 500;
  359. }
  360. }
  361. .table_panel {
  362. .table {
  363. width: 100%;
  364. border: 1px solid;
  365. border-collapse: collapse;
  366. padding: 2px;
  367. thead {
  368. tr {
  369. td {
  370. border: 1px solid;
  371. text-align: center;
  372. font-size: 18px;
  373. padding: 1px 5px;
  374. }
  375. }
  376. }
  377. tbody {
  378. tr {
  379. td {
  380. border: 1px solid;
  381. text-align: center;
  382. font-size: 18px;
  383. padding: 10px 5px;
  384. white-space: pre-line;
  385. .proj {
  386. padding: 5px 0;
  387. text-align: left;
  388. .proj_title {
  389. font-size: 16px;
  390. font-weight: 500;
  391. line-height: 25px;
  392. }
  393. .proj_item {
  394. font-size: 15px;
  395. line-height: 20px;
  396. .zone_name {
  397. font-weight: 500;
  398. }
  399. }
  400. }
  401. }
  402. }
  403. }
  404. }
  405. }
  406. }
  407. .description {
  408. width: 100%;
  409. display: flex;
  410. flex: 1;
  411. justify-content: flex-start;
  412. flex-wrap: wrap;
  413. .content {
  414. width: 25%;
  415. text-align: left;
  416. margin-bottom: 1px;
  417. font-size: 18px;
  418. }
  419. .content_1 {
  420. width: 100%;
  421. text-align: left;
  422. margin-bottom: 1px;
  423. font-size: 18px;
  424. }
  425. // .content_2{
  426. // width: 33%;
  427. // }
  428. }
  429. </style>