group_web_merchant/src/views/operationManagement/cases.vue

<template>
  <div class="table-box button-table">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      :refresh-reset-page="true"
    >
      <template #operation="scope">
        <el-button type="primary" link @click="toDetail(scope.row)"> 查看详情 </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="cases">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElLoading } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getPersonCaseList } from "@/api/modules/operationManagement";
import { localGet } from "@/utils";

const router = useRouter();
const proTable = ref<ProTableInstance>();

const columns = reactive<ColumnProps<any>[]>([
  { prop: "signupName", label: "姓名", minWidth: 300 },
  { prop: "signupPhone", label: "联系方式", width: 300 },
  {
    prop: "activityName",
    label: "所属活动",
    minWidth: 300,
    search: {
      el: "input",
      props: { placeholder: "请输入" },
      order: 2
    }
  },
  { prop: "operation", label: "操作", fixed: "right", width: 300 }
]);

const initParam = reactive({
  storeId: localGet("createdId")
});

const dataCallback = (data: any) => ({
  list: data?.records ?? [],
  total: data?.total ?? 0
});

const getTableList = async (params: any) => {
  // 显示全屏loading
  const loadingInstance = ElLoading.service({
    lock: true,
    text: "加载中...",
    background: "rgba(0, 0, 0, 0.7)"
  });

  try {
    // 转换参数格式以匹配新接口
    const newParams: any = {
      storeId: params.storeId || localGet("createdId"),
      pageNum: params.page || params.pageNum || 1,
      pageSize: params.size || params.pageSize || 10
    };

    // 上传情况筛选（未上传0 / 已上传1）
    newParams.hasResult = params.hasResult;

    // 所属活动（活动名称）筛选
    if (params.activityName) {
      newParams.activityName = params.activityName.trim();
    }

    const result = await getPersonCaseList(newParams);
    return result;
  } finally {
    // 关闭loading
    loadingInstance.close();
  }
};

const toDetail = (row: any) => {
  router.push(`/operationManagement/caseDetail?activityId=${row.activityId}&userId=${row.userId}`);
};
</script>