增加设备管理模块

src/api/deviceMgr.js

@@ -0,0 +1,29 @@
+import request from '../utils/request';
+
+const api={}
+
+//查询接口由表格组件自带
+
+api.save = (data) => {
+		let url='/base/device/add'
+		if(data.deviceId){
+			url='/base/device/update'
+		}
+	    return request({
+	        url: url,
+	        method: 'post',
+			data:  data
+	    });
+}
+
+api.del = (data) => {
+	    return request({
+	        url: '/base/device/delete',
+	        method: 'post',
+			params:  data
+	    });
+}
+
+
+
+export  default api

src/pages/base/DeviceMgr.vue

@@ -0,0 +1,169 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+		  <el-form-item label=" ">
+		    <el-input v-model="queryForm.deviceKey" placeholder="请输入设备名/编码" clearable class="edit-form-item"/>
+		  </el-form-item>
+		  
+		  <el-form-item>
+		    <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+		  </el-form-item>
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable 
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next,sizes"
+			url="/base/device/query"
+			:pageSize="20"
+			>
+			  <template #toolGroup>
+				  <el-button type="primary" icon="plus" @click="openEditHandle()">新增</el-button>
+				 
+			  </template>
+			  <template #tabColumns={indexGenerate}>
+				  <el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center"/>
+				  <el-table-column prop="deviceCode" label="编号" width="120" />
+				  <el-table-column prop="deviceName" label="设备名" width="160" />
+				  <el-table-column prop="deviceType" label="设备类型" width="160" />
+				  <el-table-column prop="deviceModel" label="规格型号" width="160" />
+				  <el-table-column prop="factory" label="厂家" width="120" />
+				  <el-table-column prop="serialNum" label="设备序号" width="120" />
+				  <el-table-column prop="onlineIf" label="是否在线" width="100" align="center">
+					  <template #default="scope">
+						  <el-icon v-if="scope.row.onlineIf" size="20" color="#00b600"><CircleCheckFilled /></el-icon>
+						  <div v-else>否</div>
+					  </template>
+				  </el-table-column>
+				  <el-table-column prop="heartbeatLast" label="最后心跳" width="160" />
+				  <el-table-column prop="oper" label="操作" width="160" fixed="right">
+				  					<template #default="scope">
+				  						<div class="tool-column">
+				  							<el-button type="primary" icon="edit" size="small" @click="openEditHandle(scope.row)">编辑</el-button>
+				  							
+				  							<el-button type="warning" icon="delete" size="small" @click="delHandle(scope.row)">删除</el-button>
+				  						</div>
+				  					    
+				  					</template>
+				  </el-table-column>
+			  </template>
+				
+			</CrudTable>
+		</div>
+		
+		
+		<el-dialog v-model="editDialogShow" title="数据编辑" :close-on-click-modal="false"
+		:destroy-on-close="true"
+		>
+			<DeviceMgrEdit ref="editWin" :record="crtEditRecord"/>
+			<template #footer>
+			    <span class="dialog-footer">
+			        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
+			        <el-button type="primary" @click="beforeCloseHandle('sure')">
+			         确定
+			        </el-button>
+			    </span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref} from 'vue'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	import DeviceMgrEdit from "./DeviceMgrEdit.vue"
+	import deviceMgrAPI from "../../api/deviceMgr.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	
+	const crudTable=ref(null)
+	
+	const isQuerying=ref(false)
+	
+	const editDialogShow=ref(false)
+	
+	const crtEditRecord=ref(null)
+	
+	const queryForm = reactive({
+	  deviceKey: ''
+	})
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		crudTable.value.query(queryForm).then(resp=>{
+			isQuerying.value=false
+		})
+		
+	}
+	
+	
+	
+	const delHandle=(record)=>{
+		ElMessageBox.confirm(
+			'确定要删除该记录吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			deviceMgrAPI.del({deviceId:record.deviceId}).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg)
+					return
+				}
+				ElMessage.success('操作成功')
+				queryHandle()
+				
+			}).catch(err=>{
+				ElMessage.error(err||'操作失败')
+			})
+		}).catch(()=>{
+			console.log('cancel del')
+		})
+	}
+	
+	const editWin=ref(null)
+	
+	const openEditHandle=(record)=>{
+		editDialogShow.value=true
+		crtEditRecord.value=record
+	}
+	
+	const beforeCloseHandle=async (tag)=>{
+		if(tag==='cancel'){
+			editDialogShow.value=false
+		}
+		else{
+			/* editWin.value.submitForm().then(()=>{
+				editDialogShow.value=false
+				queryHandle()
+			}) */
+			try{
+				await editWin.value.submitForm()
+				editDialogShow.value=false
+				queryHandle()
+			}
+			catch(err){
+				console.log(err)
+			}
+			
+		}
+	}
+	
+	
+	
+	
+	
+	
+	
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	
+	.edit-form-item{
+		width:260px;
+	}
+</style>

