审批模板修改

src/views/changeLedger/myChanges/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
+import { changeLedgerListApi } from '@/service/api/changeLedger';
 
 const { routerPushByKey } = useRouterPush();
 const themeStore = useThemeStore();
@@ -458,11 +459,66 @@ const revokeSave = () => {
   window.$message?.success(ledgerAct.value?.act === 'withdraw' ? `已撤回 ${ledgerAct.value?.id}，申请退回草稿箱，审批记录保留可查` : `${ledgerAct.value?.id} 情况说明已提交，变更转入关闭流程（主管部门确认后记录关闭时间）`);
   revokeCancel();
 }
+
+const loading = ref<boolean>(false);
+// 筛选条件
+const formInfo = ref<any>({
+  kw: '',
+  type: 0,
+  level: 0,
+  duration: 0,
+  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: 3,
+  itemCount: 0,
+})
+// 列表
+const list = ref<any[]>([]);
+
+// 分页改变
+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) {
+    console.log(data)
+    list.value = data?.list ?? [];
+    pagination.value.itemCount = data?.total ?? 0;
+  }
+  loading.value = false;
+}
+
+onMounted(() => {
+  getList();
+});
 </script>
 
 <template>
-  <NSpace vertical :size="16">
-    <!-- 我发起的变更 -->
+<NSpace vertical :size="16">
+  <!-- 我发起的变更 -->
+  <NSpin :show="loading" size="small">
     <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
       <!-- 工具条 -->
       <div 
@@ -590,8 +646,17 @@ const revokeSave = () => {
         </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 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
@@ -674,7 +739,8 @@ const revokeSave = () => {
         </NDrawerContent>
       </NDrawer>
     </NCard>
-  </NSpace>
+  </NSpin>
+</NSpace>
 </template>
 
 <style scoped>
@@ -682,7 +748,7 @@ const revokeSave = () => {
 </style>
 <style scoped lang="scss">
 .scroll {
-  height: calc(100vh - 326px);
+  height: calc(100vh - 338px);
   overflow-y: auto;
 }
 </style>