加油,新时代打工人!
html
<template>
<div @mouseenter="mousein = true" @mouseleave="mousein = false">
<el-input type="text" clearable autocomplete="off" v-model="searchDoc.originName" placeholder="请选择" size="small" :style="style"
@focus="handleShowDatatable(true)" @blur="handleShowDatatable(false)" @input="getList" />
<div ref="tableContainer" :style="tableStyle" v-show="showDatatable" >
<el-table
:data="tableData"
border
style="width: 100%"
@row-click="handleRowClick">
<el-table-column
prop="originCode"
label="产地编码"
width="180">
</el-table-column>
<el-table-column
prop="originName"
label="产地名称"
width="180">
</el-table-column>
<el-table-column
prop="zjm"
label="助记码"
width="70">
</el-table-column>
</el-table>
<div class="paginationclass">
<pagination
v-show="total > 0"
:total="total"
:page.sync="pagination.pageIndex"
:limit.sync="pagination.pageSize"
@pagination="getList"
/>
</div>
</div>
</div>
</template>
<script>
import{
getMnufacturerList
} from "@/api/manufacturer/manufacturer.js"
export default {
name: 'MyFacturerName',
props: {
value: {
type: Object
},
width: {
type: [Number, String]
},
index:{
type: [Number, String]
},
},
data(){
return {
loading: false,
searchDoc: {
originName: '',
id: 0
},
mousein: false,
showDatatable: false,
tableStyle: {
'position':'absolute',
'background-color':'#FFFFFF',
'z-index':10,
'max-height':'200px',
'overflow-y':'auto',
},
pagination: {
pageIndex: 1,
pageSize: 10,
},
queryParams: {
originName: "",
},
total: 0,
tableData: [],
selectRow: null,
}
},
methods: {
getList() {
getMnufacturerList({
...this.pagination,
...this.queryParams,
originName:this.searchDoc.originName
}).then((res) => {
this.tableData = res.data.list;
this.total = res.data.total;
}).catch((err) => {
this.$Message.error('请求产地信息时异常: ', err)
}).finally(() => {
this.loading = false
});
},
handleRowClick(item){
this.searchDoc = {
originCode: item.originCode,
originName:item.originName,
zjm:item.zjm,
providerName:item.providerName
}
let data={
index:this.index,
searchDoc:this.searchDoc
}
this.$emit('sendname',data.searchDoc.providerName)
this.closeDatatable()
},
handleShowDatatable(isShow){
if(!this.mousein && !isShow){
this.showDatatable = false
}else{
this.showDatatable = true
if(this.tableData.length == 0){
this.getList()
}
}
},
closeDatatable(){
this.showDatatable = false
}
},
computed: {
style(){
let style = {width: '180px'}
if(this.width){
style.width = `${this.width}px`
}
return style
}
},
watch: {
searchDoc: function(val){
if(!val.originName){
this.searchDoc.id = 0
}
this.$emit('input', this.searchDoc)
}
},
mounted(){
}
}
</script>
<style scoped>
.paginationclass {
margin-left: 40%;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
导入
html
import MyFacturerName from "@/components/MyFacturerMedid/My-Facturer-medid.vue";
使用
html
<MyFacturerName @sendzjm="setfaceturerName" :index1="scope.$index">
</MyFacturerName>