admin-vben5/apps/web-antd/src/views/workflow/task/taskWaiting.vue

<script setup lang="ts">
import { reactive, ref } from 'vue';

import { Page } from '@vben/common-ui';

import {
  Alert,
  Avatar,
  Card,
  Divider,
  InputSearch,
  Space,
  TabPane,
  Tabs,
  Tag,
} from 'ant-design-vue';
import { debounce, uniqueId } from 'lodash-es';

import { ApprovalCard } from '../components';

const handleScroll = debounce((e: Event) => {
  if (!e.target) {
    return;
  }
  // e.target.scrollTop 是元素顶部到当前可视区域顶部的距离，即已滚动的高度。
  // e.target.clientHeight 是元素的可视高度。
  // e.target.scrollHeight 是元素的总高度。
  const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
  // 判断是否滚动到底部
  const isBottom = scrollTop + clientHeight >= scrollHeight;
  console.log(isBottom);
  // console.log(scrollTop + clientHeight);
  // console.log(scrollHeight);
}, 200);

const data = reactive(
  Array.from({ length: 10 }).map(() => ({
    id: uniqueId(),
    startTime: '2022-01-01',
    endTime: '2022-01-02',
    title: '审批任务',
    desc: '审批任务描述',
    status: '审批中',
    active: false,
  })),
);

const lastSelectId = ref('');
function handleCardClick(id: string) {
  // 点击的是同一个
  if (lastSelectId.value === id) {
    return;
  }
  // 反选状态 & 如果已经点击了 不变 & 保持只能有一个选中
  data.forEach((item) => {
    item.active = item.id === id;
  });
  lastSelectId.value = id;
}
</script>

<template>
  <Page :auto-content-height="true">
    <div class="flex h-full gap-2">
      <div class="bg-background flex h-full w-[320px] flex-col rounded-lg">
        <!-- 搜索条件 -->
        <div
          class="bg-background z-100 sticky left-0 top-0 w-full rounded-t-lg border-b-[1px] border-solid p-2"
        >
          <InputSearch placeholder="搜索" />
        </div>
        <div
          class="flex flex-1 flex-col gap-2 overflow-y-auto py-3"
          @scroll="handleScroll"
        >
          <ApprovalCard
            v-for="item in data"
            :key="item.id"
            :info="item"
            class="mx-2"
            @click="handleCardClick"
          />
        </div>
        <!-- total显示 -->
        <div
          class="bg-background sticky bottom-0 w-full rounded-b-lg border-t-[1px] py-2"
        >
          <div class="flex items-center justify-center">
            共 {{ data.length }} 条记录
          </div>
        </div>
      </div>
      <Card class="flex-1" size="small" title="编号: 1234567890123456789012">
        <div class="flex flex-col gap-5 p-4">
          <div class="flex flex-col gap-3">
            <div class="flex items-center gap-2">
              <div class="text-2xl font-bold">报销申请</div>
              <div>
                <Tag color="warning">申请中</Tag>
              </div>
            </div>
            <div class="flex items-center gap-2">
              <Avatar
                size="small"
                src="https://plus.dapdap.top/minio-server/plus/2024/11/21/925ed278e2d441beb7f695b41e13c4dd.jpg"
              />
              <span>疯狂的牛子Li</span>
              <div class="flex items-center opacity-50">
                <span>XXXX有限公司</span>
                <Divider type="vertical" />
                <span>提交于: 2022-01-01 12:00:00</span>
              </div>
            </div>
          </div>
          <Tabs>
            <TabPane key="1" tab="审批详情">
              <Alert message="该页面仅为静态页 后期可能会用到!" type="info" />
            </TabPane>
            <TabPane key="2" tab="审批记录">审批记录</TabPane>
            <TabPane key="3" tab="全文评论(999+)">全文评论</TabPane>
          </Tabs>
        </div>
        <!-- 固定底部 -->
        <div
          class="border-t-solid absolute bottom-0 left-0 w-full border-t-[1px] p-3"
        >
          <div class="flex justify-end">
            <Space>
              <a-button type="primary">通过</a-button>
              <a-button danger type="primary">驳回</a-button>
              <a-button>其他</a-button>
            </Space>
          </div>
        </div>
      </Card>
    </div>
  </Page>
</template>