学习进度条
今日所花时间：一小时
今日代码量：100行
博客量：1篇
了解到的知识点： 推进团队项目开发，完成后端的增删改查
配置项目环境
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.4.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>LittleBabyDemo0425</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>LittleBabyDemo0425</name>
<description>LittleBabyDemo0425</description>
<url/>
<licenses>
<license/>
</licenses>
<developers>
<developer/>
</developers>
<scm>
<connection/>
<developerConnection/>
<tag/>
<url/>
</scm>
<properties>
<java.version>17</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-ldap</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!-- <dependency>-->
<!-- <groupId>org.springframework.boot</groupId>-->
<!-- <artifactId>spring-boot-starter-security</artifactId>-->
<!-- </dependency>-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>3.0.4</version>
</dependency>
<dependency>
<groupId>org.springframework.session</groupId>
<artifactId>spring-session-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity6</artifactId>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter-test</artifactId>
<version>3.0.4</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency>
<!-- volidation依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>4.4.0</version>
</dependency>
<!-- 单元测试的坐标-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
<!--pageHelper坐标-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.6</version>
</dependency>
<!-- <dependency>-->
<!-- <groupId>org.springframework.boot</groupId>-->
<!-- <artifactId>spring-boot-starter-data-redis</artifactId>-->
<!-- </dependency>-->
<!-- 阿里云OSS依赖坐标-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.17.4</version>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.1</version>
</dependency>
<dependency>
<groupId>javax.activation</groupId>
<artifactId>activation</artifactId>
<version>1.1.1</version>
</dependency>
<!-- no more than 2.3.3-->
<dependency>
<groupId>org.glassfish.jaxb</groupId>
<artifactId>jaxb-runtime</artifactId>
<version>2.3.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<annotationProcessorPaths>
<path>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</path>
</annotationProcessorPaths>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
根据之前设计的数据库表
完成设备表的各部分功能（增删改查）
Device.java(设备表)
package com.example.littlebabydemo0425.pojo;
import jakarta.persistence.*;
import java.util.Date;
@Entity
@Table(name = "device", uniqueConstraints = {
@UniqueConstraint(columnNames = "device_code", name = "idx_device_code")
})
public class Device {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "device_code", length = 64, nullable = false)
private String deviceCode;
@Column(name = "device_name", length = 128, nullable = false)
private String deviceName;
@Column(name = "device_type", length = 32, nullable = false)
private String deviceType;
@Column(name = "location", length = 256)
private String location;
@Column(name = "status", columnDefinition = "tinyint default 1")
private Integer status;
@Column(name = "create_time", columnDefinition = "datetime default CURRENT_TIMESTAMP")
private Date createTime;
@Column(name = "update_time", columnDefinition = "datetime default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP")
private Date updateTime;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getDeviceCode() {
return deviceCode;
}
public void setDeviceCode(String deviceCode) {
this.deviceCode = deviceCode;
}
public String getDeviceName() {
return deviceName;
}
public void setDeviceName(String deviceName) {
this.deviceName = deviceName;
}
public String getDeviceType() {
return deviceType;
}
public void setDeviceType(String deviceType) {
this.deviceType = deviceType;
}
public String getLocation() {
return location;
}
public void setLocation(String location) {
this.location = location;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public Date getUpdateTime() {
return updateTime;
}
public void setUpdateTime(Date updateTime) {
this.updateTime = updateTime;
}
}
controller层
DevicesController.java
package com.example.littlebabydemo0425.controller;
import com.example.littlebabydemo0425.mapper.DeviceMapper;
import com.example.littlebabydemo0425.pojo.Device;
import com.example.littlebabydemo0425.pojo.PageBean;
import com.example.littlebabydemo0425.pojo.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api/devices/")
@CrossOrigin(origins = "http://localhost:5173") // 添加CORS支持
public class DevicesController {
@Autowired
private DeviceMapper deviceMapper;
@GetMapping
public Result<PageBean<Device>> list(Integer pageNum,
Integer pageSize,
@RequestParam(required = false)String deviceCode,
@RequestParam(required = false)String deviceType,
@RequestParam(required = false)String deviceName,
@RequestParam(required = false) String status){
PageBean<Device> pb = deviceMapper.list(pageNum,pageSize,deviceCode,deviceType,deviceName,status);
return Result.success(pb);
}
@DeleteMapping("/{deviceCode}")
public Result<String> deleteDevice(@PathVariable String deviceCode) {
deviceMapper.deleteById(deviceCode);
return Result.success(deviceCode);
}
@PostMapping
public ResponseEntity<Result<Device>> createDevice(@RequestBody Device device) {
try {
// 检查设备编号是否已存在
Device existingDevice = deviceMapper.selectByDeviceCode(device.getDeviceCode());
if (existingDevice != null) {
return ResponseEntity.status(HttpStatus.CONFLICT)
.body(Result.error("设备编号已存在"));
}
System.out.println("收到请求，设备数据: " + device); // 调试日志
if(device.getDeviceCode() == null) {
return ResponseEntity.badRequest()
.body(Result.error("设备编号不能为空"));
}
// 设置默认状态为1（正常）
if (device.getStatus() == null) {
device.setStatus(1);
}
// 插入新设备
int result = deviceMapper.insert(device);
if (result > 0) {
return ResponseEntity.status(HttpStatus.CREATED)
.body(Result.success(device));
} else {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(Result.error("添加设备失败"));
}
} catch (Exception e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(Result.error("服务器内部错误: " + e.getMessage()));
}
}
}
mapper层
DeviceMapper.java
package com.example.littlebabydemo0425.mapper;
import com.example.littlebabydemo0425.pojo.Device;
import com.example.littlebabydemo0425.pojo.PageBean;
import org.apache.ibatis.annotations.*;
import org.apache.ibatis.jdbc.SQL;
import java.util.List;
@Mapper
public interface DeviceMapper {
@Insert("INSERT INTO device (device_code, device_name, device_type, location, status) " +
"VALUES(#{deviceCode}, #{deviceName}, #{deviceType}, #{location}, #{status})")
@Options(useGeneratedKeys = true, keyProperty = "id")
int insert(Device device);
@Update("UPDATE device SET device_name=#{deviceName}, device_type=#{deviceType}, " +
"location=#{location}, status=#{status} WHERE id=#{id}")
int update(Device device);
@Delete("DELETE FROM device WHERE device_code=#{deviceCode}")
int deleteById(String deviceCode);
@Select("SELECT * FROM device WHERE id=#{id}")
Device selectById(Long id);
@Select("SELECT * FROM device WHERE device_code=#{deviceCode}")
Device selectByDeviceCode(String deviceCode);
@Select("SELECT * FROM device")
List<Device> selectAll();
/**
* 分页查询设备列表
* @param pageNum 页码
* @param pageSize 每页大小
* @param deviceCode 设备编码(可选)
* @param deviceName 设备名称(可选)
* @param deviceType 设备类型(可选)
* @param status 设备状态(可选)
* @return 分页结果
*/
default PageBean<Device> list(Integer pageNum, Integer pageSize, String deviceCode, String deviceType,String deviceName, String status) {
PageBean<Device> pb = new PageBean<>();
// 计算偏移量
int offset = (pageNum - 1) * pageSize;
// 查询数据
List<Device> devices = selectByCondition(deviceCode, deviceType,deviceName, status, offset, pageSize);
pb.setItems(devices);
// 查询总数
long total = countByCondition(deviceCode, deviceType, deviceName, status);
pb.setTotal(total);
return pb;
}
@SelectProvider(type = DeviceSqlProvider.class, method = "selectByCondition")
List<Device> selectByCondition(
@Param("deviceCode") String deviceCode,
@Param("deviceType") String deviceType,
@Param("deviceName") String deviceName,
@Param("status") String status,
@Param("offset") int offset,
@Param("pageSize") int pageSize);
@SelectProvider(type = DeviceSqlProvider.class, method = "countByCondition")
long countByCondition(
@Param("deviceCode") String deviceCode,
@Param("deviceType") String deviceType,
@Param("deviceName") String deviceName,
@Param("status") String status);
// SQL提供类
class DeviceSqlProvider {
public String selectByCondition(
@Param("deviceCode") String deviceCode,
@Param("deviceType") String deviceType,
@Param("deviceName") String deviceName,
@Param("status") String status,
@Param("offset") int offset,
@Param("pageSize") int pageSize) {
return new SQL() {{
SELECT("*");
FROM("device");
if (deviceCode != null && !deviceCode.isEmpty()) {
WHERE("device_code LIKE CONCAT('%', #{deviceCode}, '%')");
}
if (deviceType != null && !deviceType.isEmpty()) {
// 修改为根据设备类型进行模糊匹配
WHERE("device_type LIKE CONCAT('%', #{deviceType}, '%')");
}
if (deviceName != null && !deviceName.isEmpty()) {
WHERE("device_name LIKE CONCAT('%', #{deviceName}, '%')");
}
if (status != null && !status.isEmpty()) {
WHERE("status = #{status}");
}
ORDER_BY("id DESC");
}}.toString() + " LIMIT #{offset}, #{pageSize}";
}
public String countByCondition(
@Param("deviceCode") String deviceCode,
@Param("deviceType") String deviceType,
@Param("deviceName") String deviceName,
@Param("status") String status) {
return new SQL() {{
SELECT("COUNT(*)");
FROM("device");
if (deviceCode != null && !deviceCode.isEmpty()) {
WHERE("device_code LIKE CONCAT('%', #{deviceCode}, '%')");
}
if (deviceType != null && !deviceType.isEmpty()) {
// 修改为根据设备类型进行模糊匹配
WHERE("device_type LIKE CONCAT('%', #{deviceType}, '%')");
}
if (deviceName != null && !deviceName.isEmpty()) {
WHERE("device_name LIKE CONCAT('%', #{deviceName}, '%')");
}
if (status != null && !status.isEmpty()) {
WHERE("status = #{status}");
}
}}.toString();
}
}
}
前端相关页面
<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deviceListService, deleteDeviceService, addDeviceService, } from '@/api/Device.js'
import { repairService } from '@/api/repair.js'
import { useTokenStore } from '@/stores/token'
// 用户搜索时选中的设备类型
const selectedDeviceType = ref('')
//用户搜索时选中的发布状态
const state = ref('')
// 搜索条件（设备名称）
const deviceName = ref('')
// 设备列表数据模型
const deviceList = ref([
{
id: 1,
deviceCode: 'DEV-001',
deviceName: '主数据库服务器',
deviceType: '客服',
status: 1,
location: '数据中心A区',
createTime: '2023-10-15'
},
])
//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数
// 分页大小变化
const onSizeChange = (size) => {
pageSize.value = size
getDeviceList();
}
// 当前页变化
const onCurrentChange = (num) => {
pageNum.value = num
getDeviceList();
}
//获取设备列表数据
const getDeviceList = async () => {
let params = {
pageNum: pageNum.value,
pageSize: pageSize.value,
deviceType: selectedDeviceType.value ? selectedDeviceType.value : null,
deviceName: deviceName.value ? deviceName.value : null,
status: state.value ? state.value : null
}
let result = await deviceListService(params);
//渲染视图
total.value = result.data.total;
deviceList.value = result.data.items;
//处理数据
}
//调用函数
getDeviceList();
// 删除设备
const deleteDevice = async (deviceCode) => {
try {
await ElMessageBox.confirm('确定要删除该设备吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
// 这里应该是调用API删除设备
await deleteDeviceService(deviceCode)
ElMessage.success('删除成功')
getDeviceList()//刷新
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 打开添加设备抽屉
const addDevice = () => {
addDeviceDrawerVisible.value = true
}
// 提交添加设备表单
const submitAddDevice = async () => {
try {
const response = await addDeviceService(addDeviceForm.value)
ElMessage.success('设备添加成功')
addDeviceDrawerVisible.value = false
getDeviceList()
} catch (error) {
ElMessage.error('设备添加失败: ' + error.message)
}
}
// 添加设备抽屉的显示状态，使用 ref 定义
const addDeviceDrawerVisible = ref(false);
// 添加设备表单数据
const addDeviceForm = ref({
deviceCode: '',
deviceName: '',
deviceType: '',
location: '',
status: '1'
});
// 控制报修抽屉显示
const repairDrawerVisible = ref(false)
// 报修表单数据
const repairForm = ref({
deviceId: null,
deviceCode: '', // 新增设备编号字段
deviceName: '',
location:'',//位置
faultCode: '',
faultType: '',
faultDesc: '',
reportType: 1, // 默认为自主报修
reporterName: '', // 报修人姓名
contactPhone: '', // 联系电话
reportUserId: useTokenStore().token?.id // 从token中获取用户ID
})
// 打开报修抽屉
// 打开报修抽屉
const openRepairDrawer = (device) => {
if (device.status === 1) {
ElMessage.warning('设备状态正常，无需报修');
return;
}
repairForm.value = {
deviceId: device.id,
deviceCode: device.deviceCode, // 设置设备编号
deviceName: device.deviceName,
location: device.location,
faultCode: `FAULT-${Date.now().toString().slice(-6)}`, // 自动生成故障编号
faultType: '',
faultDesc: '',
reportType: 1,
reporterName: '',
contactPhone: '',
reportUserId: useTokenStore().token?.id,
status: 0 // 默认状态为待处理
}
repairDrawerVisible.value = true
}
const submitRepair = async () => {
try {
// 构造提交数据
const submitData = {
deviceName: repairForm.value.deviceName,
deviceCode: repairForm.value.deviceCode,
deviceType: repairForm.value.deviceType,
faultCode: repairForm.value.faultCode,
faultType: repairForm.value.faultType,
faultDesc: repairForm.value.faultDesc,
reportType: repairForm.value.reportType,
reporterName: repairForm.value.reporterName,
contactPhone: repairForm.value.contactPhone,
location: repairForm.value.location,
repairer: repairForm.value.reporterName, // 报修人使用reporterName
repairTime: new Date().toISOString(), // 当前时间作为报修时间
status: 0, // 默认状态为待处理
static2: '待处理', // 工单状态
type: repairForm.value.deviceType, // 设备类型
image: null, // 图片暂时为空
reportTime: new Date(), // 报修时间
createTime: new Date(), // 创建时间
updateTime: new Date() // 更新时间
};
console.log('提交的报修数据:', submitData);
// 使用封装好的 repairService 提交报修
const response = await repairService(submitData);
if (response.success) {
ElMessage.success('报修提交成功');
repairDrawerVisible.value = false;
getDeviceList(); // 刷新设备列表
} else {
ElMessage.error('报修提交失败: ' + response.message);
}
} catch (error) {
console.error('报修提交错误:', error);
ElMessage.error('报修提交失败: ' + (error.response?.data?.message || error.message));
}
};
</script>
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>设备管理</span>
<div class="extra">
<el-button type="primary" @click="addDevice">添加设备</el-button>
</div>
</div>
</template>
<!-- 搜索表单 -->
<el-form inline>
<el-form-item label="设备类型：">
<el-select v-model="selectedDeviceType" placeholder="请选择设备类型" clearable @change="getDeviceList"
style="width: 200px">
<el-option label="客服" value="客服"></el-option>
<el-option label="机电" value="机电"></el-option>
<el-option label="电梯" value="电梯"></el-option>
<el-option label="消防" value="消防"></el-option>
<!-- <el-option v-for="type in deviceTypes" :key="type.id" :label="type.name" :value="type.deviceType" /> -->
</el-select>
</el-form-item>
<el-form-item label="设备名称：">
<el-input v-model="deviceName" placeholder="请输入设备名称" clearable />
</el-form-item>
<el-form-item label="设备状态：">
<el-select v-model="state" placeholder="请选择状态" clearable style="width: 200px">
<el-option label="正常" value="1"></el-option>
<el-option label="故障" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDeviceList">搜索</el-button>
<!-- <el-button @click="resetSearch()">重置</el-button> -->
</el-form-item>
</el-form>
<!-- 设备列表 -->
<el-table :data="deviceList" style="width: 100%" border>
<el-table-column prop="deviceCode" label="设备编号" width="120" />
<el-table-column prop="deviceName" label="设备名称" width="180" />
<el-table-column prop="deviceType" label="设备类型" width="120" />
<el-table-column label="设备状态" width="100">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '正常' : '故障' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="location" label="位置" width="150" />
<el-table-column prop="createTime" label="最后维护时间" width="150" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" size="small" @click="openRepairDrawer(row)">
自主报修
</el-button>
<el-button :icon="Delete" type="danger" size="small" @click="deleteDevice(row.deviceCode)" />
</template>
</el-table-column>
<template #empty>
<el-empty description="暂无设备数据" />
</template>
</el-table>
<!-- 分页条 -->
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
<!-- 添加设备抽屉 -->
<el-drawer v-model="addDeviceDrawerVisible" title="添加设备" direction="rtl" size="40%">
<el-form :model="addDeviceForm" label-width="100px" label-position="top" style="padding: 20px">
<el-form-item label="设备编号" prop="deviceCode" required>
<el-input v-model="addDeviceForm.deviceCode" placeholder="请输入设备编号" />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName" required>
<el-input v-model="addDeviceForm.deviceName" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备类型" prop="deviceType" required>
<el-input v-model="addDeviceForm.deviceType" placeholder="请输入设备类型" />
</el-form-item>
<el-form-item label="设备位置" prop="location">
<el-input v-model="addDeviceForm.location" placeholder="请输入设备位置" />
</el-form-item>
<el-form-item label="设备状态" prop="status">
<el-select v-model="addDeviceForm.status">
<el-option label="正常" value="1"></el-option>
<el-option label="故障" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitAddDevice">提交</el-button>
<el-button @click="addDeviceDrawerVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-drawer>
<!-- 报修抽屉 -->
<el-drawer v-model="repairDrawerVisible" title="设备自主报修" direction="rtl" size="40%">
<el-form :model="repairForm" label-width="100px" label-position="top" style="padding: 20px">
<el-form-item label="设备ID" prop="deviceId" v-show="false">
<el-input v-model="repairForm.deviceId" disabled />
</el-form-item>
<el-form-item label="设备编号">
<el-input v-model="repairForm.deviceCode" disabled />
</el-form-item>
<el-form-item label="设备名称">
<el-input v-model="repairForm.deviceName" disabled />
</el-form-item>
<el-form-item label="位置">
<el-input v-model="repairForm.location" disabled />
</el-form-item>
<el-form-item label="故障编号">
<el-input v-model="repairForm.faultCode" disabled />
</el-form-item>
<el-form-item label="故障类型" prop="faultType" required>
<el-select v-model="repairForm.faultType" placeholder="请选择故障类型">
<el-option label="硬件故障" value="hardware"></el-option>
<el-option label="软件故障" value="software"></el-option>
<el-option label="网络故障" value="network"></el-option>
<el-option label="其他故障" value="other"></el-option>
</el-select>
</el-form-item>
<el-form-item label="故障描述" prop="faultDesc" required>
<el-input v-model="repairForm.faultDesc" type="textarea" :rows="4" placeholder="请详细描述故障现象" />
</el-form-item>
<el-form-item label="报修方式" prop="reportType">
<el-radio-group v-model="repairForm.reportType">
<el-radio :label="1">自主报修</el-radio>
<el-radio :label="2">电话报修</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="报修人姓名" prop="reporterName" required>
<el-input v-model="repairForm.reporterName" placeholder="请输入报修人姓名" />
</el-form-item>
<el-form-item label="联系电话" prop="contactPhone" required>
<el-input v-model="repairForm.contactPhone" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitRepair">提交报修</el-button>
<el-button @click="repairDrawerVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-drawer>
</el-card>
</template>
<style lang="scss" scoped>
.page-container {
min-height: 100%;
box-sizing: border-box;
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.el-table {
margin-top: 20px;
}
.el-pagination {
margin-top: 20px;
}
</style>
以上代码，能够实现，设备的添加，设备查询（根据设备类型，设备状态，设备名称进行查询，同时支持分页查询功能），当然还需要优化添加设备文件导入的功能，一次性导入多条数据。
浙公网安备 33010602011771号