exportExcelModal.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <a-modal
  3. centered
  4. :footer="null"
  5. :maskClosable="false"
  6. class="export-excel-modal"
  7. title="选择导出方式"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="600">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="export-excel-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="导出库存" prop="exportType">
  21. <a-radio-group v-model="form.exportType">
  22. <a-radio value="all">所有</a-radio>
  23. <a-radio value="type">分类汇总导出</a-radio>
  24. </a-radio-group>
  25. </a-form-model-item>
  26. </a-form-model>
  27. <div class="btn-cont">
  28. <a-button type="primary" id="export-excel-save" @click="handleSave()">导出</a-button>
  29. <a-button id="export-excel-back" @click="handleCancel" style="margin-left: 15px;">取消</a-button>
  30. </div>
  31. </a-spin>
  32. </a-modal>
  33. </template>
  34. <script>
  35. export default {
  36. props: {
  37. openModal: { // 弹框显示状态
  38. type: Boolean,
  39. default: false
  40. },
  41. itemData: {
  42. type: Object,
  43. default: () => {
  44. return null
  45. }
  46. }
  47. },
  48. data () {
  49. return {
  50. isShow: this.openModal, // 是否打开弹框
  51. form: {
  52. exportType: 'all'
  53. },
  54. rules: {
  55. exportType: [{ required: true, message: '请选择导出方式', trigger: 'change' }]
  56. },
  57. formItemLayout: {
  58. labelCol: { span: 6 },
  59. wrapperCol: { span: 18 }
  60. },
  61. spinning: false
  62. }
  63. },
  64. methods: {
  65. // 确认
  66. handleSave (isPrint) {
  67. const _this = this
  68. this.$refs.ruleForm.validate(valid => {
  69. if (valid) {
  70. _this.$emit('ok', _this.form.exportType)
  71. _this.isShow = false
  72. } else {
  73. console.log('error submit!!')
  74. return false
  75. }
  76. })
  77. },
  78. // 取消选择分类
  79. handleCancel () {
  80. this.isShow = false
  81. }
  82. },
  83. watch: {
  84. // 父页面传过来的弹框状态
  85. openModal (newValue, oldValue) {
  86. this.isShow = newValue
  87. },
  88. // 重定义的弹框状态
  89. isShow (newValue, oldValue) {
  90. if (!newValue) {
  91. this.$emit('close')
  92. this.$refs.ruleForm.resetFields()
  93. }
  94. }
  95. }
  96. }
  97. </script>
  98. <style lang="less">
  99. .export-excel-modal{
  100. .btn-cont {
  101. text-align: center;
  102. margin: 35px 0 10px;
  103. }
  104. }
  105. </style>