| | |
| | | <template> |
| | | <view class="upkeep-add"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="新增保养" @back="goBack" /> |
| | | <PageHeader :title="operationType === 'edit' ? '编辑保养计划' : '新增保养计划'" @back="goBack" /> |
| | | |
| | | <!-- 表单内容 --> |
| | | <u-form @submit="sendForm" ref="formRef" label-width="110" input-align="right" error-message-align="right"> |
| | | <u-form ref="formRef" :model="form" :rules="formRules" label-width="110px"> |
| | | <!-- 基本信息 --> |
| | | <u-cell-group title="基本信息"> |
| | | <u-form-item label="设备名称" prop="deviceName" required border-bottom> |
| | | <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="规格型号" border-bottom> |
| | | <u-input |
| | | v-model="form.deviceModel" |
| | | placeholder="请输入规格型号" |
| | | readonly |
| | | clearable |
| | | /> |
| | | </u-form-item> |
| | | <u-form-item label="保养日期" prop="upkeepDate" required border-bottom> |
| | | <u-input |
| | | v-model="form.upkeepDate" |
| | | placeholder="请选择保养日期" |
| | | readonly |
| | | @click="showDatePicker" |
| | | clearable |
| | | /> |
| | | </u-form-item> |
| | | </u-cell-group> |
| | | <u-form-item label="设备名称" prop="deviceNameText" required border-bottom> |
| | | <u-input |
| | | v-model="form.deviceNameText" |
| | | placeholder="请选择设备名称" |
| | | readonly |
| | | @click="showDevicePicker" |
| | | clearable |
| | | /> |
| | | <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" |
| | | placeholder="请输入规格型号" |
| | | readonly |
| | | clearable |
| | | /> |
| | | </u-form-item> |
| | | |
| | | <u-form-item label="计划保养日期" prop="maintenancePlanTime" required border-bottom> |
| | | <u-input |
| | | v-model="form.maintenancePlanTime" |
| | | placeholder="请选择计划保养日期" |
| | | readonly |
| | | @click="showDatePicker" |
| | | clearable |
| | | /> |
| | | <template #right> |
| | | <u-icon name="arrow-right" @click="showDatePicker" /> |
| | | </template> |
| | | </u-form-item> |
| | | |
| | | <!-- 提交按钮 --> |
| | | <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="save-btn" @click="sendForm" :loading="loading">保存</u-button> |
| | | </view> |
| | | </u-form> |
| | | |
| | | <!-- 设备选择器 --> |
| | | <u-popup v-model="showDevice" mode="bottom"> |
| | | <u-picker |
| | | v-model="devicePickerValue" |
| | | :columns="deviceColumns" |
| | | @confirm="onDeviceConfirm" |
| | | @cancel="showDevice = false" |
| | | /> |
| | | </u-popup> |
| | | |
| | | <!-- 日期选择器 --> |
| | | <u-popup v-model="showDate" mode="bottom"> |
| | | <u-datetime-picker |
| | | v-model="currentDate" |
| | | title="选择日期" |
| | | @confirm="onDateConfirm" |
| | | @cancel="showDate = false" |
| | | /> |
| | | </u-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> |
| | | |
| | | <script setup> |
| | | // 替换 Vant 的 toast |
| | | // import { showToast } from 'vant'; |
| | | 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'; |
| | | |
| | | // 替换 toast 方法 |
| | | defineOptions({ |
| | | name: "设备保养计划表单", |
| | | }); |
| | | const showToast = (message) => { |
| | | uni.showToast({ |
| | | title: message, |
| | |
| | | }) |
| | | } |
| | | |
| | | 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 { showToast } from 'vant'; |
| | | |
| | | defineOptions({ |
| | | name: "设备保养计划表单", |
| | | }); |
| | | |
| | | // 表单引用 |
| | | 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); |
| | |
| | | maintenancePlanTime: dayjs().format("YYYY-MM-DD"), // 计划保养日期 |
| | | }); |
| | | |
| | | // 设备选择器列 |
| | | const deviceColumns = computed(() => { |
| | | return deviceOptions.value.map(item => ({ |
| | | text: item.deviceName, |
| | | value: item.id |
| | | })); |
| | | }); |
| | | |
| | | // 加载设备列表 |
| | | const loadDeviceName = async () => { |
| | | try { |
| | |
| | | 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; |
| | | } |
| | | }; |
| | | |
| | |
| | | // 设置设备名称显示 |
| | | const device = deviceOptions.value.find(item => item.id === data.deviceLedgerId); |
| | | if (device) { |
| | | deviceNameText.value = device.deviceName; |
| | | form.value.deviceNameText = device.deviceName; |
| | | } |
| | | } |
| | | } catch (e) { |
| | |
| | | // 新增模式 |
| | | 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(); |
| | | }; |
| | | |
| | | // 扫描二维码功能 |
| | |
| | | } |
| | | |
| | | 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) { |
| | | // 找到匹配的设备,自动填充 |
| | | form.value.deviceLedgerId = matchedDevice.id; |
| | | deviceNameText.value = matchedDevice.deviceName; |
| | | form.value.deviceNameText = matchedDevice.deviceName; |
| | | form.value.deviceModel = matchedDevice.deviceModel; |
| | | showToast('设备信息已自动填充'); |
| | | } else { |
| | |
| | | }; |
| | | |
| | | // 确认设备选择 |
| | | 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); |
| | | }; |
| | | |
| | | // 显示日期选择器 |
| | |
| | | }; |
| | | |
| | | // 确认日期选择 |
| | | const onDateConfirm = ({ selectedValues }) => { |
| | | form.value.maintenancePlanTime = selectedValues.join('-'); |
| | | currentDate.value = selectedValues; |
| | | const onDateConfirm = (e) => { |
| | | form.value.maintenancePlanTime = formatDateToYMD(e.value); |
| | | showDate.value = false; |
| | | }; |
| | | |
| | |
| | | const sendForm = async () => { |
| | | try { |
| | | // 手动验证表单 |
| | | await formRef.value?.validate(); |
| | | const valid = await formRef.value.validate(); |
| | | if (!valid) return; |
| | | |
| | | loading.value = true; |
| | | const id = getPageId(); |
| | |
| | | |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | // 清除存储的id |
| | | uni.removeStorageSync('repairId'); |
| | | uni.navigateBack(); |
| | | }; |
| | | |
| | | // 获取页面参数 |
| | | const getPageParams = () => { |
| | | const pages = getCurrentPages(); |
| | | const currentPage = pages[pages.length - 1]; |
| | | const options = currentPage.options; |
| | | // 从本地存储获取id |
| | | const id = uni.getStorageSync('repairId'); |
| | | |
| | | // 根据是否有id参数来判断是新增还是编辑 |
| | | if (options.id) { |
| | | if (id) { |
| | | // 编辑模式,获取详情 |
| | | loadForm(options.id); |
| | | loadForm(id); |
| | | } else { |
| | | // 新增模式 |
| | | loadForm(); |
| | |
| | | |
| | | // 获取页面ID |
| | | const getPageId = () => { |
| | | const pages = getCurrentPages(); |
| | | const currentPage = pages[pages.length - 1]; |
| | | const options = currentPage.options; |
| | | return options.id; |
| | | // 从本地存储获取id |
| | | return uni.getStorageSync('repairId'); |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | @import '@/static/scss/form-common.scss'; |
| | | .upkeep-add { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |