baseModal.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :width="600"
  8. :footer="null"
  9. @cancel="cancel"
  10. >
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="chooseCustom-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol">
  19. <a-form-model-item label="客户名称" prop="dealerSn">
  20. <dealerSubareaScopeList :disabled="!!itemSn" ref="dealer" @change="custChange" />
  21. </a-form-model-item>
  22. <a-form-model-item label="备注" prop="remarks">
  23. <a-textarea :rows="4" :maxLength="300" placeholder="请输入备注(最多300个字符)" v-model="form.remarks"></a-textarea>
  24. </a-form-model-item>
  25. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
  26. <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
  27. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  28. </a-form-model-item>
  29. </a-form-model>
  30. </a-spin>
  31. </a-modal>
  32. </template>
  33. <script>
  34. import { commonMixin } from '@/utils/mixin'
  35. import { VSelect } from '@/components'
  36. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  37. import { verifyAccountBillCreate, verifyAccountBillModify, verifyAcountBillDetail, findLastBillRemarks } from '@/api/verifyAccount.js'
  38. export default {
  39. name: 'ASBaseModal',
  40. mixins: [commonMixin],
  41. components: { VSelect, dealerSubareaScopeList },
  42. props: {
  43. show: [Boolean],
  44. itemSn: {
  45. type: String,
  46. default: ''
  47. }
  48. },
  49. data () {
  50. return {
  51. opened: this.show,
  52. spinning: false,
  53. disabled: false,
  54. title: '新增对账单',
  55. confirmLoading: false,
  56. formItemLayout: {
  57. labelCol: { span: 4 },
  58. wrapperCol: { span: 18 }
  59. },
  60. form: {
  61. dealerSn: undefined,
  62. dealerName: undefined,
  63. remarks: ''
  64. },
  65. rules: {
  66. dealerSn: [ { required: true, message: '请选择客户', trigger: ['change', 'blur'] } ],
  67. remarks: [{ required: true, message: '请输入备注', trigger: ['change', 'blur'] }]
  68. }
  69. }
  70. },
  71. methods: {
  72. // 客户
  73. custChange (v) {
  74. if (v && v.key) {
  75. this.form.dealerSn = v.key
  76. this.form.dealerName = v.row ? v.row.dealerName : ''
  77. this.getDefRemarks()
  78. } else {
  79. this.form.dealerSn = ''
  80. this.form.dealerName = ''
  81. }
  82. },
  83. // 获取上次备注
  84. async getDefRemarks () {
  85. const data = await findLastBillRemarks({ sn: this.form.dealerSn }).then(res => res.data)
  86. this.form.remarks = data ? data.remarks || '' : ''
  87. },
  88. // 保存
  89. handleSubmit (e) {
  90. e.preventDefault()
  91. const _this = this
  92. this.$refs.ruleForm.validate(valid => {
  93. if (valid) {
  94. _this.salesSaveFun()
  95. } else {
  96. return false
  97. }
  98. })
  99. },
  100. // 新建或编辑销售单
  101. salesSaveFun () {
  102. const _this = this
  103. const form = JSON.parse(JSON.stringify(_this.form))
  104. // 编辑 or 新增
  105. const funs = form.verifyAccountBillSn ? verifyAccountBillModify : verifyAccountBillCreate
  106. _this.spinning = true
  107. funs(form).then(res => {
  108. if (res.status == 200) {
  109. _this.$message.success(res.message)
  110. // 编辑
  111. if (this.itemSn) {
  112. _this.$emit('refashData')
  113. } else {
  114. // 新增
  115. _this.$router.push({ name: 'accountStatementEdit', params: { sn: res.data.verifyAccountBillSn } })
  116. }
  117. _this.cancel()
  118. }
  119. _this.spinning = false
  120. })
  121. },
  122. // 详情
  123. getDetail () {
  124. this.title = '编辑对账单'
  125. this.spinning = true
  126. this.confirmLoading = true
  127. verifyAcountBillDetail({ sn: this.itemSn }).then(res => {
  128. if (res.status == 200) {
  129. const data = res.data
  130. this.form = Object.assign(this.form, data)
  131. // 回显客户
  132. if (this.form.dealerSn) {
  133. this.$nextTick(() => {
  134. this.$refs.dealer.getDetail(this.form.dealerSn)
  135. })
  136. }
  137. } else {
  138. this.$refs.ruleForm.resetFields()
  139. }
  140. this.spinning = false
  141. this.confirmLoading = false
  142. })
  143. },
  144. cancel () {
  145. this.opened = false
  146. this.$emit('cancel')
  147. this.$refs.ruleForm.resetFields()
  148. },
  149. async pageInit () {
  150. this.$nextTick(() => {
  151. this.$refs.ruleForm.resetFields()
  152. if (this.$refs.dealer) {
  153. this.$refs.dealer.resetForm()
  154. }
  155. })
  156. this.form = {
  157. dealerSn: undefined,
  158. dealerName: undefined,
  159. remarks: ''
  160. }
  161. // 编辑页
  162. if (this.itemSn) {
  163. this.getDetail()
  164. }
  165. }
  166. },
  167. watch: {
  168. show (newValue, oldValue) {
  169. this.opened = newValue
  170. if (newValue) {
  171. this.pageInit()
  172. }
  173. }
  174. }
  175. }
  176. </script>