src/pages/base/DeviceMgrEdit.vue

@@ -0,0 +1,140 @@
+<template>
+	<div class="edit-page">
+		<el-form :model="formModel" ref="formcomp"  label-position="top" label-width="auto" :inline="false" :rules="rules" :inline-message="false">
+		    <el-row :gutter="50">
+				<el-col :sm="24" :md="12">
+					<el-form-item label="设备名" prop="deviceName">
+					  <el-input v-model="formModel.deviceName" autocomplete="off" placeholder="请输入设备名"  clearable/>
+					</el-form-item>
+				</el-col>
+				
+				<el-col :sm="24" :md="12">
+					<el-form-item label="编码" prop="deviceCode">
+					  <el-input v-model="formModel.deviceCode" autocomplete="off" placeholder="请输入编码"  clearable/>
+					</el-form-item>
+				</el-col>
+				
+				<el-col :sm="24" :md="12">
+					<el-form-item label="规格型号">
+					  <el-input v-model="formModel.deviceModel" autocomplete="off" placeholder="请输入规格型号"  clearable/>
+					</el-form-item>
+				</el-col>
+				
+				<el-col :sm="24" :md="12">
+					<el-form-item label="序列号">
+					  <el-input v-model="formModel.serialNum" autocomplete="off" placeholder="请输入序列号"  clearable/>
+					</el-form-item>
+				</el-col>
+				
+				<el-col :sm="24" :md="12">
+					<el-form-item label="生产厂家">
+					  <el-input v-model="formModel.factory" autocomplete="off" placeholder="请输入生产厂家" clearable/>
+					</el-form-item>
+				</el-col>
+				
+				<el-col :sm="24" :md="12">
+					<el-form-item label="设备类型">
+					  <el-input v-model="formModel.deviceType" autocomplete="off" placeholder="请输入设备类型" clearable/>
+					</el-form-item>
+				</el-col>
+				
+				<el-col :sm="24" :md="12">
+					<el-form-item label="心跳周期(秒)">
+					   
+						<el-input-number v-model="formModel.heartbeatCycleSec" :min="5" :max="10000" :precision="0" style="width:100%" clearable/>
+					</el-form-item>
+				</el-col>
+				
+			</el-row>  
+			
+		</el-form>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,toRaw,onMounted} from 'vue'
+	import deviceMgrAPI from "../../api/deviceMgr.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	
+	const formModel = reactive({
+	  deviceId:null,
+	  deviceName: null,
+	  deviceCode:null,
+	  deviceModel:null,
+	  serialNum:null,
+	  factory:null,
+	  deviceType:null,
+	  heartbeatCycleSec:5
+	  
+	})
+	
+	const props=defineProps({
+		record:Object
+	})
+	
+	const formcomp = ref(null);
+	
+	const rules =reactive({
+		deviceName:[
+			{required:true,message:'设备名还未填写',trigger:'blur'},
+			{ min: 2, max: 20, message: '设备名长度应该为2-20', trigger: 'blur' }
+			],
+		deviceCode:[
+			{required:true,message:'设备编码还未填写',trigger:'blur'},
+			{ min: 1, max: 32, message: '设备编码长度应该为1-32', trigger: 'blur' }
+			]
+	})
+	
+	onMounted(()=>{
+		//console.log(props.record)
+		if(props.record){
+			let {deviceId,deviceCode,deviceName,deviceModel,serialNum,factory,deviceType,heartbeatCycleSec}=props.record
+			Object.assign(formModel,{deviceId,deviceCode,deviceName,deviceModel,serialNum,factory,deviceType,heartbeatCycleSec})
+		}
+	})
+	
+	
+	
+	const submitForm=async ()=>{
+		let validateRst=false
+		try{
+			validateRst = await formcomp.value.validate()
+		}
+		catch(err){
+			ElMessage.error("请按要求填写数据");
+			return Promise.reject('invalidate')
+		}
+		
+		if(validateRst){  //验证通过，准备提交数据
+		  try{
+			   let resp =await deviceMgrAPI.save(toRaw(formModel))
+			   if(resp.code!=0){
+			   	ElMessage.error(resp.msg)
+			   	return Promise.reject(resp.msg)
+			   }
+			   ElMessage.success('操作成功')
+			   return Promise.resolve('ok')
+			}
+			catch (e) {
+				ElMessage.error(e||'操作失败')
+				return Promise.reject('操作失败')
+			}
+		}
+		
+		
+		
+	}
+	
+	defineExpose({
+		submitForm
+	})
+</script>
+
+<style scoped>
+	
+	
+	.el-col{
+		height:85px;
+	}
+	
+</style>