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

大屏项目初始化

Browse Source
This commit is contained in:
gaoxq
2026-03-01 22:04:09 +08:00
parent 78e52da94f
commit 8f469c5345
2 changed files with 157 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
screen-vue/src/components/Layout/editPswd.vue
View File

@@ -15,13 +15,13 @@
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ref, reactive, onUnmounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const emit = defineEmits(['success'])
const pwdFormRef = ref(null)
const isMounted = ref(true)
let submitPromise = null
const pwdForm = reactive({
oldPassword: '',
@@ -29,18 +29,16 @@ const pwdForm = reactive({
confirmPassword: ''
})
// 表单验证规则
const pwdRules = reactive({
oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 8, max: 20, message: '密码长度必须在8-20位之间', trigger: 'blur' },
{ pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/, message: '密码必须包含字母和数字', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请确认新密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!isMounted.value) return callback()
if (value === '') {
callback(new Error('请确认新密码'))
} else if (value !== pwdForm.newPassword) {
@@ -54,36 +52,82 @@ const pwdRules = reactive({
]
})
// 提交表单
const submitForm = async () => {
if (!pwdFormRef.value) return
if (!isMounted.value || !pwdFormRef.value) return
if (submitPromise) {
submitPromise = null
return
}
submitPromise = new Promise(async (resolve) => {
try {
let valid = true
await pwdFormRef.value.validate().catch(() => {
valid = false
ElMessage.error('表单验证失败，请检查输入内容')
})
if (!valid || !isMounted.value) {
submitPromise = null
return resolve(false)
}
let confirmResult = false
await nextTick(async () => {
if (!isMounted.value) return
try {
// 表单验证
const valid = await pwdFormRef.value.validate()
if (!valid) return
await ElMessageBox.confirm(
'确认要修改密码吗?',
'温馨提示',
{ confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false,
showClose: false,
timeout: 0
}
)
await new Promise(resolve => setTimeout(resolve, 800))
confirmResult = true
} catch {
confirmResult = false
}
})
if (!confirmResult || !isMounted.value) {
submitPromise = null
return resolve(false)
}
await new Promise(res => setTimeout(res, 800))
if (isMounted.value) {
ElMessage.success('密码修改成功')
emit('success')
resolve(true)
}
} catch (error) {
if (error !== 'cancel' && !(error instanceof Error && error.message.includes('cancel'))) {
if (isMounted.value) {
ElMessage.error(error.message || '密码修改失败，请稍后重试')
}
resolve(false)
} finally {
submitPromise = null
}
})
return submitPromise
}
// 重置表单
const resetForm = () => {
if (pwdFormRef.value) {
if (!isMounted.value || !pwdFormRef.value) return
pwdFormRef.value.resetFields()
pwdForm.oldPassword = ''
pwdForm.newPassword = ''
pwdForm.confirmPassword = ''
}
}
onUnmounted(() => {
isMounted.value = false
submitPromise = null
})
defineExpose({ submitForm, resetForm })
</script>
@@ -118,6 +162,7 @@ defineExpose({ submitForm, resetForm })
color: #303133;
font-weight: 500;
}
:deep(.el-input__wrapper) {
padding: 0 10px;
height: 32px !important;

90
screen-vue/src/components/Layout/index.vue
View File

@@ -142,17 +142,16 @@
<el-dialog
v-model="showEditPwdDialog"
title="修改密码"
width="30%"
width="35%"
:close-on-click-modal="false"
@close="handleEditPwdDialogClose"
:before-close="handleDialogBeforeClose"
class="custom-pwd-dialog"
>
<EditPswd ref="editPwdRef" @success="handlePwdModifySuccess" />
<template #footer>
<div class="dialog-footer">
<el-button size="default" @click="showEditPwdDialog = false">取消</el-button>
<el-button size="default" @click="closeEditPwdDialog">取消</el-button>
<el-button size="default" type="primary" @click="submitEditPwd">确定</el-button>
</div>
</template>
@@ -161,7 +160,7 @@
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
@@ -172,10 +171,9 @@ import { getHomeMenuList } from '@/api/bizMenu'
import LogoImg from '@/assets/logo.png'
import EditPswd from './editPswd.vue'
const isMounted = ref(true)
const systemTitle = ref("myPro管理系统")
const LoginUser = ref(JSON.parse(localStorage.getItem("loginUser")));
const LoginUser = ref(JSON.parse(localStorage.getItem("loginUser")) || {});
const router = useRouter()
const route = useRoute()
@@ -190,6 +188,7 @@ const showEditPwdDialog = ref(false)
const editPwdRef = ref(null)
const getMenuList = async () => {
if (!isMounted.value) return
try {
const res = await getHomeMenuList();
menuList.value = res || [];
@@ -201,11 +200,12 @@ const getMenuList = async () => {
}
setMenuNameMap(menuList.value);
} catch (error) {
ElMessage.error('获取菜单失败：' + (error.message || error));
ElMessage.error(error);
}
}
const handleMenuClick = (menu) => {
if (!isMounted.value) return
const key = menu.menuId;
const name = menu.menuName;
if (!tabs.value.some(tab => tab.key === key)) {
@@ -214,7 +214,9 @@ const handleMenuClick = (menu) => {
activeTabKey.value = key;
if (menu.path) {
router.push(menu.path).catch(err => {
if (!err.message.includes('NavigationDuplicated')) ElMessage.warning('路由跳转失败');
if (!err.message.includes('NavigationDuplicated')) {
ElMessage.warning('路由跳转失败');
}
});
} else {
ElMessage.info('该菜单暂无路由路径');
@@ -222,6 +224,7 @@ const handleMenuClick = (menu) => {
}
const switchTab = (tab) => {
if (!isMounted.value) return
activeTabKey.value = tab.key;
const findMenu = (menus, menuId) => {
for (const menu of menus) {
@@ -236,12 +239,15 @@ const switchTab = (tab) => {
const menu = findMenu(menuList.value, tab.key);
if (menu && menu.path) {
router.push(menu.path).catch(err => {
if (!err.message.includes('NavigationDuplicated')) ElMessage.warning('路由跳转失败');
if (!err.message.includes('NavigationDuplicated')) {
ElMessage.warning('路由跳转失败');
}
});
}
}
const closeTab = (key) => {
if (!isMounted.value) return
const idx = tabs.value.findIndex(tab => tab.key === key);
if (idx === -1) return;
if (activeTabKey.value === key) {
@@ -257,7 +263,12 @@ const closeTab = (key) => {
}
const closeAllTabs = () => {
ElMessageBox.confirm('确定关闭所有标签页?', '提示', { type: 'warning' }).then(() => {
if (!isMounted.value) return
ElMessageBox.confirm('确定关闭所有标签页?', '提示', {
type: 'warning',
closeOnClickModal: false,
showClose: false
}).then(() => {
tabs.value = [];
switchToHome();
ElMessage.success('已关闭所有标签页');
@@ -265,25 +276,33 @@ const closeAllTabs = () => {
}
const switchToHome = () => {
if (!isMounted.value) return
activeTabKey.value = 'dashboard';
router.push('/dashboard').catch(err => {
if (!err.message.includes('NavigationDuplicated')) ElMessage.warning('路由跳转失败');
if (!err.message.includes('NavigationDuplicated')) {
ElMessage.warning('路由跳转失败');
}
});
}
const scrollTab = (dir) => {
if (!isMounted.value) return
const el = tabsScrollRef.value;
if (el && tabs.value.length > 0) {
const scrollBox = el.querySelector('.dynamic-tabs');
if (scrollBox) scrollBox.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' });
if (scrollBox) {
scrollBox.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' });
}
}
}
const toggleSidebar = () => {
if (!isMounted.value) return
isCollapse.value = !isCollapse.value;
}
const handleFullScreen = () => {
if (!isMounted.value) return
try {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
@@ -293,18 +312,24 @@ const handleFullScreen = () => {
ElMessage.success('已退出全屏模式');
}
} catch (error) {
ElMessage.error('全屏操作失败：' + error.message);
ElMessage.error(error);
}
}
const handleBigScreen = () => {
if (!isMounted.value) return
const baseUrl = window.location.origin + "/bigScreen";
window.open(baseUrl, '_blank');
}
const handleCommand = (cmd) => {
if (!isMounted.value) return
if (cmd === 'logout') {
ElMessageBox.confirm('确定退出系统吗?', '退出确认', { type: 'info' })
ElMessageBox.confirm('确定退出系统吗?', '退出确认', {
type: 'info',
closeOnClickModal: false,
showClose: false
})
.then(() => {
localStorage.removeItem('loginUser');
localStorage.removeItem('token');
@@ -317,35 +342,55 @@ const handleCommand = (cmd) => {
}
if (cmd === 'modifyPwd') {
nextTick(() => {
showEditPwdDialog.value = true;
});
}
}
const handleEditPwdDialogClose = () => {
const closeEditPwdDialog = () => {
if (!isMounted.value) return
showEditPwdDialog.value = false;
nextTick(() => {
if (editPwdRef.value) {
editPwdRef.value.resetForm();
}
});
}
const handleEditPwdDialogClose = () => {
closeEditPwdDialog();
}
const handleDialogBeforeClose = (done) => {
nextTick(() => {
done();
});
}
const submitEditPwd = () => {
if (editPwdRef.value) {
editPwdRef.value.submitForm();
if (!isMounted.value || !editPwdRef.value || !showEditPwdDialog.value) return
editPwdRef.value.submitForm().catch(err => {
if (err && !err.message.includes('cancel')) {
ElMessage.error(err.message);
}
});
}
const handlePwdModifySuccess = () => {
showEditPwdDialog.value = false;
if (!isMounted.value) return
closeEditPwdDialog();
ElMessage.success('密码修改成功，请重新登录');
}
onUnmounted(() => {
isMounted.value = false
})
onMounted(() => {
getMenuList();
watch(() => route.path, (newPath) => {
if (!isMounted.value) return
activeTabKey.value = newPath === '/dashboard' ? 'dashboard' : route.params.menuId || activeTabKey.value;
}, { immediate: true });
})
@@ -376,7 +421,7 @@ onMounted(() => {
--tab-radius: 14px;
--tab-padding: 0 12px;
--divider-color: #e6e6e6;
--header-bg-color: #c6e2ff; /* 统一头部背景色变量 */
--header-bg-color: #c6e2ff;
}
.app-header {
@@ -400,7 +445,7 @@ onMounted(() => {
font-weight: 600;
color: var(--primary-color);
letter-spacing: 1px;
line-height: 45px; /* 与logo图片高度一致，保证垂直居中 */
line-height: 45px;
}
.header-right {
@@ -414,10 +459,9 @@ onMounted(() => {
height: 40px;
color: #333 !important;
border-radius: 4px;
transition: all 0.2s; /* 统一过渡效果 */
transition: all 0.2s;
}
/* 核心修改：悬浮背景色与头部背景色一致 */
.header-icon-btn:hover {
background: var(--header-bg-color) !important;
color: var(--primary-color) !important;