From 1d8e0c321b4159d4ea6a8855a54bd81310df5b97 Mon Sep 17 00:00:00 2001
From: bestlee <bestlee@djxinxi.net>
Date: Sun, 20 Sep 2026 11:25:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=AC=E8=BD=A6=E9=97=B4=E5=8F=98=E6=9B=B4?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AE=8C=E6=88=90=EF=BC=8C=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/changeLedger/modules/list.vue       | 571 +++++++++++++++
 src/views/changeLedger/myChanges/index.vue    | 569 +--------------
 .../changeLedger/workshopChanges/index.vue    | 689 +-----------------
 3 files changed, 580 insertions(+), 1249 deletions(-)
 create mode 100644 src/views/changeLedger/modules/list.vue

diff --git a/src/views/changeLedger/modules/list.vue b/src/views/changeLedger/modules/list.vue
new file mode 100644
index 0000000..3a7eb84
--- /dev/null
+++ b/src/views/changeLedger/modules/list.vue
@@ -0,0 +1,571 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, h } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import { tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
+import { systemConfigApi } from '@/service/api/system';
+import { orgListApi } from '@/service/api/user';
+import { changeLedgerListApi } from '@/service/api/changeLedger';
+
+const { routerPushByKey } = useRouterPush();
+const themeStore = useThemeStore();
+const props = defineProps(['self'])
+
+const loading = ref<boolean>(false);
+// 组织树
+const orgTree = ref<any[]>([]);
+// 筛选条件
+const formInfo = ref<any>({
+  kw: '',
+  type: null,
+  level: null,
+  duration: null,
+  status: '',//英文逗号隔开
+  org_id: 1,
+  apply_time_start: null,
+  apply_time_end: null,
+  self: props.self,
+});
+const pagination = ref<{page: number, pageSize: number, itemCount: number}>({
+  page: 1,
+  pageSize: 20,
+  itemCount: 0,
+})
+// 变更类型列表
+const typeList = ref<any[]>([{ label: "全部", value: null }]);
+// 变更等级列表
+const levelList = ref<any[]>([{ label: "全部", value: null }]);
+// 状态选项
+const STATUS_OPTIONS = [
+  { label: "全部", value: "", type:'all' },
+  { label: "审批中", value: "APPROVING", type:'warning' },
+  { label: "已通过", value: "APPROVED", type:'success' },
+  { label: "待验收", value: "IMPLEMENTED", type:'success' },
+  { label: "待关闭", value: "ACCEPTED", type:'error' },
+  { label: "已关闭", value: "CLOSED", type:'success' },
+  { label: "已撤回", value: "WITHDRAWN", type:'error' },
+  { label: "已驳回", value: "REJECTED", type:'error' },
+];
+// 排序选项
+const SORT_OPTS = [
+  { label: "申请时间 · 最新", value: "apply_time,desc" },
+  { label: "申请时间 · 最早", value: "apply_time,asc" },
+  { label: "计划投用 · 最新", value: "plan_use_date,desc" },
+  { label: "计划投用 · 最早", value: "plan_use_date,asc" },
+  { label: "状态更新 · 最新", value: "status_changed_at,desc" },
+  { label: "状态更新 · 最早", value: "status_changed_at,asc" },
+];
+// 时限选项
+const DUR_OPTIONS = [
+  { label: "全部", value: null }, 
+  { label: "永久", value: 1 }, 
+  { label: "临时", value: 2 }
+];
+// 时间选项
+const TIME_OPTIONS = [
+  { label: "近一年", value: 'year' },
+  { label: "近半年", value: 'half_year' },
+  { label: "近三个月", value: 'quarter' },
+  { label: "近一个月", value: 'month' },
+  { label: "自定义", value: 'custom' },
+];
+// 当前选中时间范围
+const period = ref<string>("year");
+// 是否显示全部
+const isAll = ref<boolean>(true);
+// 当前选中行
+const currentRow = ref<any>(null);
+// 进度抽屉
+const progressDrawer = ref<boolean>(false);
+// 撤回/未实施情况说明弹框
+const revokeModal = ref<boolean>(false);
+const modalType = ref<string>('');
+const reason = ref<string>('');
+const revokeSaving = ref<boolean>(false);
+// 列表
+const list = ref<any[]>([]);
+
+// 重置
+const reset = () => {
+  formInfo.value.kw = '';
+  formInfo.value.type = null;
+  formInfo.value.level = null;
+  formInfo.value.duration = null;
+  formInfo.value.status = '';
+  formInfo.value.sort = '';
+  period.value = 'year';
+  isAll.value = true;
+  window.$message?.success("筛选条件已重置");
+};
+// 导出台账
+const exportChanges = () => {
+  window.$message?.info('还差接口');
+}
+
+// 自定义渲染展开图标
+const renderSwitcherIcon = (node:any) => {
+  // 如果节点没有 children 或 children 为空数组，则不显示图标
+  if (!node.option.children || node.option.children.length === 0) {
+    return null;  // 返回 null 表示不渲染任何图标
+  }
+  // 有子节点：返回 undefined 表示使用默认展开图标，也可自定义
+  return h(Icon,{
+    icon: node.option.expanded ? 'bi:caret-down-fill' : 'bi:caret-right-fill',
+    class: 'size-12px',
+  });
+}
+
+// 匹配对象
+const matchObj= (list:any[],val:any) => {
+  const item = list.find((item:any) => item.value == val);
+  return item || null;
+}
+
+// 搜索
+const searchHandle = () => {
+  pagination.value.page = 1;
+  getList();
+}
+// 组织选择改变
+const orgChange = (val:any) => {
+  formInfo.value.org_id = val;
+  searchHandle();
+}
+// 显示全部改变
+const showAll = () => {
+  isAll.value = !isAll.value;
+  if(isAll.value){
+    formInfo.value.status = '';
+  }else{
+    formInfo.value.status = 'APPROVING,APPROVED,IMPLEMENTED,ACCEPTED,WITHDRAWN,REJECTED';
+  }
+  searchHandle();
+}
+// 类型选择
+const typeChoose = (val:any) => {
+  formInfo.value.type = val;
+  searchHandle();
+}
+// 时限选择
+const durChoose = (val:any) => {
+  formInfo.value.duration = val;
+  searchHandle();
+}
+// 时间范围选择
+const timeChoose = (val:string) => {
+  period.value = val;
+  searchHandle();
+}
+// 状态选择
+const statusChoose = (val:string) => {
+  formInfo.value.status = val;
+  searchHandle();
+}
+// 排序选择
+const sortChoose = (val:string) => {
+  formInfo.value.sort = val;
+  searchHandle();
+}
+
+// 跳转详情
+const jumpTo = (r:any) => {
+  routerPushByKey("details_index",{ query: { id: r?.id?.toString(),status:r?.status?.toString() || '',key:'changeledger_mychanges' } });
+}
+// 打开进度
+const openProgress = (r: any) => {
+  currentRow.value = r;
+  progressDrawer.value = true;
+};
+// 撤回/未实施情况说明
+const openModal = (r: any,type:string) => {
+  currentRow.value = r;
+  modalType.value = type;
+  revokeModal.value = true;
+}
+// 撤回/未实施情况说明提交
+const revokeSave = async () => {
+  if (!reason.value) {
+    return window.$message?.warning(modalType.value === "withdraw" ? "请输入撤回理由" : "请输入未实施情况说明");
+  }
+  revokeSaving.value = true;
+  setTimeout(() => {
+    revokeSaving.value = false;
+  }, 1000);
+}
+
+// 下载文件
+const downloadFiles = (r:any,type:string) => {
+  // 下载申请表
+  if(type==='apply'){
+
+  }
+  // 下载已验收待关闭
+  if(type==='accepted'){
+
+  }
+  // 下载归档包
+  if(type==='closed'){
+
+  }
+  window.$message?.info('还差接口');
+}
+
+// 催办
+const urge = (r:any) => {
+  window.$message?.info('还差接口');
+}
+
+// 分页改变
+const pageChange = (page: number) => {
+  pagination.value.page = page;
+  getList();
+}
+// 列表查询
+const getList = async () => {
+  loading.value = true;
+  const {error, data} = await changeLedgerListApi({
+    kw: formInfo.value.kw,
+    type: formInfo.value.type,
+    level: formInfo.value.level,
+    duration: formInfo.value.duration,
+    status: formInfo.value.status,
+    org_id: formInfo.value.org_id,
+    apply_time_start: formInfo.value.apply_time_start,
+    apply_time_end: formInfo.value.apply_time_end,
+    self: formInfo.value.self,
+    page_num: pagination.value.page,
+    page_size: pagination.value.pageSize,
+  });
+  if (!error) {
+    list.value = data?.list ?? [];
+    pagination.value.itemCount = data?.total ?? 0;
+  }
+  loading.value = false;
+}
+// 获取配置
+const getConfig = async () => {
+  const {data,error} = await systemConfigApi();
+  if(!error){
+    // 解析 变更类型设置
+    const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
+    if (changeTypeGroup) {
+      typeList.value = typeList.value.concat(changeTypeGroup.items);
+    }
+    // 解析 变更等级设置
+    const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
+    if (changeLevelGroup) {
+      levelList.value = levelList.value.concat(changeLevelGroup.items);
+    }
+  }
+}
+
+// // 获取组织列表
+const getOrgList = async () => {
+  loading.value = true;
+  const {data,error} = await orgListApi();
+  if(!error){
+    orgTree.value = data;
+    if(orgTree.value.length > 0){
+      getList();
+    }
+  }
+  loading.value = false;
+}
+
+onMounted(async () => {
+  await getConfig();
+  getOrgList();
+});
+</script>
+
+<template>
+<NSpace vertical :size="16">
+  <!-- 我发起的变更 -->
+  <NSpin :show="loading" size="small">
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <!-- 工具条 -->
+      <div 
+        class="flex flex-wrap items-center gap-2 border px-3 py-2"
+        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
+      >
+        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+          <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> 全部变更
+          <span class="rounded bg-slate-100 px-1.5 text-xs text-slate-500">{{ pagination.itemCount }}</span>
+        </span>
+        <NTreeSelect
+          class="!w-200px"
+          :value="formInfo.org_id"
+          :options="orgTree"
+          size="small"
+          default-expand-all
+          label-field="label"
+          key-field="id"
+          :render-switcher-icon="renderSwitcherIcon"
+          placeholder="请选择组织层级"
+          @update:value="orgChange"
+        />
+        <NRadio
+          size="small"
+          :checked="isAll"
+          :value="true"
+          name="显示全部"
+          :on-update:checked="showAll"
+        >
+          显示全部
+        </NRadio>
+        <NRadio
+          size="small"
+          :checked="!isAll"
+          :value="false"
+          name="显示未关闭"
+          :on-update:checked="showAll"
+        >
+          显示未关闭
+        </NRadio>
+        <div class="relative ml-auto">
+          <NInput v-model:value="formInfo.kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号" @clear="searchHandle">
+            <template #suffix>
+              <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="searchHandle" />
+            </template>
+          </NInput>
+        </div>
+        <NButton size="small" class="text-sm" @click="reset">
+          <Icon icon="system-uicons:reset" class="size-12px" />重置
+        </NButton>
+        <NButton size="small" class="text-sm" @click="exportChanges">
+          <Icon icon="material-symbols:download" class="size-14px" />导出台账
+        </NButton>
+      </div>
+      <!-- 筛选与排序行 -->
+      <div 
+        class="flex flex-col gap-y-2 border px-3 py-2 my-3"
+        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
+      >
+        <div class="flex items-center gap-x-4">
+          <p class="flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">类型</span>
+            <NButton size="tiny" round v-for="t in typeList" :key="t.label" :ghost="formInfo.type === t.value ? false : true" :type="formInfo.type === t.value ? 'primary' : 'default'" @click="typeChoose(t.value)">{{ t.label }}</NButton>
+          </p>
+          <p class="flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">时限</span>
+            <NButton size="tiny" round v-for="d in DUR_OPTIONS" :key="d.label" :ghost="formInfo.duration === d.value ? false : true" :type="formInfo.duration === d.value ? 'primary' : 'default'" @click="durChoose(d.value)">{{ d.label }}</NButton>
+          </p>
+          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">时间</span>
+            <NButton size="tiny" round v-for="p in TIME_OPTIONS" :key="p.value" :ghost="period === p.value ? false : true" :type="period === p.value ? 'primary' : 'default'" @click="timeChoose(p.value)">{{ p.label }}</NButton>
+            <span v-if="period === 'custom'" class="flex items-center gap-1">
+              <NDatePicker v-model:value="formInfo.apply_time_start" type="date" size="small" class="w-130px" />
+              <span class="text-xs text-slate-400">至</span>
+              <NDatePicker v-model:value="formInfo.apply_time_end" type="date" size="small" class="w-130px" />
+            </span>
+          </p>
+        </div>
+        <div class="flex items-center gap-x-4">
+          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">状态</span>
+            <NButton size="tiny" round v-for="s in STATUS_OPTIONS" :key="s.value" :ghost="formInfo.status === s.value ? false : true" :type="formInfo.status === s.value ? 'primary' : 'default'" @click="statusChoose(s.value)">{{ s.label }}</NButton>
+          </p>
+          <p class="ml-auto flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">排序</span>
+            <NSelect size="small" class="!w-36" v-model:value="formInfo.sort"  :options="SORT_OPTS" :on-update:value="sortChoose" />
+          </p>
+        </div>
+      </div>
+      <div class="space-y-3 scroll">
+        <!-- 列表 -->
+        <div 
+          v-for="(r, i) in list" :key="r.id" 
+          class="rounded-lg border bg-white px-4 py-3"
+          :style="{
+            '--theme-color': themeStore.themeColor
+          }"
+        >
+          <div class="flex flex-wrap items-start gap-3">
+            <div class="min-w-0 flex-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-xs text-slate-300">{{ Number(i)+1 }}</span>
+                <p class="cursor-pointer text-left text-sm font-semibold text-slate-800 hover:text-[var(--theme-color)] hover:underline" @click="jumpTo(r)">
+                  {{ r.title }}
+                </p>
+                <NTag size="small" v-if="r.urgent" class="animate-breathe border-[#E15555] bg-[#E15555] text-white">紧急</NTag>
+                <span class="font-mono text-[11px] text-slate-400">{{ r.change_no }}</span>
+              </div>
+              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
+                <!-- 类型 -->
+                <NTag 
+                  size="small"
+                  :color="{
+                    color: tagBgColor(matchObj(typeList,r.change_type)?.color),
+                    textColor: tagTextColor(matchObj(typeList,r.change_type)?.color),
+                    borderColor: tagBorderColor(matchObj(typeList,r.change_type)?.color),
+                  }"
+                >
+                  {{ matchObj(typeList,r.change_type)?.label }}
+                </NTag>
+                <!-- 等级 -->
+                <NTag 
+                  size="small"
+                  :color="{
+                    color: tagBgColor(matchObj(levelList,r.change_level)?.color),
+                    textColor: tagTextColor(matchObj(levelList,r.change_level)?.color),
+                    borderColor: tagBorderColor(matchObj(levelList,r.change_level)?.color),
+                  }"
+                >
+                  {{ matchObj(levelList,r.change_level)?.label }}
+                </NTag>
+                <NTag v-if="r.duration_type===2" size="small" type="warning">临时</NTag>
+                <NTag v-if="r.duration_type===1" size="small" type="info">永久</NTag>
+                <NTag v-if="r.extend_count" size="small" type="warning">延期</NTag>
+              </div>
+              <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-slate-500">
+                <span v-if="r.apply_time">申请 {{ r.apply_time?.slice(0,16) }}</span>
+                <span>{{ r.org_name }} · {{ r.applicant_name }}</span>
+                <span v-if="r.plan_use_date">计划投用 {{ r.plan_use_date?.slice(0,16) }}</span>
+                <span v-if="r.use_time">实际投用 {{ r.use_time?.slice(0,16) }}</span>
+                <span v-if="r.restore_deadline">计划恢复 {{ r.restore_deadline?.slice(0,16) }}</span>
+                <span v-if="r.close_time">关闭 {{ r.close_time?.slice(0,16) }}</span>
+                <span v-if="r.status_changed_at">状态更新 {{ r.status_changed_at?.slice(0,16) }}</span>
+              </div>
+            </div>
+            <div class="flex shrink-0 flex-col items-end gap-1.5">
+              <div class="flex flex-wrap items-center justify-end gap-2">
+                <!-- 状态标签 -->
+                <NTag v-if="r.status==='APPROVING'" size="small" type="warning">审批中</NTag>
+                <NTag v-if="r.status==='APPROVED'" size="small" type="success">已通过</NTag>
+                <NTag v-if="r.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
+                <NTag v-if="r.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
+                <NTag v-if="r.status==='CLOSED'" size="small" type="success">已关闭</NTag>
+                <NTag v-if="r.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
+                <NTag v-if="r.status==='REJECTED'" size="small" type="error">已驳回</NTag>
+                <!-- 超期 -->
+                <span v-if="r.overdue_status===2" class="text-[11px] font-medium text-red-500">超期 {{ r.overdue_days }} 天</span>
+              </div>
+              <!-- 操作按钮 -->
+              <div class="flex flex-wrap items-center justify-end gap-1 pt-0.5">
+                <!-- 审批中 -->
+                <NButton v-if="r.status==='APPROVING'" size="small" ghost type="error" class="text-xs" @click="openModal(r,'withdraw')">撤回</NButton>
+                <!-- 已批准待实施 -->
+                <NButton v-if="r.status==='APPROVED'" size="small" ghost type="primary" class="text-xs" @click="openModal(r,'unimplemented')">未实施情况说明</NButton>
+                <NButton v-if="r.status==='APPROVED'" size="small" ghost type="success" class="text-xs" @click="downloadFiles(r,'apply')">下载申请表</NButton>
+                <!-- 已验收待关闭 -->
+                <NButton v-if="r.status==='ACCEPTED'" size="small" ghost type="success" class="text-xs" @click="downloadFiles(r,'accepted')">下载</NButton>
+                <!-- 已关闭 -->
+                <NButton v-if="r.status==='CLOSED'" size="small" ghost type="success" class="text-xs" @click="downloadFiles(r,'closed')">下载归档包</NButton>
+                <!-- 催办(超期) -->
+                <NButton v-if="r.overdue_days" size="small" ghost type="error" class="text-xs" @click="urge(r)">催办</NButton>
+                <NButton size="small" type="primary" class="text-xs" @click="jumpTo(r)">详情</NButton>
+                <NButton size="small" type="default" class="text-xs" @click="openProgress(r)">进度</NButton>
+              </div>
+              <!-- 临时变更 -->
+              <div v-if="r.duration_type === 2" class="text-right text-[10px] leading-4 text-slate-400">临时变更恢复 / 延期 / 转永久请在详情页中操作</div>
+            </div>
+          </div>
+        </div>
+        <div v-if="list.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center text-sm text-slate-400">当前筛选条件下暂无变更记录</div>
+      </div>
+      <div class="flex justify-end mt-3">
+        <NPagination 
+          v-model:page="pagination.page" 
+          :page-size="pagination.pageSize" 
+          :item-count="pagination.itemCount"
+          :on-update:page="pageChange"
+        >
+          <template #prefix="{ itemCount }">
+            共 {{ itemCount }} 条
+          </template>
+        </NPagination>
+      </div>
+      <!-- 撤回/未实施情况说明/未投用情况说明弹框 -->
+      <NModal
+          v-model:show="revokeModal"
+          preset="card"
+          :auto-focus="false"
+          :style="{ width: '450px', height: 'auto' }"
+          :segmented="{ content: true, footer: true }"
+      >
+          <template #header>
+              <h3 class="text-sm font-bold text-slate-800">
+                <span v-if="modalType === 'withdraw'">撤回变更申请</span>
+                <span v-else-if="modalType === 'unuse'">未投用情况说明</span>
+                <span v-else>未实施情况说明</span>
+                {{currentRow?.change_no}}
+              </h3>
+          </template>
+          <template #default>
+              <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
+                {{ modalType === 'withdraw'
+              ? '撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交。仅本人发起的审批中变更可撤回。'
+              : '变更审批通过 / 投用后未实施或未投用的，由申请人填写情况说明，提交后变更转入关闭流程，由变更主管部门专责确认关闭并记录关闭时间。' }}
+              </div>
+              <NInput
+                  class="mt-3"
+                  v-model:value="reason"
+                  type="textarea"
+                  :rows="3"
+                  :placeholder="modalType === 'withdraw' ? '撤回理由（必填）…' : '情况说明（必填）：原因、现场当前状态、后续处置安排…'"
+              />
+          </template>
+          <template #footer>
+              <div class="flex justify-end gap-[10px]">
+                  <NButton size="small" @click="revokeModal = false">取消</NButton>
+                  <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">提交</NButton>
+              </div>
+          </template>
+      </NModal>
+      <!-- 进度弹框 -->
+      <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
+        <NDrawerContent title="变更进度">
+          <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
+            <div class="text-sm font-semibold text-slate-800">{{ currentRow?.title }}</div>
+            <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
+                <span class="font-mono">{{ currentRow?.change_no }}</span>
+                <NTag v-if="currentRow?.status==='APPROVING'" size="small" type="warning">审批中</NTag>
+                <NTag v-if="currentRow?.status==='APPROVED'" size="small" type="success">已通过</NTag>
+                <NTag v-if="currentRow?.status==='IMPLEMENTED'" size="small" type="warning">待验收</NTag>
+                <NTag v-if="currentRow?.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
+                <NTag v-if="currentRow?.status==='CLOSED'" size="small" type="error">已关闭</NTag>
+                <NTag v-if="currentRow?.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
+                <NTag v-if="currentRow?.status==='REJECTED'" size="small" type="error">已驳回</NTag>
+                <span v-if="currentRow?.overdue_status===2" class="font-medium text-red-500">超期 {{ currentRow?.overdue_days }} 天</span>
+            </div>
+            <div v-if="currentRow?.dept || currentRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [currentRow?.dept, currentRow?.applicant].filter(Boolean).join(' · ') }}</div>
+            <div v-if="currentRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ currentRow?.meta }}</div>
+          </div>
+          <div class="mt-4">
+            <div v-for="(s, i) in currentRow?.approval_records" :key="s.id" class="flex gap-3">
+              <div class="flex flex-col items-center">
+                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-[#7CC242] bg-[#7CC242] text-white">
+                  <Icon icon="ix:success" />
+                </span>
+                <span 
+                  v-if="Number(i) < Number(currentRow?.approval_records?.length) - 1" 
+                  class="w-0.5 flex-1" 
+                  :class="Number(i) < Number(currentRow?.approval_records?.length) ? 'bg-[#7CC242]' : 'bg-slate-200'"
+                ></span>
+              </div>
+              <div class="pb-5">
+                <p class="text-sm">{{ s.action }}</p>
+                <span class="mt-0.5 text-[11px] text-slate-400">{{s.finished_at?.slice(0, 16)}}</span>
+              </div>
+            </div>
+          </div>
+          <div v-if="currentRow?.duration_type === 2" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
+            临时变更：计划恢复 {{ currentRow?.restore_deadline ?? '—' }} · 恢复 / 延期 / 转永久请在详情页中操作
+          </div>
+        </NDrawerContent>
+      </NDrawer>
+    </NCard>
+  </NSpin>
+</NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 338px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/changeLedger/myChanges/index.vue b/src/views/changeLedger/myChanges/index.vue
index e49db45..bdde4a3 100644
--- a/src/views/changeLedger/myChanges/index.vue
+++ b/src/views/changeLedger/myChanges/index.vue
@@ -1,570 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, h } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
-import { systemConfigApi } from '@/service/api/system';
-import { orgListApi } from '@/service/api/user';
-import { changeLedgerListApi } from '@/service/api/changeLedger';
-
-const { routerPushByKey } = useRouterPush();
-const themeStore = useThemeStore();
-
-const loading = ref<boolean>(false);
-// 组织树
-const orgTree = ref<any[]>([]);
-// 筛选条件
-const formInfo = ref<any>({
-  kw: '',
-  type: null,
-  level: null,
-  duration: null,
-  status: '',//英文逗号隔开
-  org_id: 1,
-  apply_time_start: null,
-  apply_time_end: null,
-  self: '1',
-});
-const pagination = ref<{page: number, pageSize: number, itemCount: number}>({
-  page: 1,
-  pageSize: 20,
-  itemCount: 0,
-})
-// 变更类型列表
-const typeList = ref<any[]>([{ label: "全部", value: null }]);
-// 变更等级列表
-const levelList = ref<any[]>([{ label: "全部", value: null }]);
-// 状态选项
-const STATUS_OPTIONS = [
-  { label: "全部", value: "", type:'all' },
-  { label: "审批中", value: "APPROVING", type:'warning' },
-  { label: "已通过", value: "APPROVED", type:'success' },
-  { label: "待验收", value: "IMPLEMENTED", type:'success' },
-  { label: "待关闭", value: "ACCEPTED", type:'error' },
-  { label: "已关闭", value: "CLOSED", type:'success' },
-  { label: "已撤回", value: "WITHDRAWN", type:'error' },
-  { label: "已驳回", value: "REJECTED", type:'error' },
-];
-// 排序选项
-const SORT_OPTS = [
-  { label: "申请时间 · 最新", value: "apply_time,desc" },
-  { label: "申请时间 · 最早", value: "apply_time,asc" },
-  { label: "计划投用 · 最新", value: "plan_use_date,desc" },
-  { label: "计划投用 · 最早", value: "plan_use_date,asc" },
-  { label: "状态更新 · 最新", value: "status_changed_at,desc" },
-  { label: "状态更新 · 最早", value: "status_changed_at,asc" },
-];
-// 时限选项
-const DUR_OPTIONS = [
-  { label: "全部", value: null }, 
-  { label: "永久", value: 1 }, 
-  { label: "临时", value: 2 }
-];
-// 时间选项
-const TIME_OPTIONS = [
-  { label: "近一年", value: 'year' },
-  { label: "近半年", value: 'half_year' },
-  { label: "近三个月", value: 'quarter' },
-  { label: "近一个月", value: 'month' },
-  { label: "自定义", value: 'custom' },
-];
-// 当前选中时间范围
-const period = ref<string>("year");
-// 是否显示全部
-const isAll = ref<boolean>(true);
-// 当前选中行
-const currentRow = ref<any>(null);
-// 进度抽屉
-const progressDrawer = ref<boolean>(false);
-// 撤回/未实施情况说明弹框
-const revokeModal = ref<boolean>(false);
-const modalType = ref<string>('');
-const reason = ref<string>('');
-const revokeSaving = ref<boolean>(false);
-// 列表
-const list = ref<any[]>([]);
-
-// 重置
-const reset = () => {
-  formInfo.value.kw = '';
-  formInfo.value.type = null;
-  formInfo.value.level = null;
-  formInfo.value.duration = null;
-  formInfo.value.status = '';
-  formInfo.value.sort = '';
-  period.value = 'year';
-  isAll.value = true;
-  window.$message?.success("筛选条件已重置");
-};
-// 导出台账
-const exportChanges = () => {
-  window.$message?.info('还差接口');
-}
-
-// 自定义渲染展开图标
-const renderSwitcherIcon = (node:any) => {
-  // 如果节点没有 children 或 children 为空数组，则不显示图标
-  if (!node.option.children || node.option.children.length === 0) {
-    return null;  // 返回 null 表示不渲染任何图标
-  }
-  // 有子节点：返回 undefined 表示使用默认展开图标，也可自定义
-  return h(Icon,{
-    icon: node.option.expanded ? 'bi:caret-down-fill' : 'bi:caret-right-fill',
-    class: 'size-12px',
-  });
-}
-
-// 匹配对象
-const matchObj= (list:any[],val:any) => {
-  const item = list.find((item:any) => item.value == val);
-  return item || null;
-}
-
-// 搜索
-const searchHandle = () => {
-  pagination.value.page = 1;
-  getList();
-}
-// 组织选择改变
-const orgChange = (val:any) => {
-  formInfo.value.org_id = val;
-  searchHandle();
-}
-// 显示全部改变
-const showAll = () => {
-  isAll.value = !isAll.value;
-  if(isAll.value){
-    formInfo.value.status = '';
-  }else{
-    formInfo.value.status = 'APPROVING,APPROVED,IMPLEMENTED,ACCEPTED,WITHDRAWN,REJECTED';
-  }
-  searchHandle();
-}
-// 类型选择
-const typeChoose = (val:any) => {
-  formInfo.value.type = val;
-  searchHandle();
-}
-// 时限选择
-const durChoose = (val:any) => {
-  formInfo.value.duration = val;
-  searchHandle();
-}
-// 时间范围选择
-const timeChoose = (val:string) => {
-  period.value = val;
-  searchHandle();
-}
-// 状态选择
-const statusChoose = (val:string) => {
-  formInfo.value.status = val;
-  searchHandle();
-}
-// 排序选择
-const sortChoose = (val:string) => {
-  formInfo.value.sort = val;
-  searchHandle();
-}
-
-// 跳转详情
-const jumpTo = (r:any) => {
-  routerPushByKey("details_index",{ query: { id: r?.id?.toString(),status:r?.status?.toString() || '',key:'changeledger_mychanges' } });
-}
-// 打开进度
-const openProgress = (r: any) => {
-  currentRow.value = r;
-  progressDrawer.value = true;
-};
-// 撤回/未实施情况说明
-const openModal = (r: any,type:string) => {
-  currentRow.value = r;
-  modalType.value = type;
-  revokeModal.value = true;
-}
-// 撤回/未实施情况说明提交
-const revokeSave = async () => {
-  if (!reason.value) {
-    return window.$message?.warning(modalType.value === "withdraw" ? "请输入撤回理由" : "请输入未实施情况说明");
-  }
-  revokeSaving.value = true;
-  setTimeout(() => {
-    revokeSaving.value = false;
-  }, 1000);
-}
-
-// 下载文件
-const downloadFiles = (r:any,type:string) => {
-  // 下载申请表
-  if(type==='apply'){
-
-  }
-  // 下载已验收待关闭
-  if(type==='accepted'){
-
-  }
-  // 下载归档包
-  if(type==='closed'){
-
-  }
-  window.$message?.info('还差接口');
-}
-
-// 催办
-const urge = (r:any) => {
-  window.$message?.info('还差接口');
-}
-
-// 分页改变
-const pageChange = (page: number) => {
-  pagination.value.page = page;
-  getList();
-}
-// 列表查询
-const getList = async () => {
-  loading.value = true;
-  const {error, data} = await changeLedgerListApi({
-    kw: formInfo.value.kw,
-    type: formInfo.value.type,
-    level: formInfo.value.level,
-    duration: formInfo.value.duration,
-    status: formInfo.value.status,
-    org_id: formInfo.value.org_id,
-    apply_time_start: formInfo.value.apply_time_start,
-    apply_time_end: formInfo.value.apply_time_end,
-    self: formInfo.value.self,
-    page_num: pagination.value.page,
-    page_size: pagination.value.pageSize,
-  });
-  if (!error) {
-    list.value = data?.list ?? [];
-    pagination.value.itemCount = data?.total ?? 0;
-  }
-  loading.value = false;
-}
-// 获取配置
-const getConfig = async () => {
-  const {data,error} = await systemConfigApi();
-  if(!error){
-    // 解析 变更类型设置
-    const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
-    if (changeTypeGroup) {
-      typeList.value = typeList.value.concat(changeTypeGroup.items);
-    }
-    // 解析 变更等级设置
-    const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
-    if (changeLevelGroup) {
-      levelList.value = levelList.value.concat(changeLevelGroup.items);
-    }
-  }
-}
-
-// // 获取组织列表
-const getOrgList = async () => {
-  loading.value = true;
-  const {data,error} = await orgListApi();
-  if(!error){
-    orgTree.value = data;
-    if(orgTree.value.length > 0){
-      getList();
-    }
-  }
-  loading.value = false;
-}
-
-onMounted(async () => {
-  await getConfig();
-  getOrgList();
-});
+import List from "../modules/list.vue";
 </script>
 
 <template>
