<template>
|
<el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false" title="设备管理" center width="75%">
|
<el-button type="primary" style="margin-bottom: 20px" @click="openAdd('新增设备',{})">绑定设备</el-button>
|
<el-table
|
:data="deviceList"
|
border
|
:stripe="false"
|
style="width: 100%;"
|
>
|
<el-table-column label="序号" type="index" align="center"></el-table-column>
|
<el-table-column label="设备名称" prop="deviceName" align="center"></el-table-column>
|
<el-table-column label="设备ID" prop="deviceId" align="center"></el-table-column>
|
<el-table-column label="设备类型" prop="deviceId" align="center">
|
<template slot-scope="scope">
|
{{scope.row.deviceType == 1?'温湿度':'摄像头'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="分组ID" prop="groupId" align="center"></el-table-column>
|
<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button type="text" @click="openAdd('修改设备',scope.row)">修改</el-button>
|
<el-button type="text" style="color: red" @click="delDevice(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
|
</span>
|
<el-dialog :visible.sync="addVisible" append-to-body :close-on-click-modal="false" :title="title" center width="50%" @close="reset()">
|
<el-form ref="form" :rules="formRules" :model="deviceForm" label-width="140px" class="form">
|
<el-form-item label="设备名称:" prop="deviceName">
|
<el-input v-model.trim="deviceForm.deviceName"/>
|
</el-form-item>
|
<el-form-item label="设备ID:" prop="deviceId">
|
<el-input v-model.trim="deviceForm.deviceId"/>
|
</el-form-item>
|
<el-form-item label="类型:" prop="deviceType">
|
<el-select v-model="deviceForm.deviceType" placeholder="请选择类型">
|
<el-option key="1" label="温湿度" :value="1"></el-option>
|
<el-option key="2" label="摄像头" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="分组ID:" prop="groupId">
|
<el-input v-model.trim="deviceForm.groupId"/>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addVisible = false">取 消</el-button>
|
<el-button type="primary" @click="confirm()">确 认</el-button>
|
</span>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {mapGetters} from "vuex";
|
import {getCityListData, getProvinceListData} from "../../../../api/area";
|
// import {saveReserveInfo, getInfoById, editReserveInfo, delStore} from '../../../api/warehouse'
|
import Cookies from 'js-cookie'
|
import {MessageBox} from "_element-ui@2.14.1@element-ui";
|
import {
|
addOrUpdateStoreroomDevice, deleteStoreroomDevice,
|
getDeviceList,
|
getDevicePageList,
|
getStoreroomPage,
|
getStoreroomPageV2
|
} from "../../../../api/monitorAlert";
|
export default {
|
name: "deviceDialog",
|
data() {
|
return {
|
dialogVisible: false,
|
title: '',
|
addVisible: false,
|
deviceQuery: {
|
companyCode: '',
|
storeNum: '',
|
storeroomNum: '',
|
},
|
deviceList: [],
|
deviceForm: {
|
id: '',
|
companyCode: '',
|
deviceId: '',
|
deviceName: '',
|
deviceType: null,
|
groupId: '',
|
storeNum: '',
|
storeroomNum: ''
|
},
|
formRules:{
|
deviceName:[{ required: true, message: '请输入设备名称', trigger: 'change' },],
|
deviceId:[{ required: true, message: '请输入设备id', trigger: 'change' },],
|
deviceType:[{ required: true, message: '请输入设备类型', trigger: 'change' },],
|
groupId:[{ required: true, message: '请输入分组id', trigger: 'change' },]
|
}
|
}
|
},
|
created() {
|
const t = this
|
},
|
computed: {
|
...mapGetters([
|
'userType',
|
'username'
|
])
|
},
|
methods: {
|
open(data){
|
const {companyCode,storeNum,storeroomNum} = data
|
this.deviceQuery = {companyCode,storeNum,storeroomNum}
|
this.getDataList()
|
this.dialogVisible = true
|
},
|
isKey(key,obj){
|
return key in obj
|
},
|
async getDataList() {
|
let res = await getDeviceList({
|
filter: this.deviceQuery
|
})
|
if (res.data.code === "200") {
|
if(Array.isArray(res.data.result)){
|
this.deviceList = res.data.result
|
}else{
|
this.dataList = []
|
}
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.data.message
|
})
|
}
|
this.listLoading = false
|
},
|
|
openAdd(type,data){
|
this.addVisible = true
|
this.title = type
|
this.deviceForm.companyCode = this.deviceQuery.companyCode
|
this.deviceForm.storeNum = this.deviceQuery.storeNum
|
this.deviceForm.storeroomNum = this.deviceQuery.storeroomNum
|
|
console.log(data,'data')
|
if(type == '修改设备'){
|
for(let i in this.deviceForm){
|
if(this.isKey(i,data)){
|
this.deviceForm[i] =data[i]
|
}
|
}
|
}
|
},
|
|
confirm(){
|
this.$refs.form.validate(async (valid) => {
|
if (valid) {
|
const {id,...data} = this.deviceForm
|
const res = await addOrUpdateStoreroomDevice(this.title == '新增设备'?data:this.deviceForm)
|
if(res.data.code == 200){
|
if(this.title == '新增设备'){
|
this.$message.success('设备新增成功')
|
}else{
|
this.$message.success('设备修改成功')
|
}
|
}else{
|
this.$message.warning(res.data.message)
|
}
|
this.addVisible = false
|
await this.getDataList()
|
}
|
})
|
},
|
delDevice(data){
|
const t = this
|
t.$confirm('此操作将删除该设备, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const res = await deleteStoreroomDevice({id: data.id})
|
console.log(res,'res')
|
if(res.data.code == 200){
|
t.$message.success('设备删除成功')
|
}else{
|
t.$message.warning(res.data.message)
|
}
|
await this.getDataList()
|
})
|
},
|
reset(){
|
this.deviceForm={
|
id: '',
|
companyCode: '',
|
deviceId: '',
|
deviceName: '',
|
deviceType: null,
|
groupId: '',
|
storeNum: '',
|
storeroomNum: ''
|
}
|
this.$refs.form.clearValidate()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.part-title{
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
.selector{
|
/deep/ .el-form-item__content{
|
margin-left: 0 !important;
|
}
|
}
|
.editForm{
|
.el-form-item{
|
display: flex !important;
|
}
|
/deep/ .el-form-item__content{
|
width: 100%;
|
margin-left: 0 !important;
|
}
|
}
|
|
.numInput{
|
/deep/ .el-input__inner{
|
padding-right: 0;
|
}
|
}
|
tr{
|
display: flex;
|
td{
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
padding: 5px;
|
align-items: center;
|
}
|
.w-12{
|
flex: 0.5;
|
}
|
.w-20{
|
flex: 2;
|
}
|
}
|
</style>
|
