维修图片上传功能，维修和保养的维修项目字段更换

zhangwencui

2026-05-15 aa0867a85101e396157f62f6a41497025b10ff1b

维修图片上传功能，维修和保养的维修项目字段更换

 src/pages/equipmentManagement/repair/add.vue

@@ -77,9 +77,9 @@
                   clearable />
        </u-form-item>
        <u-form-item label="维修项目"
                     prop="maintenanceProject"
                     prop="machineryCategory"
                     border-bottom>
          <u-input v-model="form.maintenanceProject"
          <u-input v-model="form.machineryCategory"
                   placeholder="请输入维修项目"
                   clearable />
        </u-form-item>
@@ -93,6 +93,17 @@
                      clearable
                      count
                      maxlength="200" />
        </u-form-item>
        <u-form-item label="图片附件"
                     prop="storageBlobDTOs"
                     border-bottom>
          <u-upload :fileList="fileList"
                    @afterRead="afterRead"
                    @delete="deleteFile"
                    name="file"
                    multiple
                    :maxCount="9"
                    accept="image"></u-upload>
        </u-form-item>
      </u-cell-group>
      <!-- 提交按钮 -->
@@ -122,7 +133,7 @@

<script setup>
  import { ref, computed, onMounted, onUnmounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { onShow, onLoad } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
  import {
@@ -132,6 +143,8 @@
  } from "@/api/equipmentManagement/repair";
  import dayjs from "dayjs";
  import { formatDateToYMD } from "@/utils/ruoyi";
  import { getToken } from "@/utils/auth";
  import config from "@/config";
  const showToast = message => {
    uni.showToast({
      title: message,
@@ -146,10 +159,18 @@
  // 表单引用
  const formRef = ref(null);
  const operationType = ref("add");
  const repairId = ref("");
  const loading = ref(false);
  const showDevice = ref(false);
  const showDate = ref(false);
  const pickerDateValue = ref(Date.now());

  onLoad(options => {
    if (options.id) {
      repairId.value = options.id;
    }
    getPageParams();
  });

  // 设备选项
  const deviceOptions = ref([]);
@@ -184,9 +205,12 @@
    repairTime: dayjs().format("YYYY-MM-DD"), // 报修日期
    repairName: undefined, // 报修人
    maintenanceName: undefined, // 维修人
    maintenanceProject: undefined, // 维修项目
    machineryCategory: undefined, // 维修项目
    remark: undefined, // 故障现象
    storageBlobDTOs: [], // 图片附件
  });

  const fileList = ref([]);

  // 报修状态选项
  const repairStatusOptions = ref([
@@ -238,8 +262,18 @@
          form.value.repairTime = dayjs(data.repairTime).format("YYYY-MM-DD");
          form.value.repairName = data.repairName;
          form.value.maintenanceName = data.maintenanceName;
          form.value.maintenanceProject = data.maintenanceProject;
          form.value.machineryCategory = data.machineryCategory;
          form.value.remark = data.remark;
          form.value.storageBlobDTOs = data.storageBlobVOs || [];
          // 设置图片列表显示
          if (data.storageBlobVOs && data.storageBlobVOs.length > 0) {
            fileList.value = data.storageBlobVOs.map(item => ({
              url: item.url,
              name: item.name,
              status: "success",
              message: "",
            }));
          }
          repairStatusText.value =
            repairStatusOptions.value.find(item => item.value == data.status)
              ?.name || "";
@@ -345,15 +379,101 @@
    showDate.value = false;
  };

  // 图片上传后的处理
  const afterRead = async event => {
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList.value.length;
    lists.map(item => {
      fileList.value.push({
        ...item,
        status: "uploading",
        message: "上传中",
      });
    });
    for (let i = 0; i < lists.length; i++) {
      try {
        const result = await uploadFilePromise(lists[i].url);
        let item = fileList.value[fileListLen];
        fileList.value.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.url,
            name: result.name,
          })
        );
        // 同步到表单数据
        form.value.storageBlobDTOs.push(result);
        fileListLen++;
      } catch (e) {
        let item = fileList.value[fileListLen];
        fileList.value.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "failed",
            message: "上传失败",
          })
        );
        showToast(typeof e === "string" ? e : "上传失败");
      }
    }
  };

  const uploadFilePromise = url => {
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        url: config.baseUrl + "/common/upload",
        filePath: url,
        name: "files",
        header: {
          Authorization: "Bearer " + getToken(),
        },
        success: res => {
          try {
            const data = JSON.parse(res.data);
            if (data.code === 200) {
              // 如果返回的是数组，取第一个元素，避免嵌套数组
              const resultData = Array.isArray(data.data)
                ? data.data[0]
                : data.data;

              // 如果 url 为空且 previewURL 存在，则处理 previewURL 赋值给 url
              if (!resultData.url && resultData.previewURL) {
                resultData.url = resultData.previewURL;
              }
              resultData.name = resultData.originalFilename;

              resolve(resultData);
            } else {
              reject(data.msg || "上传失败");
            }
          } catch (e) {
            reject("解析响应失败");
          }
        },
        fail: err => {
          reject(err);
        },
      });
    });
  };

  const deleteFile = event => {
    fileList.value.splice(event.index, 1);
    form.value.storageBlobDTOs.splice(event.index, 1);
  };

  onShow(() => {
    // 页面显示时获取参数
    getPageParams();
    // 页面显示时逻辑
  });

  onMounted(() => {
    // 页面加载时获取设备列表和参数
    // 页面加载时获取设备列表
    loadDeviceName();
    getPageParams();
  });

  // 组件卸载时清理定时器
