设备维修添加维修状态

zhangwencui

2 天以前 d3fe17c4cc5ae2dda4e2c1cfd5c506faa74f6a0d

 src/pages/equipmentManagement/repair/add.vue

@@ -1,103 +1,129 @@
<template>
   <view class="repair-add">
      <!-- 使用通用页面头部组件 -->
      <PageHeader :title="operationType === 'edit' ? '编辑报修' : '新增报修'" @back="goBack" />
		
    <PageHeader :title="operationType === 'edit' ? '编辑报修' : '新增报修'"
                @back="goBack" />
      <!-- 表单内容 -->
      <u-form @submit="sendForm" ref="formRef" :rules="formRules" :model="form" label-width="110">
    <u-form @submit="sendForm"
            ref="formRef"
            :rules="formRules"
            :model="form"
            label-width="110">
         <!-- 基本信息 -->
         <u-cell-group title="基本信息">
            <u-form-item label="设备名称" prop="deviceLedgerId" required border-bottom>
               <u-input
                  v-model="deviceNameText"
        <u-form-item label="设备名称"
                     prop="deviceLedgerId"
                     required
                     border-bottom>
          <u-input v-model="deviceNameText"
                  placeholder="请选择设备名称"
                  @click="showDevicePicker"
                  clearable
                  readonly=""
               />
                   readonly="" />
               <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="请输入规格型号"
                  clearable
               />
                   clearable />
            </u-form-item>
            <u-form-item label="报修日期" prop="repairTime" required border-bottom>
               <u-input
                  v-model="form.repairTime"
        <u-form-item label="报修日期"
                     prop="repairTime"
                     required
                     border-bottom>
          <u-input v-model="form.repairTime"
                  placeholder="请选择报修日期"
                  readonly
                  @click="showDatePicker"
                  clearable
               />
                   clearable />
               <template #right>
                  <u-icon name="arrow-right" @click="showDatePicker"></u-icon>
            <u-icon name="arrow-right"
                    @click="showDatePicker"></u-icon>
               </template>
            </u-form-item>
            <u-form-item label="报修人" prop="repairName" required border-bottom>
               <u-input
                  v-model="form.repairName"
                  placeholder="请输入报修人"
                  clearable
               />
        <u-form-item label="报修状态"
                     prop="repairTime"
                     required
                     border-bottom>
          <u-input v-model="repairStatusText"
                   placeholder="请选择报修状态"
                   readonly
                   @click="openRepairStatusPicker"
                   clearable />
          <template #right>
            <u-icon name="arrow-right"
                    @click="openRepairStatusPicker"></u-icon>
          </template>
            </u-form-item>
            <u-form-item label="故障现象" prop="remark" required border-bottom>
               <u-textarea
                  v-model="form.remark"
        <u-form-item label="报修人"
                     prop="repairName"
                     required
                     border-bottom>
          <u-input v-model="form.repairName"
                   placeholder="请输入报修人"
                   clearable />
        </u-form-item>
        <u-form-item label="故障现象"
                     prop="remark"
                     required
                     border-bottom>
          <u-textarea v-model="form.remark"
                  rows="3"
                  placeholder="请输入故障现象"
                  clearable
                  count
                  maxlength="200"
               />
                      maxlength="200" />
            </u-form-item>
         </u-cell-group>
			
         <!-- 提交按钮 -->
         <view class="footer-btns">
            <u-button class="cancel-btn" @click="goBack">取消</u-button>
            <u-button class="save-btn" type="primary" @click="sendForm" :loading="loading">保存</u-button>
        <u-button class="cancel-btn"
                  @click="goBack">取消</u-button>
        <u-button class="save-btn"
                  type="primary"
                  @click="sendForm"
                  :loading="loading">保存</u-button>
         </view>
      </u-form>

      <!-- 设备选择器 -->
      <up-action-sheet
         :show="showDevice"
    <up-action-sheet :show="showDevice"
         :actions="deviceActionList"
         title="选择设备名称"
         @select="onDeviceSelect"
         @close="showDevice = false"
      />

                     @close="showDevice = false" />
      <!-- 日期选择器 -->
      <up-datetime-picker
         :show="showDate"
    <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 { addRepair, editRepair, getRepairById } from '@/api/equipmentManagement/repair';
  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 {
    addRepair,
    editRepair,
    getRepairById,
  } from "@/api/equipmentManagement/repair";
import dayjs from "dayjs";
import { formatDateToYMD } from '@/utils/ruoyi';
const showToast = (message) => {
  import { formatDateToYMD } from "@/utils/ruoyi";
  const showToast = message => {
   uni.showToast({
      title: message,
      icon: 'none'
   })
}
      icon: "none",
    });
  };

defineOptions({
   name: "设备报修表单",
@@ -105,7 +131,7 @@

// 表单引用
const formRef = ref(null);
const operationType = ref('add');
  const operationType = ref("add");
const loading = ref(false);
const showDevice = ref(false);
const showDate = ref(false);
@@ -113,11 +139,11 @@

// 设备选项
const deviceOptions = ref([]);
const deviceNameText = ref('');
  const deviceNameText = ref("");
const deviceActionList = computed(() => {
   return deviceOptions.value.map(item => ({
      name: item.deviceName,
      value: item.id
      value: item.id,
   }));
});

@@ -127,8 +153,12 @@

// 表单验证规则
const formRules = {
   deviceLedgerId: [{ required: true, trigger: "change", message: "请选择设备名称" }],
   repairTime: [{ required: true, trigger: "change", message: "请选择报修日期" }],
    deviceLedgerId: [
      { required: true, trigger: "change", message: "请选择设备名称" },
    ],
    repairTime: [
      { required: true, trigger: "change", message: "请选择报修日期" },
    ],
   repairName: [{ required: true, trigger: "blur", message: "请输入报修人" }],
   remark: [{ required: true, trigger: "blur", message: "请输入故障现象" }],
};
@@ -142,19 +172,38 @@
   remark: undefined, // 故障现象
});

  // 报修状态选项
  const repairStatusOptions = ref([
    { name: "待维修", value: "0" },
    { name: "完结", value: "1" },
    { name: "失败", value: "2" },
  ]);
  const repairStatusText = ref("");

  // 打开报修状态选择器
  const openRepairStatusPicker = () => {
    uni.showActionSheet({
      itemList: repairStatusOptions.value.map(item => item.name),
      success: res => {
        form.value.status = repairStatusOptions.value[res.tapIndex].value;
        repairStatusText.value = repairStatusOptions.value[res.tapIndex].name;
      },
    });
  };

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

