cfn
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

附件下载

This commit is contained in:
zhang zhuo 2025-06-17 18:02:57 +08:00
parent a478ef8a32
commit 1c5708b214
3 changed files with 90 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/layout/components/message.vue
View File

@ -1,120 +0,0 @@
<template>
<el-container>
<el-main class="nopadding">
<ul class="msg-list">
<li v-for="item in msgList" v-bind:key="item.accept_id" @click="toMessage(item.accept_id)">
<a :href="item.link" target="_blank">
<div class="msg-list__main">
<p :class="item.status == 0 ? 'unread' : ''">{{ item.title }}</p>
</div>
<div class="msg-list__time">
<p v-time.tip="item.create_time" :class="item.status == 0 ? 'unread' : ''"></p>
</div>
</a>
</li>
<el-empty v-if="msgList.length==0" description="暂无新消息" :image-size="100"></el-empty>
</ul>
</el-main>
<el-footer>
<el-button type="primary" @click="toMessage(0)">消息中心</el-button>
<el-button @click="markRead">全部已读</el-button>
</el-footer>
</el-container>
</template>
<script setup>
import {ref, onMounted, getCurrentInstance} from "vue";
import api from "@/api";
import {useRouter} from "vue-router";
const emit = defineEmits(['closed']);
const {proxy} = getCurrentInstance()
const router = useRouter()
let msgList = ref([])
onMounted(() => {
loadData()
})
async function loadData() {
// let res = await api.home.message.newMsg()
// this.msgList = res.data
}
//标记已读
async function markRead() {
// let res = await api.home.message.read()
msgList.value.forEach((item) => {
item.status = 1
})
// proxy.$message.success(res.msg)
emit('closed', 0)
}
function toMessage(accept_id) {
router.push({name: 'messageCenter', query: {accept_id: accept_id}})
proxy.$emit('closed', -1)
}
</script>
<style scoped>
.msg-list li {
border-top: 1px solid #eee;
}
.msg-list li a {
display: flex;
padding: 20px;
}
.msg-list li a:hover {
background: #ecf5ff;
}
.msg-list__main {
flex: 1;
}
.msg-list__main h2 {
font-size: 15px;
font-weight: normal;
color: #333;
}
.msg-list__main p {
font-size: 12px;
color: #999;
line-height: 1.8;
margin-top: 5px;
}
.msg-list__time {
width: 100px;
text-align: right;
color: #999;
}
.msg-list__time p {
font-size: 12px;
color: #999;
line-height: 1.8;
margin-top: 5px;
}
.unread {
color: #333 !important;
}
.dark .msg-list__main h2 {
color: #d0d0d0;
}
.dark .msg-list li {
border-top: 1px solid #363636;
}
.dark .msg-list li a:hover {
background: #383838;
}
</style>

100
src/layout/components/tasks.vue
View File

