<template> <app-container> <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData(false)" @clear="clearInput"> <!--一般查询条件--> <search-item> <el-input v-model.trim="listQuery.devCode" size="small" placeholder="设备号" @change="fetchData(false)" /> </search-item> <search-item> <el-input v-model.trim="listQuery.devName" size="small" placeholder="设备名称" @change="fetchData(false)" /> </search-item> <search-item> <el-input v-model.trim="listQuery.ip" size="small" placeholder="设备IP" @change="fetchData(false)" /> </search-item> <search-item> <el-select v-model="listQuery.devType" size="small" style="width: 200px" placeholder="设备类型" clearable @change="fetchData(false)"> <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/> </el-select> </search-item> <search-item> <el-select v-model="listQuery.status" size="small" style="width: 200px" placeholder="设备状态" clearable @change="fetchData(false)"> <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/> </el-select> </search-item> <search-item> <el-select v-model="listQuery.position" size="small" style="width: 200px" placeholder="所在区域" clearable @change="fetchData(false)"> <el-option v-for="item in positionList" :key="item.value" :label="item.name" :value="item.value"/> </el-select> </search-item> <search-item> <el-select v-model="listQuery.area" size="small" placeholder="楼层" style="width: 200px" clearable @change="fetchData(false)"> <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </search-item> <search-item> <el-select v-model="listQuery.isKeyArea" size="small" style="width: 200px" placeholder="是否为重点区域" clearable @change="fetchData(false)"> <el-option v-for="item in isKeyList" :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-edit" @click="add()"> 添加 </el-button> <el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()"> 删除 </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> <template slot="columns"> <el-table-column label="操作" align="center" width="130"> <template slot-scope="scope"> <el-button type="text" size="small" @click.stop="detail(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> <edit-device v-show="dialogFormVisible" ref="editDevice" @watchChild="fetchData" /> </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 { getDeviceListPage, delDevice, batchDelDevice, batchImportDevice } from '@/api/device' import EditDevice from './editDevice' import { getDictByCode } from '@/api/system/dict' export default { name: 'DeviceList', components: { SearchItem, SearchArea, AppContainer, NormalTable, EditDevice, DownloadTemplate }, data() { return { listQuery: { devCode: '', devName: '', devType: '', ip: '', status: '', position: '', area: '', isKeyArea: '', offset: 1, limit: 20 }, // 筛选条件 typeList: [], statusList: [], positionList: [], areaList: [], isKeyList: [], columns: [ { text: '设备号', value: 'devCode', align: 'center', width: 150 }, { text: '设备名称', value: 'devName', align: 'center', width: 150 }, { text: '设备IP', value: 'ip', align: 'center', width: 150 }, { text: '设备类型', value: 'devTypeName', align: 'center', width: 120 }, { text: '设备状态', value: 'statusName', align: 'center', width: 90 }, { text: '所在区域', value: 'positionName', align: 'center' }, { text: '楼层', value: 'areaName', align: 'center' }, { text: '是否为重点区域', value: 'isKeyAreaName', align: 'center' }, { text: '安装时间', value: 'installTime', align: 'center', width: 150 } ], // 显示列 dialogFormVisible: false, // 是否显示编辑框 dialogFormVisible1: false, // 是否显示编辑框 timeRange: [], // 时间范围 multipleSelection: [], // 多选选中项 list: [], // 列表数据 total: 0, // 数据总数 listLoading: true, // 列表加载动画 filename: 'DeviceTemp.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('deviceType').then(response => { if (response.code === 200) { this.typeList = response.data } }) getDictByCode('deviceStatus').then(response => { if (response.code === 200) { this.statusList = response.data } }) getDictByCode('devicePosition').then(response => { if (response.code === 200) { this.positionList = response.data } }) getDictByCode('deviceArea').then(response => { if (response.code === 200) { this.areaList = response.data } }) getDictByCode('IsKeyArea').then(response => { if (response.code === 200) { this.isKeyList = 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)' }) // 发起导入请求 batchImportDevice(_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(isNowPage = true) { this.listLoading = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 this.listQuery.offset = 1 } getDeviceListPage(this.listQuery).then(response => { if (response.code === 200) { this.list = response.data.rows this.total = parseInt(response.data.total) this.listLoading = false } }) }, // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 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(() => { batchDelDevice(ids).then(response => { if (response.code === 200) { this.$message.success('删除成功') this.fetchData() } }) }) }, // 打开详情对话框 detail(row) { this.$refs.editDevice.initDialog('detail', row) }, // 新增区域 add() { this.dialogFormVisible = true this.$refs.editDevice.initDialog('create') }, // 编辑区域信息 edit(row) { this.dialogFormVisible = true this.$refs.editDevice.initDialog('update', row) }, del(row) { this.$confirm( '确定要删除该条数据吗?', '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { delDevice(row.id).then(response => { if (response.code === 200) { this.$message.success('删除成功') this.fetchData() } }) }) }, handleSelectionChange(val) { this.multipleSelection = val }, clearInput() { this.listQuery = { devCode: '', devName: '', devType: '', ip: '', status: '', position: '', area: '', isKeyArea: '', offset: 1, limit: 20 } this.fetchData() } } } </script> <style scoped> </style>