detailModal.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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. <div style="text-align:right;margin-bottom:10px;"><a-button
  14. type="primary"
  15. style="margin-left: 5px"
  16. @click="handleExport"
  17. :disabled="disabled"
  18. :loading="exportLoading"
  19. id="inventoryWarningList-export-btn">导出</a-button></div>
  20. <a-card size="small" :bordered="false" class="purchaseReturnDetail-cont">
  21. <a-collapse :activeKey="['1']">
  22. <a-collapse-panel key="1" header="基础信息">
  23. <a-descriptions :column="3">
  24. <a-descriptions-item label="采购单号">{{ objItem&&objItem.purchaseBillNo || '--' }}</a-descriptions-item>
  25. </a-descriptions>
  26. </a-collapse-panel>
  27. </a-collapse>
  28. </a-card>
  29. <!-- 合计 -->
  30. <a-alert type="info" style="margin-bottom:10px" v-if="objItem">
  31. <div class="ftext" slot="message">
  32. 缺货总款数:<strong>{{ objItem.totalCategory || objItem.totalCategory==0 ? objItem.totalCategory : '--' }}个</strong>;
  33. 缺货总数量:<strong>{{ objItem.totalQty || objItem.totalQty==0 ? objItem.totalQty : '--' }}个</strong>;
  34. <div style="display: inline-block;" v-if="$hasPermissions('M_ShowAllCost')">
  35. 缺货总售价:<strong>{{ objItem.totalAmount || objItem.totalAmount==0 ? toThousands(objItem.totalAmount) : '--' }}</strong>。
  36. </div>
  37. </div>
  38. </a-alert>
  39. <!-- 详情 -->
  40. <s-table
  41. class="sTable"
  42. ref="table"
  43. size="small"
  44. :rowKey="(record) => record.id"
  45. :columns="columns"
  46. :data="loadData"
  47. :scroll="{ y: 500 }"
  48. bordered>
  49. </s-table>
  50. <div class="btn-cont">
  51. <a-button id="inventoryQueryDetail-detail-modal-back" @click="isShow = false">返回列表</a-button>
  52. </div>
  53. </a-spin>
  54. </a-modal>
  55. </template>
  56. <script>
  57. import { commonMixin } from '@/utils/mixin'
  58. import { STable } from '@/components'
  59. import { outOfStockExportDetail, outOfStockDetailList } from '@/api/oos'
  60. import { downloadExcel } from '@/libs/JGPrint.js'
  61. export default {
  62. name: 'DetailModal',
  63. components: { STable },
  64. mixins: [commonMixin],
  65. props: {
  66. openModal: { // 弹框显示状态
  67. type: Boolean,
  68. default: false
  69. },
  70. objItem: {
  71. type: Object,
  72. default: () => {
  73. return {}
  74. }
  75. }
  76. },
  77. computed: {
  78. modalTit () {
  79. return '详情'
  80. },
  81. columns () {
  82. const _this = this
  83. const arr = [
  84. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  85. { title: '产品编码', dataIndex: 'productCode', width: '17%', align: 'center', customRender: function (text) { return text || '--' } },
  86. { title: '产品名称', dataIndex: 'productName', width: '17%', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  87. { title: '原厂编码', dataIndex: 'productOrigCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  88. { title: '单位', dataIndex: 'unit', width: '10%', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  89. { title: '缺货数量', dataIndex: 'qty', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  90. { title: '单价', dataIndex: 'price', width: '7%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  91. { title: '缺货金额', dataIndex: 'totalAmount', width: '7%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }
  92. ]
  93. return arr
  94. }
  95. },
  96. data () {
  97. return {
  98. spinning: false,
  99. isShow: this.openModal, // 是否打开弹框
  100. // 加载数据方法 必须为 Promise 对象
  101. loadData: parameter => {
  102. this.disabled = true
  103. this.spinning = true
  104. return outOfStockDetailList(Object.assign(parameter, { purchaseBillSn: this.objItem && this.objItem.purchaseBillSn || '' })).then(res => {
  105. let data
  106. if (res.status == 200) {
  107. data = res.data
  108. const no = (data.pageNo - 1) * data.pageSize
  109. for (var i = 0; i < data.list.length; i++) {
  110. data.list[i].no = no + i + 1
  111. }
  112. this.disabled = false
  113. }
  114. this.spinning = false
  115. return data
  116. })
  117. },
  118. exportLoading: false, // 导出loading
  119. disabled: false // 查询、重置按钮是否可操作
  120. }
  121. },
  122. methods: {
  123. // 导出
  124. handleExport () {
  125. const _this = this
  126. _this.exportLoading = true
  127. outOfStockExportDetail({ purchaseBillSn: this.objItem && this.objItem.purchaseBillSn || '' }).then(res => {
  128. downloadExcel(res, '采购缺货列表')
  129. _this.exportLoading = false
  130. })
  131. },
  132. // 合计
  133. pageInit () {
  134. this.$refs.table.refresh(true)
  135. }
  136. },
  137. watch: {
  138. // 父页面传过来的弹框状态
  139. openModal (newValue, oldValue) {
  140. this.isShow = newValue
  141. },
  142. // 重定义的弹框状态
  143. isShow (newValue, oldValue) {
  144. if (!newValue) {
  145. this.$emit('close')
  146. this.currentStock = null
  147. this.$refs.table.clearTable()
  148. }
  149. }
  150. }
  151. }
  152. </script>
  153. <style lang="less">
  154. .inventoryQueryDetail-modal{
  155. .btn-cont {
  156. text-align: center;
  157. margin: 5px 0 10px;
  158. }
  159. }
  160. </style>