zhangwencui
8 天以前 d8bc554368a78a0ad218b0f5903939fcc344b93a
src/pages/equipmentManagement/repair/index.vue
@@ -1,44 +1,49 @@
<template>
  <view class="sales-account">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="设备报修" @back="goBack" />
    <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
          />
          <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="ledger-list" v-if="repairList.length > 0">
      <view v-for="(item, index) in repairList" :key="index">
    <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,197 +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"
              :disabled="item.status === 1"
              @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.setStorageSync存储id
  uni.setStorageSync('repairId', id)
  uni.navigateTo({
    url: '/pages/equipmentManagement/repair/maintain'
  })
}
// 新增报修 - 跳转到报修页面
const addRepair = () => {
  uni.navigateTo({
    url: '/pages/equipmentManagement/repair/add'
  })
}
// 编辑 - 跳转到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('删除失败')
      }
  // 新增维修 - 跳转到维修页面
  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">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";
// 设备维修特有样式
.sales-account {
  padding-bottom: 80px; // 为浮动按钮留出空间
}
  // 设备维修特有样式
  .sales-account {
    padding-bottom: 80px; // 为浮动按钮留出空间
  }
.status-tag {
  display: flex;
  align-items: center;
}
  .status-tag {
    display: flex;
    align-items: center;
  }
.action-buttons {
  gap: 8px; // 与公共样式中的 12px 不同
}
  .action-buttons {
    gap: 8px; // 与公共样式中的 12px 不同
  }
</style>