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

优化

This commit is contained in:
zhang zhuo 2025-06-05 15:00:44 +08:00
parent d953f5d7ac
commit d8c44b2ef6
6 changed files with 344 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/NavMenu.vue
View File

@ -28,8 +28,6 @@
</template> </template>
<script setup name="NavMenu"> <script setup name="NavMenu">
import {defineProps} from 'vue';
const props = defineProps(['navMenus']); const props = defineProps(['navMenus']);
function hasChildren(item) { function hasChildren(item) {

74
src/layout/components/iframeView.vue
View File

@ -1,57 +1,53 @@
<template> <template>
<div v-show="$route.meta.type=='iframe'" class="iframe-pages"> <div v-show="$route.meta.type=='iframe'" class="iframe-pages">
<iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url==item.meta.url" :src="item.meta.url" frameborder='0'></iframe> <iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url==item.meta.url"
:src="item.meta.url" frameborder='0'></iframe>
</div> </div>
</template> </template>
<script> <script setup>
export default { import {computed, watch} from "vue"
data() { import {useRoute} from "vue-router";
return { import store from "@/store";
} const route = useRoute()
}, const iframeList = computed(() => store.state.iframe.iframeList)
watch: { const ismobile = computed(() => store.state.global.ismobile)
$route(e) { const layoutTags = computed(() => store.state.global.layoutTags)
this.push(e)
},
},
created() {
this.push(this.$route);
},
computed:{
iframeList(){
return this.$store.state.iframe.iframeList
},
ismobile(){
return this.$store.state.global.ismobile
},
layoutTags(){
return this.$store.state.global.layoutTags
}
},
mounted() {
}, push(route)
methods: {
push(route){ watch(route, (e) => {
push(e)
})
function push(route) {
if (route.meta.type == 'iframe') { if (route.meta.type == 'iframe') {
if(this.ismobile || !this.layoutTags){ if (ismobile || !layoutTags) {
this.$store.commit("setIframeList", route) store.commit("setIframeList", route)
} else { } else {
this.$store.commit("pushIframeList", route) store.commit("pushIframeList", route)
} }
} else { } else {
if(this.ismobile || !this.layoutTags){ if (ismobile || !layoutTags) {
this.$store.commit("clearIframeList") store.commit("clearIframeList")
}
}
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.iframe-pages {width:100%;height:100%;background: #fff;} .iframe-pages {
iframe {border:0;width:100%;height:100%;display: block;} width: 100%;
height: 100%;
background: #fff;
}
iframe {
border: 0;
width: 100%;
height: 100%;
display: block;
}
</style> </style>

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

@ -22,50 +22,99 @@
</el-container> </el-container>
</template> </template>
<script> <script setup>
export default { import {ref, onMounted, getCurrentInstance} from "vue";
emits: ['closed'], import api from "@/api";
data() { import {useRouter} from "vue-router";
return {
msgList: [] 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
} }
},
mounted() {
this.loadData()
},
methods: {
async loadData() {
let res = await this.$API.home.message.newMsg()
this.msgList = res.data
},
//标记已读 //标记已读
async markRead(){ async function markRead() {
let res = await this.$API.home.message.read() // let res = await api.home.message.read()
this.msgList.forEach((item) => { msgList.value.forEach((item) => {
item.status = 1 item.status = 1
}) })
this.$message.success(res.msg) // proxy.$message.success(res.msg)
this.$emit('closed', 0) emit('closed', 0)
},
toMessage(accept_id) {
this.$router.push({name: 'messageCenter', params: { accept_id: accept_id}})
this.$emit('closed', -1)
}
} }
function toMessage(accept_id) {
router.push({name: 'messageCenter', query: {accept_id: accept_id}})
proxy.$emit('closed', -1)
} }
</script> </script>
<style scoped> <style scoped>
.msg-list li {border-top:1px solid #eee;} .msg-list li {
.msg-list li a {display: flex;padding:20px;} border-top: 1px solid #eee;
.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 li a {
.msg-list__main p {font-size: 12px;color: #999;line-height: 1.8;margin-top: 5px;} display: flex;
.msg-list__time {width: 100px;text-align: right;color: #999;} padding: 20px;
.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;} .msg-list li a:hover {
.dark .msg-list li {border-top:1px solid #363636;} background: #ecf5ff;
.dark .msg-list li a:hover {background: #383838;} }
.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> </style>

180
src/layout/components/search.vue
View File

@ -1,15 +1,20 @@
<template> <template>
<div class="sc-search"> <div class="sc-search">
<el-input ref="input" v-model="input" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search" :trigger-on-focus="false" @input="inputChange"/> <el-input ref="input" v-model="searchText" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search"
:trigger-on-focus="false" @input="inputChange"/>
<div class="sc-search-history" v-if="history.length>0"> <div class="sc-search-history" v-if="history.length>0">
<el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item" @click="historyClick(item)" @close="historyClose(index)">{{item}}</el-tag> <el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item"
@click="historyClick(item)" @close="historyClose(index)">{{ item }}
</el-tag>
</div> </div>
<div class="sc-search-result"> <div class="sc-search-result">
<div class="sc-search-no-result" v-if="result.length<=0">暂无搜索结果</div> <div class="sc-search-no-result" v-if="result.length<=0">暂无搜索结果</div>
<ul v-else> <ul v-else>
<el-scrollbar max-height="366px"> <el-scrollbar max-height="366px">
<li v-for="item in result" :key="item.path" @click="to(item)"> <li v-for="item in result" :key="item.path" @click="to(item)">
<el-icon><component :is="item.icon || 'el-icon-menu'" /></el-icon> <el-icon>
<component :is="item.icon || 'el-icon-menu'"/>
</el-icon>
<span class="title">{{ item.breadcrumb }}</span> <span class="title">{{ item.breadcrumb }}</span>
</li> </li>
</el-scrollbar> </el-scrollbar>
@ -18,32 +23,37 @@
</div> </div>
</template> </template>
<script> <script setup>
export default { import {ref, onMounted, getCurrentInstance} from "vue";
data() { import tools from "@/utils/tools.js";
return { import {useRouter} from "vue-router";
input: "",
menu: [], const {proxy} = getCurrentInstance()
result: [], const router = useRouter()
history: []
} let searchText = ref("")
}, let menu = ref([])
mounted() { let result = ref([])
var searchHistory = this.$TOOL.data.get("SEARCH_HISTORY") || [] let history = ref([])
this.history = searchHistory
var menuTree = this.$TOOL.data.get("MENU") console.log(searchText)
this.filterMenu(menuTree)
this.$refs.input.focus() onMounted(() => {
}, history.value = tools.data.get("SEARCH_HISTORY") || []
methods: { const menuTree = tools.data.get("MENU");
inputChange(value){ filterMenu(menuTree)
proxy.$refs.input.focus()
})
function inputChange(value) {
if (value) { if (value) {
this.result = this.menuFilter(value) result.value = menuFilter(value)
} else { } else {
this.result = [] result.value = []
} }
}, }
filterMenu(map){
function filterMenu(map) {
map.forEach(item => { map.forEach(item => {
if (item.meta.hidden || item.meta.type == "button") { if (item.meta.hidden || item.meta.type == "button") {
return false return false
@ -52,17 +62,18 @@
item.path = `/i/${item.name}` item.path = `/i/${item.name}`
} }
if (item.children && item.children.length > 0 && !item.component) { if (item.children && item.children.length > 0 && !item.component) {
this.filterMenu(item.children) filterMenu(item.children)
} else { } else {
this.menu.push(item) menu.value.push(item)
} }
}) })
}, }
menuFilter(queryString){
var res = [] function menuFilter(queryString) {
const res = [];
//过滤菜单树 //过滤菜单树
var filterMenu = [] let filterMenu = [];
this.menu.forEach((item) => { menu.value.forEach((item) => {
filterMenu = filterMenu.concat(item.children.filter((v) => { filterMenu = filterMenu.concat(item.children.filter((v) => {
if ((v.meta.title).toLowerCase().indexOf(queryString.toLowerCase()) >= 0) { if ((v.meta.title).toLowerCase().indexOf(queryString.toLowerCase()) >= 0) {
return true return true
@ -73,14 +84,14 @@
})) }))
}) })
//匹配系统路由 //匹配系统路由
var router = this.$router.getRoutes() const routes = router.getRoutes();
var filterRouter= filterMenu.map((m) => { const filterRouter = filterMenu.map((m) => {
if (m.meta.type == "link") { if (m.meta.type == "link") {
return router.find(r => r.path == '/'+m.path) return routes.find(r => r.path == '/' + m.path)
} else { } else {
return router.find(r => r.path == m.path) return routes.find(r => r.path == m.path)
} }
}) });
//重组对象 //重组对象
filterRouter.forEach(item => { filterRouter.forEach(item => {
res.push({ res.push({
@ -93,11 +104,12 @@
}) })
}) })
return res return res
}, }
to(item){
if(!this.history.includes(this.input)){ function to(item) {
this.history.push(this.input) if (!history.value.includes(searchText.value)) {
this.$TOOL.data.set("SEARCH_HISTORY", this.history) history.value.push(searchText.value)
tools.data.set("SEARCH_HISTORY", history.value)
} }
if (item.type == "link") { if (item.type == "link") {
setTimeout(() => { setTimeout(() => {
@ -110,33 +122,71 @@
document.body.removeChild(a) document.body.removeChild(a)
}, 10); }, 10);
} else { } else {
this.$router.push({path: item.path}) router.push({path: item.path})
} }
this.$emit('success', true) proxy.$emit('success', true)
}, }
historyClick(text){
this.input = text function historyClick(text) {
this.inputChange(text) searchText.value = text
}, inputChange(text)
historyClose(index){ }
this.history.splice(index, 1);
if(this.history.length <= 0){ function historyClose(index) {
this.$TOOL.data.remove("SEARCH_HISTORY") history.value.splice(index, 1);
if (history.value.length <= 0) {
tools.data.remove("SEARCH_HISTORY")
} else { } else {
this.$TOOL.data.set("SEARCH_HISTORY", this.history) tools.data.set("SEARCH_HISTORY", history.value)
}
}
} }
} }
</script> </script>
<style scoped> <style scoped>
.sc-search {} .sc-search {
.sc-search-no-result {text-align: center;margin: 40px 0;color: #999;} }
.sc-search-history {margin-top: 10px;}
.sc-search-history .el-tag {cursor: pointer;} .sc-search-no-result {
.sc-search-result {margin-top: 15px;} text-align: center;
.sc-search-result li {height:56px;padding:0 15px;background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);list-style:none;border-radius: 4px;margin-bottom: 5px;font-size: 14px;display: flex;align-items: center;cursor: pointer;} margin: 40px 0;
.sc-search-result li i {font-size: 20px;margin-right: 15px;} color: #999;
.sc-search-result li:hover {background: var(--el-color-primary);color: #fff;border-color: var(--el-color-primary);} }
.sc-search-history {
margin-top: 10px;
}
.sc-search-history .el-tag {
cursor: pointer;
}
.sc-search-result {
margin-top: 15px;
}
.sc-search-result li {
height: 56px;
padding: 0 15px;
background: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light);
list-style: none;
border-radius: 4px;
margin-bottom: 5px;
font-size: 14px;
display: flex;
align-items: center;
cursor: pointer;
}
.sc-search-result li i {
font-size: 20px;
margin-right: 15px;
}
.sc-search-result li:hover {
background: var(--el-color-primary);
color: #fff;
border-color: var(--el-color-primary);
}
</style> </style>

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

@ -37,28 +37,30 @@
</el-container> </el-container>
</template> </template>
<script> <script setup>
export default { import {ref, onMounted} from "vue";
data() { import api from "@/api";
return {
loading: false, let loading = ref(false)
tasks: [] let tasks = ref([])
onMounted(() => {
getData()
})
async function getData(){
// loading.value = true
// const res = await api.system.tasks.list();
// tasks.value= res.data
// loading.value = false
} }
},
mounted() { function refresh(){
this.getData() getData()
}, }
methods: {
async getData(){ function download(row){
this.loading = true
var res = await this.$API.system.tasks.list()
this.tasks = res.data
this.loading = false
},
refresh(){
this.getData()
},
download(row){
let a = document.createElement("a") let a = document.createElement("a")
a.style = "display: none" a.style = "display: none"
a.target = "_blank" a.target = "_blank"
@ -67,10 +69,10 @@ export default {
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 {margin-bottom: 10px;}
.user-bar-tasks-item:hover {border-color: var(--el-color-primary);} .user-bar-tasks-item:hover {border-color: var(--el-color-primary);}

15
src/utils/route.ts
View File

@ -4,26 +4,29 @@ import {RouteLocationNormalized, RouteLocationNormalizedLoaded} from "vue-router
import tools from "@/utils/tools"; import tools from "@/utils/tools";
export function beforeEach(to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded) { export function beforeEach(to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded) {
const adminMain = document.querySelector('#pi-main'); const piMain = document.querySelector('#pi-main');
if (!adminMain) { if (!piMain) {
return false return false
} }
console.log(from)
store.commit("updateViewTags", { store.commit("updateViewTags", {
fullPath: from.fullPath, fullPath: from.fullPath,
scrollTop: adminMain.scrollTop scrollTop: piMain.scrollTop
}) })
} }
export function afterEach(to: RouteLocationNormalized) { export function afterEach(to: RouteLocationNormalized) {
const adminMain = document.querySelector('#pi-main'); const piMain = document.querySelector('#pi-main');
if (!adminMain) { if (!piMain) {
return false return false
} }
nextTick(() => { nextTick(() => {
// @ts-ignore // @ts-ignore
const beforeRoute = store.state.viewTags.viewTags.filter(v => v.fullPath == to.fullPath)[0]; const beforeRoute = store.state.viewTags.viewTags.filter(v => v.fullPath == to.fullPath)[0];
if (beforeRoute) { if (beforeRoute) {
adminMain.scrollTop = beforeRoute.scrollTop || 0 piMain.scrollTop = beforeRoute.scrollTop || 0
} }
}).then(r => { }).then(r => {
}) })