<template>
<div class="box">
<el-row :gutter="20">
<el-col :span="8">
<el-card class="box-card">
<div slot="header" style="display:flex;">
<el-autocomplete
v-model="hospitalInfo"
v-scrollLoad="handleScroll"
class="my-input"
:fetch-suggestions="querySearch"
placeholder="请输入医院名称关键词"
:trigger-on-focus="false"
@select="handleSelect"
/>
<el-select v-if="isShowGradeSelect" v-model="gradeInfo" class="my-select" @change="chooseHospitalGrade">
<el-option
v-for="(item, index) in hospitalGradeList"
:key="index"
:label="item.label"
:value="item.label"
/>
</el-select>
<i v-if="isShowGradeSelect" class="el-icon-circle-plus-outline" @click="addHospitalInfo"></i>
</div>
<!-- <p v-if="!isEdit" style="cursor:pointer;">
<span v-for="(item, index) in hospitalList" :key="index" class="no-edit" @dblclick="editHospitalInfo(item.id)">
<span class="my-input">{{ item.hospitalName }}</span>
<span class="my-select">{{ item.grade }}</span>
<i class="el-icon-circle-close" @click="delHospitalInfo(item.id)"></i>
</span>
</p> -->
<p v-for="(item, index) in hospitalList" :key="index" style="display:flex;">
<span v-if="isEdit && editId === item.id">
<el-input id="my-edit-pipeline" v-model="item.hospitalName" class="my-input" @change="editName" @blur="blurFun" @focus="focusFun" />
<el-select v-model="item.grade" class="my-select" @change="editGrade">
<el-option
v-for="(itm, idx) in hospitalGradeList"
:key="idx"
:label="itm.label"
:value="itm.label"
/>
</el-select>
<i class="el-icon-circle-close my-edit" @click="delHospitalInfo(item.id)"></i>
</span>
<span v-else>
<span class="no-edit" @dblclick="editHospitalInfo(item.id)">
<span class="my-input">{{ item.hospitalName }}</span>
<span class="my-select">{{ item.grade }}</span>
<i class="el-icon-circle-close" @click="delHospitalInfo(item.id)"></i>
</span>
</span>
</p>
</el-card>
</el-col>
<el-col :span="8"></el-col>
<el-col :span="8"></el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'ConfigManage',
data () {
return {
hospitalList: [], // 已配置的医院列表
hospitalGradeList: [{ // 医院等级列表
value: 0,
label: '一甲'
}, {
value: 1,
label: '一乙'
}, {
value: 2,
label: '一丙'
}, {
value: 3,
label: '二甲'
}, {
value: 4,
label: '二乙'
}, {
value: 5,
label: '二丙'
}, {
value: 6,
label: '三甲'
}, {
value: 7,
label: '三乙'
}, {
value: 8,
label: '三丙'
}],
hospitalInfo: '',
gradeInfo: '',
options: [], // 医院名称联想列表
// loading: false,
// list: [],
// states: [],
isEdit: false, // input框是否处于编辑状态
isShowGradeSelect: false, // 是否展示医院等级选择下拉框
hospitalNameList: [],
currentPage: 1,
editId: '',
page: 1
}
},
mounted () {
},
directives: {
scrollLoad: {
bind (el, binding, vnode) {
console.log(el)
const wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
const listDom = el.querySelector('.el-autocomplete-suggestion__wrap .el-autocomplete-suggestion__list')
wrapDom.addEventListener('scroll', (e) => {
const condition = wrapDom.offsetHeight + wrapDom.scrollTop + 20 - listDom.offsetHeight
if (condition > 0 && !vnode.context.loading) {
// 滚动到底部则执行滚动方法load,binding.value就是v-scrollLoad绑定的值,加()表示执行绑定的方法
binding.value()
}
}, false)
}
}
},
created () {
this.getHospitalData()
this.getHospitalNameList()
},
methods: {
// 滚动时触发的方法
handleScroll () {
console.log('111')
},
// remoteMethod(query) {
// if (query !== '') {
// this.loading = true
// setTimeout(() => {
// this.loading = false
// this.options = this.list.filter(item => {
// return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
// })
// this.isShowGradeSelect = true
// }, 200)
// } else {
// this.options = []
// this.isShowGradeSelect = false
// }
// },
querySearch (queryString, callback) { // queryString是input框改变后的值,querySearch与input事件相似,当input框内的值改变即会触发
this.page = 1
var hospitalNameList = this.hospitalNameList
var results = queryString ? hospitalNameList.filter(this.createFilter(queryString)) : hospitalNameList
if (results.length === 0) {
this.isShowGradeSelect = true
} else {
this.isShowGradeSelect = false
}
// 调用 callback 返回建议列表的数据
const list = this.hospitalNameList.slice((this.page - 1) * 10, this.page * 10)
callback(list)
},
// 可不要
createFilter (queryString) {
return (hospitalNameList) => {
return (hospitalNameList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
// 可不要
getHospitalNameList () {
this.hospitalNameList = [
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '瑞金北院' },
{ value: '昌平中西医结合医院' }
]
},
handleSelect (item) {
console.log(item)
},
// 选择医院等级
chooseHospitalGrade (value) {
console.log(value)
},
// 获取医院配置
getHospitalData () {
const params = {
hospitalName: this.hospitalInfo,
page: this.currentPage,
size: 10
}
console.log(params)
const res = {
code: 200,
msg: 'success',
data: [{
id: '1',
hospitalName: '瑞金北院',
grade: '三甲'
}, {
id: '2',
hospitalName: '昌平中西医结合医院',
grade: '三甲'
}]
}
if (res.code === 200 && res.data.length > 0) {
// 发请求获取数据
// ... ...
this.hospitalList = res.data
console.log(this.hospitalList)
// const arr = []
// res.data.forEach((item, index) => {
// arr.push(item.hospitalName)
// })
// console.log(arr)
// this.states = arr
// this.list = this.states.map(item => {
// return { value: item, label: item }
// })
}
},
// 添加医院配置
addHospitalInfo () {
if (this.hospitalInfo === '') {
this.$message('请输入医院名称')
return false
} else if (this.isShowGradeSelect && this.gradeInfo === '') {
this.$message('请选择医院等级')
return false
} else {
this.hospitalList.push({
hospitalName: this.hospitalInfo,
grade: this.gradeInfo
})
// 发请求
const params = {
hospitalName: this.hospitalInfo,
grade: this.gradeInfo
}
console.log(params)
// 如果医院已经存在,则不添加
// 。。。。。。
this.hospitalInfo = ''
this.gradeInfo = ''
this.isShowGradeSelect = false
}
},
// 删除医院配置
delHospitalInfo (id) {
console.log(id)
},
// 编辑医院配置
editHospitalInfo (id) {
console.log(id)
this.isEdit = true
this.editId = id
// console.log(this.isEdit)
// this.$nextTick(() => {
// const edit_pipeline = document.getElementById('my-edit-pipeline')
// console.log(edit_pipeline)
// edit_pipeline.focus()
// })
},
editName (val) {
console.log(val)
},
editGrade (val) {
console.log(val)
},
blurFun () {
this.isEdit = false
console.log('失焦了')
this.$notify.success({
title: '成功',
message: '保存成功'
})
},
focusFun () {
console.log('聚焦了')
}
}
}
</script>
<style scoped>
.box {
padding: 15px;
}
.box-card {
}
.my-input {
width: 480px;
margin-right: 8px;
}
.my-select {
width: 100px;
margin-right: 8px;
}
.no-edit {
display: flex;
margin-bottom: 8px;
line-height: 21px;
}
.el-icon-circle-plus-outline {
color:#1890ff;
font-size: 25px;
margin-top: 3px;
float: right;
cursor: pointer;
}
.el-icon-circle-close {
color:#EE6363;
font-size: 18px;
cursor: pointer;
}
.my-edit {
margin-top: 7px;
}
</style>
scroll
最新推荐文章于 2024-07-23 21:45:00 发布