| | |
| | | <template> |
| | | <view class="sales-account"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <view class="upkeep-page"> |
| | | <PageHeader title="设备保养" |
| | | @back="goBack" /> |
| | | <!-- 搜索区域 --> |
| | | <view class="search-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <up-input class="search-text" |
| | | placeholder="请输入设备名称搜索" |
| | | v-model="searchKeyword" |
| | | @change="getList" |
| | | clearable /> |
| | | </view> |
| | | <view class="filter-button" |
| | | @click="getList"> |
| | | <up-icon name="search" |
| | | size="24" |
| | | color="#999"></up-icon> |
| | | <view class="toolbar"> |
| | | <view class="search-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <up-input class="search-text" |
| | | placeholder="请输入设备名称搜索" |
| | | v-model="searchKeyword" |
| | | clearable /> |
| | | </view> |
| | | <view class="search-button" |
| | | @click="handleQuery"> |
| | | <up-icon name="search" |
| | | size="24" |
| | | color="#999"></up-icon> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="meta-bar"> |
| | | <text class="meta-text">共 {{ total }} 条</text> |
| | | </view> |
| | | </view> |
| | | <!-- 设备保养列表 --> |
| | | <view class="ledger-list" |
| | | v-if="upkeepList.length > 0"> |
| | | <view class="list-section"> |
| | | <view v-for="(item, index) in upkeepList" |
| | | :key="index"> |
| | | <view class="ledger-item" |
| | | @click="toggleSelection(item)"> |
| | | <view class="item-header"> |
| | | <view class="item-left"> |
| | | <view class="document-icon"> |
| | | <up-icon name="file-text" |
| | | size="16" |
| | | color="#ffffff"></up-icon> |
| | | </view> |
| | | <text class="item-id">设备名称:{{ item.deviceName }}</text> |
| | | :key="item.id || index" |
| | | class="ledger-item"> |
| | | <view class="item-header"> |
| | | <view class="item-left"> |
| | | <view class="document-icon"> |
| | | <up-icon name="file-text" |
| | | size="14" |
| | | color="#ffffff"></up-icon> |
| | | </view> |
| | | <view class="status-tag"> |
| | | <u-tag v-if="item.status === 1" |
| | | type="success">完结</u-tag> |
| | | <u-tag v-if="item.status === 0" |
| | | type="error">待保养</u-tag> |
| | | </view> |
| | | <text class="item-id">{{ item.deviceName || "--" }}</text> |
| | | </view> |
| | | <view class="item-right"> |
| | | <u-tag v-if="item.status === 1" |
| | | type="success">完结</u-tag> |
| | | <u-tag v-if="item.status === 0" |
| | | type="warning">待保养</u-tag> |
| | | <u-tag v-if="item.status === 2" |
| | | type="error">失败</u-tag> |
| | | </view> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="item-details"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">规格型号</text> |
| | | <text class="detail-value">{{ item.deviceModel || "--" }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">计划保养日期</text> |
| | | <text class="detail-value">{{ formatDate(item.maintenancePlanTime) || "--" }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入人</text> |
| | | <text class="detail-value">{{ item.createUserName || "--" }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入日期</text> |
| | | <text class="detail-value">{{ formatDateTime(item.createTime) || "--" }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">实际保养人</text> |
| | | <text class="detail-value">{{ item.maintenanceActuallyName || "--" }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">实际保养日期</text> |
| | | <text class="detail-value">{{ formatDateTime(item.maintenanceActuallyTime) || "--" }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">保养结果</text> |
| | | <text class="detail-value">{{ item.maintenanceResult || "--" }}</text> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="item-details"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">规格型号</text> |
| | | <text class="detail-value">{{ item.deviceModel || '-' }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">计划保养日期</text> |
| | | <text class="detail-value">{{ formatDate(item.maintenancePlanTime) || '-' }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入人</text> |
| | | <text class="detail-value">{{ item.createUserName || '-' }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入日期</text> |
| | | <text class="detail-value">{{ formatDateTime(item.createTime) || '-' }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">实际保养人</text> |
| | | <text class="detail-value">{{ item.maintenanceActuallyName || '-' }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">实际保养日期</text> |
| | | <text class="detail-value">{{ formatDateTime(item.maintenanceActuallyTime) || '-' }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">保养结果</text> |
| | | <view class="detail-value"> |
| | | <u-tag v-if="item.maintenanceResult === 1" |
| | | type="success" |
| | | size="mini"> |
| | | 完好 |
| | | </u-tag> |
| | | <u-tag v-if="item.maintenanceResult === 0" |
| | | type="error" |
| | | size="mini"> |
| | | 维修 |
| | | </u-tag> |
| | | <text v-if="item.maintenanceResult === undefined || item.maintenanceResult === null">-</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <!-- 按钮区域 --> |
| | | <view class="action-buttons"> |
| | | <u-button type="primary" |
| | | size="small" |
| | | class="action-btn" |
| | | :disabled="item.status === 1" |
| | | @click.stop="edit(item.id)"> |
| | | 编辑 |
| | | </u-button> |
| | | <view class="card-actions"> |
| | | <u-button type="warning" |
| | | size="small" |
| | | class="action-btn" |
| | | :disabled="item.status === 1" |
| | | @click.stop="addMaintain(item.id)"> |
| | | @click.stop="addMaintain(item.id, item)"> |
| | | 保养 |
| | | </u-button> |
| | | <u-button type="error" |
| | |
| | | @click.stop="delUpkeepByIds(item.id)"> |
| | | 删除 |
| | | </u-button> |
| | | <u-button type="warning" |
| | | <u-button type="info" |
| | | size="small" |
| | | class="action-btn" |
| | | @click.stop="addFile(item.id)"> |
| | | 附件 |
| | | @click.stop="viewDetail(item)"> |
| | | 详情 |
| | | </u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-if="!loading && upkeepList.length === 0" |
| | | class="no-data"> |
| | | <text>暂无设备保养数据</text> |
| | | </view> |
| | | </view> |
| | | <view v-else |
| | | class="no-data"> |
| | | <text>暂无设备保养数据</text> |
| | | </view> |
| | | <!-- 浮动新增按钮 --> |
| | | <view class="fab-button" |
| | | @click="addPlan"> |
| | | <up-icon name="plus" |
| | |
| | | // 设备保养数据 |
| | | const upkeepList = ref([]); |
| | | |
| | | // 多选列表 |
| | | const total = ref(0); |
| | | const loading = ref(false); |
| | | |
| | | // 多选列表(保养按钮未传 id 时用) |
| | | const multipleList = ref([]); |
| | | |
| | | // 返回上一页 |
| | |
| | | return dayjs(dateStr).format("YYYY-MM-DD HH:mm:ss"); |
| | | }; |
| | | |
| | | const handleQuery = () => { |
| | | getList(); |
| | | }; |
| | | |
| | | // 查询列表 |
| | | const getList = () => { |
| | | showLoadingToast("加载中..."); |
| | | loading.value = true; |
| | | const params = { |
| | | current: -1, |
| | | size: -1, |
| | |
| | | }; |
| | | getUpkeepPage(params) |
| | | .then(res => { |
| | | // 如果res.data不是数组,设置为空数组 |
| | | upkeepList.value = res.records || res.data?.records || []; |
| | | closeToast(); |
| | | const records = res?.records ?? res?.data?.records ?? []; |
| | | upkeepList.value = records; |
| | | total.value = Array.isArray(records) ? records.length : Number(res?.total ?? res?.data?.total ?? 0); |
| | | }) |
| | | .catch(() => { |
| | | closeToast(); |
| | | upkeepList.value = []; |
| | | showToast("获取数据失败"); |
| | | }) |
| | | .finally(() => { |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | // 新增附件 - 跳转到附件页面 |
| | |
| | | }; |
| | | |
| | | // 新增保养 - 跳转到保养页面 |
| | | const addMaintain = id => { |
| | | const addMaintain = (id, item) => { |
| | | if (!id && multipleList.value.length !== 1) { |
| | | showToast("请选择一条记录"); |
| | | return; |
| | | } |
| | | const targetId = id || multipleList.value[0].id; |
| | | // 使用本地存储传递id |
| | | const targetItem = item || multipleList.value[0]; |
| | | // 使用本地存储传递id和完整数据 |
| | | uni.setStorageSync("repairId", targetId); |
| | | uni.setStorageSync("upkeepItemData", JSON.stringify(targetItem)); |
| | | uni.navigateTo({ |
| | | url: "/pages/equipmentManagement/upkeep/maintain", |
| | | }); |
| | | }; |
| | | |
| | | // 查看详情 - 跳转到详情页面 |
| | | const viewDetail = item => { |
| | | if (!item) { |
| | | showToast("参数错误"); |
| | | return; |
| | | } |
| | | // 使用本地存储传递整条数据 |
| | | uni.setStorageSync("upkeepDetailData", JSON.stringify(item)); |
| | | uni.navigateTo({ |
| | | url: "/pages/equipmentManagement/upkeep/detail", |
| | | }); |
| | | }; |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | @import "@/styles/sales-common.scss"; |
| | | |
| | | // 设备保养特有样式 |
| | | .sales-account { |
| | | padding-bottom: 80px; // 为浮动按钮留出空间 |
| | | .upkeep-page { |
| | | min-height: 100vh; |
| | | background: #f6f7fb; |
| | | } |
| | | |
| | | .action-section { |
| | | padding: 10px 20px; |
| | | .toolbar { |
| | | padding: 20rpx 24rpx; |
| | | background: #fff; |
| | | border-bottom: 1rpx solid #f0f0f0; |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 10; |
| | | } |
| | | |
| | | .search-section { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | .search-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | background: #f7f8fa; |
| | | border-radius: 14rpx; |
| | | padding: 8rpx 12rpx 8rpx 16rpx; |
| | | border: 1rpx solid #eef1f5; |
| | | } |
| | | |
| | | .search-input { |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .search-text { |
| | | background: transparent !important; |
| | | } |
| | | |
| | | :deep(.search-text .u-input__content), |
| | | :deep(.search-text .up-input__content) { |
| | | background: transparent !important; |
| | | padding: 0 !important; |
| | | } |
| | | |
| | | .search-button { |
| | | width: 64rpx; |
| | | height: 64rpx; |
| | | border-radius: 12rpx; |
| | | background: #ffffff; |
| | | border-bottom: 1px solid #f0f0f0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .action-section .action-buttons { |
| | | gap: 8px; // 与公共样式中的 12px 不同 |
| | | justify-content: flex-start; |
| | | .meta-bar { |
| | | margin-top: 16rpx; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | background: #f7f9fc; |
| | | border-radius: 12rpx; |
| | | padding: 10rpx 16rpx; |
| | | } |
| | | |
| | | .checkbox-wrapper { |
| | | .meta-text { |
| | | color: #5c6b8a; |
| | | font-size: 22rpx; |
| | | } |
| | | |
| | | .list-section { |
| | | padding: 20rpx 24rpx; |
| | | padding-bottom: calc(132rpx + env(safe-area-inset-bottom)); |
| | | } |
| | | |
| | | .ledger-item { |
| | | background: #ffffff; |
| | | border-radius: 20rpx; |
| | | margin-bottom: 16rpx; |
| | | overflow: hidden; |
| | | box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05); |
| | | padding: 0 20rpx; |
| | | } |
| | | |
| | | .item-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 22rpx 0; |
| | | } |
| | | |
| | | .item-left { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10rpx; |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .item-right { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .status-tag { |
| | | .document-icon { |
| | | width: 38rpx; |
| | | height: 38rpx; |
| | | border-radius: 8rpx; |
| | | background: #2979ff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .item-id { |
| | | font-size: 28rpx; |
| | | color: #1f1f1f; |
| | | font-weight: 600; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .item-details { |
| | | padding: 18rpx 0 20rpx; |
| | | } |
| | | |
| | | .detail-row { |
| | | display: flex; |
| | | align-items: flex-end; |
| | | justify-content: space-between; |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | | .detail-label { |
| | | min-width: 80px; // 与公共样式中的 60px 不同 |
| | | min-width: 160rpx; |
| | | color: #777; |
| | | font-size: 24rpx; |
| | | } |
| | | |
| | | .detail-value { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | flex: 1; |
| | | color: #333; |
| | | font-size: 24rpx; |
| | | text-align: right; |
| | | word-break: break-all; |
| | | margin-left: 12rpx; |
| | | } |
| | | |
| | | .ledger-item .action-buttons { |
| | | gap: 8px; // 与公共样式中的 12px 不同 |
| | | .card-actions { |
| | | padding-top: 8rpx; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | flex-wrap: wrap; |
| | | gap: 12rpx; |
| | | } |
| | | |
| | | .action-btn { |
| | | min-width: 100rpx; |
| | | } |
| | | |
| | | .fab-button { |
| | | position: fixed; |
| | | bottom: calc(30px + env(safe-area-inset-bottom)); |
| | | right: 30px; |
| | | width: 56px; |
| | | height: 56px; |
| | | background: #2979ff; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | box-shadow: 0 4px 16px rgba(41, 121, 255, 0.3); |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .no-data { |
| | | padding: 40rpx 0; |
| | | text-align: center; |
| | | color: #999; |
| | | } |
| | | </style> |