recordModal.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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. @cancle="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.buyerName }}
  16. </a-descriptions-item>
  17. <a-descriptions-item label="备货单号">
  18. {{ tipData&&tipData.buyerName }}
  19. </a-descriptions-item>
  20. <a-descriptions-item label="客户名称">
  21. {{ tipData&&tipData.buyerName }}
  22. </a-descriptions-item>
  23. <a-descriptions-item label="收货客户名称">
  24. {{ tipData&&tipData.buyerName }}
  25. </a-descriptions-item>
  26. </a-descriptions>
  27. <div>
  28. <a-table :columns="columns" :data-source="tableData" bordered>
  29. </a-table>
  30. </div>
  31. <div class="btn-box">
  32. <a-button @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  33. </div>
  34. </div>
  35. </a-spin>
  36. </a-modal>
  37. </template>
  38. <script>
  39. import { STable, VSelect } from '@/components'
  40. export default {
  41. name: 'CommonModal',
  42. components: { STable, VSelect },
  43. props: {
  44. openModal: { // 弹框显示状态
  45. type: Boolean,
  46. default: false
  47. },
  48. modalTit: { // 弹框标题
  49. type: String,
  50. default: null
  51. },
  52. cancelText: { // 取消 按钮文字
  53. type: String,
  54. default: '关闭'
  55. },
  56. isCancel: { // 是否显示 取消 按钮
  57. type: Boolean,
  58. default: true
  59. }
  60. },
  61. data () {
  62. return {
  63. isShow: this.openModal, // 是否打开弹框
  64. disabled: false,
  65. spinning: false,
  66. detail: [],
  67. queryParam: {
  68. },
  69. tableData: [],
  70. columns: [
  71. { title: '序号', dataIndex: 'no', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  72. { title: '打印时间', dataIndex: 'buyerName', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  73. { title: '打印人', dataIndex: 'buyerName', width: '25%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  74. { title: 'IP', dataIndex: 'buyerName1', width: '25%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  75. { title: '打印方式', dataIndex: 'buyerName', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true }
  76. ]
  77. }
  78. },
  79. methods: {
  80. setData (data) {
  81. this.detail = data
  82. },
  83. // 取消
  84. handleCommonCancel () {
  85. this.$emit('cancel')
  86. }
  87. },
  88. watch: {
  89. // 父页面传过来的弹框状态
  90. openModal (newValue, oldValue) {
  91. this.isShow = newValue
  92. },
  93. // 重定义的弹框状态
  94. isShow (newValue, oldValue) {
  95. if (!newValue) {
  96. this.$emit('cancel')
  97. }
  98. }
  99. }
  100. }
  101. </script>
  102. <style lang="less">
  103. .record-detail-modal{
  104. .common-main{
  105. .btn-box{
  106. text-align: center;
  107. margin-top: 30px;
  108. .ant-btn{
  109. margin:0 10px;
  110. }
  111. }
  112. }
  113. }
  114. </style>