学习进度条

今日学习时间：1小时
今日代码量：100行
今日博客：1篇
了解到的知识点：继续完成团队项目 了解到动态存储的相关知识

设备维修相关部分
实体类代码

package com.example.littlebabydemo0425.pojo;

import lombok.Data;
import java.util.Date;

@Data
public class RepairManager {
    private Integer planId;          // 工单编号
    private String name;             // 设备名称
    private String code;             // 设备编号
    private String type;             // 设备类型
    private String static2;          // 工单状态（注意：static是Java关键字，添加了下划线）
    private String description;      // 故障描述
    private String location;         // 位置
    private String repairer;         // 报修人
    private String repairTime;       // 报修时间
    private String image;            // 图片
    private String faultCode;        // 故障编号
    private String faultType;        // 故障类型
    private Integer reportType;      // 报修方式(1-自主报修,2-电话报修)

    private Date reportTime;         // 报修时间
    private Integer status;          // 状态(0-待处理,1-处理中,2-已完成,3-已关闭)
    private Date createTime;         // 创建时间
    private Date updateTime;         // 更新时间
    private String reporterName;     // 报修人姓名
    private String contactPhone;

    public Integer getPlanId() {
        return planId;
    }

    public void setPlanId(Integer planId) {
        this.planId = planId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getStatic2() {
        return static2;
    }

    public void setStatic2(String static2) {
        this.static2 = static2;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getLocation() {
        return location;
    }

    public void setLocation(String location) {
        this.location = location;
    }

    public String getRepairer() {
        return repairer;
    }

    public void setRepairer(String repairer) {
        this.repairer = repairer;
    }

    public String getRepairTime() {
        return repairTime;
    }

    public void setRepairTime(String repairTime) {
        this.repairTime = repairTime;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public String getFaultCode() {
        return faultCode;
    }

    public void setFaultCode(String faultCode) {
        this.faultCode = faultCode;
    }

    public String getFaultType() {
        return faultType;
    }

    public void setFaultType(String faultType) {
        this.faultType = faultType;
    }

    public Integer getReportType() {
        return reportType;
    }

    public void setReportType(Integer reportType) {
        this.reportType = reportType;
    }

    public Date getReportTime() {
        return reportTime;
    }

    public void setReportTime(Date reportTime) {
        this.reportTime = reportTime;
    }

    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;
    }

    public String getReporterName() {
        return reporterName;
    }

    public void setReporterName(String reporterName) {
        this.reporterName = reporterName;
    }

    public String getContactPhone() {
        return contactPhone;
    }

    public void setContactPhone(String contactPhone) {
        this.contactPhone = contactPhone;
    }
    // 联系电话
}

controller层代码

package com.example.littlebabydemo0425.controller;
import com.example.littlebabydemo0425.mapper.RepairManagerMapper;
import com.example.littlebabydemo0425.pojo.Device;
import com.example.littlebabydemo0425.pojo.PageBean;
import com.example.littlebabydemo0425.pojo.RepairManager;
import com.example.littlebabydemo0425.pojo.Result;
import com.github.pagehelper.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@CrossOrigin(origins = "http://localhost:5173")
@RestController
@RequestMapping("/api/repair")
public class RepairController {

    @Autowired
    private RepairManagerMapper repairManagerMapper;

    @PostMapping("/submit")
    public Map<String, Object> submitRepair(@RequestBody Map<String, Object> repairData) {
        Map<String, Object> response = new HashMap<>();

        try {
            // 创建 RepairManager 对象并设置属性
            RepairManager repairManager = new RepairManager();

            // 设置前端传过来的字段
            repairManager.setName((String) repairData.get("deviceName"));
            repairManager.setCode((String) repairData.get("deviceCode"));
            repairManager.setFaultCode((String) repairData.get("faultCode"));
            repairManager.setFaultType((String) repairData.get("faultType"));
            repairManager.setDescription((String) repairData.get("faultDesc"));
            repairManager.setReportType((Integer) repairData.get("reportType"));
            repairManager.setReporterName((String) repairData.get("reporterName"));
            repairManager.setContactPhone((String) repairData.get("contactPhone"));

            // 设置其他字段的值
            repairManager.setLocation((String) repairData.get("location")); // 位置
            repairManager.setRepairer((String) repairData.get("repairer")); // 报修人
            repairManager.setRepairTime((String) repairData.get("repairTime")); // 报修时间

            // 设置默认值或空值
            repairManager.setStatic2(null); // 工单状态
            repairManager.setType(null);   // 设备类型
            repairManager.setRepairer(null); // 报修人
            repairManager.setImage(null); // 图片
            repairManager.setStatus(0); // 状态: 0-待处理
            repairManager.setReportTime(null); // 报修时间
            repairManager.setCreateTime(null); // 创建时间
            repairManager.setUpdateTime(null); // 更新时间

            // 插入数据库
            int result = repairManagerMapper.insertRepair(repairManager);

            if (result > 0) {
                response.put("success", true);
                response.put("message", "报修提交成功");
                response.put("planId", repairManager.getPlanId()); // 返回生成的工单编号
            } else {
                response.put("success", false);
                response.put("message", "报修提交失败");
            }
        } catch (Exception e) {
            response.put("success", false);
            response.put("message", "报修提交失败: " + e.getMessage());
        }

        return response;
    }
//    @GetMapping("/list")
//    public List<RepairManager> getRepairList() {
//        return repairManagerMapper.selectAll();
//    }
    @GetMapping
    public Result<PageBean<RepairManager>> getRepairList(Integer pageNum, Integer pageSize,
                                                         @RequestParam (required = false)String  deviceType,
                                                         @RequestParam (required = false)String deviceName,
                                                         @RequestParam (required = false)String status) {
        PageBean <RepairManager> b = repairManagerMapper.list(pageNum, pageSize, deviceType, deviceName, status);
        return Result.success(b);
    }
    @PutMapping("/update")
    public Result<String> updateRepair(@RequestBody RepairManager repairManager) {
        try {
            // 设置更新时间
            repairManager.setUpdateTime(new Date());

            // 更新数据库
            int result = repairManagerMapper.updateRepair(repairManager);

            if (result > 0) {
                return Result.success("维修信息更新成功");
            } else {
                return Result.error("维修信息更新失败");
            }
        } catch (Exception e) {
            return Result.error("维修信息更新失败: " + e.getMessage());
        }
    }
}

mapper层代码

package com.example.littlebabydemo0425.mapper;

import com.example.littlebabydemo0425.pojo.PageBean;
import com.example.littlebabydemo0425.pojo.RepairManager;
import org.apache.ibatis.annotations.*;
import org.apache.ibatis.jdbc.SQL;

import java.util.List;

@Mapper
public interface RepairManagerMapper {

    @Insert("INSERT INTO repairmanager " +
            "(name, code, type, static2, description, location, repairer, repairTime, image, " +
            "fault_code, fault_type, report_type, report_time, status, create_time, update_time, " +
            "reporter_name, contact_phone) " +
            "VALUES " +
            "(#{name}, #{code}, #{type}, #{static2}, #{description}, #{location}, #{repairer}, " +
            "#{repairTime}, #{image}, #{faultCode}, #{faultType}, #{reportType}, #{reportTime}, " +
            "#{status}, #{createTime}, #{updateTime}, #{reporterName}, #{contactPhone})")
    @Options(useGeneratedKeys = true, keyProperty = "planId", keyColumn = "planId")
    int insertRepair(RepairManager repairManager);

    @Select("SELECT " +
            "planId, name, code, type, static2, description, location, " +
            "repairer, repairTime, image, fault_code as faultCode, fault_type as faultType, " +
            "report_type as reportType, report_time as reportTime, status, " +
            "create_time as createTime, update_time as updateTime, " +
            "reporter_name as reporterName, contact_phone as contactPhone " +
            "FROM repairmanager")
    List<RepairManager> selectAll();

    /**
     * 分页查询维修工单列表
     * @param pageNum 页码
     * @param pageSize 每页大小
     * @param deviceType 设备类型(可选)
     * @param deviceName 设备名称(可选)
     * @param status 工单状态(可选)
     * @return 分页结果
     */
    default PageBean<RepairManager> list(Integer pageNum, Integer pageSize,
                                         String deviceType, String deviceName, String status) {
        PageBean<RepairManager> pb = new PageBean<>();

        // 计算偏移量
        int offset = (pageNum - 1) * pageSize;

        // 查询数据
        List<RepairManager> items = selectByCondition(deviceType, deviceName, status, offset, pageSize);
        pb.setItems(items);

        // 查询总数
        long total = countByCondition(deviceType, deviceName, status);
        pb.setTotal(total);

        return pb;
    }

    @SelectProvider(type = RepairManagerSqlProvider.class, method = "selectByCondition")
    List<RepairManager> selectByCondition(
            @Param("deviceType") String deviceType,
            @Param("deviceName") String deviceName,
            @Param("status") String status,
            @Param("offset") int offset,
            @Param("pageSize") int pageSize);

    @SelectProvider(type = RepairManagerSqlProvider.class, method = "countByCondition")
    long countByCondition(
            @Param("deviceType") String deviceType,
            @Param("deviceName") String deviceName,
            @Param("status") String status);

    @Update("UPDATE repairmanager SET " +
            "name = #{name}, code = #{code}, type = #{type}, static2 = #{static2}, " +
            "description = #{description}, location = #{location}, repairer = #{repairer}, " +
            "repairTime = #{repairTime}, image = #{image}, fault_code = #{faultCode}, " +
            "fault_type = #{faultType}, report_type = #{reportType}, report_time = #{reportTime}, " +
            "status = #{status}, update_time = #{updateTime}, " +
            "reporter_name = #{reporterName}, contact_phone = #{contactPhone} " +
            "WHERE planId = #{planId}")
    int updateRepair(RepairManager repairManager);

    // SQL提供类
    class RepairManagerSqlProvider {
        public String selectByCondition(
                @Param("deviceType") String deviceType,
                @Param("deviceName") String deviceName,
                @Param("status") String status,
                @Param("offset") int offset,
                @Param("pageSize") int pageSize) {
            return new SQL() {{
                SELECT("planId, name, code, type, static2, description, location, " +
                        "repairer, repairTime, image, fault_code as faultCode, fault_type as faultType, " +
                        "report_type as reportType, report_time as reportTime, status, " +
                        "create_time as createTime, update_time as updateTime, " +
                        "reporter_name as reporterName, contact_phone as contactPhone");
                FROM("repairmanager");
                if (deviceType != null && !deviceType.isEmpty()) {
                    WHERE("type LIKE CONCAT('%', #{deviceType}, '%')");
                }
                if (deviceName != null && !deviceName.isEmpty()) {
                    WHERE("name LIKE CONCAT('%', #{deviceName}, '%')");
                }
                if (status != null && !status.isEmpty()) {
                    WHERE("status = #{status}");
                }
                ORDER_BY("create_time DESC");
            }}.toString() + " LIMIT #{offset}, #{pageSize}";
        }

        public String countByCondition(
                @Param("deviceType") String deviceType,
                @Param("deviceName") String deviceName,
                @Param("status") String status) {
            return new SQL() {{
                SELECT("COUNT(*)");
                FROM("repairmanager");
                if (deviceType != null && !deviceType.isEmpty()) {
                    WHERE("type LIKE CONCAT('%', #{deviceType}, '%')");
                }
                if (deviceName != null && !deviceName.isEmpty()) {
                    WHERE("name LIKE CONCAT('%', #{deviceName}, '%')");
                }
                if (status != null && !status.isEmpty()) {
                    WHERE("status = #{status}");
                }
            }}.toString();
        }
    }
}

前端代码

<script setup>
import { Picture, Check } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getRepairListService, uploadRepairImageService, updateRepairService } from '@/api/repair.js'
import { useTokenStore } from '@/stores/token'
import request from '@/utils/request'

// 获取token store
const tokenStore = useTokenStore()

// 工单状态选项
const workOrderStatusOptions = ref('')
//设备名称
const deviceName = ref('')
// 设备类型
const deviceType = ref('')

// 故障工单列表数据模型
const workOrders = ref([])

const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(20)

// 分页大小变化
const onSizeChange = (size) => {
  pageSize.value = size
  getWorkOrders();
}

// 当前页变化
const onCurrentChange = (num) => {
  pageNum.value = num
  getWorkOrders();
}

// 获取工单列表
const getWorkOrders = async () => {
  try {
    let params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      deviceType: deviceType.value ? deviceType.value : null,
      deviceName: deviceName.value ? deviceName.value : null,
      status: workOrderStatusOptions.value ? workOrderStatusOptions.value : null
    }

    console.log('请求参数:', params);

    const result = await getRepairListService(params);
    console.log('API响应:', result);

    if (result && result.data) {
      total.value = result.data.total;
      workOrders.value = result.data.items.map(item => ({
        id: item.planId,
        name: item.name,
        code: item.code,
        type: item.type,
        status: item.status,
        description: item.description,
        location: item.location,
        reporter: item.reporterName,
        contactPhone: item.contactPhone,
        repairTime: item.repairTime,
        faultCode: item.faultCode,
        faultType: item.faultType,
        reportType: item.reportType,
        static2: item.static2,
        image: item.image
      }));
    } else {
      throw new Error('获取数据失败');
    }
  } catch (error) {
    console.error('获取工单列表失败:', error);
    ElMessage.error('获取工单列表失败: ' + (error.response?.data?.message || error.message));
  }
};
getWorkOrders();