@@ -393,7 +513,6 @@

      // 准备提交数据
      const submitData = { ...form.value };

      const { code } = id
        ? await editRepair({ id: id, ...submitData })
        : await addRepair(submitData);
@@ -414,21 +533,15 @@

  // 返回上一页
  const goBack = () => {
    uni.removeStorageSync("repairId");
    uni.navigateBack();
  };

  // 获取页面参数
  const getPageParams = () => {
    // 使用uni.getStorageSync获取id
    const id = uni.getStorageSync("repairId");

    // 根据是否有id参数来判断是新增还是编辑
    if (id) {
    if (repairId.value) {
      // 编辑模式，获取详情
      loadForm(id);
      // 可选：获取后清除存储的id，避免影响后续操作
      uni.removeStorageSync("repairId");
      loadForm(repairId.value);
    } else {
      // 新增模式
      loadForm();
@@ -437,9 +550,7 @@

  // 获取页面ID
  const getPageId = () => {
    // 使用uni.getStorageSync获取id
    const id = uni.getStorageSync("repairId");
    return id;
    return repairId.value;
  };
</script>


 src/pages/equipmentManagement/repair/index.vue

@@ -63,7 +63,7 @@
            </view>
            <view class="detail-row">
              <text class="detail-label">维修项目</text>
              <text class="detail-value">{{ item.maintenanceProject || '-' }}</text>
              <text class="detail-value">{{ item.machineryCategory || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">故障现象</text>
@@ -212,9 +212,9 @@
  const edit = id => {
    if (!id) return;
    // 使用uni.setStorageSync存储id
    uni.setStorageSync("repairId", id);
    // uni.setStorageSync("repairId", id);
    uni.navigateTo({
      url: "/pages/equipmentManagement/repair/add",
      url: "/pages/equipmentManagement/repair/add?id=" + id,
    });
  };


 src/pages/equipmentManagement/upkeep/add.vue

@@ -1,413 +1,435 @@
<template>
    <view class="upkeep-add">
        <!-- 使用通用页面头部组件 -->
        <PageHeader :title="operationType === 'edit' ? '编辑保养计划' : '新增保养计划'" @back="goBack" />
		
        <!-- 表单内容 -->
        <u-form ref="formRef" :model="form" :rules="formRules" label-width="110px">
            <!-- 基本信息 -->
            <u-form-item label="设备名称" prop="deviceNameText" required border-bottom>
                <u-input
                    v-model="form.deviceNameText"
                    placeholder="请选择设备名称"
                    readonly
                    @click="showDevicePicker"
                    clearable
                />
                <template #right>
                    <u-icon name="scan" @click="startScan" class="scan-icon" />
                </template>
            </u-form-item>
			
            <u-form-item label="规格型号" prop="deviceModel" border-bottom>
                <u-input
                    v-model="form.deviceModel"
                    placeholder="请输入规格型号"
                    readonly
                    clearable
                />
            </u-form-item>
			
            <u-form-item label="计划保养日期" prop="maintenancePlanTime" required border-bottom>
                <u-input
                    v-model="form.maintenancePlanTime"
                    placeholder="请选择计划保养日期"
                    readonly
                    @click="showDatePicker"
                    clearable
                />
                <template #right>
                    <u-icon name="arrow-right" @click="showDatePicker" />
                </template>
            </u-form-item>
			
            <u-form-item label="保养人" prop="maintenancePerson" border-bottom>
                <u-input
                    v-model="form.maintenancePerson"
                    placeholder="请输入保养人"
                    clearable
                />
            </u-form-item>
			
            <u-form-item label="保养项目" prop="maintenanceProject" border-bottom>
                <u-input
                    v-model="form.maintenanceProject"
                    placeholder="请输入保养项目"
                    clearable
                />
            </u-form-item>
			
            <!-- 提交按钮 -->
            <view class="footer-btns">
                <u-button class="cancel-btn" @click="goBack">取消</u-button>
                <u-button class="save-btn" @click="sendForm" :loading="loading">保存</u-button>
            </view>
        </u-form>

        <!-- 设备选择器 -->
        <up-action-sheet
            :show="showDevice"
            :actions="deviceActions"
            title="选择设备"
            @select="onDeviceConfirm"
            @close="showDevice = false"
        />
<up-datetime-picker
            :show="showDate"
            v-model="pickerDateValue"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
            mode="date"
        />
	
    </view>
  <view class="upkeep-add">
    <!-- 使用通用页面头部组件 -->
    <PageHeader :title="operationType === 'edit' ? '编辑保养计划' : '新增保养计划'"
                @back="goBack" />
    <!-- 表单内容 -->
    <u-form ref="formRef"
            :model="form"
            :rules="formRules"
            label-width="110px">
      <!-- 基本信息 -->
      <u-form-item label="设备名称"
                   prop="deviceNameText"
                   required
                   border-bottom>
        <u-input v-model="form.deviceNameText"
                 placeholder="请选择设备名称"
                 readonly
                 @click="showDevicePicker"
                 clearable />
        <template #right>
          <u-icon name="scan"
                  @click="startScan"
                  class="scan-icon" />
        </template>
      </u-form-item>
      <u-form-item label="规格型号"
                   prop="deviceModel"
                   border-bottom>
        <u-input v-model="form.deviceModel"
                 placeholder="请输入规格型号"
                 readonly
                 clearable />
      </u-form-item>
      <u-form-item label="计划保养日期"
                   prop="maintenancePlanTime"
                   required
                   border-bottom>
        <u-input v-model="form.maintenancePlanTime"
                 placeholder="请选择计划保养日期"
                 readonly
                 @click="showDatePicker"
                 clearable />
        <template #right>
          <u-icon name="arrow-right"
                  @click="showDatePicker" />
        </template>
      </u-form-item>
      <u-form-item label="保养人"
                   prop="maintenancePerson"
                   border-bottom>
        <u-input v-model="form.maintenancePerson"
                 placeholder="请输入保养人"
                 clearable />
      </u-form-item>
      <u-form-item label="保养项目"
                   prop="machineryCategory"
                   border-bottom>
        <u-input v-model="form.machineryCategory"
                 placeholder="请输入保养项目"
                 clearable />
      </u-form-item>
      <!-- 提交按钮 -->
      <view class="footer-btns">
        <u-button class="cancel-btn"
                  @click="goBack">取消</u-button>
        <u-button class="save-btn"
                  @click="sendForm"
                  :loading="loading">保存</u-button>
      </view>
    </u-form>
    <!-- 设备选择器 -->
    <up-action-sheet :show="showDevice"
                     :actions="deviceActions"
                     title="选择设备"
                     @select="onDeviceConfirm"
                     @close="showDevice = false" />
    <up-datetime-picker :show="showDate"
                        v-model="pickerDateValue"
                        @confirm="onDateConfirm"
                        @cancel="showDate = false"
                        mode="date" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PageHeader from '@/components/PageHeader.vue';
import { getDeviceLedger } from '@/api/equipmentManagement/ledger';
import { addUpkeep, editUpkeep, getUpkeepById } from '@/api/equipmentManagement/upkeep';
import dayjs from "dayjs";
import { formatDateToYMD } from '@/utils/ruoyi';
  import { ref, computed, onMounted, onUnmounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
  import {
    addUpkeep,
    editUpkeep,
    getUpkeepById,
  } from "@/api/equipmentManagement/upkeep";
  import dayjs from "dayjs";
  import { formatDateToYMD } from "@/utils/ruoyi";

defineOptions({
    name: "设备保养计划表单",
});
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}
  defineOptions({
    name: "设备保养计划表单",
  });
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };

// 表单引用
const formRef = ref(null);
const operationType = ref('add');
const loading = ref(false);
const showDevice = ref(false);
const showDate = ref(false);
const pickerDateValue = ref(Date.now());
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
  // 表单引用
  const formRef = ref(null);
  const operationType = ref("add");
  const loading = ref(false);
  const showDevice = ref(false);
  const showDate = ref(false);
  const pickerDateValue = ref(Date.now());
  const currentDate = ref([
    new Date().getFullYear(),
    new Date().getMonth() + 1,
    new Date().getDate(),
  ]);

// 设备选项
const deviceOptions = ref([]);
const deviceNameText = ref('');
// 转换为 action-sheet 需要的格式
const deviceActions = computed(() => {
    return deviceOptions.value.map(item => ({
        text: item.deviceName,
        value: item.id,
        data: item
    }));
});
  // 设备选项
  const deviceOptions = ref([]);
  const deviceNameText = ref("");
  // 转换为 action-sheet 需要的格式
  const deviceActions = computed(() => {
    return deviceOptions.value.map(item => ({
      text: item.deviceName,
      value: item.id,
      data: item,
    }));
  });

// 扫码相关状态
const isScanning = ref(false);
const scanTimer = ref(null);
  // 扫码相关状态
  const isScanning = ref(false);
  const scanTimer = ref(null);

// 表单验证规则
const formRules = {
    deviceLedgerId: [{ required: true, trigger: "change", message: "请选择设备名称" }],
    maintenancePlanTime: [{ required: true, trigger: "change", message: "请选择计划保养日期" }],
};
  // 表单验证规则
  const formRules = {
    deviceLedgerId: [
      { required: true, trigger: "change", message: "请选择设备名称" },
    ],
    maintenancePlanTime: [
      { required: true, trigger: "change", message: "请选择计划保养日期" },
    ],
  };

// 使用 ref 声明表单数据
const form = ref({
    deviceLedgerId: undefined, // 设备ID
    deviceModel: undefined, // 规格型号
    maintenancePlanTime: dayjs().format("YYYY-MM-DD"), // 计划保养日期
    maintenancePerson: undefined, // 保养人
    maintenanceProject: undefined, // 保养项目
});
  // 使用 ref 声明表单数据
  const form = ref({
    deviceLedgerId: undefined, // 设备ID
    deviceModel: undefined, // 规格型号
    maintenancePlanTime: dayjs().format("YYYY-MM-DD"), // 计划保养日期
    maintenancePerson: undefined, // 保养人
    machineryCategory: undefined, // 保养项目
  });

// 加载设备列表
const loadDeviceName = async () => {
    try {
        const { data } = await getDeviceLedger();
        deviceOptions.value = data || [];
    } catch (e) {
        showToast('获取设备列表失败');
    }
};
  // 加载设备列表
  const loadDeviceName = async () => {
    try {
      const { data } = await getDeviceLedger();
      deviceOptions.value = data || [];
    } catch (e) {
      showToast("获取设备列表失败");
    }
  };

// 加载表单数据（编辑模式）
const loadForm = async (id) => {
    if (id) {
        operationType.value = 'edit';
        try {
            const { code, data } = await getUpkeepById(id);
            if (code == 200) {
                form.value.deviceLedgerId = data.deviceLedgerId;
            form.value.deviceModel = data.deviceModel;
            form.value.maintenancePlanTime = dayjs(data.maintenancePlanTime).format("YYYY-MM-DD");
            form.value.maintenancePerson = data.maintenancePerson;
            form.value.maintenanceProject = data.maintenanceProject;
            // 设置设备名称显示
            const device = deviceOptions.value.find(item => item.id === data.deviceLedgerId);
            if (device) {
                form.value.deviceNameText = device.deviceName;
            }
            }
        } catch (e) {
            showToast('获取详情失败');
        }
    } else {
        // 新增模式
        operationType.value = 'add';
    }
};
  // 加载表单数据（编辑模式）
  const loadForm = async id => {
    if (id) {
      operationType.value = "edit";
      try {
        const { code, data } = await getUpkeepById(id);
        if (code == 200) {
          form.value.deviceLedgerId = data.deviceLedgerId;
          form.value.deviceModel = data.deviceModel;
          form.value.maintenancePlanTime = dayjs(data.maintenancePlanTime).format(
            "YYYY-MM-DD"
          );
          form.value.maintenancePerson = data.maintenancePerson;
          form.value.machineryCategory = data.machineryCategory;
          // 设置设备名称显示
          const device = deviceOptions.value.find(
            item => item.id === data.deviceLedgerId
          );
          if (device) {
            form.value.deviceNameText = device.deviceName;
          }
        }
      } catch (e) {
        showToast("获取详情失败");
      }
    } else {
      // 新增模式
      operationType.value = "add";
    }
  };

// 扫描二维码功能
const startScan = () => {
    if (isScanning.value) {
        showToast('正在扫描中，请稍候...');
        return;
    }
	
    // 调用uni-app的扫码API
    uni.scanCode({
        scanType: ['qrCode', 'barCode'],
        success: (res) => {
            handleScanResult(res.result);
        },
        fail: (err) => {
            console.error('扫码失败:', err);
            showToast('扫码失败，请重试');
        }
    });
};
  // 扫描二维码功能
  const startScan = () => {
    if (isScanning.value) {
      showToast("正在扫描中，请稍候...");
      return;
    }

// 处理扫码结果
const handleScanResult = (scanResult) => {
    if (!scanResult) {
        showToast('扫码结果为空');
        return;
    }
	
    isScanning.value = true;
    showToast('扫码成功');
	
    // 3秒后处理扫码结果
    scanTimer.value = setTimeout(() => {
        processScanResult(scanResult);
        isScanning.value = false;
    }, 1000);
};
function getDeviceIdByRegExp(url) {
    // 匹配deviceId=后面的数字
    const reg = /deviceId=(\d+)/;
    const match = url.match(reg);
    // 如果匹配到结果，返回数字类型，否则返回null
    return match ? Number(match[1]) : null;
}
// 处理扫码结果并匹配设备
const processScanResult = (scanResult) => {
    const deviceId = getDeviceIdByRegExp(scanResult);
    const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);
	
    if (matchedDevice) {
        // 找到匹配的设备，自动填充
        form.value.deviceLedgerId = matchedDevice.id;
        form.value.deviceNameText = matchedDevice.deviceName;
        form.value.deviceModel = matchedDevice.deviceModel;
        showToast('设备信息已自动填充');
    } else {
        // 未找到匹配的设备
        showToast('未找到匹配的设备，请手动选择');
    }
};
    // 调用uni-app的扫码API
    uni.scanCode({
      scanType: ["qrCode", "barCode"],
      success: res => {
        handleScanResult(res.result);
      },
      fail: err => {
        console.error("扫码失败:", err);
        showToast("扫码失败，请重试");
      },
    });
  };

// 显示设备选择器
const showDevicePicker = () => {
    showDevice.value = true;
};
  // 处理扫码结果
  const handleScanResult = scanResult => {
    if (!scanResult) {
      showToast("扫码结果为空");
      return;
    }

// 确认设备选择
const onDeviceConfirm = (selected) => {
    // selected 返回的是选中项
    form.value.deviceLedgerId = selected.value;
        form.value.deviceNameText = selected.name;
    const selectedDevice = deviceOptions.value.find(item => item.id === selected.value);
    if (selectedDevice) {
        form.value.deviceModel = selectedDevice.deviceModel;
    }
    showDevice.value = false;
};
    isScanning.value = true;
    showToast("扫码成功");

// 显示日期选择器
const showDatePicker = () => {
    showDate.value = true;
};
    // 3秒后处理扫码结果
    scanTimer.value = setTimeout(() => {
      processScanResult(scanResult);
      isScanning.value = false;
    }, 1000);
  };
  function getDeviceIdByRegExp(url) {
    // 匹配deviceId=后面的数字
    const reg = /deviceId=(\d+)/;
    const match = url.match(reg);
    // 如果匹配到结果，返回数字类型，否则返回null
    return match ? Number(match[1]) : null;
  }
  // 处理扫码结果并匹配设备
  const processScanResult = scanResult => {
    const deviceId = getDeviceIdByRegExp(scanResult);
    const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);

// 确认日期选择
const onDateConfirm = (e) => {
    form.value.maintenancePlanTime = formatDateToYMD(e.value);
    showDate.value = false;
};
    if (matchedDevice) {
      // 找到匹配的设备，自动填充
      form.value.deviceLedgerId = matchedDevice.id;
      form.value.deviceNameText = matchedDevice.deviceName;
      form.value.deviceModel = matchedDevice.deviceModel;
      showToast("设备信息已自动填充");
    } else {
      // 未找到匹配的设备
      showToast("未找到匹配的设备，请手动选择");
    }
  };

onShow(() => {
    // 页面显示时获取参数
    getPageParams();
});
  // 显示设备选择器
  const showDevicePicker = () => {
    showDevice.value = true;
  };

onMounted(() => {
    // 页面加载时获取设备列表和参数
    loadDeviceName();
    getPageParams();
});
  // 确认设备选择
  const onDeviceConfirm = selected => {
    // selected 返回的是选中项
    form.value.deviceLedgerId = selected.value;
    form.value.deviceNameText = selected.name;
    const selectedDevice = deviceOptions.value.find(
      item => item.id === selected.value
    );
    if (selectedDevice) {
      form.value.deviceModel = selectedDevice.deviceModel;
    }
    showDevice.value = false;
  };

// 组件卸载时清理定时器
onUnmounted(() => {
    if (scanTimer.value) {
        clearTimeout(scanTimer.value);
    }
});
  // 显示日期选择器
  const showDatePicker = () => {
    showDate.value = true;
  };

// 提交表单
const sendForm = async () => {
    try {
        // 手动验证表单
        const valid = await formRef.value.validate();
        if (!valid) return;
		
        loading.value = true;
        const id = getPageId();
		
        // 准备提交数据
        const submitData = { ...form.value };
        // 确保日期格式正确
        if (submitData.maintenancePlanTime && !submitData.maintenancePlanTime.includes(':')) {
            submitData.maintenancePlanTime = submitData.maintenancePlanTime + ' 00:00:00';
        }
		
        const { code } = id
            ? await editUpkeep({ id: id, ...submitData })
            : await addUpkeep(submitData);
		
        if (code == 200) {
            showToast(`${id ? "编辑" : "新增"}计划成功`);
            setTimeout(() => {
                uni.navigateBack();
            }, 1500);
        } else {
            loading.value = false;
        }
    } catch (e) {
        loading.value = false;
        showToast('表单验证失败');
    }
};
  // 确认日期选择
  const onDateConfirm = e => {
    form.value.maintenancePlanTime = formatDateToYMD(e.value);
    showDate.value = false;
  };

// 返回上一页
const goBack = () => {
    // 清除存储的id
    uni.removeStorageSync('repairId');
    uni.navigateBack();
};
  onShow(() => {
    // 页面显示时获取参数
    getPageParams();
  });

// 获取页面参数
const getPageParams = () => {
    // 从本地存储获取id
    const id = uni.getStorageSync('repairId');
	
    // 根据是否有id参数来判断是新增还是编辑
    if (id) {
        // 编辑模式，获取详情
        loadForm(id);
    } else {
        // 新增模式
        loadForm();
    }
};
  onMounted(() => {
    // 页面加载时获取设备列表和参数
    loadDeviceName();
    getPageParams();
  });

// 获取页面ID
const getPageId = () => {
    // 从本地存储获取id
    return uni.getStorageSync('repairId');
};
  // 组件卸载时清理定时器
  onUnmounted(() => {
    if (scanTimer.value) {
      clearTimeout(scanTimer.value);
    }
  });

  // 提交表单
  const sendForm = async () => {
    try {
      // 手动验证表单
      const valid = await formRef.value.validate();
      if (!valid) return;

      loading.value = true;
      const id = getPageId();

      // 准备提交数据
      const submitData = { ...form.value };
      // 确保日期格式正确
      if (
        submitData.maintenancePlanTime &&
        !submitData.maintenancePlanTime.includes(":")
      ) {
        submitData.maintenancePlanTime =
          submitData.maintenancePlanTime + " 00:00:00";
      }

      const { code } = id
        ? await editUpkeep({ id: id, ...submitData })
        : await addUpkeep(submitData);

      if (code == 200) {
        showToast(`${id ? "编辑" : "新增"}计划成功`);
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        loading.value = false;
      }
    } catch (e) {
      loading.value = false;
      showToast("表单验证失败");
    }
  };

  // 返回上一页
  const goBack = () => {
    // 清除存储的id
    uni.removeStorageSync("repairId");
    uni.navigateBack();
  };

  // 获取页面参数
  const getPageParams = () => {
    // 从本地存储获取id
    const id = uni.getStorageSync("repairId");

    // 根据是否有id参数来判断是新增还是编辑
    if (id) {
      // 编辑模式，获取详情
      loadForm(id);
    } else {
      // 新增模式
      loadForm();
    }
  };

  // 获取页面ID
  const getPageId = () => {
    // 从本地存储获取id
    return uni.getStorageSync("repairId");
  };
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
.upkeep-add {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 5rem;
}
  @import "@/static/scss/form-common.scss";
  .upkeep-add {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 5rem;
  }

.footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
    z-index: 1000;
}
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

.cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 6.375rem;
    background: #C7C9CC;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 6.375rem;
    background: #c7c9cc;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

.save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 14rem;
    background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 14rem;
    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

// 响应式调整
@media (max-width: 768px) {
    .submit-section {
        padding: 12px;
    }
}
  // 响应式调整
  @media (max-width: 768px) {
    .submit-section {
      padding: 12px;
    }
  }

.tip-text { 
    padding: 4px 16px 0 16px; 
    font-size: 12px; 
    color: #888; 
}
  .tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
  }

.scan-icon {
    color: #1989fa;
    font-size: 18px;
    margin-left: 8px;
    cursor: pointer;
}
  .scan-icon {
    color: #1989fa;
    font-size: 18px;
    margin-left: 8px;
    cursor: pointer;
  }
</style>

 src/pages/equipmentManagement/upkeep/index.vue

@@ -68,7 +68,7 @@
            </view>
            <view class="detail-row">
              <text class="detail-label">保养项目</text>
              <text class="detail-value">{{ item.maintenanceProject || '-' }}</text>
              <text class="detail-value">{{ item.machineryCategory || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">实际保养人</text>