outInDetialModal.vue 5.6 KB

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