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
            @change="onchange"
            v-model="form.customerOrgId"
            :options="departmentdata"
            :props="{
              checkStrictly: true,
              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>
      <!-- 是否为体检中心 -->
      <el-row>
        <el-col :span="4">
          <span style="height: 40px; font-size: 18px">体检中心</span>
        </el-col>

        <el-col :span="8">
          <el-select v-model="form.organizationUnitId" placeholder="请选择">
            <el-option
              v-for="item in examinatioitems"
              :key="item.id"
              :label="item.displayName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </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="form.nameType">
          <el-radio label="Y">预登记</el-radio>
          <el-radio label="N">正式登记</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-radio-group v-model="form.isAutoCreateDepartment">
          <el-radio label="Y">是</el-radio>
          <el-radio label="N">否</el-radio>
        </el-radio-group>
        <!-- <el-checkbox v-model="form.isAutoCreateDepartment" @change="createornot"
          >自动创建部门</el-checkbox
        > -->
      </div>
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="100"
        v-if="percentage"
      ></el-progress>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="submitBatch">确 定</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"
        @header-click="colcliick(item.label)"
      >
        <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)">全选</el-button>
        <el-button @click="setCurrents()">取消选择</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>
    <!--  -->
    <!-- dialogVisible6 -->
    <el-dialog
      title="批量预约登记提示"
      :visible.sync="dialogVisible6"
      width="50%"
    >
      <div>
        <div>成功导入的数据</div>
        {{ object }}
        姓名 {{ object.姓名 }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible6 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible6 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--  -->
  </div>
</template>
<script>
import ExcelJS from "exceljs";
import { postapi, getapi } from "@/api/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      apiCol: {
        sexName: "姓名",
        sex: "性别",
        cettictetype: "证件类型",
        idNo: "证件号码",
        samplingpoints: "采样点",
        population: "所属人群",
        administrativedivision: "行政人员",
        testtubebarcode: "试管条码",
      },
      percentage: false,
      checked: "",
      input: "",
      form: {
        nameType: "N",
        cardLength: "",
        isAutoCreateDepartment: "N", //
        customerOrgId: "", //单位id
        isAutoCreatePatientNo: "N",
        cardStartNum: "0",
        patientName: "",
        organizationUnitId: "",
      },
      examinatioitems: [], //体检中心的数据
      value: "",
      nameType: "1",
      currentRow: null,
      radio: "1",
      dialogVisible1: true,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      startRow: 2, //数据开始行，标题行为 startRow - 1 ；
      importData: [], //导入原始数据
      tableDataCol: [], //导入原始数据 {excelCol,apiCol,label}
      tableData: [], //导入原始数据 分析后 表格数据
      formrow: {},
      departmentdata: [], //单位分组
      object: {},
    };
  },
  computed: {
    ...mapState(["importexcel"]),
  },
  methods: {
    colcliick(v) {
      console.log(v);
    },
    setCurrents() {},
    submitto() {
      if (this.form.customerOrgId == undefined) {
        this.$message.warning("请选择单位");
      } else {
        this.tableData.forEach((item) => {
          item.customerOrgId = this.form.customerOrgId;
          postapi(
            "/api/app/patientregister/createpatientregisterexcel",
            item
          ).then((res) => {
            if (res.code == 1) {
              this.object = this.form;
              this.importexcel = this.form;
              this.dialogVisible6 = true;
              this.dialogVisible5 = false;
              // this.$message.success(res.data.msg);
            } else {
              this.$confirm("导入出错, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then((res) => {
                // let targettitle = res.Message;
                this.$message.warning(res.Message);
              });
            }
          });
        });

        // .then((rut) => {
        //   this.tableData.forEach((item) => {
        //     postapi(
        //       "/api/app/patientregister/createpatientregisterexcel",
        //       item
        //     ).then((rut) => {
        //       if (rut.code == 1) {
        //         this.$message.success(rut.data.msg);
        //       } else {

        //         this.$message.warning(rut.Message);
        //       }
        //     });
        //   });
        // });
        console.log(this.form);
      }
      console.log(this.form.customerOrgId);
    },

    //改进：
    //分析 不要单独按钮，合并到 下一步 按钮
    //进度条
    //登记状态 选不了
    //自动创建部门勾不上
    //数据列没有绑定
    async submitBatch() {
      let res = null,
        confirm = null;
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].isAutoCreateDepartment =
          this.form.isAutoCreateDepartment;
        this.tableData[i].customerOrgId = this.form.customerOrgId;
        this.tableData[i].organizationUnitId = this.form.organizationUnitId;
        // this.tableData[0].name = this.tableData[0];
        // this.tableData[i]name=this.
        // if(this.tableData[i]==3){
        //   this.tableData[i]=name
        // }
        console.log(i, this.tableData[i]);
        try {
          res = await postapi(
            "/api/app/patientregister/createpatientregisterexcel",
            this.tableData[i]
          ); //错误：数据没有绑定
        } catch (error) {
          return;
        }
        this.percentage = true; //进度条
        console.log(i, res);
        if (res.code != 1) {
          try {
            await this.$confirm("导入数据出错, 是否继续导入?", "提示", {
              confirmButtonText: "是",
              cancelButtonText: "否",
              type: "warning",
              showClose: false,
            });
          } catch (error) {
            return;
          }
        }
      }
    },

    onchange(id) {
      // this.form.customerOrgId = id;
      // console.log(id);
      // this.form.customerOrgId=this.form.customerOrgId[0]
      this.form.customerOrgId.forEach((item) => {
        // console.log(item);
        this.form.customerOrgId = item;
      });
      console.log(this.form.customerOrgId);
    },
    splices() {
      if (this.nameType == 1) {
        this.nameType = "同名病人提示";
        console.log(this.nameType);
        console.log(this.form.nameType);
      }
      console.log(this.nameType);
    },

    slicetdata() {
      console.log("2");
      getapi("/api/app/customer-org/by-code-all").then((res) => {
        this.gettypelist(res.data);
        this.departmentdata = res.data;
        console.log(res);
      });
    },
    gettypelist(listdata) {
      listdata.forEach((items) => {
        if (items.treeChildren.length > 0) {
          this.gettypelist(items.treeChildren);
        } else {
          items.treeChildren = undefined;
        }
      });
    },
    tablenext() {
      if (JSON.stringify(this.formrow) == "{}") {
        this.$message.warning("请选择数据");
      } else {
        this.form = this.formrow;
        this.dialogVisible5 = true;
        this.dialogVisible4 = false;
        this.slicetdata();
        this.getexamination();
        //获取调用接口的地方
      }
    },
    //获取调用体检中心的接口
    getexamination() {
      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
        (res) => {
          this.examinatioitems = res.data;
          console.log(res, "res");
        }
      );
    },
    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);
      // row.forEach(item=>{
      //   console.log(item,'22222');
      // })
      // toggleRowSelection
      // setCurrentRow
      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>