re

src/components/patientRegister/PatientRegisterList.vue

@@ -6,116 +6,122 @@
       "
       @contextmenu.prevent="onContextmenu"
     >
-      <el-table
-        :data="patientRegister.prList"
-        border
-        :height="
-          window.pageHeight < 600
-            ? 202
-            : Math.floor(((window.pageHeight - 302) * 2) / 3)
-        "
-        highlight-current-row
-        @row-click="rowClick"
-        size="small"
-        @selection-change="handleSelectionChange"
-        @cell-contextmenu="onCellRightClick"
-        ref="info"
-        :row-class-name="handleRowClassName"
-      >
-        <!-- 取消勾选，改为选中
-        <el-table-column type="selection" width="40" show-overflow-tooltip/>
-        -->
-        <el-table-column
-          v-for="(item, index) in headerCols" 
-          :key="`col_${index}`"          
-          :min-width="dropCol[index].minWidth"
-          :align="dropCol[index].align"
-          :label="item.label"
+      <div>
+        <el-table @body-scrolling="load"
+          :data="patientRegister.prList"
+          border  :height="window.pageHeight < 600 ? 202 : Math.floor(((window.pageHeight - 302) * 2) / 3)"
+          highlight-current-row
+          @row-click="rowClick"
+          size="small" row-key="id"
+          @selection-change="handleSelectionChange"
+          @cell-contextmenu="onCellRightClick"
+          ref="info"
+          :row-class-name="handleRowClassName"
         >