@ -9,22 +9,25 @@
<el-card v-for="task in tasks" :key="task.id" shadow="hover" class="user-bar-tasks-item"> <el-card v-for="task in tasks" :key="task.id" shadow="hover" class="user-bar-tasks-item">
<div class="user-bar-tasks-item-body"> <div class="user-bar-tasks-item-body">
<div class="taskIcon"> <div class="taskIcon">
<el-icon v-if="task.type=='1'" :size="20"><el-icon-paperclip /></el-icon> <el-icon :size="20">
<el-icon-paperclip/>
</el-icon>
</div> </div>
<div class="taskMain"> <div class="taskMain">
<div class="title"> <div class="title">
<h2>{{ task.task_name }}</h2> <h2>{{ task.taskName }}</h2>
<p><span v-time.tip="task.create_time"></span> 创建</p> <p><span v-time.tip="task.createDate"></span> 创建</p>
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="state"> <div class="state">
<el-tag type="info" v-if="task.status=='0'">待处理</el-tag> <el-tag type="info" v-if="task.state=='0'">待处理</el-tag>
<el-tag v-if="task.status=='3'">处理中</el-tag> <el-tag type="info" v-if="task.state=='1'">处理中</el-tag>
<el-tag type="info" v-if="task.status=='1'">完成</el-tag> <el-tag type="primary" v-if="task.state=='2'">完成</el-tag>
<el-tag type="danger" v-if="task.status=='0'">失败</el-tag> <el-tag type="danger" v-if="task.state=='3'">失败</el-tag>
</div> </div>
<div class="handler"> <div class="handler">
<el-button v-if="task.status=='1'" type="primary" circle icon="el-icon-download" @click="download(task)"></el-button> <el-button v-if="task.state=='2'" type="primary" circle icon="el-icon-download"
@click="download(task)"></el-button>
</div> </div>
</div> </div>
</div> </div>
@ -32,6 +35,7 @@
</el-card> </el-card>
</el-main> </el-main>
<el-footer style="padding:10px;text-align: right;"> <el-footer style="padding:10px;text-align: right;">
<el-button circle icon="el-icon-delete" @click="removeAll"></el-button>
<el-button circle icon="el-icon-refresh" @click="refresh"></el-button> <el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
</el-footer> </el-footer>
</el-container> </el-container>
@ -40,6 +44,7 @@
<script setup> <script setup>
import {ref, onMounted} from "vue"; import {ref, onMounted} from "vue";
import api from "@/api"; import api from "@/api";
import {ElMessageBox} from 'element-plus'
let loading = ref(false) let loading = ref(false)
let tasks = ref([]) let tasks = ref([])
@ -54,12 +59,38 @@ async function getData(){
// const res = await api.system.tasks.list(); // const res = await api.system.tasks.list();
// tasks.value= res.data // tasks.value= res.data
// loading.value = false // loading.value = false
tasks.value.push({
"id": "100",
"taskName": "年度报表生成",
"result": "",
"state": "0",
"createDate": "2022-06-13 17:04:55"
})
tasks.value.push({
"id": "101",
"taskName": "系统日志导出",
"result": "http://www.baidu.com",
"state": "2",
"createDate": "2022-06-12 09:31:08"
})
} }
function refresh() { function refresh() {
getData() getData()
} }
function removeAll() {
ElMessageBox.prompt('请输入“清空所有”以确认操作', '警告', {
confirmButtonText: '确认',
cancelButtonText: '取消',
inputPattern: /^清空所有$/,
inputErrorMessage: '输入错误',
}).then(() => {
tasks.value = []
}).catch(() => {})
}
function download(row) { function download(row) {
let a = document.createElement("a") let a = document.createElement("a")
a.style = "display: none" a.style = "display: none"
@ -69,17 +100,52 @@ function download(row){
a.click() a.click()
document.body.removeChild(a) document.body.removeChild(a)
} }
</script> </script>
<style scoped> <style scoped>
.user-bar-tasks-item {margin-bottom: 10px;} .user-bar-tasks-item {
.user-bar-tasks-item:hover {border-color: var(--el-color-primary);} margin-bottom: 10px;
.user-bar-tasks-item-body {display: flex;} }
.user-bar-tasks-item-body .taskIcon {width: 45px;height: 45px;background: var(--el-color-primary-light-9);margin-right: 20px;display: flex;justify-content:center;align-items: center;color: var(--el-color-primary);border-radius:20px;}
.user-bar-tasks-item-body .taskMain {flex: 1;} .user-bar-tasks-item:hover {
.user-bar-tasks-item-body .title h2 {font-size: 15px;} border-color: var(--el-color-primary);
.user-bar-tasks-item-body .title p {font-size: 12px;color: #999;margin-top: 5px;} }
.user-bar-tasks-item-body .bottom {display: flex;justify-content: space-between;align-items: center;padding-top: 20px;}
.user-bar-tasks-item-body {
display: flex;
}
.user-bar-tasks-item-body .taskIcon {
width: 45px;
height: 45px;
background: var(--el-color-primary-light-9);
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--el-color-primary);
border-radius: 20px;
}
.user-bar-tasks-item-body .taskMain {
flex: 1;
}
.user-bar-tasks-item-body .title h2 {
font-size: 15px;
}
.user-bar-tasks-item-body .title p {
font-size: 12px;
color: #999;
margin-top: 5px;
}
.user-bar-tasks-item-body .bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
</style> </style>

7
src/layout/components/userbar.vue
View File

@ -46,7 +46,7 @@
</div> </div>
<div v-else> <div v-else>
<el-scrollbar height="220px" :view-style="{ 'overflow-x': 'hidden' }"> <el-scrollbar height="220px" :view-style="{ 'overflow-x': 'hidden' }">
<el-link v-for="item in msgList" :key="item" href="/#/message" underline="never"> <el-link v-for="item in msgList" :key="item" href="/#/message" underline="never" :title="item.time + ' ' + item.title">
<template #default> <template #default>
<el-text type="primary" v-time.tip="item.time"></el-text> <el-text type="primary" v-time.tip="item.time"></el-text>
<div>{{ item.title }}</div> <div>{{ item.title }}</div>
@ -91,7 +91,7 @@
<el-dialog v-model="searchVisible" :width="700" title="菜单搜索" class="drawerBG" center destroy-on-close> <el-dialog v-model="searchVisible" :width="700" title="菜单搜索" class="drawerBG" center destroy-on-close>
<search @success="searchVisible=false"></search> <search @success="searchVisible=false"></search>
</el-dialog> </el-dialog>
<el-drawer v-model="tasksVisible" :size="450" title="任务中心" destroy-on-close> <el-drawer v-model="tasksVisible" :size="450" title="附件中心" destroy-on-close>
<tasks></tasks> <tasks></tasks>
</el-drawer> </el-drawer>
</template> </template>
@ -99,7 +99,6 @@
<script setup name="userbar"> <script setup name="userbar">
import {ref, onMounted, getCurrentInstance} from "vue"; import {ref, onMounted, getCurrentInstance} from "vue";
import search from './search.vue' import search from './search.vue'
import message from './message.vue'
import setting from './setting.vue' import setting from './setting.vue'
import tasks from './tasks.vue' import tasks from './tasks.vue'
import websocket from "@/utils/websocket"; import websocket from "@/utils/websocket";
@ -113,7 +112,7 @@ const {proxy} = getCurrentInstance()
const router = useRouter() const router = useRouter()
const {t} = useI18n() const {t} = useI18n()
const msgVisible = ref(true); const msgVisible = ref(false);
let searchVisible = ref(false) let searchVisible = ref(false)
let msg = ref(false) let msg = ref(false)
let msgNum = ref(2) let msgNum = ref(2)