<template>
|
<view class="repair-maintain">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="新增维修"
|
@back="goBack" />
|
<!-- 表单内容 -->
|
<u-form ref="formRef"
|
:model="form"
|
:rules="formRules"
|
label-width="140rpx">
|
<!-- 基本信息 -->
|
<u-cell-group title="维修信息"
|
inset>
|
<u-form-item prop="maintenanceName"
|
label="维修人"
|
required>
|
<u-input v-model="form.maintenanceName"
|
placeholder="请输入维修人"
|
clearable />
|
</u-form-item>
|
<u-form-item prop="maintenanceResult"
|
label="维修结果"
|
required>
|
<u-input v-model="form.maintenanceResult"
|
type="textarea"
|
rows="3"
|
placeholder="请输入维修结果"
|
clearable
|
maxlength="200"
|
show-word-limit />
|
</u-form-item>
|
<u-form-item label="维修状态"
|
prop="repairTime"
|
required
|
border-bottom>
|
<u-input v-model="repairStatusText"
|
placeholder="请选择维修状态"
|
readonly
|
@click="openRepairStatusPicker"
|
clearable />
|
<template #right>
|
<u-icon name="arrow-right"
|
@click="openRepairStatusPicker"></u-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="维修日期"
|
prop="maintenanceTime"
|
required
|
border-bottom>
|
<u-input v-model="form.maintenanceTime"
|
placeholder="请选择维修日期"
|
readonly
|
@click="showDatePicker = true"
|
clearable />
|
<template #right>
|
<u-icon name="arrow-right"
|
@click="showDatePicker = true"></u-icon>
|
</template>
|
</u-form-item>
|
</u-cell-group>
|
<!-- 提交按钮 -->
|
<view class="footer-btns">
|
<u-button class="cancel-btn"
|
@click="goBack">取消</u-button>
|
<u-button class="save-btn"
|
@click="submitForm"
|
:loading="loading">保存</u-button>
|
</view>
|
</u-form>
|
<!-- 日期选择器 -->
|
<up-datetime-picker :show="showDatePicker"
|
v-model="pickerDateValue"
|
mode="datetime"
|
title="选择日期"
|
format="YYYY-MM-DD HH:mm:ss"
|
@confirm="onDateConfirm"
|
@cancel="showDatePicker = false" />
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from "vue";
|
import { onShow } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import { addMaintain } from "@/api/equipmentManagement/repair";
|
import useUserStore from "@/store/modules/user";
|
import dayjs from "dayjs";
|
|
defineOptions({
|
name: "设备维修表单",
|
});
|
|
const userStore = useUserStore();
|
|
// 表单引用
|
const formRef = ref(null);
|
const loading = ref(false);
|
const showDatePicker = ref(false);
|
const pickerDateValue = ref(Date.now()); // 使用时间戳
|
|
// 表单验证规则
|
const formRules = {
|
maintenanceName: [
|
{ required: true, trigger: "blur", message: "请输入维修人" },
|
],
|
maintenanceResult: [
|
{ required: true, trigger: "blur", message: "请输入维修结果" },
|
],
|
maintenanceTime: [
|
{ required: true, trigger: "change", message: "请选择维修日期" },
|
],
|
};
|
const repairStatusOptions = ref([
|
{ name: "待维修", value: "0" },
|
{ name: "完结", value: "1" },
|
{ name: "失败", value: "2" },
|
]);
|
const repairStatusText = ref("完结");
|
// 打开报修状态选择器
|
const openRepairStatusPicker = () => {
|
uni.showActionSheet({
|
itemList: repairStatusOptions.value.map(item => item.name),
|
success: res => {
|
form.value.status = repairStatusOptions.value[res.tapIndex].value;
|
repairStatusText.value = repairStatusOptions.value[res.tapIndex].name;
|
},
|
});
|
};
|
// 使用 ref 声明表单数据
|
const form = ref({
|
maintenanceName: userStore.nickName || "", // 默认使用当前用户昵称
|
maintenanceResult: undefined, // 维修结果
|
maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 维修日期（只显示日期）
|
});
|
|
// 自定义showToast函数
|
const showToast = message => {
|
uni.showToast({
|
title: message,
|
icon: "none",
|
});
|
};
|
|
// 重置表单数据和校验状态
|
const resetForm = () => {
|
form.value = {
|
maintenanceName: userStore.nickName || "",
|
maintenanceResult: undefined,
|
maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
};
|
};
|
|
const resetFormAndValidate = () => {
|
resetForm();
|
};
|
|
// 提交表单
|
const submitForm = async () => {
|
try {
|
// 使用uview-plus的表单验证方式
|
const valid = await formRef.value.validate();
|
if (valid) {
|
submitFormData();
|
}
|
} catch (e) {
|
showToast("表单验证失败");
|
}
|
};
|
|
// 提交表单数据
|
const submitFormData = async () => {
|
try {
|
loading.value = true;
|
const id = getPageId();
|
|
if (!id) {
|
showToast("参数错误");
|
loading.value = false;
|
return;
|
}
|
form.value.status = Number(form.value.status);
|
// 准备提交数据，maintenanceTime 加上当前时分秒
|
const submitData = { ...form.value };
|
|
const { code } = await addMaintain({ id: id, ...submitData });
|
|
if (code == 200) {
|
showToast("新增维修成功");
|
resetFormAndValidate();
|
setTimeout(() => {
|
goBack();
|
}, 500);
|
} else {
|
loading.value = false;
|
}
|
} catch (e) {
|
console.log(e);
|
|
loading.value = false;
|
showToast("操作失败");
|
}
|
};
|
|
// 返回上一页
|
const goBack = () => {
|
uni.removeStorageSync("repairId");
|
uni.navigateBack();
|
};
|
|
// 获取页面ID
|
const getPageId = () => {
|
const id = uni.getStorageSync("repairId");
|
return id;
|
};
|
|
// 确认日期选择
|
const onDateConfirm = e => {
|
form.value.maintenanceTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss");
|
pickerDateValue.value = e.value;
|
showDatePicker.value = false;
|
};
|
|
// 初始化表单数据
|
const initForm = () => {
|
form.value.status = "1";
|
// 设置维修人为当前用户昵称
|
form.value.maintenanceName = userStore.nickName || "";
|
// 设置当前日期（只包含年月日）
|
form.value.maintenanceTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
};
|
|
onShow(() => {
|
// 页面显示时初始化表单
|
initForm();
|
});
|
|
onMounted(() => {
|
// 页面加载时初始化表单
|
initForm();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
.repair-maintain {
|
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;
|
}
|
</style>
|
