pengjun
2 years ago
4 changed files with 252 additions and 128 deletions
-
9src/router/index.js
-
3src/store/index.js
-
211src/views/Home.vue
-
155src/views/doctorCheck/personnelBatch.vue
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="清选择导入方式" |
|||
:visible.sync="dialogVisible1" |
|||
width="50%" |
|||
> |
|||
<div class="selectby"> |
|||
<el-radio v-model="radio" label="1">从Excle导入</el-radio> |
|||
<el-radio v-model="radio" label="2">备选项</el-radio> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible1 = false">取 消</el-button> |
|||
<el-button type="primary" @click="nextTick">下一步</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<!-- dialog2 --> |
|||
<el-dialog title="批量预登记" :visible.sync="dialogVisible2" width="50%"> |
|||
<div class="heading">导入EXCEL注意事项</div> |
|||
<div class="mainbody"> |
|||
<div class="boxtitle"> |
|||
<div> |
|||
导入Excel时，Excel的格式必须符合一定规范，该格式的模板文件放在程序 |
|||
</div> |
|||
<div>的执行目录下，文件名为："单位体检人员名单导入模板.xls"</div> |
|||
<div>注意事项如下:</div> |
|||
<div>1:姓名不能为空，其余数据可根据实际情况选择是否填写。</div> |
|||
<div> |
|||
2:部门、单位分组、性别、婚姻状况、人员类别、体检类别、民族必须与本软件 |
|||
</div> |
|||
<div>系统中的名称完全一致。</div> |
|||
<div> |
|||
3:年龄和出生日期可以只填一栏，系统将自动对年龄和出生日期进行相互转换。 |
|||
</div> |
|||
<div>4:Excel的实际列数不能超过20列。</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="back2">上一步</el-button> |
|||
<el-button type="primary" @click="nextstep">下一步</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<!-- --> |
|||
<el-dialog title="批量预约登记" :visible.sync="dialogVisible3" width="50%"> |
|||
<div class="selectfile"> |
|||
<div> |
|||
<div><input type="file" accept=".xlsx" @change="onFileChange" /></div> |
|||
|
|||
<div></div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="back3">上一步</el-button> |
|||
<el-button type="primary" @click="dialogVisible3 = false" |
|||
>确 定</el-button |
|||
> |
|||
</span> |
|||
</el-dialog> |
|||
<!-- --> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import ExcelJS from "exceljs"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
radio: "1", |
|||
dialogVisible1: true, |
|||
dialogVisible2: false, |
|||
dialogVisible3: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
onFileChange(event) { |
|||
// 获取上传的文件 |
|||
const file = event.target.files[0]; |
|||
// 调用导入Excel文件的方法 |
|||
this.importExcelFile(file); |
|||
}, |
|||
importExcelFile(file) { |
|||
this.filepopupdialogVisible = true; |
|||
|
|||
console.log("333"); |
|||
// 创建一个工作簿 |
|||
const workbook = new ExcelJS.Workbook(); |
|||
// 读取Excel文件 |
|||
const reader = new FileReader(); |
|||
console.log(reader); |
|||
reader.onload = () => { |
|||
const buffer = reader.result; |
|||
const typedArray = new Uint8Array(buffer); |
|||
const blob = new Blob([typedArray], { |
|||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", |
|||
}); |
|||
|
|||
// 从Blob中读取Excel文件 |
|||
workbook.xlsx.load(blob).then((workbook) => { |
|||
// 获取第一个工作表 |
|||
const worksheet = workbook.getWorksheet(1); |
|||
// 处理Excel文件内容 |
|||
worksheet.eachRow((row, rowNumber) => { |
|||
console.log(row.values); |
|||
// this.importData.push(row.values); |
|||
// console.log(`第${row.rowNumber}行的数据：${row.rowData}`); |
|||
}); |
|||
}); |
|||
}; |
|||
reader.readAsArrayBuffer(file); |
|||
}, |
|||
nextTick() { |
|||
if (this.radio == 1) { |
|||
this.dialogVisible1 = false; |
|||
this.dialogVisible2 = true; |
|||
} |
|||
console.log(this.radio); |
|||
}, |
|||
back3() { |
|||
this.dialogVisible3 = false; |
|||
this.dialogVisible2 = true; |
|||
}, |
|||
// 上一步 |
|||
back2() { |
|||
this.dialogVisible2 = false; |
|||
this.dialogVisible1 = true; |
|||
}, |
|||
//下一步 |
|||
nextstep() { |
|||
this.dialogVisible3 = true; |
|||
this.dialogVisible2 = false; |
|||
}, |
|||
loading() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.selectfile { |
|||
display: flex; |
|||
} |
|||
.boxtitle { |
|||
margin-left: 25%; |
|||
margin-top: 20px; |
|||
} |
|||
.mainbody { |
|||
width: 100%; |
|||
} |
|||
.heading { |
|||
text-align: center; |
|||
font-size: 18px; |
|||
} |
|||
.selectby { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue