peisweb/src/components/patientRegister/patientRegisterRecoverListQuery.vue

<template>
  <div>
    <div class="contenttitle">
      体检查询 /<span class="contenttitleBold">回收表格查询</span>
    </div>
    
    <!--查询条件-->
    <div style="display: flex;">
      <div class="query">

        <el-select v-model="patientRegister.query.dateType" placeholder="请选择" style="width: 80px" size="small">
          <el-option label="登记日期" :value="'1'" />
          <el-option label="体检日期" :value="'2'" />
          <el-option label="登记或体检" :value="'3'" />
        </el-select>
        <!-- dateType  1 登记，2 体检，3 体检或登记-->
        <el-date-picker v-model="patientRegister.query.startDate" type="date" placeholder="起始日期" size="small"
          style="width:90px;" value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
        <span class="spanClass">至</span>
        <el-date-picker v-model="patientRegister.query.endDate" type="date" placeholder="截止日期" size="small"
          style="width:90px;" value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
      </div>
      <!--
      <div class="query">
        <span class="spanClass">连续扫码</span>
        <el-checkbox v-model="patientRegister.query.isSeries" size="small" true-label="Y" false-label="N" />
      </div>
      <div class="query">
        <span class="spanClass">条码号</span>
        <el-input placeholder="条码号" v-model="patientRegister.query.patientRegisterNo" size="small" clearable
          style="width: 120px" />
      </div>
      <div class="query">
        <span class="spanClass">档案号</span>
        <el-input placeholder="档案号" v-model="patientRegister.query.patientNo" size="small" clearable
          style="width: 80px" />
      </div>
      <div class="query">
        <span class="spanClass">姓名</span>
        <el-input placeholder="姓名" v-model="patientRegister.query.patientName" size="small" clearable
          style="width: 60px" />
      </div>
      <div class="query">
        <span class="spanClass">检查条码</span>
        <el-input placeholder="检查条码" v-model="patientRegister.query.pacsNo" size="small" clearable
          style="width: 120px" />
      </div>
      <div class="query">
        <span class="spanClass">检验条码</span>
        <el-input placeholder="检验条码" v-model="patientRegister.query.lisNo" size="small" clearable
          style="width: 120px" />
      </div>
      <div class="query">
        <span class="spanClass">性别</span>
        <el-select v-model="patientRegister.query.sex" placeholder="性别" style="width: 50px" size="small" clearable>
          <el-option v-for="item in dict.sex" :key="item.id" :label="item.displayName" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">手机号</span>
        <el-input placeholder="手机号/电话" v-model="patientRegister.query.phone" size="small" clearable
          style="width: 100px" />
      </div>
      <div class="query">
        <span class="spanClass">身份证</span>
        <el-input placeholder="身份证" v-model="patientRegister.query.idCardNo" size="small" clearable
          style="width: 150px" />
      </div>
      <div class="query">
        <el-tooltip class="item" effect="dark" content="单位作为查询条件" placement="top">
          <el-checkbox v-model="patientRegister.query.customerOrgFlag"></el-checkbox>
        </el-tooltip>
        <el-input placeholder="请选择单位" v-model="patientRegister.query.customerOrgName" size="small" disabled
          style="width: 120px" />
        
        <el-cascader v-model="patientRegister.query.customerOrgId" :options="patientRegister.customerOrgTreeAll"
          :props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops, }" placeholder="请选择单位"
          :show-all-levels="false" clearable :disabled="orgEnable == 'Y' ? false : true" size="small"
          style="width:120px;">
        </el-cascader>
  
      </div>
      <div v-show="dispTimes" class="query">
        <span class="spanClass">次数</span>
        <el-select v-model="patientRegister.query.customerOrgRegister" placeholder="次数" clearable
          @change="changeCustomerOrgRegister" style="width: 50px;" size="small" value-key="id">
          <el-option v-for="item in customerOrgRegisterList" :key="item.id" :label="item.medicalTimes"
            :value="item">{{
              item.medicalTimes + '次' }}</el-option>
        </el-select>
      </div>
      <div v-show="dispTimes" class="query">
        <span class="spanClass">分组</span>
        <el-select v-model="patientRegister.query.customerOrgGroupIds" placeholder="请选择" clearable filterable
          style="width: 150px" size="small" multiple collapse-tags>
          <el-option v-for="item in dict.customerOrgGroup" :key="item.id" :label="item.displayName"
            :value="item.id" />
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">体检类别</span>
        <el-select v-model="patientRegister.query.medicalTypeIds" placeholder="请选择" clearable filterable
          style="width: 170px" size="small" multiple collapse-tags>
          <el-option v-for="item in dict.medicalType" :key="item.id" :label="item.displayName" :value="item.id" />
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">状态</span>
        <el-select v-model="patientRegister.query.completeFlags" placeholder="请选择" clearable style="width: 100px"
          size="small" multiple collapse-tags>
          <el-option v-for="item in dict.completeFlag" :key="item.id" :label="item.displayName" :value="item.id">
          </el-option>
        </el-select>
      </div>
    -->
      <div class="query">
        <span class="spanClass">人员类别</span>
        <el-select v-model="patientRegister.query.personnelTypeIds" placeholder="请选择" clearable filterable
          style="width: 170px" size="small" multiple collapse-tags>
          <el-option v-for="item in dict.personnelType" :key="item.id" :label="item.displayName" :value="item.id" />
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">表回收</span>
        <el-select v-model="patientRegister.query.isRecoverGuide" placeholder="请选择" clearable style="width: 80px"
          size="small">
          <el-option label="未回收" value="N" />
          <el-option label="已回收" value="Y" />
        </el-select>
      </div>
      <div class="query">
        <el-button class="commonbutton" @click="btnQuery">查询</el-button>
      </div>
    </div>
    <div :style="'margin-top: 10px;width:' + (window.pageWidth - 15) + 'px;'">
      <el-table :data="tableData" width="100%" border :height="window.pageHeight < 600 ? 405 : window.pageHeight - 165"
        row-key="id" size="small" highlight-current-row ref="dataList" @selection-change="handleSelectionChange"
        @row-click="rowClick">
        <el-table-column type="index" width="40" label="序号" align="center" />
        <el-table-column prop="isRecoverGuide" label="回收" 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>{{ dddw(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">
              {{ moment(scope.row.birthDate).format("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>{{ moment(scope.row.creationTime).format("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>
          <span style="font-size: 12px">共：{{ loadOpts.totalCount }} 条记录，当前显示：{{
            tableData.length
          }}
            条。</span>
        </div>
      </div>
    </div>


  </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";


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


      patientRegisterNo: '',

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

  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() {    
    let ldate = new Date();
    this.patientRegister.query.startDate = ldate;
    this.patientRegister.query.endDate = ldate;
    this.patientRegister.query.dateType = '2'

    this.dictInit()

    this.$nextTick(() => {
      this.scrollFull()
    })
  },
  computed: {
    ...mapState(["pickerOptions", "window", "dict", "patientRegister", "customerOrg"]),
  },
  methods: {
    ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),
    dddw, moment,

    dictInit() {
      //体检类别
      // getapi("/api/app/medical-type/in-filter").then((res) => {
      //   if (res.code > -1) {
      //     this.dict.medicalType = res.data;
      //   }
      // });

      //人员类别
      getapi("/api/app/personnel-type/in-filter").then((res) => {
        if (res.code > -1) {
          this.dict.personnelType = res.data;
        }
      });
    },

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

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




    //按条码号查个人数据
    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: '操作成功！' })
          }
        });
    },

    
    //查询
    btnQuery() {
      this.Query()
    },
    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 = {
        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() {
      this.dom = this.$refs['dataList'].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: {
    //触发查询事件
    "patientRegister.query.times"(newVal, oldVal) {
      if (newVal != oldVal) {
        //alert('触发查询事件')
        this.Query();
      }
    },

  },
};
</script>
<style scoped>
@import '../../assets/css/global_button.css';
@import '../../assets/css/global_dialog.css';
@import '../../assets/css/global_form.css';
@import '../../assets/css/global_input.css';
@import '../../assets/css/global_table.css';
@import '../../assets/css/global.css';

.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>