invoiceModal.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :footer="null"
  8. @cancel="cancel"
  9. width="40%">
  10. <a-spin :spinning="spinning" tip="Loading...">
  11. <a-form-model
  12. id="chooseCustom-form"
  13. ref="ruleForm"
  14. :model="form"
  15. :label-col="formItemLayout.labelCol"
  16. :wrapper-col="formItemLayout.wrapperCol">
  17. <a-form-model-item label="收款单号:" prop="no"> <span>{{ form.no }}</span>
  18. </a-form-model-item>
  19. <a-form-model-item label="付款方:" prop="payerName"> <span>{{ form.payerName }}</span>
  20. </a-form-model-item>
  21. <a-form-model-item label="开票日期:" prop="invoiceDate">
  22. <a-date-picker
  23. id="noticeEdit-releaseDate"
  24. format="YYYY-MM-DD"
  25. placeholder="请选择开票日期"
  26. v-model="form.invoiceDate"/>
  27. <div style="color:#999">如果没有开票,则不填写即可</div>
  28. </a-form-model-item>
  29. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
  30. <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
  31. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">确定
  32. </a-button>
  33. </a-form-model-item>
  34. </a-form-model>
  35. </a-spin>
  36. </a-modal>
  37. </template>
  38. <script>
  39. import moment from 'moment'
  40. import {
  41. updateDetailInvoiceDate
  42. } from '@/api/financeBook.js'
  43. export default {
  44. name: 'InvoiceModal',
  45. props: {
  46. show: [Boolean],
  47. info: {
  48. type: Object,
  49. default: () => {
  50. return null
  51. }
  52. }
  53. },
  54. data () {
  55. return {
  56. opened: this.show,
  57. spinning: false,
  58. title: '开票日期',
  59. confirmLoading: false,
  60. formItemLayout: {
  61. labelCol: {
  62. span: 6
  63. },
  64. wrapperCol: {
  65. span: 18
  66. }
  67. },
  68. form: {
  69. no: undefined,
  70. payerName: undefined,
  71. invoiceDate: undefined,
  72. bookDetailSn: ''
  73. }
  74. }
  75. },
  76. methods: {
  77. disabledDate (current) {
  78. return current && current < moment().startOf('day')
  79. },
  80. disabledDateTime (date) {
  81. if (!date) {
  82. date = moment()
  83. }
  84. return {
  85. disabledHours: () => this.getDisabledHours(date.format('YYYY-MM-DD HH:mm:ss')),
  86. disabledMinutes: () => this.getDisabledMinutes(date.format('YYYY-MM-DD HH:mm:ss')),
  87. disabledSeconds: () => this.getDisabledSeconds(date.format('YYYY-MM-DD HH:mm:ss'))
  88. }
  89. },
  90. // 禁用时间范围 时
  91. getDisabledHours (nowTime) {
  92. const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
  93. const time = nowTime.split(' ')
  94. const times = todayDate.split(' ')
  95. const timeArrs = times[1].split(':')
  96. const hours = []
  97. if (todayDate.split(' ')[0] == time[0]) {
  98. for (var i = 0; i < parseInt(timeArrs[0]); i++) {
  99. hours.push(i)
  100. }
  101. }
  102. return hours
  103. },
  104. // 禁用时间范围 分
  105. getDisabledMinutes (nowTime) {
  106. const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
  107. const time = nowTime.split(' ')
  108. const times = todayDate.split(' ')
  109. const timeArr = time[1].split(':')
  110. const timeArrs = times[1].split(':')
  111. const minutes = []
  112. if (todayDate.split(' ')[0] == time[0] && timeArrs[0] == timeArr[0]) {
  113. for (var i = 0; i < parseInt(timeArrs[1]); i++) {
  114. minutes.push(i)
  115. }
  116. }
  117. return minutes
  118. },
  119. // 禁用时间范围 秒
  120. getDisabledSeconds (nowTime) {
  121. const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
  122. const time = nowTime.split(' ')
  123. const times = todayDate.split(' ')
  124. const timeArr = time[1].split(':')
  125. const timeArrs = times[1].split(':')
  126. const second = []
  127. if (todayDate.split(' ')[0] == time[0] && timeArrs[0] == timeArr[0] && timeArrs[1] == timeArr[1]) {
  128. for (var i = 0; i <= parseInt(timeArrs[2]); i++) {
  129. second.push(i)
  130. }
  131. }
  132. return second
  133. },
  134. // 保存
  135. handleSubmit (e) {
  136. const _this = this
  137. const invoiceDate = moment(this.form.invoiceDate).format('YYYY-MM-DD')
  138. const ajax_form = {
  139. 'bookDetailSn': this.form.bookDetailSn,
  140. 'invoiceDate': this.form.invoiceDate ? invoiceDate : ''
  141. }
  142. _this.spinning = true
  143. updateDetailInvoiceDate(ajax_form).then(res => {
  144. if (res.status == 200) {
  145. _this.$message.success(res.message)
  146. _this.cancel()
  147. _this.spinning = false
  148. } else {
  149. _this.spinning = false
  150. }
  151. })
  152. },
  153. cancel () {
  154. this.opened = false
  155. this.$emit('cancel')
  156. this.$refs.ruleForm.resetFields()
  157. }
  158. },
  159. watch: {
  160. show (newValue, oldValue) {
  161. this.opened = newValue
  162. if (!newValue) {
  163. this.cancel()
  164. } else {
  165. this.form = this.info
  166. }
  167. }
  168. }
  169. }
  170. </script>
  171. <style lang="less" scoped>
  172. .ant-form-item{
  173. margin-bottom:0 !important;
  174. }
  175. </style>