com.kasite.client.business.ui.membership/src/master/views/vip/vip-table.vue

<template>
  <div class="vip-page">
    <div class="page-inner">
      <div class="page-title">患者身份等级管理</div>

      <!-- 搜索模块 -->
      <div class="card search-card">
        <div class="search-fields">
          <zy-form inline class="fw search-form">
            <zy-form-item label="权益名称：">
              <zy-input
                v-model="queryData.benefitName"
                placeholder="请输入权益名称"
                clearable
              />
      </zy-form-item>

            <zy-form-item label="当前状态：">
              <zy-select
                v-model="queryData.status"
                placeholder="全部"
                clearable
              >
                <zy-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
        </zy-select>
      </zy-form-item>
    </zy-form>

          <div class="search-actions">
            <zy-button class="btn-search" type="primary" @click="getTableData()">
              查询
            </zy-button>
            <zy-button class="btn-create" @click="handleCreate">
              + 新建服务权益包
            </zy-button>
          </div>
        </div>
      </div>

      <!-- 表格模块 -->
      <div class="card table-card" v-loading="table.loading">
        <zy-table
          height="100%"
          :data="table.data"
          header-align="center"
          align="center"
          :border="true"
          :fit="true"
        >
          <zy-table-column
            prop="levelCode"
            label="身份等级编号"
          />
          <zy-table-column
            prop="levelIconLabel"
            label="身份等级图标"
          >
            <template #default="{ row }">
              <img
                v-if="row.levelIconLabel"
                :src="getImageUrl(row.levelIconLabel)"
                class="level-icon-img"
                alt="身份等级图标"
              />
              <span v-else class="level-tag" :class="row.iconTheme">{{ row.levelIconLabel || "VIP" }}</span>
            </template>
          </zy-table-column>
          <zy-table-column
            prop="levelName"
            label="身份等级名称"
          />
          <zy-table-column
            prop="theme"
            label="主题"
          />
          <zy-table-column
            prop="statusLabel"
            label="当前状态"
          />
          <zy-table-column
            label="操作"
          >
            <template #default="{ row }">
              <zy-button type="text" class="link-btn" @click="handleEdit(row)">编辑</zy-button>
            </template>
          </zy-table-column>
      </zy-table>
    </div>

      <!-- 分页 -->
      <div class="card pagination-card">
      <zy-pagination
        :page-size="table.page.PSize"
        :total="table.page.PCount"
          :pager-count="7"
          layout="pager"
          v-model:currentPage="table.page.PIndex"
        @current-change="getTableData"
      ></zy-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";

const { proxy } = getCurrentInstance() as any;
const store = useStore();
const route = useRoute();
const router = useRouter();

// 搜索条件
let queryData = reactive({
  benefitName: "",
  status: "",
});

const statusOptions = [
  { label: "全部", value: "" },
  { label: "上架", value: "1" },
  { label: "下架", value: "0" },
];

const table = reactive({
  loading: false,
  data: [] as any[],
  page: {
    PIndex: 1,
    PSize: 10,
    PCount: 0,
  },
});

/* 获取表格数据 */
const getTableData = async (e: any = undefined) => {
  !e && (table.page.PIndex = 1);
  table.loading = true;
  try {
    // 直接使用 status 值，空字符串转为 undefined，其他转为数字
    const status = queryData.status === "" ? undefined : Number(queryData.status);

    const { res } = await proxy.$interfaceEntry.vip.QueryPatientLevel({
      IdLevelName: queryData.benefitName || undefined,
      Status: status,
      PageIndex: table.page.PIndex,
      PageSize: table.page.PSize,
    });
    
    if (res.data?.RespCode != 10000) {
      proxy.$message.error(res.data?.errorMsg || res.data?.msg || "查询失败");
      table.data = [];
      table.page.PCount = 0;
      return;
    }

    // 数据结构：res.data.Data[0].DataList 是实际的数据列表
    const dataWrapper = res.data.Data?.[0] || {};
    const list = dataWrapper.DataList || res.data.Data || res.data.list || res.data.List || [];
    
    // 分页信息：从 Page 对象获取
    const pageInfo = res.data.Page || {};
    const totalCount = pageInfo.PCount || dataWrapper.Total || res.data.PCount || res.data.total || list.length;

    table.page.PCount = totalCount;
    table.data = list.map((item: any) => {
      // 后端返回的字段可能是 IdLevelIcon（大写）或 idLevelIcon（小写）
      const iconPath = item.IdLevelIcon || item.idLevelIcon || "";

      return {
        levelCode: item.IdLevelCode || item.idLevelCode,
        levelIconLabel: iconPath,
        levelName: item.IdLevelName || item.idLevelName,
        theme: item.Theme || item.theme,
        statusLabel: (item.Status || item.status) === 1 ? "上架" : "下架",
        // 保存原始数据，编辑时可能需要
        rawData: item,
      };
    });
  } catch (err) {
    table.data = [];
    table.page.PCount = 0;
    proxy.$message.error("查询失败");
  } finally {
    table.loading = false;
  }
};

