spring
9 小时以前 633568cff8a45c9f92aec1ec5edb5a09a3b0d8a4
src/pages/equipmentManagement/upkeep/index.vue
@@ -1,329 +1,496 @@
<template>
  <view class="sales-account">
    <!-- 使用通用页面头部组件 -->
    <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="upkeep-page">
    <PageHeader title="设备保养"
                @back="goBack" />
    <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 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>
    <view class="list-section">
      <view v-for="(item, index) in upkeepList"
            :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">
                完好
              </u-tag>
              <u-tag v-if="item.maintenanceResult === 0" type="error">
                维修
              </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>
            <u-button
              type="warning"
              size="small"
              class="action-btn"
              :disabled="item.status === 1"
              @click.stop="addMaintain(item.id)"
            >
          <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>
            <u-button
              type="error"
              size="small"
              plain
              class="action-btn"
              @click.stop="delUpkeepByIds(item.id)"
            >
            <u-button type="error"
                      size="small"
                      plain
                      class="action-btn"
                      @click.stop="delUpkeepByIds(item.id)">
              删除
            </u-button>
            <u-button type="info"
                      size="small"
                      class="action-btn"
                      @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" size="24" color="#ffffff"></up-icon>
    <view class="fab-button"
          @click="addPlan">
      <up-icon name="plus"
               size="24"
               color="#ffffff"></up-icon>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import PageHeader from '@/components/PageHeader.vue'
import { getUpkeepPage, delUpkeep } from '@/api/equipmentManagement/upkeep'
import useUserStore from "@/store/modules/user"
// 显示提示信息
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
};
import dayjs from "dayjs"
  import { ref, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import { getUpkeepPage, delUpkeep } from "@/api/equipmentManagement/upkeep";
  import useUserStore from "@/store/modules/user";
  // 显示提示信息
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };
  import dayjs from "dayjs";
const userStore = useUserStore()
  const userStore = useUserStore();
// 搜索关键词
const searchKeyword = ref('')
  // 搜索关键词
  const searchKeyword = ref("");
// 设备保养数据
const upkeepList = ref([])
  // 设备保养数据
  const upkeepList = ref([]);
// 多选列表
const multipleList = ref([])
  const total = ref(0);
  const loading = ref(false);
// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
  // 多选列表(保养按钮未传 id 时用)
  const multipleList = ref([]);
// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  return dayjs(dateStr).format("YYYY-MM-DD")
}
  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };
// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return ''
  return dayjs(dateStr).format("YYYY-MM-DD HH:mm:ss")
}
  // 格式化日期
  const formatDate = dateStr => {
    if (!dateStr) return "";
    return dayjs(dateStr).format("YYYY-MM-DD");
  };
// 查询列表
const getList = () => {
  showLoadingToast('加载中...')
  const params = {
    current: -1,
    size: -1,
    deviceName: searchKeyword.value || undefined
  }
  getUpkeepPage(params)
    .then((res) => {
      // 如果res.data不是数组,设置为空数组
      upkeepList.value = res.records || res.data?.records || []
      closeToast()
    })
    .catch(() => {
      closeToast()
      showToast('获取数据失败')
    })
}
  // 格式化日期时间
  const formatDateTime = dateStr => {
    if (!dateStr) return "";
    return dayjs(dateStr).format("YYYY-MM-DD HH:mm:ss");
  };
// 显示加载提示
const showLoadingToast = (message) => {
  uni.showLoading({
    title: message,
    mask: true
  });
};
  const handleQuery = () => {
    getList();
  };
