<template> <app-container> <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput"> <!--一般查询条件--> <search-item> <el-input v-model.trim="listQuery.keywords" size="small" placeholder="编号/名称" clearable/> </search-item> <search-item/> <search-item> <el-input v-model.trim="listQuery.position" size="small" 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('/gc/wastebin/add')" size="small" class="edit_btn" icon="el-icon-plus" @click.stop="add">新增</el-button> <!--<el-button size="small" class="edit_btn">删除</el-button>--> <el-upload v-if="hasPerm('/gc/wastebin/import')" :limit="1" :show-file-list="false" :http-request="uploadFile" :file-list="fileList" action="string" accept=".xls,.xlsx" class="edit_btn"> <el-button slot="trigger" size="small">批量导入</el-button> </el-upload> <el-button v-if="hasPerm('/gc/wastebin/export')" size="small" class="edit_btn" @click="batchExport">批量导出</el-button> </template> <template slot="columns"> <el-table-column label="操作" align="center" width="160"> <template slot-scope="scope"> <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button> <el-button v-if="hasPerm('/gc/wastebin/update')" type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button> <el-button v-if="hasPerm('/gc/wastebin/delete')" type="text" size="small" @click.stop="del(scope.row)">删除</el-button> <!--<el-button type="text" size="small" @click.stop="registerIris(scope.row)">岗位调整</el-button>--> </template> </el-table-column> </template> </normal-table> <edit-wastebin-c v-show="editShow" ref="editwastebin" @watchChild="fetchData"/> </app-container> </template> <script> import { getWastebinListPage, delWastebin, batchImportWastebin, batchExportWastebin } from '@/api/biz/wastebin' import EditWastebinC from './editWastebinC' import { getDictByType } from '@/api/common' import { exportFile } from '@/utils/exportutils' export default { name: 'WastebinCList', components: { EditWastebinC }, data() { return { listQuery: { keywords: '', // 关键字 isClassification: '1', position: '', // 位置 offset: 1, limit: 20, sort: '', order: 'desc' }, // 筛选条件 columns: [ { text: '编号', value: 'code', align: 'center' }, { text: '名称', value: 'name', align: 'center' }, { text: '类别', value: 'typeName', width: 100, align: 'center' }, { text: '地址', value: 'position', width: 190, align: 'center' }, { text: '责任人', value: 'responsiblePerson', align: 'center', width: 80 }, { text: '责任人电话', value: 'responsiblePersonTel', align: 'center' }, { text: '收集单位', value: 'collectCompany', align: 'center' }, { text: '收集车辆', value: 'collectCar', align: 'center' }, { text: '收集频率', value: 'ts', align: 'center' }, { text: '备注', value: 'notes', 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.fetchWastebinType() this.fetchData() }, methods: { fetchData() { this.listLoading = true const that = this getWastebinListPage(this.listQuery).then(response => { that.list = response.data.rows that.total = response.data.total that.listLoading = false }) }, // 点击编辑 edit(row) { this.editShow = true this.$refs.editwastebin.initDialog('update', true, row) }, // 点击详情 goDetail(row) { this.editShow = true this.$refs.editwastebin.initDialog('detail', true, row) }, // 点击新增 add() { this.editShow = true this.$refs.editwastebin.initDialog('create', true) }, // 删除单个垃圾桶 del(row) { const staffIds = [row.id] this.$confirm( '确定要删除该垃圾桶吗?', '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { delWastebin(staffIds).then(response => { if (response.code === 200) { this.$message.success('删除成功') this.fetchData() } }) }) }, // 删除多个垃圾桶 batchDel() { if (this.checkSelection()) { const staffIds = [] this.multipleSelection.forEach(function(value, index) { staffIds.push(value.id) }) this.$confirm( '确定要删除所选垃圾桶吗?', '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { delWastebin(staffIds).then(response => { if (response.code === 200) { this.$message.success('删除成功') this.fetchData() } }) }) } else { this.$message.error('至少选中一项') } }, // 批量导入 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)' }) // 发起导入请求 batchImportWastebin(_file).then(res => { loading.close() // 关闭加载动画 if (res.code === 200) { this.$message.success('导入成功') this.fetchData() } else { this.$message.error(res.message) } }).catch(() => { loading.close() // 关闭加载动画 }) this.fileList = [] }, // 批量导出 batchExport() { // 全屏加载动画 const loading = this.$loading({ lock: true, text: '数据处理中,请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) batchExportWastebin(this.listQuery).then(res => { loading.close() // 关闭加载动画 const blob = new Blob([res.data]) const fileName = `垃圾桶列表.xlsx` // 下载后文件名 exportFile(blob, fileName) }).catch((res) => { loading.close() }) }, // 获取垃圾桶类别 fetchWastebinType() { getDictByType('wastebinType').then(response => { this.typeList = response.data }) }, // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 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 = { keywords: '', // 关键字 isClassification: '1', position: '', // 位置 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>