auditModal.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <a-modal
  3. centered
  4. class="audit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. @cancle="isShow=false"
  9. :width="416">
  10. <a-spin :spinning="spinning" tip="Loading...">
  11. <div class="audit-main">
  12. <a-icon type="question-circle" style="color: #faad14;font-size: 22px;margin-right: 16px;" />
  13. <div class="audit-cont">
  14. <p class="audit-tit">提示</p>
  15. <p class="audit-txt">{{ content || '请点击下方按钮确认操作?' }}</p>
  16. </div>
  17. </div>
  18. <div class="btn-box">
  19. <a-button type="primary" class="button-error" @click="handleAuditFail" v-if="isCancel">{{ cancelText || '审核不通过' }}</a-button>
  20. <a-button type="primary" class="button-info" @click="handleAuditOk">{{ okText || '审核通过' }}</a-button>
  21. </div>
  22. </a-spin>
  23. </a-modal>
  24. </template>
  25. <script>
  26. export default {
  27. name: 'AuditModal',
  28. props: {
  29. openModal: { // 弹框显示状态
  30. type: Boolean,
  31. default: false
  32. },
  33. content: {
  34. type: String,
  35. default: '请点击下方按钮确认操作?'
  36. },
  37. okText: {
  38. type: String,
  39. default: '审核通过'
  40. },
  41. cancelText: {
  42. type: String,
  43. default: '审核不通过'
  44. },
  45. isCancel: {
  46. type: Boolean,
  47. default: true
  48. },
  49. spinning: {
  50. type: Boolean,
  51. default: false
  52. }
  53. },
  54. data () {
  55. return {
  56. isShow: this.openModal // 是否打开弹框
  57. }
  58. },
  59. methods: {
  60. // 审核通过
  61. handleAuditOk () {
  62. this.$emit('ok')
  63. },
  64. // 审核不通过
  65. handleAuditFail () {
  66. this.$emit('fail')
  67. }
  68. },
  69. watch: {
  70. // 父页面传过来的弹框状态
  71. openModal (newValue, oldValue) {
  72. this.isShow = newValue
  73. },
  74. // 重定义的弹框状态
  75. isShow (newValue, oldValue) {
  76. if (!newValue) {
  77. this.$emit('close')
  78. }
  79. }
  80. }
  81. }
  82. </script>
  83. <style lang="less">
  84. .audit-modal{
  85. .ant-modal-body{
  86. padding: 32px 32px 24px;
  87. }
  88. .audit-main{
  89. display: flex;
  90. .audit-cont{
  91. .audit-tit{
  92. color: rgba(0, 0, 0);
  93. font-weight: 500;
  94. font-size: 16px;
  95. line-height: 1.4;
  96. margin: 0;
  97. }
  98. .audit-txt{
  99. margin: 8px 0 0;
  100. color: rgba(0, 0, 0);
  101. font-size: 14px;
  102. line-height: 1.5;
  103. }
  104. }
  105. }
  106. .btn-box{
  107. text-align: right;
  108. margin-top: 24px;
  109. }
  110. }
  111. </style>