detailModal.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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. // 弹框标题
  65. modalTit () {
  66. return '库存详情'
  67. },
  68. // 列
  69. columns () {
  70. const _this = this
  71. const arr = [
  72. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  73. { title: '产品编码', dataIndex: 'productCode', width: '17%', align: 'center', customRender: function (text) { return text || '--' } },
  74. { title: '产品名称', dataIndex: 'productName', width: '17%', align: 'left', ellipsis: true, customRender: function (text) { return text || '--' } },
  75. { title: '原厂编码', dataIndex: 'productOrigCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  76. { title: '入库时间', dataIndex: 'putTime', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  77. { title: '仓库', dataIndex: 'warehouseName', width: '10%', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  78. { title: '仓位', dataIndex: 'warehouseLocationName', width: '10%', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  79. { title: '入库类型', dataIndex: 'putBizTypeDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  80. { title: '可用库存数量', dataIndex: 'currentQty', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  81. { title: '冻结库存数量', dataIndex: 'freezeQty', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  82. // { title: '成本单价', dataIndex: 'putCost', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  83. ]
  84. if (this.$hasPermissions('M_ShowAllCost')) {
  85. arr.splice(10, 0, { title: '成本单价', dataIndex: 'putCost', width: '7%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } })
  86. }
  87. return arr
  88. }
  89. },
  90. data () {
  91. return {
  92. spinning: false,
  93. isShow: this.openModal, // 是否打开弹框
  94. // 加载数据方法 必须为 Promise 对象
  95. loadData: parameter => {
  96. this.disabled = true
  97. this.spinning = true
  98. return stockDetailList(Object.assign(parameter, { stockSn: this.nowData && this.nowData.stockSn || '', existStockFlag: '1' })).then(res => {
  99. let data
  100. if (res.status == 200) {
  101. data = res.data
  102. const no = (data.pageNo - 1) * data.pageSize
  103. for (var i = 0; i < data.list.length; i++) {
  104. data.list[i].no = no + i + 1
  105. }
  106. this.disabled = false
  107. // 总计
  108. this.getTotal(Object.assign(parameter, { stockSn: this.nowData && this.nowData.stockSn || '', existStockFlag: '1' }))
  109. }
  110. this.spinning = false
  111. return data
  112. })
  113. },
  114. currentStock: null // 合计数据
  115. }
  116. },
  117. methods: {
  118. // 合计
  119. getTotal (param) {
  120. stockByProductSn({ productSn: this.nowData && this.nowData.productSn || '' }).then(res => {
  121. if (res.status == 200 && res.data) {
  122. this.currentStock = res.data
  123. } else {
  124. this.currentStock = null
  125. }
  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. this.currentStock = null
  139. this.$refs.table.clearTable()
  140. }
  141. }
  142. }
  143. }
  144. </script>
  145. <style lang="less">
  146. .inventoryQueryDetail-modal{
  147. .btn-cont {
  148. text-align: center;
  149. margin: 5px 0 10px;
  150. }
  151. }
  152. </style>