预约登记报表

src/router/index.js

@@ -244,6 +244,11 @@ const routes = [
         name: "总检医生诊台",
         component: () => import("../views/doctorCheck/sumDoctorCheck.vue"),
       },
+      {
+        path: "/personnelBatch",
+        name: "人员预约登记",
+        component: () => import("../views/doctorCheck/personnelBatch.vue"),
+      },
       //----------------------  体   检  end  ----------------------
     ],
   },

src/views/Home.vue

@@ -247,6 +247,10 @@
                 <el-dropdown-item
                   @click.native="$router.push({ path: '/sumDoctorCheck' })"
                   >总检医生诊台</el-dropdown-item
+                >
+                   <el-dropdown-item
+                  @click.native="$router.push({ name: '/personnelBatch' }.catch(()=>{}))"
+                  >人员预约登记</el-dropdown-item
                 >
               </el-dropdown-menu>
             </el-dropdown>

src/views/doctorCheck/personnelBatch.vue

@@ -0,0 +1,153 @@
+<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) => {
+            // this.importData.push(row.values);
+            // console.log(`第${rowNumber}行的数据：${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;
+    },
+    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>