功能变化(CRUD组件): 添加导入功能

dvadmin-ui/src/components/ModelDisplay/index.vue

@@ -302,12 +302,43 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-
+    <!-- 导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <div class="el-upload__tip" slot="tip">
+          <el-checkbox v-model="upload.updateSupport"/>
+          是否更新已经存在的数据
+          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
+        </div>
+        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
   import moment from 'moment';
   import * as Utils from '@/utils';
+  import {getToken} from '@/utils/auth'
 
   export default {
     name: 'ModelDisplay',
@@ -441,6 +472,8 @@
         submitFormApi: '',
         // 单个查询api
         selectApi: '',
+        // 导入api
+        importApi: '',
         DictsOptions: {},
         getRowKeys: row => {
           if (this.rowKey) {
@@ -449,6 +482,21 @@
           return row.id || row.uuid;
         },
         title: '',
+        // 用户导入参数
+        upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: '',
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: {Authorization: 'Bearer ' + getToken()},
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + '/admin/system/savefile/'
+        },
       };
     },
     computed: {
@@ -799,7 +847,7 @@
       },
       /** 导入按钮操作 */
       handleImport() {
-        this.upload.title = '用户导入'
+        this.upload.title = '导入'
         this.upload.open = true
       }, /** 获取表单校验 */
       getFormRules() {
@@ -849,6 +897,44 @@
           }
         })
         return Permis
+      },
+      /** 下载模板操作 */
+      importTemplate() {
+        this.funcs.map(value => {
+          if (value.type === 'import') {
+            this.importApi = value
+          }
+        })
+        this.importApi.template_api().then(response => {
+          this.download(response.data.file_url, response.data.name)
+        })
+      },
+      // 文件上传中处理
+      handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+      },
+      // 文件上传成功处理
+      handleFileSuccess(response, file, fileList) {
+        this.funcs.map(value => {
+          if (value.type === 'import') {
+            this.importApi = value
+          }
+        })
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        // 是否更新已经存在的用户数据
+        this.importApi.api({
+          file_url: response.data.file_url,
+          updateSupport: this.upload.updateSupport
+        }).then(response => {
+          this.$alert('导入成功！', '导入结果', {dangerouslyUseHTMLString: true})
+          this.getTableData()
+        })
+      },
+      // 提交上传文件
+      submitFileForm() {
+        this.$refs.upload.submit()
       }
     }
   };