invoiceModal.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  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. remarks: ''
  77. }
  78. }
  79. },
  80. methods: {
  81. disabledDate (current) {
  82. return current && current < moment().startOf('day')
  83. },
  84. disabledDateTime (date) {
  85. if (!date) {
  86. date = moment()
  87. }
  88. return {
  89. disabledHours: () => this.getDisabledHours(date.format('YYYY-MM-DD HH:mm:ss')),
  90. disabledMinutes: () => this.getDisabledMinutes(date.format('YYYY-MM-DD HH:mm:ss')),
  91. disabledSeconds: () => this.getDisabledSeconds(date.format('YYYY-MM-DD HH:mm:ss'))
  92. }
  93. },
  94. // 禁用时间范围 时
  95. getDisabledHours (nowTime) {
  96. const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
  97. const time = nowTime.split(' ')
  98. const times = todayDate.split(' ')
  99. const timeArrs = times[1].split(':')
  100. const hours = []
  101. if (todayDate.split(' ')[0] == time[0]) {
  102. for (var i = 0; i < parseInt(timeArrs[0]); i++) {
  103. hours.push(i)
  104. }
  105. }
  106. return hours
  107. },
  108. // 禁用时间范围 分
  109. getDisabledMinutes (nowTime) {
  110. const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
  111. const time = nowTime.split(' ')
  112. const times = todayDate.split(' ')
  113. const timeArr = time[1].split(':')
  114. const timeArrs = times[1].split(':')
  115. const minutes = []
  116. if (todayDate.split(' ')[0] == time[0] && timeArrs[0] == timeArr[0]) {
  117. for (var i = 0; i < parseInt(timeArrs[1]); i++) {
  118. minutes.push(i)
  119. }
  120. }
  121. return minutes
  122. },
  123. // 禁用时间范围 秒
  124. getDisabledSeconds (nowTime) {
  125. const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
  126. const time = nowTime.split(' ')
  127. const times = todayDate.split(' ')
  128. const timeArr = time[1].split(':')
  129. const timeArrs = times[1].split(':')
  130. const second = []
  131. if (todayDate.split(' ')[0] == time[0] && timeArrs[0] == timeArr[0] && timeArrs[1] == timeArr[1]) {
  132. for (var i = 0; i <= parseInt(timeArrs[2]); i++) {
  133. second.push(i)
  134. }
  135. }
  136. return second
  137. },
  138. // 保存
  139. handleSubmit (e) {
  140. const _this = this
  141. const invoiceDate = moment(this.form.invoiceDate).format('YYYY-MM-DD')
  142. const ajax_form = {
  143. bookDetailSn: this.form.bookDetailSn,
  144. invoiceDate: this.form.invoiceDate ? invoiceDate : '',
  145. remarks: this.form.remarks
  146. }
  147. _this.spinning = true
  148. updateDetailInvoiceDate(ajax_form).then(res => {
  149. if (res.status == 200) {
  150. _this.$message.success(res.message)
  151. _this.cancel(1)
  152. _this.spinning = false
  153. } else {
  154. _this.spinning = false
  155. }
  156. })
  157. },
  158. cancel (flag) {
  159. this.opened = false
  160. this.$emit('cancel',flag)
  161. this.$refs.ruleForm.resetFields()
  162. }
  163. },
  164. watch: {
  165. show (newValue, oldValue) {
  166. this.opened = newValue
  167. if (!newValue) {
  168. this.$refs.ruleForm.resetFields()
  169. } else {
  170. this.form = this.info
  171. }
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="less" scoped>
  177. .ant-form-item{
  178. margin-bottom:0 !important;
  179. }
  180. </style>