From 38bf4054f02933390d2bbdd44b5eaa91c83de1f3 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 02 三月 2026 17:34:27 +0800
Subject: [PATCH] 设备保养的设备备件修改
---
src/pages/equipmentManagement/upkeep/detail.vue | 504 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 504 insertions(+), 0 deletions(-)
diff --git a/src/pages/equipmentManagement/upkeep/detail.vue b/src/pages/equipmentManagement/upkeep/detail.vue
new file mode 100644
index 0000000..b9375a5
--- /dev/null
+++ b/src/pages/equipmentManagement/upkeep/detail.vue
@@ -0,0 +1,504 @@
+<template>
+ <view class="upkeep-detail">
+ <!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 -->
+ <PageHeader title="淇濆吇璇︽儏"
+ @back="goBack" />
+ <!-- 璇︽儏鍐呭 -->
+ <view class="detail-section"
+ v-if="detailData">
+ <view class="detail-card">
+ <view class="card-header">
+ <view class="header-icon">
+ <up-icon name="file-text"
+ size="20"
+ color="#ffffff"></up-icon>
+ </view>
+ <text class="header-title">{{ detailData.deviceName || '-' }}</text>
+ <view class="status-tag">
+ <u-tag v-if="detailData.status === 1"
+ type="success">瀹岀粨</u-tag>
+ <u-tag v-else-if="detailData.status === 0"
+ type="error">寰呬繚鍏�</u-tag>
+ <u-tag v-else-if="detailData.status === 2"
+ type="warning">澶辫触</u-tag>
+ </view>
+ </view>
+ <up-divider></up-divider>
+ <view class="detail-content">
+ <view class="detail-row">
+ <text class="detail-label">璁惧鍚嶇О</text>
+ <text class="detail-value">{{ detailData.deviceName || '-' }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">瑙勬牸鍨嬪彿</text>
+ <text class="detail-value">{{ detailData.deviceModel || '-' }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">璁″垝淇濆吇鏃ユ湡</text>
+ <text class="detail-value">{{ formatDate(detailData.maintenancePlanTime) || '-' }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">瀹為檯淇濆吇浜�</text>
+ <text class="detail-value">{{ detailData.maintenanceActuallyName || '-' }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">瀹為檯淇濆吇鏃ユ湡</text>
+ <text class="detail-value">{{ formatDateTime(detailData.maintenanceActuallyTime) || '-' }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">淇濆吇缁撴灉</text>
+ <text class="detail-value">{{detailData.maintenanceResult || '-'}}
+ </text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">褰曞叆浜�</text>
+ <text class="detail-value">{{ detailData.createUserName || '-' }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">褰曞叆鏃ユ湡</text>
+ <text class="detail-value">{{ formatDateTime(detailData.createTime) || '-' }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">澶囨敞</text>
+ <text class="detail-value">{{ detailData.remark || '-' }}</text>
+ </view>
+ </view>
+ </view>
+ <!-- 璁惧澶囦欢 -->
+ <view class="detail-card">
+ <view class="card-header">
+ <view class="header-icon secondary">
+ <up-icon name="setting"
+ size="20"
+ color="#ffffff"></up-icon>
+ </view>
+ <text class="header-title">璁惧澶囦欢</text>
+ </view>
+ <up-divider></up-divider>
+ <view class="spare-parts-list"
+ v-if="sparePartsList.length > 0">
+ <view v-for="(item, index) in sparePartsList"
+ :key="index"
+ class="spare-part-item">
+ <text class="spare-part-name">{{ item || '-' }}</text>
+ </view>
+ </view>
+ <view v-else
+ class="empty-content">
+ <text class="empty-text">鏆傛棤璁惧澶囦欢</text>
+ </view>
+ </view>
+ <!-- 淇濆吇闄勪欢 -->
+ <view class="detail-card">
+ <view class="card-header">
+ <view class="header-icon tertiary">
+ <up-icon name="photo"
+ size="20"
+ color="#ffffff"></up-icon>
+ </view>
+ <text class="header-title">淇濆吇闄勪欢</text>
+ </view>
+ <up-divider></up-divider>
+ <view class="file-list"
+ v-if="fileList.length > 0">
+ <view v-for="(file, index) in fileList"
+ :key="index"
+ class="file-item"
+ @click="previewFile(file)">
+ <image v-if="file.type.includes('image')"
+ :src="file.url"
+ class="file-preview"
+ mode="aspectFill" />
+ <view v-else
+ class="file-placeholder">
+ <up-icon name="play-circle"
+ size="32"
+ color="#999"></up-icon>
+ </view>
+ </view>
+ </view>
+ <view v-else
+ class="empty-content">
+ <text class="empty-text">鏆傛棤淇濆吇闄勪欢</text>
+ </view>
+ </view>
+ </view>
+ <view v-else
+ class="no-data">
+ <up-icon name="info-circle"
+ size="48"
+ color="#ccc"></up-icon>
+ <text class="no-data-text">鏆傛棤淇濆吇璇︽儏鏁版嵁</text>
+ </view>
+ <!-- 搴曢儴鎸夐挳 -->
+ <view class="footer-btns"
+ v-if="detailData">
+ <u-button type="primary"
+ class="action-btn"
+ :disabled="detailData.status === 1"
+ @click="goMaintain">
+ 淇濆吇
+ </u-button>
+ <u-button type="error"
+ plain
+ class="action-btn"
+ @click="deleteUpkeep">
+ 鍒犻櫎
+ </u-button>
+ </view>
+ </view>
+</template>
+
+<script setup>
+ import { ref, onMounted } from "vue";
+ import { onShow } from "@dcloudio/uni-app";
+ import PageHeader from "@/components/PageHeader.vue";
+ import { delUpkeep } from "@/api/equipmentManagement/upkeep";
+ import config from "@/config";
+ import dayjs from "dayjs";
+
+ // 鏄剧ず鎻愮ず淇℃伅
+ const showToast = message => {
+ uni.showToast({
+ title: message,
+ icon: "none",
+ });
+ };
+
+ defineOptions({
+ name: "淇濆吇璇︽儏",
+ });
+
+ // 璇︽儏鏁版嵁
+ const detailData = ref(null);
+ // 璁惧澶囦欢鍒楄〃
+ const sparePartsList = ref([]);
+ // 闄勪欢鍒楄〃
+ const fileList = ref([]);
+ // 椤甸潰ID
+ const pageId = ref(null);
+
+ // 鏍煎紡鍖栨棩鏈�
+ const formatDate = dateStr => {
+ if (!dateStr) return "";
+ return dayjs(dateStr).format("YYYY-MM-DD");
+ };
+
+ // 鏍煎紡鍖栨棩鏈熸椂闂�
+ const formatDateTime = dateStr => {
+ if (!dateStr) return "";
+ return dayjs(dateStr).format("YYYY-MM-DD HH:mm:ss");
+ };
+
+ // 鏍煎紡鍖栨枃浠禪RL
+ const formatFileUrl = url => {
+ if (!url) return "";
+ if (url.startsWith("http://") || url.startsWith("https://")) {
+ return url;
+ }
+ const uploadsIndex = url.indexOf("uploads");
+ if (uploadsIndex !== -1) {
+ const relativePath = url.substring(uploadsIndex);
+ return `${config.baseUrl}/profile/${relativePath}`;
+ }
+ return `${config.baseUrl}/profile/${url}`;
+ };
+
+ // 鍒ゆ柇鏄惁涓哄浘鐗囨枃浠�
+ const isImageFile = file => {
+ if (file.contentType && file.contentType.startsWith("image/")) {
+ return true;
+ }
+ if (file.type === "image") return true;
+ const name = file.bucketFilename || file.originalFilename || file.name || "";
+ const ext = name.split(".").pop()?.toLowerCase();
+ return ["jpg", "jpeg", "png", "gif", "webp"].includes(ext);
+ };
+
+ // 棰勮鏂囦欢
+ const previewFile = file => {
+ if (file.type.includes("image")) {
+ uni.previewImage({
+ urls: [file.url],
+ current: file.url,
+ });
+ } else {
+ // 瑙嗛棰勮
+ const videoUrl = formatFileUrl(file.url || file.downloadUrl);
+ uni.navigateTo({
+ url: `/pages/common/videoPreview?url=${encodeURIComponent(videoUrl)}`,
+ });
+ }
+ };
+
+ // 鑾峰彇璇︽儏鏁版嵁
+ const getDetailData = () => {
+ try {
+ const dataStr = uni.getStorageSync("upkeepDetailData");
+ if (!dataStr) {
+ showToast("鍙傛暟閿欒");
+ return null;
+ }
+ return JSON.parse(dataStr);
+ } catch (e) {
+ showToast("鏁版嵁瑙ｆ瀽澶辫触");
+ return null;
+ }
+ };
+
+ // 鑾峰彇淇濆吇璇︽儏
+ const getDetail = () => {
+ const data = getDetailData();
+ if (!data) {
+ return;
+ }
+
+ detailData.value = data;
+ pageId.value = data.id;
+ // 澶勭悊澶囦欢鏁版嵁 - 鏀寔澶氱鏁版嵁缁撴瀯
+ sparePartsList.value = data.sparePartsNames.split(",") || [];
+ // 澶勭悊闄勪欢鏁版嵁 - 鏀寔澶氱鏁版嵁缁撴瀯
+ console.log(data.imagesFile);
+ fileList.value = data.imagesFile;
+ };
+
+ // 杩斿洖涓婁竴椤�
+ const goBack = () => {
+ uni.removeStorageSync("upkeepDetailData");
+ uni.navigateBack();
+ };
+
+ // 璺宠浆鍒颁繚鍏婚〉闈�
+ const goMaintain = () => {
+ if (detailData.value.status === 1) {
+ showToast("璇ヤ繚鍏讳换鍔″凡瀹岀粨");
+ return;
+ }
+ uni.setStorageSync("repairId", pageId.value);
+ uni.navigateTo({
+ url: "/pages/equipmentManagement/upkeep/maintain",
+ });
+ };
+
+ // 鍒犻櫎淇濆吇
+ const deleteUpkeep = () => {
+ uni.showModal({
+ title: "璀﹀憡",
+ content: "纭鍒犻櫎淇濆吇鏁版嵁, 姝ゆ搷浣滀笉鍙��?",
+ confirmText: "纭畾",
+ cancelText: "鍙栨秷",
+ success: async res => {
+ if (!res.confirm) return;
+ try {
+ const response = await delUpkeep(pageId.value);
+ if (response.code === 200) {
+ showToast("鍒犻櫎鎴愬姛");
+ setTimeout(() => {
+ goBack();
+ }, 1500);
+ } else {
+ showToast(response.msg || "鍒犻櫎澶辫触");
+ }
+ } catch (e) {
+ showToast("鍒犻櫎澶辫触");
+ }
+ },
+ });
+ };
+
+ onShow(() => {
+ getDetail();
+ });
+
+ onMounted(() => {
+ getDetail();
+ });
+</script>
+
+<style scoped lang="scss">
+ .upkeep-detail {
+ min-height: 100vh;
+ background: #f5f5f5;
+ padding-bottom: 80px;
+ }
+
+ .detail-section {
+ padding: 15px;
+ }
+
+ .detail-card {
+ background: #fff;
+ border-radius: 12px;
+ padding: 16px;
+ margin-bottom: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ }
+
+ .card-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 12px;
+ }
+
+ .header-icon {
+ width: 40px;
+ height: 40px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 12px;
+ }
+
+ .header-icon.secondary {
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+ }
+
+ .header-icon.tertiary {
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+ }
+
+ .header-title {
+ flex: 1;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .status-tag {
+ margin-left: auto;
+ }
+
+ .detail-content {
+ padding-top: 8px;
+ }
+
+ .detail-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 0;
+ border-bottom: 1px solid #f0f0f0;
+ }
+
+ .detail-row:last-child {
+ border-bottom: none;
+ }
+
+ .detail-label {
+ font-size: 14px;
+ color: #666;
+ min-width: 100px;
+ }
+
+ .detail-value {
+ font-size: 14px;
+ color: #333;
+ text-align: right;
+ flex: 1;
+ }
+
+ // 澶囦欢鍒楄〃
+ .spare-parts-list {
+ padding-top: 8px;
+ }
+
+ .spare-part-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 0;
+ border-bottom: 1px solid #f0f0f0;
+ }
+
+ .spare-part-item:last-child {
+ border-bottom: none;
+ }
+
+ .spare-part-name {
+ font-size: 14px;
+ color: #333;
+ }
+
+ .spare-part-code {
+ font-size: 12px;
+ color: #999;
+ }
+
+ // 鏂囦欢鍒楄〃
+ .file-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ padding-top: 8px;
+ }
+
+ .file-item {
+ width: calc(33.33% - 7px);
+ aspect-ratio: 1;
+ border-radius: 8px;
+ overflow: hidden;
+ background: #f5f5f5;
+ }
+
+ .file-preview {
+ width: 100%;
+ height: 100%;
+ }
+
+ .file-placeholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f0f0f0;
+ }
+
+ // 绌虹姸鎬�
+ .no-data {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 60px 20px;
+ }
+
+ .no-data-text {
+ margin-top: 16px;
+ font-size: 14px;
+ color: #999;
+ }
+
+ // 绌哄唴瀹规彁绀�
+ .empty-content {
+ padding: 30px 0;
+ text-align: center;
+ }
+
+ .empty-text {
+ font-size: 14px;
+ color: #999;
+ }
+
+ // 搴曢儴鎸夐挳
+ .footer-btns {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #fff;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 12px 20px;
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+ z-index: 1000;
+ }
+
+ .action-btn {
+ flex: 1;
+ margin: 0 8px;
+ }
+</style>
--
Gitblit v1.9.3