home_detail.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. <template>
  2. <div class="detail-container">
  3. <div v-show="!isShowPrint">
  4. <el-page-header @back="goBack" content="详情"></el-page-header>
  5. <div class="main-title">
  6. <div class="title">发货单信息</div>
  7. </div>
  8. <div class="diy-table-1">
  9. <el-row :gutter="0">
  10. <el-col :span="8" class="item">
  11. <div class="label">发货单号</div>
  12. <div class="value">{{detailData.id}}</div>
  13. </el-col>
  14. <el-col :span="8" class="item">
  15. <div class="label">发货日期</div>
  16. <div class="value">{{detailData.orderTime}}</div>
  17. </el-col>
  18. <el-col :span="8" class="item">
  19. <div class="label">单据状态</div>
  20. <div class="value">{{detailData.examineStatus | statusFilter}}</div>
  21. </el-col>
  22. <el-col :span="8" class="item">
  23. <div class="label">发货申请单号</div>
  24. <div class="value">{{detailData.id}}</div>
  25. </el-col>
  26. <el-col :span="8" class="item">
  27. <div class="label">订单类型</div>
  28. <div class="value">{{detailData.orderType | orderTypeFilter}}</div>
  29. </el-col>
  30. <el-col :span="8" class="item">
  31. <div class="label">工程订单号</div>
  32. <div class="value">{{detailData.enginOrderNo}}</div>
  33. </el-col>
  34. <el-col :span="8" class="item">
  35. <div class="label">经销商编码</div>
  36. <div class="value">{{detailData.customerNumber}}</div>
  37. </el-col>
  38. <el-col :span="16" class="item">
  39. <div class="label">经销商名称</div>
  40. <div class="value">{{detailData.customerName}}</div>
  41. </el-col>
  42. <el-col :span="8" class="item">
  43. <div class="label">工程编号</div>
  44. <div class="value">{{detailData.refEnginRecordNo}}</div>
  45. </el-col>
  46. <el-col :span="8" class="item">
  47. <div class="label">厂工程编码</div>
  48. <div class="value">{{detailData.refFactoryNo}}</div>
  49. </el-col>
  50. <el-col :span="8" class="item">
  51. <div class="label">项目名称</div>
  52. <div class="value">{{detailData.refProjectName}}</div>
  53. </el-col>
  54. <el-col :span="8" class="item">
  55. <div class="label">仓库</div>
  56. <div class="value">{{detailData.correspondName}}</div>
  57. </el-col>
  58. <el-col :span="8" class="item">
  59. <div class="label">税率</div>
  60. <div class="value">{{detailData.tax}}</div>
  61. </el-col>
  62. <el-col :span="8" class="item">
  63. <div class="label">发票号</div>
  64. <div class="value">{{detailData.billNumber}}</div>
  65. </el-col>
  66. <el-col :span="16" class="item">
  67. <div class="label">备注</div>
  68. <div class="value">{{detailData.remark}}</div>
  69. </el-col>
  70. <el-col :span="8" class="item">
  71. <div class="label">币种</div>
  72. <div class="value">{{detailData.currency}}</div>
  73. </el-col>
  74. <el-col :span="8" class="item">
  75. <div class="label">外仓印刷单号</div>
  76. <div class="value">{{detailData.printingSheet}}</div>
  77. </el-col>
  78. <el-col :span="8" class="item">
  79. <div class="label">制单人</div>
  80. <div class="value">{{detailData.createBy}}</div>
  81. </el-col>
  82. <el-col :span="8" class="item">
  83. <div class="label">制单日期</div>
  84. <div class="value">{{detailData.createTime}}</div>
  85. </el-col>
  86. <el-col :span="16" class="item">
  87. <div class="label">文件编号</div>
  88. <div class="value">{{detailData.fileNumber}}</div>
  89. </el-col>
  90. <el-col :span="8" class="item">
  91. <div class="label">出库日期</div>
  92. <div class="value">{{detailData.outTime}}</div>
  93. </el-col>
  94. <el-col :span="8" class="item">
  95. <div class="label">审核人</div>
  96. <div class="value">{{detailData.approvalName}}</div>
  97. </el-col>
  98. <el-col :span="8" class="item">
  99. <div class="label">审核日期</div>
  100. <div class="value">{{detailData.approvalTime}}</div>
  101. </el-col>
  102. <el-col :span="8" class="item">
  103. <div class="label">开票日期</div>
  104. <div class="value">{{detailData.billTime}}</div>
  105. </el-col>
  106. </el-row>
  107. </div>
  108. <div class="main-title">
  109. <div class="title">货品信息</div>
  110. </div>
  111. <div class="table">
  112. <el-table
  113. :data="detailData.invoicePickBeans"
  114. element-loading-text="Loading"
  115. border
  116. fit
  117. highlight-current-row
  118. stripe
  119. show-summary
  120. :summary-method="$getSummaries">
  121. <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
  122. <el-table-column align="center" label="订单号" prop="enginOrderNo" min-width="180" show-overflow-tooltip></el-table-column>
  123. <el-table-column align="center" label="销售类型" prop="saleTypeName" min-width="160" show-overflow-tooltip></el-table-column>
  124. <el-table-column align="center" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip></el-table-column>
  125. <el-table-column align="center" label="产品编码" prop="materialOldNumber" min-width="120" show-overflow-tooltip></el-table-column>
  126. <el-table-column align="center" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
  127. <el-table-column align="center" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
  128. <el-table-column align="center" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
  129. <el-table-column align="right" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>
  130. <el-table-column align="right" label="未出库数量" prop="notOutNumber" min-width="100" show-overflow-tooltip></el-table-column>
  131. <el-table-column align="right" label="含税单价" prop="price" min-width="100" show-overflow-tooltip>
  132. <template slot-scope="scope">
  133. {{scope.row.price | numToFixed}}
  134. </template>
  135. </el-table-column>
  136. <el-table-column align="right" label="无税单价" prop="afterTaxPrice" min-width="100" show-overflow-tooltip>
  137. <template slot-scope="scope">
  138. {{scope.row.afterTaxPrice | numToFixed}}
  139. </template>
  140. </el-table-column>
  141. <el-table-column align="right" label="价税合计" prop="payAmount" min-width="100" show-overflow-tooltip>
  142. <template slot-scope="scope">
  143. {{scope.row.payAmount | numToFixed}}
  144. </template>
  145. </el-table-column>
  146. <el-table-column align="right" label="税率" prop="tax" min-width="100" show-overflow-tooltip></el-table-column>
  147. <el-table-column align="right" label="折扣额" prop="totalDiscAmount" min-width="100" show-overflow-tooltip>
  148. <template slot-scope="scope">
  149. {{scope.row.totalDiscAmount | numToFixed}}
  150. </template>
  151. </el-table-column>
  152. <el-table-column align="right" label="折扣后单价" prop="singlePayPrice" min-width="100" show-overflow-tooltip>
  153. <template slot-scope="scope">
  154. {{scope.row.singlePayPrice | numToFixed}}
  155. </template>
  156. </el-table-column>
  157. <el-table-column align="center" label="退补标记" prop="refundStatus" min-width="100" show-overflow-tooltip>
  158. <template slot-scope="scope">
  159. {{scope.row.refundStatus | refundStatusFilter}}
  160. </template>
  161. </el-table-column>
  162. <el-table-column align="left" label="订单备注" prop="headerRemark" min-width="160" show-overflow-tooltip></el-table-column>
  163. <el-table-column align="left" label="发货申请备注" prop="remark" min-width="160" show-overflow-tooltip></el-table-column>
  164. <el-table-column align="left" label="表体备注" prop="invoiceRemark" min-width="160" show-overflow-tooltip></el-table-column>
  165. <el-table-column align="left" label="业务员" prop="serviceName" min-width="100" show-overflow-tooltip></el-table-column>
  166. </el-table>
  167. </div>
  168. <div class="page-footer">
  169. <div class="footer">
  170. <el-button type="primary" icon="el-icon-printer" @click="toPrint" v-if="$checkBtnRole('print', $route.meta.roles)">打 印</el-button>
  171. <el-popconfirm title="确定关闭吗?" @onConfirm="goBack" style="margin-left: 10px;">
  172. <el-button slot="reference">关 闭</el-button>
  173. </el-popconfirm>
  174. </div>
  175. </div>
  176. </div>
  177. <print-preview ref="preView" />
  178. <!-- <CommonPrint :printId="printId" :printType="printType" v-if="isShowPrint" @backDetail="backDetail" /> -->
  179. </div>
  180. </template>
  181. <script>
  182. import { disAutoConnect, hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
  183. disAutoConnect();
  184. import panel from '../../apply/components/design/panel'
  185. import { getDetail, detailArr } from '../../apply/components/design/print-data'
  186. import printPreview from '../../apply/components/design/preview.vue'
  187. import { getEnginDetail } from "@/api/supply/deliver";
  188. import CommonPrint from "@/views/supply/deliver/components/common_print";
  189. export default {
  190. name: 'HomeDetail',
  191. componentName: 'HomeDetail',
  192. props: ['listItem'],
  193. components: {
  194. CommonPrint,printPreview
  195. },
  196. filters: {
  197. statusFilter(val) {
  198. const statusList = [
  199. { label: '已保存', value: 'SAVE' },
  200. { label: '待审核', value: 'WAIT' },
  201. { label: '审核通过', value: 'OK' },
  202. // { label: '审核驳回', value: 'FAIL' },,
  203. ]
  204. let obj = statusList.find(o => o.value == val);
  205. return obj ? obj.label : ''
  206. },
  207. orderTypeFilter(val) {
  208. const MAP = {
  209. 1: '零售订单',
  210. 2: '家用工程订单',
  211. 3: '商用工程订单',
  212. }
  213. return MAP[val];
  214. },
  215. refundStatusFilter(val) {
  216. const MAP = {
  217. 1: '正常',
  218. }
  219. return MAP[val];
  220. }
  221. },
  222. data() {
  223. return {
  224. detailData: {},
  225. printType: 2,
  226. printId: '',
  227. isShowPrint: false,
  228. curPaper: {
  229. type: 'A5',
  230. width: 500,
  231. height: 147.6
  232. },
  233. paperTypes: {
  234. 'A3': {
  235. width: 420,
  236. height: 296.6
  237. },
  238. 'A4': {
  239. width: 210,
  240. height: 296.6
  241. },
  242. 'A5': {
  243. width: 210,
  244. height: 147.6
  245. },
  246. 'B3': {
  247. width: 500,
  248. height: 352.6
  249. },
  250. 'B4': {
  251. width: 250,
  252. height: 352.6
  253. },
  254. 'B5': {
  255. width: 250,
  256. height: 175.6
  257. }
  258. },
  259. scaleValue: 1,
  260. scaleMax: 5,
  261. scaleMin: 0.5,
  262. hiprintTemplate:'',
  263. }
  264. },
  265. computed:{
  266. curPaperType() {
  267. let type = 'other'
  268. let types = this.paperTypes
  269. for (const key in types) {
  270. let item = types[key]
  271. let { width, height } = this.curPaper
  272. if (item.width === width && item.height === height) {
  273. type = key
  274. }
  275. }
  276. return type
  277. }
  278. },
  279. // activated(){
  280. // this.initPrint()
  281. // },
  282. mounted() {
  283. this.initPrint()
  284. },
  285. created() {
  286. this.getDetail();
  287. },
  288. methods: {
  289. // 返回列表
  290. goBack() {
  291. this.$emit('backListFormDetail');
  292. },
  293. initPrint(){
  294. hiprint.init({
  295. providers: [new defaultElementTypeProvider()]
  296. });
  297. // 还原配置
  298. hiprint.setConfig()
  299. // 替换配置
  300. hiprint.setConfig({
  301. movingDistance: 2.5,
  302. text: {
  303. supportOptions: [
  304. {
  305. name: 'styler',
  306. hidden: true
  307. },
  308. {
  309. name: 'formatter',
  310. hidden: true
  311. },
  312. ]
  313. }
  314. })
  315. // eslint-disable-next-line no-undef
  316. hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
  317. this.hiprintTemplate = new hiprint.PrintTemplate({
  318. template: panel,
  319. settingContainer: '#PrintElementOptionSetting',
  320. paginationContainer: '.hiprint-printPagination'
  321. });
  322. this.hiprintTemplate.design('#hiprint-printTemplate');
  323. // 获取当前放大比例, 当zoom时传true 才会有
  324. // this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
  325. }
  326. ,
  327. // 获取详情
  328. getDetail() {
  329. getEnginDetail({id: this.listItem.id}).then(res => {
  330. if(res.data.invoicePickBeans) {
  331. res.data.invoicePickBeans.forEach(item => {
  332. item.notOutNumber = item.salesStatus ? 0 : item.refundableQty;
  333. item.sums1 = ['notOutNumber', 'refundableQty'];
  334. item.sums2 = ['price', 'afterTaxPrice', 'payAmount', 'totalDiscAmount', 'singlePayPrice'];
  335. })
  336. }
  337. this.detailData = res.data;
  338. })
  339. },
  340. // 点击打印
  341. toPrint() {
  342. this.printId = this.listItem.id;
  343. // this.isShowPrint = true;
  344. getDetail(this.listItem.id)
  345. this.$refs.preView.show(this.hiprintTemplate, detailArr)
  346. },
  347. backDetail() {
  348. this.printId = '';
  349. this.isShowPrint = false;
  350. },
  351. /**
  352. * 设置纸张大小
  353. * @param type [A3, A4, A5, B3, B4, B5, other]
  354. * @param value {width,height} mm
  355. */
  356. setPaper(type, value) {
  357. try {
  358. if (Object.keys(this.paperTypes).includes(type)) {
  359. this.curPaper = { type: type, width: value.width, height: value.height }
  360. this.hiprintTemplate.setPaper(value.width, value.height)
  361. } else {
  362. this.curPaper = { type: 'other', width: value.width, height: value.height }
  363. this.hiprintTemplate.setPaper(value.width, value.height)
  364. }
  365. } catch (error) {
  366. this.$message.error(`操作失败: ${error}`)
  367. }
  368. },
  369. }
  370. }
  371. </script>
  372. <style scoped lang="scss">
  373. .detail-container {
  374. width: 100%;
  375. height: 100%;
  376. }
  377. .main-title {
  378. display: flex;
  379. justify-content: space-between;
  380. align-items: center;
  381. margin-top: 30px;
  382. height: 60px;
  383. border-bottom: 1px solid #DCDFE6;
  384. margin-bottom: 20px;
  385. .title {
  386. font-size: 16px;
  387. font-weight: 600;
  388. padding-left: 10px;
  389. }
  390. }
  391. </style>