yoe-shop-web/src/views/valueAdded/maintenance/index.vue

<template>
  <div class="maintenance-container">
    <PageTitle title="维保服务" />
    <el-button type="danger" plain @click="handleApply" style="float: right; margin-bottom: 10px">新增维保</el-button>
    <div v-if="tableData.length">
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" ref="tableRef">
        <el-table-column prop="applicantName" label="申请人名称" min-width="130" align="center" />
        <el-table-column prop="applicantPhone" label="手机号码" min-width="110" align="center" />
        <el-table-column prop="serviceTime" label="服务时间" align="center">
          <template #default="{ row }">
            {{ getDictLabel(service_time_type, row.serviceTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="monthMainten" label="月度维保次数" align="center" />

        <el-table-column prop="maintainType" label="维保类型" min-width="90" align="center">
          <template #default="{ row }">
            {{ getDictLabel(maintenance_type, row.maintainType) }}
          </template>
        </el-table-column>
        <el-table-column prop="serviceContentStr" label="维保类型" align="center" />

        <el-table-column label="操作" width="100" align="center">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleView(row)">查看</el-button>
            <el-button type="danger" link size="small" @click="handleUpdate(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="empty-state" v-else>
      <div class="empty-icon">
        <img
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Crect fill='%23f5f5f5' width='200' height='160' rx='8'/%3E%3Crect x='50' y='60' width='100' height='70' fill='%23e0e0e0' rx='4'/%3E%3Crect x='60' y='70' width='80' height='8' fill='%23ccc'/%3E%3Crect x='60' y='85' width='60' height='6' fill='%23ccc'/%3E%3Crect x='60' y='98' width='70' height='6' fill='%23ccc'/%3E%3Cpath d='M85 45 L95 55 L115 35' stroke='%23ccc' stroke-width='4' fill='none'/%3E%3C/svg%3E"
          alt="empty"
        />
      </div>
      <p class="empty-text">亲！您还未体验过优易办公金牌维保服务，还在犹豫什么！金牌服务从点击开始！</p>
      <el-button type="danger" plain @click="handleApply">加入金牌维保服务</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getMaintainInfoList, listServerItem } from '@/api/pc/valueAdded';
import { PageTitle } from '@/components';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { service_time_type, maintenance_type } = toRefs<any>(proxy?.useDict('service_time_type', 'maintenance_type'));
const router = useRouter();
const pagination = reactive({ page: 1, pageSize: 5, total: 0 });
const tableData = ref<any[]>([]);
const loading = ref(false);
const serviceContentList = ref<any[]>([]);
const handleApply = () => {
  router.push(`/valueAdded/maintenanceApply`);
};

// 查看维保详情
const handleView = (row: any) => {
  router.push({
    path: `/valueAdded/maintenanceApply`,
    query: { id: row.id, mode: 'view' }
  });
};

// 修改维保信息
const handleUpdate = (row: any) => {
  router.push({
    path: `/valueAdded/maintenanceApply`,
    query: { id: row.id, mode: 'edit' }
  });
};

// 加载对账单列表
const loadMaintainInfoList = async () => {
  try {
    loading.value = true;
    const queryParams = {
      pageNum: pagination.page,
      pageSize: pagination.pageSize
    };

    const res = await getMaintainInfoList(queryParams);

    if (res.code === 200 && res.rows) {
      tableData.value = res.rows;
      pagination.total = res.total || 0;
    }
  } catch (error) {
    ElMessage.error('加载维保列表失败');
  } finally {
    loading.value = false;
  }
};
const getDictLabel = (dictOptions: any[], value: string) => {
  if (!dictOptions || !value) return value;
  const dict = dictOptions.find((item) => item.value === value);
  return dict ? dict.label : value;
};

// 加载服务内容列表
const loadServiceContentList = async () => {
  try {
    const res = await listServerItem({});
    serviceContentList.value = res.rows || [];
  } catch (error) {
    ElMessage.error('加载服务内容列表失败');
  }
};
onMounted(() => {
  loadServiceContentList();
  loadMaintainInfoList();
});
</script>

<style scoped lang="scss">
.maintenance-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
  flex: 1;
  border-radius: 4px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;

  .empty-icon {
    width: 200px;
    height: 160px;
    margin-bottom: 24px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .empty-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
  }
}
</style>