居民信息采集-Excel导入导出

src/views/modules/user/housinginformation.vue

@@ -45,6 +45,21 @@
           <el-button type="info"
                      @click="exportMoudleHandle()">导出模板</el-button>
         </el-form-item>
+        <el-form-item>
+          <el-upload class="upload-demo"
+                     ref="upload"
+                     :before-upload="handlePreview"
+                     :action="uploadUrl"
+                     :limit="1"
+                     :on-success='uploadSuccess'
+                     :on-error='errorExceed'>
+            <el-button type="primary">点击上传</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary"
+                     @click="exportHandle()">{{ $t('export') }}</el-button>
+        </el-form-item>
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
         <el-table-column label="序号" width="70px"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
@@ -83,6 +98,30 @@
       <!-- 弹窗, 新增 / 修改 -->
       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
       <housinginformation-detail v-if="detailVisible" ref="housinginformationDetail" @refreshDataList="getDataList"></housinginformation-detail>
+      <!-- 错误信息 -->
+      <el-dialog :visible.sync="faultDataVisible"
+                 title="请修改后重新提交">
+        <el-table :data="errorDataList"
+                  border
+                  style="width: 100%;">
+          <el-table-column prop="sheetName"
+                           label="所属Sheet"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="errorLine"
+                           label="行数"
+                           header-align="center"
+                           align="center"></el-table-column>
+          <el-table-column prop="errorInfo"
+                           label="错误信息"
+                           header-align="center"
+                           align="center"></el-table-column>
+        </el-table>
+        <template slot="footer">
+          <el-button type="primary"
+                     @click="faultDataVisible = false">确定</el-button>
+        </template>
+      </el-dialog>
     </div>
   </el-card>
 </template>
@@ -91,6 +130,8 @@
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './housinginformation-add-or-update'
 import HousinginformationDetail from './housinginformation-detail'
+import Cookies from 'js-cookie'
+
 export default {
   mixins: [mixinViewModule],
   data () {
@@ -104,7 +145,8 @@ export default {
         exportMoudle: '/app-user/housinginformation/exportModule'
       },
       dataForm: {
-        id: ''
+        id: '',
+        gridId: ''
       },
       deptIdList: [],
       options: [],
@@ -122,7 +164,10 @@ export default {
           label: '经营'
         }
       ],
-      detailVisible: false
+      detailVisible: false,
+      uploadUrl: '',
+      faultDataVisible: false,
+      errorDataList: []
     }
   },
   components: {
@@ -150,6 +195,7 @@ export default {
         this.dataForm.streetId = this.deptIdList[0]
         this.dataForm.communityId = this.deptIdList[1]
         this.dataForm.gridId = this.deptIdList[2]
+        this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/app-user/housinginformation/importExcel?gridId=${this.deptIdList[2]}&token=${Cookies.get('token')}`
       }
     }
   },
@@ -164,6 +210,7 @@ export default {
       })
       .catch(() => { })
     this.getDataList()
+    this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/app-user/housinginformation/importExcel?gridId=${this.dataForm.gridId}&token=${Cookies.get('token')}`
   },
   methods: {
     houseUseFormatter: function (row, column) {
@@ -186,6 +233,37 @@ export default {
     lookResidentInfo (id) {
       this.$parent.selectComponent = 'Househeadedit'
       this.$router.push({ path: '/user-houseinfomationroute', query: { id: id } })
+    },
+    errorExceed (file, fileList) {
+      this.$message.error('上传失败请重试')
+    },
+    uploadError (error, file, fileList) {
+      this.$message.error(error)
+    },
+    handlePreview (file) {
+      if (this.dataForm.gridId === undefined || this.dataForm.gridId === '') {
+        this.$message.error('请选择网格后导入')
+        return false
+      }
+    },
+    uploadSuccess (response, file, fileList) {
+      this.$refs.upload.clearFiles()
+      if (response.code !== 0) {
+        return this.$message.error(response.msg)
+      }
+      if (response.data !== null && response.data.length > 0) {
+        this.faultDataVisible = true
+        this.errorDataList = response.data
+        return
+      }
+      this.$message({
+        message: this.$t('prompt.success'),
+        type: 'success',
+        duration: 500,
+        onClose: () => {
+          this.getDataList()
+        }
+      })
     }
   }
 }