peisweb/src/components/patientRegister/PatientRegisterRecoverList.vue

<template>
  <div style="display: flex;">
    <div :style="'width:' + (window.pageWidth - 200 - 145) + 'px;'">
      <el-table :data="tableData" width="100%" border :height="window.pageHeight < 600 ? 330 : window.pageHeight - 240" row-key="id"
        size="small" highlight-current-row ref="dataList" @selection-change="handleSelectionChange" @row-click="rowClick" @table-body-scroll="scrollFull">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column prop="isRecoverGuide" label="回收1" align="center" width="50">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.isRecoverGuide == 'Y'" />
          </template>
        </el-table-column>
        <el-table-column prop="completeFlag" label="体检进度">
          <template slot-scope="scope">
            <div>{{ ldddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="isLock" label="锁住" width="50">
          <template slot-scope="scope">
            <i class="el-icon-lock" v-if="scope.row.isLock == 'Y'" style="font-size: 20px; color: red" />
          </template>
        </el-table-column>
        <el-table-column prop="customerOrgParentName" label="单位" width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgParentName : scope.row.customerOrgName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customerOrgName" label="部门" width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.customerOrgParentName == scope.row.customerOrgName ? "" : scope.row.customerOrgName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="patientName" label="姓名" />
        <el-table-column prop="sexName" label="性别">
        </el-table-column>
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="patientRegisterNo" label="条码号" width="150" />
        <el-table-column prop="patientNo" label="档案号" />
        <el-table-column prop="medicalTimes" label="体检次数"></el-table-column>
        <el-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>
        </el-table-column>
        <el-table-column prop="nationName" label="民族">
        </el-table-column>
        <el-table-column prop="idNo" label="身份证" width="150" />
        <el-table-column prop="birthDate" label="出生日期" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.birthDate">
              {{ lmoment(scope.row.birthDate, "yyyy-MM-DD") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="100" />
        <el-table-column prop="mobileTelephone" label="手机" width="100" />
        <el-table-column prop="telephone" label="电话" width="100" />
        <el-table-column prop="address" label="地址" width="300" />
        <el-table-column prop="medicalCardNo" label="体检卡号" />
        <el-table-column prop="jobCardNo" label="工卡号" />
        <el-table-column prop="maritalStatusName" label="婚姻状况">
        </el-table-column>
        <el-table-column prop="medicalTypeName" label="体检类别">
        </el-table-column>
        <el-table-column prop="personnelTypeName" label="人员类别">
        </el-table-column>
        <el-table-column prop="jobPost" label="职务" />
        <el-table-column prop="jobTitle" label="职称" />
        <el-table-column prop="salesman" label="介绍人" />
        <el-table-column prop="isVip" label="VIP">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.isVip == 'Y'" />
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="登记人" />
        <el-table-column prop="creationTime" label="登记日期" width="100">
          <template slot-scope="scope">
            <div>{{ lmoment(scope.row.creationTime, "yyyy-MM-DD") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="isUpload" label="上传">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.isUpload == 'Y'" />
          </template>
        </el-table-column>

      </el-table>
      <div style="display: flex; justify-content: space-between">
        <div></div>
        <div style="display: flex;">
          <span style="font-size: 12px">共：{{ loadOpts.totalCount }} 条记录，当前显示：{{
            tableData.length
          }}
            条。</span>
            <i class="el-icon-bottom" style="font-size: 18px;" @click="load" />
            
        </div>
      </div>
    </div>
    <div style="margin-left: 10px;">
      <div class="listBtn">
        <el-button type="success" class="commonbutton" @click="btnRecover">回收表单</el-button>
      </div>
      <div class="listBtn">
        <el-button type="primary" class="commonbutton" @click="btnScanRecover">扫码回收</el-button>
      </div>
    </div>
    <el-dialog title="扫/输入条码回收体检表（指引单）" :visible.sync="dialogVisible" width="400" :append-to-body="true"
      :close-on-click-modal="false">
      <div class="query">
        <span class="spanClass">条码号</span>
        <el-input ref="tmh" v-model="patientRegisterNo" @change="signByPatientRegisterNo"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="signByPatientRegisterNo" class="commonbutton">确定</el-button>
        <el-button @click="dialogVisible = false" class="commonbutton">关闭</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,arrayExistObj } from "@/utlis/proFunc";
import { savePeoplePhoto } from "../../utlis/proApi";

import PatientRegisterEdit from "../../components/patientRegister/PatientRegisterEdit.vue";
import Camera from "../../components/patientRegister/Camera.vue";

export default {
  components: {
    PatientRegisterEdit,
    Camera,
  },
  data() {
    return {
      tableData: [], //列表数据
      multipleSelection: [], //选中的数据列表
      tableDataCurrentRow:{},  // 单行选中的行 
      dialogVisible: false,

      patientRegisterNo: '',

      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);    
   },

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

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

    rowClick(row){
      this.tableDataCurrentRow = row
    },

    // 回收表提交
    recoverCore(body) {
      postapi(`/api/app/patientregister/updaterecoverguidemany`, body)
        .then((res) => {
          if (res.code > -1) {
            this.$message.success({ showClose: true, message: "操作成功！"}); 
            // 刷新页面回收状态
            if(this.multipleSelection.length > 0){
              this.multipleSelection.forEach(e => {
                e.isRecoverGuide = 'Y'
              });
            }else{
              let lfind = arrayExistObj(this.tableData,'id',body[0].id)
              if(lfind > -1){
                this.tableData[lfind].isRecoverGuide = 'Y'
              }
            }          
          }
        })
    },

    //选中人员记录回收
    btnRecover() {
      // 有勾选，则操作勾选的，无勾选则按选中的记录
      let  selectedRds = []
      selectedRds = selectedRds.concat(this.multipleSelection)
      if(selectedRds.length == 0){
        if(this.tableDataCurrentRow.id) selectedRds.push(this.tableDataCurrentRow)
      }
      if (selectedRds.length == 0) {
        this.$message.warning({ showClose: true, message: "请勾选择或选中体检人员，再进行此操作" });
        return;
      }

      let body = []
      selectedRds.forEach(e => {
        body.push(e.id)
      });

      this.recoverCore(body)

    },

    // 点击扫码回收体检表按钮
    btnScanRecover() {
      this.patientRegisterNo = ''
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['tmh'].focus(); //打开光标定位到条码栏里 
      });
    },

    //按条码号查个人数据
    signByPatientRegisterNo() {
      let patientRegisterNos = [this.patientRegisterNo]
      let body = {
        patientRegisterNos
      }
      //console.log(`/api/app/patientregister/getpatientregisterorpatient`, body)
      postapi('/api/app/PatientRegister/BatchRecoverGuideByPatientRegisterNo', body)
        .then((res) => {
          if (res.code > -1) {
            this.patientRegisterNo = ''
            this.$message.success({ showClose: true, message: '操作成功！' })
          }
        });
    },

    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();
    },

    // 获取列表数据
    async getPrList() {
      if (
        this.loadOpts.skipCount != 0 &&
        this.loadOpts.skipCount * this.loadOpts.maxResultCount >=
        this.loadOpts.totalCount
      )
        return;
      // console.log('getPrList', this.loadOpts)

      let body = {
        skipCount: this.loadOpts.skipCount,
        maxResultCount: this.loadOpts.maxResultCount,
      };

      // console.log(`this.patientRegister.query`, this.patientRegister.query);
      if (this.patientRegister.query.customerOrgFlag) {
        // if (this.patientRegister.query.CustomerOrgParentId) {
        //   body.customerOrgId = this.patientRegister.query.CustomerOrgParentId;
        // } else {
        //   if (this.patientRegister.query.customerOrgId)
        //     body.customerOrgId = this.patientRegister.query.customerOrgId;
        // }
        if (this.patientRegister.query.customerOrgId)
          body.customerOrgId = this.patientRegister.query.customerOrgId;

        // 获取单位体检次数与分组
        try {
          if (
            this.patientRegister.query.customerOrgId &&
            this.patientRegister.query.customerOrgId != this.dict.personOrgId &&
            this.patientRegister.query.customerOrgRegister.id
          ) {
            body.customerOrgRegisterId =
              this.patientRegister.query.customerOrgRegister.id;
            body.customerOrgGroupIds =
              this.patientRegister.query.customerOrgGroupIds;
          }
        } catch (error) {
          console.error(error)
        }
      }

      if (this.patientRegister.query.sex)
        body.sexId = this.patientRegister.query.sex;

      if (this.patientRegister.query.patientName)
        body.patientName = this.patientRegister.query.patientName;

      if (
        this.patientRegister.query.medicalTypeIds &&
        this.patientRegister.query.medicalTypeIds.length > 0
      )
        body.medicalTypeIds = this.patientRegister.query.medicalTypeIds;

      if (
        this.patientRegister.query.completeFlags &&
        this.patientRegister.query.completeFlags.length > 0
      )
        body.completeFlags = this.patientRegister.query.completeFlags;

      if (
        this.patientRegister.query.personnelTypeIds &&
        this.patientRegister.query.personnelTypeIds.length > 0
      )
        body.personnelTypeIds = this.patientRegister.query.personnelTypeIds;

      if (this.patientRegister.query.isRecoverGuide)
        body.isRecoverGuide = this.patientRegister.query.isRecoverGuide;

      //StartDate EndDate
      if (
        this.patientRegister.query.startDate &&
        this.patientRegister.query.endDate
      ) {
        body.dateType = this.patientRegister.query.dateType;
        body.startDate = moment(this.patientRegister.query.startDate).format(
          "yyyy-MM-DD"
        );
        body.endDate = moment(this.patientRegister.query.endDate).format(
          "yyyy-MM-DD"
        );
        if (body.startDate > body.endDate) {
          this.$message.warning({
            showClose: true,
            message: "起始日期不能大于截止日期，数据校验不通过！",
          });
          return;
        }
      }

      if (this.patientRegister.query.phone)
        body.phone = this.patientRegister.query.phone;

      if (this.patientRegister.query.idCardNo) {
        body.idNo = this.patientRegister.query.idCardNo;

        try {
          let sysParmId = "patient_register_query_idno";
          let sysParam = await postapi(
            "/api/app/SysParmValue/GetSysParmValueBySysParmId",
            { sysParmId }
          );
          // console.log('sysParam', sysParam)
          if (sysParam.data != "N") {
            body = {
              idNo: this.patientRegister.query.idCardNo,
              skipCount: this.loadOpts.skipCount,
              maxResultCount: this.loadOpts.maxResultCount,
            };
          }
        } catch (error) {
          console.log(error);
        }
      }

      if (this.patientRegister.query.patientNo)
        body = {
          patientNo: this.patientRegister.query.patientNo,
          skipCount: this.loadOpts.skipCount,
          maxResultCount: this.loadOpts.maxResultCount,
        };

      if (this.patientRegister.query.patientRegisterNo)
        body = {
          patientRegisterNo: this.patientRegister.query.patientRegisterNo,
          skipCount: this.loadOpts.skipCount,
          maxResultCount: this.loadOpts.maxResultCount,
        };

      // console.log("/api/app/patientregister/getlistinfilter", body);
      let upPhoto = "patient_register_read_idno_upPhoto"; // 是否读身份证查询更新照片
      let upPhotoParam = await postapi(
        "/api/app/SysParmValue/GetSysParmValueBySysParmId",
        { sysParmId: upPhoto }
      );
      let photo = this.patientRegister.photo;
      this.patientRegister.photo = "";

      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 (upPhotoParam != "N" && photo) {
                if (!e.photo) {
                  savePeoplePhoto(e.id, photo);
                }
              }
            });

            // 不是连续扫码时，需要判断是否分页查询(连续扫码不清原来的数据)
            console.log(
              "this.patientRegister.query",
              this.patientRegister.query.isSeries,
              this.patientRegister.query.patientRegisterNo
            );
            if (
              !(
                this.patientRegister.query.isSeries == "Y" &&
                this.patientRegister.query.patientRegisterNo
              )
            ) {
              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))
            // })
            
          }
        }
      );
    },
   

    //滚动加载数据 
    scrollFull() {
      let obj = this.$refs['dataList'].bodyWrapper
      console.log('obj', obj)

      obj.addEventListener('scroll', async () => {
        // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
        if (obj.scrollTop + obj.clientHeight + 20 > obj.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: {
    //触发查询事件
    "patientRegister.query.times"(newVal, oldVal) {
      if (newVal != oldVal) {
        //alert('触发查询事件')
        this.Query();
      }
    },

  },
};
</script>
<style scoped>
.listBtn {
  margin-top: 10px;
}

.btnClass {
  width: 100px;
}
.query {
  margin-right: 10px;
  font-size: 14px;
  color: #232748;
  font-weight: 400;
  font-family: "NotoSansSC-Regular";
}
.spanClass {
  font-size: 14px;
  padding: 0 2px 0 0;
}
</style>