invoiceModal.vue 5.2 KB

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