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

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

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

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

@ -1,9 +1,26 @@
<template> <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"> <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> </el-breadcrumb-item>
</transition-group> </transition-group>
</el-breadcrumb> </el-breadcrumb>
@ -12,81 +29,99 @@
<script> <script>
import pathToRegexp from 'path-to-regexp' import pathToRegexp from 'path-to-regexp'
import { generateTitle } from '@/utils/i18n' import { generateTitle } from '@/utils/i18n'
export default { export default {
data() { data() {
return { return {
levelList: null levelList: null // 保存当前路由的面包屑路径
} }
}, },
// 监听路由变化，更新面包屑
watch: { watch: {
$route() { $route() {
this.getBreadcrumb() this.getBreadcrumb()
} }
}, },
// 初始化时获取面包屑路径
created() { created() {
this.getBreadcrumb() this.getBreadcrumb()
this.breadcrumbStyleChange() this.breadcrumbStyleChange()
}, },
methods: { methods: {
// 从 utils/i18n 中引入的国际化标题生成函数
generateTitle, generateTitle,
// 获取当前路由的面包屑路径
getBreadcrumb() { getBreadcrumb() {
// only show routes with meta.title
let route = this.$route 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] 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) { isDashboard(route) {
const name = route && route.name const name = route && route.name
if (!name) { if (!name) return false
return false
}
return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase() return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
}, },
// 路径参数编译
pathCompile(path) { pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route const { params } = this.$route
var toPath = pathToRegexp.compile(path) const toPath = pathToRegexp.compile(path) // 将路径转换为正则表达式
return toPath(params) return toPath(params) // 替换路径中的动态参数
}, },
// 处理面包屑点击事件
handleLink(item) { handleLink(item) {
const { redirect, path } = item const { redirect, path } = item
if (redirect) { if (redirect) {
this.$router.push(redirect) this.$router.push(redirect) // 跳转到重定向地址
return return
} }
this.$router.push(path) this.$router.push(path) // 跳转到指定路径
}, },
// 动态调整面包屑样式
breadcrumbStyleChange(val) { breadcrumbStyleChange(val) {
this.$nextTick(()=>{ this.$nextTick(() => {
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el=>{ // 修改分隔符样式
el.innerText = "/" document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el => {
el.style.color = "rgba(217, 217, 217, 1)" 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" let str = "2"
if(2 == str) { if (2 == str) {
let headHeight = "80px" let headHeight = "80px"
headHeight = parseInt(headHeight) + 10 + 'px' headHeight = parseInt(headHeight) + 10 + 'px' // 增加头部高度
document.querySelectorAll('.app-breadcrumb').forEach(el=>{ document.querySelectorAll('.app-breadcrumb').forEach(el => {
el.style.marginTop = headHeight el.style.marginTop = headHeight // 设置顶部外边距
}) })
} }
}) })
}, }
} }
} }
</script>
// 样式部分
<style lang="scss" scoped> <style lang="scss" scoped>
.app-breadcrumb { .app-breadcrumb {
display: block; display: block;
@ -97,13 +132,12 @@ export default {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: flex-start; justify-content: flex-start; /* 默认左对齐 */
align-items: center; align-items: center;
} }
.no-redirect { .no-redirect {
color: #97a8be; color: #97a8be; /* 不可点击项的颜色 */
cursor: text; cursor: text; /* 设置鼠标悬停时为文本光标 */
} }
}
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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