From 77861fcc5ee1c4f8e7c6412b373cb438c7313930 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期三, 03 九月 2025 10:06:26 +0800 Subject: [PATCH] 头部样式修改、适配不同机型 --- src/pages/equipmentManagement/repair/add.vue | 210 +++++++++++++++++++++++++++------------------------- 1 files changed, 110 insertions(+), 100 deletions(-) diff --git a/src/pages/equipmentManagement/repair/add.vue b/src/pages/equipmentManagement/repair/add.vue index d48202d..ec0147f 100644 --- a/src/pages/equipmentManagement/repair/add.vue +++ b/src/pages/equipmentManagement/repair/add.vue @@ -4,88 +4,82 @@ <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" :rules="formRules" :model="form" label-width="110"> <!-- 鍩烘湰淇℃伅 --> - <van-cell-group title="鍩烘湰淇℃伅" inset> - <van-field - v-model="deviceNameText" - label="璁惧鍚嶇О" - placeholder="璇烽�夋嫨璁惧鍚嶇О" - :rules="formRules.deviceLedgerId" - required - readonly - @click="showDevicePicker" - clearable - > - <template #right-icon> - <van-icon name="scan" @click.stop="startScan" class="scan-icon" /> + <u-cell-group title="鍩烘湰淇℃伅"> + <u-form-item label="璁惧鍚嶇О" prop="deviceLedgerId" required border-bottom> + <u-input + v-model="deviceNameText" + placeholder="璇烽�夋嫨璁惧鍚嶇О" + @click="showDevicePicker" + clearable + /> + <template #right> + <u-icon name="scan" @click="startScan" class="scan-icon" /> </template> - </van-field> - <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-form-item> + <u-form-item label="瑙勬牸鍨嬪彿" prop="deviceModel" border-bottom> + <u-input + v-model="form.deviceModel" + placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�" + clearable + /> + </u-form-item> + <u-form-item label="鎶ヤ慨鏃ユ湡" prop="repairTime" required border-bottom> + <u-input + v-model="form.repairTime" + placeholder="璇烽�夋嫨鎶ヤ慨鏃ユ湡" + readonly + @click="showDatePicker" + clearable + /> + <template #right> + <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> + <u-form-item label="鏁呴殰鐜拌薄" prop="remark" required border-bottom> + <u-textarea + v-model="form.remark" + rows="3" + placeholder="璇疯緭鍏ユ晠闅滅幇璞�" + clearable + count + maxlength="200" + /> + </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" - :columns="deviceColumns" - @confirm="onDeviceConfirm" - @cancel="showDevice = false" - /> - </van-popup> + <up-action-sheet + :show="showDevice" + :actions="deviceActionList" + title="閫夋嫨璁惧鍚嶇О" + @select="onDeviceSelect" + @close="showDevice = false" + /> <!-- 鏃ユ湡閫夋嫨鍣� --> - <van-popup v-model:show="showDate" position="bottom"> - <van-date-picker - v-model="currentDate" - title="閫夋嫨鏃ユ湡" - @confirm="onDateConfirm" - @cancel="showDate = false" - /> - </van-popup> + <up-datetime-picker + :show="showDate" + v-model="pickerDateValue" + @confirm="onDateConfirm" + @cancel="showDate = false" + mode="date" + /> </view> </template> @@ -96,7 +90,13 @@ import { getDeviceLedger } from '@/api/equipmentManagement/ledger'; import { addRepair, editRepair, getRepairById } from '@/api/equipmentManagement/repair'; import dayjs from "dayjs"; -import { showToast } from 'vant'; +import { formatDateToYMD } from '@/utils/ruoyi'; +const showToast = (message) => { + uni.showToast({ + title: message, + icon: 'none' + }) +} defineOptions({ name: "璁惧鎶ヤ慨琛ㄥ崟", @@ -107,13 +107,18 @@ const operationType = ref('add'); const loading = ref(false); const showDevice = ref(false); -const devicePickerValue = ref([]); const showDate = ref(false); -const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]); +const pickerDateValue = ref(Date.now()); // 璁惧閫夐」 const deviceOptions = ref([]); const deviceNameText = ref(''); +const deviceActionList = computed(() => { + return deviceOptions.value.map(item => ({ + name: item.deviceName, + value: item.id + })); +}); // 鎵爜鐩稿叧鐘舵�� const isScanning = ref(false); @@ -134,14 +139,6 @@ repairTime: dayjs().format("YYYY-MM-DD"), // 鎶ヤ慨鏃ユ湡 repairName: undefined, // 鎶ヤ慨浜� remark: undefined, // 鏁呴殰鐜拌薄 -}); - -// 璁惧閫夋嫨鍣ㄥ垪 -const deviceColumns = computed(() => { - return deviceOptions.value.map(item => ({ - text: item.deviceName, - value: item.id - })); }); // 鍔犺浇璁惧鍒楄〃 @@ -205,11 +202,6 @@ remark: undefined, }; deviceNameText.value = ''; -}; - -const resetFormAndValidate = () => { - resetForm(); - clearValidate(); }; // 鎵弿浜岀淮鐮佸姛鑳� @@ -277,11 +269,10 @@ }; // 纭璁惧閫夋嫨 -const onDeviceConfirm = ({ selectedValues, selectedOptions }) => { - form.value.deviceLedgerId = selectedOptions[0].value; - devicePickerValue.value = selectedValues; +const onDeviceSelect = (e) => { + form.value.deviceLedgerId = e.value; + setDeviceModel(e.value); showDevice.value = false; - setDeviceModel(selectedOptions[0].value); }; // 鏄剧ず鏃ユ湡閫夋嫨鍣� @@ -290,9 +281,8 @@ }; // 纭鏃ユ湡閫夋嫨 -const onDateConfirm = ({ selectedValues }) => { - form.value.repairTime = selectedValues.join('-'); - currentDate.value = selectedValues; +const onDateConfirm = (e) => { + form.value.repairTime = formatDateToYMD(e.value); showDate.value = false; }; @@ -318,18 +308,37 @@ const sendForm = async () => { try { // 鎵嬪姩楠岃瘉琛ㄥ崟 - await formRef.value?.validate(); - + let isValid = true; + let errorMessage = ''; + if (!form.value.deviceLedgerId) { + isValid = false; + errorMessage = '璇烽�夋嫨璁惧鍚嶇О'; + } else if (!form.value.repairTime || form.value.repairTime.trim() === '') { + isValid = false; + errorMessage = '璇烽�夋嫨鎶ヤ慨鏃ユ湡'; + } else if (!form.value.repairName || form.value.repairName.trim() === '') { + isValid = false; + errorMessage = '璇疯緭鍏ユ姤淇汉'; + } else if (!form.value.remark || form.value.remark.trim() === '') { + isValid = false; + errorMessage = '璇疯緭鍏ユ晠闅滅幇璞�'; + } + + if (!isValid) { + showToast(errorMessage); + return; + } + loading.value = true; const id = getPageId(); - + // 鍑嗗鎻愪氦鏁版嵁 const submitData = { ...form.value }; - + const { code } = id ? await editRepair({ id: id, ...submitData }) : await addRepair(submitData); - + if (code == 200) { showToast(`${id ? "缂栬緫" : "鏂板"}鎶ヤ慨鎴愬姛`); setTimeout(() => { @@ -375,6 +384,7 @@ </script> <style scoped lang="scss"> +@import '@/static/scss/form-common.scss'; .repair-add { min-height: 100vh; background: #f8f9fa; -- Gitblit v1.9.3