chore: 审批样式
This commit is contained in:
parent
af622d852f
commit
90c7bf625a
@ -0,0 +1,50 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Timeline, TimelineItem } from 'ant-design-vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO: 仅为demo 后期会替换
|
||||||
|
*/
|
||||||
|
import { VbenAvatar } from '../../../../../../packages/@core/ui-kit/shadcn-ui/src/components';
|
||||||
|
|
||||||
|
interface ApprovalItem {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
remark?: string;
|
||||||
|
time: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
list: ApprovalItem[];
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Timeline>
|
||||||
|
<TimelineItem v-for="item in props.list" :key="item.id">
|
||||||
|
<template #dot>
|
||||||
|
<div class="relative rounded-full border">
|
||||||
|
<VbenAvatar
|
||||||
|
class="size-[36px]"
|
||||||
|
src="https://plus.dapdap.top/minio-server/plus/2024/11/21/925ed278e2d441beb7f695b41e13c4dd.jpg"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="border-background absolute bottom-0 right-0 size-[16px] rounded-full border-2 bg-green-500 content-['']"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<span class="icon-[mdi--success-bold] text-white"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="ml-2 flex flex-col">
|
||||||
|
<div>发起人</div>
|
||||||
|
<div>疯狂的牛子Li</div>
|
||||||
|
<div>2022-01-01 12:00:00</div>
|
||||||
|
<div class="rounded-lg border p-1">
|
||||||
|
<span class="opacity-70">这里是备注信息</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TimelineItem>
|
||||||
|
</Timeline>
|
||||||
|
</template>
|
@ -1 +1,2 @@
|
|||||||
export { default as ApprovalCard } from './approval-card.vue';
|
export { default as ApprovalCard } from './approval-card.vue';
|
||||||
|
export { default as ApprovalTimeline } from './approval-timeline.vue';
|
||||||
|
BIN
apps/web-antd/src/views/workflow/components/rejection.png
Normal file
BIN
apps/web-antd/src/views/workflow/components/rejection.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
@ -16,7 +16,8 @@ import {
|
|||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
import { debounce, uniqueId } from 'lodash-es';
|
import { debounce, uniqueId } from 'lodash-es';
|
||||||
|
|
||||||
import { ApprovalCard } from '../components';
|
import { ApprovalCard, ApprovalTimeline } from '../components';
|
||||||
|
import RejectionPng from '../components/rejection.png';
|
||||||
|
|
||||||
const handleScroll = debounce((e: Event) => {
|
const handleScroll = debounce((e: Event) => {
|
||||||
if (!e.target) {
|
if (!e.target) {
|
||||||
@ -45,6 +46,14 @@ const data = reactive(
|
|||||||
})),
|
})),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const timeLine = Array.from({ length: 5 }).map(() => ({
|
||||||
|
id: uniqueId(),
|
||||||
|
name: '张三',
|
||||||
|
status: '审批中',
|
||||||
|
remark: '审批任务描述',
|
||||||
|
time: '2022-01-01',
|
||||||
|
}));
|
||||||
|
|
||||||
const lastSelectId = ref('');
|
const lastSelectId = ref('');
|
||||||
function handleCardClick(id: string) {
|
function handleCardClick(id: string) {
|
||||||
// 点击的是同一个
|
// 点击的是同一个
|
||||||
@ -90,7 +99,12 @@ function handleCardClick(id: string) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Card class="flex-1" size="small" title="编号: 1234567890123456789012">
|
<Card
|
||||||
|
:body-style="{ overflowY: 'auto', height: '100%' }"
|
||||||
|
class="flex-1 overflow-y-hidden"
|
||||||
|
size="small"
|
||||||
|
title="编号: 1234567890123456789012"
|
||||||
|
>
|
||||||
<div class="flex flex-col gap-5 p-4">
|
<div class="flex flex-col gap-5 p-4">
|
||||||
<div class="flex flex-col gap-3">
|
<div class="flex flex-col gap-3">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
@ -111,10 +125,18 @@ function handleCardClick(id: string) {
|
|||||||
<span>提交于: 2022-01-01 12:00:00</span>
|
<span>提交于: 2022-01-01 12:00:00</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 右侧图标 -->
|
||||||
|
<div class="z-100 absolute right-3 top-3">
|
||||||
|
<img :src="RejectionPng" class="size-[96px]" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Tabs>
|
<Tabs class="flex-1">
|
||||||
<TabPane key="1" tab="审批详情">
|
<TabPane key="1" tab="审批详情">
|
||||||
<Alert message="该页面仅为静态页 后期可能会用到!" type="info" />
|
<div class="h-fulloverflow-y-auto">
|
||||||
|
<Alert message="该页面仅为静态页 后期可能会用到!" type="info" />
|
||||||
|
<Divider />
|
||||||
|
<ApprovalTimeline :list="timeLine" />
|
||||||
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane key="2" tab="审批记录">审批记录</TabPane>
|
<TabPane key="2" tab="审批记录">审批记录</TabPane>
|
||||||
<TabPane key="3" tab="全文评论(999+)">全文评论</TabPane>
|
<TabPane key="3" tab="全文评论(999+)">全文评论</TabPane>
|
||||||
@ -122,7 +144,7 @@ function handleCardClick(id: string) {
|
|||||||
</div>
|
</div>
|
||||||
<!-- 固定底部 -->
|
<!-- 固定底部 -->
|
||||||
<div
|
<div
|
||||||
class="border-t-solid absolute bottom-0 left-0 w-full border-t-[1px] p-3"
|
class="border-t-solid bg-background absolute bottom-0 left-0 w-full border-t-[1px] p-3"
|
||||||
>
|
>
|
||||||
<div class="flex justify-end">
|
<div class="flex justify-end">
|
||||||
<Space>
|
<Space>
|
||||||
|
Loading…
Reference in New Issue
Block a user