outInDetialModal.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <a-modal
  3. centered
  4. class="outIndetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="出库明细"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="1024">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="baseInfo" v-if="baseData">
  13. <div>
  14. <span>产品编码:{{ baseData.dealerProductEntity ? baseData.dealerProductEntity.code : baseData.productCode }}</span>
  15. </div>
  16. <div>
  17. <span>产品名称:{{ baseData.dealerProductEntity ? baseData.dealerProductEntity.name : baseData.productName }}</span>
  18. </div>
  19. </div>
  20. <div class="outIndetail-modal-table">
  21. <!-- 列表 -->
  22. <s-table
  23. class="sTable"
  24. ref="table"
  25. size="small"
  26. :rowKey="(record) => record.id"
  27. :columns="columns"
  28. :data="loadData"
  29. :scroll="{ y: 450 }"
  30. :defaultLoadData="false"
  31. :showPagination="false"
  32. bordered>
  33. </s-table>
  34. </div>
  35. <div class="btn-cont">
  36. <a-button id="storeTransferOut-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
  37. </div>
  38. </a-spin>
  39. </a-modal>
  40. </template>
  41. <script>
  42. import { commonMixin } from '@/utils/mixin'
  43. import { STable } from '@/components'
  44. import { stockOutDetailList } from '@/api/stockOut'
  45. export default {
  46. name: 'OutinDetailModal',
  47. components: { STable },
  48. mixins: [commonMixin],
  49. props: {
  50. openModal: {
  51. // 弹框显示状态
  52. type: Boolean,
  53. default: false
  54. },
  55. outBizType: {
  56. type: String,
  57. default: ''
  58. }
  59. },
  60. data () {
  61. return {
  62. spinning: false,
  63. isShow: this.openModal, // 是否打开弹框
  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. return stockOutDetailList(queryParams).then(res => {
  82. let data
  83. if (res.status == 200) {
  84. data = res.data
  85. const no = (data.pageNo - 1) * data.pageSize
  86. for (var i = 0; i < data.list.length; i++) {
  87. data.list[i].no = no + i + 1
  88. data.list[i].totalCost = data.list[i].putCost * data.list[i].outQty
  89. }
  90. this.disabled = false
  91. }
  92. this.spinning = false
  93. return data
  94. })
  95. }
  96. }
  97. },
  98. computed: {
  99. columns () {
  100. const arr = [
  101. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  102. { title: '库存批次', dataIndex: 'createDate', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  103. { title: '入库类型', dataIndex: 'outBizType', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  104. { title: '仓库', dataIndex: 'warehouseName', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  105. { title: '仓位', dataIndex: 'warehouseLocationName', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  106. // { title: '成本价', dataIndex: 'putCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  107. { title: '本次出库数量', dataIndex: 'outQty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  108. // { title: '成本小计', dataIndex: 'totalCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  109. ]
  110. if (this.$hasPermissions('M_ShowAllCost')) {
  111. arr.splice(5, 0, { title: '成本价', dataIndex: 'putCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
  112. arr.splice(7, 0, { title: '成本小计', dataIndex: 'totalCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
  113. }
  114. return arr
  115. }
  116. },
  117. methods: {
  118. cansel () {
  119. this.isShow = false
  120. this.baseData = null
  121. },
  122. getData (row) {
  123. this.baseData = row
  124. this.$nextTick(() => {
  125. this.$refs.table.refresh(true)
  126. })
  127. }
  128. },
  129. watch: {
  130. // 父页面传过来的弹框状态
  131. openModal (newValue, oldValue) {
  132. this.isShow = newValue
  133. },
  134. // 重定义的弹框状态
  135. isShow (newValue, oldValue) {
  136. if (!newValue) {
  137. this.$emit('close')
  138. }
  139. }
  140. }
  141. }
  142. </script>
  143. <style lang="less">
  144. .outIndetail-modal {
  145. .ant-modal-body {
  146. padding: 20px;
  147. .outIndetail-modal-table{
  148. padding: 20px 0 0;
  149. }
  150. .baseInfo{
  151. line-height: 24px;
  152. font-size: 14px;
  153. }
  154. }
  155. .btn-cont {
  156. text-align: center;
  157. margin: 35px 0 10px;
  158. }
  159. }
  160. </style>