提交 bd4cb591 编写于 作者: chengxiang.li's avatar chengxiang.li

update

上级 72c058f3
<template>
<div class="add-diagnose-wrap">
<el-dialog
:close-on-click-modal="false"
title="添加诊断"
:visible.sync="centerDialogVisible"
width="900px"
center>
<!-- <span>需要注意的是内容是默认不居中的</span> -->
<div>
<el-input v-model="searchInput" placeholder="搜索疾病" class="search-disease"></el-input>
</div>
<div class="main-content">
<div class="left-box left">
<!-- 常用诊断 -->
<!-- <div class="common-diagnose">
<p class="title">常用诊断<span class='no-result'>没有找到相关搜索结果</span></p>
<ul class="list">
<li
v-for="item in commonList"
:class="returnEachCommonLiClass(item)"
@click="handleEachCommonLiClick(item)"
>
{{item}}
</li>
</ul>
</div> -->
<!-- 搜索列表 有搜索结果时-->
<div class="search-list-wrap">
<ul class="search-list">
<li>
<div class="left">
克里斯都看过了单身快乐<span class="keyword">关键词</span>格但斯克偶尔玩几个看总额为给了我赶紧来看看链接
<p class="code">89234232</p>
</div>
<div class="right"><i class="el-icon-check"></i></div>
</li>
<li>
<div class="left">
克里斯都看过了单身快乐<span class="keyword">关键词</span>格但斯克
<p class="code">89234232</p>
</div>
<div class="right"><i class="el-icon-check"></i></div>
</li>
<li>
<div class="left">
克里斯都看过了单身快乐<span class="keyword">关键词</span>格但斯克偶尔玩几个看总额为给了我赶紧来看看链接
<p class="code">89234232</p>
</div>
<div class="right"><i class="el-icon-check"></i></div>
</li>
<li v-if="showSearchLoading" class="loading">加载中...</li>
</ul>
</div>
</div>
<!-- 已选 -->
<div class="choosed-list-wrap left">
<div class="title">已选 {{choosedList.length}}/20</div>
<div class="choosed-list">
<el-tag
:key="tag"
v-for="tag in choosedList"
closable
:disable-transitions="false"
@close="handleClose(tag)">
<div class="text">{{tag}}</div>
</el-tag>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="hideSelf">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确 定</el-button>
</span>
</el-dialog>
<!-- 已选数量不能超过20个 提示 -->
<el-dialog
title="提示"
:close-on-click-modal="false"
:visible.sync="limitTipsVisible"
width="400px"
center>
<span>最多只能选择20种疾病</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="limitTipsVisible = false">我知道了</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
console.log('&&& 333333333333333333333333')
export default {
data() {
return {
centerDialogVisible: false,
limitTipsVisible: false,
showSearchLoading: false,
searchInput: '',
commonList: ['杀戮空间放开了十几个', '北京', '水电费', '阿尕更多干点', '深刻理解过类似赶紧来看看就两个都是圣诞快乐广俊克雷登斯', '孔1结构','杀戮空间放1开了十几个', '北京2', '水电2费', '阿尕2更多干点', '深刻理2解过类似赶紧来看看就两个都是圣诞快乐广俊克雷登斯', '孔d结构'],
commonChoosedList: ['上海'],
choosedList: ['标签一', '标签一多少分的', '标签二是哦多功能流口水的功能上课了多个接口来的丧假快来打几个是的范德萨范德萨', '标签三','标签三d', 'dewf', '北京'],
canScroll: true,
}
},
computed: {
},
mounted() {
console.log(11999);
console.log('>>>>>>>>>>>>>>>>>>>>>>>> ', this.centerDialogVisible)
},
watch: {
centerDialogVisible(val) {
let that = this;
console.log('val: ', val)
// 搜索时
that.$nextTick(function(){
let searchListWrap = document.querySelector('.search-list-wrap');
console.log('>>> ', searchListWrap)
if( searchListWrap ){
searchListWrap.onscroll = function(){
console.log(11)
let contentH = document.querySelector('.search-list').offsetHeight;
let viewH = 290;
let scrollTop = searchListWrap.scrollTop;
if( that.canScroll && (contentH - viewH - scrollTop <= 50) ){
console.log('到达临界点,开始加载下一页');
that.canScroll = false;
that.loadMoreSearchData();
}
}
}
})
}
},
methods: {
showSelf(params) {
this.centerDialogVisible = true;
if(params && params.clearChoosedList){
this.choosedList = [];
}
},
hideSelf() {
this.centerDialogVisible = false;
},
handleConfirm() {
//
},
handleClose(tag) {
this.choosedList.splice(this.choosedList.indexOf(tag), 1);
},
returnEachCommonLiClass(item) {
let hasIndex = this.hasItem(this.choosedList, item);
if( hasIndex > -1 ){
return 'active';
}else{
return '';
}
},
handleEachCommonLiClick(item) {
console.log('ddd', item);
let hasIndex = this.hasItem(this.choosedList, item);
if( hasIndex > -1 ){
this.choosedList.splice(hasIndex, 1);
}else{
this.choosedList.push(item);
}
},
hasItem(list, item) {
for(let i=0; i<list.length; i++){
if( list[i] == item ){
return i;
}
}
return -1;
},
loadMoreSearchData() {
// request ...加载完成后,可以继续滚动加载
this.canScroll = true;
},
},
}
</script>
<style lang="less">
.scroll-bar{
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar
{
width: 5px;
height: 5px;
background-color: #fff;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track
{
// border-radius: 10px;
// background-color: rgb(241, 239, 239);
// background: #fff;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bbb;
}
}
.add-diagnose-wrap{
.search-disease{
width: 370px;
}
.main-content{
overflow: hidden;
.left{
float: left;
}
.left-box{
width: 370px;
height: 300px;
.common-diagnose{
width: 100%; height: 300px;
.title{
color: #303133;
font-size: 16px;
line-height: 40px;
margin-top: 10px;
.no-result{
font-size: 14px;
color: #e6a23c;
margin-left: 28px;
}
}
.list{
width: 100%; height: 250px;
overflow: hidden;
overflow-y: scroll;
.scroll-bar;
padding: 10px;
border: 1px solid #DCDFE6; border-radius: 4px;
li{
height: 35px; line-height: 35px; padding: 0 15px;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
cursor: pointer;
&.active{
color: #fff;
background: #409eff;
border-color: #409eff;
}
display: inline-block;
margin: 0 10px 10px 0;
border-radius: 4px;
max-width: 350px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
}
}
.search-list-wrap{
width: 100%; height: 290px; margin-top: 10px;
border: 1px solid #DCDFE6;
overflow: hidden;
overflow-y: scroll;
.scroll-bar;
}
.search-list{
border-radius: 4px;
width: 100%;
padding: 10px;
li{
position: relative;
margin-bottom: 10px;
line-height: 20px;
overflow: hidden;
.left{
width: 310px;
float: left;
}
.right{
position: absolute;
right: 0;
top: 50%;
margin-top: -13px;
// width: 0px;
// float: left;
display: inline-block;
vertical-align: middle;
i{
font-size: 24px;
color: #449284;
font-weight: 700;
}
}
.keyword{
color: #ff8429;
}
.code{
line-height: 30px;
}
&.loading{
color: red;
text-align: center;
margin: 0;
}
}
}
}
.choosed-list-wrap{
width: 450px;
height: 300px;
margin-left: 30px;
.title{
color: #303133;
font-size: 16px;
line-height: 40px;
margin-top: 10px;
}
.choosed-list{
overflow: hidden;
overflow-y: scroll;
width: 450px;
height: 250px;
padding: 10px;
border: 1px solid #DCDFE6; border-radius: 4px;
.scroll-bar;
.el-tag {
margin: 0 10px 10px 0;;
.text{
display: inline-block;
max-width: 342px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.el-tag__close{
top: -12px;
}
}
}
}
}
}
</style>
<template>
<div class="form-warp">
<addDiagnose ref="addDiagnose"></addDiagnose>
<el-form
:model="patientInfoForm"
:rules="rules"
......@@ -30,46 +31,50 @@
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <div class="has-header">数据记录</div> -->
<el-row>
<el-col :span="12">
<el-form-item label="诊断" prop="diseaseIdList">
<!-- <el-select
v-model="diseaseIdList"
multiple
@change="changeDiseases"
:popper-append-to-body="false"
placeholder="请选择居民疾病诊断">
<el-option
v-for="(item, index) in diseasesList"
:key="item.diseaseId"
:label="item.diseaseName"
:value="item.diseaseId">
</el-option>
</el-select> -->
<el-button icon="el-icon-plus" @click="handleAddDiagnose">添加诊断</el-button>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分组" prop="labelIdList">
<el-select
v-model="labelIdList"
multiple
@change="changeLabels"
:popper-append-to-body="false"
placeholder="请选择居民分组">
<el-option
v-for="(item, index) in labelsList"
:key="index.labelId"
:label="item.labelName"
:value="item.labelId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="text-align: center;margin-top:15px;" v-show="!patientId"> <el-button plain size="small" @click="toggleClick">{{tipsText}}</el-button></el-col>
</el-row>
<div v-show="isShowAll || patientId">
<div class="has-header">数据记录</div>
<el-row>
<el-col :span="12">
<el-form-item label="诊断" prop="diseaseIdList">
<el-select
v-model="diseaseIdList"
multiple
@change="changeDiseases"
:popper-append-to-body="false"
placeholder="请选择居民疾病诊断">
<el-option
v-for="(item, index) in diseasesList"
:key="item.diseaseId"
:label="item.diseaseName"
:value="item.diseaseId">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分组" prop="labelIdList">
<el-select
v-model="labelIdList"
multiple
@change="changeLabels"
:popper-append-to-body="false"
placeholder="请选择居民分组">
<el-option
v-for="(item, index) in labelsList"
:key="index.labelId"
:label="item.labelName"
:value="item.labelId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="has-header">基本信息</div>
<el-row>
<el-col :span="12">
......@@ -252,9 +257,10 @@
getCityList,
getCountyList,
getTownList } from '@/utils/patients/patientsapi';
import addDiagnose from '@/components/icd/addDiagnose.vue';
export default {
name: "basicInfo",
components: {},
components: { addDiagnose },
data() {
let validCode=(rule,value,callback)=>{
if(value) {
......@@ -478,6 +484,12 @@
townId: null,
}
},
// 点击 添加诊断
handleAddDiagnose() {
this.$refs.addDiagnose.showSelf({
clearChoosedList: true
});
},
initConstant(){
getDiseasesList().then((data) => {
if(data.code == '000000') {
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册