|
|
|
|
|
<!--
|
|
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
|
|
* @Date: 2024-01-11 14:27:58
|
|
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
|
|
* @LastEditTime: 2024-01-18 17:01:35
|
|
|
|
|
|
* @FilePath: \General-AI-Platform-Web-Client\src\views\workbench\components\Notify.vue
|
|
|
|
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
|
|
|
-->
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
|
// import type { TabsPaneContext } from "element-plus";
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
|
name: "Notify"
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//TODO 模拟数据
|
|
|
|
|
|
|
|
|
|
|
|
const urgencyStatus = [
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "紧急",
|
|
|
|
|
|
value: 0,
|
|
|
|
|
|
color: "#E80D0D",
|
|
|
|
|
|
bgColor: "rgba(232, 13, 13, 0.10)"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "优先",
|
|
|
|
|
|
value: 0,
|
|
|
|
|
|
color: "#FE9A05",
|
|
|
|
|
|
bgColor: "rgba(254, 154, 5, 0.10)"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "普通",
|
|
|
|
|
|
value: 0,
|
|
|
|
|
|
color: "#52C41A",
|
|
|
|
|
|
bgColor: "rgba(82, 196, 26, 0.10)"
|
|
|
|
|
|
}
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
function fetchNoticeList(readStatus = 1) {
|
|
|
|
|
|
const arr = [];
|
|
|
|
|
|
for (let i = 0; i < 2; i++) {
|
|
|
|
|
|
arr.push({
|
|
|
|
|
|
title: "系统消息" + (readStatus + i),
|
|
|
|
|
|
dateTime: "今天10:03:00",
|
|
|
|
|
|
content: "您的产品使用期限即将截止，如需继续使用产品请前请去买",
|
|
|
|
|
|
status: Math.floor(Math.random(0, 2.9) * 3)
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
return arr;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const activeName = ref("1");
|
|
|
|
|
|
|
|
|
|
|
|
const noticeData = ref<Record<string, any>[]>([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "已读（10）",
|
|
|
|
|
|
list: fetchNoticeList(1)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "未读（15）",
|
|
|
|
|
|
list: fetchNoticeList(4)
|
|
|
|
|
|
}
|
|
|
|
|
|
]);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="w-full text-sm notify_wrap">
|
|
|
|
|
|
<el-tabs v-model="activeName" class="w-full">
|
|
|
|
|
|
<el-tab-pane
|
|
|
|
|
|
v-for="(item, index) in noticeData"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
:label="item.label"
|
|
|
|
|
|
:name="index + ''"
|
|
|
|
|
|
>
|
|
|
|
|
|
<ul class="px-[20px]">
|
|
|
|
|
|
<li v-for="(v, k) in item.list" :key="k" style="margin-bottom: 12px">
|
|
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
|
<span class="font-bold" style="line-height: 22px">{{
|
|
|
|
|
|
v.title
|
|
|
|
|
|
}}</span>
|
|
|
|
|
|
<span
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
backgroundColor: urgencyStatus[v.status].bgColor,
|
|
|
|
|
|
color: urgencyStatus[v.status].color,
|
|
|
|
|
|
padding: '0px 8px',
|
|
|
|
|
|
borderRadius: '4px',
|
|
|
|
|
|
borderRadius: '2px'
|
|
|
|
|
|
}"
|
|
|
|
|
|
>{{ urgencyStatus[v.status].label }}</span
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="margin: 8px 0">{{ v.content }}</div>
|
|
|
|
|
|
<div style="color: #999">{{ v.dateTime }}</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
<div class="flex justify-center">
|
|
|
|
|
|
<el-button type="primary">查看更多</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.notify_wrap {
|
|
|
|
|
|
.el-tabs__item {
|
|
|
|
|
|
padding: 0 20px !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
