<template>
<app-container>
<search-area :need-clear="false" :need-search-more="false" type="default" @search="fetchData" @clear="clearInput">
<!--一般查询条件-->
<search-item>
<el-input v-model.trim="listQuery.tolietKeywords" placeholder="公厕编号/名称" clearable/>
</search-item>
<search-item>
<el-input v-model.trim="listQuery.name" placeholder="作业人" clearable/>
</search-item>
<search-item>
<el-input v-model.trim="listQuery.jobContent" placeholder="作业内容" clearable/>
</search-item>
<search-item>
<el-date-picker
v-model="dateRange"
type="datetimerange"
value-format="yyyy-MM-dd hh:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
clearable/>
</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" @change="changePage">
<template slot="btns">
<el-button v-if="hasPerm('/sanitation/job/export/toilet')" size="small" class="edit_btn" @click="batchExport">批量导出</el-button>
</template>
<!--<template slot="columns">-->
<!--<el-table-column label="操作" align="center" width="80">-->
<!--<template slot-scope="scope">-->
<!--<el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>-->
<!--<!–<el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>–>-->
<!--<!–<el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>–>-->
<!--</template>-->
<!--</el-table-column>-->
<!--</template>-->
</normal-table>
</app-container>
</template>
<script>
import NormalTable from '@/components/NomalTable'
import AppContainer from '@/components/layout/AppContainer'
import SearchArea from '@/components/SearchArea/SearchArea'
import SearchItem from '@/components/SearchArea/SearchItem'
import { getToiletJobRecords, batchExportToiletJobRecords } from '@/api/toilet'
export default {
name: 'ListWork',
components: { SearchItem, SearchArea, AppContainer, NormalTable },
data() {
return {
dateRange: [], // 日期范围
listQuery: {
name: '', // 作业人
jobContent: '', // 作业内容
startTime: '', // 开始日期
tolietKeywords: '', // 公厕编号/名称
endTime: '', // 结束日期
offset: 1,
limit: 20,
sort: '',
order: 'desc'
}, // 筛选条件
columns: [
{
text: '作业人',
value: 'name',
align: 'center'
},
{
text: '公厕编号',
value: 'toiletCode',
align: 'center'
},
{
text: '公厕名称',
value: 'toiletName',
align: 'center'
},
{
text: '公厕位置',
value: 'toiletPosition',
align: 'center'
},
{
text: '作业内容',
value: 'jobContent',
align: 'center'
},
{
text: '作业时间',
value: 'startTime',
align: 'center'
}
], // 显示列
timeRange: [], // 时间范围
list: [], // 列表数据
total: 0, // 数据总数
listLoading: true, // 列表加载动画
typeList: [],
fileList: [],
tableOption: {
head: {
show: true, // 是否需要标题栏，
text: '数据列表' // 标题名称
},
options: {
needIndex: true // 是否需要序号列
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false // 是否需要刷新按钮
}
}, // 表格属性
editShow: false // 编辑页面是否显示
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
// this.list = [
// { toiletCode: 1, name: '张三', jobContent: '清理公厕', toiletName: '1号公厕', toiletPosition: '活力大道', startTime: '2020-12-28 08:00:00', endTime: '2020-12-29 09:00:00', notes: '无' },
// { toiletCode: 2, name: '张三', jobContent: '清理公厕', toiletName: '1号公厕', toiletPosition: '活力大道', startTime: '2020-12-27 08:00:00', endTime: '2020-12-29 09:00:00', notes: '无' },
// { toiletCode: 3, name: '张三', jobContent: '清理公厕', toiletName: '1号公厕', toiletPosition: '活力大道', startTime: '2020-12-26 08:00:00', endTime: '2020-12-29 09:00:00', notes: '无' }
// ]
// this.total = this.list.length
// this.listLoading = false
getToiletJobRecords(this.listQuery).then(response => {
if (response.code === 200) {
this.list = response.data.rows
this.total = response.data.total
this.listLoading = false
}
})
},
// 点击详情
goDetail(row) {
this.editShow = true
this.$refs.edittoilet.initDialog('detail', true, row)
},
// 批量导出
batchExport() {
// 全屏加载动画
const loading = this.$loading({
lock: true,
text: '数据处理中,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
batchExportToiletJobRecords(this.listQuery).then(res => {
loading.close() // 关闭加载动画
const blob = new Blob([res.data])
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接
downloadElement.href = href
downloadElement.download = `公厕保洁记录.xlsx` // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放blob对象
}).catch((res) => {
loading.close()
})
},
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
changePage(val) {
if (val && val.size) {
this.listQuery.limit = val.size
}
if (val && val.page) {
this.listQuery.offset = val.page
}
this.fetchData()
},
// 重置后的操作， 若不需要显示重置按钮则不需要写
clearInput() {
this.listQuery = {
name: '', // 关键字
type: '', // 公厕类型
post: '', // 岗位
ts: '', // 入职年月时间
jobCode: '', // 作业内容
responseArea: '', // 负责片区
offset: 1,
limit: 20,
sort: '',
order: 'desc'
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.edit_btns{
.edit_btn{
float:right;
margin-left:5px;
}
}
</style>
