企业设备报修管理系统你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) })
以上是企业设备报修管理系统的前端和后端代码示例。该系统提供了设备列表、设备报修和设备维护功能。