<template>
|
<div class="clients-wrapper" style="position: initial;" :class="{'clients-sidebox-open': sideboxOpened}">
|
<div class="clients-content clients-scroll container-p-x container-p-y overflow-y">
|
<!-- Header -->
|
<h4 class="d-flex flex-wrap justify-content-between align-items-center font-weight-bold pt-2 mb-2">
|
<div class="mb-2">设备地图管理</div>
|
<div class="mb-2" style="max-width: 200px;">
|
<fButton
|
type="warning"
|
@click.native="()=>{$router.push({path:'/mapdevice/mapadd'})}"
|
authority="sys:mapdevice:mapadd"
|
>
|
<span class="fas fa-plus pr10"></span>
|
添加地图
|
</fButton>
|
</div>
|
</h4>
|
<!-- / Header -->
|
|
<!-- 设备列表 -->
|
<b-card no-body>
|
<!-- 检索 start -->
|
<b-card-header header-tag="h4" class="media flex-wrap align-items-center py-4">
|
<b-form-select style="max-width: 10rem;" v-model="modules" @change="(e)=>{modules = e;_initData()}" text-field="lable" :options="newSysDicts" class="mr10"/>
|
<b-input
|
placeholder="地图名称..."
|
autocomplete="off"
|
style="max-width: 20rem;"
|
class="mr10"
|
v-model="name"
|
@keyup.enter.native="handleSearch"
|
/>
|
<b-btn variant="primary" class="mr10" @click="handleSearch"><span class="fs fas-search"></span>搜索</b-btn>
|
</b-card-header>
|
<!-- 检索 end -->
|
<div class="pl20 pr20 pt10 pb30">
|
<Table
|
:data="newTableList"
|
highlight-current-row
|
ref="leftTable"
|
>
|
<TableColumn
|
type="index"
|
prop="index"
|
label="序号"
|
:index="snMethod"
|
width="50"
|
/>
|
<TableColumn
|
label="顺序编码"
|
prop="no"
|
width="80">
|
</TableColumn>
|
<TableColumn
|
label="地图名称"
|
prop="name"
|
/>
|
<TableColumn
|
label="地图应用系统"
|
prop="modulesName"
|
/>
|
<TableColumn
|
label="更新时间"
|
prop="updateTime"
|
width="200"
|
/>
|
<TableColumn
|
label="操作"
|
width="280"
|
>
|
<template slot-scope="scope">
|
<div @click.stop>
|
<b-btn
|
variant="link"
|
style="padding:2px;"
|
authority="sys:mapdevice:check"
|
@click.self="$router.push({path:'/mapdevice/add',query:{id:scope.row.id, type:'check'}})"
|
>
|
查看
|
</b-btn>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
authority="sys:mapdevice:mapedit"
|
@click.native.self="$router.push({path:'/mapdevice/mapadd',query:{id:scope.row.id}})"
|
>
|
编辑地图
|
</fButton>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
authority="sys:mapdevice:mapdeviceedit"
|
@click.native.self="$router.push({path:'/mapdevice/add',query:{id:scope.row.id, type:'edit'}})"
|
>
|
编辑设备
|
</fButton>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="handleDel(scope.row.id)"
|
authority="sys:device:delete"
|
>
|
删除
|
</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>
|
</b-card>
|
<!-- / 设备列表 -->
|
</div>
|
</div>
|
|
</template>
|
<!-- Page -->
|
<script>
|
import { Table, TableColumn, Collapse, CollapseItem } from 'element-ui'
|
import { getMapList, delMap } from '@/server/mapDeviceManagement.js'
|
import { getSysListWithHome } from '@/server/common.js'
|
|
export default {
|
name: 'mapDeviceManagement',
|
metaInfo: {
|
title: '地图设备管理'
|
},
|
data() {
|
return {
|
noneImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
userInfo: this.$store.getters.basicUserInfo,
|
|
deviceType: '',
|
deviceTypeDicts: [],
|
modules: '',
|
sysDicts: [],
|
|
name: '',
|
tableList: [],
|
total: 0,
|
pageSize: 10,
|
activePage: 1,
|
|
/* 右侧侧边栏 */
|
sideboxOpened: false,
|
activeCollapse: 'basic',
|
deviceInfo: null
|
}
|
},
|
computed: {
|
newSysDicts() {
|
return [{ value: '', lable: '全部' }, ...this.sysDicts]
|
},
|
newTableList() {
|
let sysDicts = this.sysDicts
|
let list = this.tableList.map(iteam => {
|
if (iteam.modules) {
|
let arr = iteam.modules.replace(/^,+|,+$/g, '').split(',')
|
let strName = ''
|
for (let val of arr) {
|
for (let sysIteam of sysDicts) {
|
if (sysIteam.value === val) {
|
strName +=
|
strName === '' ? sysIteam.lable : '，' + sysIteam.lable
|
}
|
}
|
}
|
iteam.modulesName = strName
|
return iteam
|
}
|
})
|
return list
|
}
|
},
|
methods: {
|
// 关闭侧边栏
|
closeSidebox() {
|
/* 取消选择 */
|
this.$refs.leftTable.setCurrentRow(null)
|
},
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
async getSysDicts() {
|
let res = await getSysListWithHome({
|
orgId: this.userInfo.orgId,
|
userId: this.userInfo.id,
|
tags: 'device'
|
})
|
if (res && !res.error) {
|
this.sysDicts = res
|
}
|
},
|
/* 设备列表初始化 */
|
async _initData() {
|
let res = await getMapList({
|
orgId: this.userInfo.orgId,
|
length: this.pageSize,
|
start: this.pageSize * (this.activePage - 1),
|
name: this.name,
|
modules: this.modules
|
})
|
if (res) {
|
this.tableList = res.data
|
this.total = res.total
|
}
|
},
|
// 搜索
|
handleSearch() {
|
this._initData()
|
},
|
// 删除
|
handleDel(id) {
|
this.$swal(
|
{
|
title: '确定删除吗？',
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定删除！',
|
cancelButtonText: '取消删除！',
|
closeOnConfirm: true
|
},
|
async () => {
|
let res = await delMap({
|
orgId: this.userInfo.orgId,
|
id
|
})
|
if (res.code === 200 || res - 1 === 0) {
|
// this.$swal('删除成功', `${res.msg ? res.msg : ''}`, 'success')
|
this.$toast({
|
type: 'success',
|
message: '删除成功'
|
})
|
this._initData()
|
} else {
|
// this.$swal('删除失败', `${res.message ? res.message : ''}`, 'error')
|
this.$toast({
|
type: 'error',
|
message: '删除失败'
|
})
|
}
|
}
|
)
|
}
|
},
|
watch: {
|
activePage(val, oldVal) {
|
if (val !== oldVal) {
|
this.activePage = val
|
this._initData()
|
}
|
}
|
},
|
created() {
|
/* 查询字典 */
|
this.getSysDicts()
|
/* 查询列表 */
|
this._initData()
|
},
|
components: {
|
Table,
|
TableColumn,
|
elCollapse: Collapse,
|
elCollapseItem: CollapseItem
|
}
|
}
|
</script>
|
