JImportModal.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <a-modal
  3. title="导入EXCEL"
  4. :width="600"
  5. :visible="visible"
  6. :confirmLoading="uploading"
  7. @cancel="handleClose">
  8. <a-upload
  9. name="file"
  10. :multiple="true"
  11. accept=".xls,.xlsx"
  12. :fileList="fileList"
  13. :remove="handleRemove"
  14. :beforeUpload="beforeUpload">
  15. <a-button>
  16. <a-icon type="upload"/>
  17. 选择导入文件
  18. </a-button>
  19. </a-upload>
  20. <template slot="footer">
  21. <a-button @click="handleClose">关闭</a-button>
  22. <a-button
  23. type="primary"
  24. @click="handleImport"
  25. :disabled="fileList.length === 0"
  26. :loading="uploading">
  27. {{ uploading ? '上传中...' : '开始上传' }}
  28. </a-button>
  29. </template>
  30. </a-modal>
  31. </template>
  32. <script>
  33. import {postAction} from '@/api/manage'
  34. export default {
  35. name: 'JImportModal',
  36. props: {
  37. url: {
  38. type: String,
  39. default: '',
  40. required: false
  41. }
  42. },
  43. data() {
  44. return {
  45. visible: false,
  46. uploading: false,
  47. fileList: [],
  48. uploadAction: ''
  49. }
  50. },
  51. watch: {
  52. url(val) {
  53. if (val) {
  54. this.uploadAction = window._CONFIG['domianURL'] + val
  55. }
  56. }
  57. },
  58. created() {
  59. this.uploadAction = window._CONFIG['domianURL'] + this.url
  60. },
  61. methods: {
  62. handleClose() {
  63. this.visible = false
  64. },
  65. show() {
  66. this.fileList = []
  67. this.uploading = false
  68. this.visible = true
  69. },
  70. handleRemove(file) {
  71. const index = this.fileList.indexOf(file);
  72. const newFileList = this.fileList.slice();
  73. newFileList.splice(index, 1);
  74. this.fileList = newFileList
  75. },
  76. beforeUpload(file) {
  77. this.fileList = [...this.fileList, file]
  78. return false;
  79. },
  80. handleImport() {
  81. const {fileList} = this;
  82. const formData = new FormData();
  83. fileList.forEach((file) => {
  84. formData.append('files[]', file);
  85. });
  86. this.uploading = true
  87. postAction(this.uploadAction, formData).then((res) => {
  88. this.uploading = false
  89. if (res.success) {
  90. this.$message.success(res.message)
  91. this.visible = false
  92. this.$emit('ok')
  93. } else {
  94. this.$message.warning(res.message)
  95. }
  96. })
  97. }
  98. }
  99. }
  100. </script>
  101. <style scoped>
  102. </style>