修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/equipmentManagement/upkeep/add.vue

@@ -4,68 +4,66 @@
      <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 ref="formRef" :model="form" :rules="formRules" label-width="110px">
         <!-- 基本信息 -->
         <van-cell-group title="基本信息" inset>
            <van-field
               v-model="deviceNameText"
               label="设备名称"
         <u-form-item label="设备名称" prop="deviceNameText" required border-bottom>
            <u-input
               v-model="form.deviceNameText"
               placeholder="请选择设备名称"
               :rules="formRules.deviceLedgerId"
               required
               readonly
               @click="showDevicePicker"
               clearable
            >
               <template #right-icon>
                  <van-icon name="scan" @click.stop="startScan" class="scan-icon" />
               </template>
            </van-field>
            <van-field
            />
            <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"
               label="规格型号"
               placeholder="请输入规格型号"
               readonly
               clearable
            />
            <van-field
         </u-form-item>
			
         <u-form-item label="计划保养日期" prop="maintenancePlanTime" required border-bottom>
            <u-input
               v-model="form.maintenancePlanTime"
               label="计划保养日期"
               placeholder="请选择计划保养日期"
               :rules="formRules.maintenancePlanTime"
               required
               readonly
               @click="showDatePicker"
               clearable
            />
         </van-cell-group>
            <template #right>
               <u-icon name="arrow-right" @click="showDatePicker" />
            </template>
         </u-form-item>
         
         <!-- 提交按钮 -->
         <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" @click="sendForm" :loading="loading">保存</u-button>
         </view>
      </van-form>
      </u-form>

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

      <!-- 日期选择器 -->
      <van-popup v-model:show="showDate" position="bottom">
         <van-date-picker
            v-model="currentDate"
            title="选择日期"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
         />
      </van-popup>
      <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>

@@ -76,23 +74,38 @@
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'
  })
}

// 表单引用
const formRef = ref(null);
const operationType = ref('add');
const loading = ref(false);
const showDevice = ref(false);
const devicePickerValue = ref([]);
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 isScanning = ref(false);
@@ -111,14 +124,6 @@
   maintenancePlanTime: dayjs().format("YYYY-MM-DD"), // 计划保养日期
});

// 设备选择器列
const deviceColumns = computed(() => {
   return deviceOptions.value.map(item => ({
      text: item.deviceName,
      value: item.id
   }));
});

// 加载设备列表
const loadDeviceName = async () => {
   try {
@@ -126,15 +131,6 @@
      deviceOptions.value = data || [];
   } catch (e) {
      showToast('获取设备列表失败');
   }
};

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

@@ -151,7 +147,7 @@
            // 设置设备名称显示
            const device = deviceOptions.value.find(item => item.id === data.deviceLedgerId);
            if (device) {
               deviceNameText.value = device.deviceName;
               form.value.deviceNameText = device.deviceName;
            }
         }
      } catch (e) {
@@ -161,26 +157,6 @@
      // 新增模式
      operationType.value = 'add';
   }
};

// 清除表单校验状态
const clearValidate = () => {
   formRef.value?.clearValidate();
};

// 重置表单数据和校验状态
const resetForm = () => {
   form.value = {
      deviceLedgerId: undefined,
      deviceModel: undefined,
      maintenancePlanTime: dayjs().format("YYYY-MM-DD"),
   };
   deviceNameText.value = '';
};

const resetFormAndValidate = () => {
   resetForm();
   clearValidate();
};

// 扫描二维码功能
@@ -233,7 +209,7 @@
   if (matchedDevice) {
      // 找到匹配的设备，自动填充
      form.value.deviceLedgerId = matchedDevice.id;
      deviceNameText.value = matchedDevice.deviceName;
      form.value.deviceNameText = matchedDevice.deviceName;
      form.value.deviceModel = matchedDevice.deviceModel;
      showToast('设备信息已自动填充');
   } else {
@@ -248,11 +224,15 @@
};

// 确认设备选择
const onDeviceConfirm = ({ selectedValues, selectedOptions }) => {
   form.value.deviceLedgerId = selectedOptions[0].value;
   devicePickerValue.value = selectedValues;
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;
   setDeviceModel(selectedOptions[0].value);
};

// 显示日期选择器
@@ -261,9 +241,8 @@
};

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

@@ -289,7 +268,8 @@
const sendForm = async () => {
   try {
      // 手动验证表单
      await formRef.value?.validate();
      const valid = await formRef.value.validate();
      if (!valid) return;
      
      loading.value = true;
      const id = getPageId();
@@ -350,6 +330,7 @@
</script>

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