531 lines
16 KiB
Vue
531 lines
16 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="rightCont">
|
|
<el-form label-width="50px">
|
|
<el-col :span="4">
|
|
<el-form-item label="消防器材类型：" label-width="110px">
|
|
<el-select v-model="keySelect.FIRE_DEVICE_TYPE_ID" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in typeData"
|
|
:key="item.NAME"
|
|
:label="item.NAME"
|
|
:value="item.BIANMA"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label="消防区域" label-width="110px">
|
|
<el-select v-model="keySelect.FIRE_REGION_ID" placeholder="请选择" class="filter-item">
|
|
<el-option
|
|
v-for="item in varRegionList"
|
|
:key="item.FIRE_REGION_ID"
|
|
:label="item.FIRE_REGION_NAME"
|
|
:value="item.FIRE_REGION_ID"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label="消防点位" label-width="110px">
|
|
<el-input v-model="keySelect.FIRE_POINT_NAME" placeholder="请输入关键字"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label="器材编号" label-width="110px">
|
|
<el-input v-model="keySelect.FIRE_DEVICE_CODE" placeholder="请输入关键字"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label-width="10px">
|
|
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
|
|
搜索
|
|
</el-button>
|
|
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
|
|
重置
|
|
</el-button>
|
|
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goDaoru">
|
|
导入
|
|
</el-button>
|
|
<el-button v-waves type="info" icon="el-icon-download" @click="exportData">
|
|
导出数据
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
<div>
|
|
<el-table
|
|
v-loading="listLoading"
|
|
ref="multipleTable"
|
|
:data="varList"
|
|
:row-key="getRowKey"
|
|
border
|
|
tooltip-effect="dark"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
type="selection"
|
|
width="55"
|
|
reserve-selection
|
|
align="center"/>
|
|
<el-table-column type="index" label="序号" width="55" align="center"/>
|
|
<el-table-column prop="FIRE_DEVICE_TYPE_NAME" label="器材类型"/>
|
|
<el-table-column prop="FIRE_DEVICE_CODE" label="器材编号"/>
|
|
<el-table-column prop="FIRE_REGION_NAME" label="消防区域名称"/>
|
|
<el-table-column prop="FIRE_POINT_NAME" label="消防点位名称"/>
|
|
<el-table-column prop="FIRE_REGION_CODE" label="消防区域编码"/>
|
|
<el-table-column prop="FIRE_POINT_CODE" label="消防点位编码"/>
|
|
<el-table-column prop="VALIDITY_START_TIME" label="有效期开始时间"/>
|
|
<el-table-column prop="VALIDITY_END_TIME" label="有效期结束时间"/>
|
|
<el-table-column prop="REMAKE" label="存放地点"/>
|
|
<el-table-column prop="DEPARTMENTNAME" width ="170" label="负责部门"/>
|
|
<el-table-column prop="USERNAME" label="点位负责人"/>
|
|
<el-table-column label="操作" width="200px">
|
|
<template slot-scope="{row}">
|
|
<el-button
|
|
v-show="edit"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
size="mini"
|
|
@click="handleEdit(row)">修改
|
|
</el-button>
|
|
<el-button
|
|
v-show="del"
|
|
type="danger"
|
|
icon="el-icon-delete"
|
|
size="mini"
|
|
@click="handleDelete(row)">删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="page-btn-group">
|
|
<div>
|
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
|
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
|
|
</div>
|
|
<pagination
|
|
:total="total"
|
|
:page.sync="listQuery.page"
|
|
:limit.sync="listQuery.limit"
|
|
@pagination="getList(FIRE_DEVICE_ID)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog :visible.sync="dialogFormDaoru" title="导入" width="800px">
|
|
<template>
|
|
<div class="app-container">
|
|
<el-form ref="form" :model="daoruFrom" label-width="110px" class="in-uploader">
|
|
<el-form-item label="上传附件" prop="FIELDS">
|
|
<div class="uploader">
|
|
<el-input v-model="daoruFrom.FFILEName" :disabled="true" />
|
|
<el-upload :before-upload="beforeFileUpload" class="avatar-uploader" action="#">
|
|
<el-button type="primary" icon="el-icon-upload" style="margin-left:10px">上传附件</el-button>
|
|
</el-upload>
|
|
<el-button v-waves type="success" icon="el-icon-right" style="margin-left:10px;width:150px" @click="getExcelModel">
|
|
导出模板
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogFormDaoru = false">取 消</el-button>
|
|
<el-button type="primary" @click="goUpload">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- <el-dialog :visible.sync="dialogFormDaoru" title="导入" width="800px">-->
|
|
<!-- <template>-->
|
|
<!-- <div class="app-container">-->
|
|
<!-- <el-form ref="form" :model="daoruFrom" label-width="110px" class="in-uploader">-->
|
|
<!-- <el-form-item label="上传附件" prop="FIELDS">-->
|
|
<!-- <div class="uploader">-->
|
|
<!-- <el-input v-model="daoruFrom.FFILEName" :disabled="true" />-->
|
|
<!-- <el-upload :before-upload="beforeFileUpload" class="avatar-uploader" action="#">-->
|
|
<!-- <el-button type="primary" icon="el-icon-upload" style="margin-left:10px">上传附件</el-button>-->
|
|
<!-- </el-upload>-->
|
|
<!-- <el-button v-waves type="success" icon="el-icon-right" style="margin-left:10px" @click="getExcelModel">-->
|
|
<!-- 导出模板-->
|
|
<!-- </el-button>-->
|
|
<!-- </div>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-form>-->
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
<!-- <div slot="footer" class="dialog-footer">-->
|
|
<!-- <el-button @click="dialogFormDaoru = false">取 消</el-button>-->
|
|
<!-- <el-button type="primary" @click="goUpload">确 定</el-button>-->
|
|
<!-- </div>-->
|
|
<!-- </el-dialog>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Pagination from '@/components/Pagination'
|
|
import { requestFN } from '@/utils/request'
|
|
import waves from '@/directive/waves' // waves directive
|
|
import SelectTree from '@/components/SelectTree'
|
|
import { upload } from '@/utils/upload'
|
|
export default {
|
|
components: { Pagination, SelectTree },
|
|
directives: { waves },
|
|
data() {
|
|
return {
|
|
config: config,
|
|
addBtnType: true,
|
|
listLoading: true,
|
|
add: false,
|
|
del: false,
|
|
edit: false,
|
|
form: {
|
|
FIRE_DEVICE_TYPE_ID: '',
|
|
FIRE_REGION_ID: ''
|
|
},
|
|
keySelect: {
|
|
FIRE_DEVICE_TYPE_ID: '',
|
|
FIRE_REGION_ID: '',
|
|
FIRE_POINT_NAME: '',
|
|
FIRE_DEVICE_CODE: ''
|
|
},
|
|
treeData: [],
|
|
typeData: [],
|
|
varRegionList: [],
|
|
listQuery: {
|
|
page: 1,
|
|
limit: 20
|
|
},
|
|
ls: [],
|
|
dates: [],
|
|
total: 0,
|
|
KEYWORDS: '',
|
|
FIRE_POINT_NAME: '',
|
|
FIRE_POINT_CODE: '',
|
|
// 树形菜单
|
|
filterText: '',
|
|
varList: [],
|
|
pd: [],
|
|
defaultProps: {
|
|
value: 'id',
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
dialogFormDaoru: false,
|
|
daoruFrom: {
|
|
FFILEName: '',
|
|
FFILE: ''
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
console.log(val)
|
|
this.$refs.tree.filter(val)
|
|
}
|
|
},
|
|
created() {
|
|
this.getList()
|
|
this.hasButton()
|
|
// this.getDeviceType()
|
|
this.getDict()
|
|
this.getTreeData()
|
|
this.getFireRegion()
|
|
},
|
|
methods: {
|
|
getTreeData() {
|
|
requestFN(
|
|
'/department/listTree',
|
|
{}
|
|
).then((data) => {
|
|
this.treeData = JSON.parse(data.zTreeNodes)
|
|
}).catch((e) => {
|
|
})
|
|
},
|
|
// 获取区域
|
|
getFireRegion() {
|
|
requestFN(
|
|
'/fireregion/getAllRegionName',
|
|
{}
|
|
).then((data) => {
|
|
this.varRegionList = data.varList
|
|
}).catch((e) => {
|
|
})
|
|
},
|
|
handleEdit(row) {
|
|
this.$parent.FIRE_DEVICE_ID = row.FIRE_DEVICE_ID
|
|
this.$parent.FIRE_POINT_ID = row.FIRE_POINT_ID
|
|
this.$parent.FIRE_REGION_ID = row.FIRE_REGION_ID
|
|
this.$parent.DEPARTMENT_ID = row.DEPARTMENT_ID
|
|
this.$parent.row = row
|
|
this.$parent.activeName = 'Edit'
|
|
},
|
|
goImportStand(FIRE_DEVICE_ID) {
|
|
this.$parent.FIRE_DEVICE_ID = FIRE_DEVICE_ID
|
|
this.$parent.activeName = 'Info'
|
|
},
|
|
getRowKey(row) {
|
|
return row.FIRE_DEVICE_ID
|
|
},
|
|
// 添加
|
|
handleAdd() {
|
|
this.$parent.activeName = 'Edit'
|
|
this.$parent.FIRE_DEVICE_ID = ''
|
|
this.$parent.FIRE_DEVICE_CODE = ''
|
|
},
|
|
// 搜索
|
|
getQuery() {
|
|
this.getList()
|
|
},
|
|
// 获取列表
|
|
getList(pid) {
|
|
this.listLoading = true
|
|
this.varList = []
|
|
this.FIRE_POINT_ID = pid
|
|
requestFN(
|
|
'/fireDevice/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
|
{
|
|
FIRE_REGION_ID: this.keySelect.FIRE_REGION_ID,
|
|
FIRE_DEVICE_TYPE_ID: this.keySelect.FIRE_DEVICE_TYPE_ID,
|
|
FIRE_POINT_NAME: this.keySelect.FIRE_POINT_NAME,
|
|
FIRE_DEVICE_CODE: this.keySelect.FIRE_DEVICE_CODE
|
|
}
|
|
).then((data) => {
|
|
this.listLoading = false
|
|
this.varList = data.varList
|
|
this.total = data.page.totalResult
|
|
this.hasButton()
|
|
}).catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
goKeyReset() {
|
|
this.keySelect.FIRE_DEVICE_TYPE_ID = ''
|
|
this.keySelect.FIRE_REGION_ID = ''
|
|
this.keySelect.FIRE_DEVICE_CODE = ''
|
|
this.getList()
|
|
},
|
|
getDict() {
|
|
requestFN(
|
|
'dictionaries/getLevels',
|
|
{
|
|
DICTIONARIES_ID: '4a3d0d99b0ea4e268c11dd0b18866917'
|
|
}
|
|
).then((data) => {
|
|
this.typeList = data.list
|
|
})
|
|
.catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
requestFN(
|
|
'dictionaries/getLevels',
|
|
{
|
|
DICTIONARIES_ID: '249151f04fd64132a949fdd430a7b9c5'
|
|
}
|
|
).then((data) => {
|
|
this.typeData = data.list
|
|
console.log(this.typeData)
|
|
})
|
|
.catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
|
|
requestFN(
|
|
'dictionaries/getLevels',
|
|
{
|
|
DICTIONARIES_ID: 'f60cf0e8315b4993b6d6049dd29f2ba5'
|
|
}
|
|
).then((data) => {
|
|
this.periodList = data.list
|
|
})
|
|
.catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
|
|
requestFN(
|
|
'dictionaries/getLevels',
|
|
{
|
|
DICTIONARIES_ID: '4a661fa8aedc4d158c9cddaa9d2ec47e'
|
|
}
|
|
).then((data) => {
|
|
this.listingLevelList = this.listingLevelList.concat(data.list)
|
|
})
|
|
.catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
|
|
handleDelete(row) {
|
|
const DATA_IDS = []
|
|
if (row.FIRE_DEVICE_ID) {
|
|
DATA_IDS.push(row.FIRE_DEVICE_ID)
|
|
} else {
|
|
const selection = this.$refs.multipleTable.selection
|
|
if (!selection.length > 0) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '请选择要删除的数据'
|
|
})
|
|
return
|
|
}
|
|
selection.forEach(item => {
|
|
DATA_IDS.push(item.FIRE_DEVICE_ID)
|
|
})
|
|
}
|
|
this.$confirm('确定要删除消防器材吗?', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.listLoading = true
|
|
requestFN(
|
|
'/fireDevice/removeFireDeviceByIds',
|
|
{
|
|
DATA_IDS: DATA_IDS.join(',')
|
|
}
|
|
).then(() => {
|
|
this.$message({
|
|
message: '删除成功',
|
|
type: 'success'
|
|
})
|
|
this.listLoading = false
|
|
this.listQuery.page = 1
|
|
this.$refs.multipleTable.clearSelection()
|
|
this.getList()
|
|
}).catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
|
|
hasButton: function() {
|
|
var keys = 'listmanager:add,listmanager:del,listmanager:edit,toExcel'
|
|
requestFN(
|
|
'/head/hasButton',
|
|
{
|
|
keys: keys
|
|
}
|
|
).then((data) => {
|
|
this.add = data.listmanagerfhadminadd // 新增权限
|
|
this.del = data.listmanagerfhadmindel // 删除权限
|
|
this.edit = data.listmanagerfhadminedit // 修改权限
|
|
this.toExcel = data.toExcel // 导出到excel权限
|
|
}).catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
goDaoru() {
|
|
this.dialogFormDaoru = true
|
|
},
|
|
beforeFileUpload(file) {
|
|
this.daoruFrom.FFILE = file
|
|
this.daoruFrom.FFILEName = file.name
|
|
this.$forceUpdate()
|
|
return false
|
|
},
|
|
goUpload() {
|
|
const formData = new FormData()
|
|
Object.keys(this.daoruFrom).map(key => {
|
|
formData.append(key, this.daoruFrom[key])
|
|
})
|
|
upload(
|
|
'/fireDevice/readExcel',
|
|
formData
|
|
).then((data) => {
|
|
if (data.result == 'success') {
|
|
this.$message({
|
|
message: data.msg,
|
|
type: 'success'
|
|
})
|
|
} else if (data.result == 'fail') {
|
|
this.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
})
|
|
}
|
|
this.getList()
|
|
this.dialogFormDaoru = false
|
|
}).catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
getExcelModel() {
|
|
this.$confirm('确定要下载excel模板吗?', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.listLoading = false
|
|
window.location.href = config.httpurl + 'fireDevice/downExcel'
|
|
}).catch(() => {
|
|
this.listLoading = false
|
|
})
|
|
this.listLoading = false
|
|
},
|
|
// 导出数据
|
|
exportData() {
|
|
this.$confirm('确定要导出到excel吗?', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
console.log('开始')
|
|
this.listLoading = false
|
|
let pageData = ''
|
|
if (this.keySelect.FIRE_REGION_ID) {
|
|
pageData += '&FIRE_REGION_ID=' + this.keySelect.FIRE_REGION_ID
|
|
}
|
|
if (this.keySelect.FIRE_DEVICE_TYPE_ID) {
|
|
pageData += '&FIRE_DEVICE_TYPE_ID=' + this.keySelect.FIRE_DEVICE_TYPE_ID
|
|
}
|
|
if (this.keySelect.FIRE_POINT_NAME) {
|
|
pageData += '&FIRE_POINT_NAME=' + this.keySelect.FIRE_POINT_NAME
|
|
}
|
|
if (this.keySelect.FIRE_DEVICE_CODE) {
|
|
pageData += '&FIRE_DEVICE_CODE=' + this.keySelect.FIRE_DEVICE_CODE
|
|
}
|
|
window.open(this.config.httpurl + 'fireDevice/excelAll?' + pageData)
|
|
}).catch(() => {
|
|
console.log('报错')
|
|
this.listLoading = false
|
|
})
|
|
this.listLoading = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.returnBtn {
|
|
float: right;
|
|
}
|
|
|
|
.app-container {
|
|
display: flex; /**/
|
|
align-items: baseline;
|
|
}
|
|
|
|
.rightCont {
|
|
width: 100%
|
|
}
|
|
|
|
</style>
|
|
<style lang="sass" scoped>
|
|
.table-qrcode
|
|
text-align: center
|
|
padding-top: 20px
|
|
width: 100%
|
|
.filter-container
|
|
position: relative
|
|
.filter-flot
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
.uploader
|
|
width: 570px
|
|
display: flex
|
|
align-items: center
|
|
.el-form-item__content
|
|
line-height: 1
|
|
|
|
.ud-flex
|
|
display: flex
|
|
</style>
|