detailModal.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <a-modal
  3. centered
  4. class="sendGood-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. <div class="toolsBar" v-if="detail.length">
  14. <div>箭冠汽配西安大兴店,共 {{ detail && detail.length }} 个出库单,产品款数合计 <span>1266.45</span> ,产品数量合计 <span>158</span>。</div>
  15. </div>
  16. <div class="toolsBar">
  17. 发货时间:<a-date-picker v-model="sendDate" :locale="locale"/>
  18. </div>
  19. <div>
  20. <a-table :columns="columns" :pagination="false" :data-source="tableData" bordered>
  21. <!-- 物品名称 -->
  22. <template slot="goodName" slot-scope="text, record">
  23. <a-input v-model.trim="record.goodName"></a-input>
  24. </template>
  25. <!-- 数量 -->
  26. <template slot="qty" slot-scope="text, record">
  27. <a-input-number style="width: 100%;" v-model="record.qty" :min="1" :max="999999"></a-input-number>
  28. </template>
  29. <!-- 操作 -->
  30. <template slot="action" slot-scope="text, record, index">
  31. <a-button
  32. size="small"
  33. type="link"
  34. class="button-error"
  35. @click="handleDel(record,index)"
  36. >
  37. 删除
  38. </a-button>
  39. </template>
  40. </a-table>
  41. <div style="padding: 5px; border:1px solid #eee;border-radius:0 0 10px;border-top: 0;">
  42. <a-button @click="addItem()" type="link" block>+新增发货明细</a-button>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="btn-box">
  47. <a-button @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  48. <a-button type="primary" @click="handleCommonOk">{{ okText }}</a-button>
  49. </div>
  50. </a-spin>
  51. </a-modal>
  52. </template>
  53. <script>
  54. import moment from 'moment'
  55. import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
  56. import { STable, VSelect } from '@/components'
  57. export default {
  58. name: 'CommonModal',
  59. components: { STable, VSelect },
  60. props: {
  61. openModal: { // 弹框显示状态
  62. type: Boolean,
  63. default: false
  64. },
  65. modalTit: { // 弹框标题
  66. type: String,
  67. default: null
  68. },
  69. okText: { // 确定 按钮文字
  70. type: String,
  71. default: '确定'
  72. },
  73. cancelText: { // 取消 按钮文字
  74. type: String,
  75. default: '取消'
  76. },
  77. isCancel: { // 是否显示 取消 按钮
  78. type: Boolean,
  79. default: true
  80. }
  81. },
  82. data () {
  83. return {
  84. locale,
  85. isShow: this.openModal, // 是否打开弹框
  86. disabled: false,
  87. spinning: false,
  88. detail: [],
  89. sendDate: moment(),
  90. tableData: [],
  91. columns: [
  92. { title: '序号', dataIndex: 'no', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  93. { title: '货物名称', dataIndex: 'goodName', scopedSlots: { customRender: 'goodName' }, width: '50%', align: 'center' },
  94. { title: '件数', dataIndex: 'qty', scopedSlots: { customRender: 'qty' }, width: '25%', align: 'center' },
  95. { title: '操作', scopedSlots: { customRender: 'action' }, width: '15%', align: 'center' }
  96. ]
  97. }
  98. },
  99. methods: {
  100. setData (data) {
  101. this.detail = data
  102. },
  103. // 删除
  104. handleDel (row, index) {
  105. this.tableData.splice(index, 1)
  106. },
  107. // 添加
  108. addItem () {
  109. const len = this.tableData.length
  110. this.tableData.push({
  111. no: len + 1,
  112. goodName: '',
  113. qty: 1
  114. })
  115. },
  116. // 确定
  117. handleCommonOk () {
  118. this.$emit('ok')
  119. },
  120. // 取消
  121. handleCommonCancel () {
  122. this.$emit('cancel')
  123. }
  124. },
  125. watch: {
  126. // 父页面传过来的弹框状态
  127. openModal (newValue, oldValue) {
  128. this.isShow = newValue
  129. },
  130. // 重定义的弹框状态
  131. isShow (newValue, oldValue) {
  132. if (!newValue) {
  133. this.$emit('cancel')
  134. }
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="less">
  140. .sendGood-detail-modal{
  141. .common-main{
  142. .toolsBar{
  143. display: flex;
  144. align-items: center;
  145. margin-bottom: 10px;
  146. .ant-btn{
  147. margin-left: 30px;
  148. }
  149. }
  150. }
  151. .btn-box{
  152. text-align: center;
  153. margin-top: 30px;
  154. .ant-btn{
  155. margin:0 10px;
  156. }
  157. }
  158. }
  159. </style>