diff --git a/src/api/approval/directory/index.ts b/src/api/approval/directory/index.ts
new file mode 100644
index 0000000..b7a2e8a
--- /dev/null
+++ b/src/api/approval/directory/index.ts
@@ -0,0 +1,34 @@
+import request from '@/utils/request';
+import type { ApiResult } from '@/api';
+import type { ApprovalOrganization, ApprovalUser } from '../instance/model';
+import { THINK_API_URL } from '@/config/setting';
+
+/**
+ * 启用组织（审批管理下拉）
+ */
+export async function listApprovalOrganizations() {
+  const res = await request.get<ApiResult<ApprovalOrganization[]>>(
+    THINK_API_URL + '/approval/directory/organizations'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 启用用户远程搜索（审批管理下拉）
+ */
+export async function searchApprovalUsers(params?: {
+  keywords?: string;
+  organizationId?: number;
+}) {
+  const res = await request.get<ApiResult<ApprovalUser[]>>(
+    THINK_API_URL + '/approval/directory/users',
+    { params }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/api/approval/instance/index.ts b/src/api/approval/instance/index.ts
new file mode 100644
index 0000000..79ae7e9
--- /dev/null
+++ b/src/api/approval/instance/index.ts
@@ -0,0 +1,35 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type {
+  ApprovalInstance,
+  ApprovalItem,
+  ApprovalQueryParam
+} from './model';
+import { THINK_API_URL } from '@/config/setting';
+
+/**
+ * 单据查询分页
+ */
+export async function pageInstances(params: ApprovalQueryParam) {
+  const res = await request.get<ApiResult<PageResult<ApprovalItem>>>(
+    THINK_API_URL + '/approval/instance/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 单据详情（只读）
+ */
+export async function getInstance(id: number) {
+  const res = await request.get<ApiResult<ApprovalInstance>>(
+    THINK_API_URL + '/approval/instance/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/api/approval/instance/model/index.ts b/src/api/approval/instance/model/index.ts
new file mode 100644
index 0000000..bae51da
--- /dev/null
+++ b/src/api/approval/instance/model/index.ts
@@ -0,0 +1,172 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 单据查询条件
+ */
+export interface ApprovalQueryParam extends PageParam {
+  // 单据类型 completion/coordination
+  docType?: string;
+  // 单号
+  bizNo?: string;
+  // 关键词：单号、名称或标题、实施单位
+  keyword?: string;
+  // 报送部门id
+  reportOrgId?: number;
+  // 受理部门id
+  acceptOrgId?: number;
+  // 发起人id
+  reporterId?: number;
+  // 单据状态
+  status?: string;
+  // 提交时间起
+  submitTimeStart?: string;
+  // 提交时间止
+  submitTimeEnd?: string;
+  // 归档时间起
+  archiveTimeStart?: string;
+  // 归档时间止
+  archiveTimeEnd?: string;
+}
+
+/**
+ * 单据列表行
+ */
+export interface ApprovalItem {
+  id?: number;
+  bizNo?: string;
+  docType?: string;
+  docTypeName?: string;
+  status?: string;
+  statusName?: string;
+  // 名称或标题
+  title?: string;
+  submitTime?: string;
+  currentNodeName?: string;
+  reporterId?: number;
+  reporterName?: string;
+  reportOrgName?: string;
+  acceptOrgName?: string;
+  archiveTime?: string;
+}
+
+/**
+ * 附件
+ */
+export interface ApprovalAttachment {
+  id?: number;
+  fileId?: number;
+  name?: string;
+  url?: string;
+  length?: number;
+  category?: string;
+  categoryName?: string;
+  uploaderId?: number;
+  uploaderName?: string;
+  createTime?: string;
+}
+
+/**
+ * 处理记录
+ */
+export interface ApprovalRecord {
+  id?: number;
+  taskId?: number;
+  nodeKey?: string;
+  nodeName?: string;
+  operatorId?: number;
+  operatorName?: string;
+  action?: string;
+  actionName?: string;
+  opinion?: string;
+  round?: number;
+  createTime?: string;
+}
+
+/**
+ * 当前轮存档确认
+ */
+export interface ApprovalConfirm {
+  userId?: number;
+  userName?: string;
+  status?: string;
+  statusName?: string;
+  handleTime?: string;
+}
+
+/**
+ * 我的待处理任务
+ */
+export interface ApprovalMyTask {
+  id?: number;
+  nodeKey?: string;
+  nodeType?: string;
+  status?: string;
+}
+
+/**
+ * 单据详情
+ */
+export interface ApprovalInstance {
+  id?: number;
+  bizNo?: string;
+  docType?: string;
+  docTypeName?: string;
+  flowCode?: string;
+  status?: string;
+  statusName?: string;
+  round?: number;
+  reporterId?: number;
+  reporterName?: string;
+  reportOrgId?: number;
+  reportOrgName?: string;
+  acceptOrgId?: number;
+  acceptOrgName?: string;
+  currentNodeKey?: string;
+  currentNodeType?: string;
+  currentNodeName?: string;
+  submitTime?: string;
+  approveTime?: string;
+  archiveTime?: string;
+  archivistId?: number;
+  archivistName?: string;
+  // 业务完成确认单
+  name?: string;
+  implementOrg?: string;
+  fee?: number;
+  serviceContent?: string;
+  // 内部协调单
+  title?: string;
+  content?: string;
+  remark?: string;
+  dispatchTargetId?: number;
+  dispatchTargetName?: string;
+  attachments?: ApprovalAttachment[];
+  records?: ApprovalRecord[];
+  confirms?: ApprovalConfirm[];
+  myTask?: ApprovalMyTask | null;
+  permissions?: Record<string, boolean>;
+}
+
+/**
+ * 审批目录组织
+ */
+export interface ApprovalOrganization {
+  organizationId?: number;
+  parentId?: number;
+  organizationName?: string;
+  organizationFullName?: string;
+  organizationCode?: string;
+  leaderId?: number;
+}
+
+/**
+ * 审批目录用户
+ */
+export interface ApprovalUser {
+  userId?: number;
+  username?: string;
+  nickname?: string;
+  realName?: string;
+  organizationId?: number;
+  organizationName?: string;
+}
diff --git a/src/views/approval/instance/components/detail.vue b/src/views/approval/instance/components/detail.vue
new file mode 100644
index 0000000..d8a3da3
--- /dev/null
+++ b/src/views/approval/instance/components/detail.vue
@@ -0,0 +1,280 @@
+<!-- 单据详情抽屉（只读） -->
+<template>
+  <ele-modal
+    title="单据详情"
+    :width="860"
+    :footer="null"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <a-spin :spinning="loading">
+      <template v-if="data">
+        <a-descriptions
+          :column="2"
+          size="small"
+          bordered
+          :label-style="{ width: '110px' }"
+        >
+          <a-descriptions-item label="单号">
+            {{ data.bizNo || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="单据类型">
+            {{ data.docTypeName || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="状态">
+            <a-tag :color="statusColor(data.status)">
+              {{ data.statusName || '-' }}
+            </a-tag>
+          </a-descriptions-item>
+          <a-descriptions-item label="当前节点">
+            {{ data.currentNodeName || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="发起人">
+            {{ data.reporterName || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="报送部门">
+            {{ data.reportOrgName || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="受理部门">
+            {{ data.acceptOrgName || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="提交时间">
+            {{ toDateString(data.submitTime) || '-' }}
+          </a-descriptions-item>
+          <template v-if="data.docType === 'completion'">
+            <a-descriptions-item label="名称" :span="2">
+              {{ data.name || '-' }}
+            </a-descriptions-item>
+            <a-descriptions-item label="实施单位">
+              {{ data.implementOrg || '-' }}
+            </a-descriptions-item>
+            <a-descriptions-item label="费用（元）">
+              {{ data.fee ?? '-' }}
+            </a-descriptions-item>
+            <a-descriptions-item label="服务内容" :span="2">
+              <div class="ele-text-break">{{ data.serviceContent || '-' }}</div>
+            </a-descriptions-item>
+          </template>
+          <template v-else>
+            <a-descriptions-item label="标题" :span="2">
+              {{ data.title || '-' }}
+            </a-descriptions-item>
+            <a-descriptions-item label="协调内容" :span="2">
+              <div class="ele-text-break">{{ data.content || '-' }}</div>
+            </a-descriptions-item>
+            <a-descriptions-item label="备注" :span="2">
+              <div class="ele-text-break">{{ data.remark || '-' }}</div>
+            </a-descriptions-item>
+            <a-descriptions-item label="派单对象">
+              {{ data.dispatchTargetName || '-' }}
+            </a-descriptions-item>
+            <a-descriptions-item label="审批完成时间">
+              {{ toDateString(data.approveTime) || '-' }}
+            </a-descriptions-item>
+          </template>
+          <a-descriptions-item label="归档时间">
+            {{ toDateString(data.archiveTime) || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="归档人">
+            {{ data.archivistName || '-' }}
+          </a-descriptions-item>
+        </a-descriptions>
+
+        <a-divider orientation="left">附件</a-divider>
+        <div v-if="data.attachments && data.attachments.length">
+          <div
+            v-for="attachment in data.attachments"
+            :key="attachment.id"
+            class="attachment-item"
+          >
+            <a :href="attachment.url" target="_blank" rel="noopener noreferrer">
+              {{ attachment.name || '附件' }}
+            </a>
+            <a-tag style="margin-left: 8px">
+              {{ attachment.categoryName || '-' }}
+            </a-tag>
+            <span class="ele-text-secondary" style="margin-left: 8px">
+              {{ sizeText(attachment.length) }}
+            </span>
+          </div>
+        </div>
+        <div v-else class="ele-text-secondary">暂无附件</div>
+
+        <a-divider orientation="left">存档确认</a-divider>
+        <div v-if="data.confirms && data.confirms.length">
+          <div
+            v-for="confirm in data.confirms"
+            :key="confirm.userId"
+            class="confirm-item"
+          >
+            <span>{{ confirm.userName || '-' }}</span>
+            <a-tag
+              style="margin-left: 8px"
+              :color="confirm.status === 'DONE' ? 'green' : 'default'"
+            >
+              {{ confirm.statusName || '-' }}
+            </a-tag>
+            <span class="ele-text-secondary" style="margin-left: 8px">
+              {{ toDateString(confirm.handleTime) || '' }}
+            </span>
+          </div>
+        </div>
+        <div v-else class="ele-text-secondary">尚未进入存档环节</div>
+
+        <a-divider orientation="left">处理记录</a-divider>
+        <a-timeline v-if="data.records && data.records.length">
+          <a-timeline-item
+            v-for="record in data.records"
+            :key="record.id"
+            :color="actionColor(record.action)"
+          >
+            <div>
+              <span style="font-weight: 500">
+                {{ record.operatorName || '-' }}
+              </span>
+              <span style="margin-left: 8px">
+                {{ record.actionName || record.action }}
+              </span>
+              <span
+                v-if="record.nodeName"
+                class="ele-text-secondary"
+                style="margin-left: 8px"
+              >
+                （{{ record.nodeName }}）
+              </span>
+            </div>
+            <div v-if="record.opinion" class="ele-text-secondary">
+              意见：{{ record.opinion }}
+            </div>
+            <div class="ele-text-secondary">
+              {{ toDateString(record.createTime) }}
+            </div>
+          </a-timeline-item>
+        </a-timeline>
+        <div v-else class="ele-text-secondary">暂无处理记录</div>
+      </template>
+      <a-empty v-else-if="!loading" description="暂无数据" />
+    </a-spin>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { toDateString } from 'ele-admin-pro/es';
+  import { getInstance } from '@/api/approval/instance';
+  import type { ApprovalInstance } from '@/api/approval/instance/model';
+
+  const emit = defineEmits<{
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 抽屉是否打开
+    visible: boolean;
+    // 单据id
+    instanceId?: number;
+  }>();
+
+  // 详情数据
+  const data = ref<ApprovalInstance | null>(null);
+  // 加载状态
+  const loading = ref(false);
+
+  // 状态颜色
+  const statusColor = (status?: string) => {
+    switch (status) {
+      case 'PENDING':
+        return 'processing';
+      case 'REJECTED':
+        return 'red';
+      case 'WITHDRAWN':
+        return 'orange';
+      case 'APPROVED':
+        return 'green';
+      case 'ARCHIVED':
+        return 'blue';
+      default:
+        return 'default';
+    }
+  };
+
+  // 处理记录颜色
+  const actionColor = (action?: string) => {
+    switch (action) {
+      case 'APPROVE':
+      case 'CONFIRM':
+      case 'ARCHIVE':
+        return 'green';
+      case 'REJECT':
+        return 'red';
+      default:
+        return 'blue';
+    }
+  };
+
+  // 附件大小
+  const sizeText = (length?: number) => {
+    if (!length && length !== 0) {
+      return '';
+    }
+    if (length < 1024) {
+      return length + ' B';
+    }
+    if (length < 1024 * 1024) {
+      return (length / 1024).toFixed(1) + ' KB';
+    }
+    return (length / 1024 / 1024).toFixed(1) + ' MB';
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 加载详情 */
+  const loadData = () => {
+    if (!props.instanceId) {
+      data.value = null;
+      return;
+    }
+    loading.value = true;
+    data.value = null;
+    getInstance(props.instanceId)
+      .then((result) => {
+        data.value = result;
+        loading.value = false;
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    () => [props.visible, props.instanceId],
+    () => {
+      if (props.visible) {
+        loadData();
+      } else {
+        data.value = null;
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .attachment-item {
+    padding: 4px 0;
+  }
+
+  .confirm-item {
+    padding: 4px 0;
+  }
+
+  .ele-text-break {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+</style>
diff --git a/src/views/approval/instance/components/search.vue b/src/views/approval/instance/components/search.vue
new file mode 100644
index 0000000..17b4fd2
--- /dev/null
+++ b/src/views/approval/instance/components/search.vue
@@ -0,0 +1,254 @@
+<!-- 单据查询搜索表单 -->
+<template>
+  <a-form
+    :label-col="
+      styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
+    "
+    :wrapper-col="
+      styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
+    "
+  >
+    <a-row :gutter="8">
+      <a-col v-for="field in basicFields" :key="field.prop" v-bind="colSpan">
+        <a-form-item :label="field.label">
+          <a-select
+            v-if="field.prop === 'docType'"
+            v-model:value="form.docType"
+            placeholder="全部"
+            allow-clear
+            :options="docTypeOptions"
+          />
+          <a-select
+            v-else-if="field.prop === 'status'"
+            v-model:value="form.status"
+            placeholder="全部"
+            allow-clear
+            :options="statusOptions"
+          />
+          <a-select
+            v-else-if="field.prop === 'reportOrgId'"
+            v-model:value="form.reportOrgId"
+            placeholder="全部"
+            allow-clear
+            show-search
+            :filter-option="filterOrganization"
+            :options="organizationOptions"
+          />
+          <a-select
+            v-else-if="field.prop === 'acceptOrgId'"
+            v-model:value="form.acceptOrgId"
+            placeholder="全部"
+            allow-clear
+            show-search
+            :filter-option="filterOrganization"
+            :options="organizationOptions"
+          />
+          <a-select
+            v-else-if="field.prop === 'reporterId'"
+            v-model:value="form.reporterId"
+            placeholder="输入姓名或账号搜索"
+            allow-clear
+            show-search
+            :filter-option="false"
+            :options="userOptions"
+            :loading="userLoading"
+            @search="searchUsers"
+          />
+          <a-input
+            v-else
+            v-model:value.trim="form[field.prop]"
+            placeholder="请输入"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col v-bind="colSpan">
+        <a-form-item label="提交时间">
+          <a-range-picker
+            v-model:value="submitRange"
+            :show-time="true"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="ele-fluid"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col v-bind="colSpan">
+        <a-form-item label="归档时间">
+          <a-range-picker
+            v-model:value="archiveRange"
+            :show-time="true"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="ele-fluid"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col v-bind="colSpan">
+        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+          <a-space>
+            <a-button type="primary" @click="search">查询</a-button>
+            <a-button @click="reset">重置</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import {
+    listApprovalOrganizations,
+    searchApprovalUsers
+  } from '@/api/approval/directory';
+  import type {
+    ApprovalOrganization,
+    ApprovalQueryParam,
+    ApprovalUser
+  } from '@/api/approval/instance/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: ApprovalQueryParam): void;
+  }>();
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  // 栅格宽度
+  const colSpan = {
+    xl: 6,
+    lg: 12,
+    md: 12,
+    sm: 24,
+    xs: 24
+  };
+
+  // 基础字段
+  const basicFields: {
+    prop:
+      | 'docType'
+      | 'bizNo'
+      | 'keyword'
+      | 'reportOrgId'
+      | 'acceptOrgId'
+      | 'reporterId'
+      | 'status';
+    label: string;
+  }[] = [
+    { prop: 'docType', label: '单据类型' },
+    { prop: 'bizNo', label: '单号' },
+    { prop: 'keyword', label: '标题或名称' },
+    { prop: 'reportOrgId', label: '报送部门' },
+    { prop: 'acceptOrgId', label: '受理部门' },
+    { prop: 'reporterId', label: '发起人' },
+    { prop: 'status', label: '状态' }
+  ];
+
+  // 单据类型选项
+  const docTypeOptions = [
+    { label: '业务完成确认单', value: 'completion' },
+    { label: '内部协调单', value: 'coordination' }
+  ];
+
+  // 状态选项
+  const statusOptions = [
+    { label: '未提交', value: 'DRAFT' },
+    { label: '审批中', value: 'PENDING' },
+    { label: '已驳回', value: 'REJECTED' },
+    { label: '已撤回', value: 'WITHDRAWN' },
+    { label: '审批完成', value: 'APPROVED' },
+    { label: '已归档', value: 'ARCHIVED' }
+  ];
+
+  // 表单数据
+  const { form, resetFields } = useFormData<ApprovalQueryParam>({
+    docType: undefined,
+    bizNo: '',
+    keyword: '',
+    reportOrgId: undefined,
+    acceptOrgId: undefined,
+    reporterId: undefined,
+    status: undefined
+  });
+
+  // 提交时间范围
+  const submitRange = ref<[string, string]>(['', '']);
+  // 归档时间范围
+  const archiveRange = ref<[string, string]>(['', '']);
+
+  // 组织下拉选项
+  const organizationOptions = ref<{ label: string; value: number }[]>([]);
+
+  // 发起人下拉选项
+  const userOptions = ref<{ label: string; value: number }[]>([]);
+  // 发起人请求状态
+  const userLoading = ref(false);
+
+  // 组织远程过滤
+  const filterOrganization = (input: string, option: { label: string }) => {
+    return (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
+  };
+
+  // 远程搜索发起人
+  const searchUsers = (keywords?: string) => {
+    userLoading.value = true;
+    searchApprovalUsers({ keywords })
+      .then((data) => {
+        userOptions.value = data.map((user: ApprovalUser) => ({
+          label:
+            (user.realName || user.nickname || user.username || '') +
+            (user.username ? '(' + user.username + ')' : ''),
+          value: user.userId as number
+        }));
+      })
+      .catch(() => {
+        userOptions.value = [];
+      })
+      .finally(() => {
+        userLoading.value = false;
+      });
+  };
+
+  /* 搜索 */
+  const search = () => {
+    const [submitTimeStart, submitTimeEnd] = submitRange.value ?? ['', ''];
+    const [archiveTimeStart, archiveTimeEnd] = archiveRange.value ?? ['', ''];
+    emit('search', {
+      ...form,
+      submitTimeStart,
+      submitTimeEnd,
+      archiveTimeStart,
+      archiveTimeEnd
+    });
+  };
+
+  /* 重置 */
+  const reset = () => {
+    resetFields();
+    submitRange.value = ['', ''];
+    archiveRange.value = ['', ''];
+    userOptions.value = [];
+    search();
+  };
+
+  onMounted(() => {
+    listApprovalOrganizations()
+      .then((data) => {
+        organizationOptions.value = data.map(
+          (organization: ApprovalOrganization) => ({
+            label:
+              organization.organizationFullName ||
+              organization.organizationName ||
+              '',
+            value: organization.organizationId as number
+          })
+        );
+      })
+      .catch(() => {
+        organizationOptions.value = [];
+      });
+  });
+</script>
diff --git a/src/views/approval/instance/index.vue b/src/views/approval/instance/index.vue
new file mode 100644
index 0000000..b392c7d
--- /dev/null
+++ b/src/views/approval/instance/index.vue
@@ -0,0 +1,188 @@
+<!-- 审批管理 - 单据查询 -->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search @search="reload" />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :scroll="{ x: 1500 }"
+        cache-key="proApprovalInstanceTable"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'docType'">
+            <a-tag :color="record.docType === 'completion' ? 'blue' : 'purple'">
+              {{ record.docTypeName }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <a-tag :color="statusColor(record.status)">
+              {{ record.statusName }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'submitTime'">
+            {{ toDateString(record.submitTime) || '-' }}
+          </template>
+          <template v-else-if="column.key === 'archiveTime'">
+            {{ toDateString(record.archiveTime) || '-' }}
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a @click="openDetail(record)">详情</a>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 详情抽屉 -->
+    <detail v-model:visible="showDetail" :instance-id="currentId" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import { toDateString } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import Detail from './components/detail.vue';
+  import { pageInstances } from '@/api/approval/instance';
+  import type {
+    ApprovalItem,
+    ApprovalQueryParam
+  } from '@/api/approval/instance/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 详情抽屉是否显示
+  const showDetail = ref(false);
+  // 当前查看的单据id
+  const currentId = ref<number | undefined>(undefined);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where }) => {
+    return pageInstances({
+      ...(where as ApprovalQueryParam),
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '单号',
+      dataIndex: 'bizNo',
+      width: 180,
+      ellipsis: true,
+      customRender: ({ text }) => text || '-'
+    },
+    {
+      title: '单据类型',
+      key: 'docType',
+      dataIndex: 'docType',
+      width: 140,
+      align: 'center'
+    },
+    {
+      title: '标题或名称',
+      dataIndex: 'title',
+      minWidth: 220,
+      ellipsis: true
+    },
+    {
+      title: '报送部门',
+      dataIndex: 'reportOrgName',
+      width: 180,
+      ellipsis: true
+    },
+    {
+      title: '报送人',
+      dataIndex: 'reporterName',
+      width: 120,
+      ellipsis: true
+    },
+    {
+      title: '受理部门',
+      dataIndex: 'acceptOrgName',
+      width: 180,
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status',
+      width: 110,
+      align: 'center'
+    },
+    {
+      title: '当前节点',
+      dataIndex: 'currentNodeName',
+      width: 140,
+      ellipsis: true
+    },
+    {
+      title: '提交时间',
+      key: 'submitTime',
+      dataIndex: 'submitTime',
+      width: 170,
+      align: 'center'
+    },
+    {
+      title: '归档时间',
+      key: 'archiveTime',
+      dataIndex: 'archiveTime',
+      width: 170,
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 90,
+      align: 'center',
+      fixed: 'right',
+      hideInSetting: true
+    }
+  ]);
+
+  // 状态颜色
+  const statusColor = (status?: string) => {
+    switch (status) {
+      case 'PENDING':
+        return 'processing';
+      case 'REJECTED':
+        return 'red';
+      case 'WITHDRAWN':
+        return 'orange';
+      case 'APPROVED':
+        return 'green';
+      case 'ARCHIVED':
+        return 'blue';
+      default:
+        return 'default';
+    }
+  };
+
+  /* 刷新表格 */
+  const reload = (where?: ApprovalQueryParam) => {
+    tableRef?.value?.reload({ page: 1, where: where ?? {} });
+  };
+
+  /* 打开详情 */
+  const openDetail = (row: ApprovalItem) => {
+    currentId.value = row.id;
+    showDetail.value = true;
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ApprovalInstance'
+  };
+</script>