-<NSpace vertical :size="16">
-  <!-- 我发起的变更 -->
-  <NSpin :show="loading" size="small">
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-      <!-- 工具条 -->
-      <div 
-        class="flex flex-wrap items-center gap-2 border px-3 py-2"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-          <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> 全部变更
-          <span class="rounded bg-slate-100 px-1.5 text-xs text-slate-500">{{ pagination.itemCount }}</span>
-        </span>
-        <NTreeSelect
-          class="!w-200px"
-          :value="formInfo.org_id"
-          :options="orgTree"
-          size="small"
-          default-expand-all
-          label-field="label"
-          key-field="id"
-          :render-switcher-icon="renderSwitcherIcon"
-          placeholder="请选择组织层级"
-          @update:value="orgChange"
-        />
-        <NRadio
-          size="small"
-          :checked="isAll"
-          :value="true"
-          name="显示全部"
-          :on-update:checked="showAll"
-        >
-          显示全部
-        </NRadio>
-        <NRadio
-          size="small"
-          :checked="!isAll"
-          :value="false"
-          name="显示未关闭"
-          :on-update:checked="showAll"
-        >
-          显示未关闭
-        </NRadio>
-        <div class="relative ml-auto">
-          <NInput v-model:value="formInfo.kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号" @clear="searchHandle">
-            <template #suffix>
-              <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="searchHandle" />
-            </template>
-          </NInput>
-        </div>
-        <NButton size="small" class="text-sm" @click="reset">
-          <Icon icon="system-uicons:reset" class="size-12px" />重置
-        </NButton>
-        <NButton size="small" class="text-sm" @click="exportChanges">
-          <Icon icon="material-symbols:download" class="size-14px" />导出台账
-        </NButton>
-      </div>
-      <!-- 筛选与排序行 -->
-      <div 
-        class="flex flex-col gap-y-2 border px-3 py-2 my-3"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <div class="flex items-center gap-x-4">
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">类型</span>
-            <NButton size="tiny" round v-for="t in typeList" :key="t.label" :ghost="formInfo.type === t.value ? false : true" :type="formInfo.type === t.value ? 'primary' : 'default'" @click="typeChoose(t.value)">{{ t.label }}</NButton>
-          </p>
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时限</span>
-            <NButton size="tiny" round v-for="d in DUR_OPTIONS" :key="d.label" :ghost="formInfo.duration === d.value ? false : true" :type="formInfo.duration === d.value ? 'primary' : 'default'" @click="durChoose(d.value)">{{ d.label }}</NButton>
-          </p>
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时间</span>
-            <NButton size="tiny" round v-for="p in TIME_OPTIONS" :key="p.value" :ghost="period === p.value ? false : true" :type="period === p.value ? 'primary' : 'default'" @click="timeChoose(p.value)">{{ p.label }}</NButton>
-            <span v-if="period === 'custom'" class="flex items-center gap-1">
-              <NDatePicker v-model:value="formInfo.apply_time_start" type="date" size="small" class="w-130px" />
-              <span class="text-xs text-slate-400">至</span>
-              <NDatePicker v-model:value="formInfo.apply_time_end" type="date" size="small" class="w-130px" />
-            </span>
-          </p>
-        </div>
-        <div class="flex items-center gap-x-4">
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">状态</span>
-            <NButton size="tiny" round v-for="s in STATUS_OPTIONS" :key="s.value" :ghost="formInfo.status === s.value ? false : true" :type="formInfo.status === s.value ? 'primary' : 'default'" @click="statusChoose(s.value)">{{ s.label }}</NButton>
-          </p>
-          <p class="ml-auto flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">排序</span>
-            <NSelect size="small" class="!w-36" v-model:value="formInfo.sort"  :options="SORT_OPTS" :on-update:value="sortChoose" />
-          </p>
-        </div>
-      </div>
-      <div class="space-y-3 scroll">
-        <!-- 列表 -->
-        <div 
-          v-for="(r, i) in list" :key="r.id" 
-          class="rounded-lg border bg-white px-4 py-3"
-          :style="{
-            '--theme-color': themeStore.themeColor
-          }"
-        >
-          <div class="flex flex-wrap items-start gap-3">
-            <div class="min-w-0 flex-1">
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="text-xs text-slate-300">{{ Number(i)+1 }}</span>
-                <p class="cursor-pointer text-left text-sm font-semibold text-slate-800 hover:text-[var(--theme-color)] hover:underline" @click="jumpTo(r)">
-                  {{ r.title }}
-                </p>
-                <NTag size="small" v-if="r.urgent" class="animate-breathe border-[#E15555] bg-[#E15555] text-white">紧急</NTag>
-                <span class="font-mono text-[11px] text-slate-400">{{ r.change_no }}</span>
-              </div>
-              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
-                <!-- 类型 -->
-                <NTag 
-                  size="small"
-                  :color="{
-                    color: tagBgColor(matchObj(typeList,r.change_type)?.color),
-                    textColor: tagTextColor(matchObj(typeList,r.change_type)?.color),
-                    borderColor: tagBorderColor(matchObj(typeList,r.change_type)?.color),
-                  }"
-                >
-                  {{ matchObj(typeList,r.change_type)?.label }}
-                </NTag>
-                <!-- 等级 -->
-                <NTag 
-                  size="small"
-                  :color="{
-                    color: tagBgColor(matchObj(levelList,r.change_level)?.color),
-                    textColor: tagTextColor(matchObj(levelList,r.change_level)?.color),
-                    borderColor: tagBorderColor(matchObj(levelList,r.change_level)?.color),
-                  }"
-                >
-                  {{ matchObj(levelList,r.change_level)?.label }}
-                </NTag>
-                <NTag v-if="r.duration_type===2" size="small" type="warning">临时</NTag>
-                <NTag v-if="r.duration_type===1" size="small" type="info">永久</NTag>
-                <NTag v-if="r.extend_count" size="small" type="warning">延期</NTag>
-              </div>
-              <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-slate-500">
-                <span v-if="r.apply_time">申请 {{ r.apply_time?.slice(0,16) }}</span>
-                <span>{{ r.org_name }} · {{ r.applicant_name }}</span>
-                <span v-if="r.plan_use_date">计划投用 {{ r.plan_use_date?.slice(0,16) }}</span>
-                <span v-if="r.use_time">实际投用 {{ r.use_time?.slice(0,16) }}</span>
-                <span v-if="r.restore_deadline">计划恢复 {{ r.restore_deadline?.slice(0,16) }}</span>
-                <span v-if="r.close_time">关闭 {{ r.close_time?.slice(0,16) }}</span>
-                <span v-if="r.status_changed_at">状态更新 {{ r.status_changed_at?.slice(0,16) }}</span>
-              </div>
-            </div>
-            <div class="flex shrink-0 flex-col items-end gap-1.5">
-              <div class="flex flex-wrap items-center justify-end gap-2">
-                <!-- 状态标签 -->
-                <NTag v-if="r.status==='APPROVING'" size="small" type="warning">审批中</NTag>
-                <NTag v-if="r.status==='APPROVED'" size="small" type="success">已通过</NTag>
-                <NTag v-if="r.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
-                <NTag v-if="r.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
-                <NTag v-if="r.status==='CLOSED'" size="small" type="success">已关闭</NTag>
-                <NTag v-if="r.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
-                <NTag v-if="r.status==='REJECTED'" size="small" type="error">已驳回</NTag>
-                <!-- 超期 -->
-                <span v-if="r.overdue_status===2" class="text-[11px] font-medium text-red-500">超期 {{ r.overdue_days }} 天</span>
-              </div>
-              <!-- 操作按钮 -->
-              <div class="flex flex-wrap items-center justify-end gap-1 pt-0.5">
-                <!-- 审批中 -->
-                <NButton v-if="r.status==='APPROVING'" size="small" ghost type="error" class="text-xs" @click="openModal(r,'withdraw')">撤回</NButton>
-                <!-- 已批准待实施 -->
-                <NButton v-if="r.status==='APPROVED'" size="small" ghost type="primary" class="text-xs" @click="openModal(r,'unimplemented')">未实施情况说明</NButton>
-                <NButton v-if="r.status==='APPROVED'" size="small" ghost type="primary" class="text-xs" @click="downloadFiles(r,'apply')">下载申请表</NButton>
-                <!-- 已验收待关闭 -->
-                <NButton v-if="r.status==='ACCEPTED'" size="small" ghost type="error" class="text-xs" @click="downloadFiles(r,'accepted')">下载</NButton>
-                <!-- 已关闭 -->
-                <NButton v-if="r.status==='CLOSED'" size="small" ghost type="success" class="text-xs" @click="downloadFiles(r,'closed')">下载归档包</NButton>
-                <!-- 催办(超期) -->
-                <NButton v-if="r.overdue_days" size="small" ghost type="error" class="text-xs" @click="urge(r)">催办</NButton>
-                <NButton size="small" type="primary" class="text-xs" @click="jumpTo(r)">详情</NButton>
-                <NButton size="small" type="default" class="text-xs" @click="openProgress(r)">进度</NButton>
-              </div>
-              <!-- 临时变更 -->
-              <div v-if="r.duration_type === 2" class="text-right text-[10px] leading-4 text-slate-400">临时变更恢复 / 延期 / 转永久请在详情页中操作</div>
-            </div>
-          </div>
-        </div>
-        <div v-if="list.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center text-sm text-slate-400">当前筛选条件下暂无变更记录</div>
-      </div>
-      <div class="flex justify-end mt-3">
-        <NPagination 
-          v-model:page="pagination.page" 
-          :page-size="pagination.pageSize" 
-          :item-count="pagination.itemCount"
-          :on-update:page="pageChange"
-        >
-          <template #prefix="{ itemCount }">
-            共 {{ itemCount }} 条
-          </template>
-        </NPagination>
-      </div>
-      <!-- 撤回/未实施情况说明/未投用情况说明弹框 -->
-      <NModal
-          v-model:show="revokeModal"
-          preset="card"
-          :auto-focus="false"
-          :style="{ width: '450px', height: 'auto' }"
-          :segmented="{ content: true, footer: true }"
-      >
-          <template #header>
-              <h3 class="text-sm font-bold text-slate-800">
-                <span v-if="modalType === 'withdraw'">撤回变更申请</span>
-                <span v-else-if="modalType === 'unuse'">未投用情况说明</span>
-                <span v-else>未实施情况说明</span>
-                {{currentRow?.change_no}}
-              </h3>
-          </template>
-          <template #default>
-              <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
-                {{ modalType === 'withdraw'
-              ? '撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交。仅本人发起的审批中变更可撤回。'
-              : '变更审批通过 / 投用后未实施或未投用的，由申请人填写情况说明，提交后变更转入关闭流程，由变更主管部门专责确认关闭并记录关闭时间。' }}
-              </div>
-              <NInput
-                  class="mt-3"
-                  v-model:value="reason"
-                  type="textarea"
-                  :rows="3"
-                  :placeholder="modalType === 'withdraw' ? '撤回理由（必填）…' : '情况说明（必填）：原因、现场当前状态、后续处置安排…'"
-              />
-          </template>
-          <template #footer>
-              <div class="flex justify-end gap-[10px]">
-                  <NButton size="small" @click="revokeModal = false">取消</NButton>
-                  <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">提交</NButton>
-              </div>
-          </template>
-      </NModal>
-      <!-- 进度弹框 -->
-      <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
-        <NDrawerContent title="变更进度">
-          <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
-            <div class="text-sm font-semibold text-slate-800">{{ currentRow?.title }}</div>
-            <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
-                <span class="font-mono">{{ currentRow?.change_no }}</span>
-                <NTag v-if="currentRow?.status==='APPROVING'" size="small" type="warning">审批中</NTag>
-                <NTag v-if="currentRow?.status==='APPROVED'" size="small" type="success">已通过</NTag>
-                <NTag v-if="currentRow?.status==='IMPLEMENTED'" size="small" type="warning">待验收</NTag>
-                <NTag v-if="currentRow?.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
-                <NTag v-if="currentRow?.status==='CLOSED'" size="small" type="error">已关闭</NTag>
-                <NTag v-if="currentRow?.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
-                <NTag v-if="currentRow?.status==='REJECTED'" size="small" type="error">已驳回</NTag>
-                <span v-if="currentRow?.overdue_status===2" class="font-medium text-red-500">超期 {{ currentRow?.overdue_days }} 天</span>
-            </div>
-            <div v-if="currentRow?.dept || currentRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [currentRow?.dept, currentRow?.applicant].filter(Boolean).join(' · ') }}</div>
-            <div v-if="currentRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ currentRow?.meta }}</div>
-          </div>
-          <div class="mt-4">
-            <div v-for="(s, i) in currentRow?.approval_records" :key="s.id" class="flex gap-3">
-              <div class="flex flex-col items-center">
-                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-[#7CC242] bg-[#7CC242] text-white">
-                  <Icon icon="ix:success" />
-                </span>
-                <span 
-                  v-if="Number(i) < Number(currentRow?.approval_records?.length) - 1" 
-                  class="w-0.5 flex-1" 
-                  :class="Number(i) < Number(currentRow?.approval_records?.length) ? 'bg-[#7CC242]' : 'bg-slate-200'"
-                ></span>
-              </div>
-              <div class="pb-5">
-                <p class="text-sm">{{ s.action }}</p>
-                <span class="mt-0.5 text-[11px] text-slate-400">{{s.finished_at?.slice(0, 16)}}</span>
-              </div>
-            </div>
-          </div>
-          <div v-if="currentRow?.duration_type === 2" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
-            临时变更：计划恢复 {{ currentRow?.restore_deadline ?? '—' }} · 恢复 / 延期 / 转永久请在详情页中操作
-          </div>
-        </NDrawerContent>
-      </NDrawer>
-    </NCard>
-  </NSpin>
-</NSpace>
+<div>
+  <List self="1" />
+</div>
 </template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 338px);
