yyb
2026-05-16 4039f4dce566ffddf444bed260906acdff0b164f
src/pages/equipmentManagement/upkeep/add.vue
@@ -1,125 +1,133 @@
<template>
   <view class="upkeep-add">
      <!-- 使用通用页面头部组件 -->
      <PageHeader :title="operationType === 'edit' ? '编辑保养计划' : '新增保养计划'" @back="goBack" />
    <PageHeader :title="operationType === 'edit' ? '编辑保养计划' : '新增保养计划'"
                @back="goBack" />
      <!-- 表单内容 -->
      <u-form ref="formRef" :model="form" :rules="formRules" label-width="110px">
    <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"
      <u-form-item label="设备名称"
                   prop="deviceNameText"
                   required
                   border-bottom>
        <u-input v-model="form.deviceNameText"
               placeholder="请选择设备名称"
               readonly
               @click="showDevicePicker"
               clearable
            />
                 clearable />
            <template #right>
               <u-icon name="scan" @click="startScan" class="scan-icon" />
          <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"
      <u-form-item label="规格型号"
                   prop="deviceModel"
                   border-bottom>
        <u-input v-model="form.deviceModel"
               placeholder="请输入规格型号"
               readonly
               clearable
            />
                 clearable />
         </u-form-item>
         <u-form-item label="计划保养日期" prop="maintenancePlanTime" required border-bottom>
            <u-input
               v-model="form.maintenancePlanTime"
      <u-form-item label="计划保养日期"
                   prop="maintenancePlanTime"
                   required
                   border-bottom>
        <u-input v-model="form.maintenancePlanTime"
               placeholder="请选择计划保养日期"
               readonly
               @click="showDatePicker"
               clearable
            />
                 clearable />
            <template #right>
               <u-icon name="arrow-right" @click="showDatePicker" />
          <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"
      <u-form-item label="保养人"
                   prop="maintenancePerson"
                   border-bottom>
        <u-input v-model="form.maintenancePerson"
               placeholder="请输入保养人"
               clearable
            />
                 clearable />
         </u-form-item>
         <u-form-item label="保养项目" prop="maintenanceProject" border-bottom>
            <u-input
               v-model="form.maintenanceProject"
      <u-form-item label="保养项目"
                   prop="machineryCategory"
                   border-bottom>
        <u-input v-model="form.machineryCategory"
               placeholder="请输入保养项目"
               clearable
            />
                 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>
        <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"
    <up-action-sheet :show="showDevice"
         :actions="deviceActions"
         title="选择设备"
         @select="onDeviceConfirm"
         @close="showDevice = false"
      />
<up-datetime-picker
         :show="showDate"
                     @close="showDevice = false" />
    <up-datetime-picker :show="showDate"
         v-model="pickerDateValue"
         @confirm="onDateConfirm"
         @cancel="showDate = false"
         mode="date"
      />
                        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 { 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 { formatDateToYMD } from "@/utils/ruoyi";
defineOptions({
   name: "设备保养计划表单",
});
const showToast = (message) => {
  const showToast = message => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}
      icon: "none",
    });
  };
// 表单引用
const formRef = ref(null);
const operationType = ref('add');
  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 currentDate = ref([
    new Date().getFullYear(),
    new Date().getMonth() + 1,
    new Date().getDate(),
  ]);
// 设备选项
const deviceOptions = ref([]);
const deviceNameText = ref('');
  const deviceNameText = ref("");
