detailModal.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <a-modal
  3. centered
  4. class="chainStockReportDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="960">
  11. <!-- 合计 -->
  12. <a-alert type="info" showIcon style="margin-bottom:15px">
  13. <div class="ftext" slot="message">现有库存总数量(个):
  14. <strong>
  15. <!-- {{ currentStock.currentQty || 0 }} -->207
  16. </strong>;现有库存总成本(¥):
  17. <strong>
  18. <!-- {{ currentStock.putCost || 0 }} -->1550.5
  19. </strong>。</div>
  20. </a-alert>
  21. <!-- 详情 -->
  22. <s-table
  23. v-if="openModal"
  24. class="sTable"
  25. ref="table"
  26. size="small"
  27. :rowKey="(record) => record.id"
  28. :columns="columns"
  29. :data="loadData"
  30. :scroll="{ x: 1580 }"
  31. bordered>
  32. <!-- 库存数量 -->
  33. <template slot="currentQty" slot-scope="text, record">
  34. {{ (record.currentQty + record.freezeQty) || 0 }}
  35. <span v-if="record.freezeQty">(冻结{{ record.freezeQty }})</span>
  36. </template>
  37. </s-table>
  38. <div class="btn-cont">
  39. <a-button id="chainStockReportDetail-detail-modal-back" @click="isShow = false">返回列表</a-button>
  40. </div>
  41. </a-modal>
  42. </template>
  43. <script>
  44. import { STable } from '@/components'
  45. import { stockDetailList, stockDetailCount } from '@/api/stock'
  46. export default {
  47. name: 'InventoryQueryDetailModal',
  48. components: { STable },
  49. props: {
  50. openModal: { // 弹框显示状态
  51. type: Boolean,
  52. default: false
  53. },
  54. itemId: {
  55. type: [Number, String],
  56. default: ''
  57. }
  58. },
  59. computed: {
  60. modalTit () {
  61. return '详情'
  62. }
  63. },
  64. data () {
  65. return {
  66. isShow: this.openModal, // 是否打开弹框
  67. // 表头
  68. columns: [
  69. { title: '序号', dataIndex: 'no', width: 80, align: 'center', fixed: 'left' },
  70. { title: '产品编码', dataIndex: 'productCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
  71. { title: '产品名称', dataIndex: 'productName', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  72. { title: '原厂编码', dataIndex: 'productOrigCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
  73. { title: '入库时间', dataIndex: 'putTime', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
  74. { title: '仓库', dataIndex: 'warehouseName', width: 140, align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  75. { title: '仓位', dataIndex: 'warehouseLocationName', width: 140, align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  76. { title: '入库类型', dataIndex: 'putBizTypeDictValue', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  77. { title: '库存数量', scopedSlots: { customRender: 'currentQty' }, width: 180, align: 'center' },
  78. { title: '成本单价', dataIndex: 'putCost', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  79. ],
  80. // 加载数据方法 必须为 Promise 对象
  81. loadData: parameter => {
  82. this.disabled = true
  83. // return stockDetailList(Object.assign(parameter, { stockSn: this.itemId })).then(res => {
  84. // const 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. // }
  89. // this.disabled = false
  90. // // 总计
  91. // this.getTotal(Object.assign(parameter, { stockSn: this.itemId }))
  92. // return data
  93. // })
  94. const _this = this
  95. return new Promise(function (resolve, reject) {
  96. const data = {
  97. pageNo: 1,
  98. pageSize: 10,
  99. list: [
  100. { id: '1', productCode: 'GA-11078N', productName: '冠牌空气滤清器 丰田新款佳美2.4 12款逸致1.8', productOrigCode: '17807-20040', putTime: '2021-01-28 14:56:11', warehouseName: '默认仓库', warehouseLocationName: '默认仓位', putBizTypeDictValue: '散件入库', currentQty: '207', freezeQty: '', putCost: '1550.50' }
  101. ],
  102. count: 10
  103. }
  104. for (var i = 0; i < data.list.length; i++) {
  105. data.list[i].no = i + 1
  106. }
  107. _this.disabled = false
  108. resolve(data)
  109. })
  110. },
  111. currentStock: { // 合计信息
  112. currentQty: '',
  113. putCost: ''
  114. }
  115. }
  116. },
  117. methods: {
  118. // 合计
  119. getTotal (param) {
  120. stockDetailCount(param).then(res => {
  121. if (res.status == 200 && res.data) {
  122. this.currentStock = res.data
  123. } else {
  124. this.currentStock = { // 合计信息
  125. currentQty: '',
  126. putCost: ''
  127. }
  128. }
  129. })
  130. }
  131. },
  132. watch: {
  133. // 父页面传过来的弹框状态
  134. openModal (newValue, oldValue) {
  135. this.isShow = newValue
  136. },
  137. // 重定义的弹框状态
  138. isShow (newValue, oldValue) {
  139. if (!newValue) {
  140. this.$emit('close')
  141. }
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="less">
  147. .chainStockReportDetail-modal{
  148. .btn-cont {
  149. text-align: center;
  150. margin: 5px 0 10px;
  151. }
  152. }
  153. </style>