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

<template>
  <el-dialog
    v-model="dialogShow"
    title="订单详情"
    width="920px"
    destroy-on-close
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="detail-table">
      <ProTable ref="proTable" :data="detailList" :columns="columns" :tool-button="false" :border="true" height="360" />
    </div>
  </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 { ColumnProps } from "@/components/ProTable/interface";
import { getLawyerDetails } from "@/api/modules/lawyer";

const dialogShow = ref(false);
const detailList = ref<any[]>([]);
const currentQuery = ref<String>("");

const columns: ColumnProps[] = [
  { 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 fetchDetails = async () => {
  try {
    const res: any = await getLawyerDetails({
      lawyerId: currentQuery.value
    });
    detailList.value = res.data?.records;
  } catch (error) {
    detailList.value = [];
    ElMessage.error("加载详情失败，请稍后重试");
  }
};

const open = async (lawyerId: String) => {
  currentQuery.value = lawyerId;
  dialogShow.value = true;
  await fetchDetails();
};

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

defineExpose({
  open
});
</script>

<style scoped lang="scss">
.detail-table {
  min-height: 360px;
  max-height: 460px;
  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>