修改组件

gaoluyang

2025-08-29 5c48ef2b8267c38bae717202615e1618074ee31c

 src/pages/equipmentManagement/repair/add.vue

@@ -4,95 +4,103 @@
      <PageHeader :title="operationType === 'edit' ? '编辑报修' : '新增报修'" @back="goBack" />
      
      <!-- 表单内容 -->
      <van-form @submit="sendForm" ref="formRef" label-width="110px" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">
      <u-form @submit="sendForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
         <!-- 基本信息 -->
         <van-cell-group title="基本信息" inset>
            <van-field
               v-model="deviceNameText"
               label="设备名称"
               placeholder="请选择设备名称"
               :rules="formRules.deviceLedgerId"
               required
               readonly
               @click="showDevicePicker"
               clearable
            />
            <van-field
               v-model="form.deviceModel"
               label="规格型号"
               placeholder="请输入规格型号"
               readonly
               clearable
            />
            <van-field
               v-model="form.repairTime"
               label="报修日期"
               placeholder="请选择报修日期"
               :rules="formRules.repairTime"
               required
               readonly
               @click="showDatePicker"
               clearable
            />
            <van-field
               v-model="form.repairName"
               label="报修人"
               placeholder="请输入报修人"
               :rules="formRules.repairName"
               required
               clearable
            />
            <van-field
               v-model="form.remark"
               label="故障现象"
               type="textarea"
               rows="3"
               placeholder="请输入故障现象"
               :rules="formRules.remark"
               required
               clearable
               maxlength="200"
               show-word-limit
            />
         </van-cell-group>
         <u-cell-group title="基本信息">
            <u-form-item label="设备名称" prop="deviceLedgerId" required>
               <u-input
                  v-model="deviceNameText"
                  placeholder="请选择设备名称"
                  readonly
                  @click="showDevicePicker"
                  clearable
               >
                  <template #suffix>
                     <u-icon name="scan" @click.stop="startScan" class="scan-icon" />
                  </template>
               </u-input>
            </u-form-item>
            <u-form-item label="规格型号">
               <u-input
                  v-model="form.deviceModel"
                  placeholder="请输入规格型号"
                  readonly
                  clearable
               />
            </u-form-item>
            <u-form-item label="报修日期" prop="repairTime" required>
               <u-input
                  v-model="form.repairTime"
                  placeholder="请选择报修日期"
                  readonly
                  @click="showDatePicker"
                  clearable
               />
            </u-form-item>
            <u-form-item label="报修人" prop="repairName" required>
               <u-input
                  v-model="form.repairName"
                  placeholder="请输入报修人"
                  clearable
               />
            </u-form-item>
            <u-form-item label="故障现象" prop="remark" required>
               <u-textarea
                  v-model="form.remark"
                  placeholder="请输入故障现象"
                  :maxlength="200"
                  count
                  :autoHeight="true"
               />
            </u-form-item>
         </u-cell-group>
         
         <!-- 提交按钮 -->
         <view class="footer-btns">
            <van-button class="cancel-btn" @click="goBack">取消</van-button>
            <van-button class="save-btn" native-type="submit" form-type="submit" :loading="loading">保存</van-button>
            <u-button class="cancel-btn" @click="goBack">取消</u-button>
            <u-button class="save-btn" type="primary" @click="sendForm" :loading="loading">保存</u-button>
         </view>
      </van-form>
      </u-form>

      <!-- 设备选择器 -->
      <van-popup v-model:show="showDevice" position="bottom">
         <van-picker
            :model-value="devicePickerValue"
      <u-popup v-model="showDevice" mode="bottom">
         <u-picker
            v-model="devicePickerValue"
            :columns="deviceColumns"
            @confirm="onDeviceConfirm"
            @cancel="showDevice = false"
         />
      </van-popup>
      </u-popup>

      <!-- 日期选择器 -->
      <van-popup v-model:show="showDate" position="bottom">
         <van-date-picker
      <u-popup v-model="showDate" mode="bottom">
         <u-datetime-picker
            v-model="currentDate"
            title="选择日期"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
         />
      </van-popup>
      </u-popup>
   </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
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 { showToast } from 'vant';
// 替换 Vant 的 toast
// import { showToast } from 'vant';

// 替换 toast 方法
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}

defineOptions({
   name: "设备报修表单",
@@ -110,6 +118,10 @@
// 设备选项
const deviceOptions = ref([]);
const deviceNameText = ref('');

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

// 表单验证规则
const formRules = {
@@ -204,6 +216,108 @@
   clearValidate();
};

// 扫描二维码功能
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 handleScanResult = (scanResult) => {
   if (!scanResult) {
      showToast('扫码结果为空');
      return;
   }
	
   isScanning.value = true;
   showToast('扫码成功，3秒后自动填充设备信息');
	
   // 3秒后处理扫码结果
   scanTimer.value = setTimeout(() => {
      processScanResult(scanResult);
      isScanning.value = false;
   }, 3000);
};

// 处理扫码结果并匹配设备
const processScanResult = (scanResult) => {
   // 在设备列表中查找匹配的设备
   // 假设二维码内容是设备名称或设备编号
   const matchedDevice = deviceOptions.value.find(device => 
      device.deviceName === scanResult || 
      device.deviceCode === scanResult ||
      device.id.toString() === scanResult
   );
	
   if (matchedDevice) {
      // 找到匹配的设备，自动填充
      form.value.deviceLedgerId = matchedDevice.id;
      deviceNameText.value = matchedDevice.deviceName;
      form.value.deviceModel = matchedDevice.deviceModel;
      showToast('设备信息已自动填充');
   } else {
      // 未找到匹配的设备
      showToast('未找到匹配的设备，请手动选择');
   }
};

// 显示设备选择器
const showDevicePicker = () => {
   showDevice.value = true;
};

// 确认设备选择
const onDeviceConfirm = ({ selectedValues, selectedOptions }) => {
   form.value.deviceLedgerId = selectedOptions[0].value;
   devicePickerValue.value = selectedValues;
   showDevice.value = false;
   setDeviceModel(selectedOptions[0].value);
};

// 显示日期选择器
const showDatePicker = () => {
   showDate.value = true;
};

// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
   form.value.repairTime = selectedValues.join('-');
   currentDate.value = selectedValues;
   showDate.value = false;
};

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

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

// 组件卸载时清理定时器
onUnmounted(() => {
   if (scanTimer.value) {
      clearTimeout(scanTimer.value);
   }
});

// 提交表单
const sendForm = async () => {
   try {
@@ -262,42 +376,6 @@
   const options = currentPage.options;
   return options.id;
};

// 显示设备选择器
const showDevicePicker = () => {
   showDevice.value = true;
};

// 确认设备选择
const onDeviceConfirm = ({ selectedValues, selectedOptions }) => {
   form.value.deviceLedgerId = selectedOptions[0].value;
   devicePickerValue.value = selectedValues;
   showDevice.value = false;
   setDeviceModel(selectedOptions[0].value);
};

// 显示日期选择器
const showDatePicker = () => {
   showDate.value = true;
};

// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
   form.value.repairTime = selectedValues.join('-');
   currentDate.value = selectedValues;
   showDate.value = false;
};

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

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

<style scoped lang="scss">
@@ -353,4 +431,11 @@
   font-size: 12px; 
   color: #888; 
}

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