|
|
<template> <div> <!--工具栏--> <div class="head-container" style="padding:0 0 20px 0"> <crudOperation :permission="permission"> <template v-slot:left> <el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="selectDeviceType">新增</el-button> </template> <template v-slot:right> <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections && crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button> <el-select v-model="deviceType" class="filter-item" style="margin-left:10px" 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> </template> <template v-slot:rightButtonGroup> <div class="archives-handler-btn"> <el-button class="binding-mac-btn iconfont icon-bangdingshebei-fanbai" type="primary" :disabled="crud.selections.length !== 1 || (crud.selections[0].deviceTypeId && crud.selections[0].deviceTypeId.name !== '桌面式RFID读写器')" @click="bindingMac()">绑定设备</el-button> <el-button class="binding-param-btn iconfont icon-bangdingcanshu-fanbai" type="primary" :disabled="crud.selections.length !== 1 || (crud.selections[0].deviceTypeId && (crud.selections[0].deviceTypeId.name !== '漏水传感器' && crud.selections[0].deviceTypeId.name !== '温湿度感应器' && crud.selections[0].deviceTypeId.name !== '空气质量检测设备'))" @click="bindingParam(crud.selections[0].id)">绑定参数</el-button> </div> </template> </crudOperation> </div> <!--表单组件--> <el-dialog ref="dialog" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="addTypeStr" @open="open"> <span class="dialog-right-top" /> <span class="dialog-left-bottom" /> <div class="setting-dialog"> <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px"> <!-- <el-input v-model="form.storeroomId" type="hidden" /> --> <el-form-item label="设备厂商" prop="supplier"> <el-select v-model="form.supplier" style="width: 370px;" :disabled="crud.status.edit === 1"> <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </el-form-item> <el-form-item v-if="isInsidedevices || isOutsidedevices" label="设备ID" prop="deviceId"> <el-input v-model="form.deviceId" style="width: 370px;" :disabled="crud.status.edit === 1" /> </el-form-item> <el-form-item label="设备名称" prop="deviceName"> <el-input v-model="form.deviceName" style="width: 370px;" /> </el-form-item> <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头' || isInsidedevices" label="接口IP" prop="deviceIp"> <el-input v-model="form.deviceIp" style="width: 370px;" /> </el-form-item> <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头' || isInsidedevices" label="端口" prop="devicePort"> <el-input v-model="form.devicePort" style="width: 370px;" /> </el-form-item> <!-- 密集架 || 回转柜 --> <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="库房代码" prop="storeroomCode"> <el-input v-model="form.storeroomCode" style="width: 370px;" /> </el-form-item> <!-- 密集架 --> <el-form-item v-if="selectedDeviceType === '密集架'" label="区号" prop="areaNo"> <el-input v-model="form.areaNo" style="width: 370px;" :disabled="crud.status.edit === 1" /> </el-form-item> <el-form-item v-if="selectedDeviceType === '密集架'" label="起始列号" prop="firstColumnNo"> <el-input v-model.number="form.firstColumnNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> </el-form-item> <el-form-item v-if="selectedDeviceType === '密集架'" label="总列数" prop="sumColumnNo"> <el-input v-model.number="form.sumColumnNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> </el-form-item> <el-form-item v-if="selectedDeviceType === '密集架'" label="节数" prop="partNo"> <el-input v-model.number="form.partNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> </el-form-item> <!-- 回转柜 || 摄像头 --> <el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头'" label="账号" prop="deviceAccount"> <el-input v-model="form.deviceAccount" style="width: 370px;" /> </el-form-item> <el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头'" label="密码" prop="devicePassword"> <el-input v-model="form.devicePassword" style="width: 370px;" /> </el-form-item> <!-- 回转柜 --> <el-form-item v-if="selectedDeviceType === '回转柜'" label="柜号" prop="cupboardNo"> <el-input v-model="form.cupboardNo" style="width: 370px;" :disabled="crud.status.edit === 1" /> </el-form-item> <!-- 摄像头 --> <el-form-item v-if="selectedDeviceType === '摄像头'" label="频道" prop="videoRoute"> <el-input v-model="form.videoRoute" style="width: 370px;" /> </el-form-item> <!-- 密集架 || 回转柜 --> <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="层数" prop="rowNo"> <el-input v-model.number="form.rowNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> </el-form-item> <!-- 回转柜 --> <el-form-item v-if="selectedDeviceType === '回转柜'" label="每层列数" prop="columnRowNo"> <el-input v-model.number="form.columnRowNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> </el-form-item> <!-- 密集架 || 回转柜 --> <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" 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-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" 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-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> <div slot="footer" class="dialog-footer"> <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button> </div> </div> </el-dialog> <el-dialog title="删除设备" :visible.sync="deleteVisible" :before-close="handleClose"> <span class="dialog-right-top" /> <span class="dialog-left-bottom" /> <div class="setting-dialog"> <div class="dialog-delt"> <p><span>确定删除当前设备吗？</span></p> </div> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click.native="handleConfirm">确定</el-button> </div> </div> </el-dialog> <el-dialog :close-on-click-modal="false" :visible.sync="selectDeviceTypeVisible" title="新增设备"> <span class="dialog-right-top" /> <span class="dialog-left-bottom" /> <div class="setting-dialog"> <el-form size="small" label-width="80px"> <el-form-item label="设备类型"> <el-select v-model="selectedDeviceType" style="width: 370px;"> <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.name" /> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="nextStep()"> 下一步 </el-button> </div> </div> </el-dialog> <el-dialog :close-on-click-modal="false" :visible.sync="bindingMacVisible" title="绑定设备"> <span class="dialog-right-top" /> <span class="dialog-left-bottom" /> <div class="setting-dialog"> <el-form size="small" label-width="140px"> <el-form-item label="当前电脑Mac地址"> <el-input v-model="currentMac" style="width: 370px;" :disabled="true" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="doBindingMac()"> 确定绑定 </el-button> </div> </div> </el-dialog> <bindParams ref="bindingParamsDlg" @refresh="crud.refresh" /> <div class="container-right" style="min-height: calc(100vh - 242px);"> <span class="right-top-line" /> <span class="left-bottom-line" /> <!--表格渲染--> <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" height="calc(100vh - 295px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler"> <el-table-column align="center" type="selection" width="50" /> <el-table-column align="center" type="index" label="序号" width="55" /> <el-table-column align="center" prop="storeroomId.name" label="所属区域" width="100" show-overflow-tooltip /> <el-table-column align="center" label="设备状态" width="100"> <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 align="center" prop="deviceTypeId.name" label="设备类型" show-overflow-tooltip /> <el-table-column align="center" prop="supplierId.name" label="设备厂商" width="100" show-overflow-tooltip /> <el-table-column align="center" prop="deviceName" label="设备名称" show-overflow-tooltip /> <el-table-column align="center" label="设备ID" show-overflow-tooltip> <template slot-scope="scope"> <span v-if="scope.row.deviceId"> {{ scope.row.deviceId }} </span> <span v-else>——</span> </template> </el-table-column> <el-table-column align="center" label="接口IP" 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 align="center" label="端口" width="90"> <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 align="center" label="绑定设备" width="100"> <template slot-scope="scope"> <span v-if="scope.row.deviceSpecParamId && scope.row.deviceSpecParamId.macAddress !== null"> 已绑定 </span> <span v-else>——</span> </template> </el-table-column> <el-table-column align="center" label="绑定参数" width="100"> <template slot-scope="scope"> <span v-if="scope.row.deviceSpecParamId && scope.row.deviceSpecParamId.paramId !== null"> 已绑定 </span> <span v-else>——</span> </template> </el-table-column> </el-table> <!--分页组件--> <pagination /> </div> </div></template>
<script>import crudDevice from '@/api/storeManage/deviceManage/device'import macApi from '@/api/storeManage/deviceManage/mac'import paramApi from '@/api/storeManage/deviceManage/param'import CRUD, { presenter, header, form } from '@crud/crud'import crudOperation from '@crud/CRUD.operation'import pagination from '@crud/Pagination'import bindParams from './bindParams'const defaultForm = { supplier: null, id: null, deviceId: null, deviceName: null, deviceIp: null, devicePort: null, rowNo: null, areaNo: null, sumColumnNo: null, firstColumnNo: null, partNo: null, storeroomCode: null, columnRowNo: null, deviceAccount: null, devicePassword: null, cupboardNo: null, videoRoute: 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 }
export default { components: { crudOperation, pagination, bindParams }, cruds() { return [ CRUD({ title: '设备', url: 'api/device/list', crudMethod: { ...crudDevice }, optShow: { add: false, edit: true, del: false, reset: false, download: false, group: false }, sort: ['sequence,asc'] }) ] }, mixins: [ presenter(), header(), form(defaultForm) ], props: { activeAddBtn: { type: Boolean } }, data() { return { storeroomId: null, deviceType: null, // 设备列表筛选项目（设备类型）
needRefreshTree: false, permission: { add: ['admin', 'device:add'], edit: ['admin', 'device:edit'], del: ['admin', 'device:del'] }, deleteVisible: false, selectDeviceTypeVisible: false, bindingMacVisible: false, currentMac: '', deviceTypeOptions: [], selectedDeviceType: '密集架', // 选择添加的设备种类
supplierOptions: [] // 厂商
} }, computed: { addTypeStr() { const addType = this.deviceTypeOptions.find(deviceType => deviceType.name === this.selectedDeviceType) const preTitle = this.crud.status.add > CRUD.STATUS.NORMAL ? '新增' : '编辑' if (addType) { return preTitle + addType.name } else { return preTitle } }, isInsidedevices() { if (this.selectedDeviceType === '空调' || this.selectedDeviceType === '桌面式RFID读写器' || this.selectedDeviceType === '盘点机' || this.selectedDeviceType === '恒湿机' || this.selectedDeviceType === '漏水传感器' || this.selectedDeviceType === '温湿度感应器' || this.selectedDeviceType === '空气质量检测设备' || this.selectedDeviceType === '漏水传感器') { 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 = { // deviceInfo.
supplier: [ { required: true, message: '请选择设备产商', trigger: 'blur' } ], deviceName: [ { 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 === '摄像头' || this.isInsidedevices) { this.$set(validateRule, 'deviceIp', [ { required: true, message: '请输入接口IP', trigger: 'blur' } // ,
// { validator: checkDeviceIp, trigger: 'blur' }
]) this.$set(validateRule, 'devicePort', [ { 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 === '摄像头') { // 回转柜 || 摄像头
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 { // 摄像头
this.$set(validateRule, 'videoRoute', [ { required: true, message: '请输入频道', trigger: 'blur' } ]) } } } return validateRule } }, created() { crudDevice.getDeviceType().then((data) => { this.deviceTypeOptions.splice(0, 0, ...data) }) }, methods: { // 设备是密集架或回转柜时，需要先处理 联动操作，回调操作 数据是null的情况
// async
async [CRUD.HOOK.beforeToEdit](crud, form) { 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
return false }, [CRUD.HOOK.beforeSubmit]() { this.crud.form.supplierId = this.supplierOptions.find(item => item.id === this.crud.form.supplier) this.crud.form.deviceTypeId = this.deviceTypeOptions.find(item => item.name === this.selectedDeviceType) }, // 获取数据前设置默认参数
[CRUD.HOOK.beforeRefresh]() { if (this.storeroomId) { this.crud.query.storeroomId = this.storeroomId.id } if (this.deviceType !== '0') { this.crud.query.deviceTypeId = this.deviceType } }, // 防止编辑时，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 } }) }, // 提交前的验证
[CRUD.HOOK.afterValidateCU](crud) { if (crud.status.edit === 1) { const storeroomId = this.crud.selections[0].storeroomId this.crud.form.storeroomId = { 'id': storeroomId.id, 'pid': storeroomId.pid, 'name': storeroomId.name, 'remark': storeroomId.remark, 'sort': storeroomId.sort } } else { this.crud.form.storeroomId = { 'id': this.storeroomId.id, 'pid': this.storeroomId.pid, 'name': this.storeroomId.name, 'remark': this.storeroomId.remark, 'sort': this.storeroomId.sort } } }, clickRowHandler(row) { this.$refs.table.toggleRowSelection(row) }, selectionChangeHandler(val) { this.crud.selections = val }, toDelete(data) { this.deleteVisible = true }, handleConfirm() { this.deleteVisible = false this.crud.delAllLoading = true this.crud.doDelete(this.crud.selections) }, handleClose(done) { done() }, selectDeviceType() { this.selectDeviceTypeVisible = true }, nextStep() { this.selectDeviceTypeVisible = false this.crud.toAdd() }, open() { this.supplierOptions.splice(0, this.supplierOptions.length) crudDevice.getSupplier().then((data) => { this.supplierOptions.splice(0, 0, ...data) }) }, bindingMac() { macApi.getMac().then((data) => { this.currentMac = data this.bindingMacVisible = true }) }, doBindingMac() { macApi.bindMac({ deviceId: this.crud.selections[0].id, macAddress: this.currentMac }).then((data) => { this.bindingMacVisible = false this.$message({ message: '绑定成功', type: 'success' }) }) }, bindingParam(id) { this.$refs.bindingParamsDlg.deviceInfoId = id paramApi.getParams({ deviceInfoId: id }).then((data) => { this.$refs.bindingParamsDlg.params = data this.$refs.bindingParamsDlg.bindParamsVisible = true }) }, 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 } } }}</script>
<style rel="stylesheet/scss" lang="scss" scoped>.archives-handler-btn { .el-button { padding: 0 13px 0 13px; ::v-deep span { margin-left: 10px; } &.binding-mac-btn { border-color: #fd8042; background-color: #fd8042; &.is-disabled { border-color: #7e4021; background-color: #7e4021; } } &.binding-param-btn { border-color: #1aae93; background-color: #1aae93; &.is-disabled { border-color: #0d5649; background-color: #0d5649; } } &.is-disabled { color: #666; } } .iconfont { line-height: 28px; } margin-left: auto;}.spk-a { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background-color: #1aae93; box-shadow: 0px 0px 6px 1px #1aae93; vertical-align: middle;}.off-line { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background-color: #F65163; box-shadow: 0px 0px 6px 1px #F65163; vertical-align: middle;}</style>
|