// 控制照片上传对话框显示
const photoDialogVisible = ref(false)
const currentOrder = ref(null)

// 上传的照片列表
const uploadPhotos = ref([])

// 表单数据模型
const formData = ref({
  faultCode: '',
  faultType: '',
  reportType: '',
  description: '',
  image: ''
})

// 故障类型选项
const faultTypeOptions = [
  { label: '机械故障', value: '机械故障' },
  { label: '电气故障', value: '电气故障' },
  { label: '软件故障', value: '软件故障' },
  { label: '其他故障', value: '其他故障' }
]

// 报修方式选项
const reportTypeOptions = [
  { label: '自主报修', value: 1 },
  { label: '电话报修', value: 2 }
]

// 打开上传照片对话框
const openUploadDialog = (order) => {
  currentOrder.value = order
  uploadPhotos.value = []

  // 初始化表单数据
  formData.value = {
    faultCode: order.faultCode || '',
    faultType: order.faultType || '',
    reportType: order.reportType || '',
    description: order.description || '',
    image: order.image || ''
  }

  photoDialogVisible.value = true
}

// 自定义上传方法
const customUpload = async (options) => {
  const { file, onProgress, onSuccess, onError } = options

  try {
    console.log('开始上传文件:', file.name);

    const uploadFormData = new FormData();
    uploadFormData.append('file', file);

    // 使用统一的request工具上传
    const response = await uploadRepairImageService(uploadFormData);
    console.log('上传响应:', response);

    // 根据您的API响应格式调整
    if (response && response.code === 1) {
      const url = response.data;
      if (!url) {
        throw new Error('上传成功但未返回有效的URL');
      }

      // 将URL添加到uploadPhotos数组
      if (!uploadPhotos.value.includes(url)) {
        uploadPhotos.value.push(url);
      }

      // 更新表单中的图片字段
      if (!formData.value) {
        formData.value = { image: url };
      } else if (!formData.value.image) {
        formData.value.image = url;
      } else {
        formData.value.image += ',' + url;
      }

      // 调用成功回调
      onSuccess({
        data: url,
        url: url,
        status: 'success'
      });

      ElMessage.success('照片上传成功');
    } else {
      throw new Error(response?.message || '上传失败');
    }
  } catch (error) {
    console.error('上传失败:', error);
    ElMessage.error(`上传失败: ${error.message}`);
    onError(error);
  }
}