/** 重置搜索条件 */
const resetData = () => {
  Object.keys(queryData).forEach((key: any) => {
    (queryData as any)[key] = "";
  });
  getTableData();
};

const handleCreate = () => {
  router.push({
    name: "vipEdit",
    query: {
      mode: "create",
    },
  });
};

// 获取图片完整 URL
const getImageUrl = (iconPath: string) => {
  if (!iconPath) return "";
  // 如果路径不是以 http:// 或 https:// 或 / 开头，加上 / 前缀
  if (!iconPath.startsWith("http://") && !iconPath.startsWith("https://") && !iconPath.startsWith("/")) {
    return "/" + iconPath;
  }
  return iconPath;
};

const handleEdit = (row: any) => {
  router.push({
    name: "vipEdit",
    query: {
      mode: "edit",
      code: row.levelCode,
      name: row.levelName,
      theme: row.theme,
      status: row.statusLabel === "上架" ? "1" : "0",
      icon: row.levelIconLabel,
    },
  });
};

onMounted(() => {
  getTableData();
});
</script>

<style scoped>
.vip-page {
  min-height: 100%;
  background: #f5f7fb;
  padding: 24px 0 32px;
  box-sizing: border-box;
}

.page-inner {
  width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(44, 69, 105, 0.08);
  padding: 18px 24px;
  box-sizing: border-box;
}

.search-card {
  display: flex;
  flex-direction: column;
}

.search-fields {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
}

.search-form {
  display: flex;
  align-items: center;
}

.search-form :deep(.el-form-item) {
  margin: 0 16px 0 0;
}

.search-form :deep(.el-form-item__label) {
  color: #555;
}

.search-form :deep(.el-input__inner) {
  width: 220px;
}

.search-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  white-space: nowrap;
}

.btn-search {
  background: var(--el-color-primary);
  border-color: var(--el-color-primary);
  color: #fff;
  padding: 10px 32px;
}

.btn-create {
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-7);
  color: var(--el-color-primary);
  padding: 10px 24px;
}

.table-card {
  padding: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-card :deep(.el-table) {
  width: 100%;
  border: none;
  flex: 1;
}

.table-card :deep(.el-table__header th),
.table-card :deep(.el-table__body td) {
  text-align: center;
  font-size: 14px;
}

.table-card :deep(.el-table__body-wrapper),
.table-card :deep(.el-table__header-wrapper) {
  padding: 0;
}

/* 按 3:3:8:2:2:2 比例填满整行（共 20 份） */
.table-card :deep(.el-table__header colgroup col:nth-child(1)),
.table-card :deep(.el-table__body colgroup col:nth-child(1)) {
  width: 15% !important; /* 3/20 */
}
.table-card :deep(.el-table__header colgroup col:nth-child(2)),
.table-card :deep(.el-table__body colgroup col:nth-child(2)) {
  width: 15% !important; /* 3/20 */
}
.table-card :deep(.el-table__header colgroup col:nth-child(3)),
.table-card :deep(.el-table__body colgroup col:nth-child(3)) {
  width: 40% !important; /* 8/20 */
}
.table-card :deep(.el-table__header colgroup col:nth-child(4)),
.table-card :deep(.el-table__body colgroup col:nth-child(4)) {
  width: 10% !important; /* 2/20 */
}
.table-card :deep(.el-table__header colgroup col:nth-child(5)),
.table-card :deep(.el-table__body colgroup col:nth-child(5)) {
  width: 10% !important; /* 2/20 */
}
.table-card :deep(.el-table__header colgroup col:nth-child(6)),
.table-card :deep(.el-table__body colgroup col:nth-child(6)) {
  width: 10% !important; /* 2/20 */
}

.level-icon-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
}

.level-tag {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  min-width: 60px;
}

.tag-vip {
  background: #f69c45;
}
.tag-svip {
  background: #f67f45;
}
.tag-wip {
  background: #f45d45;
}

.link-btn {
  color: #2e74c6;
}

.pagination-card {
  display: flex;
  justify-content: center;
  padding: 16px;
  margin-top: auto;
  margin-bottom: 0;
}

.pagination-card :deep(.el-pagination.is-background .el-pager li) {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: var(--el-text-color-regular);
  margin: 0 6px;
  border-radius: 6px;
  min-width: 42px;
  height: 34px;
  line-height: 34px;
}

.pagination-card :deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
  color: #fff;
}
</style>