|
<template>
<div class="device-manage-page">
<t-card class="page-card">
<div class="track-container">
<div class="search-container">
<div class="search-ctn">
<div>
<div style="display: flex;">
<t-input v-model="deviceName" placeholder="请输入设备名称">
<template slot="append">
<t-button color="primary" icon="search-outline" @click="selectHandle">查询</t-button>
</template>
</t-input>
<t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible = !slideVisible"></t-button>
</div>
</div>
<div class="btns">
<t-button color="primary" @click="showAddDeviceModal">
<t-icon icon="plus-circle-outline" size="16"></t-icon><span> 新增</span>
</t-button>
<t-button @click="multDeleteDeviceData">
<t-icon icon="trash" size="16"></t-icon>删除
</t-button>
<t-dropdown :visibled="customVisibled" trigger-mode="custom">
<t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
<div slot="popper">
<div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
<t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
<t-checkbox v-for="(item) in columns" :key="item.label" :value="item.label" :label="item.label">
<span>{{ item.label }}</span>
</t-checkbox>
</t-checkbox-group>
<div style="padding-bottom: 10px">
<t-checkbox :indeterminate="indeterminate" :checked.sync="checkAll" @click.prevent.native="handleCheckAll">全选
</t-checkbox>
</div>
<t-button color="primary" size="sm" @click="onCloseClick">确认</t-button>
</div>
</div>
</t-dropdown>
</div>
</div>
<div class="animate-demo-wrapper">
<transition name="slide-up">
<div v-show="slideVisible" class="transition-box allCondition">
<div class="input-rule">
<span>设备类型：</span>
<t-select v-model="deviceTypeId" style="width:320px">
<t-option v-for="item in deviceTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
</t-select>
</div>
<div class="input-rule">
<span>设备编号：</span>
<t-input v-model="deviceId" style="width:320px" placeholder="请输入设备编号"></t-input>
</div>
<a style="float:right;color:#0089d4;" @click="resetData" href="javascript:;">重置</a>
</div>
</transition>
</div>
</div>
</div>
<div class="table-box">
<t-table :data="deviceDataList" line @selection-change="selectChange">
<t-table-column type="selection" width="70"></t-table-column>
<t-table-column v-if="columns[0].show" prop="deviceName" label="设备名称" width="250"></t-table-column>
<t-table-column v-if="columns[1].show" prop="deviceId" label="设备编号" width="280"></t-table-column>
<t-table-column v-if="columns[2].show" prop="deviceType" label="设备类型" width="280"></t-table-column>
<t-table-column label="操作" width="140" fixed="right">
<template v-slot="{row}">
<a href="javascript:;" style="color:#0089D4;" @click="getDeviceInfo(row.resourceToolId)">详情</a>
<a href="javascript:;" style="color:#0089D4;" @click="editDeviceData(row.resourceToolId)">编辑</a>
<a href="javascript:;" style="color:#0089D4;" @click="deleteDeviceData(row)">删除</a>
</template>
</t-table-column>
</t-table>
</div>
<div class="table-pager">
<t-pager :current.sync="page" :total="total" :page-size="limit" :sizer-range="[10,20,50,100]" show-elevator show-sizer @on-size-change="onSizeChange" @on-change="onChange">>
</t-pager>
</div>
</t-card>
<template>
<add-device-modal :types="deviceTypesList" :add-device-modal.sync="addDeviceModal" :current-edit-device="currentEditDevice" @refresh-data="getDeviceData()">
</add-device-modal>
</template>
<!-- 设备详情对话框 -->
<template>
<device-info-modal :data="currentDeviceData">
</device-info-modal>
</template>
</div>
</template>
<script>
import sysapi from '@/api/system'
import deviceInfoModal from './components/modal/deviceInfoModal.vue'
import addDeviceModal from './components/modal/addDeviceModal.vue'
// import sendOrderModal from './components/modal/sendordermodal.vue'
export default {
components: {
// sendOrderModal
deviceInfoModal,
addDeviceModal
},
data () {
return {
slideVisible: false,
indeterminate: true,
checkAll: true,
social: ['设备名称', '设备编号', '设备类型'],
columns: [
{
label: '设备名称',
show: true
}, {
label: '设备编号',
show: true
}, {
label: '设备类型',
show: true
}
],
customVisibled: false,
// 设备类型id
deviceTypeId: '',
// 设备类型
deviceTypesList: [],
// 设备数据列表
deviceDataList: [],
// 设备名称
deviceName: '',
// 设备编号
deviceId: '',
// 当前页
page: 1,
// 当前页的数据个数
limit: 10,
// 数据总数
total: 100,
// 批量删除的设备id
deleteResourceToolId: [],
// 当前设备数据
currentDeviceData: {},
// 显示/隐藏新增设备对话框
addDeviceModal: false,
currentEditDevice: {}
}
},
created () {
this.getDeviceData()
this.getDeviceTypes()
},
methods: {
checkAllGroupChange () {
if (this.social.length === 3) {
this.indeterminate = false
this.checkAll = true
} else if (this.social.length > 0) {
this.indeterminate = true
this.checkAll = false
} else {
this.indeterminate = false
this.checkAll = false
}
},
handleCheckAll () {
if (this.indeterminate) {
this.checkAll = false
} else {
this.checkAll = !this.checkAll
}
this.indeterminate = false
if (this.checkAll) {
this.social = ['设备名称', '设备编号', '设备类型']
} else {
this.social = []
}
},
onTriggerClick () {
this.customVisibled = true
},
onCloseClick () {
this.columns.forEach(e => {
e.show = this.social.indexOf(e.label) >= 0
})
this.customVisibled = false
},
// 获取设备列表数据
async getDeviceData () {
const res = await sysapi.getDeviceData({ params: { page: this.page, limit: this.limit, deviceTypeId: this.deviceTypeId, deviceName: this.deviceName, deviceId: this.deviceId } }
)
if (res.status === 200) {
this.deviceDataList = res.data.data
this.total = res.data.total
} else {
this.$Message.danger('设备数据列表获取失败！')
}
},
// 向服务器发送请求获取设备类型列表数据
async getDeviceTypes () {
const res = await sysapi.getDeviceTypes()
if (res.status === 200) {
this.deviceTypesList = res.data.data
} else {
this.$Message.danger('设备类型列表数据获取失败！')
}
},
// 查询数据
selectHandle () {
this.page = 1
this.getDeviceData()
},
// 重置查询数据
resetData () {
this.page = 1
this.deviceTypeId = ''
this.deviceId = ''
this.deviceName = ''
this.getDeviceData()
},
// 当前页改变 触发事件
onChange (page) {
this.page = page
this.getDeviceData()
},
// 当前页数据总数改变 触发事件
onSizeChange (pageSize) {
this.limit = pageSize
this.getDeviceData()
},
// 删除数据
deleteDeviceData (row) {
this.$Confirm.confirm({
title: '正在准备删除...',
content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
ok: async () => {
const res = await sysapi.deleteDeviceData({ resourceToolId: row.resourceToolId })
if (res.status === 200) {
this.getDeviceData()
this.$Message.success('删除成功！')
} else {
this.$Message.danger('删除失败！')
}
},
cancel: () => {
this.$Message.info('已取消删除！')
}
})
},
// 当复选框发生改变时 触发事件
selectChange (data) {
const arr = []
data.forEach(item => arr.push(item.resourceToolId))
this.deleteResourceToolId = arr
},
// 批量删除数据
multDeleteDeviceData () {
if (this.deleteResourceToolId.length === 0) {
return this.$Message.warning('请选择要删除的数据！')
}
this.$Confirm.confirm({
title: '正在准备删除...',
content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
ok: async () => {
const res = await sysapi.deleteDeviceData({ resourceToolId: this.deleteResourceToolId })
if (res.status === 200) {
this.getDeviceData()
this.$Message.success('删除成功！')
} else {
this.$Message.danger('删除失败！')
}
},
cancel: () => {
this.$Message.info('已取消删除！')
}
})
},
// 获取设备详情数据
async getDeviceInfo (id) {
const res = await sysapi.getDeviceInfo(id)
if (res.status === 200) {
this.currentDeviceData = res.data
} else {
this.$Message.danger('设备详情数据获取失败！')
}
},
// 显示新增设备对话框
showAddDeviceModal () {
this.addDeviceModal = true
},
async editDeviceData (id) {
const res = await sysapi.getDeviceInfo(id)
if (res.status === 200) {
this.currentEditDevice = res.data
} else {
this.$Message.danger('设备数据获取失败！')
}
this.addDeviceModal = true
}
}
}
</script>
<style lang="scss">
.device-manage-page {
.card-block {
padding: 0px 24px !important;
}
.track-container {
width: 100%;
margin: 24px 0;
// padding: 20px;
box-sizing: border-box;
.search-container {
width: 100%;
.search-ctn {
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
display: flex;
position: relative;
> div {
// margin: 0 20px 16px 0;
line-height: 2;
}
.btns {
margin-left: auto;
display: block;
button {
margin: 0 2px;
}
}
}
}
.table-pager {
margin: 20px auto;
}
.allCondition {
display: flex;
justify-content: space-between;
border: 1px solid rgba(0, 0, 0, 0.09);
background-color: #f8f9fa;
flex-wrap: wrap;
align-items: center;
padding: 20px;
margin: 5px auto;
.input-rule {
flex: 1;
padding: 10px 0 10px 20px;
}
}
}
.table-box {
margin: 20px 0;
}
.table-pager {
display: flex;
justify-content: flex-end;
}
}
</style>
|