// 上传照片成功
const handleUploadSuccess = (response, file, fileList) => {
  console.log('上传成功回调:', response);
  // 这个函数现在只用于更新UI，实际的数据处理已经在customUpload中完成
}

// 删除照片
const handleRemove = (file) => {
  const url = file.response?.data || file.url
  const index = uploadPhotos.value.indexOf(url)
  if (index !== -1) {
    uploadPhotos.value.splice(index, 1)
    formData.value.image = uploadPhotos.value.join(',')
  }
}

// 预览照片
const handlePictureCardPreview = (file) => {
  const url = file.response?.data || file.url
  window.open(url, '_blank')
}

// 上传前检查
const beforeUpload = (file) => {
  console.log('上传前检查文件:', file)
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }
  return true
}

// 提交维修信息
const submitRepairInfo = async () => {
  try {
    if (!formData.value.faultType) {
      ElMessage.warning('请选择故障类型')
      return
    }
    
    if (!formData.value.description) {
      ElMessage.warning('请输入故障描述')
      return
    }
    
    if (uploadPhotos.value.length === 0) {
      ElMessage.warning('请至少上传一张照片')
      return
    }
    
    const params = {
      deviceName: currentOrder.value.name,
      deviceCode: currentOrder.value.code,
      faultCode: formData.value.faultCode,
      faultType: formData.value.faultType,
      faultDesc: formData.value.description,
      reportType: formData.value.reportType,
      image: formData.value.image,
      location: currentOrder.value.location,
      reporterName: currentOrder.value.reporter,
      contactPhone: currentOrder.value.contactPhone
    }
    
    console.log('提交参数:', params)
    
    // 使用submit接口
    const response = await request.post('/api/repair/submit', params)
    console.log('提交响应:', response)
    
    if (!response) {
      throw new Error('服务器未返回响应')
    }
    
    if (response.success) {
      ElMessage.success(response.message || '维修信息提交成功')
      photoDialogVisible.value = false
      getWorkOrders()
    } else {
      throw new Error(response.message || '提交失败')
    }
  } catch (error) {
    console.error('提交维修信息失败:', error)
    ElMessage.error('提交维修信息失败: ' + (error.message || '未知错误'))
  }
}

