auditRejectModal.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <a-modal
  3. centered
  4. class="auditRejectModal-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :closable="false"
  8. title="备注原因"
  9. v-model="isShow"
  10. @cancle="isShow=false"
  11. :width="800">
  12. <div>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <a-form-model
  15. id="auditRejectModal-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="备货单号">
  23. {{ (itemData && itemData.dispatchBillNo) || '--' }}
  24. </a-form-model-item>
  25. <a-form-model-item label="原因" prop="remarks">
  26. <a-input
  27. id="auditRejectModal-remarks"
  28. :maxLength="100"
  29. type="textarea"
  30. v-model.trim="form.remarks"
  31. ref="remarks"
  32. placeholder="请输入原因(最多100个字符)"
  33. allowClear />
  34. </a-form-model-item>
  35. </a-form-model>
  36. <div class="btn-cont">
  37. <a-button type="primary" id="auditRejectModal-save" @click="handleSave">提交</a-button>
  38. <a-button id="auditRejectModal-cancel" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  39. </div>
  40. </a-spin>
  41. </div>
  42. </a-modal>
  43. </template>
  44. <script>
  45. export default {
  46. name: 'AuditRejectModal',
  47. props: {
  48. openModal: { // 弹框显示状态
  49. type: Boolean,
  50. default: false
  51. },
  52. spinning: {
  53. type: Boolean,
  54. default: false
  55. },
  56. itemData: {
  57. type: Object,
  58. default: () => {
  59. return {}
  60. }
  61. }
  62. },
  63. data () {
  64. return {
  65. isShow: this.openModal, // 是否打开弹框
  66. formItemLayout: {
  67. labelCol: { span: 4 },
  68. wrapperCol: { span: 17 }
  69. },
  70. form: {
  71. remarks: ''
  72. },
  73. rules: {
  74. remarks: [
  75. { required: false, message: '请输入原因', trigger: 'blur' }
  76. ]
  77. },
  78. detailData: null // 数据详情
  79. }
  80. },
  81. methods: {
  82. // 保存
  83. handleSave () {
  84. const _this = this
  85. this.$refs.ruleForm.validate(valid => {
  86. if (valid) {
  87. _this.$emit('ok', _this.form.remarks)
  88. } else {
  89. console.log('error submit!!')
  90. return false
  91. }
  92. })
  93. }
  94. },
  95. watch: {
  96. // 父页面传过来的弹框状态
  97. openModal (newValue, oldValue) {
  98. this.isShow = newValue
  99. },
  100. // 重定义的弹框状态
  101. isShow (newValue, oldValue) {
  102. if (!newValue) {
  103. this.$emit('close')
  104. this.$refs.ruleForm.resetFields()
  105. } else {
  106. // 默认首项获取焦点
  107. const _this = this
  108. setTimeout(() => {
  109. if (_this.$refs['remarks']) {
  110. _this.$refs['remarks'].focus()
  111. }
  112. }, 300)
  113. }
  114. }
  115. }
  116. }
  117. </script>
  118. <style lang="less">
  119. .auditRejectModal-modal{
  120. .ant-modal-body {
  121. padding: 40px 40px 24px;
  122. }
  123. .btn-cont {
  124. text-align: center;
  125. margin: 35px 0 30px;
  126. }
  127. }
  128. </style>