recordModal.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <a-modal
  3. centered
  4. class="record-detail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. :title="modalTit"
  9. @cancel="isShow=false"
  10. width="60%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="common-main">
  13. <a-descriptions :column="2">
  14. <a-descriptions-item label="调拨单号">
  15. {{ tipData&&tipData.allocateNo }}
  16. </a-descriptions-item>
  17. <a-descriptions-item label="调拨类型">
  18. <span v-if="tipData&&tipData.allocateSortName">{{ tipData.allocateSortName || '--' }}</span>
  19. <span v-if="tipData&&tipData.allocateTypeName">/{{ tipData.allocateTypeName || '--' }}</span>
  20. </a-descriptions-item>
  21. <a-descriptions-item label="调往对象">
  22. {{ tipData&&tipData.targetName }}
  23. </a-descriptions-item>
  24. <a-descriptions-item label="调出仓库">
  25. {{ tipData&&tipData.warehouseName }}
  26. </a-descriptions-item>
  27. <a-descriptions-item label="收货客户名称">
  28. {{ tipData&&tipData.receiverName }}
  29. </a-descriptions-item>
  30. </a-descriptions>
  31. <div>
  32. <s-table
  33. class="sTable"
  34. ref="table"
  35. size="small"
  36. :rowKey="(record) => record.id"
  37. :columns="columns"
  38. :data="loadData"
  39. :defaultLoadData="false"
  40. :scroll="{ y: 240 }"
  41. bordered>
  42. </s-table>
  43. </div>
  44. <div class="btn-box">
  45. <a-button @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  46. </div>
  47. </div>
  48. </a-spin>
  49. </a-modal>
  50. </template>
  51. <script>
  52. import { STable, VSelect } from '@/components'
  53. import { printLogQueryPage } from '@/api/data'
  54. export default {
  55. name: 'RecordModal',
  56. components: { STable, VSelect },
  57. props: {
  58. openModal: { // 弹框显示状态
  59. type: Boolean,
  60. default: false
  61. },
  62. modalTit: { // 弹框标题
  63. type: String,
  64. default: null
  65. },
  66. cancelText: { // 取消 按钮文字
  67. type: String,
  68. default: '关闭'
  69. },
  70. isCancel: { // 是否显示 取消 按钮
  71. type: Boolean,
  72. default: true
  73. }
  74. },
  75. data () {
  76. return {
  77. isShow: this.openModal, // 是否打开弹框
  78. disabled: false,
  79. spinning: false,
  80. tipData: null,
  81. params: null,
  82. columns: [
  83. { title: '序号', dataIndex: 'no', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  84. { title: '打印时间', dataIndex: 'printDate', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  85. { title: '打印人', dataIndex: 'printPersonName', width: '25%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  86. { title: 'IP', dataIndex: 'printIp', width: '25%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  87. { title: '打印方式', dataIndex: 'printType', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true }
  88. ],
  89. // 加载数据方法 必须为 Promise 对象
  90. loadData: parameter => {
  91. this.disabled = true
  92. this.spinning = true
  93. return printLogQueryPage(Object.assign(parameter, this.params || {})).then(res => {
  94. let data
  95. if (res.status == 200) {
  96. data = res.data
  97. const no = (data.pageNo - 1) * data.pageSize
  98. for (var i = 0; i < data.list.length; i++) {
  99. data.list[i].no = no + i + 1
  100. }
  101. this.disabled = false
  102. }
  103. this.spinning = false
  104. return data
  105. })
  106. }
  107. }
  108. },
  109. methods: {
  110. setData (data, params) {
  111. this.tipData = data
  112. this.params = params
  113. this.$nextTick(() => {
  114. this.$refs.table.refresh(true)
  115. })
  116. },
  117. // 取消
  118. handleCommonCancel () {
  119. this.$emit('cancel')
  120. }
  121. },
  122. watch: {
  123. // 父页面传过来的弹框状态
  124. openModal (newValue, oldValue) {
  125. this.isShow = newValue
  126. },
  127. // 重定义的弹框状态
  128. isShow (newValue, oldValue) {
  129. if (!newValue) {
  130. this.$emit('cancel')
  131. }
  132. }
  133. }
  134. }
  135. </script>
  136. <style lang="less">
  137. .record-detail-modal{
  138. .common-main{
  139. .btn-box{
  140. text-align: center;
  141. margin-top: 30px;
  142. .ant-btn{
  143. margin:0 10px;
  144. }
  145. }
  146. }
  147. }
  148. </style>