baseModal.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :confirmLoading="confirmLoading"
  8. :width="800"
  9. :footer="null"
  10. @cancel="cancel"
  11. >
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="chooseCustom-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol">
  20. <a-form-model-item label="收款事由" prop="buyerSn">
  21. <a-input maxLength="100" placeholder="请输入收款事由(最多100个字符)"></a-input>
  22. </a-form-model-item>
  23. <a-form-model-item label="备注">
  24. <a-textarea :rows="4" maxLength="500" placeholder="请输入备注(最多500个字符)"></a-textarea>
  25. </a-form-model-item>
  26. <a-form-model-item label="附件" help="(支持图片、word、excel、PDF等格式,最多10个附件)">
  27. <Upload
  28. style="height: 100%;"
  29. v-model="form.attachList"
  30. ref="attachList"
  31. :fileSize="10"
  32. :maxNums="10"
  33. fileType="*"
  34. uploadType="attach"
  35. :action="attachAction"
  36. @change="changeAttach"
  37. upText="上传附件"></Upload>
  38. </a-form-model-item>
  39. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
  40. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  41. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  42. </a-form-model-item>
  43. </a-form-model>
  44. </a-spin>
  45. </a-modal>
  46. </template>
  47. <script>
  48. import { commonMixin } from '@/utils/mixin'
  49. import { VSelect, Upload } from '@/components'
  50. import { salesSave } from '@/api/sales'
  51. export default {
  52. name: 'SalesChooseCustomModal',
  53. mixins: [commonMixin],
  54. components: { VSelect, Upload },
  55. props: {
  56. show: [Boolean]
  57. },
  58. data () {
  59. return {
  60. opened: this.show,
  61. spinning: false,
  62. title: '新增财务收款单',
  63. confirmLoading: false,
  64. formItemLayout: {
  65. labelCol: { span: 4 },
  66. wrapperCol: { span: 18 }
  67. },
  68. form: {
  69. buyerSn: undefined, // 客户sn
  70. buyerName: '',
  71. settleStyleSn: undefined
  72. },
  73. rules: {
  74. buyerSn: [ { required: true, message: '请选择客户', trigger: ['change', 'blur'] } ]
  75. }
  76. }
  77. },
  78. methods: {
  79. // 保存
  80. handleSubmit (e) {
  81. e.preventDefault()
  82. const _this = this
  83. this.$refs.ruleForm.validate(valid => {
  84. if (valid) {
  85. _this.salesSaveFun()
  86. } else {
  87. return false
  88. }
  89. })
  90. },
  91. // 新建或编辑销售单
  92. salesSaveFun () {
  93. const _this = this
  94. const form = this.form
  95. _this.spinning = true
  96. salesSave(form).then(res => {
  97. if (res.status == 200) {
  98. _this.$message.success(res.message)
  99. _this.$emit('ok', res.data)
  100. if (_this.form.id) {
  101. _this.$emit('updateData')
  102. }
  103. _this.cancel()
  104. _this.spinning = false
  105. } else {
  106. _this.spinning = false
  107. }
  108. })
  109. },
  110. cancel () {
  111. this.opened = false
  112. this.$emit('cancel')
  113. this.$refs.ruleForm.resetFields()
  114. }
  115. },
  116. watch: {
  117. show (newValue, oldValue) {
  118. this.opened = newValue
  119. if (!newValue) {
  120. this.$refs.ruleForm.resetFields()
  121. }
  122. }
  123. }
  124. }
  125. </script>