spring
8 小时以前 633568cff8a45c9f92aec1ec5edb5a09a3b0d8a4
src/pages/equipmentManagement/upkeep/index.vue
@@ -1,95 +1,86 @@
<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="warning">待保养</u-tag>
              <u-tag v-if="item.status === 2"
                     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>
              <text class="detail-value">{{item.maintenanceResult || '-'}}
              </text>
            </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, item)">
              保养
            </u-button>
@@ -106,21 +97,14 @@
                      @click.stop="viewDetail(item)">
              详情
            </u-button>
            <!-- <u-button type="warning"
                      size="small"
                      class="action-btn"
                      @click.stop="addFile(item.id)">
              附件
            </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"
@@ -153,7 +137,10 @@
  // 设备保养数据
  const upkeepList = ref([]);
  // 多选列表
  const total = ref(0);
  const loading = ref(false);
  // 多选列表(保养按钮未传 id 时用)
  const multipleList = ref([]);
  // 返回上一页
@@ -173,9 +160,13 @@
    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,
@@ -183,13 +174,16 @@
    };
    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;
      });
  };
  // 新增附件 - 跳转到附件页面
@@ -321,45 +315,182 @@
</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>