<template>
|
<div class="led-list-list">
|
<div class="title-text">LED列表</div>
|
<div>
|
<div style="padding: 10px 20px">
|
<el-row>
|
<el-col :span="13">
|
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
|
</el-col>
|
<el-col :span="1">
|
|
</el-col>
|
<el-col :span="6">
|
<el-button @click="pageIndex = 1; dataList = []; getDataList()">搜索</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<el-table
|
:data="dataList"
|
:show-header="true"
|
ref="table"
|
v-loading="dataListLoading"
|
@row-click="openDetails"
|
highlight-current-row
|
:height="documentClientHeight - 330"
|
style="width: 100%">
|
<el-table-column
|
prop="lightemitName"
|
header-align="center"
|
align="center"
|
label="">
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
header-align="center"
|
align="center"
|
label="">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
dataList: [],
|
dataListLoading: false,
|
pageIndex: 1,
|
pageSize: 20,
|
totalPage: 0,
|
dataForm: {
|
key: ''
|
}
|
}
|
},
|
watch: {
|
dataList: function () {
|
this.$nextTick(() => {
|
this.$refs.table.setCurrentRow(this.dataList[0])
|
})
|
}
|
},
|
computed: {
|
documentClientHeight: {
|
get () { return this.$store.state.common.documentClientHeight }
|
}
|
},
|
activated () {
|
// this.init()
|
this.getDataList()
|
},
|
mounted () {
|
// 绑定滚动监听事件
|
const selectWrap = this.$refs.table.bodyWrapper
|
selectWrap.addEventListener('scroll', () => {
|
let sign = 100
|
const scrollDistance = selectWrap.scrollHeight - selectWrap.scrollTop - selectWrap.clientHeight
|
if (scrollDistance <= sign && !this.dataListLoading) {
|
this.getDataList()
|
}
|
}, true)
|
},
|
methods: {
|
// 获取数据列表
|
getDataList () {
|
// 判断是否超出范围
|
if (this.totalPage !== 0 && this.totalPage <= ((this.pageIndex - 1) * this.pageSize)) {
|
return
|
}
|
|
this.dataListLoading = true
|
this.$http({
|
url: this.$http.adornUrl('/pole/polelightemit/list'),
|
method: 'get',
|
params: this.$http.adornParams({
|
'page': this.pageIndex,
|
'limit': this.pageSize,
|
'key': this.dataForm.key,
|
'group': ''
|
})
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
data.page.list.forEach(item => {
|
this.dataList.push(item)
|
})
|
if (this.$store.state.led.lightemitId == null || this.$store.state.led.lightemitId === 0) {
|
this.$store.commit('updateLightemitId', this.dataList[0] ? this.dataList[0].lightemitId : 0)
|
}
|
this.totalPage = data.page.totalCount
|
this.pageIndex ++
|
} else {
|
this.totalPage = 0
|
}
|
this.dataListLoading = false
|
})
|
},
|
openDetails (row) {
|
this.$store.commit('updateLightemitId', row.lightemitId)
|
this.$notify({
|
message: '选择LED屏：' + row.lightemitName,
|
type: 'success'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.led-list-list {
|
// background-image: url(~@/assets/img/led/list.png);
|
// background-size: 100% 100%;
|
height: 100%;
|
button {
|
background-color:#3FA9FC;
|
color:white;
|
border-radius:15px;
|
}
|
/deep/ input {
|
border-radius: 60px;
|
background-color: transparent;
|
}
|
/deep/ .el-table{
|
color: white;
|
background-color: transparent;
|
thead {
|
color: white;
|
}
|
th {
|
color: white;
|
background: rgba(0, 0, 0, 0);
|
border-bottom: 0px
|
}
|
tr {
|
background-color: transparent;
|
td {
|
border-bottom: 0px
|
}
|
}
|
}
|
}
|
</style>
|