// 关闭提示
const closeToast = () => {
  uni.hideLoading();
};
  // 查询列表
  const getList = () => {
    loading.value = true;
    const params = {
      current: -1,
      size: -1,
      deviceName: searchKeyword.value || undefined,
    };
    getUpkeepPage(params)
      .then(res => {
        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(() => {
        upkeepList.value = [];
        showToast("获取数据失败");
      })
      .finally(() => {
        loading.value = false;
      });
  };
  // 新增附件 - 跳转到附件页面
  const addFile = id => {
    // 使用本地存储传递id
    uni.setStorageSync("upkeepId", id);
    uni.navigateTo({
      url: "/pages/equipmentManagement/upkeep/fileList",
    });
  };
// 切换选择状态
const toggleSelection = (item) => {
  const index = multipleList.value.findIndex(selected => selected.id === item.id)
  if (index > -1) {
    multipleList.value.splice(index, 1)
  } else {
    multipleList.value.push(item)
  }
}
  // 显示加载提示
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };
// 检查是否已选择
const isSelected = (item) => {
  return multipleList.value.some(selected => selected.id === item.id)
}
  // 关闭提示
  const closeToast = () => {
    uni.hideLoading();
  };
// 新增保养 - 跳转到保养页面
const addMaintain = (id) => {
  if (!id && multipleList.value.length !== 1) {
    showToast('请选择一条记录')
    return
  }
  const targetId = id || multipleList.value[0].id
  uni.navigateTo({
    url: `/pages/equipmentManagement/upkeep/maintain?id=${targetId}`
  })
}
// 新增计划 - 跳转到新增页面
const addPlan = () => {
  uni.navigateTo({
    url: '/pages/equipmentManagement/upkeep/add'
  })
}
// 编辑 - 跳转到add页面,通过id区分新增还是编辑
const edit = (id) => {
  if (!id) return
  uni.navigateTo({
    url: `/pages/equipmentManagement/upkeep/add?id=${id}`
  })
}
// 删除保养数据
const delUpkeepByIds = async (ids) => {
  const deleteIds = Array.isArray(ids) ? ids : [ids]
  if (deleteIds.length === 0) {
    showToast('请选择要删除的记录')
    return
  }
  uni.showModal({
    title: '警告',
    content: '确认删除保养数据, 此操作不可逆?',
    confirmText: '确定',
    cancelText: '取消',
    success: async (res) => {
      if (!res.confirm) return
      try {
        // 逐个删除
        for (const id of deleteIds) {
          const response = await delUpkeep(id)
          if (response.code !== 200) {
            showToast('删除失败')
            return
          }
        }
        showToast('删除成功')
        multipleList.value = []
        getList()
      } catch (e) {
        showToast('删除失败')
      }
  // 切换选择状态
  const toggleSelection = item => {
    const index = multipleList.value.findIndex(
      selected => selected.id === item.id
    );
    if (index > -1) {
      multipleList.value.splice(index, 1);
    } else {
      multipleList.value.push(item);
    }
  })
}
  };
onMounted(() => {
  getList()
})
  // 检查是否已选择
  const isSelected = item => {
    return multipleList.value.some(selected => selected.id === item.id);
  };
onShow(() => {
  getList()
})
  // 新增保养 - 跳转到保养页面
  const addMaintain = (id, item) => {
    if (!id && multipleList.value.length !== 1) {
      showToast("请选择一条记录");
      return;
    }
    const targetId = id || multipleList.value[0].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",
    });
  };
  // 新增计划 - 跳转到新增页面
  const addPlan = () => {
    uni.navigateTo({
      url: "/pages/equipmentManagement/upkeep/add",
    });
  };
  // 编辑 - 跳转到add页面,通过id区分新增还是编辑
  const edit = id => {
    if (!id) return;
    // 使用本地存储传递id
    uni.setStorageSync("repairId", id);
    uni.navigateTo({
      url: "/pages/equipmentManagement/upkeep/add",
    });
  };
  // 删除保养数据
  const delUpkeepByIds = async ids => {
    const deleteIds = Array.isArray(ids) ? ids : [ids];
    if (deleteIds.length === 0) {
      showToast("请选择要删除的记录");
      return;
    }
    uni.showModal({
      title: "警告",
      content: "确认删除保养数据, 此操作不可逆?",
      confirmText: "确定",
      cancelText: "取消",
      success: async res => {
        if (!res.confirm) return;
        try {
          // 逐个删除
          for (const id of deleteIds) {
            const response = await delUpkeep(id);
            if (response.code !== 200) {
              showToast("删除失败");
              return;
            }
          }
          showToast("删除成功");
          multipleList.value = [];
          getList();
        } catch (e) {
          showToast("删除失败");
        }
      },
    });
  };
  onMounted(() => {
    getList();
  });
  onShow(() => {
    getList();
  });
</script>
<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  .upkeep-page {
    min-height: 100vh;
    background: #f6f7fb;
  }
// 设备保养特有样式
.sales-account {
  padding-bottom: 80px; // 为浮动按钮留出空间
}
  .toolbar {
    padding: 20rpx 24rpx;
    background: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 10;
  }
.action-section {
  padding: 10px 20px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}
  .search-section {
    margin-top: 0;
  }
.action-section .action-buttons {
  gap: 8px; // 与公共样式中的 12px 不同
  justify-content: flex-start;
}
  .search-bar {
    display: flex;
    align-items: center;
    background: #f7f8fa;
    border-radius: 14rpx;
    padding: 8rpx 12rpx 8rpx 16rpx;
    border: 1rpx solid #eef1f5;
  }
.checkbox-wrapper {
  display: flex;
  align-items: center;
}
  .search-input {
    flex: 1;
    min-width: 0;
  }
.status-tag {
  display: flex;
  align-items: center;
}
  .search-text {
    background: transparent !important;
  }
.detail-label {
  min-width: 80px; // 与公共样式中的 60px 不同
}
  :deep(.search-text .u-input__content),
  :deep(.search-text .up-input__content) {
    background: transparent !important;
    padding: 0 !important;
  }
.detail-value {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
  .search-button {
    width: 64rpx;
    height: 64rpx;
    border-radius: 12rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.ledger-item .action-buttons {
  gap: 8px; // 与公共样式中的 12px 不同
}
  .meta-bar {
    margin-top: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f9fc;
    border-radius: 12rpx;
    padding: 10rpx 16rpx;
  }
  .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;
  }
  .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: 160rpx;
    color: #777;
    font-size: 24rpx;
  }
  .detail-value {
    flex: 1;
    color: #333;
    font-size: 24rpx;
    text-align: right;
    word-break: break-all;
    margin-left: 12rpx;
  }
  .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>