巡检管理更名

zhangwencui

8 天以前 d8bc554368a78a0ad218b0f5903939fcc344b93a

 src/pages/equipmentManagement/repair/index.vue

@@ -1,44 +1,49 @@
<template>
  <view class="device-repair">
  <view class="sales-account">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="设备报修" @back="goBack" />
    
    <PageHeader title="设备报修"
                @back="goBack" />
    <!-- 搜索区域 -->
    <view class="search-filter-section">
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <input
            class="search-text"
            placeholder="请输入设备名称"
            v-model="searchKeyword"
            confirm-type="search"
            @confirm="getList"
          />
          <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="filter-button"
              @click="getList">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
    </view>
    
    <!-- 设备报修列表 -->
    <view class="repair-list" v-if="repairList.length > 0">
      <view v-for="(item, index) in repairList" :key="index">
        <view class="repair-item">
    <view class="ledger-list"
          v-if="repairList.length > 0">
      <view v-for="(item, index) in repairList"
            :key="index">
        <view class="ledger-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">设备名称：{{ item.deviceName }}</text>
            </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>
              <u-tag v-if="item.status === 1"
                     type="success">完结</u-tag>
              <u-tag v-if="item.status === 0"
                     type="error">待维修</u-tag>
            </view>
          </view>
          <up-divider></up-divider>
          
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">规格型号</text>
@@ -69,343 +74,193 @@
              <text class="detail-value">{{ formatDate(item.maintenanceTime) || '-' }}</text>
            </view>
          </view>
          
          <!-- 按钮区域 -->
          <view class="action-buttons">
            <u-button
              type="primary"
              size="small"
              class="action-btn"
              @click="edit(item.id)"
            >
            <u-button type="primary"
                      size="small"
                      class="action-btn"
                      :disabled="item.status === 1"
                      @click="edit(item.id)">
              编辑
            </u-button>
            <u-button
              type="warning"
              size="small"
              class="action-btn"
              :disabled="item.status === 1"
              @click="addMaintain(item.id)"
            >
            <u-button type="warning"
                      size="small"
                      class="action-btn"
                      :disabled="item.status === 1"
                      @click="addMaintain(item.id)">
              新增维修
            </u-button>
            <u-button
              type="error"
              size="small"
              plain
              class="action-btn"
              @click="delRepairByIds(item.id)"
            >
            <u-button type="error"
                      size="small"
                      plain
                      class="action-btn"
                      @click="delRepairByIds(item.id)">
              删除
            </u-button>
          </view>
        </view>
      </view>
    </view>
    
    <view v-else class="no-data">
    <view v-else
          class="no-data">
      <text>暂无设备报修数据</text>
    </view>
    <!-- 浮动操作按钮 -->
      <view class="fab-button" @click="addRepair">
         <up-icon name="plus" size="24" color="#ffffff"></up-icon>
      </view>
    <view class="fab-button"
          @click="addRepair">
      <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 { getRepairPage, delRepair } from '@/api/equipmentManagement/repair'
import useUserStore from "@/store/modules/user"
  import { ref, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import { getRepairPage, delRepair } from "@/api/equipmentManagement/repair";
  import useUserStore from "@/store/modules/user";

const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };

const userStore = useUserStore()
  const userStore = useUserStore();

// 搜索关键词
const searchKeyword = ref('')
  // 搜索关键词
  const searchKeyword = ref("");

// 设备报修数据
const repairList = ref([])
  // 设备报修数据
  const repairList = ref([]);

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
  // 格式化日期
  const formatDate = dateStr => {
    if (!dateStr) return "";
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  };

// 查询列表
const getList = () => {
  showLoadingToast('加载中...')
  const params = {
    current: -1,
    size: -1,
    deviceName: searchKeyword.value || undefined
  }
  getRepairPage(params)
    .then((res) => {
      repairList.value = res.records || res.data?.records || []
      closeToast()
    })
    .catch(() => {
      closeToast()
      showToast('获取数据失败')
    })
}
  // 查询列表
  const getList = () => {
    showLoadingToast("加载中...");
    const params = {
      current: -1,
      size: -1,
      deviceName: searchKeyword.value || undefined,
    };
    getRepairPage(params)
      .then(res => {
        repairList.value = res.records || res.data?.records || [];
        closeToast();
      })
      .catch(() => {
        closeToast();
        showToast("获取数据失败");
      });
  };

// 显示加载提示
const showLoadingToast = (message) => {
  uni.showLoading({
    title: message,
    mask: true
  });
};
  // 显示加载提示
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// 关闭提示
const closeToast = () => {
  uni.hideLoading();
};
  // 关闭提示
  const closeToast = () => {
    uni.hideLoading();
  };

