admin-vben5/apps/web-antd/src/views/workflow/components/approval-card.vue

<script setup lang="ts">
import { Avatar, Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';

interface Props {
  id: string;
  endTime: string;
  startTime: string;
  title: string;
  desc: string;
  status: string;
  active: boolean;
}

const props = withDefaults(defineProps<{ info: Props }>(), {});

const emit = defineEmits<{ click: [string] }>();

function handleClick() {
  emit('click', props.info.id);
}
</script>

<template>
  <div
    :class="{
      'border-primary': info.active,
      'border-[2px]': info.active,
    }"
    class="cursor-pointer rounded-lg border-[1px] border-solid p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg"
    @click.stop="handleClick"
  >
    <Descriptions :column="1" :title="info.title" size="middle">
      <template #extra>
        <Tag color="warning">审批中</Tag>
      </template>
      <DescriptionsItem label="描述">{{ info.desc }}</DescriptionsItem>
      <DescriptionsItem label="开始时间">{{ info.startTime }}</DescriptionsItem>
      <DescriptionsItem label="结束时间">{{ info.endTime }}</DescriptionsItem>
    </Descriptions>
    <div class="flex items-center justify-between text-[14px]">
      <div class="flex items-center gap-1">
        <Avatar
          size="small"
          src="https://plus.dapdap.top/minio-server/plus/2024/11/21/925ed278e2d441beb7f695b41e13c4dd.jpg"
        />
        <span class="opacity-50">疯狂的牛子Li</span>
      </div>
      <div class="opacity-50">处理时间: 2022-01-01</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.ant-descriptions .ant-descriptions-header) {
  margin-bottom: 12px !important;
}

:deep(.ant-descriptions-item) {
  padding-bottom: 8px !important;
}
</style>