-          <template slot-scope="scope">            
-            <div v-if="dropCol[index].prop == 'sn'" >
-              {{ scope.$index + 1 }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'completeFlag'" >
-              {{ dddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'guidePrintTimes'" >
-              <i class="el-icon-printer"
-                v-if="scope.row.guidePrintTimes > 0"
-                style="font-size: 24px; color: green" />
-            </div>
-            <div v-else-if ="dropCol[index].prop == 'isLock'
-                          || dropCol[index].prop == 'isVip'
-                          || dropCol[index].prop == 'isUpload'
-                          " >
-              {{ scope.row[dropCol[index].prop] == "Y" ? "是" : "否" }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'customerOrgParentName'" >
-              {{ scope.row.customerOrgParentName
-                  ? scope.row.customerOrgParentName
-                  : scope.row.customerOrgName }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'sexId'" >
-              {{ dddw(dict.sex, "id", scope.row[dropCol[index].prop], "displayName") }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'groupPack'" >
-              <div  v-if=" scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId === dict.personOrgId">
-                {{ dddw(dict.medicalPackage,"id",scope.row.medicalPackageId,"displayName")}}
+          <!-- 取消勾选，改为选中
+          <el-table-column type="selection" width="40" show-overflow-tooltip/>
+          :height="window.pageHeight < 600 ? 202 : Math.floor(((window.pageHeight - 302) * 2) / 3)"
+          -->
+          <el-table-column
+            v-for="(item, index) in headerCols" 
+            :key="`col_${index}`"          
+            :min-width="dropCol[index].minWidth"
+            :align="dropCol[index].align"
+            :label="item.label" 
+            :prop="dropCol[index].prop"
+            :sortable="dropCol[index].prop == 'sn' ? false:true"
+          >        
+            <template slot-scope="scope">            
+              <div v-if="dropCol[index].prop == 'sn'" >
+                {{ scope.$index + 1 }}
               </div>
-              <div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId !== dict.personOrgId">
-                {{ dddw( dict.customerOrgGroupAll, "id", scope.row.customerOrgGroupId, "displayName" ) }}
+              <div v-else-if="dropCol[index].prop == 'completeFlag'" >
+                {{ dddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}
               </div>
+              <div v-else-if="dropCol[index].prop == 'guidePrintTimes'" >
+                <i class="el-icon-printer"
+                  v-if="scope.row.guidePrintTimes > 0"
+                  style="font-size: 24px; color: green" />
+              </div>
+              <div v-else-if ="dropCol[index].prop == 'isLock'
+                            || dropCol[index].prop == 'isVip'
+                            || dropCol[index].prop == 'isUpload'
+                            " >
+                {{ scope.row[dropCol[index].prop] == "Y" ? "是" : "否" }}
+              </div>
+              <div v-else-if="dropCol[index].prop == 'customerOrgParentName'" >
+                {{ scope.row.customerOrgParentName
+                    ? scope.row.customerOrgParentName
+                    : scope.row.customerOrgName }}
+              </div>
+              <div v-else-if="dropCol[index].prop == 'sexId'" >
+                {{ dddw(dict.sex, "id", scope.row[dropCol[index].prop], "displayName") }}
+              </div>
+              <div v-else-if="dropCol[index].prop == 'groupPack'" >
+                <div  v-if=" scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId === dict.personOrgId">
+                  {{ dddw(dict.medicalPackage,"id",scope.row.medicalPackageId,"displayName")}}
+                </div>
+                <div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId !== dict.personOrgId">
+                  {{ dddw( dict.customerOrgGroupAll, "id", scope.row.customerOrgGroupId, "displayName" ) }}
+                </div>
+              </div>
+              <div v-else-if="dropCol[index].prop == 'nationId'" >
+                {{ dddw(dict.nation, "id", scope.row[dropCol[index].prop], "displayName") }}
+              </div>
+              <div v-else-if ="dropCol[index].prop == 'birthDate' 
+                            || dropCol[index].prop == 'creationTime'" >
+                {{ scope.row[dropCol[index].prop] ? moment(scope.row[dropCol[index].prop]).format('yyyy-MM-DD'):'' }}
+              </div>
+              <div v-else-if="dropCol[index].prop == 'maritalStatusId'" >
+                {{ dddw(dict.maritalStatus, "id", scope.row[dropCol[index].prop], "displayName") }}
+              </div>
+              <div v-else-if="dropCol[index].prop == 'medicalTypeId'" >
+                {{ dddw(dict.medicalType, "id", scope.row[dropCol[index].prop], "displayName") }}
+              </div>
+              <div v-else-if="dropCol[index].prop == 'personnelTypeId'" >
+                {{ dddw(dict.personnelType, "id", scope.row[dropCol[index].prop], "displayName") }}
+              </div>
+              <div v-else>
+                {{ scope.row[dropCol[index].prop] }}
+              </div>
+            </template>        
+          </el-table-column>  
+          <!--
+          "sexHormoneTermId": "00000000-0000-0000-0000-000000000000",
+          "interposeMeasure": null,
+          "medicalConclusionId": "00000000-0000-0000-0000-000000000000",
+          "reportPrintTimes": 0,        
+          "isMedicalStart": "N",
+          "medicalStartDate": "6/28/2023",
+          "isRecoverGuide": "N",
+          "summaryDate": "",
+          "summaryDoctor": null,
+          "isAudit": "N",
+          "auditDoctor": null,
+          "auditDate": "",        
+          "isNameHide": "N",
+          "isPhoneFollow": "N",
+          "thirdInfo": null,
+          "guidePrintTimes": null,
+          "remark": null,
+          "organizationUnitId": "00000000-0000-0000-0000-000000000000",
+          "customerOrgRegisterId": "00000000-0000-0000-0000-000000000000",
+          "lastModifierName": "",
+          "lastModificationTime": null,
+          "lastModifierId": null,
+          "creatorId": null,
+          "id": "3a0c196d-a6d0-37fe-5c32-4806bdc4530f"
+          -->
+        </el-table>
+        <div style="display: flex;justify-content:space-between;">            
+            <div></div>
+            <div>
+              <span style="font-size:12px;">共：{{loadOpts.totalCount}} 条记录，当前显示：{{patientRegister.prList.length}} 条。</span>
             </div>
-            <div v-else-if="dropCol[index].prop == 'nationId'" >
-              {{ dddw(dict.nation, "id", scope.row[dropCol[index].prop], "displayName") }}
-            </div>
-            <div v-else-if ="dropCol[index].prop == 'birthDate' 
-                          || dropCol[index].prop == 'creationTime'" >
-              {{ scope.row[dropCol[index].prop] ? moment(scope.row[dropCol[index].prop]).format('yyyy-MM-DD'):'' }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'maritalStatusId'" >
-              {{ dddw(dict.maritalStatus, "id", scope.row[dropCol[index].prop], "displayName") }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'medicalTypeId'" >
-              {{ dddw(dict.medicalType, "id", scope.row[dropCol[index].prop], "displayName") }}
-            </div>
-            <div v-else-if="dropCol[index].prop == 'personnelTypeId'" >
-              {{ dddw(dict.personnelType, "id", scope.row[dropCol[index].prop], "displayName") }}
-            </div>
-            <div v-else>
-              {{ scope.row[dropCol[index].prop] }}
-            </div>
-          </template>        
-        </el-table-column>  
-        <!--
-        "sexHormoneTermId": "00000000-0000-0000-0000-000000000000",
-        "interposeMeasure": null,
-        "medicalConclusionId": "00000000-0000-0000-0000-000000000000",
-        "reportPrintTimes": 0,        
-        "isMedicalStart": "N",
-        "medicalStartDate": "6/28/2023",
-        "isRecoverGuide": "N",
-        "summaryDate": "",
-        "summaryDoctor": null,
-        "isAudit": "N",
-        "auditDoctor": null,
-        "auditDate": "",        
-        "isNameHide": "N",
-        "isPhoneFollow": "N",
-        "thirdInfo": null,
-        "guidePrintTimes": null,
-        "remark": null,
-        "organizationUnitId": "00000000-0000-0000-0000-000000000000",
-        "customerOrgRegisterId": "00000000-0000-0000-0000-000000000000",
-        "lastModifierName": "",
-        "lastModificationTime": null,
-        "lastModifierId": null,
-        "creatorId": null,
-        "id": "3a0c196d-a6d0-37fe-5c32-4806bdc4530f"
-        -->
-      </el-table>
+          </div>
+      </div>
       <!-- 给合项目  基本信息  -->
-      <el-tabs v-model="tabChoosed">
+      <el-tabs v-model="tabChoosed" style="margin-top: -22px;">
         <!-- 给合项目 -->
         <el-tab-pane label="已选组合项目" name="1">
           <PatientRegisterAsbItem />
@@ -511,18 +517,18 @@ export default {
       dropCol: [
         { label: "序号",prop: "sn",minWidth: 40,align:"center"},
         { label: "体检进度",prop: "completeFlag",minWidth: 80,align:"center"},
-        { label: "打印", prop: "guidePrintTimes", minWidth: 50,align:"center" },
-        { label: "锁住", prop: "isLock", minWidth: 50, align:"center"},
+        { label: "打印", prop: "guidePrintTimes", minWidth: 55,align:"center" },
+        { label: "锁住", prop: "isLock", minWidth: 55, align:"center"},
         { label: "单位", prop: "customerOrgParentName", minWidth: 180, align:"center"},
         { label: "部门", prop: "customerOrgName", minWidth: 120, align:"center"},
         { label: "姓名", prop: "patientName", minWidth: 80, align:"center"},
-        { label: "性别", prop: "sexId", minWidth: 50, align:"center"},
-        { label: "年龄", prop: "age", minWidth: 50, align:"center"},
+        { label: "性别", prop: "sexId", minWidth: 55, align:"center"},
+        { label: "年龄", prop: "age", minWidth: 55, align:"center"},
         { label: "条码号", prop: "patientRegisterNo", minWidth: 150, align:"center"},
         { label: "档案号", prop: "patientNo", minWidth: 100, align:"center"},
         { label: "体检次数", prop: "medicalTimes", minWidth: 80, align:"center"},
         { label: "分组/套餐", prop: "groupPack", minWidth: 150, align:"center"},
-        { label: "民族", prop: "nationId", minWidth: 50, align:"center"},
+        { label: "民族", prop: "nationId", minWidth: 55, align:"center"},
         { label: "身份证", prop: "idNo", minWidth: 150, align:"center"},
         { label: "出生日期", prop: "birthDate", minWidth: 80, align:"center"},
         { label: "邮箱", prop: "email", minWidth: 150, align:"center"},
@@ -542,11 +548,22 @@ export default {
         { label: "登记日期", prop: "creationTime", minWidth: 80, align:"center"},
         { label: "是否上传", prop: "isUpload", minWidth: 80, align:"center"},
       ],  
+
+      dom:null,   //用于滚动加载数据
+      lazyLoading:false,  //是否懒加载中
+      loadOpts:{
+        totalCount:0,        
+        skipCount:0,
+        maxResultCount:100,
+      },
+      loadOptsInit:{},
+
     };
   },
 
   created() {
     this.headerCols = deepCopy(this.dropCol)
+    this.loadOptsInit = Object.assign({},this.loadOpts)
   },
 
   //挂载完成
@@ -557,6 +574,10 @@ export default {
 
     //初始化可以拖动的列
     this.dropCol = this.columnDrop(this.dropCol);
+
+    this.$nextTick(() => {
+      this.scrollFull()
+    })
   },
   computed: {
     ...mapState([
@@ -906,8 +927,26 @@ export default {
 
     //查询
     async Query() {
-      this.patientRegister.prList = [];
-      let body = {maxResultCount:500};
+      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) {        
@@ -967,37 +1006,56 @@ export default {
         };
 
       console.log("/api/app/patientregister/getlistinfilter", body);      
-
       const loading = this.$loading({
         lock: true,
         text: "Loading",
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-      postapi("/api/app/patientregister/getlistinfilter", body)
-        .then((res) => {
-          if (res.code != -1) {
-            this.patientRegister.prList = res.data.items;
-
-            //配合多选使用
-            this.patientRegister.prList.forEach((item, index) => {
-              item.index = index;
-              item.choosed = false;
-            });
-          }
-          loading.close();
+
+      let res = await postapi("/api/app/patientregister/getlistinfilter", body)
+      if(res.code != -1){
+        // 刷新最大记录数
+        this.loadOpts.totalCount = res.data.totalCount
+        let curLoad = res.data.items
+        let oldCount = 0
+
+        if(body.skipCount == 0){  //查询
+          this.patientRegister.prList = [];          
+        }else{
+          // 懒加载 ,原数据集不用清空
+          oldCount = this.patientRegister.prList.length          
+        }
+        curLoad.forEach((e,index) =>{
+          this.patientRegister.prList.push(Object.assign({index:Number(oldCount)+Number(index),choosed:false},e))
         })
-        .catch((err) => {
-          loading.close();
-        });
-      // try {
-      //   let res =await postapi('/api/app/patientregister/getlistinfilter', body);
-      //   this.patientRegister.prList = res.data;
-      // } catch (error) {
-      //   console.log("query error",error);
-      // }
+      }
+      loading.close(); 
+    },
+
+    //滚动加载数据 
+    scrollFull(){
+      this.dom = this.$refs['info'].bodyWrapper
+      console.log('this.dom',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',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
+          if((Number(this.loadOpts.skipCount) + 1)*Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)){
+            this.lazyLoading = false
+          }else{
+            this.lazyLoading = true            
+            await this.load()
+            this.lazyLoading = false
+            // this.dom.scrollTop = this.dom.scrollTop - 100
+          }
+        }
+      })
     },
     
+
     //右击菜单
     onCellRightClick(row, column) {
       this.rClickRow = { ...row }; //右击的行记录
@@ -1586,6 +1644,19 @@ export default {
 
   //监听事件
   watch: {
+    "patientRegister.query.customerOrgId":{
+      // immediate: true, // 立即执行
+      deep: true, // 深度监听复杂类型内变化
+      handler(newVal,oldVal){        
+        //console.log('watch:patientRegister.query.customerOrgId:',newVal,oldVal)
+        // 单位变化时，清除当前列表信息
+        if(newVal && newVal != oldVal){
+          this.patientRegister.prList = []
+          this.patientRegister.patientRegisterAbs = []
+        }
+      }
+    },
+
     //触发查询事件
     "patientRegister.query.times"(newVal, oldVal) {
       if (newVal != oldVal) {

src/components/patientRegister/patientRegisterQuery.vue

@@ -165,7 +165,7 @@ export default {
         if(!newVal || newVal == this.dict.personOrgId){
           this.patientRegister.query.customerOrgRegister = null
           this.customerOrgRegisterList = []
-          this.patientRegister.query.times++
+          // this.patientRegister.query.times++
         }else{
           getapi(`/api/app/customer-org/parent/${newVal}
           `).then(res => {
@@ -179,7 +179,7 @@ export default {
                 this.patientRegister.query.customerOrgRegister = res.data[res.data.length - 1];
                 this.changeCustomerOrgRegister(res.data[res.data.length - 1])                
               }
-              this.patientRegister.query.times++
+              // this.patientRegister.query.times++
               // console.log('this.patientRegister.query.customerOrgRegister',this.patientRegister.query.customerOrgRegister)
             }
           });

src/views/customerOrg/patientRegisterImport.vue

@@ -11,21 +11,21 @@
         </div>
       </div>
       <div>
-        <el-table :data="tableData" border  v-if="mode=='10'"
+        <el-table :data="tableData" border  v-if="mode=='10'" :row-class-name="importRowClassName"
           :height="window.pageHeight < 600 ? 405 : (window.pageHeight - 195)"
-          highlight-current-row size="small" >
+          highlight-current-row size="small" :summary-method="getSummaries" show-summary>
           <el-table-column type="index" label="序号" width="40" align="center"/>
-          <el-table-column prop="importState" label="导入状态" min-width="80"/>          
-          <el-table-column prop="importDes" label="导入描述" min-width="150"/>          
+          <el-table-column prop="importState" label="导入状态" min-width="80" sortable/>          
+          <el-table-column prop="importDes" label="导入描述" min-width="180" sortable/>          
           <el-table-column v-for="(item,index) in importCols" :key="`col${index}`" :prop="item.dispLabel" align="center" 
             :label="item.dataLabel || item.dispLabel" min-width="100"/>
         </el-table>
-        <el-table :data="tableData" border  v-if="mode=='20'"
+        <el-table :data="tableData" border  v-if="mode=='20'" :row-class-name="importRowClassName"
           :height="window.pageHeight < 600 ? 405 : (window.pageHeight - 195)"
           highlight-current-row size="small" >
           <el-table-column type="index" label="序号" width="40" align="center"/>
-          <el-table-column prop="importState" label="导入状态" min-width="80"/>          
-          <el-table-column prop="importDes" label="导入描述" min-width="150"/>          
+          <el-table-column prop="importState" label="导入状态" min-width="80" sortable/>
+          <el-table-column prop="importDes" label="导入描述" min-width="180" sortable/>
           <el-table-column prop="patientNo" align="center" label="档案号" min-width="80"/>
             <el-table-column prop="medicalTimes" align="center" label="体检次数" min-width="80"/>
             <el-table-column prop="patientName" align="center" label="姓名" min-width="80"/>
@@ -953,6 +953,15 @@ export default {
       
     },
 
+    //导入完后，导入状态显示
+    importRowClassName({ row, rowIndex }) {
+      if (row.importState == '导入失败') {
+        return "danger";
+      } else {
+        return "";
+      }
+    },
+
     //多选 颜色标记 
     handleRowClassName({ row, rowIndex }) {
       if (row.choosed) {
@@ -962,6 +971,40 @@ export default {
       }
     },
 
+    // 导入完后，状态统计
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sumCol = [2]; //需合计的列
+      const sums = [];
+      let success = 0,fail = 0;
+
+      columns.forEach((column, index) => {
+        //显示合计列
+        if (index === 1) {
+          sums[index] = "合计";
+          return;
+        }
+
+        //不合计的列
+        if (sumCol.indexOf(index) == -1) {
+          sums[index] = "";
+          return;
+        }
+        
+        data.forEach((item) => {
+          if(item[column.property] == '导入成功'){
+            success++
+          }else{
+            fail++
+          }
+        });
+        
+      });
+      sums[2] = `导入 成功：${success} 条，失败：${fail} 条。`
+
+      return sums;
+    },
+
 
     //清除所选文件
     fileGetFocus(e){