// 新增维修 - 跳转到维修页面
const addMaintain = (id) => {
  if (!id) {
    showToast('参数错误')
    return
  }
  uni.navigateTo({
    url: `/pages/equipmentManagement/repair/maintain?id=${id}`
  })
}

// 新增报修 - 跳转到报修页面
const addRepair = () => {
  uni.navigateTo({
    url: '/pages/equipmentManagement/repair/add'
  })
}

// 编辑 - 跳转到add页面，通过id区分新增还是编辑
const edit = (id) => {
  if (!id) return
  uni.navigateTo({
    url: `/pages/equipmentManagement/repair/add?id=${id}`
  })
}

// 删除报修数据
const delRepairByIds = async (ids) => {
  uni.showModal({
    title: '警告',
    content: '确认删除报修数据, 此操作不可逆?',
    confirmText: '确定',
    cancelText: '取消',
    success: async (res) => {
      if (!res.confirm) return
      try {
        const response = await delRepair(ids)
        if (response.code === 200) {
          showToast('删除成功')
          getList()
        } else {
          showToast('删除失败')
        }
      } catch (e) {
        showToast('删除失败')
      }
  // 新增维修 - 跳转到维修页面
  const addMaintain = id => {
    if (!id) {
      showToast("参数错误");
      return;
    }
  })
}
    // 使用uni.setStorageSync存储id
    uni.setStorageSync("repairId", id);
    uni.navigateTo({
      url: "/pages/equipmentManagement/repair/maintain",
    });
  };

onMounted(() => {
  getList()
})
  // 新增报修 - 跳转到报修页面
  const addRepair = () => {
    uni.navigateTo({
      url: "/pages/equipmentManagement/repair/add",
    });
  };

onShow(() => {
  getList()
})
  // 编辑 - 跳转到add页面，通过id区分新增还是编辑
  const edit = id => {
    if (!id) return;
    // 使用uni.setStorageSync存储id
    uni.setStorageSync("repairId", id);
    uni.navigateTo({
      url: "/pages/equipmentManagement/repair/add",
    });
  };

  // 删除报修数据
  const delRepairByIds = async ids => {
    uni.showModal({
      title: "警告",
      content: "确认删除报修数据, 此操作不可逆?",
      confirmText: "确定",
      cancelText: "取消",
      success: async res => {
        if (!res.confirm) return;
        try {
          const response = await delRepair(ids);
          if (response.code === 200) {
            showToast("删除成功");
            getList();
          } else {
            showToast("删除失败");
          }
        } catch (e) {
          showToast("删除失败");
        }
      },
    });
  };

  onMounted(() => {
    getList();
  });

  onShow(() => {
    getList();
  });
</script>

<style scoped lang="scss">
.u-divider {
  margin: 0 !important;
}
  @import "@/styles/sales-common.scss";

.device-repair {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
  padding-bottom: 80px;
}

.search-filter-section {
  padding: 10px 20px;
  background: #ffffff;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 24px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-text {
  flex: 1;
  font-size: 14px;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
}

.search-text::placeholder {
  color: #999;
}

.filter-button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.repair-list {
  padding: 20px;
}

.repair-item {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 0 16px;
}

.item-header {
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-icon {
  width: 24px;
  height: 24px;
  background: #2979ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-id {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.status-tag {
  display: flex;
  align-items: center;
}

.item-details {
  padding: 16px 0;
}

.detail-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
  
  &:last-child {
    margin-bottom: 0;
  // 设备维修特有样式
  .sales-account {
    padding-bottom: 80px; // 为浮动按钮留出空间
  }
}

.detail-label {
  font-size: 12px;
  color: #777777;
  min-width: 60px;
}
  .status-tag {
    display: flex;
    align-items: center;
  }

.detail-value {
  font-size: 12px;
  color: #000000;
  text-align: right;
  flex: 1;
  margin-left: 16px;
}

.detail-value.highlight {
  color: #2979ff;
  font-weight: 500;
}

.no-data {
  padding: 40px 0;
  text-align: center;
  color: #999;
}

.action-buttons {
  display: flex;
  gap: 8px;
  padding: 0 0 16px 0;
  justify-content: space-between;
}

.action-btn {
  flex: 1;
}
.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;
   /* 确保浮动按钮不被底部安全区域遮挡 */
}
  .action-buttons {
    gap: 8px; // 与公共样式中的 12px 不同
  }
</style>