manager/my-spring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
gaoxq
2026-03-24 22:06:31 +08:00
parent 80e3cb1b58
commit 52618d491b
18 changed files with 1643 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
web-vue/packages/core/layouts/default/header/components/notify/NoticeList.vue
View File

@@ -1,19 +1,18 @@
<template>
<a-list :class="prefixCls" bordered :pagination="getPagination">
<template v-for="item in getData" :key="item.id">
<a-list-item class="list-item" v-if="!item.titleDelete">
<a-list-item class="list-item" v-if="item.titleDelete != '1'">
<a-list-item-meta @click="handleTitleClick(item)">
<template #title>
<div class="title">
<a-typography-paragraph
style="width: 100%; margin-bottom: 0 !important"
:style="{ cursor: isTitleClickable ? 'pointer' : '' }"
:delete="!!item.titleDelete"
:ellipsis="
$props.titleRows && $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: !!item.title } : false
"
:content="item.title"
/>
<a-tooltip :title="item.title" placement="topLeft">
<span
class="title-text"
:style="{ cursor: isTitleClickable ? 'pointer' : 'default' }"
:class="{ 'title-delete': item.titleDelete == '1' }"
>{{ item.title }}</span
>
</a-tooltip>
<div class="extra" v-if="item.extra">
<a-tag class="tag" :color="item.color">
{{ item.extra }}
@@ -23,30 +22,17 @@
</template>
<template #avatar>
<a-avatar v-if="item.avatar && item.avatar.indexOf('://') != -1" class="avatar" :src="item.avatar" />
<a-avatar v-else-if="item.avatar && item.avatar.indexOf(':') != -1" class="avatar avatar-icon">
<Icon :icon="item.avatar" />
</a-avatar>
<span v-else> {{ item.avatar }}</span>
<a-avatar class="avatar" :src="item.avatar" />
</template>
<template #description>
<div>
<div class="description" v-if="item.description">
<a-typography-paragraph
style="width: 100%; margin-bottom: 0 !important"
:ellipsis="
$props.descRows && $props.descRows > 0
? { rows: $props.descRows, tooltip: !!item.description }
: false
"
:content="item.description"
/>
</div>
<div class="datetime">
{{ item.datetime }}
</div>
</div>
<a-tooltip v-if="item.description" placement="topLeft">
<template #title>
<span v-html="item.description"></span>
</template>
<div class="description" v-html="item.description"></div>
</a-tooltip>
<div class="datetime">{{ item.datetime }}</div>
</template>
</a-list-item-meta>
</a-list-item>
@@ -55,73 +41,82 @@
</template>
<script lang="ts">
import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
import { ListItem } from './data';
import { MyNoticeTodo, TabItem } from '@jeesite/biz/api/biz/myNoticeTodo';
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
import { List, Avatar, Tag, Typography } from 'ant-design-vue';
import { List, Avatar, Tag, Tooltip } from 'ant-design-vue';
import { Icon } from '@jeesite/core/components/Icon';
import { isNumber } from '@jeesite/core/utils/is';
function toNumber(value: unknown, defaultValue = 0) {
if (isNumber(value)) return value;
const parsed = Number(value);
return Number.isFinite(parsed) ? parsed : defaultValue;
}
export default defineComponent({
components: {
[Avatar.name as string]: Avatar,
[List.name as string]: List,
[List.Item.name as string]: List.Item,
AListItemMeta: List.Item.Meta,
ATypographyParagraph: Typography.Paragraph,
[Tag.name as string]: Tag,
[Tooltip.name as string]: Tooltip,
Icon,
},
props: {
list: {
type: Array as PropType<ListItem[]>,
type: Array as PropType<MyNoticeTodo[]>,
default: () => [],
},
pageSize: {
type: [Boolean, Number] as PropType<boolean | number>,
type: [Boolean, Number, String] as PropType<boolean | number | string>,
default: 5,
},
currentPage: {
type: Number,
type: [Number, String] as PropType<number | string>,
default: 1,
},
titleRows: {
type: Number,
type: [Number, String] as PropType<number | string>,
default: 1,
},
descRows: {
type: Number,
type: [Number, String] as PropType<number | string>,
default: 2,
},
onTitleClick: {
type: Function as PropType<(Recordable) => void>,
type: Function as PropType<(item: Recordable) => void>,
},
},
emits: ['update:currentPage'],
setup(props, { emit }) {
const { prefixCls } = useDesign('header-notify-list');
const current = ref(props.currentPage || 1);
const getData = computed<ListItem[]>(() => {
const current = ref(toNumber(props.currentPage, 1));
const getTitleRows = computed(() => toNumber(props.titleRows, 1));
const getDescRows = computed(() => toNumber(props.descRows, 2));
const getData = computed<MyNoticeTodo[]>(() => {
const { pageSize, list } = props;
if (pageSize === false) return [];
let size = isNumber(pageSize) ? pageSize : 5;
const size = toNumber(pageSize, 5);
return list.slice(size * (unref(current) - 1), size * unref(current));
});
watch(
() => props.currentPage,
(v) => {
current.value = v;
current.value = toNumber(v, 1);
},
);
const isTitleClickable = computed(() => !!props.onTitleClick);
const getPagination = computed(() => {
const { list, pageSize } = props;
if ((pageSize as number) > 0 && list && list.length > (pageSize as number)) {
const size = toNumber(pageSize, 5);
if (size > 0 && list && list.length > size) {
return {
total: list.length,
pageSize,
pageSize: size,
size: 'small',
current: unref(current),
onChange(page) {
onChange(page: number) {
current.value = page;
emit('update:currentPage', page);
},
@@ -131,11 +126,19 @@
}
});
function handleTitleClick(item: ListItem) {
function handleTitleClick(item: MyNoticeTodo) {
props.onTitleClick && props.onTitleClick(item);
}
return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
return {
prefixCls,
getPagination,
getData,
handleTitleClick,
isTitleClickable,
getTitleRows,
getDescRows,
};
},
});
</script>
@@ -174,11 +177,26 @@
.title {
margin-bottom: 3px;
font-weight: normal;
display: flex;
align-items: center;
justify-content: space-between;
.title-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
&.title-delete {
text-decoration: line-through;
opacity: 0.5;
}
}
.extra {
float: right;
margin-top: -22px;
margin-right: 0;
flex-shrink: 0;
margin-left: 8px;
font-weight: normal;
.tag {
@@ -198,6 +216,17 @@
.description {
font-size: 12px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
cursor: pointer;
* {
display: inline;
white-space: nowrap;
overflow: hidden;
}
}
.datetime {

196
web-vue/packages/core/layouts/default/header/components/notify/data.ts
View File

@@ -1,196 +0,0 @@
export interface ListItem {
id: string;
avatar: string;
// 通知的标题内容
title: string;
// 是否在标题上显示删除线
titleDelete?: boolean;
datetime?: string;
type: string;
read?: boolean;
description: string;
clickClose?: boolean;
extra?: string;
color?: string;
}
export interface TabItem {
key: string;
name: string;
count?: number;
btnHref?: string;
btnText?: string;
list: ListItem[];
unreadlist?: ListItem[];
}
export const tabListData: TabItem[] = [
{
key: '1',
name: '通知',
list: [
{
id: '000000001',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
title: '你收到了 10 份新周报',
description: '',
datetime: '2022-08-09',
type: '1',
},
{
id: '000000002',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
title: '你推荐的果汁已通过第三轮面试',
description: '',
datetime: '2022-08-08',
type: '1',
},
{
id: '000000003',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
title: '这种模板可以区分多种通知类型',
description: '',
datetime: '2022-08-07',
// read: true,
type: '1',
},
{
id: '000000004',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
description: '',
datetime: '2022-08-07',
type: '1',
},
{
id: '000000005',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title:
'标题可以设置自动显示省略号，本例中标题行数已设为1行，如果内容超过1行将自动截断并支持tooltip显示完整标题。',
description: '',
datetime: '2022-08-07',
type: '1',
},
{
id: '000000006',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
description: '',
datetime: '2022-08-07',
type: '1',
},
{
id: '000000007',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
description: '',
datetime: '2022-08-07',
type: '1',
},
{
id: '000000008',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
description: '',
datetime: '2022-08-07',
type: '1',
},
{
id: '000000009',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
description: '',
datetime: '2022-08-07',
type: '1',
},
{
id: '000000010',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
description: '',
datetime: '2022-08-07',
type: '1',
},
],
},
{
key: '2',
name: '消息',
list: [
{
id: '000000006',
avatar: 'ant-design:message-outlined',
title: '彩虹 评论了你',
description: '描述信息描述信息描述信息',
datetime: '2022-08-07',
type: '2',
clickClose: true,
},
{
id: '000000007',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '果汁 回复了你',
description: '这种模板用于提醒谁与你发生了互动',
datetime: '2022-08-07',
type: '2',
clickClose: true,
},
{
id: '000000008',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '标题',
description:
'请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容',
datetime: '2022-08-07',
type: '2',
clickClose: true,
},
],
},
{
key: '3',
name: '待办',
list: [
{
id: '000000009',
avatar: '',
title: '任务名称',
description: '任务需要在 2022-01-12 20:00 前启动',
datetime: '',
extra: '未开始',
color: '',
type: '3',
},
{
id: '000000010',
avatar: '',
title: '第三方紧急代码变更',
description: '彩虹 需在 2022-01-07 前完成代码变更任务',
datetime: '',
extra: '马上到期',
color: 'red',
type: '3',
},
{
id: '000000011',
avatar: '',
title: '信息安全考试',
description: '指派竹尔于 2022-01-09 前完成更新并发布',
datetime: '',
extra: '已耗时 8 天',
color: 'gold',
type: '3',
},
{
id: '000000012',
avatar: '',
title: 'ABCD 版本发布',
description: '指派竹尔于 2022-01-09 前完成更新并发布',
datetime: '',
extra: '进行中',
color: 'blue',
type: '3',
},
],
},
];

51
web-vue/packages/core/layouts/default/header/components/notify/index.vue
View File

@@ -12,9 +12,7 @@
{{ item.name }}
<span v-if="item.list.length !== 0">({{ item.list.length }})</span>
</template>
<!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
<NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
<NoticeList :list="item.list" v-else />
<NoticeList :list="item.list" />
</TabPane>
</template>
</Tabs>
@@ -23,41 +21,54 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { computed, defineComponent, onMounted, ref } from 'vue';
import { Popover, Tabs, Badge } from 'ant-design-vue';
import { BellOutlined } from '@ant-design/icons-vue';
import { tabListData, ListItem } from './data';
import NoticeList from './NoticeList.vue';
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { MyNoticeTodo, TabItem, tabListDataAll } from '@jeesite/biz/api/biz/myNoticeTodo';
import { useUserStore } from '@jeesite/core/store/modules/user';
const userStore = useUserStore();
const userinfo = computed(() => userStore.getUserInfo);
export default defineComponent({
components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
setup() {
const { prefixCls } = useDesign('header-notify');
const { createMessage } = useMessage();
const listData = ref(tabListData);
const count = computed(() => {
let count = 0;
for (let i = 0; i < tabListData.length; i++) {
count += tabListData[i].list.length;
const listData = ref<TabItem[]>([]);
const getDataList = async () => {
try {
const reqParams = {
loginUser: userinfo.value.loginCode,
}
const result = await tabListDataAll(reqParams);
listData.value = result || [];
} catch (error) {
listData.value = [];
}
return count;
});
function onNoticeClick(record: ListItem) {
createMessage.success('你点击了通知，ID=' + record.id);
// 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
record.titleDelete = !record.titleDelete;
}
const count = computed(() => {
let count = 0;
for (let i = 0; i < listData.value.length; i++) {
count += listData.value[i].list.length;
}
return count;
});
onMounted(() => {
getDataList()
});
return {
prefixCls,
listData,
count,
onNoticeClick,
numberStyle: {},
getDataList,
};
},
});