<template>
|
<div>
|
<h5 class="pt-2 table-title">
|
设备列表
|
<small class="text-primary pl-2">( {{total}} )</small>
|
</h5>
|
<div class="pb30">
|
<Table :data="newtableList" :border="true" :fit="true" ref="leftTable">
|
<TableColumn type="index" prop="index" label="序号" :index="snMethod" width="50"/>
|
<TableColumn label="设备类型" prop="typeName"/>
|
<TableColumn label="设备名称" prop="name"/>
|
<!-- <TableColumn label="设备编码" prop="code"/> -->
|
<TableColumn label="设备位置" prop="address"/>
|
<TableColumn label="经纬度">
|
<template slot-scope="scope">
|
<span>{{scope.row|lngAndLat}}</span>
|
</template>
|
</TableColumn>
|
<TableColumn label="IP地址" prop="ip"/>
|
<TableColumn label="端口" prop="port"/>
|
<TableColumn label="操作" width="180">
|
<template slot-scope="scope">
|
<div @click.stop>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
authority="device:localList:update"
|
@click.native.self="$emit('add-device', { data:scope.row, type: 'edit' })"
|
>编辑</fButton>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="handleDel(scope.row.id)"
|
authority="device:localList:delete"
|
>删除</fButton>
|
<!-- <fButton
|
size="sm"
|
type="link"
|
@click.native="handlEdeitOrg(scope.row)"
|
authority="device:localList:editOrg"
|
>
|
编辑组织机构
|
</fButton>-->
|
</div>
|
</template>
|
</TableColumn>
|
</Table>
|
<div class="pt20 pb20">
|
<b-pagination
|
class="justify-content-center justify-content-sm-end m-0"
|
v-if="total"
|
v-model="activePage"
|
:total-rows="total"
|
:per-page="pageSize"
|
/>
|
</div>
|
</div>
|
<!-- <editOrg
|
ref="editOrg"
|
title="配置机构"
|
:isShowFooter="false"
|
/>-->
|
</div>
|
</template>
|
<script>
|
import { Table, TableColumn, Collapse, CollapseItem } from 'element-ui'
|
import {
|
getLocalDeviceList,
|
getDeviceType,
|
getDeviceBrand,
|
delDevice
|
} from '@/server/home.js'
|
import editOrg from '../components/editOrg'
|
export default {
|
name: 'table-local',
|
metaInfo: {
|
title: '平台设备'
|
},
|
props: {
|
orgId: { default: '0', type: String },
|
searchName: {
|
default: '',
|
type: String
|
},
|
currentOrgItem: {
|
default: () => ({ id: '0', type: 'MENU', name: '平台设备' }),
|
type: Object
|
}
|
},
|
components: {
|
Table,
|
TableColumn,
|
Collapse,
|
CollapseItem,
|
editOrg
|
},
|
data() {
|
return {
|
deviceTypeList: [],
|
deviceBrandList: [],
|
tableList: [],
|
total: 0,
|
pageSize: 10,
|
activePage: 1
|
}
|
},
|
computed: {
|
newtableList() {
|
let list = this.tableList.map(item => {
|
const json = { ...item }
|
this.deviceTypeList.map(iteam => {
|
if (iteam.value === item.type) {
|
json.typeName = iteam.name
|
}
|
})
|
return json
|
})
|
return list
|
}
|
},
|
filters: {
|
lngAndLat(value) {
|
if (!value) return ''
|
if (value.longitude && value.latitude) {
|
return `${value.longitude} , ${value.latitude}`
|
}
|
return ''
|
}
|
},
|
methods: {
|
/* 设备列表初始化 */
|
async getDeviceType() {
|
const res = await getDeviceType()
|
this.deviceTypeList =
|
res.success && res.code === 200 && res.data ? res.data : []
|
},
|
async getDeviceBrand() {
|
const res = await getDeviceBrand()
|
this.deviceBrandList =
|
res.success && res.code === 200 && res.data ? res.data : []
|
},
|
async _initData() {
|
let res = await getLocalDeviceList({
|
orgId: this.currentOrgItem.id,
|
type: this.currentOrgItem.type,
|
length: this.pageSize,
|
start: this.pageSize * (this.activePage - 1),
|
condition: this.searchName
|
})
|
if (res && res.data) {
|
this.tableList = res.data
|
this.total = res.total
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '列表查询失败！'
|
})
|
}
|
},
|
async delDevice(id) {
|
const res = await delDevice({ id })
|
if (res.success && res.code === 200) {
|
/* 成功操作 */
|
this._initData()
|
this.$emit('del-device-success')
|
this.$toast({
|
type: 'success',
|
message: res && res.msg ? res.msg : '删除设备成功'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '删除设备失败！'
|
})
|
}
|
console.log(res, 'delDevice---res')
|
},
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
handleDel(id) {
|
this.$swal(
|
{
|
title: '确定删除？',
|
text: '你将要删除当前设备！',
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
// confirmButtonColor: '#d9534f',
|
confirmButtonText: '确定删除！',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
() => {
|
this.delDevice(id)
|
}
|
)
|
},
|
handlEdeitOrg(data) {
|
this.$refs.editOrg.showModel(data)
|
}
|
},
|
created() {
|
// 查询设备类型
|
this.getDeviceType()
|
this.getDeviceBrand()
|
// this._initData()
|
},
|
watch: {
|
activePage(val, oldVal) {
|
if (val !== oldVal) {
|
this.activePage = val
|
this._initData()
|
}
|
},
|
currentOrgItem: {
|
handler(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
// 触发 org 查询平台设备列表
|
this._initData()
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
// orgId: {
|
// handler(newVal, oldVal) {
|
// if (newVal !== oldVal) {
|
// // 触发 org 查询平台设备列表
|
// this._initData()
|
// }
|
// },
|
// deep: true,
|
// immediate: true
|
// }
|
}
|
}
|
</script>
|
<style lang="scss">
|
.table-title {
|
font-size: 16px;
|
font-weight: 600;
|
}
|
</style>
|
