uploadResidentInfo
This commit is contained in:
jiangrui
parent
be08fa25ba
commit
026cf8edfb
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
drag
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:on-change="handleExcelChange"
|
||||
multiple
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
|
||||
</el-upload>
|
||||
|
||||
<el-button type="primary" @click="emitData" style="margin-top: 10px;"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ReadExcel",
|
||||
data() {
|
||||
return {
|
||||
excelData: undefined,
|
||||
fileList: undefined
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleExcelChange(file, fileList) {
|
||||
console.log(file);
|
||||
let _this = this;
|
||||
let inputDOM = this.$refs.inputer;
|
||||
// 通过DOM取文件数据
|
||||
|
||||
this.file = event.currentTarget.files[0];
|
||||
|
||||
var rABS = false; //是否将文件读取为二进制字符串
|
||||
var f = this.file;
|
||||
|
||||
var reader = new FileReader();
|
||||
//if (!FileReader.prototype.readAsBinaryString) {
|
||||
FileReader.prototype.readAsBinaryString = function(f) {
|
||||
var binary = "";
|
||||
var rABS = false; //是否将文件读取为二进制字符串
|
||||
var pt = this;
|
||||
var wb; //读取完成的数据
|
||||
var outdata;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
var bytes = new Uint8Array(reader.result);
|
||||
var length = bytes.byteLength;
|
||||
for (var i = 0; i < length; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
var XLSX = require("xlsx");
|
||||
if (rABS) {
|
||||
wb = XLSX.read(btoa(fixdata(binary)), {
|
||||
//手动转化
|
||||
type: "base64"
|
||||
});
|
||||
} else {
|
||||
wb = XLSX.read(binary, {
|
||||
type: "binary"
|
||||
});
|
||||
}
|
||||
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
|
||||
_this.excelData = outdata;
|
||||
};
|
||||
reader.readAsArrayBuffer(f);
|
||||
};
|
||||
if (rABS) {
|
||||
reader.readAsArrayBuffer(f);
|
||||
} else {
|
||||
reader.readAsBinaryString(f);
|
||||
}
|
||||
},
|
||||
emitData() {
|
||||
let excelData = this.excelData;
|
||||
// let keys = [];
|
||||
// let total = [];
|
||||
|
||||
let obj = {
|
||||
avatar:
|
||||
"http://rangtang-1.oss-cn-chengdu.aliyuncs.com/ce1e99bf-40df-49cd-a77f-05849b662859.png",
|
||||
description: "zz",
|
||||
descriptionZ: "zzzw",
|
||||
duty: "zw",
|
||||
dutyZ: "zwzw",
|
||||
idCard: "510105198807190533",
|
||||
idCardAddress: "32323",
|
||||
isConvenience: true,
|
||||
isConvenienceLeader: false,
|
||||
isNews: false,
|
||||
isNewsLeader: false,
|
||||
isResidentsAdministrator: [],
|
||||
name: "abc",
|
||||
nameZ: "bbc",
|
||||
permanentResidenceRegion: "壤塘县",
|
||||
permanentResidenceTown: "石里乡",
|
||||
permanentResidenceTownShip: "阿斗村",
|
||||
phone: "13408085719",
|
||||
sex: 1,
|
||||
sort: "1"
|
||||
};
|
||||
let residentList = [];
|
||||
excelData.map(item => {
|
||||
let resident = {
|
||||
avatar: item["头像"],
|
||||
description: item["职责"],
|
||||
descriptionZ: item["职责（藏文）"],
|
||||
duty: item["职务"],
|
||||
dutyZ: item["职务（藏文）"],
|
||||
idCard: item["身份证号"],
|
||||
idCardAddress: item["身份证地址"],
|
||||
isConvenience: item["是否是便民工作人员"] === "是" ? true : false,
|
||||
isConvenienceLeader: item["是否是便民领导"] === "是" ? true : false,
|
||||
isNews: false,
|
||||
isNewsLeader: false,
|
||||
isResidentsAdministrator: [],
|
||||
name: item["姓名"],
|
||||
nameZ: item["姓名（藏文）"],
|
||||
permanentResidenceRegion: item["县"],
|
||||
permanentResidenceTown: item["乡镇"],
|
||||
permanentResidenceTownShip: item["村"],
|
||||
phone: item["手机号"],
|
||||
sex: item["性别"] === "女" ? 0 : item["性别"] === "男" ? 1 : 2,
|
||||
sort: item["序号"]
|
||||
};
|
||||
residentList.push(resident);
|
||||
// keys.push(item["手机号"]);
|
||||
// total.push(item["数量"]);
|
||||
});
|
||||
// const payload = {
|
||||
// // batchId: this.$route.query.id,
|
||||
// keys,
|
||||
// total
|
||||
// };
|
||||
// console.log(residentList);
|
||||
this.$emit("listenToChildEvent", residentList);
|
||||
},
|
||||
clearFileList() {
|
||||
this.excelData = undefined;
|
||||
this.$refs.upload.clearFiles();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -126,10 +126,10 @@ export default {
|
|||
// password: '111111'
|
||||
// },
|
||||
loginForm: {
|
||||
username: "", //18882564006
|
||||
captcha: "",
|
||||
// username: "18882564006", //18882564006
|
||||
// captcha: "111111",
|
||||
// username: "", //18882564006
|
||||
// captcha: "",
|
||||
username: "18882564006", //18882564006
|
||||
captcha: "111111",
|
||||
appVersion: "1.0.0",
|
||||
system: "IOS",
|
||||
device: navigator.userAgent,
|
||||
|
|
|
|||
|
|
@ -72,6 +72,15 @@
|
|||
style="font-size:12px;padding:10px 20px;margin-bottom:20px"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
:loading="excelUploading"
|
||||
v-has="'RESIDENT_IMPORT'"
|
||||
@click="handleExcelImport"
|
||||
type="primary"
|
||||
size="mini"
|
||||
style="font-size:12px;padding:10px 20px;margin-bottom:20px"
|
||||
>导入</el-button
|
||||
>
|
||||
<el-table :data="list" style="width: 100%" border v-loading="listLoading">
|
||||
<el-table-column prop="name" label="姓名" width="100">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -281,6 +290,16 @@
|
|||
<el-button type="primary" @click="deleteData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogExcelImport" width="30%">
|
||||
<ReadExcel @listenToChildEvent="getExcelData" ref="readExcel"></ReadExcel>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogExcelImport = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogExcelImport = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -295,9 +314,10 @@ import RegionSelect from "@/components/RegionSelect";
|
|||
import { getRegions } from "@/api/region";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import CutUpload from "@/components/cutUploadImage/index.vue";
|
||||
import ReadExcel from "@/components/ReadExcel/index";
|
||||
|
||||
export default {
|
||||
components: { Pagination, CutUpload, RegionSelect },
|
||||
components: { Pagination, CutUpload, RegionSelect, ReadExcel },
|
||||
data() {
|
||||
return {
|
||||
listLoading: false,
|
||||
|
|
@ -335,7 +355,9 @@ export default {
|
|||
},
|
||||
regionSearchVal: undefined,
|
||||
dialogDeleteConfirm: false,
|
||||
isStaff: false
|
||||
isStaff: false,
|
||||
excelUploading: false,
|
||||
dialogExcelImport: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -537,6 +559,31 @@ export default {
|
|||
// this.listQuery.params.isConvenience === undefined;
|
||||
// console.log(this.listQuery.params);
|
||||
// }
|
||||
},
|
||||
handleExcelImport() {
|
||||
this.dialogExcelImport = true;
|
||||
},
|
||||
getExcelData(data) {
|
||||
this.excelUploading = true;
|
||||
addResidentInfoList(data)
|
||||
.then(res => {
|
||||
if (res.c === 200) {
|
||||
this.$notify.success("导入成功");
|
||||
setTimeout(() => {
|
||||
this.excelUploading = false;
|
||||
}, 3000);
|
||||
this.dialogExcelImport = false;
|
||||
this.getList();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.excelUploading = false;
|
||||
}, 3000);
|
||||
this.dialogExcelImport = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.$notify.error(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue