outInDetialModal.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <a-drawer
  3. :zIndex="1010"
  4. title="出库明细"
  5. placement="right"
  6. :visible="isShow"
  7. width="80%"
  8. :get-container="false"
  9. :wrap-style="{ position: 'absolute' }"
  10. @close="isShow = false"
  11. wrapClassName="outIndetail-modal jg-drawer-wrap"
  12. >
  13. <a-spin :spinning="spinning" tip="Loading..." v-if="isShow">
  14. <div class="baseInfo" ref="searchBox" v-if="baseData">
  15. <div>
  16. <span>产品编码:{{ baseData.dealerProductEntity ? baseData.dealerProductEntity.code : baseData.productCode }}</span>
  17. </div>
  18. <div>
  19. <span>产品名称:{{ baseData.dealerProductEntity ? baseData.dealerProductEntity.name : baseData.productName }}</span>
  20. </div>
  21. </div>
  22. <div class="outIndetail-modal-table">
  23. <!-- 列表 -->
  24. <s-table
  25. class="sTable"
  26. ref="table"
  27. size="small"
  28. :rowKey="(record) => record.id"
  29. :columns="columns"
  30. :data="loadData"
  31. :scroll="{ y: tableHeight }"
  32. :defaultLoadData="false"
  33. :showPagination="false"
  34. bordered>
  35. </s-table>
  36. </div>
  37. </a-spin>
  38. </a-drawer>
  39. </template>
  40. <script>
  41. import { commonMixin } from '@/utils/mixin'
  42. import { STable } from '@/components'
  43. import { stockOutDetailList } from '@/api/stockOut'
  44. export default {
  45. name: 'OutinDetailModal',
  46. components: { STable },
  47. mixins: [commonMixin],
  48. props: {
  49. openModal: {
  50. // 弹框显示状态
  51. type: Boolean,
  52. default: false
  53. },
  54. outBizType: {
  55. type: String,
  56. default: ''
  57. }
  58. },
  59. data () {
  60. return {
  61. spinning: false,
  62. isShow: this.openModal, // 是否打开弹框
  63. tableHeight: 0,
  64. baseData: null,
  65. // 加载数据方法 必须为 Promise 对象
  66. loadData: parameter => {
  67. this.disabled = true
  68. this.spinning = true
  69. // outBizType = SHOP_CALL_OUT(店内调出) / SALES (销售)
  70. const params = this.baseData
  71. console.log(params)
  72. const queryParams = { outBizType: this.outBizType, productSn: params.productSn }
  73. if (this.outBizType == 'SALES') {
  74. queryParams.outBizSn = params.salesBillSn
  75. queryParams.outBizNo = params.salesBillNo
  76. }
  77. if (this.outBizType == 'SHOP_CALL_OUT') {
  78. queryParams.outBizSn = params.storeCallOutSn
  79. queryParams.outBizNo = params.storeCallOutNo
  80. }
  81. // 仓库仓位
  82. queryParams.warehouseSn = params.warehouseSn
  83. queryParams.warehouseLocationSn = params.warehouseLocationSn
  84. return stockOutDetailList(queryParams).then(res => {
  85. let data
  86. if (res.status == 200) {
  87. data = res.data
  88. const no = 0
  89. for (var i = 0; i < data.length; i++) {
  90. data[i].no = no + i + 1
  91. data[i].totalCost = Number(data[i].putCost * data[i].outQty).toFixed(2)
  92. }
  93. this.disabled = false
  94. }
  95. this.spinning = false
  96. return data
  97. })
  98. }
  99. }
  100. },
  101. computed: {
  102. columns () {
  103. const _this = this
  104. const arr = [
  105. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  106. { title: '库存批次', dataIndex: 'stockBatchNo', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  107. { title: '入库类型', dataIndex: 'putBizTypeDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  108. { title: '仓库', dataIndex: 'warehouseName', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  109. { title: '仓位', dataIndex: 'warehouseLocationName', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  110. // { title: '成本价', dataIndex: 'putCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  111. { title: '本次出库数量', dataIndex: 'outQty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  112. // { title: '成本小计', dataIndex: 'totalCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  113. ]
  114. if (this.$hasPermissions('M_ShowAllCost')) {
  115. arr.splice(5, 0, { title: '成本价', dataIndex: 'putCost', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } })
  116. arr.splice(7, 0, { title: '成本小计', dataIndex: 'totalCost', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } })
  117. }
  118. return arr
  119. }
  120. },
  121. methods: {
  122. setTableH () {
  123. this.$nextTick(() => {
  124. const searchBoxH = this.$refs.searchBox.offsetHeight
  125. this.tableHeight = window.innerHeight - searchBoxH - 235
  126. })
  127. },
  128. cansel () {
  129. this.isShow = false
  130. this.baseData = null
  131. },
  132. getData (row) {
  133. this.baseData = row
  134. this.$nextTick(() => {
  135. this.$refs.table.refresh(true)
  136. })
  137. }
  138. },
  139. watch: {
  140. // 父页面传过来的弹框状态
  141. openModal (newValue, oldValue) {
  142. this.isShow = newValue
  143. },
  144. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  145. this.setTableH()
  146. },
  147. // 重定义的弹框状态
  148. isShow (newValue, oldValue) {
  149. if (!newValue) {
  150. this.$emit('close')
  151. }else{
  152. this.setTableH()
  153. }
  154. }
  155. }
  156. }
  157. </script>
  158. <style lang="less">
  159. .outIndetail-modal {
  160. .ant-drawer-body {
  161. padding: 10px 20px;
  162. .outIndetail-modal-table{
  163. padding: 20px 0 0;
  164. }
  165. .baseInfo{
  166. line-height: 24px;
  167. font-size: 14px;
  168. }
  169. }
  170. }
  171. </style>