detailModal.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <a-modal
  3. centered
  4. class="inventoryQueryDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="960">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <!-- 合计 -->
  13. <a-alert type="info" style="margin-bottom:10px">
  14. <div class="ftext" slot="message">
  15. 可用库存总数量:<strong>{{ currentStock&&(currentStock.currentStockQty || currentStock.currentStockQty==0) ? currentStock.currentStockQty : '--' }}个</strong>;
  16. <div style="display: inline-block;" v-if="$hasPermissions('M_ShowAllCost')">
  17. 可用库存总成本:<strong>{{ currentStock&&(currentStock.currentStockCost || currentStock.currentStockCost==0) ? toThousands(currentStock.currentStockCost) : '--' }}</strong>;
  18. </div>
  19. 冻结库存总数量:<strong>{{ currentStock&&(currentStock.freezeQty || currentStock.freezeQty==0) ? currentStock.freezeQty : '--' }}个</strong>;
  20. <div style="display: inline-block;" v-if="$hasPermissions('M_ShowAllCost')">
  21. 冻结库存总成本:<strong>{{ currentStock&&(currentStock.freezeCost || currentStock.freezeCost==0) ? toThousands(currentStock.freezeCost) : '--' }}</strong>。
  22. </div>
  23. </div>
  24. </a-alert>
  25. <!-- 库存详情 -->
  26. <s-table
  27. v-if="openModal"
  28. class="sTable"
  29. ref="table"
  30. size="small"
  31. :rowKey="(record) => record.id"
  32. :columns="columns"
  33. :data="loadData"
  34. :scroll="{ y: 500 }"
  35. bordered>
  36. </s-table>
  37. <div class="btn-cont">
  38. <a-button id="inventoryQueryDetail-detail-modal-back" @click="isShow = false">返回列表</a-button>
  39. </div>
  40. </a-spin>
  41. </a-modal>
  42. </template>
  43. <script>
  44. import { commonMixin } from '@/utils/mixin'
  45. import { STable } from '@/components'
  46. import { stockDetailList, stockByProductSn } from '@/api/stock'
  47. export default {
  48. name: 'InventoryQueryDetailModal',
  49. components: { STable },
  50. mixins: [commonMixin],
  51. props: {
  52. openModal: { // 弹框显示状态
  53. type: Boolean,
  54. default: false
  55. },
  56. nowData: {
  57. type: Object,
  58. default: () => {
  59. return {}
  60. }
  61. }
  62. },
  63. computed: {
  64. modalTit () {
  65. return '库存详情'
  66. },
  67. columns () {
  68. const _this = this
  69. const arr = [
  70. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  71. { title: '产品编码', dataIndex: 'productCode', width: '17%', align: 'center', customRender: function (text) { return text || '--' } },
  72. { title: '产品名称', dataIndex: 'productName', width: '17%', align: 'left', ellipsis: true, customRender: function (text) { return text || '--' } },
  73. { title: '原厂编码', dataIndex: 'productOrigCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  74. { title: '入库时间', dataIndex: 'putTime', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  75. { title: '仓库', dataIndex: 'warehouseName', width: '10%', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  76. { title: '仓位', dataIndex: 'warehouseLocationName', width: '10%', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  77. { title: '入库类型', dataIndex: 'putBizTypeDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  78. { title: '可用库存数量', dataIndex: 'currentQty', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  79. { title: '冻结库存数量', dataIndex: 'freezeQty', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  80. // { title: '成本单价', dataIndex: 'putCost', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  81. ]
  82. if (this.$hasPermissions('M_ShowAllCost')) {
  83. arr.splice(10, 0, { title: '成本单价', dataIndex: 'putCost', width: '7%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } })
  84. }
  85. return arr
  86. }
  87. },
  88. data () {
  89. return {
  90. spinning: false,
  91. isShow: this.openModal, // 是否打开弹框
  92. // 加载数据方法 必须为 Promise 对象
  93. loadData: parameter => {
  94. this.disabled = true
  95. this.spinning = true
  96. return stockDetailList(Object.assign(parameter, { stockSn: this.nowData && this.nowData.stockSn || '', existStockFlag: '1' })).then(res => {
  97. let data
  98. if (res.status == 200) {
  99. data = res.data
  100. const no = (data.pageNo - 1) * data.pageSize
  101. for (var i = 0; i < data.list.length; i++) {
  102. data.list[i].no = no + i + 1
  103. }
  104. this.disabled = false
  105. // 总计
  106. this.getTotal(Object.assign(parameter, { stockSn: this.nowData && this.nowData.stockSn || '', existStockFlag: '1' }))
  107. }
  108. this.spinning = false
  109. return data
  110. })
  111. },
  112. currentStock: null
  113. }
  114. },
  115. methods: {
  116. // 合计
  117. getTotal (param) {
  118. stockByProductSn({ productSn: this.nowData && this.nowData.productSn || '' }).then(res => {
  119. if (res.status == 200 && res.data) {
  120. this.currentStock = res.data
  121. } else {
  122. this.currentStock = null
  123. }
  124. })
  125. }
  126. },
  127. watch: {
  128. // 父页面传过来的弹框状态
  129. openModal (newValue, oldValue) {
  130. this.isShow = newValue
  131. },
  132. // 重定义的弹框状态
  133. isShow (newValue, oldValue) {
  134. if (!newValue) {
  135. this.$emit('close')
  136. this.currentStock = null
  137. this.$refs.table.clearTable()
  138. }
  139. }
  140. }
  141. }
  142. </script>
  143. <style lang="less">
  144. .inventoryQueryDetail-modal{
  145. .btn-cont {
  146. text-align: center;
  147. margin: 5px 0 10px;
  148. }
  149. }
  150. </style>