peisweb/src/views/doctorCheck/personnelBatch.vue

<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="parseImportData(startRow)"
          >分析</el-button
        >
        <el-button type="primary" @click="nextclick">下一步</el-button>
      </span>
    </el-dialog>
    <!-- 录取弹框 -->
    <el-dialog title="批量预登记" :visible.sync="dialogVisible5" width="50%">
      <span style="margin-left: 30%; font-size: 18px">选择单位</span>
      <div class="subheading" style="margin-top: 10px">
        选择的病人必须直接属于该单位或者是该单位的一级部门,如果病人直接属于该单
      </div>
      <div class="subheading">立请将Exce1文件中该病人的部门名称设为空</div>
      <!-- row -->
      <el-row style="margin-top: 20px">
        <el-col :span="4" style="height: 40px; font-size: 18px">
          选择单位或部门:
        </el-col>
        <el-col :span="6">
          <el-cascader :options="departmentdata" :show-all-levels="false"  :props="{ value:'id',label: 'displayName',children: 'treeChildren'}"></el-cascader>
          <!-- <el-select v-model="value" placeholder="请选择" @change="onchange">
            <el-option
              v-for="item in departmentdata"
              :key="item.id"
              :label="item.displayName"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-col>
        <el-col :span="4" style="line-height: 40px; font-size: 18px"
          >单位设置</el-col
        >
      </el-row>
      <!-- row -->
      <div style="width: 100%">
        <div style="margin-top:10px;margin">
          相同姓名的病人
          <el-radio-group v-model="nameType" @input="splices">
            <el-radio label="同名病人提示">同名病人提示</el-radio>
            <el-radio label="仅本单位同名病人提示"
              >仅本单位同名病人提示</el-radio
            >
            <el-radio label="不提示">不提示</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div style="margin-top: 10px; margin-left: 10px">
        登记状态
        <el-radio-group v-model="nameType">
          <el-radio label="预登记">预登记</el-radio>
          <el-radio label="仅本单位同名病人提示">仅本单位同名病人提示</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-top: 10px">
        <div>工卡号</div>
        <div style="margin-top: 5px">
          <el-checkbox v-model="checked">工卡号作为档案号</el-checkbox>
        </div>
      </div>
      <div>
        <span>工卡号开始位置</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          type="number"
          style="width: 20%; margin-left: 10px"
        ></el-input>
        长度
        <el-input
          v-model="form.cardLength"
          placeholder="请输入内容"
          type="number"
          style="width: 20%; margin-left: 10px"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-checkbox v-model="form.isAutoCreateDepartment" @change="createornot"
          >自动创建部门</el-checkbox
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="submitto">确 定</el-button>
      </span>
    </el-dialog>

    <!--  -->
    <!--dialogVisible4  -->
    <el-dialog title="批量预约登记" :visible.sync="dialogVisible4" width="50%">
      <el-table
        :data="tableData"
        @row-click="rowclick"
        style="width: 100%"
        height="300px"
        highlight-current-row
        ref="singleTable"
      >
        <el-table-column
          v-for="(item, index) in tableDataCol"
          :key="index"
          :prop="item.excelCol"
          :label="item.label"
        />
      </el-table>
      <div style="margin-top: 20px">
        <div v-for="(item, index) in tableData" :key="index"></div>
        <el-button @click="setCurrent(tableData[0])">全选</el-button>
        <el-button @click="setCurrent()">取消选择</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">上一步</el-button>
        <el-button @click="back4">上一步</el-button>
        <el-button type="primary" @click="tablenext">下一步</el-button>
      </span>
    </el-dialog>
    <!--  -->
  </div>
