peisweb/src/components/patientRegister/PatientRegisterSignList.vue

<template>
  <div style="display: flex">
    <div :style="'width:' + (window.pageWidth - 200 - 145) + 'px;'">
      <u-table :data="tableData" width="100%" border :height="window.pageHeight < 600 ? 330 : window.pageHeight - 240" 
        row-key="id" size="small" highlight-current-row ref="tableData"
        @selection-change="handleSelectionChange"  @table-body-scroll="scrollFull" use-virtual :row-height="25">
        <u-table-column type="selection" width="40" align="center"/>
        <u-table-column prop="isMedicalStart" label="签到" width="50" align="center">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.isMedicalStart == 'Y'" />
          </template>
        </u-table-column>
        <u-table-column prop="medicalStartDate" label="签到日期" width="90" align="center">
          <template slot-scope="scope">
            <div>{{ lmoment(scope.row.medicalStartDate, "yyyy-MM-DD") }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="completeFlag" label="体检进度" align="center">
          <template slot-scope="scope">
            <div>{{ ldddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="isLock" label="锁住" width="50" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.isLock == "Y" ? "是" : "否" }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="customerOrgParentName" label="单位" width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgParentName : scope.row.customerOrgName }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="customerOrgName" label="部门" width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgName : "" }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="patientName" label="姓名" align="center"/>
        <u-table-column prop="sexId" label="性别" align="center">
          <template slot-scope="scope">
            <div>{{ ldddw(dict.sex, "id", scope.row.sexId, "displayName") }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="age" label="年龄" align="center"/>
        <u-table-column prop="patientRegisterNo" label="条码号" width="130" align="center"/>
        <u-table-column prop="patientNo" label="档案号" align="center"/>
        <u-table-column prop="medicalTimes" label="体检次数" align="center"></u-table-column>
        <u-table-column label="分组/套餐" width="150">
          <template slot-scope="scope">            
            <div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId === dict.personOrgId">
              {{ scope.row.medicalPackageName }}
            </div>
            <div v-else>
              {{ scope.row.customerOrgGroupName }}
            </div>
          </template>
        </u-table-column>
        <u-table-column prop="nationName" label="民族" align="center">
         
        </u-table-column>
        <u-table-column prop="idNo" label="身份证" width="150" align="center"/>
        <u-table-column prop="birthDate" label="出生日期" width="100" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.birthDate">
              {{ lmoment(scope.row.birthDate, "yyyy-MM-DD") }}
            </div>
          </template>
        </u-table-column>
        <u-table-column prop="email" label="邮箱" width="100" align="center"/>
        <u-table-column prop="mobileTelephone" label="手机" width="130"align="center" />
        <u-table-column prop="telephone" label="电话" width="100" />
        <u-table-column prop="address" label="地址" width="300" />
        <u-table-column prop="medicalCardNo" label="体检卡号" align="center"/>
        <u-table-column prop="jobCardNo" label="工卡号" align="center"/>
        <u-table-column prop="maritalStatusName" label="婚姻状况" align="center">          
        </u-table-column>
        <u-table-column prop="medicalTypeId" label="体检类别">
          <template slot-scope="scope">
            <div v-if="scope.row.medicalTypeId !== dict.personOrgId">
              {{ ldddw(dict.medicalType, "id", scope.row.medicalTypeId, "displayName") }}
            </div>
          </template>
        </u-table-column>
        <u-table-column prop="personnelTypeId" label="人员类别">
          <template slot-scope="scope">
            <div v-if="scope.row.personnelTypeId !== dict.personOrgId">
              {{ ldddw(dict.personnelType, "id", scope.row.personnelTypeId, "displayName") }}
            </div>
          </template>
        </u-table-column>
        <u-table-column prop="jobPost" label="职务" />
        <u-table-column prop="jobTitle" label="职称" />
        <u-table-column prop="salesman" label="介绍人" align="center"/>
        <u-table-column prop="isVip" label="是否VIP" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.isVip == "Y" ? "是" : "否" }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="creatorName" label="登记人" align="center"/>
        <u-table-column prop="creationTime" label="登记日期" width="100" align="center">
          <template slot-scope="scope">
            <div>{{ lmoment(scope.row.creationTime, "yyyy-MM-DD") }}</div>
          </template>
        </u-table-column>
        <u-table-column prop="isUpload" label="是否上传" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.isUpload == "Y" ? "是" : "否" }}</div>
          </template>
        </u-table-column>
      </u-table>  
      <div style="display: flex; justify-content: space-between">
        <div></div>
        <div>
          <span style="font-size: 12px">共：{{ loadOpts.totalCount }} 条记录，当前显示：{{
            tableData.length
          }}
            条。</span>            
        </div>
      </div>    
    </div> 
    <div style="margin-left: 10px;">
      <div class="listBtn">
        <el-button type="success" class="commonbutton" @click="sign">签到</el-button>
      </div>
      <div class="listBtn">
        <el-button type="primary" class="commonbutton" @click="scanSign">扫码签到</el-button>
      </div>        
    </div>
    <el-dialog title="扫/输入条码签到" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="条码" label-width="100px">
          <el-input v-model="form.patientRegisterNo" @change="signByPatientRegisterNo"></el-input>
        </el-form-item>        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="signByPatientRegisterNo">确定</el-button>
      </div>
    </el-dialog>   
  </div>
