加油，新时代打工人！
<template>
<div @mouseenter="mousein = true" @mouseleave="mousein = false">
<el-input type="text" clearable autocomplete="off" v-model="searchDoc.code" placeholder="请选择" size="small" :style="style"
@on-focus="handleShowDatatable(true)" @on-blur="handleShowDatatable(false)" @on-change="handleSearchData" />
<div ref="tableContainer" :style="tableStyle" v-show="showDatatable" >
<el-table
:data="searchData"
style="width:500px;"
@row-click="handleRowClick">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table>
</div>
</div>
</template>
<script>
export default {
name: 'DiseaseCode',
props: {
value: {
type: Object
},
width: {
type: [Number, String]
},
index:{
type: [Number, String]
},
},
data(){
return {
loading: false,
searchDoc: {
code: '',
id: 0
},
mousein: false,
showDatatable: false,
tableStyle: {
'position':'absolute',
'background-color':'#FFFFFF',
'z-index':10,
'max-height':'200px',
'overflow-y':'auto',
},
searchColumns: [
{
title: '编码',
key: 'code',
width: 160
},
{
title: '名称',
key: 'name',
width: 170
},
{
title: '助记码',
key: 'mnemonicCodes'
}
],
searchData: []
}
},
methods: {
handleSearchData(){
this.loading = true
axios.request({
url: '/diseaseCode/selectByCode',
method: 'get',
params: {
code: this.searchDoc.code
}
}).then(res => {
this.searchData = res.data
}).catch(err => {
this.$Message.error('请求疾病编码信息时异常: ', err)
}).finally(() => {
this.loading = false
})
},
handleRowClick(item){
this.searchDoc = {
code: item.code,
name:item.name,
mnemonicCodes:item.mnemonicCodes
}
let data={
index:this.index,
searchDoc:this.searchDoc
}
this.$emit('sendcode',data.searchDoc.code)
this.closeDatatable()
},
handleShowDatatable(isShow){
if(!this.mousein && !isShow){
this.showDatatable = false
}else{
this.showDatatable = true
if(this.searchData.length == 0){
this.handleSearchData()
}
}
},
closeDatatable(){
this.showDatatable = false
}
},
computed: {
style(){
let style = {width: '200px'}
if(this.width){
style.width = `${this.width}px`
}
return style
}
},
watch: {
searchDoc: function(val){
if(!val.code){
this.searchDoc.id = 0
}
this.$emit('input', this.searchDoc)
}
},
mounted(){
}
}
</script>
