detailModal.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <a-modal
  3. centered
  4. class="bulkReturnGoodsDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="详情"
  8. v-model="isShow"
  9. @cancle="isShow = false"
  10. :width="960">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-card size="small" :bordered="false" class="bulkReturnGoodsDetail-cont">
  13. <a-descriptions size="small">
  14. <a-descriptions-item label="散件退货单号">{{ (basicInfoData&&basicInfoData.sparePartsReturnNo) || '--' }}</a-descriptions-item>
  15. <a-descriptions-item label="业务状态">{{ (basicInfoData&&basicInfoData.stateDictValue) || '--' }}</a-descriptions-item>
  16. <a-descriptions-item label="财务状态">{{ (basicInfoData&&basicInfoData.settleStateDictValue) || '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="供应商">{{ (basicInfoData&&basicInfoData.supplierName) || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="是否抓单">{{ (basicInfoData&&basicInfoData.isGrabDictValue) || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="备注">{{ (basicInfoData&&basicInfoData.remark) || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="创建时间">{{ (basicInfoData&&basicInfoData.createDate) || '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="审核时间">{{ (basicInfoData&&basicInfoData.auditTime) || '--' }}</a-descriptions-item>
  22. </a-descriptions>
  23. </a-card>
  24. <a-card size="small" :bordered="false" class="bulkReturnGoodsDetail-cont">
  25. <!-- 总计 -->
  26. <a-alert type="info" style="margin-bottom:10px">
  27. <div slot="message">
  28. 总款数<strong>{{ (productTotal&&(productTotal.purchaseSize || productTotal.purchaseSize==0)) ? productTotal.purchaseSize : '--' }}</strong> ,
  29. 总数量<strong>{{ (productTotal&&(productTotal.purchaseQty || productTotal.purchaseQty==0)) ? productTotal.purchaseQty : '--' }}</strong> ,
  30. 总金额<strong>{{ (productTotal&&(productTotal.purchaseCost || productTotal.purchaseCost==0)) ? '¥'+productTotal.purchaseCost : '--' }}</strong>
  31. </div>
  32. </a-alert>
  33. <!-- 列表 -->
  34. <s-table
  35. class="sTable"
  36. ref="table"
  37. size="small"
  38. :rowKey="(record) => record.id"
  39. :columns="columns"
  40. :data="loadData"
  41. :defaultLoadData="false"
  42. :scroll="{ x: isGrab=='1'?890:910, y: 450 }"
  43. bordered>
  44. </s-table>
  45. </a-card>
  46. </a-spin>
  47. </a-modal>
  48. </template>
  49. <script>
  50. import { STable } from '@/components'
  51. import { sparePartsRetDetail, sparePartsRetDetailList, sparePartsRetDetailCount } from '@/api/sparePartsRet'
  52. export default {
  53. name: 'BulkReturnGoodsDetailModal',
  54. components: { STable },
  55. props: {
  56. openModal: { // 弹框显示状态
  57. type: Boolean,
  58. default: false
  59. },
  60. itemSn: {
  61. type: String || Number,
  62. default: ''
  63. },
  64. isGrab: {
  65. type: String || Number,
  66. default: ''
  67. }
  68. },
  69. data () {
  70. return {
  71. spinning: false,
  72. isShow: this.openModal, // 是否打开弹框
  73. // 加载数据方法 必须为 Promise 对象
  74. loadData: parameter => {
  75. this.disabled = true
  76. const params = Object.assign(parameter, { sparePartsReturnSn: this.itemSn })
  77. return sparePartsRetDetailList(params).then(res => {
  78. this.getDetailCount(params)
  79. const data = res.data
  80. const no = (data.pageNo - 1) * data.pageSize
  81. for (var i = 0; i < data.list.length; i++) {
  82. data.list[i].no = no + i + 1
  83. }
  84. this.disabled = false
  85. return data
  86. })
  87. },
  88. basicInfoData: null, // 基本信息
  89. productTotal: null
  90. }
  91. },
  92. computed: {
  93. columns () {
  94. let arr = []
  95. if (this.isGrab == '1') { // 抓单
  96. arr = [
  97. { title: '序号', dataIndex: 'no', width: 50, align: 'center' },
  98. { title: '散件入库单号', dataIndex: 'sparePartsPurchaseNo', width: 180, align: 'center', customRender: function (text) { return text || '--' } },
  99. { title: '产品编码', dataIndex: 'productCode', width: 180, align: 'center', customRender: function (text) { return text || '--' } },
  100. { title: '产品名称', dataIndex: 'productName', align: 'center', customRender: function (text) { return text || '--' } },
  101. { title: '单位', dataIndex: 'productUnit', width: 60, align: 'center', customRender: function (text) { return text || '--' } },
  102. { title: '退货单价', dataIndex: 'purchaseCost', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  103. { title: '退货数量', dataIndex: 'purchaseQty', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  104. { title: '退货金额', dataIndex: 'purchaseAmount', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  105. ]
  106. } else { // 不抓单
  107. arr = [
  108. { title: '序号', dataIndex: 'no', width: 50, align: 'center' },
  109. { title: '产品编码', dataIndex: 'productCode', width: 180, align: 'center', customRender: function (text) { return text || '--' } },
  110. { title: '产品名称', dataIndex: 'productName', align: 'center', customRender: function (text) { return text || '--' } },
  111. { title: '仓库', dataIndex: 'warehouseName', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
  112. { title: '仓位', dataIndex: 'warehouseLocationName', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
  113. { title: '单位', dataIndex: 'productUnit', width: 60, align: 'center', customRender: function (text) { return text || '--' } },
  114. { title: '退货单价', dataIndex: 'purchaseCost', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  115. { title: '退货数量', dataIndex: 'purchaseQty', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  116. { title: '退货金额', dataIndex: 'purchaseAmount', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  117. ]
  118. }
  119. return arr
  120. }
  121. },
  122. methods: {
  123. // 详情
  124. getDetail () {
  125. sparePartsRetDetail({ sn: this.itemSn }).then(res => {
  126. if (res.status == 200) {
  127. this.basicInfoData = res.data || null
  128. } else {
  129. this.basicInfoData = null
  130. }
  131. })
  132. },
  133. // 合计
  134. getDetailCount () {
  135. sparePartsRetDetailCount({ sparePartsReturnSn: this.itemSn }).then(res => {
  136. if (res.status == 200) {
  137. this.productTotal = res.data
  138. } else {
  139. this.productTotal = null
  140. }
  141. })
  142. }
  143. },
  144. watch: {
  145. // 父页面传过来的弹框状态
  146. openModal (newValue, oldValue) {
  147. this.isShow = newValue
  148. },
  149. // 重定义的弹框状态
  150. isShow (newValue, oldValue) {
  151. if (!newValue) {
  152. this.$emit('close')
  153. this.basicInfoData = null
  154. this.$refs.table.clearTable()
  155. } else {
  156. const _this = this
  157. setTimeout(() => (
  158. _this.$refs.table.refresh(true)
  159. ), 300)
  160. }
  161. },
  162. itemSn (newValue, oldValue) {
  163. if (this.isShow && newValue) {
  164. this.getDetail()
  165. }
  166. }
  167. }
  168. }
  169. </script>
  170. <style lang="less">
  171. .bulkReturnGoods-basicInfo-modal {
  172. .ant-modal-body {
  173. padding: 40px 40px 24px;
  174. }
  175. .btn-cont {
  176. text-align: center;
  177. margin: 35px 0 10px;
  178. }
  179. }
  180. </style>