</template>
<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { dddw, objCopy, arrayReduce } from "@/utlis/proFunc";

import PatientRegisterEdit from "../../components/patientRegister/PatientRegisterEdit.vue";
import Camera from "../../components/patientRegister/Camera.vue";
import { UTable, UTableColumn } from "umy-ui";
export default {
  components: {
    PatientRegisterEdit,
    Camera,UTable, UTableColumn
  },
  props: ["refQueryCondition"],
  data() {
    return {
      tableData: [], //列表数据
      multipleSelection: [], //选中的数据列表
      dialogVisible: false, 
      form:{
        patientRegisterNo:''
      },
      patient_register_query_idno: 'Y', // 身份证排他
      patient_register_query_name: 'N', // 姓名排他
      patient_register_read_idno_upPhoto: 'N',  // 读身份证查询 是否更新照片

      LocalConfig: {
        normal: {
          maxResultCount: 100, //分页时单页记录数
        },
      },
      loadOpts: {
        totalCount: 0,
        skipCount: 0,
        maxResultCount: 100,
      },
      loadOptsInit: {},
      lazyLoading:false,
    };
  },

  created() { 
    try {     
      let LocalConfig = JSON.parse(window.localStorage.getItem("LocalConfig") || null)
      if (LocalConfig?.normal?.maxResultCount){
        this.LocalConfig.normal.maxResultCount = LocalConfig.normal.maxResultCount
      } 

    } catch (error) {
      console.log('window.localStorage.getItem("LocalConfig")', error);
    }

    // console.log('this.LocalConfig',this.LocalConfig)
    this.loadOpts.maxResultCount = Number(
      this.LocalConfig.normal.maxResultCount || 100
    );

    this.loadOptsInit = Object.assign({}, this.loadOpts);    

    // 获取系统参数 -- 身份证排他
    postapi("/api/app/SysParmValue/GetSysParmValueBySysParmId",
      { sysParmId: "patient_register_query_idno" }
    ).then((res) => {
      if (res.code > -1) {
        this.patient_register_query_idno = res.data || "Y";
      }
    });

    // 获取系统参数 -- 姓名排他
    postapi("/api/app/SysParmValue/GetSysParmValueBySysParmId",
      { sysParmId: "patient_register_query_name" }
    ).then((res) => {
      if (res.code > -1) {
        this.patient_register_query_name = res.data || "N";
      }
    });

    // 获取系统参数 -- 读身份证 是否更新照片
    postapi("/api/app/SysParmValue/GetSysParmValueBySysParmId",
      { sysParmId: "patient_register_read_idno_upPhoto" }
    ).then((res) => {
      if (res.code > -1) {
        this.patient_register_read_idno_upPhoto = res.data || "N";
      }
    });
  },

  //挂载完成
  mounted() { },
  computed: {
    ...mapState(["window","dict", "patientRegister", "customerOrg"]),
  },
  methods: {
    ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    signCore(body){
      postapi(`/api/app/patientregister/updatesigninmany`, body)
        .then((res) => {
          if (res.code != -1){
            console.log("操作成功");             
          }                   
        })        
    },

    //选中人员签到 
    sign() {
      if (!this.multipleSelection || this.multipleSelection.length < 1 ) {
        this.$message.warning({ showClose: true, message: "请选择体检人员，再进行此操作"});
        return;
      }
      let body = []
      this.multipleSelection.forEach(e =>{
        body.push(e.id)
      });
      
      this.signCore(body)
        
    },

    scanSign(){
      this.dialogVisible = true
    },

    //按条码号查个人数据
    signByPatientRegisterNo() {
      let patientRegisterNo = this.form.patientRegisterNo
      let body = {
        sType:1,
        patientRegisterNo
      }      
      console.log(`/api/app/patientregister/getpatientregisterorpatient`,body)
      postapi('/api/app/patientregister/getpatientregisterorpatient',body)   
      .then((res) => {
        if (res.code != -1) {
          if(res.data){
            this.signCore([res.data.id])
            this.form.patientRegisterNo = ''
          }          
        }
      });
    },

    ldddw(arrayData, key, value, display) {
      return dddw(arrayData, key, value, display);
    },

    lmoment(date, forMat) {
      return moment(new Date(date)).format(forMat);
    },

    //查询
    async Query() {
      // 查询时，清掉明细数据 （滚动时不清）      
      this.tableDataCurrentRow = {}; // 清除选择
      if (
        !(
          this.patientRegister.query.isSeries == "Y" &&
          this.patientRegister.query.patientRegisterNo
        )
      ) {
        this.tableData = [];
      }
    

      this.loadOpts = Object.assign(this.loadOpts, this.loadOptsInit);
      await this.getPrList();
    },

    //数据量多时，滚动加载
    async load() {
      this.loadOpts.skipCount++;
      await this.getPrList();
      this.lazyLoading = false
    },
    
    // 查询获取人员列表数据
    async getPrList() {
      if (
        this.loadOpts.skipCount != 0 &&
        this.loadOpts.skipCount * this.loadOpts.maxResultCount >=
        this.loadOpts.totalCount
      )
        return;
      // console.log('getPrList', this.loadOpts)

      let body = Object.assign({}, this.loadOpts)
      let queryType = this.refQueryCondition.queryType

      console.log('getPrList.this.refQueryCondition', this.refQueryCondition)
      // 非排他查询条件 ===================== Start ==========================
      if (!queryType) {

        // 查询条件--日期
        if (this.refQueryCondition.startDate && this.refQueryCondition.endDate) {
          body.dateType = this.refQueryCondition.dateType;
          body.startDate = this.refQueryCondition.startDate
          body.endDate = this.refQueryCondition.endDate
          if (body.startDate > body.endDate) {
            this.$message.warning({
              showClose: true,
              message: "起始日期不能大于截止日期，数据校验不通过！",
            });
            return;
          }
        }

        // 查询条件--单位、次数、分组
        if (this.refQueryCondition.customerOrgFlag) {
          if (this.refQueryCondition.customerOrgId) body.customerOrgId = this.refQueryCondition.customerOrgId
          // 获取单位体检次数与分组
          try {
            if (
              this.refQueryCondition.customerOrgId &&
              this.refQueryCondition.customerOrgId != this.dict.personOrgId &&
              this.refQueryCondition.customerOrgRegister.id
            ) {
              body.customerOrgRegisterId = this.refQueryCondition.customerOrgRegister.id;
              if (this.refQueryCondition.customerOrgGroupIds) body.customerOrgGroupIds = this.refQueryCondition.customerOrgGroupIds
            }
          } catch (error) {
            console.error(error);
          }
        }

        // 电话
        if (this.refQueryCondition.phone) body.phone = this.refQueryCondition.phone
        // 性别
        if (this.refQueryCondition.sexId) body.sexId = this.refQueryCondition.sexId
        // 体检类别
        if (this.refQueryCondition.medicalTypeIds) body.medicalTypeIds = this.refQueryCondition.medicalTypeIds
        // 人员状态
        if (this.refQueryCondition.completeFlags) body.completeFlags = this.refQueryCondition.completeFlags
        // 人员类别
        if (this.refQueryCondition.personnelTypeIds) body.personnelTypeIds = this.refQueryCondition.personnelTypeIds
        // 表格回收状态
        if (this.refQueryCondition.isRecoverGuide) body.isRecoverGuide = this.refQueryCondition.isRecoverGuide

        // 排他条件有值时
        if (this.refQueryCondition.patientRegisterNo) {
          queryType = "patientRegisterNo"
        } else if (this.refQueryCondition.pacsNo) {
          queryType = "pacsNo"
        } else if (this.refQueryCondition.lisNo) {
          queryType = "lisNo"
        } else if (this.refQueryCondition.patientNo) {
          queryType = "patientNo"
        } else if (this.refQueryCondition.idCardNo) {
          queryType = "idCardNo"
        } else if (this.refQueryCondition.patientName) {
          queryType = "patientName"
        }

      }
      // 非排他查询条件 ===================== End ==========================

      // 排他查询条件
      let photo = ''
      switch (queryType) {
        case 'patientName': // 姓名排他判断          
          if (this.refQueryCondition.patientName) {
            body.patientName = this.refQueryCondition.patientName;
            if (this.patient_register_query_name == 'Y') {
              body = {
                patientName: this.refQueryCondition.patientName,
                skipCount: this.loadOpts.skipCount,
                maxResultCount: this.loadOpts.maxResultCount,
              };
            }
          }
          break;
        case 'idCardNo': // 身份证排他判断      
          if (this.refQueryCondition.idCardNo) {
            body.idNo = this.refQueryCondition.idCardNo;
            if (this.patient_register_query_idno == 'Y') {
              body = {
                idNo: this.refQueryCondition.idCardNo,
                skipCount: this.loadOpts.skipCount,
                maxResultCount: this.loadOpts.maxResultCount,
              };
            }
          }
          if (this.refQueryCondition.photo) photo = this.refQueryCondition.photo;
          break;
        case 'patientNo': // 档案号排他判断      
          if (this.refQueryCondition.patientNo)
            body = {
              patientNo: this.refQueryCondition.patientNo,
              skipCount: this.loadOpts.skipCount,
              maxResultCount: this.loadOpts.maxResultCount,
            };
          break;
        case 'patientRegisterNo': // 条码号排他判断      
          if (this.refQueryCondition.patientRegisterNo)
            body = {
              patientRegisterNo: this.refQueryCondition.patientRegisterNo,
              skipCount: this.loadOpts.skipCount,
              maxResultCount: this.loadOpts.maxResultCount,
            };
          break;
        case 'pacsNo': // 检查条码排他判断      
          if (this.refQueryCondition.pacsNo)
            body = {
              pacsNo: this.refQueryCondition.pacsNo,
              skipCount: this.loadOpts.skipCount,
              maxResultCount: this.loadOpts.maxResultCount,
            };
          break;
        case 'lisNo': // 检验条码排他判断      
          if (this.refQueryCondition.lisNo)
            body = {
              lisNo: this.refQueryCondition.lisNo,
              skipCount: this.loadOpts.skipCount,
              maxResultCount: this.loadOpts.maxResultCount,
            };
          break;
        default: //           
          break;
      }

      // 带费且合计  /api/app/PatientRegister/GetPatientRegisterWithCharge
      // 不带费且合计 /api/app/patientregister/getlistinfilter
      postapi(
        "/api/app/patientregister/getlistinfilter",
        body
      ).then(async (res) => {
        if (res.code > -1) {
          // 刷新最大记录数
          this.loadOpts.totalCount = res.data.totalCount;
          let curLoad = res.data.items;

          // let oldCount = 0
          // 处理：
          // 1、分组/套餐 排序混乱的问题
          // 2、扫身份证查询时，无照片自动更新照片(参数控制)
          curLoad.forEach((e) => {
            // 1、分组/套餐 排序混乱的问题
            if (e.customerOrgId == this.dict.personOrgId) {
              e.groupPack = e.medicalPackageId;
            } else {
              e.groupPack = e.customerOrgGroupId;
            }

            //  2、扫身份证查询时，无照片自动更新照片(参数控制)
            if (this.patient_register_read_idno_upPhoto == "Y" && photo) {
              if (!e.photo) {
                savePeoplePhoto(e.id, photo);
              }
            }
          });

          // 不是连续扫码时，需要判断是否分页查询(连续扫码不清原来的数据)
          // console.log("this.refQueryCondition", this.refQueryCondition.isSeries, this.refQueryCondition.patientRegisterNo);
          if (this.refQueryCondition.isSeries == "Y" && this.refQueryCondition.patientRegisterNo) {
            // 如果已经存在列表中，则不在添加
            for (let index = curLoad.length - 1; index > -1; index--) {
              const e = curLoad[index];
              if (arrayExistObj(this.tableData, 'id', e.id) > -1) curLoad.splice(index, 1)
            }
          } else {
            if (body.skipCount == 0) {
              //查询
              this.tableData = [];
            }
          }

          this.tableData = this.tableData.concat(curLoad);
          // else {
          //   // 懒加载 ,原数据集不用清空
          //   oldCount = this.tableData.length
          // }
          // curLoad.forEach((e, index) => {
          //   this.tableData.push(Object.assign({ index: Number(oldCount) + Number(index), choosed: false }, e))
          // })
        }
      });
    },


    //滚动加载数据 
    async scrollFull(scroll, event) {
      if (!scroll.judgeFlse) return;

      // 正在加载时阻止重复触发
      if (this.lazyLoading) return;
      if (
        (Number(this.loadOpts.skipCount) + 1) *
        Number(this.loadOpts.maxResultCount) >=
        Number(this.loadOpts.totalCount)
      ) {
        return;
      }

      this.lazyLoading = true;
      try {
        await this.load();
      } catch (e) {
        console.error('scrollFull load error', e);
      }
      // this.dom = this.$refs['tableData'].bodyWrapper
      // console.log('obj', this.dom)

      // this.dom.addEventListener('scroll', async () => {
      //   // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
      //   if (this.dom.scrollTop + this.dom.clientHeight + 20 > this.dom.scrollHeight && !this.lazyLoading) {
      //     // 获取到的不是全部数据 当滚动到底部 
      //     //console.log('scrollTop', obj.scrollTop, 'clientHeight', obj.clientHeight, 'scrollHeight', obj.scrollHeight);
      //     if (Number(this.loadOpts.skipCount) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
      //       this.lazyLoading = false
      //     } else {
      //       this.lazyLoading = true
      //       this.load()
      //       // this.dom.scrollTop = this.dom.scrollTop - 100
      //     }
      //   }
      // })
    },

  },

  //监听事件
  watch: {
    //触发查询事件
    "refQueryCondition.queryConditionTimes"(newVal, oldVal) {
      if (newVal != oldVal) {
        console.log('签到--触发查询 refQueryCondition.queryConditionTimes', oldVal, newVal)
        this.Query();
      }
    },
   
  },
};
</script>
<style scoped>

.listBtn {
  margin-top: 10px;
}

.btnClass{
  width:100px;
}
</style>