// 转换为 action-sheet 需要的格式
const deviceActions = computed(() => {
   return deviceOptions.value.map(item => ({
      text: item.deviceName,
      value: item.id,
      data: item
      data: item,
   }));
});
@@ -129,8 +137,12 @@
// 表单验证规则
const formRules = {
   deviceLedgerId: [{ required: true, trigger: "change", message: "请选择设备名称" }],
   maintenancePlanTime: [{ required: true, trigger: "change", message: "请选择计划保养日期" }],
    deviceLedgerId: [
      { required: true, trigger: "change", message: "请选择设备名称" },
    ],
    maintenancePlanTime: [
      { required: true, trigger: "change", message: "请选择计划保养日期" },
    ],
};
// 使用 ref 声明表单数据
@@ -139,7 +151,7 @@
   deviceModel: undefined, // 规格型号
   maintenancePlanTime: dayjs().format("YYYY-MM-DD"), // 计划保养日期
   maintenancePerson: undefined, // 保养人
   maintenanceProject: undefined, // 保养项目
    machineryCategory: undefined, // 保养项目
});
// 加载设备列表
@@ -148,66 +160,70 @@
      const { data } = await getDeviceLedger();
      deviceOptions.value = data || [];
   } catch (e) {
      showToast('获取设备列表失败');
      showToast("获取设备列表失败");
   }
};
// 加载表单数据(编辑模式)
const loadForm = async (id) => {
  const loadForm = async id => {
   if (id) {
      operationType.value = 'edit';
      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.maintenancePlanTime = dayjs(data.maintenancePlanTime).format(
            "YYYY-MM-DD"
          );
         form.value.maintenancePerson = data.maintenancePerson;
         form.value.maintenanceProject = data.maintenanceProject;
          form.value.machineryCategory = data.machineryCategory;
         // 设置设备名称显示
         const device = deviceOptions.value.find(item => item.id === data.deviceLedgerId);
          const device = deviceOptions.value.find(
            item => item.id === data.deviceLedgerId
          );
         if (device) {
            form.value.deviceNameText = device.deviceName;
         }
         }
      } catch (e) {
         showToast('获取详情失败');
        showToast("获取详情失败");
      }
   } else {
      // 新增模式
      operationType.value = 'add';
      operationType.value = "add";
   }
};
// 扫描二维码功能
const startScan = () => {
   if (isScanning.value) {
      showToast('正在扫描中,请稍候...');
      showToast("正在扫描中,请稍候...");
      return;
   }
   
   // 调用uni-app的扫码API
   uni.scanCode({
      scanType: ['qrCode', 'barCode'],
      success: (res) => {
      scanType: ["qrCode", "barCode"],
      success: res => {
         handleScanResult(res.result);
      },
      fail: (err) => {
         console.error('扫码失败:', err);
         showToast('扫码失败,请重试');
      }
      fail: err => {
        console.error("扫码失败:", err);
        showToast("扫码失败,请重试");
      },
   });
};
// 处理扫码结果
const handleScanResult = (scanResult) => {
  const handleScanResult = scanResult => {
   if (!scanResult) {
      showToast('扫码结果为空');
      showToast("扫码结果为空");
      return;
   }
   
   isScanning.value = true;
   showToast('扫码成功');
    showToast("扫码成功");
   
   // 3秒后处理扫码结果
   scanTimer.value = setTimeout(() => {
@@ -223,7 +239,7 @@
   return match ? Number(match[1]) : null;
}
// 处理扫码结果并匹配设备
const processScanResult = (scanResult) => {
  const processScanResult = scanResult => {
   const deviceId = getDeviceIdByRegExp(scanResult);
   const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);
   
@@ -232,10 +248,10 @@
      form.value.deviceLedgerId = matchedDevice.id;
      form.value.deviceNameText = matchedDevice.deviceName;
      form.value.deviceModel = matchedDevice.deviceModel;
      showToast('设备信息已自动填充');
      showToast("设备信息已自动填充");
   } else {
      // 未找到匹配的设备
      showToast('未找到匹配的设备,请手动选择');
      showToast("未找到匹配的设备,请手动选择");
   }
};
@@ -245,11 +261,13 @@
};
// 确认设备选择
const onDeviceConfirm = (selected) => {
  const onDeviceConfirm = selected => {
   // selected 返回的是选中项
   form.value.deviceLedgerId = selected.value;
      form.value.deviceNameText = selected.name;
   const selectedDevice = deviceOptions.value.find(item => item.id === selected.value);
    const selectedDevice = deviceOptions.value.find(
      item => item.id === selected.value
    );
   if (selectedDevice) {
      form.value.deviceModel = selectedDevice.deviceModel;
   }
@@ -262,7 +280,7 @@
};
// 确认日期选择
const onDateConfirm = (e) => {
  const onDateConfirm = e => {
   form.value.maintenancePlanTime = formatDateToYMD(e.value);
   showDate.value = false;
};
@@ -298,8 +316,12 @@
      // 准备提交数据
      const submitData = { ...form.value };
      // 确保日期格式正确
      if (submitData.maintenancePlanTime && !submitData.maintenancePlanTime.includes(':')) {
         submitData.maintenancePlanTime = submitData.maintenancePlanTime + ' 00:00:00';
      if (
        submitData.maintenancePlanTime &&
        !submitData.maintenancePlanTime.includes(":")
      ) {
        submitData.maintenancePlanTime =
          submitData.maintenancePlanTime + " 00:00:00";
      }
      
      const { code } = id
@@ -316,21 +338,21 @@
      }
   } catch (e) {
      loading.value = false;
      showToast('表单验证失败');
      showToast("表单验证失败");
   }
};
// 返回上一页
const goBack = () => {
   // 清除存储的id
   uni.removeStorageSync('repairId');
    uni.removeStorageSync("repairId");
   uni.navigateBack();
};
// 获取页面参数
const getPageParams = () => {
   // 从本地存储获取id
   const id = uni.getStorageSync('repairId');
    const id = uni.getStorageSync("repairId");
   
   // 根据是否有id参数来判断是新增还是编辑
   if (id) {
@@ -345,12 +367,12 @@
// 获取页面ID
const getPageId = () => {
   // 从本地存储获取id
   return uni.getStorageSync('repairId');
    return uni.getStorageSync("repairId");
};
</script>
<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
  @import "@/static/scss/form-common.scss";
.upkeep-add {
   min-height: 100vh;
   background: #f8f9fa;
@@ -374,9 +396,9 @@
.cancel-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
    color: #ffffff;
   width: 6.375rem;
   background: #C7C9CC;
    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;
}
@@ -384,9 +406,9 @@
.save-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
    color: #ffffff;
   width: 14rem;
   background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    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;
}