// 标记为已修好
const markAsRepaired = async (order) => {
  try {
    await ElMessageBox.confirm('确定该设备已修好吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const params = {
      planId: order.id,
      status: 2 // 标记为已完成
    }

    const result = await updateRepairService(params)
    if (result.code === 200) {
      ElMessage.success('状态更新成功')
      getWorkOrders()
    } else {
      throw new Error(result.message || '更新失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败: ' + error.message)
    }
  }
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>维修管理</span>
        <div class="extra">
          <el-button type="primary" @click="getWorkOrders">刷新</el-button>
        </div>
      </div>
    </template>

    <!-- 搜索表单 -->
    <el-form inline>
      <!-- <el-form-item label="设备类型：">
        <el-select v-model="deviceType" placeholder="请选择设备类型" clearable>
          <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-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="workOrderStatusOptions" placeholder="请选择状态" clearable>
          <el-option label="待处理" value="0"></el-option>
          <el-option label="处理中" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getWorkOrders">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 工单列表 -->
    <el-table :data="workOrders" style="width: 100%" border>
      <el-table-column prop="name" label="设备名称" width="150" />
      <el-table-column prop="code" label="设备编号" width="150" />
      <el-table-column prop="description" label="故障描述" width="200" />
      <el-table-column prop="location" label="位置" width="120" />
      <el-table-column prop="reporter" label="报修人" width="100" />
      <el-table-column prop="repairTime" label="报修时间" width="180">
        <template #default="{ row }">
          {{ formatDateTime(row.repairTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="contactPhone" label="联系电话" width="120" />
      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 0 ? 'warning' : row.status === 1 ? 'primary' : 'success'">
            {{ row.status === 0 ? '待处理' : row.status === 1 ? '处理中' : '已完成' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button :icon="Picture" type="primary" size="small" @click="openUploadDialog(row)"
            :disabled="row.status === 2">
            维修处理
          </el-button>
          <!-- <el-button 
            :icon="Check" 
            type="success" 
            size="small" 
            @click="markAsRepaired(row)"
            :disabled="row.status === 2"
          >
            已修好
          </el-button> -->
        </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-dialog v-model="photoDialogVisible" title="维修处理" width="60%">
      <el-form :model="formData" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备名称">
              <el-input v-model="currentOrder.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号">
              <el-input v-model="currentOrder.code" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="故障编号" prop="faultCode">
              <el-input v-model="formData.faultCode" placeholder="请输入故障编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="故障类型" prop="faultType" required>
              <el-select v-model="formData.faultType" placeholder="请选择故障类型" style="width: 100%">
                <el-option v-for="item in faultTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报修方式" prop="reportType">
              <el-select v-model="formData.reportType" placeholder="请选择报修方式" style="width: 100%">
                <el-option v-for="item in reportTypeOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="位置">
              <el-input v-model="currentOrder.location" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="故障描述" prop="description" required>
          <el-input v-model="formData.description" type="textarea" :rows="3" placeholder="请输入详细的故障描述" />
        </el-form-item>

        <el-form-item label="维修照片" required>
          <el-upload :http-request="customUpload" list-type="picture-card" :on-success="handleUploadSuccess"
            :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :before-upload="beforeUpload"
            :file-list="uploadPhotos" :limit="9" :auto-upload="true" :show-file-list="true" multiple accept="image/*">
            <el-icon>
              <Plus />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip">
                请上传维修过程中的照片，支持jpg、png格式，单张图片不超过5MB，最多9张
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="photoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRepairInfo">提交维修信息</el-button>
      </template>
    </el-dialog>
  </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;
  justify-content: flex-end;
}

:deep(.el-upload-list__item-thumbnail) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-dialog {
  .el-form {
    padding: 0 20px;
  }
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 7px;
  line-height: 1.5;
}
</style>

以上代码基本完成了设备的维修功能,同时能够根据不同的要求对工单进行查询,该部分功能仍然有待优化