当前位置:实例文章 » HTML/CSS实例» [文章]企业设备报修管理系统你nodejs+vue

企业设备报修管理系统你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)
})


以上是企业设备报修管理系统的前端和后端代码示例。该系统提供了设备列表、设备报修和设备维护功能。

其他信息

其他资源

Top