企业设备报修管理系统你nodejs+vue
发布人:shili8
发布时间:2025-02-08 08:03
阅读次数:0
**企业设备报修管理系统**
本文将介绍如何使用 Node.js 和 Vue.js 构建一个企业设备报修管理系统。该系统将提供设备的维护、报修和管理功能。
**系统架构**
系统架构如下:
* **前端**: 使用 Vue.js 构建用户界面,负责处理用户交互。
* **后端**: 使用 Node.js 构建 API服务,负责处理数据存储和业务逻辑。
* **数据库**: 使用 MongoDB 存储设备信息、报修记录等数据。
**前端(Vue.js)**
### 设备列表组件
html<template>
<div>
<h1>设备列表</h1>
<ul>
<li v-for="device in devices" :key="device._id">
{{ device.name }} ({{ device.status }})
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
devices: []
}
},
mounted() {
this.getDevices()
},
methods: {
async getDevices() {
const response = await axios.get('/api/devices')
this.devices = response.data }
}
}
</script>
### 设备报修组件
html<template>
<div>
<h1>设备报修</h1>
<form @submit.prevent="reportDevice">
<label for="device_id">选择设备:</label>
<select id="device_id" v-model="selectedDeviceId">
<option v-for="device in devices" :key="device._id" :value="device._id">{{ device.name }}</option>
</select>
<label for="reason">原因:</label>
<input type="text" id="reason" v-model="reason" />
<button type="submit">报修</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
selectedDeviceId: '',
reason: ''
}
},
mounted() {
this.getDevices()
},
methods: {
async getDevices() {
const response = await axios.get('/api/devices')
this.devices = response.data },
async reportDevice() {
const response = await axios.post('/api/report-device', { device_id: this.selectedDeviceId, reason: this.reason })
console.log(response.data)
}
}
}
</script>
### 设备维护组件
html<template>
<div>
<h1>设备维护</h1>
<form @submit.prevent="maintainDevice">
<label for="device_id">选择设备:</label>
<select id="device_id" v-model="selectedDeviceId">
<option v-for="device in devices" :key="device._id" :value="device._id">{{ device.name }}</option>
</select>
<label for="reason">原因:</label>
<input type="text" id="reason" v-model="reason" />
<button type="submit">维护</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
selectedDeviceId: '',
reason: ''
}
},
mounted() {
this.getDevices()
},
methods: {
async getDevices() {
const response = await axios.get('/api/devices')
this.devices = response.data },
async maintainDevice() {
const response = await axios.post('/api/maintain-device', { device_id: this.selectedDeviceId, reason: this.reason })
console.log(response.data)
}
}
}
</script>
**后端(Node.js)**
### 设备模型
javascriptconst mongoose = require('mongoose')
const DeviceSchema = new mongoose.Schema({
name: String,
status: String})
module.exports = mongoose.model('Device', DeviceSchema)
### 报修记录模型
javascriptconst mongoose = require('mongoose')
const ReportRecordSchema = new mongoose.Schema({
device_id: { type: mongoose.Schema.Types.ObjectId, ref: 'Device' },
reason: String,
created_at: Date})
module.exports = mongoose.model('ReportRecord', ReportRecordSchema)
### 设备API
javascriptconst express = require('express')
const router = express.Router()
const Device = require('../models/Device')
router.get('/devices', async (req, res) => {
const devices = await Device.find().exec()
res.json(devices)
})
router.post('/report-device', async (req, res) => {
const { device_id, reason } = req.body const reportRecord = new ReportRecord({ device_id, reason })
await reportRecord.save()
res.json(reportRecord)
})
### 设备维护API
javascriptconst express = require('express')
const router = express.Router()
const Device = require('../models/Device')
router.get('/devices', async (req, res) => {
const devices = await Device.find().exec()
res.json(devices)
})
router.post('/maintain-device', async (req, res) => {
const { device_id, reason } = req.body const device = await Device.findByIdAndUpdate(device_id, { status: '维护中' }, { new: true })
res.json(device)
})
以上是企业设备报修管理系统的前端和后端代码示例。该系统提供了设备列表、设备报修和设备维护功能。

