6 changed files with 796 additions and 37 deletions
-
36src/views/archiveKeeping/deviceManage/form.vue
-
35src/views/archiveKeeping/deviceManage/index.vue
-
65src/views/archiveKeeping/deviceManage/module/childDevice.vue
-
76src/views/archiveKeeping/deviceManage/sortDialog.vue
-
559src/views/archiveKeeping/deviceManage/tableList.vue
-
32src/views/archiveKeeping/deviceManage/type.json
@ -0,0 +1,65 @@ |
|||||
|
<template> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="childDeviceVisible" :title="childDeviceTitle"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="childDeviceTable" |
||||
|
row-key="id" |
||||
|
highlight-current-row |
||||
|
style="min-width: 100%;" |
||||
|
@selection-change="selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" |
||||
|
> |
||||
|
<el-table-column type="index" label="通道" align="center" width="55" /> |
||||
|
<el-table-column label="摄像机名称" prop="child" min-width="80" /> |
||||
|
<el-table-column label="所属设备" prop="deviceTypeId.name" min-width="140" /> |
||||
|
<el-table-column label="状态" prop="categoryName" min-width="60" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="操作" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="childDeviceTable.length!==0" /> |
||||
|
</div></el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
childDeviceTable: [], |
||||
|
selections: [], |
||||
|
childDeviceVisible: false, |
||||
|
childDeviceTitle: '子设备管理' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.selections = val |
||||
|
}, |
||||
|
handleCloseDialog(done) { |
||||
|
// 关闭弹框 |
||||
|
done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog class="sort-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="排序" :visible.sync="sortVisible" @opened="opened"> |
||||
|
<div class="setting-dialog"> |
||||
|
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
||||
|
<el-table :data="sortTableData" :tree-props="{children: 'childrens'}" class="store-sort" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
||||
|
<el-table-column type="index" label="序号" width="100" align="center" /> |
||||
|
<el-table-column prop="cnName" label="库房区域名称" /> |
||||
|
</el-table> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click.native="sortVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click.native="handleSort">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Sortable from 'sortablejs' |
||||
|
import { sort } from '@/api/system/category/category' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
sortVisible: false, |
||||
|
sortTableData: [], |
||||
|
tableHeight: 0 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.tableHeight = window.innerHeight * 0.6 |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 行拖拽 |
||||
|
rowDrop(className, targetName) { |
||||
|
// 此时找到的元素是要拖拽元素的父容器 |
||||
|
const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody') |
||||
|
const that = this |
||||
|
Sortable.create(tbody, { |
||||
|
// 指定父元素下可被拖拽的子元素 |
||||
|
draggable: '.el-table__row', |
||||
|
onEnd({ newIndex, oldIndex }) { |
||||
|
if (newIndex === oldIndex) return |
||||
|
that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0]) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
opened() { |
||||
|
this.rowDrop('store-sort', 'sortTableData') |
||||
|
}, |
||||
|
handleSort() { |
||||
|
const data = this.sortTableData.map((value, index) => { |
||||
|
return { id: value.id, categorySeq: index + 1 } |
||||
|
}) |
||||
|
this.sortTableData.forEach((item, index) => { |
||||
|
item.categorySeq = index + 1 |
||||
|
}) |
||||
|
sort(data).then(() => { |
||||
|
this.sortVisible = false |
||||
|
this.$message({ |
||||
|
message: '保存成功', |
||||
|
type: 'success', |
||||
|
duration: 2500 |
||||
|
}) |
||||
|
this.$emit('treeNodeSort', this.sortTableData) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,559 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container" style="display: flex; justify-content: space-between; align-items: center;"> |
||||
|
<div class="head-search" style="margin-bottom: 0;"> |
||||
|
<el-select v-model="deviceType" class="filter-item" placeholder="设备类型选择" @change="crud.toQuery"> |
||||
|
<el-option :key="0" label="全部" value="" /> |
||||
|
<el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.id" /> |
||||
|
</el-select> |
||||
|
<el-input v-model="query.ruleName" clearable size="small" placeholder="输入设备编号或名称" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:left> |
||||
|
<el-button v-permission="permission.add" size="mini" @click="deviceSelectVisible = true"> |
||||
|
<i class="iconfont icon-xinzeng" /> |
||||
|
新增 |
||||
|
</el-button> |
||||
|
<el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1" @click="crud.toEdit(crud.selections[0])"> |
||||
|
<i class="iconfont icon-bianji" /> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button slot="reference" v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog |
||||
|
:close-on-click-modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
append-to-body |
||||
|
:before-close="handleCloseDialog" |
||||
|
:visible.sync="deviceSelectVisible" |
||||
|
title="新增设备-选择设备类型" |
||||
|
> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="deviceForm" inline :model="deviceForm" size="small" label-width="90px"> |
||||
|
<el-form-item label="设备类型" prop="deviceType" :rules="[{ required:true, message:'请选择设备类型', trigger:'change'}]"> |
||||
|
<el-select v-model="deviceForm.deviceType" class="filter-item" value-key="id" placeholder="设备类型" style="width: 550px;"> |
||||
|
<el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="handleCloseDialog">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="handleComfirmDevice">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-dialog |
||||
|
:close-on-click-modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
append-to-body |
||||
|
:before-close="crud.cancelCU" |
||||
|
:visible.sync="crud.status.cu > 0" |
||||
|
:title="addDeviceTitle" |
||||
|
> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> |
||||
|
<el-form-item label="设备名称" prop="name"> |
||||
|
<el-input v-model="form.name" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="设备编号" prop="code"> |
||||
|
<el-input v-model="form.code" /> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-form-item label="品牌厂商" prop="supplier"> |
||||
|
<el-select v-model="form.supplier" class="filter-item" placeholder="请选择" style="width: 225px;"> |
||||
|
<el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '网络视频录像机（NVR）' || selectedDeviceType ==='环境监控主机' || isInsidedevices" label="IPv4地址" prop="deviceIp"> |
||||
|
<el-input v-model="form.deviceIp" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '环境监控主机' || isInsidedevices" label="端口" prop="port" style="margin-right: 0; margin-left: 30px;"> |
||||
|
<el-input v-model="form.port" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '网络视频录像机（NVR）'" label="RTSP端口" prop="port" style="margin-right: 0; margin-left: 30px;"> |
||||
|
<el-input v-model="form.port" placeholder="RTSP端口一般均为554" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '网络视频录像机（NVR）'" label="账号" prop="deviceAccount"> |
||||
|
<el-input v-model="form.deviceAccount" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '网络视频录像机（NVR）'" label="密码" prop="devicePassword" style="margin-right: 0; margin-left: 30px;"> |
||||
|
<el-input v-model="form.devicePassword" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- 密集架 --> |
||||
|
<el-row> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架'" label="区号" prop="areaNo"> |
||||
|
<el-input v-model="form.areaNo" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架'" label="总列数" prop="sumColumnNo"> |
||||
|
<el-input v-model.number="form.sumColumnNo" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架'" label="起始列号" prop="firstColumnNo"> |
||||
|
<el-input v-model.number="form.firstColumnNo" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架'" label="节数" prop="partNo"> |
||||
|
<el-input v-model.number="form.partNo" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- 密集架 || 回转柜 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="层数" prop="rowNo"> |
||||
|
<el-input v-model.number="form.rowNo" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<!-- 回转柜 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '回转柜'" label="每层列数" prop="columnRowNo"> |
||||
|
<el-input v-model.number="form.columnRowNo" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<!-- 密集架 || 回转柜 --> |
||||
|
<el-row> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" class="checkbox-style" label="系统联动" prop="isLinkage"> |
||||
|
<el-checkbox v-model="form.isLinkage.lend" @change="checked=>isLinkageChange(checked,'lend')">借出</el-checkbox> |
||||
|
<el-checkbox v-model="form.isLinkage.borrow" @change="checked=>isLinkageChange(checked,'borrow')">归还</el-checkbox> |
||||
|
<el-checkbox v-model="form.isLinkage.inBound" @change="checked=>isLinkageChange(checked,'inBound')">入库</el-checkbox> |
||||
|
<el-checkbox v-model="form.isLinkage.outBound" @change="checked=>isLinkageChange(checked,'outBound')">出库</el-checkbox> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" class="checkbox-style" label="设备回调" prop="isCallback"> |
||||
|
<el-checkbox v-model="form.isCallback.lend" @change="checked=>isCallbackChange(checked,'lend')">借出</el-checkbox> |
||||
|
<el-checkbox v-model="form.isCallback.borrow" @change="checked=>isCallbackChange(checked,'lend')">归还</el-checkbox> |
||||
|
<el-checkbox v-model="form.isCallback.inBound" @change="checked=>isCallbackChange(checked,'lend')">入库</el-checkbox> |
||||
|
<el-checkbox v-model="form.isCallback.outBound" @change="checked=>isCallbackChange(checked,'lend')">出库</el-checkbox> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="下发通知" prop="isNotice" style="display: block;"> |
||||
|
<el-checkbox v-model="form.isNotice">通知</el-checkbox> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 585px;" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button v-if="crud.status.cu > 0 && ( selectedDeviceType === '网络视频录像机（NVR）' || selectedDeviceType ==='环境监控主机')" class="device-child-btn" @click="handleChildDevice"><i class="iconfont icon-zishebeiguanli" />子设备管理</el-button> |
||||
|
<el-button type="text" @click="handleCloseDialog">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!--表格渲染--> |
||||
|
<div class="container-right"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
:data="crud.data" |
||||
|
row-key="id" |
||||
|
highlight-current-row |
||||
|
style="min-width: 100%;" |
||||
|
@selection-change="selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column label="子设备" prop="child" min-width="80" /> |
||||
|
<el-table-column label="设备类型" prop="deviceTypeId.name" min-width="140" /> |
||||
|
<el-table-column label="设备名称" prop="deviceName" min-width="140" /> |
||||
|
<el-table-column label="设备编号" prop="deviceCode" min-width="85" /> |
||||
|
<el-table-column label="接口IP" prop="deviceIp" min-width="120" show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceIp"> {{ scope.row.deviceIp }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="端口" prop="devicePort" min-width="85"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.devicePort"> {{ scope.row.devicePort }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="状态" prop="categoryName" min-width="60" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="所属库房" prop="categoryName" min-width="120" /> |
||||
|
<el-table-column label="所属区域" prop="storeroomId.name" min-width="120" /> |
||||
|
<el-table-column label="设备厂商" prop="supplierId.name" min-width="120" show-overflow-tooltip /> |
||||
|
<el-table-column prop="createTime" label="创建日期" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="最后一次同步时间" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length!==0" /> |
||||
|
</div> |
||||
|
<!-- 子设备管理 --> |
||||
|
<ChildDevice ref="childDevice" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import typeJson from './type.json' |
||||
|
import crudDevice from '@/api/storeManage/deviceManage/device' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import ChildDevice from './module/childDevice' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
const defaultForm = { |
||||
|
id: null, |
||||
|
name: null, |
||||
|
code: null, |
||||
|
deviceIp: null, |
||||
|
port: null, |
||||
|
remark: null, |
||||
|
deviceAccount: null, |
||||
|
devicePassword: null, |
||||
|
isLinkage: { stateType: 1, lend: false, borrow: false, inBound: false, outBound: false }, |
||||
|
isCallback: { stateType: 2, lend: false, borrow: false, inBound: false, outBound: false }, |
||||
|
isNotice: false, |
||||
|
rowNo: null, |
||||
|
columnRowNo: null, |
||||
|
areaNo: null, sumColumnNo: null, firstColumnNo: null, partNo: null |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'DeviceTableList', |
||||
|
components: { rrOperation, crudOperation, pagination, ChildDevice }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '设备', url: 'api/device/list', crudMethod: { ...crudDevice }, optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
reset: true, |
||||
|
download: false, |
||||
|
group: false |
||||
|
}}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
props: { |
||||
|
selectedStore: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
deviceType: null, |
||||
|
deviceTypeOptions: [], |
||||
|
deviceSelectVisible: false, |
||||
|
deviceForm: { |
||||
|
deviceType: null |
||||
|
}, |
||||
|
addDeviceTitle: '', |
||||
|
supplierOptions: [], |
||||
|
selectedDeviceType: '网络视频录像机（NVR）', |
||||
|
permission: { |
||||
|
add: ['admin', 'device:add'], |
||||
|
edit: ['admin', 'device:edit'], |
||||
|
del: ['admin', 'device:del'] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]), |
||||
|
isInsidedevices() { |
||||
|
if (this.selectedDeviceType === '桌面式RFID读写器') { |
||||
|
return true |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
isOutsidedevices() { |
||||
|
if (this.selectedDeviceType === '通道门' || this.selectedDeviceType === '手持式RFID读写器') { |
||||
|
return true |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
rules() { |
||||
|
// const checkDeviceIp = (rule, value, callback) => { |
||||
|
// const reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/ |
||||
|
// if (reg.test(value)) { |
||||
|
// callback() |
||||
|
// } else { |
||||
|
// callback(new Error('设备IP格式错误')) |
||||
|
// } |
||||
|
// } |
||||
|
const checkDevicePort = (rule, value, callback) => { |
||||
|
const reg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/ |
||||
|
if (reg.test(value)) { |
||||
|
callback() |
||||
|
} else { |
||||
|
callback(new Error('端口号输入错误')) |
||||
|
} |
||||
|
} |
||||
|
const validateRule = { |
||||
|
// supplier: [ |
||||
|
// { required: true, message: '请选择设备产商', trigger: 'blur' } |
||||
|
// ] |
||||
|
code: [{ required: true, message: '设备编号不可为空', trigger: 'blur' }], |
||||
|
name: [{ required: true, message: '设备名称不可为空', trigger: 'blur' }] |
||||
|
} |
||||
|
// if (this.isInsidedevices || this.isOutsidedevices) { |
||||
|
// this.$set(validateRule, 'deviceId', [ |
||||
|
// { required: true, message: '请输入设备ID', trigger: 'blur' } |
||||
|
// ]) |
||||
|
// } |
||||
|
if (this.selectedDeviceType === '密集架' || this.selectedDeviceType === '回转柜' || this.selectedDeviceType === '网络视频录像机（NVR）' || this.selectedDeviceType === '环境监控主机' || this.isInsidedevices) { |
||||
|
this.$set(validateRule, 'deviceIp', [ |
||||
|
{ required: true, message: '请输入接口IP', trigger: 'blur' } |
||||
|
// , |
||||
|
// { validator: checkDeviceIp, trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'port', [ |
||||
|
{ required: true, message: '请输入端口号', trigger: 'blur' }, |
||||
|
{ validator: checkDevicePort, trigger: 'blur' } |
||||
|
]) |
||||
|
if (this.selectedDeviceType === '密集架') { |
||||
|
this.$set(validateRule, 'areaNo', [ |
||||
|
{ required: true, message: '请输入区号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'firstColumnNo', [ |
||||
|
{ required: true, message: '请输入起始列号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'sumColumnNo', [ |
||||
|
{ required: true, message: '请输入总列数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'partNo', [ |
||||
|
{ required: true, message: '请输入节数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'rowNo', [ |
||||
|
{ required: true, message: '请输入层数', trigger: 'blur' } |
||||
|
]) |
||||
|
} else if (this.selectedDeviceType === '回转柜' || this.selectedDeviceType === '网络视频录像机（NVR）') { |
||||
|
// 回转柜 || 网络视频录像机（NVR） |
||||
|
this.$set(validateRule, 'deviceAccount', [ |
||||
|
{ required: true, message: '请输入账号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'devicePassword', [ |
||||
|
{ required: true, message: '请输入密码', trigger: 'blur' } |
||||
|
]) |
||||
|
if (this.selectedDeviceType === '回转柜') { |
||||
|
this.$set(validateRule, 'cupboardNo', [ |
||||
|
{ required: true, message: '请输入柜号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'rowNo', [ |
||||
|
{ required: true, message: '请输入层数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'columnRowNo', [ |
||||
|
{ required: true, message: '请输入每层列数', trigger: 'blur' } |
||||
|
]) |
||||
|
} else { |
||||
|
// 网络视频录像机（NVR） |
||||
|
// this.$set(validateRule, 'videoRoute', [ |
||||
|
// { required: true, message: '请输入频道', trigger: 'blur' } |
||||
|
// ]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return validateRule |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
selectedStore: function(newValue, oldValue) { |
||||
|
this.crud.refresh() |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.deviceTypeOptions = typeJson.data |
||||
|
this.crud.data = [{}, {}, {}] |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取数据前设置默认参数 |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh](crud) { |
||||
|
this.crud.data = [{}, {}, {}] |
||||
|
}, |
||||
|
[CRUD.HOOK.beforeToEdit](crud, form, btn) { |
||||
|
console.log(form) |
||||
|
console.log(this.crud.status) |
||||
|
console.log(this.crud.status.edit) |
||||
|
console.log(this.crud.status.edit === 1) |
||||
|
this.addDeviceTitle = '编辑设备 - ' + form.name |
||||
|
}, |
||||
|
// 提交前做的操作 |
||||
|
async [CRUD.HOOK.afterValidateCU](crud) { |
||||
|
if (form.deviceTypeId.name === '密集架' || form.deviceTypeId.name === '回转柜') { |
||||
|
if (form.deviceTypeId.name === '密集架') { |
||||
|
// 获取密集架行号列号等信息 |
||||
|
await crudDevice.getDesecabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => { |
||||
|
form.rowNo = data.rowNo |
||||
|
form.areaNo = data.areaNo |
||||
|
form.sumColumnNo = data.sumColumnNo |
||||
|
form.firstColumnNo = data.firstColumnNo |
||||
|
form.partNo = data.partNo |
||||
|
form.storeroomCode = data.storeroomCode |
||||
|
}) |
||||
|
} else if (form.deviceTypeId.name === '回转柜') { |
||||
|
// 获取回转柜行号列号等信息 |
||||
|
await crudDevice.getRotarycabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => { |
||||
|
form.columnRowNo = data.columnRowNo |
||||
|
form.cupboardNo = data.cupboardNo |
||||
|
form.rowNo = data.rowNo |
||||
|
form.storeroomCode = data.storeroomCode |
||||
|
}) |
||||
|
} |
||||
|
// 获取联动和回调结果 |
||||
|
await crudDevice.getDeviceById({ deviceInfoId: this.crud.selections[0].id }).then((data) => { |
||||
|
if (data.length === 3) { |
||||
|
form.isLinkage = data.find(element => element.stateType === 1) |
||||
|
form.isCallback = data.find(element => element.stateType === 2) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
form.supplier = form.supplierId.id |
||||
|
this.selectedDeviceType = form.deviceTypeId.name |
||||
|
crud.status.edit = CRUD.STATUS.PREPARED |
||||
|
crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED |
||||
|
|
||||
|
this.deviceForm.deviceType = null |
||||
|
this.$refs.deviceForm.resetFields() |
||||
|
return false |
||||
|
}, |
||||
|
// 防止编辑时，isLinkage是null,isLinkage.lend报错 |
||||
|
[CRUD.HOOK.afterRefresh](crud) { |
||||
|
crud.data.forEach(element => { |
||||
|
element.isLinkage = { stateType: 1, lend: null, borrow: null, inBound: null, outBound: null } |
||||
|
element.isCallback = { stateType: 2, lend: null, borrow: null, inBound: null, outBound: null } |
||||
|
}) |
||||
|
}, |
||||
|
handleComfirmDevice() { |
||||
|
this.$refs.deviceForm.validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.crud.toAdd() |
||||
|
this.deviceSelectVisible = false |
||||
|
this.selectedDeviceType = this.deviceForm.deviceType.name |
||||
|
this.addDeviceTitle = '新增设备 - ' + this.selectedDeviceType |
||||
|
this.$refs.form.resetFields() |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
isLinkageChange(value, type) { |
||||
|
if (!value && this.form.isCallback[type]) { |
||||
|
this.$message.error('取消对应回调选项后才能取消联动操作') |
||||
|
this.form.isLinkage[type] = true |
||||
|
} |
||||
|
}, |
||||
|
isCallbackChange(value, type) { |
||||
|
if (value && !this.form.isLinkage[type]) { |
||||
|
this.$message.error('选中对应联动选项后才能勾选回调操作') |
||||
|
this.form.isCallback[type] = false |
||||
|
} |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.crud.selections = val |
||||
|
}, |
||||
|
toDelete(datas) { |
||||
|
this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.crud.delAllLoading = true |
||||
|
const ids = [] |
||||
|
datas.forEach(val => { |
||||
|
ids.push(val.id) |
||||
|
}) |
||||
|
crudDevice.del(ids).then(() => { |
||||
|
this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
||||
|
this.crud.delAllLoading = false |
||||
|
this.crud.refresh() |
||||
|
}).catch(err => { |
||||
|
this.crud.delAllLoading = false |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
handleChildDevice() { |
||||
|
this.$refs.childDevice.childDeviceVisible = true |
||||
|
this.$refs.childDevice.childDeviceTitle = '子设备管理 - ' + this.selectedDeviceType |
||||
|
}, |
||||
|
handleCloseDialog(done) { |
||||
|
// 重置表单数据 |
||||
|
if (this.$refs.deviceForm) { |
||||
|
this.deviceSelectVisible = false |
||||
|
this.$refs.deviceForm.resetFields() |
||||
|
} |
||||
|
|
||||
|
if (this.$refs.form) { |
||||
|
this.$refs.form.resetFields() |
||||
|
this.crud.cancelCU() |
||||
|
} |
||||
|
// 关闭弹框 |
||||
|
// done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.device-child-btn{ |
||||
|
width: auto; |
||||
|
padding: 0 14px; |
||||
|
line-height: 28px; |
||||
|
font-weight: bold; |
||||
|
color: #0348F3; |
||||
|
border-color: #0348F3; |
||||
|
} |
||||
|
::v-deep .el-dialog .el-dialog__body{ |
||||
|
.checkbox-style.el-form-item{ |
||||
|
.el-form-item__content{ |
||||
|
width: 550px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.spk-a { |
||||
|
display: inline-block; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 5px; |
||||
|
background-color:#2FD490; |
||||
|
box-shadow: 0px 3px 4px 0px rgba(17,243,189,0.35); |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.off-line { |
||||
|
display: inline-block; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 5px; |
||||
|
background-color: #ED4A41; |
||||
|
box-shadow: 0px 3px 4px 0px rgba(252,122,122,0.35); |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,32 @@ |
|||||
|
{ |
||||
|
"code": 200, |
||||
|
"message": "操作成功", |
||||
|
"data": [ |
||||
|
|
||||
|
{ |
||||
|
"id": "7305DE3D273B0CAC079538", |
||||
|
"name": "网络视频录像机（NVR）" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "C09A1946216E496BB3FA88", |
||||
|
"name": "环境监控主机" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "DD656054BE3D1DF1E2F1FC", |
||||
|
"name": "密集架" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "65D1886B0F864291766421", |
||||
|
"name": "通道门" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "E2767FEACA9CE0E3B16B89", |
||||
|
"name": "桌面式RFID读写器" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "3B85FA21FDAFBB618B5D40", |
||||
|
"name": "手持式RFID读写器" |
||||
|
} |
||||
|
], |
||||
|
"timestamp": 1703481969284 |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue