<template>
|
<view class="upkeep-add">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader :title="operationType === 'edit' ? '编辑保养计划' : '新增保养计划'"
|
@back="goBack" />
|
<!-- 表单内容 -->
|
<u-form ref="formRef"
|
:model="form"
|
:rules="formRules"
|
label-width="110px">
|
<!-- 基本信息 -->
|
<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>
|
<u-form-item label="保养人"
|
prop="maintenancePerson"
|
border-bottom>
|
<u-input v-model="form.maintenancePerson"
|
placeholder="请输入保养人"
|
clearable />
|
</u-form-item>
|
<u-form-item label="保养项目"
|
prop="machineryCategory"
|
border-bottom>
|
<u-input v-model="form.machineryCategory"
|
placeholder="请输入保养项目"
|
clearable />
|
</u-form-item>
|
<u-form-item label="附件图片"
|
prop="storageBlobDTOs"
|
border-bottom>
|
<CommonUpload v-model="form.storageBlobDTOs" />
|
</u-form-item>
|
<!-- 提交按钮 -->
|
<view class="footer-btns">
|
<u-button class="cancel-btn"
|
@click="goBack">取消</u-button>
|
<u-button class="save-btn"
|
@click="sendForm"
|
:loading="loading">保存</u-button>
|
</view>
|
</u-form>
|
<!-- 设备选择器 -->
|
<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>
|
import { ref, computed, onMounted, onUnmounted } from "vue";
|
import { onShow } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import CommonUpload from "@/components/CommonUpload.vue";
|
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 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);
|
const scanTimer = ref(null);
|
|
// 表单验证规则
|
const formRules = {
|
deviceLedgerId: [
|
{ required: true, trigger: "change", message: "请选择设备名称" },
|
],
|
maintenancePlanTime: [
|
{ required: true, trigger: "change", message: "请选择计划保养日期" },
|
],
|
};
|
|
// 使用 ref 声明表单数据
|
const form = ref({
|
deviceLedgerId: undefined, // 设备ID
|
deviceModel: undefined, // 规格型号
|
maintenancePlanTime: dayjs().format("YYYY-MM-DD"), // 计划保养日期
|
maintenancePerson: undefined, // 保养人
|
machineryCategory: undefined, // 保养项目
|
storageBlobDTOs: [], // 附件图片
|
});
|
|
// 加载设备列表
|
const loadDeviceName = async () => {
|
try {
|
const { data } = await getDeviceLedger();
|
deviceOptions.value = data || [];
|
} catch (e) {
|
showToast("获取设备列表失败");
|
}
|
};
|
|
// 加载表单数据（编辑模式）
|
const loadForm = async id => {
|
if (id) {
|
operationType.value = "edit";
|
try {
|
const { code, data } = await getUpkeepById(id);
|
if (code == 200) {
|
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.machineryCategory = data.machineryCategory;
|
form.value.storageBlobDTOs = data.storageBlobVOs || [];
|
// 设置设备名称显示
|
const device = deviceOptions.value.find(
|
item => item.id === data.deviceLedgerId
|
);
|
if (device) {
|
form.value.deviceNameText = device.deviceName;
|
}
|
}
|
} catch (e) {
|
showToast("获取详情失败");
|
}
|
} else {
|
// 新增模式
|
operationType.value = "add";
|
}
|
};
|
|
// 扫描二维码功能
|
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秒后处理扫码结果
|
scanTimer.value = setTimeout(() => {
|
processScanResult(scanResult);
|
isScanning.value = false;
|
}, 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 deviceId = getDeviceIdByRegExp(scanResult);
|
const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);
|
|
if (matchedDevice) {
|
// 找到匹配的设备，自动填充
|
form.value.deviceLedgerId = matchedDevice.id;
|
form.value.deviceNameText = matchedDevice.deviceName;
|
form.value.deviceModel = matchedDevice.deviceModel;
|
showToast("设备信息已自动填充");
|
} else {
|
// 未找到匹配的设备
|
showToast("未找到匹配的设备，请手动选择");
|
}
|
};
|
|
// 显示设备选择器
|
const showDevicePicker = () => {
|
showDevice.value = true;
|
};
|
|
// 确认设备选择
|
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;
|
};
|
|
// 显示日期选择器
|
const showDatePicker = () => {
|
showDate.value = true;
|
};
|
|
// 确认日期选择
|
const onDateConfirm = e => {
|
form.value.maintenancePlanTime = formatDateToYMD(e.value);
|
showDate.value = false;
|
};
|
|
onShow(() => {
|
// 页面显示时获取参数
|
getPageParams();
|
});
|
|
onMounted(() => {
|
// 页面加载时获取设备列表和参数
|
loadDeviceName();
|
getPageParams();
|
});
|
|
// 组件卸载时清理定时器
|
onUnmounted(() => {
|
if (scanTimer.value) {
|
clearTimeout(scanTimer.value);
|
}
|
});
|
|
// 提交表单
|
const sendForm = async () => {
|
try {
|
// 手动验证表单
|
const valid = await formRef.value.validate();
|
if (!valid) return;
|
|
loading.value = true;
|
const id = getPageId();
|
|
// 准备提交数据
|
const submitData = { ...form.value, status: 0 };
|
|
// 确保日期格式正确
|
if (
|
submitData.maintenancePlanTime &&
|
!submitData.maintenancePlanTime.includes(":")
|
) {
|
submitData.maintenancePlanTime =
|
submitData.maintenancePlanTime + " 00:00:00";
|
}
|
|
const { code } = id
|
? await editUpkeep({ id: id, ...submitData })
|
: await addUpkeep(submitData);
|
|
if (code == 200) {
|
showToast(`${id ? "编辑" : "新增"}计划成功`);
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
} else {
|
loading.value = false;
|
}
|
} catch (e) {
|
loading.value = false;
|
showToast("表单验证失败");
|
}
|
};
|
|
// 返回上一页
|
const goBack = () => {
|
// 清除存储的id
|
uni.removeStorageSync("repairId");
|
uni.navigateBack();
|
};
|
|
// 获取页面参数
|
const getPageParams = () => {
|
// 从本地存储获取id
|
const id = uni.getStorageSync("repairId");
|
|
// 根据是否有id参数来判断是新增还是编辑
|
if (id) {
|
// 编辑模式，获取详情
|
loadForm(id);
|
} else {
|
// 新增模式
|
loadForm();
|
}
|
};
|
|
// 获取页面ID
|
const getPageId = () => {
|
// 从本地存储获取id
|
return uni.getStorageSync("repairId");
|
};
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
.upkeep-add {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 5rem;
|
}
|
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 0.75rem 0;
|
box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
|
z-index: 1000;
|
}
|
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #ffffff;
|
width: 6.375rem;
|
background: #c7c9cc;
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
.save-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #ffffff;
|
width: 14rem;
|
background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
// 响应式调整
|
@media (max-width: 768px) {
|
.submit-section {
|
padding: 12px;
|
}
|
}
|
|
.tip-text {
|
padding: 4px 16px 0 16px;
|
font-size: 12px;
|
color: #888;
|
}
|
|
.scan-icon {
|
color: #1989fa;
|
font-size: 18px;
|
margin-left: 8px;
|
cursor: pointer;
|
}
|
</style>
|
