shentun
/
peisweb
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity
Browse Source

虚拟化表格

master
luobinjie 3 months ago
parent
d82be192e4
commit
4449fd14af
4 changed files with 117 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/assets/css/global_table.css
  2. 2
      src/components/patientRegister/PatientRegisterList.vue
  3. 162
      src/components/patientRegister/PatientRegisterRecoverList.vue
  4. 18
      src/components/report/PatientRegisterListNobtn.vue

3
src/assets/css/global_table.css
View File

@ -72,7 +72,8 @@
/* 设置表体样式 */ /* 设置表体样式 */
.el-table td.el-table__cell, .el-table td.el-table__cell,
.plTableBox .el-table td.is-center {
.plTableBox .el-table td.is-center,
.plTableBox .el-table td {
padding: 0; padding: 0;
color: #52555F; color: #52555F;
/* 设置表体文字颜色 */ /* 设置表体文字颜色 */

2
src/components/patientRegister/PatientRegisterList.vue
View File

@ -9,7 +9,7 @@
: Math.floor(((window.pageHeight - 250) * 2) / 3) : Math.floor(((window.pageHeight - 250) * 2) / 3)
" highlight-current-row @row-click="rowClick" @row-dblclick="dblClick" size="small" row-key="id" " highlight-current-row @row-click="rowClick" @row-dblclick="dblClick" size="small" row-key="id"
@selection-change="handleSelectionChange" @row-contextmenu="onCellRightClick" ref="info" id="info" @selection-change="handleSelectionChange" @row-contextmenu="onCellRightClick" ref="info" id="info"
:row-class-name="handleRowClassName" use-virtual :row-height="25" @table-body-scroll="scrollFull"
:row-class-name="handleRowClassName" use-virtual :row-height="35" @table-body-scroll="scrollFull"
big-data-checkbox :data-changes-scroll-top="false"> big-data-checkbox :data-changes-scroll-top="false">
<u-table-column type="selection" width="40" align="center"></u-table-column> <u-table-column type="selection" width="40" align="center"></u-table-column>
<u-table-column v-for="(item, index) in dragCol" :key="index" :type="dragCol[index].type" <u-table-column v-for="(item, index) in dragCol" :key="index" :type="dragCol[index].type"

162
src/components/patientRegister/PatientRegisterRecoverList.vue
View File

@ -1,44 +1,44 @@
<template> <template>
<div style="display: flex;"> <div style="display: flex;">
<div :style="'width:' + (window.pageWidth - 200 - 145) + 'px;'"> <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">
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="isRecoverGuide" label="回收" align="center" width="50" sortable>
<u-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" use-virtual :row-height="35" big-data-checkbox :data-changes-scroll-top="false">
<u-table-column type="selection" width="40" align="center" />
<u-table-column type="index" label="序号" width="50" align="center" />
<u-table-column prop="isRecoverGuide" label="回收" align="center" width="50" sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<el-checkbox :value="scope.row.isRecoverGuide == 'Y'" /> <el-checkbox :value="scope.row.isRecoverGuide == 'Y'" />
</template> </template>
</el-table-column>
<el-table-column prop="completeFlag" label="体检进度" sortable>
</u-table-column>
<u-table-column prop="completeFlag" label="体检进度" sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ ldddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}</div> <div>{{ ldddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}</div>
</template> </template>
</el-table-column>
<el-table-column prop="isLock" label="锁住" width="50" sortable>
</u-table-column>
<u-table-column prop="isLock" label="锁住" width="50" sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<i class="el-icon-lock" v-if="scope.row.isLock == 'Y'" style="font-size: 20px; color: red" /> <i class="el-icon-lock" v-if="scope.row.isLock == 'Y'" style="font-size: 20px; color: red" />
</template> </template>
</el-table-column>
<el-table-column prop="customerOrgParentName" label="单位" width="180" sortable>
</u-table-column>
<u-table-column prop="customerOrgParentName" label="单位" width="180" sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgParentName : scope.row.customerOrgName }} <div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgParentName : scope.row.customerOrgName }}
</div> </div>
</template> </template>
</el-table-column>
<el-table-column prop="customerOrgName" label="部门" width="180">
</u-table-column>
<u-table-column prop="customerOrgName" label="部门" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ scope.row.customerOrgParentName == scope.row.customerOrgName ? "" : scope.row.customerOrgName }}</div> <div>{{ scope.row.customerOrgParentName == scope.row.customerOrgName ? "" : scope.row.customerOrgName }}</div>
</template> </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">
</u-table-column>
<u-table-column prop="patientName" label="姓名" />
<u-table-column prop="sexName" label="性别">
</u-table-column>
<u-table-column prop="age" label="年龄" />
<u-table-column prop="patientRegisterNo" label="条码号" width="150" />
<u-table-column prop="patientNo" label="档案号" />
<u-table-column prop="medicalTimes" label="体检次数"></u-table-column>
<u-table-column label="分组/套餐" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId === dict.personOrgId"> <div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId === dict.personOrgId">
{{ scope.row.medicalPackageName }} {{ scope.row.medicalPackageName }}
@ -47,50 +47,50 @@
{{ scope.row.customerOrgGroupName }} {{ scope.row.customerOrgGroupName }}
</div> </div>
</template> </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">
</u-table-column>
<u-table-column prop="nationName" label="民族">
</u-table-column>
<u-table-column prop="idNo" label="身份证" width="150" />
<u-table-column prop="birthDate" label="出生日期" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.birthDate"> <div v-if="scope.row.birthDate">
{{ lmoment(scope.row.birthDate, "yyyy-MM-DD") }} {{ lmoment(scope.row.birthDate, "yyyy-MM-DD") }}
</div> </div>
</template> </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">
</u-table-column>
<u-table-column prop="email" label="邮箱" width="100" />
<u-table-column prop="mobileTelephone" label="手机" width="100" />
<u-table-column prop="telephone" label="电话" width="100" />
<u-table-column prop="address" label="地址" width="300" />
<u-table-column prop="medicalCardNo" label="体检卡号" />
<u-table-column prop="jobCardNo" label="工卡号" />
<u-table-column prop="maritalStatusName" label="婚姻状况">
</u-table-column>
<u-table-column prop="medicalTypeName" label="体检类别">
</u-table-column>
<u-table-column prop="personnelTypeName" label="人员类别">
</u-table-column>
<u-table-column prop="jobPost" label="职务" />
<u-table-column prop="jobTitle" label="职称" />
<u-table-column prop="salesman" label="介绍人" />
<u-table-column prop="isVip" label="VIP">
<template slot-scope="scope"> <template slot-scope="scope">
<el-checkbox :value="scope.row.isVip == 'Y'" /> <el-checkbox :value="scope.row.isVip == 'Y'" />
</template> </template>
</el-table-column>
<el-table-column prop="creatorName" label="登记人" />
<el-table-column prop="creationTime" label="登记日期" width="100">
</u-table-column>
<u-table-column prop="creatorName" label="登记人" />
<u-table-column prop="creationTime" label="登记日期" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ lmoment(scope.row.creationTime, "yyyy-MM-DD") }}</div> <div>{{ lmoment(scope.row.creationTime, "yyyy-MM-DD") }}</div>
</template> </template>
</el-table-column>
<el-table-column prop="isUpload" label="上传">
</u-table-column>
<u-table-column prop="isUpload" label="上传">
<template slot-scope="scope"> <template slot-scope="scope">
<el-checkbox :value="scope.row.isUpload == 'Y'" /> <el-checkbox :value="scope.row.isUpload == 'Y'" />
</template> </template>
</el-table-column>
</u-table-column>
</el-table>
</u-table>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div></div> <div></div>
<div> <div>
@ -142,10 +142,13 @@ import { savePeoplePhoto } from "../../utlis/proApi";
import PatientRegisterEdit from "../../components/patientRegister/PatientRegisterEdit.vue"; import PatientRegisterEdit from "../../components/patientRegister/PatientRegisterEdit.vue";
import Camera from "../../components/patientRegister/Camera.vue"; import Camera from "../../components/patientRegister/Camera.vue";
import { UTable, UTableColumn } from "umy-ui";
export default { export default {
components: { components: {
PatientRegisterEdit, PatientRegisterEdit,
Camera, Camera,
UTable,
UTableColumn,
}, },
data() { data() {
return { return {
@ -236,9 +239,9 @@ export default {
//挂载完成 //挂载完成
mounted() { mounted() {
this.$nextTick(() => {
this.scrollFull()
})
// this.$nextTick(() => {
// this.scrollFull()
// })
}, },
computed: { computed: {
...mapState(["window", "dict", "patientRegister", "customerOrg"]), ...mapState(["window", "dict", "patientRegister", "customerOrg"]),
@ -585,24 +588,42 @@ export default {
//滚动加载数据 //滚动加载数据
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
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['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
// }
// }
// })
}, },
btnExport(elId) { btnExport(elId) {
let tableDatas = deepCopy(this.tableData) let tableDatas = deepCopy(this.tableData)
@ -637,6 +658,7 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/global_table.css";
.listBtn { .listBtn {
margin-top: 10px; margin-top: 10px;
} }

18
src/components/report/PatientRegisterListNobtn.vue
View File

@ -3,7 +3,7 @@
<div @contextmenu.prevent="onContextmenu"> <div @contextmenu.prevent="onContextmenu">
<u-table :data="patientRegister.prList" border ref="info" id="info" <u-table :data="patientRegister.prList" border ref="info" id="info"
:height="(window.pageHeight < 600) ? 230 : (window.pageHeight - 370)" highlight-current-row :height="(window.pageHeight < 600) ? 230 : (window.pageHeight - 370)" highlight-current-row
@row-click="rowClick" size="small" row-key="patientRegisterId" @selection-change="handleSelectionChange" @row-contextmenu="rowContextmenu" @table-body-scroll="scrollFull" use-virtual :row-height="25" big-data-checkbox :data-changes-scroll-top="false">
@row-click="rowClick" size="small" row-key="patientRegisterId" @selection-change="handleSelectionChange" @row-contextmenu="rowContextmenu" @table-body-scroll="scrollFull" use-virtual :row-height="35" big-data-checkbox :data-changes-scroll-top="false">
<u-table-column :type="dragCol[0].type" width="40" align="center" /> <u-table-column :type="dragCol[0].type" width="40" align="center" />
<!--列可拖拽 key值很关键 --> <!--列可拖拽 key值很关键 -->
<u-table-column v-for="(item, index) in dragCol" v-if="index != 0" :key="`${item.label + index}`" <u-table-column v-for="(item, index) in dragCol" v-if="index != 0" :key="`${item.label + index}`"
@ -315,16 +315,23 @@ export default {
//滚动加载数据 //滚动加载数据
async scrollFull(scroll, event) { async scrollFull(scroll, event) {
if (scroll.judgeFlse) {
if (!scroll.judgeFlse) return;
// 正在加载时阻止重复触发
if (this.lazyLoading) return;
if ( if (
(Number(this.loadOpts.skipCount) + 1) * (Number(this.loadOpts.skipCount) + 1) *
Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.maxResultCount) >=
Number(this.loadOpts.totalCount) Number(this.loadOpts.totalCount)
) { ) {
return; return;
} else {
await this.load();
} }
this.lazyLoading = true;
try {
await this.load();
} catch (e) {
console.error('scrollFull load error', e);
} }
// this.dom = this.$refs['info'].bodyWrapper // this.dom = this.$refs['info'].bodyWrapper
// console.log('this.dom', this.dom) // console.log('this.dom', this.dom)
@ -520,7 +527,7 @@ export default {
// 不带收费信息 /api/app/patientregister/getlistinfilter // 不带收费信息 /api/app/patientregister/getlistinfilter
postapi('/api/app/peisreport/getpatientregisterreport', body).then(res => { postapi('/api/app/peisreport/getpatientregisterreport', body).then(res => {
if (res.code > -1) { if (res.code > -1) {
this.lazyLoading = false
if (this.patientRegister.query.isSeries == 'Y' && this.patientRegister.query.patientRegisterNo) { if (this.patientRegister.query.isSeries == 'Y' && this.patientRegister.query.patientRegisterNo) {
if (this.dataTransOpts.tableM.patient_register.length == 0) { if (this.dataTransOpts.tableM.patient_register.length == 0) {
this.patientRegister.prList = this.prListTrans(res.data.items) this.patientRegister.prList = this.prListTrans(res.data.items)
@ -606,6 +613,7 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/global_table.css";
.box { .box {
display: flex; display: flex;
} }

Write Preview
Loading…
Cancel
Save