p3wtvrn9p
/
CampusVolunteer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

vue

Browse Source
branch1
18655803770 4 months ago
parent 686832b883
commit 84288b56f3
11 changed files with 1030 additions and 918 deletions
Show Stats Download Patch File Download Diff File

40
admin/src/components/SvgIcon/index.vue
Unescape View File

@ -1,31 +1,31 @@
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
<svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <!-- 定义SVG图标组件 -->
<use :xlink:href="iconName" /> <!-- 使用图标符号 -->
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
name: 'SvgIcon', <!-- 组件名称 -->
props: {
iconClass: {
iconClass: { <!-- 图标类名 -->
type: String,
required: true
required: true <!-- 必须传递 -->
},
className: {
className: { <!-- 自定义类名 -->
type: String,
default: ''
default: '' <!-- 默认为空 -->
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
iconName() { <!-- 计算图标符号名称 -->
return `#icon-${this.iconClass}`; <!-- 动态生成图标符号 -->
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
svgClass() { <!-- 计算SVG类名 -->
if (this.className) { <!-- 如果有自定义类名 -->
return 'svg-icon ' + this.className; <!-- 返回组合类名 -->
} else {
return 'svg-icon'
return 'svg-icon'; <!-- 否则返回默认类名 -->
}
}
}
@ -33,11 +33,11 @@ export default {
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
.svg-icon { <!-- SVG图标的基本样式 -->
width: 1em; <!-- 宽度 -->
height: 1em; <!-- 高度 -->
vertical-align: -0.15em; <!-- 垂直对齐 -->
fill: currentColor; <!-- 使用当前文本颜色 -->
overflow: hidden; <!-- 隐藏溢出内容 -->
}
</style>
</style>

110
admin/src/components/common/BreadCrumbs.vue
Unescape View File

@ -1,9 +1,26 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/" style="height:43px;backgroundColor:rgba(98, 190, 84, 1);borderRadius:0 160px 0 0 ;padding:0px 20px 0px 20px;boxShadow:0px 0px 0px #f903d4;borderWidth:5px 3px 5px 5px;borderStyle:solid;borderColor:rgba(78, 147, 67, 1);">
<transition-group name="breadcrumb" class="box" :style="1==1?'justifyContent:flex-start;':1==2?'justifyContent:center;':'justifyContent:flex-end;'">
<!-- 导航面包屑组件 -->
<el-breadcrumb class="app-breadcrumb" separator="/"
style="height:43px; backgroundColor:rgba(98, 190, 84, 1); borderRadius:0 160px 0 0; padding:0px 20px 0px 20px; boxShadow:0px 0px 0px #f903d4; borderWidth:5px 3px 5px 5px; borderStyle:solid; borderColor:rgba(78, 147, 67, 1);">
<!-- 动态调整面包屑布局 -->
<transition-group name="breadcrumb" class="box"
:style="1==1 ? 'justifyContent:flex-start;' : 1==2 ? 'justifyContent:center;' : 'justifyContent:flex-end;'">
<!-- 遍历路由路径，生成面包屑项 -->
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect" style="color:rgba(255, 255, 255, 1)">{{ item.name }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
<!-- 如果当前项不可点击或为最后一项，则显示文本 -->
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1"
class="no-redirect"
style="color:rgba(255, 255, 255, 1)">
{{ item.name }}
</span>
<!-- 否则显示链接 -->
<a v-else @click.prevent="handleLink(item)">
{{ item.name }}
</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
@ -12,81 +29,99 @@
<script>
import pathToRegexp from 'path-to-regexp'
import { generateTitle } from '@/utils/i18n'
export default {
data() {
return {
levelList: null
levelList: null // 保存当前路由的面包屑路径
}
},
// 监听路由变化，更新面包屑
watch: {
$route() {
this.getBreadcrumb()
}
},
// 初始化时获取面包屑路径
created() {
this.getBreadcrumb()
this.breadcrumbStyleChange()
},
methods: {
// 从 utils/i18n 中引入的国际化标题生成函数
generateTitle,
// 获取当前路由的面包屑路径
getBreadcrumb() {
// only show routes with meta.title
let route = this.$route
let matched = route.matched.filter(item => item.meta)
let matched = route.matched.filter(item => item.meta) // 只保留有 meta 的路由
const first = matched[0]
matched = [{ path: '/index' }].concat(matched)
matched = [{ path: '/index' }].concat(matched) // 添加根路径
this.levelList = matched.filter(item => item.meta)
this.levelList = matched.filter(item => item.meta) // 更新面包屑路径
},
// 判断是否为仪表盘页面
isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
if (!name) return false
return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
},
// 路径参数编译
pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route
var toPath = pathToRegexp.compile(path)
return toPath(params)
const toPath = pathToRegexp.compile(path) // 将路径转换为正则表达式
return toPath(params) // 替换路径中的动态参数
},
// 处理面包屑点击事件
handleLink(item) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect)
this.$router.push(redirect) // 跳转到重定向地址
return
}
this.$router.push(path)
this.$router.push(path) // 跳转到指定路径
},
// 动态调整面包屑样式
breadcrumbStyleChange(val) {
this.$nextTick(()=>{
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el=>{
el.innerText = "/"
el.style.color = "rgba(217, 217, 217, 1)"
this.$nextTick(() => {
// 修改分隔符样式
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el => {
el.innerText = "/" // 设置分隔符为 "/"
el.style.color = "rgba(217, 217, 217, 1)" // 设置颜色
})
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el=>{
el.style.color = "rgba(255, 255, 255, 1)"
// 修改链接样式
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el => {
el.style.color = "rgba(255, 255, 255, 1)" // 设置链接颜色
})
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el=>{
el.style.color = "rgba(255, 255, 255, 1)"
// 修改不可点击项样式
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el => {
el.style.color = "rgba(255, 255, 255, 1)" // 设置不可点击项颜色
})
// 动态调整头部高度
let str = "2"
if(2 == str) {
if (2 == str) {
let headHeight = "80px"
headHeight = parseInt(headHeight) + 10 + 'px'
document.querySelectorAll('.app-breadcrumb').forEach(el=>{
el.style.marginTop = headHeight
headHeight = parseInt(headHeight) + 10 + 'px' // 增加头部高度
document.querySelectorAll('.app-breadcrumb').forEach(el => {
el.style.marginTop = headHeight // 设置顶部外边距
})
}
})
},
}
}
}
</script>
// 样式部分
<style lang="scss" scoped>
.app-breadcrumb {
display: block;
@ -97,13 +132,12 @@ export default {
display: flex;
width: 100%;
height: 100%;
justify-content: flex-start;
justify-content: flex-start; /* 默认左对齐 */
align-items: center;
}
.no-redirect {
color: #97a8be;
cursor: text;
color: #97a8be; /* 不可点击项的颜色 */
cursor: text; /* 设置鼠标悬停时为文本光标 */
}
}
</style>
</style>

163
admin/src/components/common/Editor.vue
Unescape View File

@ -1,41 +1,47 @@
以下是为您的代码添加详细注释后的版本：
<template>
<div>
<!-- 图片上传组件辅助-->
<!-- 图片上传组件辅助 -->
<el-upload
class="avatar-uploader"
:action="getActionUrl"
name="file"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload"
></el-upload>
:action="getActionUrl" <!-- 图片上传接口 -->
name="file" <!-- 文件字段名 -->
:headers="header" <!-- 请求头 -->
:show-file-list="false" <!-- 不显示已上传文件列表 -->
:on-success="uploadSuccess" <!-- 上传成功回调 -->
:on-error="uploadError" <!-- 上传失败回调 -->
:before-upload="beforeUpload" <!-- 上传前回调 -->
>
<!-- 隐藏的文件输入框 -->
<input type="file" style="display:none;">
</el-upload>
<!-- 富文本编辑器 -->
<quill-editor
class="editor"
v-model="value"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
v-model="value" <!-- 绑定编辑器内容 -->
ref="myQuillEditor" <!-- 引用编辑器实例 -->
:options="editorOption" <!-- 编辑器配置 -->
@blur="onEditorBlur($event)" <!-- 失去焦点事件 -->
@focus="onEditorFocus($event)" <!-- 获得焦点事件 -->
@change="onEditorChange($event)" <!-- 内容改变事件 -->
></quill-editor>
</div>
</template>
<script>
// 工具栏配置
<!-- 工具栏配置 -->
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
["bold", "italic", "underline", "strike"], // 加粗、斜体、下划线、删除线
["blockquote", "code-block"], // 引用、代码块
[{ header: 1 }, { header: 2 }], // 一级、二级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ script: "sub" }, { script: "super" }], // 上标、下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ color: [] }, { background: [] }], // 字体颜色、背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
@ -43,23 +49,23 @@ const toolbarOptions = [
];
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.core.css"; // 富文本核心样式
import "quill/dist/quill.snow.css"; // 富文本雪地主题样式
import "quill/dist/quill.bubble.css"; // 富文本气泡主题样式
export default {
props: {
/*编辑器的内容*/
/* 编辑器的内容 */
value: {
type: String
},
action: {
type: String
},
/*图片大小*/
/* 图片大小限制 */
maxSize: {
type: Number,
default: 4000 //kb
default: 4000 // kb
}
},
@ -69,19 +75,18 @@ export default {
data() {
return {
content: this.value,
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
content: this.value, // 当前编辑器内容
quillUpdateImg: false, // 是否显示加载动画
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
placeholder: "", // 占位符
theme: "snow", // 主题
modules: {
toolbar: {
container: toolbarOptions,
// container: "#toolbar",
container: toolbarOptions, // 工具栏配置
handlers: {
image: function(value) {
if (value) {
// 触发input框选择图片文件
// 触发图片上传
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
@ -99,142 +104,136 @@ export default {
}
}
},
// serverUrl: `${base.url}sys/storage/uploadSwiper?token=${storage.get('token')}`, // 这里写你要上传的图片服务器地址
header: {
// token: sessionStorage.token
'Token': this.$storage.get("Token")
} // 有的图片服务器要求请求头需要有token
'Token': this.$storage.get("Token") // 请求头中的 Token
}
};
},
computed: {
// 计算属性的 getter
// 动态计算上传接口 URL
getActionUrl: function() {
// return this.$base.url + this.action + "?token=" + this.$storage.get("token");
return `/${this.$base.name}/` + this.action;
}
},
methods: {
onEditorBlur() {
//失去焦点事件
// 失去焦点事件
},
onEditorFocus() {
//获得焦点事件
// 获得焦点事件
},
onEditorChange() {
console.log(this.value);
//内容改变事件
// 内容改变事件
this.$emit("input", this.value);
},
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
beforeUpload(file) {
// 显示加载动画
this.quillUpdateImg = true;
const isLtMaxSize = file.size / 1024 < this.maxSize; // 检查文件大小是否超过限制
if (!isLtMaxSize) {
this.$message.error(`上传图片大小不能超过 ${this.maxSize} KB!`);
}
return isLtMaxSize;
},
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
// 上传成功回调
let quill = this.$refs.myQuillEditor.quill; // 获取富文本实例
if (res.code === 0) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", this.$base.url+ "upload/" +res.file);
// 调整光标到最后
quill.setSelection(length + 1);
let length = quill.getSelection().index; // 获取光标位置
quill.insertEmbed(length, "image", this.$base.url + "upload/" + res.file); // 插入图片
quill.setSelection(length + 1); // 移动光标
} else {
this.$message.error("图片插入失败");
}
// loading动画消失
this.quillUpdateImg = false;
this.quillUpdateImg = false; // 隐藏加载动画
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
// 上传失败回调
this.quillUpdateImg = false; // 隐藏加载动画
this.$message.error("图片插入失败");
}
}
};
</script>
/* 样式部分 */
<style>
.editor {
line-height: normal !important;
line-height: normal !important; /* 设置行高 */
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
content: "请输入链接地址:"; /* 自定义链接提示 */
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
border-right: 0px; /* 修改链接编辑按钮样式 */
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
content: "请输入视频地址:"; /* 自定义视频提示 */
}
.ql-container {
height: 400px;
height: 400px; /* 设置富文本高度 */
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
content: "14px"; /* 设置默认字体大小 */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
content: "10px"; /* 设置小字体 */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
content: "18px"; /* 设置大字体 */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
content: "32px"; /* 设置超大字体 */
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
content: "文本"; /* 设置默认标题 */
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
content: "标题1"; /* 设置标题1 */
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
content: "标题2"; /* 设置标题2 */
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
content: "标题3"; /* 设置标题3 */
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
content: "标题4"; /* 设置标题4 */
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
content: "标题5"; /* 设置标题5 */
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
content: "标题6"; /* 设置标题6 */
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
content: "标准字体"; /* 设置默认字体 */
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
content: "衬线字体"; /* 设置衬线字体 */
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
content: "等宽字体"; /* 设置等宽字体 */
}
</style>

152
admin/src/components/common/ExcelFileUpload.vue
Unescape View File

@ -1,142 +1,146 @@
<template>
<div>
<!-- 上传文件组件 -->
<!-- 文件上传组件 -->
<el-upload
ref="upload"
:action="getActionUrl"
list-type="picture-card"
accept=".xls,.xlsx"
:limit="limit"
:headers="myHeaders"
:file-list="fileList"
:on-exceed="handleExceed"
:on-preview="handleUploadPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-error="handleUploadErr"
:before-upload="handleBeforeUpload"
ref="upload" <!-- 引用上传组件实例 -->
:action="getActionUrl" <!-- 上传接口地址 -->
list-type="picture-card" <!-- 列表类型 -->
accept=".xls,.xlsx" <!-- 仅允许上传 Excel 文件 -->
:limit="limit" <!-- 最大上传数量 -->
:headers="myHeaders" <!-- 请求头 -->
:file-list="fileList" <!-- 绑定上传文件列表 -->
:on-exceed="handleExceed" <!-- 超出限制时触发 -->
:on-preview="handleUploadPreview" <!-- 点击预览时触发 -->
:on-remove="handleRemove" <!-- 删除文件时触发 -->
:on-success="handleUploadSuccess" <!-- 上传成功时触发 -->
:on-error="handleUploadErr" <!-- 上传失败时触发 -->
:before-upload="handleBeforeUpload" <!-- 上传前触发 -->
>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div>
<i class="el-icon-plus"></i> <!-- 默认显示的加号图标 -->
<div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div> <!-- 提示文字 -->
</el-upload>
<!-- 查看大图弹窗 -->
<el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
<img width="100%" :src="dialogImageUrl" alt>
<img width="100%" :src="dialogImageUrl" alt> <!-- 展示图片 -->
</el-dialog>
</div>
</template>
<script>
import storage from "@/utils/storage";
import base from "@/utils/base";
import storage from "@/utils/storage"; // 导入本地存储工具
import base from "@/utils/base"; // 导入基础配置工具
export default {
data() {
return {
// 查看大图
dialogVisible: false,
// 查看大图
dialogImageUrl: "",
// 组件渲染图片的数组字段，有特殊格式要求
fileList: [],
fileUrlList: [],
myHeaders:{}
dialogVisible: false, // 控制弹窗是否显示
dialogImageUrl: "", // 当前查看的大图地址
fileList: [], // 上传文件列表
fileUrlList: [], // 上传文件 URL 列表
myHeaders: {} // 请求头
};
},
props: ["tip", "action", "limit", "multiple", "fileUrls"],
props: {
tip: String, // 提示文字
action: String, // 上传接口路径
limit: Number, // 最大上传数量
multiple: Boolean, // 是否支持多选
fileUrls: String // 已上传文件的 URL 列表
},
mounted() {
this.init();
this.myHeaders= {
'Token':storage.get("Token")
}
this.init(); // 初始化
this.myHeaders = { // 设置请求头
'Token': storage.get("Token")
};
},
watch: {
fileUrls: function(val, oldVal) {
// console.log("new: %s, old: %s", val, oldVal);
// 监听父组件传来的文件 URL 列表变化
this.init();
}
},
computed: {
// 计算属性的 getter
// 动态计算上传接口 URL
getActionUrl: function() {
// return base.url + this.action + "?token=" + storage.get("token");
return `/${this.$base.name}/` + this.action;
}
},
methods: {
// 初始化
init() {
// console.log(this.fileUrls);
if (this.fileUrls) {
this.fileUrlList = this.fileUrls.split(",");
let fileArray = [];
this.fileUrlList = this.fileUrls.split(","); // 将字符串拆分为数组
let fileArray = []; // 用于存储文件对象数组
this.fileUrlList.forEach(function(item, index) {
var url = item;
var name = index;
var url = item; // 当前文件 URL
var name = index; // 文件名称（此处简单用索引替代）
var file = {
name: name,
url: url
};
fileArray.push(file);
}; // 构造文件对象
fileArray.push(file); // 添加到数组中
});
this.setFileList(fileArray);
this.setFileList(fileArray); // 更新文件列表
}
},
handleBeforeUpload(file) {
// 上传前的钩子函数
// 可在此处添加文件大小、类型等验证逻辑
},
// 上传文件成功后执行
handleUploadSuccess(res, file, fileList) {
if (res && res.code === 0) {
fileList[fileList.length - 1]["url"] = "upload/" + file.response.file;
this.setFileList(fileList);
this.$emit("change", this.fileUrlList.join(","));
this.$message.success("文件导入成功");
if (res && res.code === 0) { // 检查返回结果
fileList[fileList.length - 1]["url"] = "upload/" + file.response.file; // 更新文件 URL
this.setFileList(fileList); // 更新文件列表
this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
this.$message.success("文件导入成功"); // 提示成功消息
} else {
this.$message.error(res.msg);
this.$message.error(res.msg); // 提示错误消息
}
},
// 图片上传失败
handleUploadErr(err, file, fileList) {
this.$message.error("文件导入失败");
this.$message.error("文件导入失败"); // 提示失败消息
},
// 移除图片
handleRemove(file, fileList) {
this.setFileList(fileList);
this.$emit("change", this.fileUrlList.join(","));
this.setFileList(fileList); // 更新文件列表
this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
},
// 查看大图
handleUploadPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
this.dialogImageUrl = file.url; // 设置大图地址
this.dialogVisible = true; // 显示弹窗
},
// 限制图片数量
handleExceed(files, fileList) {
this.$message.warning(`最多上传${this.limit}张图片`);
this.$message.warning(`最多上传${this.limit}张图片`); // 提示超出限制
},
// 重新对fileList进行赋值
setFileList(fileList) {
var fileArray = [];
var fileUrlArray = [];
// 有些图片不是公开的，所以需要携带token信息做权限校验
var token = storage.get("token");
let _this = this;
var fileArray = []; // 用于存储文件对象数组
var fileUrlArray = []; // 用于存储文件 URL 数组
var token = storage.get("Token"); // 获取 Token
let _this = this; // 保存当前上下文
fileList.forEach(function(item, index) {
var url = item.url.split("?")[0];
if(!url.startsWith("http")) {
url = _this.$base.url+url
}
var name = item.name;
var file = {
var url = item.url.split("?")[0]; // 获取文件 URL
if (!url.startsWith("http")) { // 如果 URL 不是以 http 开头，则拼接基础路径
url = _this.$base.url + url;
}
var name = item.name; // 文件名称
var file = { // 构造文件对象
name: name,
url: url + "?token=" + token
url: url + "?token=" + token // 添加 Token 参数
};
fileArray.push(file);
fileUrlArray.push(url);
fileArray.push(file); // 添加到文件对象数组
fileUrlArray.push(url); // 添加到文件 URL 数组
});
this.fileList = fileArray;
this.fileUrlList = fileUrlArray;
this.fileList = fileArray; // 更新文件列表
this.fileUrlList = fileUrlArray; // 更新文件 URL 列表
}
}
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped>
</style>

149
admin/src/components/common/FileUpload.vue
Unescape View File

@ -1,140 +1,145 @@
<template>
<div>
<!-- 上传文件组件 -->
<!-- 文件上传组件 -->
<el-upload
ref="upload"
:action="getActionUrl"
list-type="picture-card"
:multiple="multiple"
:limit="limit"
:headers="myHeaders"
:file-list="fileList"
:on-exceed="handleExceed"
:on-preview="handleUploadPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-error="handleUploadErr"
:before-upload="handleBeforeUpload"
ref="upload" <!-- 引用上传组件实例 -->
:action="getActionUrl" <!-- 上传接口地址 -->
list-type="picture-card" <!-- 列表类型 -->
:multiple="multiple" <!-- 是否支持多选 -->
:limit="limit" <!-- 最大上传数量 -->
:headers="myHeaders" <!-- 请求头 -->
:file-list="fileList" <!-- 绑定上传文件列表 -->
:on-exceed="handleExceed" <!-- 超出限制时触发 -->
:on-preview="handleUploadPreview" <!-- 点击预览时触发 -->
:on-remove="handleRemove" <!-- 删除文件时触发 -->
:on-success="handleUploadSuccess" <!-- 上传成功时触发 -->
:on-error="handleUploadErr" <!-- 上传失败时触发 -->
:before-upload="handleBeforeUpload" <!-- 上传前触发 -->
>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div>
<i class="el-icon-plus"></i> <!-- 默认显示的加号图标 -->
<div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div> <!-- 提示文字 -->
</el-upload>
<!-- 查看大图弹窗 -->
<el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
<img width="100%" :src="dialogImageUrl" alt>
<img width="100%" :src="dialogImageUrl" alt> <!-- 展示图片 -->
</el-dialog>
</div>
</template>
<script>
import storage from "@/utils/storage";
import base from "@/utils/base";
import storage from "@/utils/storage"; // 导入本地存储工具
import base from "@/utils/base"; // 导入基础配置工具
export default {
data() {
return {
// 查看大图
dialogVisible: false,
// 查看大图
dialogImageUrl: "",
// 组件渲染图片的数组字段，有特殊格式要求
fileList: [],
fileUrlList: [],
myHeaders:{}
dialogVisible: false, // 控制弹窗是否显示
dialogImageUrl: "", // 当前查看的大图地址
fileList: [], // 上传文件列表
fileUrlList: [], // 上传文件 URL 列表
myHeaders: {} // 请求头
};
},
props: ["tip", "action", "limit", "multiple", "fileUrls"],
props: {
tip: String, // 提示文字
action: String, // 上传接口路径
limit: Number, // 最大上传数量
multiple: Boolean, // 是否支持多选
fileUrls: String // 已上传文件的 URL 列表
},
mounted() {
this.init();
this.myHeaders= {
'Token':storage.get("Token")
}
this.init(); // 初始化
this.myHeaders = { // 设置请求头
'Token': storage.get("Token")
};
},
watch: {
fileUrls: function(val, oldVal) {
// console.log("new: %s, old: %s", val, oldVal);
// 监听父组件传来的文件 URL 列表变化
this.init();
}
},
computed: {
// 计算属性的 getter
// 动态计算上传接口 URL
getActionUrl: function() {
// return base.url + this.action + "?token=" + storage.get("token");
return `/${this.$base.name}/` + this.action;
}
},
methods: {
// 初始化
init() {
// console.log(this.fileUrls);
if (this.fileUrls) {
this.fileUrlList = this.fileUrls.split(",");
let fileArray = [];
this.fileUrlList = this.fileUrls.split(","); // 将字符串拆分为数组
let fileArray = []; // 用于存储文件对象数组
this.fileUrlList.forEach(function(item, index) {
var url = item;
var name = index;
var url = item; // 当前文件 URL
var name = index; // 文件名称（此处简单用索引替代）
var file = {
name: name,
url: url
};
fileArray.push(file);
}; // 构造文件对象
fileArray.push(file); // 添加到数组中
});
this.setFileList(fileArray);
this.setFileList(fileArray); // 更新文件列表
}
},
handleBeforeUpload(file) {
// 上传前的钩子函数
// 可在此处添加文件大小、类型等验证逻辑
},
// 上传文件成功后执行
handleUploadSuccess(res, file, fileList) {
if (res && res.code === 0) {
fileList[fileList.length - 1]["url"] = "upload/" + file.response.file;
this.setFileList(fileList);
this.$emit("change", this.fileUrlList.join(","));
if (res && res.code === 0) { // 检查返回结果
fileList[fileList.length - 1]["url"] = "upload/" + file.response.file; // 更新文件 URL
this.setFileList(fileList); // 更新文件列表
this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
} else {
this.$message.error(res.msg);
this.$message.error(res.msg); // 提示错误消息
}
},
// 图片上传失败
handleUploadErr(err, file, fileList) {
this.$message.error("文件上传失败");
this.$message.error("文件上传失败"); // 提示失败消息
},
// 移除图片
handleRemove(file, fileList) {
this.setFileList(fileList);
this.$emit("change", this.fileUrlList.join(","));
this.setFileList(fileList); // 更新文件列表
this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
},
// 查看大图
handleUploadPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
this.dialogImageUrl = file.url; // 设置大图地址
this.dialogVisible = true; // 显示弹窗
},
// 限制图片数量
handleExceed(files, fileList) {
this.$message.warning(`最多上传${this.limit}张图片`);
this.$message.warning(`最多上传${this.limit}张图片`); // 提示超出限制
},
// 重新对fileList进行赋值
setFileList(fileList) {
var fileArray = [];
var fileUrlArray = [];
// 有些图片不是公开的，所以需要携带token信息做权限校验
var token = storage.get("token");
let _this = this;
var fileArray = []; // 用于存储文件对象数组
var fileUrlArray = []; // 用于存储文件 URL 数组
var token = storage.get("Token"); // 获取 Token
let _this = this; // 保存当前上下文
fileList.forEach(function(item, index) {
var url = item.url.split("?")[0];
if(!url.startsWith("http")) {
url = _this.$base.url+url
}
var name = item.name;
var file = {
var url = item.url.split("?")[0]; // 获取文件 URL
if (!url.startsWith("http")) { // 如果 URL 不是以 http 开头，则拼接基础路径
url = _this.$base.url + url;
}
var name = item.name; // 文件名称
var file = { // 构造文件对象
name: name,
url: url + "?token=" + token
url: url + "?token=" + token // 添加 Token 参数
};
fileArray.push(file);
fileUrlArray.push(url);
fileArray.push(file); // 添加到文件对象数组
fileUrlArray.push(url); // 添加到文件 URL 数组
});
this.fileList = fileArray;
this.fileUrlList = fileUrlArray;
this.fileList = fileArray; // 更新文件列表
this.fileUrlList = fileUrlArray; // 更新文件 URL 列表
}
}
};
</script>
<style lang="scss" scoped>
</style>
</style>

56
admin/src/components/home/HomeCard.vue
Unescape View File

@ -1,60 +1,72 @@
<template>
<el-card class="box-card">
<!-- 卡片头部 -->
<div slot="header" class="header">
<!-- 标题 -->
<span>{{title}}</span>
<!-- 标签 -->
<span>
<el-tag size="small" :type="titleTag">{{titleUnit}}</el-tag>
</span>
</div>
<!-- 主体内容 -->
<div class="content">
<!-- 主要内容 -->
{{content}}&nbsp;&nbsp;
<!-- 单位 -->
<span class="unit">{{contentUnit}}</span>
</div>
<!-- 底部信息 -->
<div class="bottom">
<!-- 左侧标题 -->
<span>{{bottomTitle}}</span>
<!-- 右侧内容 -->
<span>
{{bottomContent}}
<!-- 图标 -->
<i :class="bottomIcon"></i>
</span>
</div>
</el-card>
</template>
<script>
export default {
props: [
"title",
"titleTag",
"titleUnit",
"content",
"contentUnit",
"bottomTitle",
"bottomContent",
"bottomIcon"
"title", // 标题
"titleTag", // 标题标签类型
"titleUnit", // 标题单位
"content", // 主要内容
"contentUnit", // 内容单位
"bottomTitle", // 底部标题
"bottomContent", // 底部内容
"bottomIcon" // 底部图标类名
]
};
</script>
<style lang="scss" scoped>
.box-card {
margin-right: 10px;
margin-right: 10px; // 卡片之间的间距
.header {
display: flex;
justify-content: space-between;
align-items: center;
display: flex; // 使用弹性布局
justify-content: space-between; // 水平分布
align-items: center; // 垂直居中
}
.content {
font-size: 30px;
font-weight: bold;
color: #666;
text-align: center;
font-size: 30px; // 主内容字体大小
font-weight: bold; // 加粗
color: #666; // 字体颜色
text-align: center; // 文字居中
.unit {
font-size: 16px;
font-size: 16px; // 单位字体大小
}
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
display: flex; // 使用弹性布局
justify-content: space-between; // 水平分布
align-items: center; // 垂直居中
margin-top: 10px; // 上方间距
}
}
</style>
</style>

79
admin/src/components/home/HomeComment.vue
Unescape View File

@ -1,33 +1,40 @@
<template>
<div class="home-comment">
<!-- 标题 -->
<div class="title">用户留言</div>
<!-- 留言列表 -->
<div class="comment-list">
<div v-for="(item,index) in list" v-bind:key="index" class="comment-item">
<!-- 循环渲染每个留言项 -->
<div v-for="(item, index) in list" :key="index" class="comment-item">
<!-- 用户头像和用户名 -->
<div class="user-content">
<el-image
class="avator"
:src="item.avator"
:src="item.avator" // 设置头像图片源
></el-image>
<span class="user">{{item.name}}</span>
<span class="user">{{ item.name }}</span> <!-- 显示用户名 -->
</div>
<div class="comment">{{item.content}}</div>
<div class="create-time">{{item.createTime}}</div>
<!-- 留言内容 -->
<div class="comment">{{ item.content }}</div>
<!-- 创建时间 -->
<div class="create-time">{{ item.createTime }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
name: "MaskLin",
name: "MaskLin", // 用户名
avator:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // 头像图片
content:
"你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！",
createTime: "5月02日 00:00"
"你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！", // 留言内容
createTime: "5月02日 00:00" // 创建时间
},
{
name: "MaskLin",
@ -53,49 +60,49 @@ export default {
};
}
};
</script>
<style lang="scss" scoped>
.home-comment {
background: #ffffff;
background: #ffffff; // 背景颜色
.title {
font-size: 18px;
color: #666;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #eeeeee;
font-size: 18px; // 字体大小
color: #666; // 文字颜色
font-weight: bold; // 加粗
padding: 10px; // 内边距
border-bottom: 1px solid #eeeeee; // 下方边框
}
.comment-list {
padding: 10px;
padding: 10px; // 内边距
.comment-item {
padding: 10px;
border-bottom: 1px solid #eeeeee;
padding: 10px; // 内边距
border-bottom: 1px solid #eeeeee; // 下方边框
.user-content {
display: flex;
align-items: center;
display: flex; // 弹性布局
align-items: center; // 垂直居中
.user {
font-size: 18px;
color: #666;
font-weight: bold;
line-height: 50px;
margin-left: 10px;
font-size: 18px; // 字体大小
color: #666; // 文字颜色
font-weight: bold; // 加粗
line-height: 50px; // 行高
margin-left: 10px; // 左侧外边距
}
.avator {
width: 50px;
height: 50px;
border-radius: 50%;
width: 50px; // 宽度
height: 50px; // 高度
border-radius: 50%; // 圆形
}
}
.comment {
margin-top: 10px;
font-size: 14px;
color: #888888;
margin-top: 10px; // 上方外边距
font-size: 14px; // 字体大小
color: #888888; // 文字颜色
}
.create-time {
margin-top: 15px;
font-size: 14px;
color: #888888;
margin-top: 15px; // 上方外边距
font-size: 14px; // 字体大小
color: #888888; // 文字颜色
}
}
}
}
</style>
</style>

53
admin/src/components/home/HomeProgress.vue
Unescape View File

@ -1,55 +1,68 @@
<template>
<div class="home-progress">
<!-- 第一个标题 -->
<div class="title">月访问量</div>
<!-- 提示文字 -->
<div class="tip">同上期增长</div>
<!-- 进度条组件 -->
<el-progress
class="progress"
:text-inside="true"
:stroke-width="24"
:percentage="20"
status="success"
:text-inside="true" // 将文字显示在进度条内部
:stroke-width="24" // 进度条宽度
:percentage="20" // 进度百分比
status="success" // 状态为成功
></el-progress>
<!-- 第二个标题 -->
<div class="title">月用户量</div>
<!-- 提示文字 -->
<div class="tip">同上期增长</div>
<!-- 进度条组件 -->
<el-progress
class="progress"
:text-inside="true"
:stroke-width="24"
:percentage="50"
status="success"
:percentage="50" // 进度百分比
status="success" // 状态为成功
></el-progress>
<!-- 第三个标题 -->
<div class="title">月收入</div>
<!-- 提示文字 -->
<div class="tip">同上期减少</div>
<!-- 进度条组件 -->
<el-progress
class="progress"
:text-inside="true"
:stroke-width="24"
:percentage="28"
status="exception"
:percentage="28" // 进度百分比
status="exception" // 状态为异常
></el-progress>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.home-progress {
background: #ffffff;
height: 400px;
padding: 20px;
background: #ffffff; // 背景颜色
height: 400px; // 高度
padding: 20px; // 内边距
.title {
color: #666666;
font-weight: bold;
font-size: 20px;
margin-top: 10px;
color: #666666; // 文字颜色
font-weight: bold; // 加粗
font-size: 20px; // 字体大小
margin-top: 10px; // 上方外边距
}
.tip {
color: #888888;
font-size: 16px;
margin-top: 10px;
color: #888888; // 文字颜色
font-size: 16px; // 字体大小
margin-top: 10px; // 上方外边距
}
.progress {
margin-top: 10px;
margin-top: 10px; // 上方外边距
}
}
</style>
</style>

777
admin/src/components/index/IndexAsideStatic.vue
Unescape View File

@ -1,26 +1,65 @@
<template>
<el-aside class="index-aside" width="200px">
<div class="index-aside-inner menulist">
<div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item">
<!-- 动态渲染菜单 -->
<div v-for="item in menuList" :key="item.roleName" v-if="role == item.roleName" class="menulist-item">
<!-- 用户头像 -->
<div class="menulistImg" v-if="false && 2 == 2">
<el-image :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
<el-image
:style='{
padding: "0",
boxShadow: "0 0 6px rgba(0,0,0,0)",
margin: "0",
borderColor: "rgba(0,0,0,0)",
borderRadius: "0",
borderWidth: "0",
width: "100%",
borderStyle: "solid",
height: "auto"
}'
v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'"
src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg"
fit="cover"
/>
</div>
<el-menu :mode="2 == 1? 'horizontal':'vertical'" :unique-opened="true" class="el-menu-demo" default-active="0">
<el-menu-item index="0" @click="menuHandler('')"><i v-if="false" class="el-icon-menu el-icon-s-home" />首页</el-menu-item>
<el-submenu :index="1+''">
<!-- 主菜单 -->
<el-menu
:mode="2 == 1 ? 'horizontal' : 'vertical'"
:unique-opened="true"
class="el-menu-demo"
default-active="0"
>
<!-- 首页菜单项 -->
<el-menu-item index="0" @click="menuHandler('')">
<i v-if="false" class="el-icon-menu el-icon-s-home" />
首页
</el-menu-item>
<!-- 个人中心子菜单 -->
<el-submenu :index="1 + ''">
<template slot="title">
<i v-if="false" class="el-icon-menu el-icon-user-solid" />
<span>个人中心</span>
<i v-if="false" class="el-icon-menu el-icon-user-solid" />
<span>个人中心</span>
</template>
<el-menu-item :index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
<el-menu-item :index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
<el-menu-item :index="1 - 1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
<el-menu-item :index="1 - 2" @click="menuHandler('center')">个人信息</el-menu-item>
</el-submenu>
<el-submenu v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="index+2+''">
<!-- 动态渲染子菜单 -->
<el-submenu v-for="(menu, index) in item.backMenu" :key="menu.menu" :index="index + 2 + ''">
<template slot="title">
<i v-if="false" class="el-icon-menu" :class="icons[index]" />
<span>{{ menu.menu }}</span>
<i v-if="false" class="el-icon-menu" :class="icons[index]" />
<span>{{ menu.menu }}</span>
</template>
<el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
<el-menu-item
v-for="(child, sort) in menu.child"
:key="sort"
:index="(index + 2) + '-' + sort"
@click="menuHandler(child.tableName)"
>
{{ child.menu }}
</el-menu-item>
</el-submenu>
</el-menu>
</div>
@ -30,12 +69,13 @@
<script>
import menu from '@/utils/menu'
export default {
data() {
return {
menuList: [],
dynamicMenuRoutes: [],
role: '',
menuList: [], // 动态菜单数据
dynamicMenuRoutes: [], // 动态路由数据
role: '', // 当前用户角色
icons: [
'el-icon-s-cooperation',
'el-icon-s-order',
@ -78,146 +118,144 @@ export default {
'el-icon-stopwatch',
],
menulistStyle: '${template.back.menulist.menulistStyle}',
menulistBorderBottom: {},
menulistBorderBottom: {}, // 边框样式
}
},
mounted() {
// 初始化菜单数据
const menus = menu.list()
if(menus) {
this.menuList = menus
if (menus) {
this.menuList = menus
} else {
let params = {
page: 1,
limit: 1,
sort: 'id',
let params = {
page: 1,
limit: 1,
sort: 'id',
}
this.$http({
url: "menu/list",
method: "get",
params: params
}).then(({ data }) => {
if (data && data.code === 0) {
this.menuList = JSON.parse(data.data.list[0].menujson)
this.$storage.set("menus", this.menuList)
}
this.$http({
url: "menu/list",
method: "get",
params: params
}).then(({
data
}) => {
if (data && data.code === 0) {
this.menuList = JSON.parse(data.data.list[0].menujson);
this.$storage.set("menus", this.menuList);
}
})
})
}
// 获取当前用户角色
this.role = this.$storage.get('role')
},
created(){
setTimeout(()=>{
created() {
// 延迟加载样式
setTimeout(() => {
this.menulistStyleChange()
},10)
this.icons.sort(()=>{
return (0.5-Math.random())
})
this.lineBorder()
}, 10)
// 随机排序图标
this.icons.sort(() => 0.5 - Math.random())
this.lineBorder()
},
methods: {
lineBorder() {
let style = '${template.back.menulist.menulistStyle}'
let w = '${template.back.menulist.menulistLineWidth}'
let s = '${template.back.menulist.menulistLineStyle}'
let c = '${template.back.menulist.menulistLineColor}'
if(style == 'vertical') {
this.menulistBorderBottom = {
borderBottomWidth: w,
borderBottomStyle: s,
borderBottomColor: c
}
} else {
this.menulistBorderBottom = {
borderRightWidth: w,
borderRightStyle: s,
borderRightColor: c
}
}
},
lineBorder() {
let style = '${template.back.menulist.menulistStyle}'
let w = '${template.back.menulist.menulistLineWidth}'
let s = '${template.back.menulist.menulistLineStyle}'
let c = '${template.back.menulist.menulistLineColor}'
if (style == 'vertical') {
this.menulistBorderBottom = {
borderBottomWidth: w,
borderBottomStyle: s,
borderBottomColor: c
}
} else {
this.menulistBorderBottom = {
borderRightWidth: w,
borderRightStyle: s,
borderRightColor: c
}
}
},
menuHandler(name) {
let router = this.$router
name = '/'+name
name = '/' + name
router.push(name)
},
// 菜单
setMenulistHoverColor(){
let that = this
return;
this.$nextTick(()=>{
document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
// 菜单样式调整
menulistStyleChange() {
this.setMenulistIconColor()
this.setMenulistHoverColor()
this.setMenulistStyleHeightChange()
let str = "2"
if (1 == str) {
this.$nextTick(() => {
document.querySelectorAll('.el-container .el-container').forEach(el => {
el.style.display = "block"
el.style.paddingTop = "80px" // header 高度
})
document.querySelectorAll('.el-aside').forEach(el => {
el.style.width = "100%"
el.style.height = "auto"
el.style.paddingTop = '0'
})
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el => {
el.style.paddingTop = '0'
el.style.width = "100%"
})
})
}
if (2 === str) {
this.$nextTick(() => {
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el => {
el.style.paddingTop = "80px"
})
})
}
},
setMenulistHoverColor() {
return
this.$nextTick(() => {
document.querySelectorAll('.menulist .el-menu-item').forEach(el => {
el.addEventListener("mouseenter", e => {
e.stopPropagation()
el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
})
el.addEventListener("mouseleave", e => {
e.stopPropagation()
// el.style.backgroundColor = "${template.back.menulist.menulistBgColor}"
el.style.background = "none"
el.style.backgroundColor = "none"
})
el.addEventListener("focus", e => {
e.stopPropagation()
el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
})
})
document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
document.querySelectorAll('.menulist .el-submenu__title').forEach(el => {
el.addEventListener("mouseenter", e => {
e.stopPropagation()
el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
})
el.addEventListener("mouseleave", e => {
e.stopPropagation()
// el.style.backgroundColor = "${template.back.menulist.menulistBgColor}"
el.style.background = "none"
el.style.backgroundColor = "none"
})
})
})
},
setMenulistIconColor() {
this.$nextTick(()=>{
document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
this.$nextTick(() => {
document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el => {
el.style.color = "${template.back.menulist.menulistIconColor}"
})
})
},
menulistStyleChange() {
this.setMenulistIconColor()
this.setMenulistHoverColor()
this.setMenulistStyleHeightChange()
let str = "2"
if(1 == str) {
this.$nextTick(()=>{
document.querySelectorAll('.el-container .el-container').forEach(el=>{
el.style.display = "block"
el.style.paddingTop = "80px" // header 高度
})
document.querySelectorAll('.el-aside').forEach(el=>{
el.style.width = "100%"
el.style.height = "auto"
el.style.paddingTop = '0'
})
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
el.style.paddingTop = '0'
el.style.width = "100%"
})
})
}
if(2 === str) {
this.$nextTick(()=>{
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
el.style.paddingTop = "80px"
})
})
}
},
setMenulistStyleHeightChange() {
return;
this.$nextTick(()=>{
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
return
this.$nextTick(() => {
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el => {
el.style.height = "${template.back.menulist.menulistHeight}"
el.style.lineHeight = "${template.back.menulist.menulistHeight}"
})
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el => {
el.style.height = "${template.back.menulist.menulistHeight}"
el.style.lineHeight = "${template.back.menulist.menulistHeight}"
})
@ -226,276 +264,281 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.el-container {
display: block;
}
.index-aside {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
.el-container {
display: block;
}
.index-aside {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
.menulistImg {
font-size: 0;
box-sizing: border-box;
.menulistImg {
font-size: 0;
box-sizing: border-box;
.el-image {
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 100%;
display: block;
.el-image {
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 100%;
display: block;
}
}
.index-aside-inner {
height: 100%;
margin-right: -17px;
margin-bottom: -17px;
overflow: scroll;
overflow-x: hidden !important;
padding-top: 80px;
box-sizing: border-box;
&:focus {
outline: none;
}
& /deep/ .el-menu {
border: 0;
background-color: transparent;
}
}
.index-aside .index-aside-inner.menulist {
height: auto !important;
}
.menulist-item {
width: 200px;
padding: 15px 20px;
margin: 0;
border-radius: 0;
border-width: 0 !important;
border-style: solid !important;
border-color: rgba(254, 236, 190, 1) !important;
background: #FEECBE !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0.2);
box-sizing: border-box;
}
.el-menu-demo {
box-sizing: border-box;
min-height: calc(100vh - 80px);
& > .el-menu-item {
width: auto;
height: auto !important;
line-height: 24px !important;
padding: 10px 22px 10px 10px;
margin: 0 0 10px 0;
color: rgba(255, 255, 255, 1);
font-size: 14px;
border-radius: 160px;
border-width: 5px 3px;
border-style: solid;
border-color: rgba(79, 150, 68, 1) !important;
background-color: rgba(98, 190, 84, 1) !important;
box-shadow: 0 0 6px rgba(255, 255, 255, 0);
box-sizing: initial;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.el-icon-menu {
margin: 0 5px 0 0;
padding: 0;
width: 24px;
line-height: 24px;
color: rgba(199, 21, 133, 1);
font-size: 16px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #fff;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255, 255, 255, 0);
}
}
.index-aside-inner {
height: 100%;
margin-right: -17px;
margin-bottom: -17px;
overflow: scroll;
overflow-x: hidden !important;
padding-top: 80px;
.el-submenu {
margin: 0 0 10px 0;
}
& /deep/ .el-submenu__title {
width: auto;
height: auto !important;
line-height: 24px !important;
padding: 10px 22px 10px 10px;
color: rgba(255, 255, 255, 1);
font-size: 14px;
border-radius: 160px;
border-width: 5px 3px;
border-style: solid;
border-color: rgba(79, 150, 68, 1) !important;
background-color: rgba(98, 190, 84, 1) !important;
box-shadow: 0 0 6px rgba(255, 255, 255, 0);
box-sizing: initial;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
&:focus {
outline: none;
.el-icon-menu {
margin: 0 5px 0 0;
padding: 0;
width: 24px;
line-height: 24px;
color: rgba(199, 21, 133, 1);
font-size: 16px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #fff;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255, 255, 255, 0);
}
& /deep/ .el-menu {
border: 0;
background-color: transparent;
.el-submenu__icon-arrow {
margin: 0 10px 0 0;
padding: 0;
width: 12px;
line-height: 12px;
color: rgba(255, 255, 255, 1) !important;
font-size: 12px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #fff;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255, 255, 255, 0);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
text-align: center;
display: block;
}
}
& /deep/ .el-menu.el-menu--inline {
width: 120px;
height: auto;
padding: 0;
margin: 0 auto 5px;
border-radius: 4px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
background-color: rgba(88, 171, 75, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
.el-menu-item {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 !important;
margin: 0;
color: rgba(249, 249, 249, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
min-width: auto;
&.is-active {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 !important;
margin: 0;
color: rgba(88, 171, 75, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
}
&:hover {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 !important;
margin: 0;
color: rgba(88, 171, 75, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
}
}
}
.index-aside .index-aside-inner.menulist {
height: auto !important;
}
.menulist-item {
width: 200px;
padding: 15px 20px;
margin: 0;
border-radius: 0;
border-width: 0 !important;
border-style: solid !important;
border-color: rgba(254, 236, 190, 1) !important;
background: #FEECBE !important;
box-shadow: 0 0 6px rgba(30, 144, 255, .2);
box-sizing: border-box;
}
.el-menu-demo {
box-sizing: border-box;
min-height: calc(100vh - 80px);
&>.el-menu-item {
width: auto;
height: auto !important;
line-height: 24px !important;
padding: 10px 22px 10px 10px;
margin: 0 0 10px 0;
color: rgba(255, 255, 255, 1);
font-size: 14px;
border-radius: 160px;
border-width: 5px 3px;
border-style: solid;
border-color: rgba(79, 150, 68, 1) !important;
background-color: rgba(98, 190, 84, 1) !important;
box-shadow: 0 0 6px rgba(255,255,255,0);
box-sizing: initial;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.el-icon-menu {
margin: 0 5px 0 0;
padding: 0;
width: 24px;
line-height: 24px;
color: rgba(199, 21, 133, 1);
font-size: 16px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #fff;
background-color: rgba(255,255,255,0);
box-shadow: 0 0 6px rgba(255,255,255,0);
}
}
.el-submenu {
margin: 0 0 10px 0;
}
& /deep/ .el-submenu__title {
width: auto;
height: auto !important;
line-height: 24px !important;
padding: 10px 22px 10px 10px;
color: rgba(255, 255, 255, 1);
font-size: 14px;
border-radius: 160px;
border-width: 5px 3px;
border-style: solid;
border-color: rgba(79, 150, 68, 1) !important;
background-color: rgba(98, 190, 84, 1) !important;
box-shadow: 0 0 6px rgba(255,255,255,0);
box-sizing: initial;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.el-icon-menu {
margin: 0 5px 0 0;
padding: 0;
width: 24px;
line-height: 24px;
color: rgba(199, 21, 133, 1);
font-size: 16px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #fff;
background-color: rgba(255,255,255,0);
box-shadow: 0 0 6px rgba(255,255,255,0);
}
.el-submenu__icon-arrow {
margin: 0 10px 0 0;
padding: 0;
width: 12px;
line-height: 12px;
color: rgba(255, 255, 255, 1) !important;
font-size: 12px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #fff;
background-color: rgba(255,255,255,0);
box-shadow: 0 0 6px rgba(255,255,255,0);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
text-align: center;
display: block;
}
}
& /deep/ .el-menu.el-menu--inline {
width: 120px;
height: auto;
padding: 0;
margin: 0 auto 5px;
border-radius: 4px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(88, 171, 75, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, .3);
.el-menu-item {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 !important;
margin: 0;
color: rgba(249, 249, 249, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
min-width: auto;
&.is-active {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 !important;
margin: 0;
color: rgba(88, 171, 75, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
}
&:hover {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 !important;
margin: 0;
color: rgba(88, 171, 75, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
}
}
}
}
}
</style>
<style>
}
/* 弹出菜单样式 */
<style>
.el-menu--horizontal .el-menu--popup {
width: 120px;
height: auto;
padding: 0;
margin: 0 auto 5px;
border-radius: 4px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(88, 171, 75, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, .3);
min-width: auto;
}
width: 120px;
height: auto;
padding: 0;
margin: 0 auto 5px;
border-radius: 4px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
background-color: rgba(88, 171, 75, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
min-width: auto;
}
.el-menu--horizontal .el-menu--popup .el-menu-item {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0;
margin: 0;
color: rgba(249, 249, 249, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
min-width: auto;
}
.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0;
margin: 0;
color: rgba(88, 171, 75, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
}
</style>
width: 100%;
height: 44px;
line-height: 44px;
padding: 0;
margin: 0;
color: rgba(249, 249, 249, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
min-width: auto;
}
.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0;
margin: 0;
color: rgba(88, 171, 75, 1) !important;
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
}
</style>

39
admin/src/components/index/IndexAsideSub.vue
Unescape View File

@ -1,49 +1,60 @@
<template>
<!-- 如果当前菜单有子菜单且长度大于等于1，则渲染一个子菜单 -->
<el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''">
<!-- 设置子菜单的标题区域 -->
<template slot="title">
<!-- 显示子菜单的名称 -->
<span>{{ menu.name }}</span>
</template>
<!-- 遍历当前菜单的子菜单，并递归渲染 -->
<sub-menu
v-for="item in menu.list"
:key="item.menuId"
:menu="item"
:dynamicMenuRoutes="dynamicMenuRoutes"
:key="item.menuId" <!-- 为每个子菜单设置唯一的 key -->
:menu="item" <!-- 将子菜单对象传递给子组件 -->
:dynamicMenuRoutes="dynamicMenuRoutes" <!-- 将动态路由传递给子组件 -->
></sub-menu>
</el-submenu>
<!-- 如果没有子菜单，则直接渲染菜单项 -->
<el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
<!-- 显示菜单项的名称 -->
<span>{{ menu.name }}</span>
</el-menu-item>
</template>
<!-- 导入子菜单组件 -->
<script>
import SubMenu from "./IndexAsideSub";
export default {
name: "sub-menu",
props: {
menu: {
name: "sub-menu", <!-- 定义组件名称 -->
props: { <!-- 定义接收的属性 -->
menu: { <!-- 当前菜单对象 -->
type: Object,
required: true
},
dynamicMenuRoutes: {
dynamicMenuRoutes: { <!-- 动态路由数组 -->
type: Array,
required: true
}
},
components: {
components: { <!-- 注册子组件 -->
SubMenu
},
methods: {
methods: { <!-- 定义方法 -->
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
gotoRouteHandle(menu) {
// 从动态路由中筛选出与当前菜单ID匹配的路由
var route = this.dynamicMenuRoutes.filter(
item => item.meta.menuId === menu.menuId
);
if (route.length >= 1) {
if (route[0].component != null) {
this.$router.replace({ name: route[0].name });
} else {
this.$router.push({ name: "404" });
if (route.length >= 1) { <!-- 如果找到匹配的路由 -->
if (route[0].component != null) { <!-- 如果组件存在 -->
this.$router.replace({ name: route[0].name }); <!-- 跳转到对应路由 -->
} else { <!-- 如果组件不存在 -->
this.$router.push({ name: "404" }); <!-- 跳转到404页面 -->
}
} else { <!-- 如果未找到路由 -->
console.warn("未找到对应的路由"); <!-- 记录警告日志 -->
}
}
}

330
admin/src/components/index/IndexHeader.vue
Unescape View File

@ -1,185 +1,169 @@
<template>
<!-- <el-header>
<el-menu background-color="#00c292" text-color="#FFFFFF" active-text-color="#FFFFFF" mode="horizontal">
<div class="fl title">{{this.$project.projectName}}</div>
<div class="fr logout" style="display:flex;">
<el-menu-item index="3">
<div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
</el-menu-item>
<el-menu-item @click="onLogout" index="2">
<div>退出登录</div>
</el-menu-item>
</div>
</el-menu>
</el-header> -->
<div class="navbar" :style="{background:heads.headBgColor,height:heads.headHeight,boxShadow:heads.headBoxShadow,lineHeight:heads.headHeight}">
<div class="title-menu" :style="{justifyContent:heads.headTitleStyle=='1'?'flex-start':'center'}">
<el-image v-if="heads.headTitleImg" class="title-img" :style="{width:heads.headTitleImgWidth,height:heads.headTitleImgHeight,boxShadow:heads.headTitleImgBoxShadow,borderRadius:heads.headTitleImgBorderRadius}" :src="heads.headTitleImgUrl" fit="cover"></el-image>
<div class="title-name" :style="{color:heads.headFontColor,fontSize:heads.headFontSize}">{{this.$project.projectName}}</div>
</div>
<div class="right-menu">
<div class="user-info" :style="{color:heads.headUserInfoFontColor,fontSize:heads.headUserInfoFontSize}">{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
<div v-if="this.$storage.get('role')!='管理员'" class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onIndexTap">退出到前台</div>
<div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onLogout">退出登录</div>
</div>
</div>
<div class="navbar" :style="{background:heads.headBgColor,height:heads.headHeight,boxShadow:heads.headBoxShadow,lineHeight:heads.headHeight}">
<!-- 左侧标题部分 -->
<div class="title-menu" :style="{justifyContent:heads.headTitleStyle=='1'?'flex-start':'center'}">
<!-- 如果头像图片存在，则显示头像 -->
<el-image v-if="heads.headTitleImg" class="title-img" :style="{width:heads.headTitleImgWidth,height:heads.headTitleImgHeight,boxShadow:heads.headTitleImgBoxShadow,borderRadius:heads.headTitleImgBorderRadius}" :src="heads.headTitleImgUrl" fit="cover"></el-image>
<!-- 显示项目名称 -->
<div class="title-name" :style="{color:heads.headFontColor,fontSize:heads.headFontSize}">{{this.$project.projectName}}</div>
</div>
<!-- 右侧用户信息和退出按钮 -->
<div class="right-menu">
<!-- 用户信息 -->
<div class="user-info" :style="{color:heads.headUserInfoFontColor,fontSize:heads.headUserInfoFontSize}">{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
<!-- 如果角色不是管理员，则显示退出到前台按钮 -->
<div v-if="this.$storage.get('role')!='管理员'" class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onIndexTap">退出到前台</div>
<!-- 退出登录按钮 -->
<div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onLogout">退出登录</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
ruleForm: {},
user: {},
heads: {"headLogoutFontHoverColor":"#fff","headFontSize":"20px","headUserInfoFontColor":"rgba(98, 190, 84, 1)","headBoxShadow":"0 1px 6px #444","headTitleImgHeight":"44px","headLogoutFontHoverBgColor":"rgba(193, 193, 193, 0.55)","headFontColor":"rgba(98, 190, 84, 1)","headTitleImg":false,"headHeight":"80px","headTitleImgBorderRadius":"22px","headTitleImgUrl":"http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg","headBgColor":"#fff url(\"http://codegen.caihongy.cn/20211129/dcfd98cdd41848e38b8e78e5b2092ada.png\") repeat top","headTitleImgBoxShadow":"0 1px 6px #444","headLogoutFontColor":"rgba(98, 190, 84, 1)","headUserInfoFontSize":"16px","headTitleImgWidth":"44px","headTitleStyle":"2","headLogoutFontSize":"16px"},
};
},
created() {
this.setHeaderStyle()
},
mounted() {
let sessionTable = this.$storage.get("sessionTable")
this.$http({
url: sessionTable + '/session',
method: "get"
}).then(({
data
}) => {
if (data && data.code === 0) {
this.user = data.data;
this.$storage.set('userid',data.data.id);
} else {
let message = this.$message
message.error(data.msg);
}
});
},
methods: {
onLogout() {
let storage = this.$storage
let router = this.$router
storage.clear()
router.replace({
name: "login"
});
},
onIndexTap(){
window.location.href = `${this.$base.indexUrl}`
},
setHeaderStyle() {
this.$nextTick(()=>{
document.querySelectorAll('.navbar .right-menu .logout').forEach(el=>{
el.addEventListener("mouseenter", e => {
e.stopPropagation()
el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor
el.style.color = this.heads.headLogoutFontHoverColor
})
el.addEventListener("mouseleave", e => {
e.stopPropagation()
el.style.backgroundColor = "transparent"
el.style.color = this.heads.headLogoutFontColor
})
})
})
},
}
};
export default {
data() {
return {
dialogVisible: false,
ruleForm: {},
user: {},
heads: {
"headLogoutFontHoverColor": "#fff",
"headFontSize": "20px",
"headUserInfoFontColor": "rgba(98, 190, 84, 1)",
"headBoxShadow": "0 1px 6px #444",
"headTitleImgHeight": "44px",
"headLogoutFontHoverBgColor": "rgba(193, 193, 193, 0.55)",
"headFontColor": "rgba(98, 190, 84, 1)",
"headTitleImg": false,
"headHeight": "80px",
"headTitleImgBorderRadius": "22px",
"headTitleImgUrl": "http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg",
"headBgColor": "#fff url(\\"http://codegen.caihongy.cn/20211129/dcfd98cdd41848e38b8e78e5b2092ada.png\\") repeat top",
"headTitleImgBoxShadow": "0 1px 6px #444",
"headLogoutFontColor": "rgba(98, 190, 84, 1)",
"headUserInfoFontSize": "16px",
"headTitleImgWidth": "44px",
"headTitleStyle": "2",
"headLogoutFontSize": "16px"
};
};
},
created() {
// 初始化头部样式
this.setHeaderStyle();
},
mounted() {
let sessionTable = this.$storage.get("sessionTable");
// 获取用户会话信息
this.$http({
url: sessionTable + "/session",
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
// 如果成功获取用户信息，则存储到 user 中
this.user = data.data;
this.$storage.set("userid", data.data.id);
} else {
// 如果失败，弹出错误提示
let message = this.$message;
message.error(data.msg);
}
});
},
methods: {
// 退出登录
onLogout() {
let storage = this.$storage;
let router = this.$router;
// 清空存储并跳转到登录页面
storage.clear();
router.replace({
name: "login"
});
},
// 退出到前台
onIndexTap() {
// 跳转到前台页面
window.location.href = `${this.$base.indexUrl}`;
},
// 设置头部样式
setHeaderStyle() {
this.$nextTick(() => {
document.querySelectorAll('.navbar .right-menu .logout').forEach(el => {
el.addEventListener("mouseenter", e => {
e.stopPropagation();
// 鼠标悬停时改变背景颜色和文字颜色
el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor;
el.style.color = this.heads.headLogoutFontHoverColor;
});
el.addEventListener("mouseleave", e => {
e.stopPropagation();
// 鼠标离开时恢复默认样式
el.style.backgroundColor = "transparent";
el.style.color = this.heads.headLogoutFontColor;
});
});
});
},
}
};
</script>
<style lang="scss" scoped>
.navbar {
height: 60px;
line-height: 60px;
width: 100%;
padding: 0 34px;
box-sizing: border-box;
background-color: #ff00ff;
position: relative;
z-index: 111;
.right-menu {
position: absolute;
right: 34px;
top: 0;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 111;
.user-info {
font-size: 16px;
color: red;
padding: 0 12px;
}
.logout {
font-size: 16px;
color: red;
padding: 0 12px;
cursor: pointer;
}
}
.title-menu {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 100%;
.title-img {
width: 44px;
height: 44px;
border-radius: 22px;
box-shadow: 0 1px 6px #444;
margin-right: 16px;
}
.title-name {
font-size: 24px;
color: #fff;
font-weight: 700;
}
}
}
// .el-header .fr {
// float: right;
// }
.navbar {
height: 60px; /* 设置导航栏高度 */
line-height: 60px; /* 设置文本垂直居中 */
width: 100%; /* 设置宽度为100% */
padding: 0 34px; /* 设置左右内边距 */
box-sizing: border-box; /* 确保padding不会增加总宽度 */
background-color: #ff00ff; /* 设置背景颜色 */
position: relative; /* 相对定位 */
z-index: 111; /* 设置堆叠顺序 */
.right-menu {
position: absolute; /* 绝对定位 */
right: 34px; /* 右侧距离 */
top: 0; /* 顶部对齐 */
height: 100%; /* 占据整个高度 */
display: flex; /* 弹性布局 */
justify-content: flex-end; /* 内容右对齐 */
align-items: center; /* 垂直居中 */
z-index: 111; /* 设置堆叠顺序 */
// .el-header .fl {
// float: left;
// }
.user-info {
font-size: 16px; /* 字体大小 */
color: red; /* 文字颜色 */
padding: 0 12px; /* 内边距 */
}
// .el-header {
// width: 100%;
// color: #333;
// text-align: center;
// line-height: 60px;
// padding: 0;
// z-index: 99;
// }
.logout {
font-size: 16px; /* 字体大小 */
color: red; /* 文字颜色 */
padding: 0 12px; /* 内边距 */
cursor: pointer; /* 鼠标悬停时显示手型 */
}
}
// .logo {
// width: 60px;
// height: 60px;
// margin-left: 70px;
// }
.title-menu {
display: flex; /* 弹性布局 */
justify-content: flex-start; /* 内容左对齐 */
align-items: center; /* 垂直居中 */
width: 100%; /* 占据整个宽度 */
height: 100%; /* 占据整个高度 */
// .avator {
// width: 40px;
// height: 40px;
// background: #ffffff;
// border-radius: 50%;
// }
.title-img {
width: 44px; /* 图片宽度 */
height: 44px; /* 图片高度 */
border-radius: 22px; /* 圆角 */
box-shadow: 0 1px 6px #444; /* 添加阴影 */
margin-right: 16px; /* 图片右侧间距 */
}
// .title {
// color: #ffffff;
// font-size: 20px;
// font-weight: bold;
// margin-left: 20px;
// }
</style>
.title-name {
font-size: 24px; /* 字体大小 */
color: #fff; /* 文字颜色 */
font-weight: 700; /* 加粗 */
}
}
}
</style>
Write Preview
Loading…
Cancel
Save