优化设备保养表单：新增保养人选择器，确保保养人必填，加载保养人列表

yyb

8 天以前 a8ebfcbec49fb628fa2fa1a66bc1950125bc0786

 src/pages/equipmentManagement/upkeep/add.vue

@@ -40,6 +40,27 @@
               <u-icon name="arrow-right" @click="showDatePicker" />
            </template>
         </u-form-item>

         <u-form-item label="保养人" prop="maintenancePerson" required border-bottom>
            <u-input
               v-model="form.maintenancePerson"
               placeholder="请选择保养人"
               readonly
               @click="showPersonPicker"
               clearable
            />
            <template #right>
               <u-icon name="arrow-right" @click="showPersonPicker" />
            </template>
         </u-form-item>
			
         <u-form-item label="保养项目" prop="maintenanceItems" border-bottom>
            <u-input
               v-model="form.maintenanceItems"
               placeholder="请输入保养项目"
               clearable
            />
         </u-form-item>
         
         <!-- 提交按钮 -->
         <view class="footer-btns">
@@ -56,6 +77,14 @@
         @select="onDeviceConfirm"
         @close="showDevice = false"
      />
      <!-- 保养人选择器 -->
      <up-action-sheet
         :show="showPerson"
         :actions="personActions"
         title="选择保养人"
         @select="onPersonConfirm"
         @close="showPerson = false"
      />
<up-datetime-picker
         :show="showDate"
         v-model="pickerDateValue"
@@ -69,12 +98,16 @@

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { onShow, onUnload } 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 { userListNoPageByTenantId } from '@/api/system/user';
import useUserStore from '@/store/modules/user';
import dayjs from "dayjs";
import { formatDateToYMD } from '@/utils/ruoyi';

const userStore = useUserStore();

defineOptions({
   name: "设备保养计划表单",
@@ -86,11 +119,19 @@
  })
}

const normalizeId = (raw) => {
   if (raw === null || raw === undefined) return undefined;
   const val = String(raw).trim();
   if (!val || val === 'undefined' || val === 'null') return undefined;
   return val;
};

// 表单引用
const formRef = ref(null);
const operationType = ref('add');
const loading = ref(false);
const showDevice = ref(false);
const showPerson = ref(false);
const showDate = ref(false);
const pickerDateValue = ref(Date.now());
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
@@ -98,12 +139,20 @@
// 设备选项
const deviceOptions = ref([]);
const deviceNameText = ref('');
// 保养人选项
const userOptions = ref([]);
// 转换为 action-sheet 需要的格式
const deviceActions = computed(() => {
   return deviceOptions.value.map(item => ({
      text: item.deviceName,
      value: item.id,
      data: item
   }));
});
const personActions = computed(() => {
   return userOptions.value.map(item => ({
      name: item.nickName,
      value: item.userId,
   }));
});

@@ -115,6 +164,7 @@
const formRules = {
   deviceLedgerId: [{ required: true, trigger: "change", message: "请选择设备名称" }],
   maintenancePlanTime: [{ required: true, trigger: "change", message: "请选择计划保养日期" }],
   maintenancePerson: [{ required: true, trigger: "change", message: "请选择保养人" }],
};

// 使用 ref 声明表单数据
@@ -122,6 +172,8 @@
   deviceLedgerId: undefined, // 设备ID
   deviceModel: undefined, // 规格型号
   maintenancePlanTime: dayjs().format("YYYY-MM-DD"), // 计划保养日期
   maintenancePerson: userStore.nickName || undefined, // 保养人
   maintenanceItems: undefined, // 保养项目
});

// 加载设备列表
@@ -131,6 +183,16 @@
      deviceOptions.value = data || [];
   } catch (e) {
      showToast('获取设备列表失败');
   }
};

// 加载保养人列表
const loadUserOptions = async () => {
   try {
      const { data } = await userListNoPageByTenantId();
      userOptions.value = data || [];
   } catch (e) {
      showToast('获取保养人列表失败');
   }
};

@@ -144,6 +206,8 @@
            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.maintenanceItems = data.maintenanceItems || data.maintenanceLocation;
            // 设置设备名称显示
            const device = deviceOptions.value.find(item => item.id === data.deviceLedgerId);
            if (device) {
@@ -187,24 +251,25 @@
   }
   
   isScanning.value = true;
   showToast('扫码成功，3秒后自动填充设备信息');
   showToast('扫码成功');
   
   // 3秒后处理扫码结果
   scanTimer.value = setTimeout(() => {
      processScanResult(scanResult);
      isScanning.value = false;
   }, 3000);
   }, 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 matchedDevice = deviceOptions.value.find(device => 
      device.deviceName === scanResult || 
      device.deviceCode === scanResult ||
      device.id.toString() === scanResult
   );
   const deviceId = getDeviceIdByRegExp(scanResult);
   const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);
   
   if (matchedDevice) {
      // 找到匹配的设备，自动填充
@@ -221,6 +286,22 @@
// 显示设备选择器
const showDevicePicker = () => {
   showDevice.value = true;
};

// 显示保养人选择器
const showPersonPicker = () => {
   if (!userOptions.value.length) {
      showToast('暂无可选保养人');
      return;
   }
   showPerson.value = true;
};

// 确认保养人选择
const onPersonConfirm = (selected) => {
   const user = userOptions.value.find(item => item.userId === selected.value);
   form.value.maintenancePerson = user?.nickName || selected.name || '';
   showPerson.value = false;
};

// 确认设备选择
@@ -252,8 +333,9 @@
});

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

@@ -288,6 +370,7 @@
      if (code == 200) {
         showToast(`${id ? "编辑" : "新增"}计划成功`);
         setTimeout(() => {
            uni.removeStorageSync('repairId');
            uni.navigateBack();
         }, 1500);
      } else {
@@ -306,26 +389,25 @@
   uni.navigateBack();
};

// 获取页面ID
const getPageId = () => {
   return normalizeId(uni.getStorageSync('repairId'));
};

// 获取页面参数
const getPageParams = () => {
   // 从本地存储获取id
   const id = uni.getStorageSync('repairId');
	
   // 根据是否有id参数来判断是新增还是编辑
   const id = getPageId();
   if (id) {
      // 编辑模式，获取详情
      loadForm(id);
   } else {
      // 新增模式
      operationType.value = 'add';
      loadForm();
   }
};

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

<style scoped lang="scss">