</template>
<script>
import ExcelJS from "exceljs";
import { postapi, getapi } from "@/api/api";
export default {
  data() {
    return {
      checked: "",
      input: "",
      form: {
        nameType: "",
        cardLength: "",
        isAutoCreateDepartment: "N", //
        customerOrgId: "", //单位id
        isAutoCreatePatientNo: "N",
        cardStartNum: "0",
        patientName: "",
      },
      value: "",
      nameType: "1",
      currentRow: null,
      radio: "1",
      dialogVisible1: true,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      startRow: 2, //数据开始行，标题行为 startRow - 1 ；
      importData: [], //导入原始数据
      tableDataCol: [], //导入原始数据 {excelCol,apiCol,label}
      tableData: [], //导入原始数据 分析后 表格数据
      formrow: {},
      departmentdata: [], //单位分组
    };
  },
  methods: {
    submitto() {
  
      if (this.form.customerOrgId == undefined) {
        this.$message.warning("请选择单位");
      } else {
          this.form=  Object.assign(this.form,this.formrow)
        postapi(
          "/api/app/patientregister/createpatientregisterexcel",
          this.form
        ).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.data.msg);
          }
          console.log(res);
        });
        console.log(this.form);
      }
      console.log(this.form.customerOrgId);
    },
    onchange(id) {
      this.form.customerOrgId = id;
      console.log(id);
    },
    splices() {
      if (this.nameType == 1) {
        this.nameType = "同名病人提示";
      }
      console.log(this.nameType);
    },
    //是否创建
    createornot() {
      if (this.form.isAutoCreateDepartment == true) {
        this.form.isAutoCreateDepartment = "Y";
      } else {
        this.form.isAutoCreateDepartment = "N";
        console.log("1");
      }
      console.log(this.form.isAutoCreateDepartment);
    },
    slicetdata() {
      console.log("2");
      getapi("/api/app/customer-org/by-code-all").then((res) => {
        this.departmentdata = res.data;
        console.log(res);
      });
    },
    tablenext() {
      if (JSON.stringify(this.formrow) == "{}") {
        this.$message.warning("请选择数据");
      } else {
        this.form = this.formrow;
        this.dialogVisible5 = true;
        this.dialogVisible4 = false;
        this.slicetdata();
      }
    },
    determine() {
      if (JSON.stringify(this.formrow) == "{}") {
        this.$message.warning("请选择数据");
      } else {
        this.dialogVisible5 = true;
        this.dialogVisible4 = false;
      }
    },
    rowclick(row) {
      // console.log(row);
      this.form.patientName = row.姓名;
      this.form.sexName = row.性别;
      this.form.idNo = row.证件号码;
      this.formrow = row;
      // this.form.birthDate = row.this.formrow = row;
      // console.log(this.formrow);
    },
    aa() {
      console.log("1");
    },
    setCurrent(row) {
      console.log(row);
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row, column, "event", "cell");
      console.log(this.$refs.singleTable);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    onFileChange(event) {
      // 获取上传的文件
      const file = event.target.files[0];
      // 调用导入Excel文件的方法
      this.importExcelFile(file);
      this.parseImportData();
    },
    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);
    },

    //导入后数据分析
    parseImportData(startRow) {
      if (!this.importData || this.importData.length == 0) return;
      let cols = [];
      let record = {};
      this.importData.forEach((item, index) => {
        console.log(index, item);
        if (index == startRow - 2) {
          item.forEach((e, i) => {
            console.log("e", i, e);
            if (i > 0) {
              if (e) {
                this.tableDataCol.push({ excelCol: e, apiCol: "", label: e });
                cols.push(e);
              } else {
                this.tableDataCol.push({
                  excelCol: `第${Number(i) + 1}列`,
                  apiCol: "",
                  lebel: `第${Number(i) + 1}列`,
                });
                cols.push(`第${Number(i) + 1}列`);
              }
            }
          });
        } else if (index > startRow - 2) {
          for (let i = 0; i < item.length; i++) {
            if (i > 0) {
              console.log("cols[i]", i, cols[i - 1]);
              if (item[i]) {
                record[cols[i - 1]] = item[i];
              } else {
                record[cols[i - 1]] = null;
              }
            }
          }
          this.tableData.push({ ...record });
        }
      });

      console.log("tableDataCol", this.tableDataCol);
      console.log("tableData", this.tableData);
    },
    nextclick() {
      if (this.tableData.length > 1) {
        console.log("1");
        this.dialogVisible4 = true;
        this.dialogVisible3 = false;
        //支付方式
        getapi("/api/app/pay-mode").then((res) => {
          this.paymodedata = res.data;
        });
        //婚姻状况
        getapi("/api/app/marital-statuses").then((res) => {
          this.maritalstatusesdata = res.data;
          console.log(res);
        });
        //团检登记
        getapi("/api/app/customer-org-register/in-filter").then((res) => {
          console.log(res);
        });
      } else {
        this.$message.warning("请选择导入的文件并解析");
      }
      console.log(this.tableData);
    },
    nextTick() {
      if (this.radio == 1) {
        this.dialogVisible1 = false;
        this.dialogVisible2 = true;
      }
      console.log(this.radio);
    },
    back4() {
      this.dialogVisible4 = false;
      this.dialogVisible3 = true;
    },
    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>
.subheading {
  margin-left: 10%;
}
.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>