pengjun
2 weeks ago
9 changed files with 999 additions and 82 deletions
-
44src/components/customerOrg/customerOrgTree.vue
-
24src/components/patientRegister/PatientRegisterRecoverList.vue
-
102src/components/patientRegister/customerOrgTreeAll.vue
-
2src/components/patientRegister/patientRegisterQuery.vue
-
632src/components/patientRegister/patientRegisterRecoverListQuery.vue
-
2src/store/index.js
-
219src/utlis/indexedDB.js
-
45src/utlis/proFunc.js
-
11src/views/workload/examinedoctor.vue
@ -0,0 +1,632 @@ |
|||
<template> |
|||
<div> |
|||
<div class="contenttitle"> |
|||
体检查询 /<span class="contenttitleBold">回收表格查询</span> |
|||
</div> |
|||
<div style="display: flex;"> |
|||
|
|||
<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> |
|||
|
|||
<!-- 按钮区域 --> |
|||
<div style="margin-left: 10px;margin-top: -10px;"> |
|||
<div class="listBtn"> |
|||
<el-button class="commonbutton" @click="btnQuery">查询</el-button> |
|||
</div> |
|||
<div class="listBtn"> |
|||
<el-button type="danger" class="commonbutton" @click="btnClear">清除条件</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<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 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"; |
|||
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: {}, // 单行选中的行 |
|||
|
|||
|
|||
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() { |
|||
this.$nextTick(() => { |
|||
this.scrollFull() |
|||
}) |
|||
}, |
|||
computed: { |
|||
...mapState(["window", "dict", "patientRegister", "customerOrg"]), |
|||
}, |
|||
methods: { |
|||
...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]), |
|||
dddw, moment, |
|||
|
|||
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: '操作成功！' }) |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
|
|||
|
|||
//查询 |
|||
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> |
|||
.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> |
|||
@ -0,0 +1,219 @@ |
|||
/** |
|||
* 打开数据库 |
|||
* @param {object} dbName 数据库的名字 |
|||
* @param {string} storeName 仓库名称 |
|||
* @param {string} version 数据库的版本 |
|||
* @return {object} 该函数会返回一个数据库实例 |
|||
*/ |
|||
function openDB(dbName, version = 1) { |
|||
return new Promise((resolve, reject) => { |
|||
// 兼容浏览器
|
|||
var indexedDB = |
|||
window.indexedDB || |
|||
window.mozIndexedDB || |
|||
window.webkitIndexedDB || |
|||
window.msIndexedDB; |
|||
let db; |
|||
// 打开数据库，若没有则会创建
|
|||
const request = indexedDB.open(dbName, version); |
|||
// 数据库打开成功回调
|
|||
request.onsuccess = function (event) { |
|||
db = event.target.result; // 数据库对象
|
|||
// console.log("indexedDB 数据库打开成功");
|
|||
resolve(db); |
|||
}; |
|||
// 数据库打开失败的回调
|
|||
request.onerror = function (event) { |
|||
console.log("indexedDB 数据库打开报错", event) |
|||
reject("indexedDB 数据库打开报错"); |
|||
}; |
|||
|
|||
// 数据库有更新时候的回调
|
|||
request.onupgradeneeded = function (event) { |
|||
// 数据库创建或升级的时候会触发
|
|||
// console.log("onupgradeneeded");
|
|||
db = event.target.result; // 数据库对象
|
|||
// 创建表 keyPath 表示主键，插入更新数据时，必须存在 主键
|
|||
|
|||
// 可放在配置中，读取文件后，循环创建 ObjectStore（表）
|
|||
// let tables = Object.keys(dbSQL.dddw)
|
|||
// tables.forEach(e => {
|
|||
// if (!db.objectStoreNames.contains(e)) createObjectStore(db,e,'id')
|
|||
// });
|
|||
//if (!db.objectStoreNames.contains('dict')) db.createObjectStore('dict', { keyPath: "id" }) // tableName作为id值
|
|||
|
|||
// 创建表 storeName 相当于表的概念
|
|||
createObjectStore(db, 'dict', 'id') // 创建字典表，数据说明：id = tableName
|
|||
createObjectStore(db, 'sort', 'id') // 创建排序信息表，数据说明：id = user_id + _ + tableName + _ + pageName
|
|||
createObjectStore(db, 'drag', 'id') // 创建数据列拖拽表，数据说明：id = user_id + _ + tableName + _ + pageName
|
|||
createObjectStore(db, 'form', 'id') // 创建表单设计表，数据说明：id = user_id + _ + tableName + _ + pageName
|
|||
createObjectStore(db, 'query', 'id') // 创建高级查询表，数据说明：id = user_id + _ + tableName + _ + pageName
|
|||
createObjectStore(db, 'localConfig', 'id') // 创建本地参数，数据说明：本地客户端个性化设置
|
|||
createObjectStore(db, 'route', 'id') // 路由数据， id = path
|
|||
createObjectStore(db, 'other', 'id') // 创建本地参数，数据说明：其他存本地参数，如：用户权限
|
|||
|
|||
// var objectStore; //相当于表名
|
|||
// // 创建存储库
|
|||
// objectStore = db.createObjectStore("signalChat", {
|
|||
// keyPath: "sequenceId", // 这是主键
|
|||
// // autoIncrement: true // 实现自增
|
|||
// });
|
|||
// // 创建索引，在后面查询数据的时候可以根据索引查
|
|||
// objectStore.createIndex("link", "link", { unique: false });
|
|||
// objectStore.createIndex("sequenceId", "sequenceId", { unique: false });
|
|||
// objectStore.createIndex("messageType", "messageType", {
|
|||
// unique: false,
|
|||
// });
|
|||
}; |
|||
}); |
|||
} |
|||
|
|||
function createObjectStore(db, objectStoreName, keyPath) { |
|||
if (!db.objectStoreNames.contains(objectStoreName)) db.createObjectStore(objectStoreName, { keyPath: keyPath || "id" }) |
|||
} |
|||
|
|||
/** |
|||
* 更新数据 (插入也可以用此接口) |
|||
* @param {object} db 数据库实例 |
|||
* @param {string} storeName 仓库名称 |
|||
* @param {object} data 数据 {id:'data',records:[],updatedat:Date.now()} |
|||
* @param {string} devMode 是否开发模式 Y 时，打印日志 |
|||
*/ |
|||
function updateDB(db, pkey, data, devMode) { |
|||
return updateDBCom(db, 'dict', pkey, data, devMode) |
|||
} |
|||
function updateDBCom(db, storeName, pkey, data, devMode) { |
|||
return new Promise((resolve, reject) => { |
|||
|
|||
let request = db |
|||
.transaction([storeName], "readwrite") // 事务对象
|
|||
.objectStore(storeName) // 仓库对象
|
|||
.put({ id: pkey, data, createdat: Date.now() }); |
|||
|
|||
request.onsuccess = function () { |
|||
if (devMode == 'Y') console.log("indexedDB 数据更新成功:storeName, pkey ", storeName, pkey); |
|||
resolve("indexedDB 数据更新成功"); |
|||
}; |
|||
|
|||
request.onerror = function () { |
|||
if (devMode == 'Y') console.log("indexedDB 数据更新失败"); |
|||
reject("数据更新失败") |
|||
}; |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* 通过主键读取数据 |
|||
* @param {object} db 数据库实例 |
|||
* @param {string} storeName 仓库名称 |
|||
* @param {string} key 主键值 |
|||
* @param {string} devMode 是否开发模式 Y 时，打印日志 |
|||
*/ |
|||
function getDataByKey(db, pkey, devMode) { |
|||
return getDataByKeyCom(db, 'dict', pkey, devMode) |
|||
} |
|||
function getDataByKeyCom(db, storeName, pkey, devMode) { |
|||
return new Promise((resolve, reject) => { |
|||
var transaction = db.transaction([storeName]); // 事务
|
|||
var objectStore = transaction.objectStore(storeName); // 仓库对象
|
|||
var request = objectStore.get(pkey); // 通过主键获取数据
|
|||
|
|||
request.onerror = function (event) { |
|||
let err = `indexedDB 缓存数据库，读取 ${db}.${storeName} id=${pkey} 记录失败` |
|||
if (devMode == 'Y') console.error(err, event); |
|||
reject(err) |
|||
}; |
|||
|
|||
request.onsuccess = function () { |
|||
if (devMode == 'Y') console.log(`indexedDB 缓存数据库，读取 ${db}.${storeName} id=${pkey} 记录成功：`, request.result); |
|||
resolve(request.result); |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 通过主键删除数据 |
|||
* @param {object} db 数据库实例 |
|||
* @param {string} storeName 仓库名称 |
|||
* @param {object} pkey 主键值 |
|||
* @param {string} devMode 是否开发模式 Y 时，打印日志 |
|||
*/ |
|||
function deleteDB(db, storeName, pkey, devMode) { |
|||
return new Promise((resolve, reject) => { |
|||
var request = db |
|||
.transaction([storeName], "readwrite") |
|||
.objectStore(storeName) |
|||
.delete(pkey); |
|||
|
|||
request.onsuccess = function () { |
|||
let msg = `indexedDB缓存数据 ${db}.${storeName} id=${pkey} 记录删除成功` |
|||
if (devMode == 'Y') console.log(msg); |
|||
resolve(msg); |
|||
}; |
|||
|
|||
request.onerror = function () { |
|||
let err = `indexedDB缓存数据 ${db}.${storeName} id=${pkey} 记录删除失败` |
|||
if (devMode == 'Y') console.error(err); |
|||
reject(err) |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 关闭数据库 |
|||
* @param {object} db 数据库实例 |
|||
*/ |
|||
function closeDB(db) { |
|||
db.close(); |
|||
// console.log("数据库已关闭");
|
|||
} |
|||
|
|||
// 删库
|
|||
const dropDB = (dbName, devMode) => { |
|||
return new Promise((resolve, reject) => { |
|||
let request = indexedDB.deleteDatabase(dbName); |
|||
request.onsuccess = () => { |
|||
let msg = `indexedDB缓存数据库 ${dbName} 已删除成功` |
|||
if (devMode == 'Y') console.log(msg); |
|||
resolve(msg); |
|||
}; |
|||
|
|||
request.onerror = (event) => { |
|||
if (devMode == 'Y') console.error(`indexedDB缓存数据库 ${dbName} 删除失败：`, event.target.error); |
|||
reject(`indexedDB缓存数据库 ${dbName} 删除失败：${event.target.error}`) |
|||
}; |
|||
|
|||
request.onblocked = () => { |
|||
let wMsg = `indexedDB存在未关闭的缓存数据库 ${dbName} 连接，删除被暂时阻塞` |
|||
if (devMode == 'Y') console.warn(wMsg); |
|||
reject(wMsg) |
|||
}; |
|||
}) |
|||
|
|||
} |
|||
|
|||
// 清单个表，保留表结构
|
|||
const clearStore = (db, storeName) => { |
|||
return new Promise((resolve, reject) => { |
|||
const transaction = db.transaction(storeName, 'readwrite'); |
|||
const objectStore = transaction.objectStore(storeName); |
|||
const clearRequest = objectStore.clear(); |
|||
|
|||
clearRequest.onsuccess = function () { |
|||
resolve(`清除表【${storeName}】数据成功！`); |
|||
}; |
|||
|
|||
clearRequest.onerror = function (error) { |
|||
reject(`清除表【${storeName}】数据失败，原因: ` + error); |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
|
|||
|
|||
export default { |
|||
openDB, updateDBCom, getDataByKeyCom, deleteDB, dropDB, clearStore, closeDB, |
|||
updateDB, getDataByKey |
|||
|
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue