Skip to content

P
pica.cloud.web-education-admin
提交 240fbb9c 编写于 作者: yi.li's avatar yi.li
浏览文件
操作

添加选择居民弹层

上级 3241777b
显示空白字符变更
内嵌 并排
正在显示 包含 530 行增加 和 12 行删除
src/views/patients/labels-manage/dialog/select-patitents.vue 0 → 100644
浏览文件 @ 240fbb9c
<template>
<div class="select-patient-dialog">
<el-dialog
title="添加居民"
:visible.sync="showSelectPatient"
v-if="isShowSelectPatient"
:before-close="clickClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="950px"
top="2%"
center>
<div class="finish-content">
<el-form
ref="searchData"
:model="searchData"
:inline="true"
class="select-width"
size="small">
<el-form-item>
<el-select
v-model="searchData.sex"
@change="changeSex"
placeholder="请选择性别">
<el-option
v-for="(item,index) in sexOptions"
:key="index"
:label="item.value"
:value="item.no">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchData.ageRange"
@change="changeAge"
multiple
collapse-tags
placeholder="请选择年龄段">
<el-option
v-for="(item,index) in ageOptions"
:key="index"
:label="item.value"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchData.diseaseId"
@change="changeDisease"
multiple
collapse-tags
placeholder="请选择诊断">
<el-option
v-for="(item,index) in diseaseOptions"
:key="index"
:label="item.diseaseName"
:value="item.diseaseId">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchData.labelId"
@change="changeLabel"
multiple
collapse-tags
filterable
placeholder="请选择或搜索分组">
<el-option
v-for="(item,index) in labelOptions"
:key="index"
:label="item.labelName"
:value="item.labelId">
</el-option>
</el-select>
</el-form-item>
<el-form-item style="width:160px;">
<el-input v-model="searchData.searchCondition" placeholder="请输入姓名或手机号" >
<i slot="prefix" class="el-input__icon el-icon-search" @click="searchHandler" style="cursor: pointer"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-button>查询</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
<el-table
:data="patientsData"
ref="multipleTable"
center
style="width: 100%;margin-top: 20px;"
height="280"
:row-key="getRowKeys"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
align="center"
:reserve-selection="true"
:selectable="checkboxInit">
</el-table-column>
<el-table-column
prop="nickname"
label="姓名"
align="center">
</el-table-column>
<el-table-column
prop="sexStr"
label="性别"
align="center">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
align="center">
</el-table-column>
<el-table-column
prop="mobilePhone"
label="手机"
align="center"
min-width="150px">
</el-table-column>
<el-table-column
prop="showDiseaseNames"
label="基础疾病"
align="center"
width="200"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="showLabelName"
label="分组"
align="center"
width="200"
:show-overflow-tooltip="true">
</el-table-column>
</el-table>
<el-row type="flex" justify="end" class="margin-top20">
<el-pagination
background
v-if="patientsData.length"
@size-change="handleSizeChangePre"
@current-change="handleCurrentChangePre"
layout="total, sizes, prev, pager, next, jumper"
:current-page="paginationSet.pageNum"
:page-sizes="[5,10,50,100]"
:page-size="paginationSet.pageSize"
:total="paginationSet.total">
</el-pagination>
</el-row>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="clickClose" size="small" plain>取 消</el-button>
<el-button type="primary" size="small" @click="sureClick">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { getBasicData, getPlanPatientsList, getAllDiseases, getAllLabels } from '@/utils/followup/followapis'
export default {
components: {},
name: "select-patient",
data() {
return {
showSelectPatient: true,
allSelects: [],
// eachSelects: [],//仅仅是操作选择的总人员
// totalSelect: [],// 当前所选的人
labelId: '',
diseaseId: '',
age: '',
sex: '',
ageBegin: '',
ageEnd: '',
srvPackageId: '',
searchCondition: '',
patientsData: [],
searchData: {
sex: null,
ageRange: [],
ageBegin: '',
ageEnd: '',
// diseaseId: '基础疾病',
diseaseId: [],
// labelId: '分组',
labelId: [],
searchCondition: ''
},
paginationSet: {
pageNum: 1,
pageSize: 5,
total: 0
},
sexOptions: [{
no: '',
value: '不限'
}],
ageOptions: [
// {
// no: '',
// value: '年龄范围'
// }
],
diseaseOptions: [
// {
// diseaseId: '',
// diseaseName: '基础疾病'
// }
],
labelOptions: [
// {
// labelId: '',
// labelName: '分组'
// }
],
newSelects: [], //新选中的人
getRowKeys(row) {
// console.log('sshkdhdk',row)
return row.patientId;
},
}
},
props: {
isShowSelectPatient: Boolean, //是否显示model,
patientIdList: Array,// 确定已经选过的居民
oldPatientIdList: Array,// 确定已经选过的居民
},
watch: {
isShowSelectPatient(val){
if(val){
this.getPatientsList()
// 获取常量 性别、年龄
getBasicData({
numList: 'P057,P006'
}).then(res=>{
this.sexOptions = [{
no: '',
value: '不限'
}];
this.sexOptions = this.sexOptions.concat(res.data.P006);//性别
this.ageOptions = [
// {
// no: '',
// value: '年龄范围'
// }
]
this.ageOptions = this.ageOptions.concat(res.data.P057);//年龄段
})
// 获取所有疾病
getAllDiseases().then(res=>{
this.diseaseOptions = [
// {
// diseaseId: '',
// diseaseName: '基础疾病'
// }
]
this.diseaseOptions = this.diseaseOptions.concat(res.data);
})
// 获取所有分组
getAllLabels({type: 1}).then(res=>{
this.labelOptions = [
// {
// labelId: '',
// labelName: '分组'
// }
]
this.labelOptions = this.labelOptions.concat(res.data.labelNameList);
})
}
},
},
methods: {
checkboxInit(row,index){
if(row.disableNum == undefined) {
return 1
} else {
return row.disableNum
}
},
getPatientsList(){
const data = {
pageSize: this.paginationSet.pageSize,
pageNo: this.paginationSet.pageNum,
labelId:this.labelId,
diseaseId: this.diseaseId,
age: this.age,
sex: this.sex,
ageBegin: this.ageBegin,
ageEnd: this.ageEnd,
srvPackageId:this.srvPackageId,
searchCondition:this.searchCondition,
}
getPlanPatientsList(data).then(res=>{
if(res.data.patientList){
this.patientsData = res.data.patientList //接口获取的当页居民
this.getSex()
this.paginationSet.total = res.data.totalRows
// 设置所请求的当页人员是否成为选中状态
// console.log('传入的已选居民',this.patientIdList)
this.patientsData.forEach((item)=>{
item.disableNum = 1;
let diseaseNames = [];
let groupNames = []
//转化分组
if(item.labelModels) {
item.labelModels.forEach(item => {
groupNames.push(item.label)
});
item.showLabelName = groupNames.join('、');
} else {
item.showLabelName = '-';
}
//转化疾病
if(item.patientTypeModels) {
item.patientTypeModels.forEach(item => {
diseaseNames.push(item.name)
})
item.showDiseaseNames = diseaseNames.join('、');
}else {
item.showDiseaseNames = '-';
}
if(this.patientIdList.length > 0){
if(this.patientIdList.includes(item.patientId)){// 如果已经选过居民
this.$nextTick(()=>{
this.$refs.multipleTable.toggleRowSelection(item,true);
})
}
}
if(this.oldPatientIdList!=undefined&&this.oldPatientIdList.length) {
this.patientsData.forEach((item)=>{
if(this.oldPatientIdList.includes(item.patientId)){// 如果已经选过居民
item.disableNum = 0
} else {
item.disableNum = 1
}
})
}
})
// console.log(this.oldPatientIdList)
}else{
this.patientsData = []
}
})
},
getSex(){
this.patientsData.forEach((item,index)=>{
if(item.sex==1){
this.patientsData[index].sexStr = '男'
}else if(item.sex==2){
this.patientsData[index].sexStr = '女'
}else{
this.patientsData[index].sexStr = '未知'
}
})
},
// 对选中的居民进行去重
removeDuplicates(list){
return Array.from(new Set(list))
},
// 选择居民
handleSelectionChange(val) {
const _this = this;
_this.newSelects = [];
val.forEach(item => {
if(item.disableNum == 1) {
_this.newSelects.push(item)
}
})
},
// 切换分页
handleCurrentChangePre(val) {
this.paginationSet.pageNum = val
this.getPatientsList()
},
clickClose(){
this.$emit('closeSelectPatient',false)
},
sureClick(){
if(this.newSelects.length) {
this.$emit('sureSelectPatient',false,this.newSelects)
} else {
this.$message.warning('请先选择!')
}
},
handleSizeChangePre(val) {
// console.log('handleSizeChangePre')
this.paginationSet.pageSize = val
this.getPatientsList()
},
changeSex(val){
this.sex = val;
this.paginationSet.pageNum = 1;
this.getPatientsList()
},
changeAge(val){
if(val=='年龄范围'){
val = null
}
this.age = val;
this.ageBegin = this.ageDate(val).ageBegin;
this.ageEnd = this.ageDate(val).ageEnd;
this.paginationSet.pageNum = 1;
this.getPatientsList()
},
changeDisease(val){
this.diseaseId = val;
this.paginationSet.pageNum = 1;
this.getPatientsList()
},
changeLabel(val){
this.labelId = val;
this.paginationSet.pageNum = 1;
this.getPatientsList()
},
searchHandler() {
const searchCondition = this.searchData.searchCondition;
this.searchCondition = searchCondition;
this.paginationSet.pageNum = 1;
this.getPatientsList()
},
ageDate(val){
let ageObj;
if(!val){
ageObj = {
ageBegin:'',
ageEnd:''
}
}else if(val.indexOf('+') > -1){
ageObj = {
ageBegin: 84,
ageEnd: 200
}
}else {
let ageItem = val.split('-');
ageObj = {
ageBegin:ageItem[0],
ageEnd:ageItem[1]
}
}
return ageObj;
}
},
}
</script>
<style lang="scss">
.select-patient-dialog {
.el-dialog__wrapper {
overflow: hidden;
.el-dialog--center {
height: 580px;
.el-table--scrollable-y,.el-table__body-wrapper {
&::-webkit-scrollbar{
width:5px;
}
&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.1);
}
}
/*.el-dialog__body {
max-height: 80%;
overflow: hidden;
.finish-content {
height: 100%;
.el-table {
.el-table--scrollable-y .el-table__body-wrapper {
height: 80%;
}
}
}
}*/
}
}
.select-width .el-form-item{
width: 130px;
}
.margin-top20{
margin-top: 20px;
}
}
</style>
src/views/patients/labels-manage/labels-detail.vue
浏览文件 @ 240fbb9c
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<p class="title">分组成员：</p> <p class="title">分组成员：</p>
<p class="member-number">{{searchData.totalRows}}人</p> <p class="member-number">{{searchData.totalRows}}人</p>
<div class="right"> <div class="right">
<el-button type="primary" size="small" class="create-new-label" v-if="!isUngrouped" >添加居民</el-button> <el-button type="primary" size="small" class="create-new-label" v-if="!isUngrouped" @click="addPatientsHandler">添加居民</el-button>
<el-button type="default" size="small" class="create-new-label" v-if="!isUngrouped" @click="handleDeletePatients">批量删除</el-button> <el-button type="default" size="small" class="create-new-label" v-if="!isUngrouped" @click="handleDeletePatients">批量删除</el-button>
</div> </div>
</div> </div>
...@@ -135,6 +135,12 @@ ...@@ -135,6 +135,12 @@
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
<select-patient
:isShowSelectPatient="isShowSelectPatient"
:patientIdList="patientIdList"
@closeSelectPatient="closeSelectPatient"
@sureSelectPatient="sureSelectPatient(arguments)"
/>
</div> </div>
</template> </template>
...@@ -147,6 +153,7 @@ ...@@ -147,6 +153,7 @@
changeLabelName, changeLabelName,
deleteCurrentPatients, deleteCurrentPatients,
} from '@/utils/patients/patientsapi' } from '@/utils/patients/patientsapi'
import SelectPatient from './dialog/select-patitents';
export default { export default {
...@@ -162,6 +169,8 @@ ...@@ -162,6 +169,8 @@
showChangeLabelNameDialog: false, showChangeLabelNameDialog: false,
centerDialogVisible: false, centerDialogVisible: false,
showDeletePatientsDialog: false, showDeletePatientsDialog: false,
isShowSelectPatient: false,
patientIdList: [],
searchData: { searchData: {
pageNo: 1, // 第几页 pageNo: 1, // 第几页
pageSize: 10, // 每页条数 pageSize: 10, // 每页条数
...@@ -176,6 +185,7 @@ ...@@ -176,6 +185,7 @@
}, },
components: { components: {
BreadCrumb, BreadCrumb,
SelectPatient,
}, },
computed: { computed: {
changeNameClass() { changeNameClass() {
...@@ -370,7 +380,14 @@ ...@@ -370,7 +380,14 @@
}).catch(err => { }).catch(err => {
console.log('error: ', err) console.log('error: ', err)
}); });
} },
addPatientsHandler() {
this.isShowSelectPatient = true;
},
closeSelectPatient() {},
sureSelectPatient(arg) {
},
} }
} }
</script> </script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或