-  overflow-y: auto;
-}
-</style>
diff --git a/src/views/changeLedger/workshopChanges/index.vue b/src/views/changeLedger/workshopChanges/index.vue
index 44c512d..0391341 100644
--- a/src/views/changeLedger/workshopChanges/index.vue
+++ b/src/views/changeLedger/workshopChanges/index.vue
@@ -1,688 +1,9 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-
-const { routerPushByKey } = useRouterPush();
-const themeStore = useThemeStore();
-
-const revokeModal = ref(false);
-const revokeSaving = ref<boolean>(false);
-const progressDrawer = ref<boolean>(false);
-const dept = ref("全部组织");
-const openOnly = ref(false);
-const kw = ref("");
-const typeFilter = ref("全部");
-const statusFilter = ref("全部");
-const durFilter = ref("全部");
-const period = ref<string>("近一年");
-const customFrom = ref<any>(null);
-const customTo = ref<any>(null);
-const sort = ref<{ k: string; dir: "asc" | "desc" }>({ k: "applyTime", dir: "desc" });
-const me = "张工艺";
-const DEPTS = ["全部组织", "一车间", "二车间", "供应部", "质量部"];
-const deptOpts = DEPTS.map((d) => ({ label: d, value: d }));
-const LEDGER_ROWS = [
-  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
-  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
-  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
-  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
-  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
-  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
-  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
-];
-const REF_NOW = new Date("2026-08-03T12:00:00");
-const PERIOD_DAYS: Record<string, number> = { 近一年: 365, 近半年: 183, 近三个月: 92, 近一个月: 31 };
-const rows = computed(() => {
-  let list = LEDGER_ROWS.slice();
-  if (dept.value !== "全部组织") list = list.filter((r) => r.dept === dept.value);
-  if (openOnly.value) list = list.filter((r) => r.status !== "已关闭");
-  if (typeFilter.value !== "全部") list = list.filter((r) => r.type === typeFilter.value);
-  if (statusFilter.value !== "全部") list = list.filter((r) => r.status === statusFilter.value);
-  if (durFilter.value !== "全部") list = list.filter((r) => r.duration === durFilter.value);
-  if (period.value !== "自定义") {
-    const from = new Date(REF_NOW.getTime() - PERIOD_DAYS[period.value] * 86400000);
-    list = list.filter((r) => new Date(r.applyTime.replace(" ", "T")) >= from);
-  } else {
-    if (customFrom.value) list = list.filter((r) => r.applyTime.slice(0, 10) >= customFrom.value);
-    if (customTo.value) list = list.filter((r) => r.applyTime.slice(0, 10) <= customTo.value);
-  }
-  if (kw.value.trim()) list = list.filter((r) => r.title.includes(kw.value.trim()) || r.id.includes(kw.value.trim()));
-  list.sort((a:any, b:any) => {
-    const va = a[sort.value.k], vb = b[sort.value.k];
-    return sort.value.dir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-  });
-  return list;
-});
-const navPreset = ref<string>("");
-const finalRows = computed(() => {
-  switch (navPreset.value) {
-    case "mine": return rows.value.filter((r:any) => r.applicant === me);
-    case "important": return rows.value.filter((r:any) => r.level === "重要");
-    case "temp": return rows.value.filter((r:any) => r.duration === "临时");
-    case "overdue": return rows.value.filter((r:any) => r.overdueDays);
-    case "highrisk": return rows.value.filter((r:any) => r.level === "重要" && r.status !== "已关闭");
-    default: return rows.value;
-  }
-});
-const TYPE_FILTERS = ["全部", "工艺", "设备", "管理"];
-const DUR_FILTERS = ["全部", "永久", "临时"];
-const PERIOD_FILTERS = ["近一年", "近半年", "近三个月", "近一个月", "自定义"];
-const STATUS_FILTERS = ["全部", "审批中", "已批准", "实施中", "待PSSR", "待验收", "待关闭", "已关闭"];
-const sortVal = computed({
-  get: () => `${sort.value.k}-${sort.value.dir}`,
-  set: (v: string) => { const [k, dir] = v.split("-") as [string, "asc" | "desc"]; sort.value = { k, dir }; },
-});
-const SORT_OPTS = [
-  { label: "申请时间 · 最新", value: "applyTime-desc" },
-  { label: "申请时间 · 最早", value: "applyTime-asc" },
-  { label: "计划投用 · 最近", value: "planUse-asc" },
-  { label: "计划投用 · 最晚", value: "planUse-desc" },
-  { label: "状态更新 · 最新", value: "statusTime-desc" },
-  { label: "状态更新 · 最早", value: "statusTime-asc" },
-];
-interface LedgerExtra {
-  special?: ("延期" | "临时转永久" | "未实施" | "未投用")[];
-  actualUse?: string; planRestore?: string; extRestore?: string; closeTime?: string;
-}
-const LEDGER_EXTRA: Record<string, LedgerExtra> = {
-  "MOC-2026-R01-0039": { special: ["延期"], actualUse: "2026-07-16 08:30", planRestore: "2026-07-27", extRestore: "2026-08-03" },
-  "MOC-2026-R01-0029": { special: ["临时转永久"], planRestore: "2026-08-01" },
-  "MOC-2026-R02-0033": { special: ["未实施"] },
-  "MOC-2026-R03-0040": { special: ["未投用"] },
-  "MOC-2026-R02-0031": { actualUse: "2026-07-15 09:20" },
-  "MOC-2026-R03-0027": { actualUse: "2026-06-25 10:00", closeTime: "2026-07-02 10:18" },
-  "MOC-2026-R01-0024": { actualUse: "2026-06-20 08:10", closeTime: "2026-06-28 16:30" },
-};
-const SPECIAL_COLOR: Record<string, string> = {
-  延期: "bg-amber-50 text-amber-700 border-amber-300",
-  临时转永久: "bg-[#DFE9F6] text-[#17407F] border-[#6E93C6]/50",
-  未实施: "bg-red-50 text-red-600 border-red-200",
-  未投用: "bg-red-50 text-red-600 border-red-200",
-};
-const STATUS_COLOR: Record<string, string> = {
-  审批中: "bg-amber-100 text-amber-700 border-amber-200",
-  已批准: "bg-[#DFE9F6] text-[#17407F] border-[#ACC6E5]",
-  实施中: "bg-[#1D4E9C]/10 text-[#1D4E9C] border-[#1D4E9C]/30",
-  待PSSR: "bg-violet-100 text-violet-700 border-violet-200",
-  待验收: "bg-emerald-50 text-emerald-600 border-emerald-200",
-  待关闭: "bg-[#E15555]/10 text-[#E15555] border-[#E15555]/30",
-  已关闭: "bg-emerald-100 text-emerald-700 border-emerald-200",
-};
-function opsOf(r: any, me: string, role?: string): { label: string; act: string; danger?: boolean }[] {
-  const ops: { label: string; act: string; danger?: boolean }[] = [];
-  if (r.status === "审批中" && r.applicant === me) ops.push({ label: "撤回", act: "withdraw", danger: true });
-  if (r.status === "已批准" || r.status === "待PSSR") ops.push({ label: "未实施情况说明", act: "unimpl" });
-  if (r.status === "实施中") ops.push({ label: "未投用情况说明", act: "unuse" });
-  if (role === "dept" && (r.overdueDays ?? 0) > 0) ops.push({ label: "催办", act: "urge" });
-  ops.push({ label: "详情", act: "detail" }, { label: "进度", act: "progress" });
-  if (r.status === "已批准") ops.push({ label: "下载申请表", act: "download" });
-  if (r.status === "待关闭") ops.push({ label: "下载", act: "download" });
-  if (r.status === "已关闭") ops.push({ label: "下载归档包", act: "download" });
-  return ops;
-}
-const FLOW_IMPORTANT = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  {
-    name: "专业会签",
-    kind: "会签",
-    roles: ["process", "process2", "quality"],
-    status: "current",
-    members: [
-      { name: "王仪表（仪表）", done: true },
-      { name: "周设备（设备）", done: false },
-      { name: "陈质量（质量）", done: false },
-    ],
-  },
-  { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
-  { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-];
-const FLOW_SIMPLE = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-  { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-];
-const CHANGES = [
-  {
-    id: "MOC-2026-R01-0035",
-    title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）",
-    type: "设备",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "R-201 反应釜 / M-201A 搅拌电机",
-    date: "2026-07-28",
-    purpose: "原 55kW 电机在高粘度工况下频繁过载跳闸，影响反应均匀性与产品质量，需更换为 75kW 防爆电机。",
-    effect: "消除过载跳闸（月均 3 次降至 0），搅拌电流裕量提升至 25%，产品批次合格率预计提升 1.5%。",
-    before: "M-201A 搅拌电机：55kW，ExdⅡBT4，额定电流 102A，原设计工况粘度 ≤3000cP。",
-    after: "更换为 75kW 防爆电机：ExdⅡCT4，额定电流 138A，适配粘度 ≤6000cP；电缆与开关容量同步校核升级。",
-    related: ["更新 P&ID（图号 PID-R201-03）", "修订电气图纸与电缆清册", "校核联锁跳车电流设定", "更新设备台账与备件清单", "操作人员培训"],
-    materials: ["设备数据表", "防爆合格证与材质证明", "电气负荷校核计算书", "更新后的 P&ID", "制造商安装维护手册"],
-    riskTools: ["AI 分析", "JSA", "检查表法"],
-    flow: FLOW_IMPORTANT,
-  },
-  {
-    id: "MOC-2026-R01-0036",
-    title: "聚合反应温度控制上限调整（78℃→82℃）",
-    type: "工艺",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "孙丽",
-    org: "一车间 · 工艺组",
-    device: "R-101 聚合釜 / TIC-101",
-    date: "2026-07-25",
-    purpose: "提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。",
-    effect: "单釜反应周期缩短约 40 分钟，年产能预计提升 8%。",
-    before: "聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。",
-    after: "控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。",
-    related: ["修订工艺卡片与操作规程", "DCS 参数与报警值修改", "更新 HAZOP 分析报告", "岗位人员再培训"],
-    materials: ["工艺计算书", "热平衡与飞温风险分析", "HAZOP 分析报告", "更新后的工艺卡片"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "current", locked: true },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-    ],
-  },
-  {
-    id: "MOC-2026-R02-0038",
-    title: "DCS 罐区液位报警值 LIA-301 调整",
-    type: "工艺",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "待PSSR",
-    applicant: "吴强",
-    org: "一车间 · 罐区",
-    device: "V-301 储罐 / LIA-301",
-    date: "2026-07-20",
-    purpose: "原高报值偏保守，频繁误报导致操作疲劳，按最新容积表校准报警值。",
-    effect: "误报次数由每周 5 次降至 0，报警响应有效性提升。",
-    before: "LIA-301 高报 80%（对应 7.2m）。",
-    after: "高报调整为 85%（对应 7.65m），联锁值 90% 不变。",
-    related: ["DCS 组态修改", "更新报警台账", "岗位告知培训"],
-    materials: ["储罐容积表", "DCS 组态修改记录", "报警台账"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0039",
-    title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）",
-    type: "设备",
-    level: "一般",
-    duration: "临时",
-    urgent: true,
-    status: "待关闭",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "V-102 缓冲罐 / PSV-102",
-    date: "2026-07-15",
-    purpose: "上游工况波动导致安全阀频繁起跳，经紧急批准临时调整起跳压力并限期恢复原设定。",
-    effect: "装置维持连续运行，临时期限内风险受控。",
-    before: "PSV-102 起跳压力 0.8MPa。",
-    after: "临时调整为 0.88MPa（不超过设计压力 1.0MPa 的 90%），期限 30 天，到期恢复 0.8MPa。",
-    related: ["恢复性检查", "更新安全阀台账", "事后风险分析补办"],
-    materials: ["安全阀校验报告", "紧急变更审批单", "事后 JSA 分析"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-    overdueDays: 4,
-  },
-  {
-    id: "MOC-2026-R03-0040",
-    title: "原料环己烷供应商变更（新增 B 供应商）",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "实施中",
-    applicant: "刘芳",
-    org: "供应部",
-    device: "原料罐区 / TK-201",
-    date: "2026-07-18",
-    purpose: "引入第二供应商保障原料供应安全，降低单一来源断供风险。",
-    effect: "供应保障能力提升，采购成本预计下降 3%。",
-    before: "环己烷单一供应商 A，纯度 ≥99.5%。",
-    after: "新增供应商 B（纯度 ≥99.8%，已提供 MSDS 与质检报告），双源供应。",
-    related: ["更新合格供应商名录", "修订进厂检验规程", "更新 MSDS 档案", "卸料操作培训"],
-    materials: ["新供应商资质文件", "产品质检报告与 MSDS", "进厂检验规程"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_IMPORTANT.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0029",
-    title: "操作规程修订（夏季工况）",
-    type: "管理",
-    level: "一般",
-    duration: "临时",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "全装置",
-    date: "2026-06-20",
-    purpose: "夏季高温工况下循环水温度升高，原操作规程冷却参数不适用，需修订夏季操作参数与巡检频次。",
-    effect: "夏季工况下装置运行参数受控，避免超温降负荷，预计减少非计划降量 2 次/年。",
-    before: "操作规程（2025 版）未区分冬夏季工况，冷却参数单一。",
-    after: "增加夏季工况章节：循环水温度 >28℃ 时启用备用冷却塔，巡检频次由 4h 调整为 2h。",
-    related: ["操作规程升版发布", "岗位人员培训"],
-    materials: ["修订后操作规程", "参数核算表"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R02-0041",
-    title: "公用工程氮气减压阀组改造",
-    type: "设备",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "周涛",
-    org: "公用工程车间",
-    device: "氮气总管 / PV-208 减压阀组",
-    date: "2026-07-29",
-    purpose: "氮气减压阀组单路运行，检修时需停氮气，影响装置密封气供应，需改造为双路并联。",
-    effect: "减压阀组可在线切换检修，氮气供应连续性提升至 100%。",
-    before: "PV-208 单路减压，无备用回路。",
-    after: "新增并联减压回路 PV-208B，双路一用一备，可在线切换。",
-    related: ["更新 P&ID", "修订氮气系统操作规程", "更新设备台账"],
-    materials: ["阀门数据表", "管道单线图", "施工方案"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R03-0042",
-    title: "三车间自动化和安全隐患整改项目变更",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "刘芳",
-    org: "三车间",
-    device: "三车间装置区",
-    date: "2026-07-31",
-    purpose: "落实安全隐患整改要求，对三车间自动化控制系统升级改造，消除加料互串与超温隐患。",
-    effect: "隐患整改闭环率 100%，自动化水平提升，误操作风险显著降低。",
-    before: "加料系统手动控制，存在互串与超温隐患（隐患编号 YH-2026-017）。",
-    after: "改为 DCS 自动控制 + 加料顺序联锁，增设独立超温切断。",
-    related: ["修订操作规程", "DCS 组态修改", "更新 HAZOP 分析", "岗位再培训"],
-    materials: ["隐患整改方案", "HAZOP 分析报告", "联锁因果表"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "process2", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "周设备（设备）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "done" },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "current" },
-    ],
-  },
-];
-const progressRow = ref<any>(null);
-const ledgerAct = ref<{ id: string; act: "withdraw" | "unimpl" | "unuse" } | null>(null);
-const ledgerReason = ref("");
-function nowStr() {
-  const d = new Date();
-  const p = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
-}
-type DemoListener = () => void;
-const demoListeners = new Set<DemoListener>();
-function emitDemo() { demoListeners.forEach((f) => f()); }
-interface UrgeRecord { id: string; changeId: string; title: string; applicant: string; by: string; time: string; }
-let urgeSeq = 1;
-const URGE_RECORDS: UrgeRecord[] = [];
-const ROLES = [
-  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
-  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
-  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
-  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
-  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
-  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
-  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
-  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
-  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
-];
-function urgeChange(changeId: string, byRole: string) {
-  const row = LEDGER_ROWS.find((r) => r.id === changeId || r.changeId === changeId);
-  const c = CHANGES.find((x) => x.id === changeId);
-  const by = ROLES.find((r:any) => r.id === byRole)?.person ?? byRole;
-  URGE_RECORDS.unshift({
-    id: `URGE-${urgeSeq++}`,
-    changeId,
-    title: row?.title ?? c?.title ?? changeId,
-    applicant: row?.applicant ?? c?.applicant ?? "",
-    by,
-    time: nowStr(),
-  });
-  emitDemo();
-}
-
-const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
-const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[progressRow.value?.status ?? ""] ?? 1);
-const closed = computed(() => progressRow.value?.status === "已关闭");
-const timeOf = (i: number) => (i === 0 ? progressRow.value?.applyTime : i === 3 ? progressRow.value?.actualUse : i === 5 ? progressRow.value?.closeTime : undefined);
-
-const role = ref<string>("applicant");
-const doOp = (r: any, act: string) => {
-  if (act === "detail") {
-    const c = CHANGES.find((x) => x.id === r.changeId);
-    if (c) {
-      // 跳转详情页面
-      // emit("openChange", c);
-    }else {
-      window.$message?.info(`演示：打开变更详情页 ${r.id}`);
-    }
-    return;
-  }
-  if (act === "progress") { 
-    progressRow.value = r;
-    progressDrawer.value = true;
-    return; 
-  }
-  if (act === "withdraw" || act === "unimpl" || act === "unuse") { 
-    ledgerAct.value = { id: r.id, act }; 
-    ledgerReason.value = ""; 
-    revokeModal.value = true;
-    return; 
-  }
-  if (act === "urge") { 
-    urgeChange(r.id, role.value ?? "dept"); 
-    window.$message?.success(`已催办 ${r.id} 申请人 ${r.applicant}（系统消息 + 企业微信），催办记录已留痕并抄送变更主管部门，申请人操作台将出现催办提示`); 
-    return; 
-  }
-  window.$message?.info(`演示：下载 ${r.id} 变更申请表 / 归档包（PDF）`);
-};
-
-// 重置
-const reset = () => {
-  dept.value = "全部组织"; openOnly.value = false; kw.value = ""; typeFilter.value = "全部"; statusFilter.value = "全部";
-  durFilter.value = "全部"; period.value = "近一年"; customFrom.value = null; customTo.value = null;
-  sort.value = { k: "applyTime", dir: "desc" };
-  window.$message?.success("筛选条件已重置");
-};
-// 导出台账
-const exportChanges = () => {
-  window.$message?.success(`演示：导出台账 Excel（当前筛选 ${finalRows.value.length} 条）`);
-}
-// 撤回弹框取消
-const revokeCancel = () => {
-  ledgerAct.value = null;
-  ledgerReason.value = "";
-  revokeModal.value = false;
-}
-// 撤回弹框提交
-const revokeSave = () => {
-  if (!ledgerReason.value) {
-    window.$message?.warning("请输入撤回理由");
-    return;
-  }
-  window.$message?.success(ledgerAct.value?.act === 'withdraw' ? `已撤回 ${ledgerAct.value?.id}，申请退回草稿箱，审批记录保留可查` : `${ledgerAct.value?.id} 情况说明已提交，变更转入关闭流程（主管部门确认后记录关闭时间）`);
-  revokeCancel();
-}
+import List from "../modules/list.vue";
 </script>
 
 <template>
-  <NSpace vertical :size="16">
-    <!-- 我发起的变更 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-      <!-- 工具条 -->
-      <div 
-        class="flex flex-wrap items-center gap-2 border px-3 py-2"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-          <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> 全部变更
-          <span class="rounded bg-slate-100 px-1.5 text-xs text-slate-500">{{ finalRows.length }}</span>
-        </span>
-        <NSelect size="small" class="!w-32" :value="dept" :options="deptOpts" @update:value="(v: string) => dept = v" />
-        <NRadio
-          size="small"
-          :checked="!openOnly"
-          :value="false"
-          name="显示全部"
-          @change="openOnly = false"
-        >
-          显示全部
-        </NRadio>
-        <NRadio
-          size="small"
-          :checked="openOnly"
-          :value="true"
-          name="显示未关闭"
-          @change="openOnly = true"
-        >
-          显示未关闭
-        </NRadio>
-        <div class="relative ml-auto">
-          <NInput v-model:value="kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号">
-            <template #suffix>
-              <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-            </template>
-          </NInput>
-        </div>
-        <NButton size="small" class="text-sm" @click="reset">
-          <Icon icon="system-uicons:reset" class="size-12px" />重置
-        </NButton>
-        <NButton size="small" class="text-sm" @click="exportChanges">
-          <Icon icon="material-symbols:download" class="size-14px" />导出台账
-        </NButton>
-      </div>
-      <!-- 筛选与排序行 -->
-      <div 
-        class="flex flex-col gap-y-2 border px-3 py-2 my-3"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <div class="flex items-center gap-x-4">
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">类型</span>
-            <NButton size="tiny" round v-for="t in TYPE_FILTERS" :key="t" :ghost="typeFilter === t ? false : true" :type="typeFilter === t ? 'primary' : 'default'" @click="typeFilter = t">{{ t }}</NButton>
-          </p>
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时限</span>
-            <NButton size="tiny" round v-for="d in DUR_FILTERS" :key="d" :ghost="durFilter === d ? false : true" :type="durFilter === d ? 'primary' : 'default'" @click="durFilter = d">{{ d }}</NButton>
-          </p>
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时间</span>
-            <NButton size="tiny" round v-for="p in PERIOD_FILTERS" :key="p" :ghost="period === p ? false : true" :type="period === p ? 'primary' : 'default'" @click="period = p">{{ p }}</NButton>
-            <span v-if="period === '自定义'" class="flex items-center gap-1">
-              <NDatePicker v-model:value="customFrom" type="date" size="small" class="w-130px" />
-              <span class="text-xs text-slate-400">至</span>
-              <NDatePicker v-model:value="customTo" type="date" size="small" class="w-130px" />
-            </span>
-          </p>
-        </div>
-        <div class="flex items-center gap-x-4">
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">状态</span>
-            <NButton size="tiny" round v-for="s in STATUS_FILTERS" :key="s" :ghost="statusFilter === s ? false : true" :type="statusFilter === s ? 'primary' : 'default'" @click="statusFilter = s">{{ s }}</NButton>
-          </p>
-          <p class="ml-auto flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">排序</span>
-            <NSelect size="small" class="!w-36" v-model:value="sortVal" :options="SORT_OPTS" />
-          </p>
-        </div>
-      </div>
-      <div class="space-y-3 scroll">
-        <!-- 列表 -->
-        <div v-for="(r, i) in finalRows" :key="r.id" class="rounded-lg border bg-white px-4 py-3">
-          <div class="flex flex-wrap items-start gap-3">
-            <div class="min-w-0 flex-1">
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="text-xs text-slate-300">{{ String(i + 1).padStart(2, '0') }}</span>
-                <NButton text class="text-left text-sm font-semibold text-slate-800 hover:text-[#1D4E9C] hover:underline" @click="doOp(r, 'detail')">{{ r.title }}</NButton>
-                <NTag size="small" v-if="r.urgent" class="animate-breathe border-[#E15555] bg-[#E15555] text-white">紧急</NTag>
-                <span class="font-mono text-[11px] text-slate-400">{{ r.id }}</span>
-              </div>
-              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
-                <NTag size="small" class="border-slate-200 bg-white text-slate-600">{{ r.type }}</NTag>
-                <NTag size="small" :class="r.level === '重要' ? 'border-red-200 bg-red-100 text-red-700' : 'border-slate-200 bg-slate-100 text-slate-600'">{{ r.level }}</NTag>
-                <NTag size="small" :class="r.duration === '临时' ? 'border-[#FAAD14] bg-[#FAAD14] text-white' : 'border-[#1D4E9C] bg-[#1D4E9C] text-white'">{{ r.duration }}</NTag>
-                <NTag size="small" v-for="s in LEDGER_EXTRA[r.id]?.special ?? []" :key="s" :class="SPECIAL_COLOR[s]">{{ s }}</NTag>
-              </div>
-              <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-slate-500">
-                <span>申请 {{ r.applyTime }}</span>
-                <span>{{ r.dept }} · {{ r.applicant }}</span>
-                <span>计划投用 {{ r.planUse }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.actualUse">实际投用 {{ LEDGER_EXTRA[r.id].actualUse }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.planRestore">计划恢复 {{ LEDGER_EXTRA[r.id].planRestore }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.extRestore" class="text-amber-600">延期后恢复 {{ LEDGER_EXTRA[r.id].extRestore }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.closeTime">关闭 {{ LEDGER_EXTRA[r.id].closeTime }}</span>
-                <span>状态更新 {{ r.statusTime }}</span>
-              </div>
-            </div>
-            <div class="flex shrink-0 flex-col items-end gap-1.5">
-              <div class="flex flex-wrap items-center justify-end gap-2">
-                <span class="text-[11px] text-slate-400">{{ r.statusDetail }}</span>
-                <NTag size="small" :class="STATUS_COLOR[r.status]">{{ r.status }}</NTag>
-                <span v-if="r.overdueDays" class="text-[11px] font-medium text-red-500">超期 {{ r.overdueDays }} 天</span>
-              </div>
-              <div class="flex flex-wrap items-center justify-end gap-1 pt-0.5">
-                <NButton size="small" v-for="op in opsOf(r, me, role)" :key="op.label"
-                  class="text-xs"
-                  :ghost="op.act === 'detail' ? false : true"
-                  :type="op.act === 'detail' ? 'primary' : op.danger ? 'error' : 'default'"
-                  @click="doOp(r, op.act)">
-                  {{ op.label }}
-                </NButton>
-              </div>
-              <div v-if="r.duration === '临时'" class="text-right text-[10px] leading-4 text-slate-400">临时变更恢复 / 延期 / 转永久请在详情页中操作</div>
-            </div>
-          </div>
-        </div>
-        <div v-if="finalRows.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center text-sm text-slate-400">当前筛选条件下暂无变更记录</div>
-      </div>
-      <div class="text-xs text-slate-400 mt-3">
-        共 {{ finalRows.length }} 条 · 台账以查看、下载为主（申请表 / 归档包）；与"我"相关的待办流转请前往「我的任务」处理。点击变更名称可打开详情。
-      </div>
-      <!-- 撤回/未实施情况说明/未投用情况说明弹框 -->
-      <NModal
-          v-model:show="revokeModal"
-          preset="card"
-          :auto-focus="false"
-          :style="{ width: '450px', height: 'auto' }"
-          :segmented="{ content: true, footer: true }"
-      >
-          <template #header>
-              <h3 class="text-sm font-bold text-slate-800">
-                <span v-if="ledgerAct?.act === 'withdraw'">撤回变更申请</span>
-                <span v-else-if="ledgerAct?.act === 'unuse'">未投用情况说明</span>
-                <span v-else>未实施情况说明</span>
-                {{ledgerAct?.id}}
-              </h3>
-          </template>
-          <template #default>
-              <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
-                {{ ledgerAct?.act === 'withdraw'
-              ? '撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交。仅本人发起的审批中变更可撤回。'
-              : '变更审批通过 / 投用后未实施或未投用的，由申请人填写情况说明，提交后变更转入关闭流程，由变更主管部门专责确认关闭并记录关闭时间。' }}
-              </div>
-              <NInput
-                  class="mt-3"
-                  v-model:value="ledgerReason"
-                  type="textarea"
-                  :rows="3"
-                  :placeholder="ledgerAct?.act === 'withdraw' ? '撤回理由（必填）…' : '情况说明（必填）：原因、现场当前状态、后续处置安排…'"
-              />
-          </template>
-          <template #footer>
-              <div class="flex justify-end gap-[10px]">
-                  <NButton size="small" @click="revokeCancel">取消</NButton>
-                  <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">提交</NButton>
-              </div>
-          </template>
-      </NModal>
-      <!-- 进度抽屉 -->
-      <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
-        <NDrawerContent title="变更进度">
-            <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
-                <div class="text-sm font-semibold text-slate-800">{{ progressRow?.title }}</div>
-                <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
-                    <span class="font-mono">{{ progressRow?.id }}</span>
-                    <NTag v-if="progressRow?.status==='审批中'" size="small" type="warning">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='已批准'" size="small" type="primary">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='待验收'" size="small" type="success">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='待关闭'" size="small" type="error">{{progressRow.status}}</NTag>
-                    <span v-if="progressRow?.overdue" class="font-medium text-red-500">超期 {{ progressRow?.day }} 天</span>
-                </div>
-                <div v-if="progressRow?.dept || progressRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [progressRow?.dept, progressRow?.applicant].filter(Boolean).join(' · ') }}</div>
-                <div v-if="progressRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ progressRow?.meta }}</div>
-            </div>
-            <div class="mt-4">
-                <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
-                    <div class="flex flex-col items-center">
-                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
-                            :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
-                            <Icon v-if="i < curIdx || closed" icon="ix:success" />
-                            <Icon v-else-if="i === curIdx" icon="tabler:clock" />
-                            <span v-else class="text-[10px]">{{ i + 1 }}</span>
-                        </span>
-                        <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
-                    </div>
-                    <div class="pb-5">
-                        <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
-                            {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
-                        </div>
-                        <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
-                        <div v-if="i === curIdx && !closed && (progressRow?.detail || progressRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
-                            {{ [progressRow?.detail, progressRow?.updateTime ? `更新 ${progressRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div v-if="progressRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
-                临时变更：计划恢复 {{ progressRow?.deadline ?? '—' }}{{ progressRow?.extended ? ` · 延期后恢复 ${progressRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
-            </div>
-        </NDrawerContent>
-      </NDrawer>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 326px);
-  overflow-y: auto;
-}
-</style>
+<div>
+  <List self="" />
+</div>
+</template>
\ No newline at end of file