<template>
|
<view class="repair-add">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader :title="operationType === 'edit' ? '编辑报修' : '新增报修'"
|
@back="goBack" />
|
<!-- 表单内容 -->
|
<u-form @submit="sendForm"
|
ref="formRef"
|
:rules="formRules"
|
:model="form"
|
label-width="110">
|
<!-- 基本信息 -->
|
<u-cell-group title="基本信息">
|
<u-form-item label="设备名称"
|
prop="deviceLedgerId"
|
required
|
border-bottom>
|
<u-input v-model="deviceNameText"
|
placeholder="请选择设备名称"
|
@click="showDevicePicker"
|
clearable
|
readonly="" />
|
<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="请输入规格型号"
|
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="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="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-form-item label="故障图片"
|
border-bottom>
|
<view class="repair-image-upload">
|
<u-button type="primary"
|
@click="chooseRepairImage"
|
:loading="uploading"
|
:disabled="uploading">
|
{{ uploading ? "上传中..." : "上传故障图片" }}
|
</u-button>
|
<view v-if="repairImageList.length"
|
class="repair-image-list">
|
<view v-for="(file, index) in repairImageList"
|
:key="file.id || index"
|
class="repair-image-item">
|
<image :src="getFileAccessUrl(file)"
|
mode="aspectFill"
|
class="repair-image-preview"
|
@click="previewRepairImage(index)" />
|
<view class="repair-image-delete"
|
@click="removeRepairImage(file, index)">
|
<u-icon name="close"
|
size="12"
|
color="#fff" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</u-form-item>
|
</u-cell-group>
|
<!-- 提交按钮 -->
|
<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>
|
</view>
|
</u-form>
|
<!-- 设备选择器 -->
|
<up-action-sheet :show="showDevice"
|
:actions="deviceActionList"
|
title="选择设备名称"
|
@select="onDeviceSelect"
|
@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 { onLoad, onShow } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import config from "@/config";
|
import { getToken } from "@/utils/auth";
|
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
|
import {
|
addRepair,
|
delRepairFile,
|
editRepair,
|
getRepairFileList,
|
getRepairById,
|
} from "@/api/equipmentManagement/repair";
|
import dayjs from "dayjs";
|
import { formatDateToYMD } from "@/utils/ruoyi";
|
const showToast = message => {
|
uni.showToast({
|
title: message,
|
icon: "none",
|
});
|
};
|
|
defineOptions({
|
name: "设备报修表单",
|
});
|
|
// 表单引用
|
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 uploading = ref(false);
|
const repairImageList = ref([]);
|
const currentRepairId = ref(undefined);
|
const pageInited = ref(false);
|
|
// 设备选项
|
const deviceOptions = ref([]);
|
const deviceNameText = ref("");
|
const deviceActionList = computed(() => {
|
return deviceOptions.value.map(item => ({
|
name: item.deviceName,
|
value: item.id,
|
}));
|
});
|
|
// 扫码相关状态
|
const isScanning = ref(false);
|
const scanTimer = ref(null);
|
|
// 表单验证规则
|
const formRules = {
|
deviceLedgerId: [
|
{ required: true, trigger: "change", message: "请选择设备名称" },
|
],
|
repairTime: [
|
{ required: true, trigger: "change", message: "请选择报修日期" },
|
],
|
repairName: [{ required: true, trigger: "blur", message: "请输入报修人" }],
|
remark: [{ required: true, trigger: "blur", message: "请输入故障现象" }],
|
};
|
|
// 使用 ref 声明表单数据
|
const form = ref({
|
deviceLedgerId: undefined, // 设备ID
|
deviceModel: undefined, // 规格型号
|
repairTime: dayjs().format("YYYY-MM-DD"), // 报修日期
|
repairName: undefined, // 报修人
|
remark: undefined, // 故障现象
|
});
|
|
const normalizeFileUrl = (rawUrl = "") => {
|
let fileUrl = rawUrl || "";
|
const javaApi = config.baseUrl;
|
const localPrefixes = ["wxfile://", "file://", "content://", "blob:", "data:"];
|
|
if (localPrefixes.some(prefix => fileUrl.startsWith(prefix))) {
|
return fileUrl;
|
}
|
|
if (fileUrl && fileUrl.indexOf("\\") > -1) {
|
const lowerPath = fileUrl.toLowerCase();
|
const uploadPathIndex = lowerPath.indexOf("uploadpath");
|
|
if (uploadPathIndex > -1) {
|
fileUrl = fileUrl.substring(uploadPathIndex).replace(/\\/g, "/");
|
} else {
|
fileUrl = fileUrl.replace(/\\/g, "/");
|
}
|
}
|
fileUrl = fileUrl.replace(/^\/?uploadPath/, "/profile");
|
|
if (fileUrl && !fileUrl.startsWith("http")) {
|
if (!fileUrl.startsWith("/")) fileUrl = "/" + fileUrl;
|
fileUrl = javaApi + fileUrl;
|
}
|
|
return fileUrl;
|
};
|
|
const getFileAccessUrl = (file = {}) => {
|
if (file?.link) {
|
if (String(file.link).startsWith("http")) return file.link;
|
return normalizeFileUrl(file.link);
|
}
|
return normalizeFileUrl(file?.url || file?.tempFilePath || "");
|
};
|
|
const normalizeId = raw => {
|
if (raw === null || raw === undefined) return undefined;
|
const val = String(raw).trim();
|
if (!val || val === "undefined" || val === "null") return undefined;
|
return val;
|
};
|
|
const resolveRepairId = () => {
|
const pages = getCurrentPages();
|
const currentPage = pages[pages.length - 1] || {};
|
const routeId = normalizeId(currentPage?.options?.id);
|
const memoryId = normalizeId(currentRepairId.value);
|
const storageId = normalizeId(uni.getStorageSync("repairId"));
|
return memoryId || routeId || storageId;
|
};
|
|
const getPageId = () => {
|
const id = resolveRepairId();
|
currentRepairId.value = id;
|
return id;
|
};
|
|
const fetchRepairFileList = async id => {
|
if (!id) {
|
repairImageList.value = [];
|
return;
|
}
|
try {
|
const { code, data } = await getRepairFileList(id);
|
if (code === 200) {
|
repairImageList.value = Array.isArray(data) ? data : [];
|
} else {
|
repairImageList.value = [];
|
}
|
} catch (e) {
|
repairImageList.value = [];
|
}
|
};
|
|
const chooseRepairImage = () => {
|
uni.chooseImage({
|
count: 9,
|
sizeType: ["original", "compressed"],
|
sourceType: ["album", "camera"],
|
success: res => {
|
const id = getPageId();
|
const files = res.tempFiles || [];
|
if (!files.length) return;
|
if (id) {
|
uploadRepairImages(files, id);
|
return;
|
}
|
if (operationType.value === "edit") {
|
showToast("未获取到报修ID，请返回列表后重试");
|
return;
|
}
|
// 新增模式临时上传：先本地暂存，保存报修后再自动上传绑定
|
const tempItems = files.map((file, idx) => {
|
const filePath = file.path || file.tempFilePath;
|
return {
|
id: `temp_${Date.now()}_${idx}`,
|
url: filePath,
|
tempFilePath: filePath,
|
name: file.name || `temp_${Date.now()}_${idx}.jpg`,
|
isTemp: true,
|
};
|
});
|
repairImageList.value = [...repairImageList.value, ...tempItems];
|
showToast("已临时添加，保存报修后自动上传");
|
},
|
fail: () => {
|
showToast("选择图片失败");
|
},
|
});
|
};
|
|
const uploadRepairImages = async (files, repairId) => {
|
const commonId = normalizeId(repairId);
|
if (!commonId) {
|
showToast("未获取到报修ID，上传失败");
|
return;
|
}
|
const token = getToken();
|
if (!token) {
|
showToast("登录已失效，请重新登录");
|
return;
|
}
|
uploading.value = true;
|
try {
|
for (const file of files) {
|
const filePath = file.path || file.tempFilePath;
|
if (!filePath) continue;
|
await new Promise((resolve, reject) => {
|
uni.uploadFile({
|
url: `${config.baseUrl}/device/repair/uploadFile`,
|
filePath,
|
name: "file",
|
formData: {
|
deviceRepairId: commonId,
|
type: 13,
|
},
|
header: {
|
Authorization: `Bearer ${token}`,
|
},
|
success: uploadRes => {
|
try {
|
const parsed = JSON.parse(uploadRes.data || "{}");
|
if (uploadRes.statusCode === 200 && parsed.code === 200) {
|
resolve(parsed);
|
} else {
|
reject(new Error(parsed.msg || "上传失败"));
|
}
|
} catch (err) {
|
reject(new Error("上传响应解析失败"));
|
}
|
},
|
fail: () => reject(new Error("上传失败")),
|
});
|
});
|
}
|
showToast("上传成功");
|
await fetchRepairFileList(commonId);
|
} catch (e) {
|
showToast(e?.message || "上传失败");
|
} finally {
|
uploading.value = false;
|
}
|
};
|
|
const previewRepairImage = index => {
|
const urls = repairImageList.value
|
.map(item => getFileAccessUrl(item))
|
.filter(Boolean);
|
if (!urls.length) return;
|
uni.previewImage({
|
urls,
|
current: urls[index] || urls[0],
|
});
|
};
|
|
const removeRepairImage = (file, index) => {
|
if (!file?.id || file?.isTemp) {
|
repairImageList.value.splice(index, 1);
|
return;
|
}
|
uni.showModal({
|
title: "提示",
|
content: "确认删除该图片吗？",
|
success: async res => {
|
if (!res.confirm) return;
|
try {
|
const { code } = await delRepairFile(file.id);
|
if (code === 200) {
|
repairImageList.value.splice(index, 1);
|
showToast("删除成功");
|
} else {
|
showToast("删除失败");
|
}
|
} catch (e) {
|
showToast("删除失败");
|
}
|
},
|
});
|
};
|
|
// 报修状态选项
|
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;
|
},
|
});
|
};
|
|
// 加载设备列表
|
const loadDeviceName = async () => {
|
try {
|
const { data } = await getDeviceLedger();
|
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 loadForm = async id => {
|
if (id) {
|
operationType.value = "edit";
|
try {
|
const { code, data } = await getRepairById(id);
|
if (code == 200) {
|
form.value.deviceLedgerId = data.deviceLedgerId;
|
form.value.deviceModel = data.deviceModel;
|
form.value.repairTime = dayjs(data.repairTime).format("YYYY-MM-DD");
|
form.value.repairName = data.repairName;
|
form.value.remark = data.remark;
|
await fetchRepairFileList(id);
|
repairStatusText.value =
|
repairStatusOptions.value.find(item => item.value == data.status)
|
?.name || "";
|
// 设置设备名称显示
|
const device = deviceOptions.value.find(
|
item => item.id === data.deviceLedgerId
|
);
|
if (device) {
|
deviceNameText.value = 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;
|
}, 100);
|
};
|
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;
|
deviceNameText.value = matchedDevice.deviceName;
|
form.value.deviceModel = matchedDevice.deviceModel;
|
showToast("设备信息已自动填充");
|
} else {
|
// 未找到匹配的设备
|
showToast("未找到匹配的设备，请手动选择");
|
}
|
};
|
|
// 显示设备选择器
|
const showDevicePicker = () => {
|
showDevice.value = true;
|
};
|
|
// 确认设备选择
|
const onDeviceSelect = e => {
|
form.value.deviceLedgerId = e.value;
|
setDeviceModel(e.value);
|
showDevice.value = false;
|
};
|
|
// 显示日期选择器
|
const showDatePicker = () => {
|
showDate.value = true;
|
};
|
|
// 确认日期选择
|
const onDateConfirm = e => {
|
form.value.repairTime = formatDateToYMD(e.value);
|
pickerDateValue.value = dayjs(e.value).format("YYYY-MM-DD");
|
showDate.value = false;
|
};
|
|
onLoad(options => {
|
const routeId = normalizeId(options?.id);
|
const storageId = normalizeId(uni.getStorageSync("repairId"));
|
const id = routeId || storageId;
|
currentRepairId.value = id || undefined;
|
pageInited.value = true;
|
});
|
|
onShow(() => {
|
// onLoad 已拿到 id 后，再按当前 id 初始化页面
|
if (!pageInited.value) return;
|
getPageParams();
|
});
|
|
onMounted(() => {
|
// 页面加载时先获取设备列表
|
loadDeviceName();
|
});
|
|
// 组件卸载时清理定时器
|
onUnmounted(() => {
|
if (scanTimer.value) {
|
clearTimeout(scanTimer.value);
|
}
|
});
|
|
// 提交表单
|
const sendForm = async () => {
|
try {
|
// 手动验证表单
|
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 result = id
|
? await editRepair({ id: id, ...submitData })
|
: await addRepair(submitData);
|
const { code, data } = result || {};
|
|
if (code == 200) {
|
// 新增场景：临时图片在保存成功后自动上传并绑定新报修单
|
if (!id) {
|
const newId = data?.id || data?.repairId || data;
|
if (newId) {
|
currentRepairId.value = newId;
|
const tempFiles = repairImageList.value
|
.filter(item => item?.isTemp && (item.tempFilePath || item.url))
|
.map(item => ({
|
path: item.tempFilePath || item.url,
|
tempFilePath: item.tempFilePath || item.url,
|
}));
|
if (tempFiles.length) {
|
await uploadRepairImages(tempFiles, newId);
|
}
|
}
|
}
|
showToast(`${id ? "编辑" : "新增"}报修成功`);
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
} else {
|
loading.value = false;
|
}
|
} catch (e) {
|
loading.value = false;
|
showToast("表单验证失败");
|
}
|
};
|
|
// 返回上一页
|
const goBack = () => {
|
uni.removeStorageSync("repairId");
|
uni.navigateBack();
|
};
|
|
// 获取页面参数
|
const getPageParams = () => {
|
const id = resolveRepairId();
|
currentRepairId.value = id || undefined;
|
|
// 根据是否有id参数来判断是新增还是编辑
|
if (id) {
|
// 编辑模式，获取详情
|
loadForm(id);
|
} else {
|
// 新增模式
|
currentRepairId.value = undefined;
|
repairImageList.value = [];
|
loadForm();
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
.repair-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;
|
}
|
|
.repair-image-upload {
|
width: 100%;
|
}
|
|
.repair-image-list {
|
margin-top: 12px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.repair-image-item {
|
position: relative;
|
width: 80px;
|
height: 80px;
|
}
|
|
.repair-image-preview {
|
width: 80px;
|
height: 80px;
|
border-radius: 6px;
|
background: #f5f5f5;
|
}
|
|
.repair-image-delete {
|
position: absolute;
|
top: -6px;
|
right: -6px;
|
width: 18px;
|
height: 18px;
|
border-radius: 50%;
|
background: rgba(0, 0, 0, 0.65);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
