<template>
<app-container>
<search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput" >
<search-item>
<el-select v-model="listQuery.energyDept" placeholder="单位" size="small" clearable>
<el-option
v-for="item in deptList"
:key="item.value"
:label="item.name"
:value="item.value"/>
</el-select>
</search-item>
<search-item>
<el-select v-model="listQuery.buildingType" placeholder="楼栋" size="small" clearable>
<el-option
v-for="item in buildingList"
:key="item.value"
:label="item.name"
:value="item.value"/>
</el-select>
</search-item>
</search-area>
<normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage" @selectionChange="handleSelectionChange">
<template slot="btns">
<el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()">
删除
</el-button>
<el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
导出
</el-button>
<download-template :filename="filename"/>
<el-upload
:limit="1"
:show-file-list="false"
:http-request="uploadFile"
:file-list="fileList"
action="string"
style="float:right; margin:0 0 0 3px;"
accept=".xls,.xlsx">
<el-button slot="trigger" size="small" icon="el-icon-folder-add">批量导入</el-button>
</el-upload>
</template>
</normal-table>
</app-container>
</template>
<script>
import DownloadTemplate from '@/components/DownloadTemplate/index'
import NormalTable from '@/components/NormalTable'
import AppContainer from '@/components/layout/AppContainer'
import SearchArea from '@/components/SearchArea/SearchArea'
import SearchItem from '@/components/SearchArea/SearchItem'
import { getEnergyListPage, batchDelEnergy, batchImportEnergy, getEnergyExport } from '@/api/energy'
import { getDictByCode } from '@/api/system/dict'
export default {
name: 'EnergyList',
components: { SearchItem, SearchArea, AppContainer, NormalTable ,DownloadTemplate},
data() {
return {
deptList:[],
buildingList:[],
listQuery: {
energyDept: '',
buildingType: '',
offset: 1,
limit: 20
}, // 筛选条件
columns: [
{
text: '单位',
value: 'energyDeptName',
align: 'center'
},
{
text: '楼栋',
value: 'buildingTypeName',
align: 'center'
},
{
text: '楼层',
value: 'floor',
align: 'center',
width: 150
},
{
text: '用途',
value: 'purpose',
align: 'center'
},
{
text: '能源用量',
value: 'num',
align: 'center',
width: 80
},
{
text: '日期',
value: 'date',
align: 'center'
}
], // 显示列
dialogFormVisible: false, // 是否显示编辑框
timeRange: [], // 时间范围
multipleSelection: [], // 多选选中项
list: [], // 列表数据
total: 0, // 数据总数
listLoading: true, // 列表加载动画
filename: 'energy_template.xlsx',
fileList: [],
tableOption: {
head: {
show: true, // 是否需要标题栏，
text: '数据列表' // 标题名称
},
options: {
needIndex: true // 是否需要序号列
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false, // 是否需要刷新按钮
needCheckBox: true
}
} // 表格属性
}
},
created() {
this.fetchOptions()
this.fetchData()
},
methods: {
fetchOptions(){
getDictByCode('energyDept').then(response => {
if (response.code === 200) {
this.deptList = response.data
}
})
getDictByCode('buildingType').then(response => {
if (response.code === 200) {
this.buildingList = response.data
}
})
},
uploadFile(param) {
// 判断文件大小是否符合要求
const _file = param.file
const isLt5M = _file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('请上传5M以下的excel文件')
return false
}
// 全屏加载动画
const loading = this.$loading({
lock: true,
text: '导入中,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// 发起导入请求
batchImportEnergy(_file).then(res => {
loading.close() // 关闭加载动画
if (res.code === 200) {
this.$message.success('导入成功')
this.fetchData(false)
} else {
this.$message.error(res.message)
}
}).catch(() => {
loading.close() // 关闭加载动画
})
this.fileList = []
},
fetchData() {
this.listLoading = true
// getEnergyListPage(this.listQuery).then(response => {
// if (response.code === 200) {
// this.list = response.data.rows
// this.total = parseInt(response.data.total)
// this.listLoading = false
// }
// })
const that = this
setTimeout(function() {
that.list = [
{id:'', buildingType : '0', buildingTypeName : '一期主楼', floor: '3', energyDept: '0', energyDeptName: '省局', purpose:'室内用电', num:'1326', date:'2022-05-01-2022-05-31'},
{id:'', buildingType : '0', buildingTypeName : '一期主楼', floor: '3', energyDept: '0', energyDeptName: '省局', purpose:'室内用电', num:'1326', date:'2022-05-01-2022-05-31'},
{id:'', buildingType : '0', buildingTypeName : '一期主楼', floor: '3', energyDept: '0', energyDeptName: '省局', purpose:'室内用电', num:'1326', date:'2022-05-01-2022-05-31'},
{id:'', buildingType : '0', buildingTypeName : '一期主楼', floor: '3', energyDept: '0', energyDeptName: '省局', purpose:'室内用电', num:'1326', date:'2022-05-01-2022-05-31'},
{id:'', buildingType : '0', buildingTypeName : '一期主楼', floor: '3', energyDept: '0', energyDeptName: '省局', purpose:'室内用电', num:'1326', date:'2022-05-01-2022-05-31'},
]
that.total = 200
that.listLoading = false
}, 100)
},
exportFile(){
getEnergyExport(this.listQuery).then(response => {
if (response.code === 200) {
this.$message.success('导出成功')
}
})
},
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
changePage(val) {
if (val && val.size) {
this.listQuery.limit = val.size
}
if (val && val.page) {
this.listQuery.offset = val.page
}
this.fetchData()
},
batchDel(){
const ids = this.multipleSelection.map(item => item.id)
if(ids.length === 0) {
this.$message.warning('请至少选择一行')
return
}
this.$confirm(
'确定要删除所选数据吗？',
'确认操作',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
batchDelEnergy(ids).then(response => {
if (response.code === 200) {
this.$message.success('删除成功')
this.fetchData()
}
})
})
},
handleSelectionChange(val) {
this.multipleSelection = val
},
clearInput() {
this.listQuery = {
energyDept: '',
buildingType: '',
offset: 1,
limit: 20
}
this.fetchData()
}
}
}
</script>
<style scoped>
</style>
