group_lawyer_web/src/views/lawyerManagement/reconciliation/detailDialog.vue

<template>
  <el-dialog
    v-model="dialogShow"
    title="订单详情"
    width="60%"
    destroy-on-close
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="detail-table">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="getTableList"
        :data-callback="dataCallback"
        :request-auto="false"
        :tool-button="false"
        :border="true"
        height="360"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose"> 关闭 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose } from "vue";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getLawyerDetails } from "@/api/modules/lawyer";

const dialogShow = ref(false);
const proTable = ref<ProTableInstance>();
const currentQuery = ref<String>("");

const columns: ColumnProps[] = [
  { prop: "index", label: "序号", type: "index", width: 60, align: "center" },
  { label: "用户ID", prop: "clientUserId", minWidth: 120 },
  { label: "用户名", prop: "clientUserName", minWidth: 160, showOverflowTooltip: true },
  { label: "订单编号", prop: "orderNumber", minWidth: 160, showOverflowTooltip: true },
  { label: "订单金额", prop: "orderAmount", minWidth: 140, align: "center" },
  { label: "购买时间", prop: "orderTime", minWidth: 180 }
];

const getTableList = async (params: any) => {
  try {
    const queryParams = {
      lawyerId: currentQuery.value,
      pageNum: params.pageNum || 1,
      pageSize: params.pageSize || 10
    };
    const res: any = await getLawyerDetails(queryParams);
    return res;
  } catch (error) {
    ElMessage.error("加载详情失败，请稍后重试");
    throw error;
  }
};

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

const open = async (lawyerId: String) => {
  currentQuery.value = lawyerId;
  dialogShow.value = true;
  // 等待对话框显示后再刷新表格数据
  await new Promise(resolve => setTimeout(resolve, 100));
  proTable.value?.getTableList();
};

const handleClose = () => {
  dialogShow.value = false;
  currentQuery.value = "";
};

defineExpose({
  open
});
</script>

<style scoped lang="scss">
.detail-table {
  min-height: 360px;
  max-height: 560px;
  overflow: hidden;
}
.detail-table :deep(.el-table__body-wrapper) {
  max-height: 380px;
  overflow: auto;
}
.detail-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
</style>