// 设置设备规格型号
const setDeviceModel = (id) => {
   const option = deviceOptions.value.find((item) => item.id === id);
  const setDeviceModel = id => {
    const option = deviceOptions.value.find(item => item.id === id);
   if (option) {
      form.value.deviceModel = option.deviceModel;
      deviceNameText.value = option.deviceName;
@@ -162,9 +211,9 @@
};

// 加载表单数据（编辑模式）
const loadForm = async (id) => {
  const loadForm = async id => {
   if (id) {
      operationType.value = 'edit';
      operationType.value = "edit";
      try {
         const { code, data } = await getRepairById(id);
         if (code == 200) {
@@ -173,50 +222,55 @@
            form.value.repairTime = dayjs(data.repairTime).format("YYYY-MM-DD");
            form.value.repairName = data.repairName;
            form.value.remark = data.remark;
          repairStatusText.value =
            repairStatusOptions.value.find(item => item.value == data.status)
              ?.name || "";
            // 设置设备名称显示
            const device = deviceOptions.value.find(item => item.id === data.deviceLedgerId);
          const device = deviceOptions.value.find(
            item => item.id === data.deviceLedgerId
          );
            if (device) {
               deviceNameText.value = 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(() => {
@@ -233,7 +287,7 @@
}

// 处理扫码结果并匹配设备
const processScanResult = (scanResult) => {
  const processScanResult = scanResult => {
   const deviceId = getDeviceIdByRegExp(scanResult);
   const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);
   
@@ -242,10 +296,10 @@
      form.value.deviceLedgerId = matchedDevice.id;
      deviceNameText.value = matchedDevice.deviceName;
      form.value.deviceModel = matchedDevice.deviceModel;
      showToast('设备信息已自动填充');
      showToast("设备信息已自动填充");
   } else {
      // 未找到匹配的设备
      showToast('未找到匹配的设备，请手动选择');
      showToast("未找到匹配的设备，请手动选择");
   }
};

@@ -255,7 +309,7 @@
};

// 确认设备选择
const onDeviceSelect = (e) => {
  const onDeviceSelect = e => {
   form.value.deviceLedgerId = e.value;
   setDeviceModel(e.value);
   showDevice.value = false;
@@ -267,7 +321,7 @@
};

// 确认日期选择
const onDateConfirm = (e) => {
  const onDateConfirm = e => {
   form.value.repairTime = formatDateToYMD(e.value);
   pickerDateValue.value = dayjs(e.value).format("YYYY-MM-DD");
   showDate.value = false;
@@ -296,19 +350,19 @@
   try {
      // 手动验证表单
      let isValid = true;
      let errorMessage = '';
      let errorMessage = "";
      if (!form.value.deviceLedgerId) {
         isValid = false;
         errorMessage = '请选择设备名称';
      } else if (!form.value.repairTime || form.value.repairTime.trim() === '') {
        errorMessage = "请选择设备名称";
      } else if (!form.value.repairTime || form.value.repairTime.trim() === "") {
         isValid = false;
         errorMessage = '请选择报修日期';
      } else if (!form.value.repairName || form.value.repairName.trim() === '') {
        errorMessage = "请选择报修日期";
      } else if (!form.value.repairName || form.value.repairName.trim() === "") {
         isValid = false;
         errorMessage = '请输入报修人';
      } else if (!form.value.remark || form.value.remark.trim() === '') {
        errorMessage = "请输入报修人";
      } else if (!form.value.remark || form.value.remark.trim() === "") {
         isValid = false;
         errorMessage = '请输入故障现象';
        errorMessage = "请输入故障现象";
      }

      if (!isValid) {
@@ -336,27 +390,27 @@
      }
   } catch (e) {
      loading.value = false;
      showToast('表单验证失败');
      showToast("表单验证失败");
   }
};

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

// 获取页面参数
const getPageParams = () => {
   // 使用uni.getStorageSync获取id
   const id = uni.getStorageSync('repairId');
    const id = uni.getStorageSync("repairId");
   
   // 根据是否有id参数来判断是新增还是编辑
   if (id) {
      // 编辑模式，获取详情
      loadForm(id);
      // 可选：获取后清除存储的id，避免影响后续操作
      uni.removeStorageSync('repairId');
      uni.removeStorageSync("repairId");
   } else {
      // 新增模式
      loadForm();
@@ -366,13 +420,13 @@
// 获取页面ID
const getPageId = () => {
   // 使用uni.getStorageSync获取id
   const id = uni.getStorageSync('repairId');
    const id = uni.getStorageSync("repairId");
   return id;
};
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
  @import "@/static/scss/form-common.scss";
.repair-add {
   min-height: 100vh;
   background: #f8f9fa;
@@ -396,9 +450,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;
}
@@ -406,9 +460,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;
}