mkaoj697q
/
WeChat
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

王

Browse Source
pull/24/head
1234567 2 months ago
parent 65e2715746
commit 9b2c9292a3
20 changed files with 1837 additions and 1465 deletions
Show Stats Download Patch File Download Diff File

32
src/store/index.js
Unescape View File

@ -1,5 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
// 引入各个模块的 Vuex 状态管理文件
import common from './modules/common' import common from './modules/common'
import user from './modules/user' import user from './modules/user'
import article from './modules/article' import article from './modules/article'
@ -7,18 +9,26 @@ import message from './modules/message'
import wxUserTags from './modules/wxUserTags' import wxUserTags from './modules/wxUserTags'
import wxAccount from './modules/wxAccount' import wxAccount from './modules/wxAccount'
// 注册 Vuex 插件，使其可用于 Vue 中
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
modules: { // 使用 modules 来组织不同的子模块
common, modules: {
user, // 引入并注册各个模块
article, common, // 公共模块，可能用于存储一些通用的状态
message, user, // 用户模块，存储用户信息相关的状态
wxUserTags, article, // 文章模块，存储与文章相关的状态
wxAccount message, // 消息模块，存储消息相关的状态
}, wxUserTags, // 微信用户标签模块，管理微信用户标签的状态
mutations: { wxAccount // 微信账号模块，管理微信账号相关的状态
}, },
strict: true
// mutations 用于同步修改状态，这里没有定义任何 mutations（可根据需求进行扩展）
mutations: {
// 这里可以添加全局的 mutation，但目前没有定义
},
// 启用严格模式，开发环境下会对状态的修改进行检查，确保只能通过 mutation 修改状态
strict: true
}) })

89
src/store/modules/wxAccount.js
Unescape View File

@ -1,32 +1,59 @@
import Vue from 'vue' import Vue from 'vue';
export default { export default {
namespaced: true, // Vuex模块启用命名空间
state: { namespaced: true,
ACCOUNT_TYPES:{
1:'订阅号', // Vuex的state，用来存储应用状态
2:'服务号' state: {
}, // 账户类型，映射数字ID到账户类型名称
accountList:[], ACCOUNT_TYPES: {
selectedAppid:'' 1: '订阅号',
}, 2: '服务号'
mutations: { },
updateAccountList (state, list) {
state.accountList = list // 存储账户列表
if(!list.length)return accountList: [],
if(!state.selectedAppid){
let appidCookie = Vue.cookie.get('appid') // 当前选中的Appid，用来标识选择的账号
let selectedAppid = appidCookie?appidCookie:list[0].appid selectedAppid: ''
this.commit('wxAccount/selectAccount',selectedAppid) },
}
}, // Vuex的mutations，用来修改state
selectAccount (state, appid) { mutations: {
Vue.cookie.set('appid',appid) // 更新账户列表
let oldAppid = state.selectedAppid updateAccountList (state, list) {
state.selectedAppid = appid // 更新state中的accountList
if(oldAppid){//切换账号时刷新网页 state.accountList = list;
location.reload();
} // 如果列表为空，直接返回
}, if (!list.length) return;
}
} // 如果当前没有选中的Appid，则从cookie或列表中选择一个默认Appid
if (!state.selectedAppid) {
let appidCookie = Vue.cookie.get('appid');
// 获取cookie中的appid，如果有则使用cookie中的appid，否则使用列表中的第一个Appid
let selectedAppid = appidCookie ? appidCookie : list[0].appid;
// 通过commit调用mutation更新选中的账号
this.commit('wxAccount/selectAccount', selectedAppid);
}
},
// 选择某个账号（切换Appid）
selectAccount (state, appid) {
// 更新cookie中的appid，保存选中的Appid
Vue.cookie.set('appid', appid);
// 记录上一个选中的Appid
let oldAppid = state.selectedAppid;
// 更新当前选中的Appid
state.selectedAppid = appid;
// 如果选中的Appid发生变化，则刷新页面
if (oldAppid) {
location.reload();
}
}
}
};

26
src/store/modules/wxUserTags.js
Unescape View File

@ -1,12 +1,20 @@
export default { export default {
namespaced: true, // 启用 Vuex 模块的命名空间，避免命名冲突
state: { namespaced: true,
tags:[]
}, // state 存储模块的状态
mutations: { state: {
updateTags (state, tags) { // tags 用来存储标签数据的数组
state.tags = tags tags: []
} },
}
// mutations 用来修改 state 中的状态
mutations: {
// 更新 tags 数组的内容
updateTags (state, tags) {
// 将传入的 tags 更新到 state 中
state.tags = tags;
} }
}
};

97
src/utils/httpRequest.js
Unescape View File

@ -4,74 +4,81 @@ import router from '@/router'
import qs from 'qs' import qs from 'qs'
import merge from 'lodash/merge' import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils' import { clearLoginInfo } from '@/utils'
const baseUrl = '/wx'
const baseUrl = '/wx' // 设置请求的基础路径
// 创建axios实例
const http = axios.create({ const http = axios.create({
timeout: 1000 * 30, timeout: 1000 * 30, // 设置请求超时为30秒
withCredentials: true, withCredentials: true, // 允许携带跨域请求的cookie
headers: { headers: {
'Content-Type': 'application/json; charset=utf-8' 'Content-Type': 'application/json; charset=utf-8' // 默认请求头为json格式
} }
}) })
/** /**
* 请求拦截 * 请求拦截器
*/ * 在每个请求发送之前，加入token（从cookie中获取）
*/
http.interceptors.request.use(config => { http.interceptors.request.use(config => {
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token config.headers['token'] = Vue.cookie.get('token') // 在请求头中加入token
return config return config // 返回请求配置
}, error => { }, error => {
return Promise.reject(error) return Promise.reject(error) // 请求出错时，返回Promise拒绝
}) })
/** /**
* 响应拦截 * 响应拦截器
*/ * 对响应数据进行拦截处理
* 如果返回的状态码为401（未授权），则清除登录信息并跳转到登录页
*/
http.interceptors.response.use(response => { http.interceptors.response.use(response => {
if (response.data && response.data.code === 401) { // 401, token失效 if (response.data && response.data.code === 401) { // 判断返回的code是否为401，代表token失效
clearLoginInfo() clearLoginInfo() // 清除登录信息
router.push({ name: 'login' }) router.push({ name: 'login' }) // 跳转到登录页面
} }
return response return response // 返回响应数据
}, error => { }, error => {
return Promise.reject(error) return Promise.reject(error) // 响应出错时，返回Promise拒绝
}) })
/** /**
* 请求地址处理 * 请求地址处理函数
* @param {*} actionName action方法名称 * @param {*} actionName 接口的名称，拼接成完整的URL
*/ * @returns {string} 拼接后的完整URL
*/
http.adornUrl = (actionName) => { http.adornUrl = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截! // 在开发环境下，如果开启了代理，则请求路径会带上代理前缀
return baseUrl + actionName return baseUrl + actionName // 返回完整的请求URL
} }
/** /**
* get请求参数处理 * get请求的参数处理
* @param {*} params 参数对象 * @param {*} params 请求的参数对象
* @param {*} openDefultParams 是否开启默认参数? * @param {*} openDefultParams 是否开启默认参数
*/ * @returns {object} 处理后的参数对象
*/
http.adornParams = (params = {}, openDefultParams = true) => { http.adornParams = (params = {}, openDefultParams = true) => {
var defaults = { const defaults = {
't': new Date().getTime() 't': new Date().getTime() // 添加时间戳参数，防止缓存
} }
return openDefultParams ? merge(defaults, params) : params return openDefultParams ? merge(defaults, params) : params // 合并默认参数和传入的参数
} }
/** /**
* post请求数据处理 * post请求的数据处理
* @param {*} data 数据对象 * @param {*} data 请求的数据对象
* @param {*} openDefultdata 是否开启默认数据? * @param {*} openDefultdata 是否开启默认数据
* @param {*} contentType 数据格式 * @param {*} contentType 数据格式类型（'json'或'form'）
* json: 'application/json; charset=utf-8' * @returns {string} 处理后的数据
* form: 'application/x-www-form-urlencoded; charset=utf-8' */
*/
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => { http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
var defaults = { const defaults = {
't': new Date().getTime() 't': new Date().getTime() // 添加时间戳参数，防止缓存
} }
data = openDefultdata ? merge(defaults, data) : data data = openDefultdata ? merge(defaults, data) : data // 合并默认数据和传入的数据
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data) // 根据不同的contentType，处理数据格式
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
} }
export default http export default http // 导出axios实例，供其他模块使用

98
src/utils/index.js
Unescape View File

@ -3,56 +3,76 @@ import router from '@/router'
import store from '@/store' import store from '@/store'
/** /**
* 获取uuid * 获取UUID
*/ * 生成一个标准的UUID（例如：xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx）
* 使用随机数和指定格式的规则生成UUID
*/
export function getUUID() { export function getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16) return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
}) })
} }
/** /**
* 是否有权限 * 检查是否有某个权限
* @param {*} key * @param {*} key 权限的标识符
*/ * @returns {boolean} 如果权限列表中包含该权限返回true，否则返回false
*/
export function isAuth(key) { export function isAuth(key) {
return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false // 从 sessionStorage 中获取权限列表，并转换为数组，如果没有权限列表，默认返回空数组
return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
} }
/** /**
* 树形数据转换 * 将平面数据转换为树形数据
* @param {*} data * @param {*} data 原始平面数据
* @param {*} id * @param {*} id 唯一标识符字段，默认为'id'
* @param {*} pid * @param {*} pid 父级标识符字段，默认为'parentId'
*/ * @returns {Array} 转换后的树形数据
*/
export function treeDataTranslate(data, id = 'id', pid = 'parentId') { export function treeDataTranslate(data, id = 'id', pid = 'parentId') {
var res = [] var res = [] // 存储最终的树形结构
var temp = {} var temp = {} // 临时存储每个节点，以便快速查找父节点
for (var i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i] // 将数据转换为临时对象，key为节点的id，值为节点本身
} for (var i = 0; i < data.length; i++) {
for (var k = 0; k < data.length; k++) { temp[data[i][id]] = data[i]
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) { }
if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'] = [] // 遍历数据，根据pid将节点组织成树形结构
} for (var k = 0; k < data.length; k++) {
if (!temp[data[k][pid]]['_level']) { // 如果节点的父节点存在，并且当前节点的id不等于父节点的id
temp[data[k][pid]]['_level'] = 1 if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
} // 如果父节点没有'children'属性，则初始化为数组
data[k]['_level'] = temp[data[k][pid]]._level + 1 if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'].push(data[k]) temp[data[k][pid]]['children'] = []
} else { }
res.push(data[k]) // 如果父节点没有'_level'属性，则设置为1
} if (!temp[data[k][pid]]['_level']) {
} temp[data[k][pid]]['_level'] = 1
return res }
// 当前节点的级别为父节点的级别+1
data[k]['_level'] = temp[data[k][pid]]._level + 1
// 将当前节点推送到父节点的children数组中
temp[data[k][pid]]['children'].push(data[k])
} else {
// 如果当前节点是根节点，直接推送到结果数组中
res.push(data[k])
}
}
return res // 返回转换后的树形数据
} }
/** /**
* 清除登录信息 * 清除登录信息
*/ * 用于用户退出时，清理本地存储的登录信息
*/
export function clearLoginInfo() { export function clearLoginInfo() {
Vue.cookie.delete('token') // 删除cookie中的'token'
//store.commit('resetStore') Vue.cookie.delete('token')
router.options.isAddDynamicMenuRoutes = false // 目前注释掉了重置store的操作，若需要可以解除注释
// store.commit('resetStore')
// 重置动态菜单路由标志
router.options.isAddDynamicMenuRoutes = false
} }

57
src/utils/validate.js
Unescape View File

@ -1,31 +1,36 @@
/** /**
* 邮箱 * 验证邮箱格式
* @param {*} s * @param {*} s - 需要验证的邮箱地址
*/ * @returns {boolean} - 返回是否是有效的邮箱地址
*/
export function isEmail(s) { export function isEmail(s) {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
} }
/** /**
* 手机号码 * 验证手机号码格式（中国手机号）
* @param {*} s * @param {*} s - 需要验证的手机号
*/ * @returns {boolean} - 返回是否是有效的手机号码
export function isMobile(s) { */
export function isMobile(s) {
return /^1[0-9]{10}$/.test(s) return /^1[0-9]{10}$/.test(s)
} }
/** /**
* 电话号码 * 验证固定电话号码格式
* @param {*} s * @param {*} s - 需要验证的电话号码
*/ * @returns {boolean} - 返回是否是有效的电话号码（包括区号和本地号码）
export function isPhone(s) { */
export function isPhone(s) {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s) return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
} }
/** /**
* URL地址 * 验证URL地址格式
* @param {*} s * @param {*} s - 需要验证的URL地址
*/ * @returns {boolean} - 返回是否是有效的URL地址（包括http或https协议）
export function isURL(s) { */
export function isURL(s) {
return /^http[s]?:\/\/.*/.test(s) return /^http[s]?:\/\/.*/.test(s)
} }

108
src/views/common/404.vue
Unescape View File

@ -1,61 +1,81 @@
<template> <template>
<!-- 404 错误页面的模板 -->
<div class="site-wrapper site-page--not-found"> <div class="site-wrapper site-page--not-found">
<div class="site-content__wrapper"> <div class="site-content__wrapper">
<div class="site-content"> <div class="site-content">
<h2 class="not-found-title">400</h2> <!-- 错误代码 -->
<p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p> <h2 class="not-found-title">400</h2>
<el-button @click="$router.go(-1)">返回上一页</el-button> <!-- 错误描述 -->
<el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">进入首页</el-button> <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p >
</div> <!-- 返回上一页按钮 -->
</div> <el-button @click="$router.go(-1)">返回上一页</el-button>
<!-- 返回首页按钮 -->
<el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">进入首页</el-button>
</div> </div>
</template> </div>
</div>
<script> </template>
export default {
} <script>
</script> export default {
// 这里可以添加相关的 JavaScript 逻辑
<style lang="scss"> }
.site-wrapper.site-page--not-found { </script>
position: absolute;
<style lang="scss">
/* 整个404页面的外部容器 */
.site-wrapper.site-page--not-found {
position: absolute; /* 定位到页面的绝对位置 */
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: hidden; overflow: hidden; /* 防止内容溢出 */
/* 内容包裹层 */
.site-content__wrapper { .site-content__wrapper {
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #fff; background-color: #fff; /* 设置背景色为白色 */
} }
/* 页面内容容器 */
.site-content { .site-content {
position: fixed; position: fixed; /* 固定位置 */
top: 15%; top: 15%; /* 距离顶部15% */
left: 50%; left: 50%; /* 距离左边50% */
z-index: 2; z-index: 2; /* 确保内容在其他元素之上 */
padding: 30px; padding: 30px;
text-align: center; text-align: center; /* 内容居中 */
transform: translate(-50%, 0); transform: translate(-50%, 0); /* 将内容水平居中 */
} }
/* 错误标题 */
.not-found-title { .not-found-title {
margin: 20px 0 15px; margin: 20px 0 15px;
font-size: 10em; font-size: 10em; /* 大字体 */
font-weight: 400; font-weight: 400;
color: rgb(55, 71, 79); color: rgb(55, 71, 79); /* 文字颜色 */
} }
/* 错误描述 */
.not-found-desc { .not-found-desc {
margin: 0 0 30px; margin: 0 0 30px;
font-size: 26px; font-size: 26px;
text-transform: uppercase; text-transform: uppercase; /* 将文本转换为大写 */
color: rgb(118, 131, 143); color: rgb(118, 131, 143); /* 文字颜色 */
> em {
font-style: normal; /* 强调标签 <em> 样式 */
color: #ee8145; > em {
} font-style: normal;
color: #ee8145; /* 设置颜色 */
} }
}
/* 返回首页按钮的左边距 */
.not-found-btn-gohome { .not-found-btn-gohome {
margin-left: 30px; margin-left: 30px;
}
} }
} </style>
</style>

20
src/views/common/home.vue
Unescape View File

@ -1,12 +1,18 @@
<template> <template>
<!-- 模块容器 div -->
<div class="mod-home"> <div class="mod-home">
<h3>欢迎使用微信管理系统</h3> <!-- 欢迎标题 -->
<h3>欢迎使用微信管理系统</h3>
</div> </div>
</template> </template>
<style>
.mod-home { <style>
/* 样式部分 */
.mod-home {
/* 设置行高，增加文本的可读性 */
line-height: 2.5; line-height: 2.5;
/* 使文本水平居中对齐 */
text-align: center; text-align: center;
} }
</style> </style>

382
src/views/common/login.vue
Unescape View File

@ -1,184 +1,220 @@
<template> <template>
<div class="site-wrapper site-page--login"> <div class="site-wrapper site-page--login">
<div class="site-content__wrapper"> <!-- 页面容器，背景层 -->
<div class="site-content"> <div class="site-content__wrapper">
<div class="brand-info"> <!-- 页面内容容器 -->
<h2 class="brand-info__text">微信后台管理系统</h2> <div class="site-content">
<p class="brand-info__intro">微信公众号后台管理系统。</p> <!-- 品牌信息部分 -->
</div> <div class="brand-info">
<div class="login-main"> <h2 class="brand-info__text">微信后台管理系统</h2>
<h3 class="login-title">管理员登录</h3> <p class="brand-info__intro">微信公众号后台管理系统。</p >
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
<el-form-item prop="userName">
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha" placeholder="验证码">
</el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()" alt="">
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div> </div>
</template>
<!-- 登录表单 -->
<div class="login-main">
<h3 class="login-title">管理员登录</h3>
<!-- 表单，绑定了 model 和 validation 规则 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
<!-- 用户名输入框 -->
<el-form-item prop="userName">
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
</el-form-item>
<!-- 密码输入框 -->
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
</el-form-item>
<!-- 验证码输入框 -->
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<!-- 验证码图片，点击刷新验证码 -->
< img :src="captchaPath" @click="getCaptcha()" alt="">
</el-col>
</el-row>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item>
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</template>
<script> <script>
import { getUUID } from '@/utils' import { getUUID } from '@/utils' // 引入工具函数获取UUID
export default { export default {
data() { data() {
return { return {
dataForm: { // 存储表单数据
userName: '', dataForm: {
password: '', userName: '', // 用户名
uuid: '', password: '', // 密码
captcha: '' uuid: '', // UUID，用于生成验证码
}, captcha: '' // 验证码
dataRule: { },
userName: [ // 表单验证规则
{ required: true, message: '帐号不能为空', trigger: 'blur' } dataRule: {
], userName: [
password: [ { required: true, message: '帐号不能为空', trigger: 'blur' }
{ required: true, message: '密码不能为空', trigger: 'blur' } ],
], password: [
captcha: [ { required: true, message: '密码不能为空', trigger: 'blur' }
{ required: true, message: '验证码不能为空', trigger: 'blur' } ],
] captcha: [
}, { required: true, message: '验证码不能为空', trigger: 'blur' }
captchaPath: '' ]
} },
}, captchaPath: '' // 存储验证码的图片路径
created() { }
this.getCaptcha() },
}, created() {
methods: { // 在组件创建时获取验证码
// 提交表单 this.getCaptcha()
dataFormSubmit() { },
this.$refs['dataForm'].validate((valid) => { methods: {
if (valid) { // 提交表单
this.$http({ dataFormSubmit() {
url: this.$http.adornUrl('/sys/login'), // 验证表单是否有效
method: 'post', this.$refs['dataForm'].validate((valid) => {
data: this.$http.adornData({ if (valid) {
'username': this.dataForm.userName, // 如果表单验证通过，发送登录请求
'password': this.dataForm.password, this.$http({
'uuid': this.dataForm.uuid, url: this.$http.adornUrl('/sys/login'), // 登录接口路径
'captcha': this.dataForm.captcha method: 'post',
}) data: this.$http.adornData({
}).then(({ data }) => { 'username': this.dataForm.userName,
if (data && data.code === 200) { 'password': this.dataForm.password,
this.$cookie.set('token', data.token) 'uuid': this.dataForm.uuid,
this.$router.replace({ name: 'home' }) 'captcha': this.dataForm.captcha
} else { })
this.getCaptcha() }).then(({ data }) => {
this.$message.error(data.msg) if (data && data.code === 200) {
} // 如果登录成功，存储 token 并跳转到主页
}) this.$cookie.set('token', data.token)
} this.$router.replace({ name: 'home' })
}) } else {
}, // 如果登录失败，重新获取验证码并显示错误消息
// 获取验证码 this.getCaptcha()
getCaptcha() { this.$message.error(data.msg)
this.dataForm.uuid = getUUID() }
this.captchaPath = this.$http.adornUrl(`/captcha?uuid=${this.dataForm.uuid}`) })
} }
} })
},
// 获取验证码，生成新的 UUID
getCaptcha() {
this.dataForm.uuid = getUUID() // 获取新的 UUID
// 更新验证码的路径
this.captchaPath = this.$http.adornUrl(`/captcha?uuid=${this.dataForm.uuid}`)
}
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.site-wrapper.site-page--login { .site-wrapper.site-page--login {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(38, 50, 56, 0.5); background-color: rgba(38, 50, 56, 0.5); /* 半透明背景 */
overflow: hidden; overflow: hidden;
&:before {
position: fixed; /* 页面背景渐变效果 */
top: 0; &:before {
left: 0; position: fixed;
z-index: -1; top: 0;
width: 100%; left: 0;
height: 100%; z-index: -1; /* 确保背景层在最底层 */
content: ""; width: 100%;
background-color: #fa8bff; height: 100%;
background-image: linear-gradient( content: "";
45deg, background-color: #fa8bff;
#fa8bff 0%, background-image: linear-gradient(
#2bd2ff 52%, 45deg,
#2bff88 90% #fa8bff 0%,
); #2bd2ff 52%,
background-size: cover; #2bff88 90%
} );
.site-content__wrapper { background-size: cover;
position: absolute; }
top: 0;
right: 0; .site-content__wrapper {
bottom: 0; position: absolute;
left: 0; top: 0;
padding: 0; right: 0;
margin: 0; bottom: 0;
overflow-x: hidden; left: 0;
overflow-y: auto; padding: 0;
background-color: transparent; margin: 0;
} overflow-x: hidden;
.site-content { overflow-y: auto;
min-height: 100%; background-color: transparent;
padding: 30px 500px 30px 30px; }
}
.brand-info { .site-content {
margin: 220px 100px 0 90px; min-height: 100%;
color: #fff; padding: 30px 500px 30px 30px;
} }
.brand-info__text {
margin: 0 0 22px 0; /* 品牌信息样式 */
font-size: 48px; .brand-info {
font-weight: 400; margin: 220px 100px 0 90px;
text-transform: uppercase; color: #fff;
} }
.brand-info__intro {
margin: 10px 0; .brand-info__text {
font-size: 16px; margin: 0 0 22px 0;
line-height: 1.58; font-size: 48px;
opacity: 0.6; font-weight: 400;
} text-transform: uppercase;
.login-main { }
position: absolute;
top: 0; .brand-info__intro {
right: 0; margin: 10px 0;
padding: 150px 60px 180px; font-size: 16px;
width: 470px; line-height: 1.58;
min-height: 100%; opacity: 0.6;
background-color: #fff; }
}
.login-title { /* 登录表单样式 */
font-size: 16px; .login-main {
} position: absolute;
.login-captcha { top: 0;
overflow: hidden; right: 0;
> img { padding: 150px 60px 180px;
width: 100%; width: 470px;
cursor: pointer; min-height: 100%;
} background-color: #fff;
} }
.login-btn-submit {
width: 100%; .login-title {
margin-top: 38px; font-size: 16px;
} }
/* 验证码图片样式 */
.login-captcha {
overflow: hidden;
> img {
width: 100%;
cursor: pointer; /* 鼠标指针变成手形，表示可以点击 */
}
}
/* 登录按钮样式 */
.login-btn-submit {
width: 100%;
margin-top: 38px;
}
} }
</style> </style>

72
src/views/common/theme.vue
Unescape View File

@ -1,33 +1,53 @@
<template> <template>
<el-form> <el-form>
<h2>布局设置</h2> <!-- 布局设置表单标题 -->
<el-form-item label="导航条类型"> <h2>布局设置</h2>
<el-radio-group v-model="navbarLayoutType">
<el-radio label="default" border>default</el-radio> <!-- 导航条类型设置项 -->
<el-radio label="inverse" border>inverse</el-radio> <el-form-item label="导航条类型">
</el-radio-group> <!-- 导航条类型选择框，使用 radio 按钮选择 'default' 或 'inverse' -->
</el-form-item> <el-radio-group v-model="navbarLayoutType">
<el-form-item label="侧边栏皮肤"> <el-radio label="default" border>default</el-radio>
<el-radio-group v-model="sidebarLayoutSkin"> <el-radio label="inverse" border>inverse</el-radio>
<el-radio label="light" border>light</el-radio> </el-radio-group>
<el-radio label="dark" border>dark</el-radio> </el-form-item>
</el-radio-group>
</el-form-item> <!-- 侧边栏皮肤设置项 -->
<el-form-item label="侧边栏皮肤">
<!-- 侧边栏皮肤选择框，使用 radio 按钮选择 'light' 或 'dark' -->
<el-radio-group v-model="sidebarLayoutSkin">
<el-radio label="light" border>light</el-radio>
<el-radio label="dark" border>dark</el-radio>
</el-radio-group>
</el-form-item>
</el-form> </el-form>
</template> </template>
<script> <script>
export default { export default {
computed: { computed: {
navbarLayoutType: { // 计算属性：获取并设置导航条类型
get() { return this.$store.state.common.navbarLayoutType }, navbarLayoutType: {
set(val) { this.$store.commit('common/updateNavbarLayoutType', val) } // getter：从 Vuex 中获取 navbarLayoutType 的当前值
}, get() {
sidebarLayoutSkin: { return this.$store.state.common.navbarLayoutType
get() { return this.$store.state.common.sidebarLayoutSkin }, },
set(val) { this.$store.commit('common/updateSidebarLayoutSkin', val) } // setter：将新的值提交到 Vuex 中，更新 navbarLayoutType
} set(val) {
} this.$store.commit('common/updateNavbarLayoutType', val)
}
},
// 计算属性：获取并设置侧边栏皮肤
sidebarLayoutSkin: {
// getter：从 Vuex 中获取 sidebarLayoutSkin 的当前值
get() {
return this.$store.state.common.sidebarLayoutSkin
},
// setter：将新的值提交到 Vuex 中，更新 sidebarLayoutSkin
set(val) {
this.$store.commit('common/updateSidebarLayoutSkin', val)
}
}
}
} }
</script> </script>

263
src/views/modules/oss/oss-config.vue
Unescape View File

@ -1,127 +1,150 @@
<template> <template>
<!-- Dialog弹框，用于配置云存储 -->
<el-dialog title="云存储配置" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog title="云存储配置" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
<el-form-item size="mini" label="存储类型"> <!-- 表单组件，model 绑定 dataForm，rules 绑定 dataRule -->
<el-radio-group v-model="dataForm.type"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
<el-radio :label="1">七牛</el-radio>
<el-radio :label="2">阿里云</el-radio> <!-- 存储类型选择项 -->
<el-radio :label="3">腾讯云</el-radio> <el-form-item size="mini" label="存储类型">
</el-radio-group> <el-radio-group v-model="dataForm.type">
</el-form-item> <el-radio :label="1">七牛</el-radio>
<template v-if="dataForm.type === 1"> <el-radio :label="2">阿里云</el-radio>
<el-form-item label="域名"> <el-radio :label="3">腾讯云</el-radio>
<el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="路径前缀">
<el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input> <!-- 当选择七牛云时显示七牛相关配置项 -->
</el-form-item> <template v-if="dataForm.type === 1">
<el-form-item label="AccessKey"> <el-form-item label="域名">
<el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input> <el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="SecretKey"> <el-form-item label="路径前缀">
<el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input> <el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="空间名"> <el-form-item label="AccessKey">
<el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input> <el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input>
</el-form-item> </el-form-item>
</template> <el-form-item label="SecretKey">
<template v-else-if="dataForm.type === 2"> <el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input>
<el-form-item label="域名"> </el-form-item>
<el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名"></el-input> <el-form-item label="空间名">
</el-form-item> <el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input>
<el-form-item label="路径前缀"> </el-form-item>
<el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input> </template>
</el-form-item>
<el-form-item label="EndPoint"> <!-- 当选择阿里云时显示阿里云相关配置项 -->
<el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input> <template v-else-if="dataForm.type === 2">
</el-form-item> <el-form-item label="域名">
<el-form-item label="AccessKeyId"> <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名"></el-input>
<el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input> </el-form-item>
</el-form-item> <el-form-item label="路径前缀">
<el-form-item label="AccessKeySecret"> <el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
<el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input> </el-form-item>
</el-form-item> <el-form-item label="EndPoint">
<el-form-item label="BucketName"> <el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
<el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input> </el-form-item>
</el-form-item> <el-form-item label="AccessKeyId">
</template> <el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
<template v-else-if="dataForm.type === 3"> </el-form-item>
<el-form-item label="域名"> <el-form-item label="AccessKeySecret">
<el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input> <el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="路径前缀"> <el-form-item label="BucketName">
<el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input> <el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="AppId"> </template>
<el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
</el-form-item> <!-- 当选择腾讯云时显示腾讯云相关配置项 -->
<el-form-item label="SecretId"> <template v-else-if="dataForm.type === 3">
<el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input> <el-form-item label="域名">
</el-form-item> <el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input>
<el-form-item label="SecretKey"> </el-form-item>
<el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input> <el-form-item label="路径前缀">
</el-form-item> <el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input>
<el-form-item label="BucketName"> </el-form-item>
<el-input v-model="dataForm.qcloudBucketName" placeholder="腾讯云BucketName"></el-input> <el-form-item label="AppId">
</el-form-item> <el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
<el-form-item label="Bucket所属地区"> </el-form-item>
<el-input v-model="dataForm.qcloudRegion" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）"></el-input> <el-form-item label="SecretId">
</el-form-item> <el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input>
</template> </el-form-item>
</el-form> <el-form-item label="SecretKey">
<span slot="footer" class="dialog-footer"> <el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input>
<el-button @click="visible = false">取消</el-button> </el-form-item>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-form-item label="BucketName">
</span> <el-input v-model="dataForm.qcloudBucketName" placeholder="腾讯云BucketName"></el-input>
</el-form-item>
<el-form-item label="Bucket所属地区">
<el-input v-model="dataForm.qcloudRegion" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）"></el-input>
</el-form-item>
</template>
</el-form>
<!-- 弹窗底部按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
export default { export default {
data() { // 定义组件的数据
return { data() {
visible: false, return {
dataForm: {}, // 控制弹框显示/隐藏
dataRule: {} visible: false,
} // 存储表单数据
}, dataForm: {},
methods: { // 存储表单验证规则
init(id) { dataRule: {}
this.visible = true }
this.$http({ },
url: this.$http.adornUrl('/sys/oss/config'), methods: {
method: 'get', // 初始化方法，用于根据 id 获取配置
params: this.$http.adornParams() init(id) {
}).then(({ data }) => { this.visible = true // 显示弹框
this.dataForm = data && data.code === 200 ? data.config : [] // 发送请求获取存储配置
}) this.$http({
}, url: this.$http.adornUrl('/sys/oss/config'), // 请求路径
// 表单提交 method: 'get', // GET 请求
dataFormSubmit() { params: this.$http.adornParams() // 参数
this.$refs['dataForm'].validate((valid) => { }).then(({ data }) => {
if (valid) { // 如果获取成功，则填充表单数据
this.$http({ this.dataForm = data && data.code === 200 ? data.config : []
url: this.$http.adornUrl('/sys/oss/saveConfig'), })
method: 'post', },
data: this.$http.adornData(this.dataForm) // 表单提交方法
}).then(({ data }) => { dataFormSubmit() {
if (data && data.code === 200) { // 验证表单是否有效
this.$message({ this.$refs['dataForm'].validate((valid) => {
message: '操作成功', if (valid) {
type: 'success', // 提交表单数据
duration: 1500, this.$http({
onClose: () => { url: this.$http.adornUrl('/sys/oss/saveConfig'), // 请求保存配置
this.visible = false method: 'post', // POST 请求
} data: this.$http.adornData(this.dataForm) // 提交表单数据
}) }).then(({ data }) => {
} else { if (data && data.code === 200) {
this.$message.error(data.msg) // 如果操作成功，显示成功提示并关闭弹框
} this.$message({
}) message: '操作成功',
} type: 'success',
}) duration: 1500,
} onClose: () => {
} this.visible = false // 关闭弹框
}
})
} else {
// 显示错误信息
this.$message.error(data.msg)
}
})
}
})
}
}
} }
</script> </script>

184
src/views/modules/oss/oss-uploader-tencent.vue
Unescape View File

@ -1,87 +1,105 @@
<template> <template>
<div @click="selectFile"> <!-- 触发文件选择的区域，点击时触发 selectFile 方法 -->
<input type="file" ref="fileInput" v-show="false" @change="onFileChange" /> <div @click="selectFile">
<div>{{uploading?infoText:'上传文件'}}</div> <!-- 隐藏的文件输入框，通过 click 触发文件选择 -->
</div> <input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
</template> <!-- 显示上传状态文本，如果正在上传则显示 infoText，否则显示 "上传文件" -->
<div>{{uploading ? infoText : '上传文件'}}</div>
<script> </div>
// 腾讯云对象存储组件，文件直接上传到腾讯云，可在后端服务无对应外网权限时使用 </template>
// 使用本组件需引入腾讯云对象存储依赖 <script src="https://unpkg.com/cos-js-sdk-v5@0.5.23/dist/cos-js-sdk-v5.min.js" async></script>
<script>
// 腾讯云对象存储组件，允许文件直接上传到腾讯云，适合后端没有外网权限时使用
// 使用本组件时需引入腾讯云对象存储 SDK，具体请参考：https://unpkg.com/cos-js-sdk-v5@0.5.23/dist/cos-js-sdk-v5.min.js
var cos; var cos;
export default { export default {
name: "oss-uploader", name: "oss-uploader", // 组件名称
data() { data() {
return { return {
uploading: false, uploading: false, // 上传状态，默认未上传
infoText:"上传中...", infoText: "上传中...", // 上传中显示的提示文本
cosConfig:[] cosConfig: [] // 腾讯云 COS 配置数据
}
},
mounted(){
this.$http({
url: this.$http.adornUrl('/sys/oss/config'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if(data && data.code === 200){
this.cosConfig = data.config
cos=new COS({
SecretId: data.config.qcloudSecretId,
SecretKey: data.config.qcloudSecretKey,
});
}else{
this.$message.error('请先配置云存储相关信息！')
}
})
},
methods: {
selectFile() {//选择文件
if (!this.uploading) {
this.$refs.fileInput.click();
}
},
onFileChange() {
let file = this.$refs.fileInput.files[0];
this.uploading = true;
let now = new Date();
let path=now.toISOString().slice(0,10)+'/'+now.getTime()+file.name.substr(file.name.lastIndexOf('.'))
cos.putObject({
Bucket: this.cosConfig.qcloudBucketName, /* 必须 */
Region: this.cosConfig.qcloudRegion, /* 必须 */
Key: path, /* 必须 */
Body: file, // 上传文件对象
onProgress: (progressData)=> {
this.infoText='上传中：'+progressData.percent*100+'%'
}
}, (err, data)=> {
console.log(err || data);
this.uploading = false;
if(data){
this.infoText='上传文件'
let fileUrl='https://'+this.cosConfig.qcloudBucketName+'.cos.'+this.cosConfig.qcloudRegion+'.myqcloud.com/'+path;
this.saveUploadResult(fileUrl)
}else {
this.$message.error('文件上传失败',err)
}
});
},
saveUploadResult(url){
this.$http({
url: this.$http.adornUrl('/sys/oss/upload'),
method: 'post',
data:{
url:url
}
}).then(({data})=>{
this.$emit('uploaded', url)
})
}
}
} }
</script> },
mounted() {
<style scoped> // 组件加载完毕后，发起请求获取 COS 配置数据
</style> this.$http({
url: this.$http.adornUrl('/sys/oss/config'),
method: 'get',
params: this.$http.adornParams() // 传递请求参数
}).then(({ data }) => {
if (data && data.code === 200) {
// 如果获取成功，保存配置数据
this.cosConfig = data.config;
// 初始化腾讯云 COS 实例
cos = new COS({
SecretId: data.config.qcloudSecretId,
SecretKey: data.config.qcloudSecretKey,
});
} else {
// 配置获取失败，提示错误信息
this.$message.error('请先配置云存储相关信息！');
}
})
},
methods: {
// 选择文件的方法
selectFile() {
// 如果当前没有文件正在上传，点击触发文件选择框
if (!this.uploading) {
this.$refs.fileInput.click();
}
},
// 文件选择后触发的回调方法
onFileChange() {
let file = this.$refs.fileInput.files[0]; // 获取选中的文件
this.uploading = true; // 设置上传状态为 true
let now = new Date();
// 生成上传文件的存储路径（包括日期和时间戳确保路径唯一）
let path = now.toISOString().slice(0, 10) + '/' + now.getTime() + file.name.substr(file.name.lastIndexOf('.'));
// 调用腾讯云 COS 上传文件方法
cos.putObject({
Bucket: this.cosConfig.qcloudBucketName, // 必须指定的桶名称
Region: this.cosConfig.qcloudRegion, // 必须指定的区域
Key: path, // 文件存储路径（文件名）
Body: file, // 上传的文件对象
onProgress: (progressData) => { // 上传进度回调
// 更新上传进度提示文本
this.infoText = '上传中：' + (progressData.percent * 100).toFixed(2) + '%';
}
}, (err, data) => {
// 上传完成后回调，处理成功和失败的情况
console.log(err || data);
this.uploading = false; // 上传状态恢复为 false
if (data) {
// 上传成功，更新提示文本
this.infoText = '上传文件';
// 生成文件访问的 URL
let fileUrl = 'https://' + this.cosConfig.qcloudBucketName + '.cos.' + this.cosConfig.qcloudRegion + '.myqcloud.com/' + path;
this.saveUploadResult(fileUrl); // 保存上传结果
} else {
// 上传失败，显示错误消息
this.$message.error('文件上传失败', err);
}
});
},
// 保存上传结果（上传成功后调用，传入文件的访问 URL）
saveUploadResult(url) {
this.$http({
url: this.$http.adornUrl('/sys/oss/upload'),
method: 'post',
data: { url: url } // 将上传的文件 URL 传给服务器
}).then(({ data }) => {
// 上传成功后，触发 `uploaded` 事件，将文件 URL 传递给父组件
this.$emit('uploaded', url);
})
}
}
}
</script>
<style scoped>
/* 样式部分为空 */
</style>

114
src/views/modules/oss/oss-uploader.vue
Unescape View File

@ -1,59 +1,73 @@
<template> <template>
<!-- 点击外部div触发文件选择操作 -->
<div @click="selectFile"> <div @click="selectFile">
<input type="file" ref="fileInput" v-show="false" @change="onFileChange" /> <!-- 隐藏的文件上传input，选择文件后触发onFileChange方法 -->
<div>{{uploading?infoText:'上传文件'}}</div> <input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
<!-- 显示上传中的状态或默认的“上传文件”文本 -->
<div>{{uploading ? infoText : '上传文件'}}</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "oss-uploader", name: "oss-uploader", // 组件名称为 "oss-uploader"
data() { data() {
return { return {
uploading: false, uploading: false, // 上传状态，默认为false
infoText: "上传中...", infoText: "上传中...", // 上传中文本，上传中时显示此文本
cosConfig: [] cosConfig: [] // 存储云存储配置
} }
}, },
mounted() { mounted() {
this.$http({ // 组件挂载后请求获取云存储的配置
url: this.$http.adornUrl('/sys/oss/config'), this.$http({
method: 'get', url: this.$http.adornUrl('/sys/oss/config'), // 获取配置的API接口
params: this.$http.adornParams() method: 'get', // 使用GET请求
}).then(({ data }) => { params: this.$http.adornParams() // 请求参数
if (data && data.code === 200 && data.config.type) { }).then(({ data }) => {
this.cosConfig = data.config // 请求成功后处理返回数据
} else { if (data && data.code === 200 && data.config.type) {
this.$message.error('请先配置云存储相关信息！') this.cosConfig = data.config // 设置云存储配置
} } else {
// 如果配置不存在，弹出错误提示
}) this.$message.error('请先配置云存储相关信息！')
}
})
}, },
methods: { methods: {
selectFile() {//选择文件 // 选择文件的事件处理函数
if (!this.uploading) { selectFile() {
this.$refs.fileInput.click(); if (!this.uploading) {
} // 如果当前不是上传中状态，则模拟点击隐藏的input元素，打开文件选择框
}, this.$refs.fileInput.click();
onFileChange() { }
let file = this.$refs.fileInput.files[0]; },
this.uploading = true; // 文件选择后触发的事件处理函数
let formData = new FormData(); onFileChange() {
formData.append("file", file) let file = this.$refs.fileInput.files[0]; // 获取文件对象
this.$http({ this.uploading = true; // 设置上传状态为true，表示正在上传
url: this.$http.adornUrl('/sys/oss/upload'), let formData = new FormData();
method: 'post', formData.append("file", file); // 将文件添加到formData对象中
data: formData
}).then(({ data }) => { // 发起POST请求上传文件
console.log(data) this.$http({
if (data && data.code === 200) { url: this.$http.adornUrl('/sys/oss/upload'), // 上传文件的API接口
this.$emit('uploaded', data.url) method: 'post', // 使用POST请求
} else { data: formData // 上传的文件数据
this.$message.error("文件上传失败：" + data.msg) }).then(({ data }) => {
} // 请求成功后处理返回的数据
this.uploading = false; console.log(data); // 输出返回的数据，便于调试
}) if (data && data.code === 200) {
} // 上传成功，触发父组件的'uploaded'事件，传递上传后的文件url
this.$emit('uploaded', data.url)
} else {
// 上传失败，弹出错误提示，显示错误信息
this.$message.error("文件上传失败：" + data.msg)
}
this.uploading = false; // 上传完成，设置上传状态为false
})
}
}
} }
} </script>
</script>

177
src/views/modules/oss/oss.vue
Unescape View File

@ -39,108 +39,79 @@
<script> <script>
export default { export default {
data() { data() {
return { return {
dataForm: {}, // 表单数据模型
dataList: [], dataForm: {},
pageIndex: 1, // 文件列表数据
pageSize: 10, dataList: [],
totalCount: 0, // 当前页码
dataListLoading: false, pageIndex: 1,
dataListSelections: [], // 每页显示数量
configVisible: false, pageSize: 10,
uploadVisible: false // 总记录数
} totalCount: 0,
}, // 表格加载状态
components: { dataListLoading: false,
Config: () => import('./oss-config'), // 存储已选中项
OssUploader: () => import('./oss-uploader') dataListSelections: [],
}, // 云存储配置弹窗是否显示
activated() { configVisible: false,
this.getDataList() // 上传文件弹窗是否显示
}, uploadVisible: false
methods: { }
// 获取数据列表 },
getDataList() { components: {
this.dataListLoading = true // 动态引入云存储配置组件
this.$http({ Config: () => import('./oss-config'),
url: this.$http.adornUrl('/sys/oss/list'), // 动态引入文件上传组件
method: 'get', OssUploader: () => import('./oss-uploader')
params: this.$http.adornParams({ },
'page': this.pageIndex, // 组件激活时加载数据列表
'limit': this.pageSize, activated() {
'sidx': 'id', this.getDataList();
'order': 'desc' },
}) methods: {
}).then(({ data }) => { // 获取数据列表
if (data && data.code === 200) { getDataList() {
this.dataList = data.page.list this.dataListLoading = true;
this.totalCount = data.page.totalCount this.$http({
} else { url: this.$http.adornUrl('/sys/oss/list'),
this.dataList = [] method: 'get',
this.totalCount = 0 params: this.$http.adornParams({
} 'page': this.pageIndex, // 当前页
this.dataListLoading = false 'limit': this.pageSize, // 每页条数
}) 'sidx': 'id', // 排序字段
}, 'order': 'desc' // 排序方式
// 每页数 })
sizeChangeHandle(val) { }).then(({ data }) => {
this.pageSize = val // 如果请求成功，设置dataList和totalCount
this.pageIndex = 1 if (data && data.code === 200) {
this.getDataList() this.dataList = data.page.list;
}, this.totalCount = data.page.totalCount;
// 当前页 } else {
currentChangeHandle(val) { // 如果请求失败，清空列表
this.pageIndex = val this.dataList = [];
this.getDataList() this.totalCount = 0;
}, }
// 多选 this.dataListLoading = false; // 隐藏加载状态
selectionChangeHandle(val) { });
this.dataListSelections = val },
}, // 改变每页显示的数量时触发
// 云存储配置 sizeChangeHandle(val) {
configHandle() { this.pageSize = val;
this.configVisible = true this.pageIndex = 1; // 重置为第一页
this.$nextTick(() => { this.getDataList(); // 重新获取数据
this.$refs.config.init() },
}) // 改变当前页时触发
}, currentChangeHandle(val) {
// 上传文件 this.pageIndex = val;
uploadHandle() { this.getDataList(); // 重新获取数据
this.uploadVisible = true },
this.$nextTick(() => { // 多选时，记录选中的项
this.$refs.upload.init() selectionChangeHandle(val) {
}) this.dataListSelections = val;
}, },
// 删除 }
deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.id)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/sys/oss/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({ data }) => {
if (data && data.code === 200) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => this.getDataList()
})
} else {
this.$message.error(data.msg)
}
})
}).catch(() => { })
},
isImageUrl(url) {
return url && /.*\.(gif|jpg|jpeg|png|GIF|JPEG|JPG|PNG)/.test(url)
}
}
} }
</script> </script>

197
src/views/modules/sys/config-add-or-update.vue
Unescape View File

@ -1,96 +1,117 @@
<template> <template>
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> <!-- 弹窗组件，显示标题是“新增”或“修改”取决于dataForm.id -->
<el-form-item label="参数名" prop="paramKey"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input> <!-- 表单组件，绑定数据模型为dataForm，表单校验规则为dataRule，按回车键提交表单 -->
</el-form-item>
<el-form-item label="参数值" prop="paramValue"> <el-form-item label="参数名" prop="paramKey">
<el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input> <!-- 参数名输入框，验证参数名 -->
</el-form-item> <el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
<el-form-item label="备注" prop="remark"> </el-form-item>
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</el-form-item> <el-form-item label="参数值" prop="paramValue">
</el-form> <!-- 参数值输入框，验证参数值 -->
<span slot="footer" class="dialog-footer"> <el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
<el-button @click="visible = false">取消</el-button> </el-form-item>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span> <el-form-item label="备注" prop="remark">
</el-dialog> <!-- 备注输入框 -->
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<!-- 弹窗底部按钮 -->
<el-button @click="visible = false">取消</el-button>
<!-- 取消按钮，点击时关闭弹窗 -->
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
<!-- 确定按钮，点击时提交表单 -->
</span>
</el-dialog>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
visible: false, visible: false, // 控制弹窗的显示与隐藏
dataForm: { dataForm: {
id: 0, id: 0, // 数据表单的ID，新增时为0，修改时为已有的ID
paramKey: '', paramKey: '', // 参数名
paramValue: '', paramValue: '',// 参数值
remark: '' remark: '' // 备注
}, },
dataRule: { dataRule: {
paramKey: [ paramKey: [
{ required: true, message: '参数名不能为空', trigger: 'blur' } { required: true, message: '参数名不能为空', trigger: 'blur' }
], ],
paramValue: [ paramValue: [
{ required: true, message: '参数值不能为空', trigger: 'blur' } { required: true, message: '参数值不能为空', trigger: 'blur' }
] ]
} }
} }
}, },
methods: { methods: {
init(id) { // 初始化表单，设置ID并请求数据（如果是编辑状态）
this.dataForm.id = id || 0 init(id) {
this.visible = true this.dataForm.id = id || 0
this.$nextTick(() => { this.visible = true
this.$refs['dataForm'].resetFields() this.$nextTick(() => {
if (this.dataForm.id) { this.$refs['dataForm'].resetFields() // 重置表单字段
this.$http({ if (this.dataForm.id) {
url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`), // 如果是编辑，发送请求获取已有数据
method: 'get', this.$http({
params: this.$http.adornParams() url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
}).then(({ data }) => { method: 'get',
if (data && data.code === 200) { params: this.$http.adornParams()
this.dataForm.paramKey = data.config.paramKey }).then(({ data }) => {
this.dataForm.paramValue = data.config.paramValue if (data && data.code === 200) {
this.dataForm.remark = data.config.remark this.dataForm.paramKey = data.config.paramKey
} this.dataForm.paramValue = data.config.paramValue
}) this.dataForm.remark = data.config.remark
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'paramKey': this.dataForm.paramKey,
'paramValue': this.dataForm.paramValue,
'remark': this.dataForm.remark
})
}).then(({ data }) => {
if (data && data.code === 200) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
} }
})
}
})
},
// 表单提交方法
dataFormSubmit() {
// 验证表单是否合法
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 请求提交数据
this.$http({
url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined, // 如果是编辑，传ID；如果是新增，ID为空
'paramKey': this.dataForm.paramKey,
'paramValue': this.dataForm.paramValue,
'remark': this.dataForm.remark
})
}).then(({ data }) => {
if (data && data.code === 200) {
// 操作成功，显示成功消息并关闭弹窗
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList') // 向父组件发送刷新数据的事件
}
})
} else {
// 显示错误消息
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script> </script>

288
src/views/modules/sys/config.vue
Unescape View File

@ -1,134 +1,172 @@
<template> <template>
<div class="mod-config"> <div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <!-- 表单部分，包含参数名的查询框和操作按钮 -->
<el-form-item> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input> <!-- 表单项，使用 inline 布局，按回车触发查询 -->
</el-form-item> <el-form-item>
<el-form-item> <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
<el-button @click="getDataList()">查询</el-button> <!-- 输入框，绑定 model 为 dataForm.paramKey，允许清除内容 -->
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button> </el-form-item>
<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-form-item>
</el-form-item> <!-- 查询按钮，点击时触发 getDataList 方法 -->
</el-form> <el-button @click="getDataList()">查询</el-button>
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <!-- 新增按钮，点击时触发 addOrUpdateHandle 方法 -->
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-table-column> <!-- 批量删除按钮，点击时触发 deleteHandle 方法，只有当有选中的数据时可用 -->
<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"> <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-table-column> </el-form-item>
<el-table-column prop="paramKey" header-align="center" align="center" label="参数名"> </el-form>
</el-table-column>
<el-table-column prop="paramValue" header-align="center" align="center" label="参数值"> <!-- 表格部分，用于显示数据列表 -->
</el-table-column> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<el-table-column prop="remark" header-align="center" align="center" label="备注"> <!-- 多选列 -->
</el-table-column> <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <!-- ID列 -->
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> <el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template> <!-- 参数名列 -->
</el-table-column> <el-table-column prop="paramKey" header-align="center" align="center" label="参数名"></el-table-column>
</el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"> <!-- 参数值列 -->
</el-pagination> <el-table-column prop="paramValue" header-align="center" align="center" label="参数值"></el-table-column>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <!-- 备注列 -->
</div> <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
<!-- 操作列，包含修改和删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<!-- 修改按钮，点击时触发 addOrUpdateHandle 方法，传入当前行的 id -->
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<!-- 删除按钮，点击时触发 deleteHandle 方法，传入当前行的 id -->
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗组件，用于新增或修改数据 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template> </template>
<script> <script>
import AddOrUpdate from './config-add-or-update' import AddOrUpdate from './config-add-or-update'
export default { export default {
data() { data() {
return { return {
dataForm: { // 表单数据
paramKey: '' dataForm: {
}, paramKey: ''
dataList: [], },
pageIndex: 1, // 数据列表
pageSize: 10, dataList: [],
totalCount: 0, // 当前页
dataListLoading: false, pageIndex: 1,
dataListSelections: [], // 每页显示条数
addOrUpdateVisible: false pageSize: 10,
} // 总数据条数
}, totalCount: 0,
components: { // 数据加载状态
AddOrUpdate dataListLoading: false,
}, // 表格选中的数据
activated() { dataListSelections: [],
this.getDataList() // 新增/修改弹窗是否可见
}, addOrUpdateVisible: false
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/config/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'paramKey': this.dataForm.paramKey
})
}).then(({ data }) => {
if (data && data.code === 200) {
this.dataList = data.page.list
this.totalCount = data.page.totalCount
} else {
this.dataList = []
this.totalCount = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.id)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/sys/config/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({ data }) => {
if (data && data.code === 200) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => this.getDataList()
})
} else {
this.$message.error(data.msg)
}
})
}).catch(() => { })
}
}
} }
},
components: {
AddOrUpdate
},
activated() {
// 组件激活时，初始化数据列表
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/config/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'paramKey': this.dataForm.paramKey
})
}).then(({ data }) => {
if (data && data.code === 200) {
this.dataList = data.page.list
this.totalCount = data.page.totalCount
} else {
this.dataList = []
this.totalCount = 0
}
this.dataListLoading = false
})
},
// 每页显示条数变化时的处理
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页变化时的处理
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 表格选中项变化时的处理
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 新增/修改处理
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
// 弹窗显示时，初始化新增/修改数据
this.$refs.addOrUpdate.init(id)
})
},
// 删除操作
deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.id)
// 弹窗确认删除
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/sys/config/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({ data }) => {
if (data && data.code === 200) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => this.getDataList()
})
} else {
this.$message.error(data.msg)
}
})
}).catch(() => { })
}
}
}
</script> </script>

181
src/views/modules/sys/log.vue
Unescape View File

@ -1,90 +1,107 @@
<template> <template>
<div class="mod-log"> <div class="mod-log">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <!-- 搜索表单部分 -->
<el-form-item> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input> <!-- 输入框，绑定到 dataForm.key，用于搜索用户操作或者用户名 -->
</el-form-item> <el-form-item>
<el-form-item> <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
<el-button @click="getDataList()">查询</el-button> </el-form-item>
</el-form-item> <el-form-item>
</el-form> <!-- 查询按钮，点击时触发 getDataList 方法 -->
<el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%"> <el-button @click="getDataList()">查询</el-button>
<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"> </el-form-item>
</el-table-column> </el-form>
<el-table-column prop="username" header-align="center" align="center" label="用户名">
</el-table-column> <!-- 表格显示数据 -->
<el-table-column prop="operation" header-align="center" align="center" label="用户操作"> <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
</el-table-column> <!-- 表格的列定义 -->
<el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求方法"> <el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
</el-table-column> <el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
<el-table-column prop="params" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求参数"> <el-table-column prop="operation" header-align="center" align="center" label="用户操作"></el-table-column>
</el-table-column> <el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求方法"></el-table-column>
<el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)"> <el-table-column prop="params" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求参数"></el-table-column>
</el-table-column> <el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)"></el-table-column>
<el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址"> <el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址"></el-table-column>
</el-table-column> <el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间"></el-table-column>
<el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间"> </el-table>
</el-table-column>
</el-table> <!-- 分页组件 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
dataForm: { // 表单数据，包含一个搜索条件 'key'
key: '' dataForm: {
}, key: ''
dataList: [], },
pageIndex: 1, // 数据列表，存储表格数据
pageSize: 10, dataList: [],
totalCount: 0, // 当前页
dataListLoading: false, pageIndex: 1,
selectionDataList: [] // 每页显示的数据条数
} pageSize: 10,
}, // 总数据条数
created() { totalCount: 0,
this.getDataList() // 数据加载状态
}, dataListLoading: false,
methods: { // 选中的数据（当前表格中未使用）
// 获取数据列表 selectionDataList: []
getDataList() { }
this.dataListLoading = true },
this.$http({ created() {
url: this.$http.adornUrl('/sys/log/list'), // 组件创建时，获取数据列表
method: 'get', this.getDataList()
params: this.$http.adornParams({ },
'page': this.pageIndex, methods: {
'limit': this.pageSize, // 获取数据列表
'key': this.dataForm.key, getDataList() {
'sidx': 'id', // 启动加载状态
'order': 'desc' this.dataListLoading = true
}) this.$http({
}).then(({ data }) => { url: this.$http.adornUrl('/sys/log/list'), // 请求日志列表接口
if (data && data.code === 200) { method: 'get',
this.dataList = data.page.list params: this.$http.adornParams({
this.totalCount = data.page.totalCount // 请求参数，包含分页、搜索关键字、排序字段、排序方式等
} else { 'page': this.pageIndex,
this.dataList = [] 'limit': this.pageSize,
this.totalCount = 0 'key': this.dataForm.key, // 搜索条件
} 'sidx': 'id', // 排序字段，按照 id 排序
this.dataListLoading = false 'order': 'desc' // 排序方式，降序
}) })
}, }).then(({ data }) => {
// 每页数 // 处理返回的数据
sizeChangeHandle(val) { if (data && data.code === 200) {
this.pageSize = val this.dataList = data.page.list // 数据列表
this.pageIndex = 1 this.totalCount = data.page.totalCount // 总条数
this.getDataList() } else {
}, // 如果返回数据无效，清空数据和总数
// 当前页 this.dataList = []
currentChangeHandle(val) { this.totalCount = 0
this.pageIndex = val }
this.getDataList() // 完成加载
} this.dataListLoading = false
} })
},
// 每页显示条数变化时触发的函数
sizeChangeHandle(val) {
this.pageSize = val // 更新每页显示条数
this.pageIndex = 1 // 重置为第一页
this.getDataList() // 重新获取数据
},
// 当前页变化时触发的函数
currentChangeHandle(val) {
this.pageIndex = val // 更新当前页
this.getDataList() // 重新获取数据
}
} }
}
</script> </script>

437
src/views/modules/sys/menu-add-or-update.vue
Unescape View File

@ -1,218 +1,253 @@
<template> <template>
<!-- 弹窗组件，标题根据dataForm.id判断是新增还是修改 -->
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> <!-- 表单组件，绑定数据模型和验证规则 -->
<el-form-item label="类型" prop="type"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-radio-group v-model="dataForm.type">
<el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio> <!-- 菜单类型选择 -->
</el-radio-group> <el-form-item label="类型" prop="type">
</el-form-item> <el-radio-group v-model="dataForm.type">
<el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name"> <!-- 循环渲染可选择的菜单类型 -->
<el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input> <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
</el-form-item> </el-radio-group>
<el-form-item label="上级菜单" prop="parentName"> </el-form-item>
<el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
<el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" @current-change="menuListTreeCurrentChangeHandle" :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false"> <!-- 菜单名称输入框 -->
</el-tree> <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
</el-popover> <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
<el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input> </el-form-item>
</el-form-item>
<el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url"> <!-- 上级菜单选择 -->
<el-input v-model="dataForm.url" placeholder="菜单路由"></el-input> <el-form-item label="上级菜单" prop="parentName">
</el-form-item> <!-- 弹出菜单树选择 -->
<el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms"> <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
<el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input> <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree"
</el-form-item> @current-change="menuListTreeCurrentChangeHandle" :default-expand-all="true"
:highlight-current="true" :expand-on-click-node="false">
<el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon"> </el-tree>
<el-row> </el-popover>
<el-col :span="12"> <!-- 显示上级菜单选择 -->
<el-input v-model="dataForm.icon" placeholder="菜单图标名称" class="icon-list__input"></el-input> <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true"
</el-col> placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
<el-col :span="12" class="icon-list__tips"> </el-form-item>
<el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
<el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number> <!-- 菜单路由（仅在选择菜单类型时显示） -->
</el-form-item> <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
</el-col> <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
</el-row> </el-form-item>
</el-form-item>
<div>参考ElementUI图标库, <a href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank">找图标</a></div> <!-- 授权标识（仅在类型不为目录时显示） -->
</el-form> <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
<span slot="footer" class="dialog-footer"> <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
<el-button @click="visible = false">取消</el-button> </el-form-item>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span> <!-- 菜单图标（仅在类型不为按钮时显示） -->
<el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
<el-row>
<el-col :span="12">
<el-input v-model="dataForm.icon" placeholder="菜单图标名称" class="icon-list__input"></el-input>
</el-col>
<el-col :span="12" class="icon-list__tips">
<!-- 排序号输入框（仅在类型不为按钮时显示） -->
<el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
<el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<!-- 提示用户参考图标库 -->
<div>参考ElementUI图标库, 找图标</div>
</el-form>
<!-- 弹窗底部按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { treeDataTranslate } from '@/utils' // 引入工具函数，用于处理树形数据
export default { import { treeDataTranslate } from '@/utils'
export default {
data() { data() {
var validateUrl = (rule, value, callback) => { // 验证URL的函数
if (this.dataForm.type === 1 && !/\S/.test(value)) { var validateUrl = (rule, value, callback) => {
callback(new Error('菜单URL不能为空')) // 如果类型是菜单且URL为空，返回错误
} else { if (this.dataForm.type === 1 && !/\S/.test(value)) {
callback() callback(new Error('菜单URL不能为空'))
} } else {
} callback() // 验证通过
return { }
visible: false, }
dataForm: { return {
id: 0, visible: false, // 控制弹窗的显示与隐藏
type: 1, dataForm: {
typeList: ['目录', '菜单', '按钮'], id: 0, // 菜单ID，新增时为0
name: '', type: 1, // 菜单类型（0-目录，1-菜单，2-按钮）
parentId: 0, typeList: ['目录', '菜单', '按钮'], // 菜单类型列表
parentName: '', name: '', // 菜单名称
url: '', parentId: 0, // 上级菜单ID
perms: '', parentName: '', // 上级菜单名称
orderNum: 0, url: '', // 菜单路由
icon: '', perms: '', // 授权标识
}, orderNum: 0, // 排序号
dataRule: { icon: '', // 菜单图标
name: [ },
{ required: true, message: '菜单名称不能为空', trigger: 'blur' } // 表单验证规则
], dataRule: {
parentName: [ name: [
{ required: true, message: '上级菜单不能为空', trigger: 'change' } { required: true, message: '菜单名称不能为空', trigger: 'blur' } // 菜单名称必填
], ],
url: [ parentName: [
{ validator: validateUrl, trigger: 'blur' } { required: true, message: '上级菜单不能为空', trigger: 'change' } // 上级菜单必填
] ],
}, url: [
menuList: [], { validator: validateUrl, trigger: 'blur' } // URL验证
menuListTreeProps: { ]
label: 'name', },
children: 'children' menuList: [], // 菜单列表，供菜单树使用
} menuListTreeProps: {
} label: 'name', // 树节点显示的字段名称
children: 'children' // 树节点的子节点字段
}
}
}, },
methods: { methods: {
init(id) { // 初始化方法，用于新增或修改菜单
this.dataForm.id = id || 0 init(id) {
this.$http({ this.dataForm.id = id || 0 // 设置菜单ID
url: this.$http.adornUrl('/sys/menu/select'), this.$http({
method: 'get', url: this.$http.adornUrl('/sys/menu/select'),
params: this.$http.adornParams() method: 'get',
}).then(({ data }) => { params: this.$http.adornParams()
this.menuList = treeDataTranslate(data.menuList, 'menuId') }).then(({ data }) => {
}).then(() => { // 获取菜单列表并转换为树形结构
this.visible = true this.menuList = treeDataTranslate(data.menuList, 'menuId')
this.$nextTick(() => { }).then(() => {
this.$refs['dataForm'].resetFields() this.visible = true // 显示弹窗
}) this.$nextTick(() => {
}).then(() => { this.$refs['dataForm'].resetFields() // 重置表单字段
if (!this.dataForm.id) { })
// 新增 }).then(() => {
this.menuListTreeSetCurrentNode() if (!this.dataForm.id) {
} else { // 新增时，设置当前选中的上级菜单
// 修改 this.menuListTreeSetCurrentNode()
this.$http({ } else {
url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`), // 修改时，获取原数据
method: 'get', this.$http({
params: this.$http.adornParams() url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
}).then(({ data }) => { method: 'get',
this.dataForm.id = data.menu.menuId params: this.$http.adornParams()
this.dataForm.type = data.menu.type }).then(({ data }) => {
this.dataForm.name = data.menu.name // 设置表单字段为获取到的原数据
this.dataForm.parentId = data.menu.parentId this.dataForm.id = data.menu.menuId
this.dataForm.url = data.menu.url this.dataForm.type = data.menu.type
this.dataForm.perms = data.menu.perms this.dataForm.name = data.menu.name
this.dataForm.orderNum = data.menu.orderNum this.dataForm.parentId = data.menu.parentId
this.dataForm.icon = data.menu.icon this.dataForm.url = data.menu.url
this.menuListTreeSetCurrentNode() this.dataForm.perms = data.menu.perms
}) this.dataForm.orderNum = data.menu.orderNum
} this.dataForm.icon = data.menu.icon
}) this.menuListTreeSetCurrentNode() // 设置当前选中的菜单树节点
}, })
// 菜单树选中 }
menuListTreeCurrentChangeHandle(data, node) { })
this.dataForm.parentId = data.menuId },
this.dataForm.parentName = data.name // 处理菜单树节点选择事件
}, menuListTreeCurrentChangeHandle(data, node) {
// 菜单树设置当前选中节点 this.dataForm.parentId = data.menuId // 更新上级菜单ID
menuListTreeSetCurrentNode() { this.dataForm.parentName = data.name // 更新上级菜单名称
this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId) },
this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name'] // 设置菜单树当前选中节点
}, menuListTreeSetCurrentNode() {
// 表单提交 this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId) // 设置当前选中的树节点
dataFormSubmit() { this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name'] // 更新上级菜单名称
this.$refs['dataForm'].validate((valid) => { },
if (valid) { // 表单提交方法
this.$http({ dataFormSubmit() {
url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`), this.$refs['dataForm'].validate((valid) => {
method: 'post', if (valid) {
data: this.$http.adornData({ // 提交表单数据到后台
'menuId': this.dataForm.id || undefined, this.$http({
'type': this.dataForm.type, url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`),
'name': this.dataForm.name, method: 'post',
'parentId': this.dataForm.parentId, data: this.$http.adornData({
'url': this.dataForm.url, 'menuId': this.dataForm.id || undefined,
'perms': this.dataForm.perms, 'type': this.dataForm.type,
'orderNum': this.dataForm.orderNum, 'name': this.dataForm.name,
'icon': this.dataForm.icon 'parentId': this.dataForm.parentId,
}) 'url': this.dataForm.url,
}).then(({ data }) => { 'perms': this.dataForm.perms,
if (data && data.code === 200) { 'orderNum': this.dataForm.orderNum,
this.$message({ 'icon': this.dataForm.icon
message: '操作成功', })
type: 'success', }).then(({ data }) => {
duration: 1500, if (data && data.code === 200) {
onClose: () => { // 操作成功提示
this.visible = false this.$message({
this.$emit('refreshDataList') message: '操作成功',
} type: 'success',
}) duration: 1500,
} else { onClose: () => {
this.$message.error(data.msg) this.visible = false // 关闭弹窗
} this.$emit('refreshDataList') // 触发数据列表刷新事件
}) }
} })
}) } else {
} // 提示错误信息
} this.$message.error(data.msg)
} }
</script> })
}
<style lang="scss"> })
.mod-menu { }
}
}
</script>
<style lang="scss">
.mod-menu {
.menu-list__input, .menu-list__input,
.icon-list__input { .icon-list__input {
> .el-input__inner { > .el-input__inner {
cursor: pointer; cursor: pointer; // 鼠标悬停时显示为手型
} }
} }
&__icon-popover { &__icon-popover {
width: 458px; width: 458px; // 图标选择器的宽度
overflow: hidden; overflow: hidden; // 超出部分隐藏
} }
&__icon-inner { &__icon-inner {
width: 478px; width: 478px; // 内部图标容器的宽度
max-height: 258px; max-height: 258px; // 最大高度
overflow-x: hidden; overflow-x: hidden; // 水平溢出隐藏
overflow-y: auto; overflow-y: auto; // 垂直溢出滚动
} }
&__icon-list { &__icon-list {
width: 458px; width: 458px; // 图标列表宽度
padding: 0; padding: 0; // 内边距
margin: -8px 0 0 -8px; margin: -8px 0 0 -8px; // 外边距调整
> .el-button { > .el-button {
padding: 8px; padding: 8px; // 按钮内边距
margin: 8px 0 0 8px; margin: 8px 0 0 8px; // 按钮外边距
> span { > span {
display: inline-block; display: inline-block; // 使图标显示为行内块元素
vertical-align: middle; vertical-align: middle; // 垂直居中对齐
width: 18px; width: 18px; // 图标宽度
height: 18px; height: 18px; // 图标高度
font-size: 18px; font-size: 18px; // 图标字体大小
} }
} }
} }
.icon-list__tips { .icon-list__tips {
font-size: 18px; font-size: 18px; // 提示字体大小
text-align: center; text-align: center; // 内容置中
color: #e6a23c; color: #e6a23c; // 提示字体颜色
cursor: pointer; cursor: pointer; // 鼠标悬停时显示为手型
}
} }
} </style>
</style>

235
src/views/modules/sys/menu.vue
Unescape View File

@ -1,109 +1,148 @@
<template> <template>
<!-- 菜单管理模块 -->
<div class="mod-menu"> <div class="mod-menu">
<el-form :inline="true" :model="dataForm"> <!-- 表单组件，内联布局 -->
<el-form-item> <el-form :inline="true" :model="dataForm">
<el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-form-item>
</el-form-item> <!-- 如果有新增权限，显示新增按钮 -->
</el-form> <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item>
<el-table :data="dataList" row-key="menuId" border style="width: 100%; "> </el-form>
<el-table-column prop="name" header-align="center" min-width="150" label="名称">
</el-table-column> <!-- 菜单数据表格 -->
<el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单"> <el-table :data="dataList" row-key="menuId" border style="width: 100%;">
</el-table-column> <!-- 菜单名称列 -->
<el-table-column header-align="center" align="center" label="图标"> <el-table-column prop="name" header-align="center" min-width="150" label="名称">
<template slot-scope="scope"> </el-table-column>
<i :class="scope.row.icon"></i>
</template> <!-- 上级菜单列 -->
</el-table-column> <el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单">
<el-table-column prop="type" header-align="center" align="center" label="类型"> </el-table-column>
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" size="small">目录</el-tag> <!-- 菜单图标列 -->
<el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag> <el-table-column header-align="center" align="center" label="图标">
<el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag> <template slot-scope="scope">
</template> <!-- 根据图标类渲染图标 -->
</el-table-column> <i :class="scope.row.icon"></i>
<el-table-column prop="orderNum" header-align="center" align="center" label="排序号"> </template>
</el-table-column> </el-table-column>
<el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL">
</el-table-column> <!-- 菜单类型列 -->
<el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="授权标识"> <el-table-column prop="type" header-align="center" align="center" label="类型">
</el-table-column> <template slot-scope="scope">
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <!-- 根据菜单类型渲染不同的标签 -->
<template slot-scope="scope"> <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
<el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button> <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
<el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button> <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 --> <!-- 排序号列 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <el-table-column prop="orderNum" header-align="center" align="center" label="排序号">
</el-table-column>
<!-- 菜单URL列，支持溢出提示 -->
<el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL">
</el-table-column>
<!-- 授权标识列，支持溢出提示 -->
<el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="授权标识">
</el-table-column>
<!-- 操作列，显示修改和删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<!-- 如果有修改权限，显示修改按钮 -->
<el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
<!-- 如果有删除权限，显示删除按钮 -->
<el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗组件，用于新增或修改菜单 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
import AddOrUpdate from './menu-add-or-update' // 导入新增/修改组件和工具函数
import { treeDataTranslate } from '@/utils' import AddOrUpdate from './menu-add-or-update'
export default { import { treeDataTranslate } from '@/utils'
export default {
data() { data() {
return { return {
dataForm: {}, dataForm: {}, // 表单数据
dataList: [], dataList: [], // 菜单数据列表
dataListLoading: false, dataListLoading: false, // 数据加载状态
addOrUpdateVisible: false addOrUpdateVisible: false // 弹窗显示控制
} }
}, },
components: { components: {
AddOrUpdate AddOrUpdate // 引入新增/修改组件
}, },
activated() { activated() {
this.getDataList() // 页面激活时获取菜单数据列表
this.getDataList()
}, },
methods: { methods: {
// 获取数据列表 // 获取菜单数据列表
getDataList() { getDataList() {
this.dataListLoading = true this.dataListLoading = true // 开始加载数据
this.$http({ // 发起HTTP请求获取菜单列表数据
url: this.$http.adornUrl('/sys/menu/list'), this.$http({
method: 'get', url: this.$http.adornUrl('/sys/menu/list'),
params: this.$http.adornParams() method: 'get',
}).then(({ data }) => { params: this.$http.adornParams()
this.dataList = treeDataTranslate(data, 'menuId') }).then(({ data }) => {
this.dataListLoading = false // 使用工具函数将数据转换为树形结构
}) this.dataList = treeDataTranslate(data, 'menuId')
}, this.dataListLoading = false // 数据加载完成
// 新增 / 修改 })
addOrUpdateHandle(id) { },
this.addOrUpdateVisible = true
this.$nextTick(() => { // 新增或修改菜单
this.$refs.addOrUpdate.init(id) addOrUpdateHandle(id) {
}) this.addOrUpdateVisible = true // 显示新增/修改弹窗
}, this.$nextTick(() => {
// 删除 // 弹窗渲染完成后，初始化数据
deleteHandle(id) { this.$refs.addOrUpdate.init(id)
this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', { })
confirmButtonText: '确定', },
cancelButtonText: '取消',
type: 'warning' // 删除菜单
}).then(() => { deleteHandle(id) {
this.$http({ // 显示确认弹窗，提示用户是否确认删除操作
url: this.$http.adornUrl(`/sys/menu/delete/${id}`), this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
method: 'post', confirmButtonText: '确定',
data: this.$http.adornData() cancelButtonText: '取消',
}).then(({ data }) => { type: 'warning' // 警告类型的弹窗
if (data && data.code === 200) { }).then(() => {
this.$message({ // 发起删除请求
message: '操作成功', this.$http({
type: 'success', url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
duration: 1500, method: 'post',
onClose: () => this.getDataList() data: this.$http.adornData()
}) }).then(({ data }) => {
} else { if (data && data.code === 200) {
this.$message.error(data.msg) // 删除成功，显示成功提示并刷新菜单列表
} this.$message({
}) message: '操作成功',
}).catch(() => { }) type: 'success',
} duration: 1500,
onClose: () => this.getDataList() // 删除后刷新数据列表
})
} else {
// 删除失败，显示错误提示
this.$message.error(data.msg)
}
})
}).catch(() => {
// 如果用户取消删除，什么也不做
})
}
}
} }
} </script>
</script>

245
src/views/modules/sys/role-add-or-update.vue
Unescape View File

@ -1,111 +1,148 @@
<template> <template>
<!-- 弹窗组件，显示角色的新增或修改表单 -->
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> <!-- 表单组件，绑定数据和验证规则 -->
<el-form-item label="角色名称" prop="roleName"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
</el-form-item> <!-- 角色名称输入框 -->
<el-form-item label="备注" prop="remark"> <el-form-item label="角色名称" prop="roleName">
<el-input v-model="dataForm.remark" placeholder="备注"></el-input> <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item size="mini" label="授权">
<el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true" show-checkbox> <!-- 备注输入框 -->
</el-tree> <el-form-item label="备注" prop="remark">
</el-form-item> <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</el-form> </el-form-item>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <!-- 授权菜单树 -->
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-form-item size="mini" label="授权">
</span> <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true" show-checkbox>
</el-tree>
</el-form-item>
</el-form>
<!-- 弹窗底部按钮，取消和确认按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { treeDataTranslate } from '@/utils' // 导入工具函数，用于将树形数据转换
export default { import { treeDataTranslate } from '@/utils'
export default {
data() { data() {
return { return {
visible: false, // 弹窗显示状态
menuList: [], visible: false,
menuListTreeProps: { // 菜单列表，用于树形展示
label: 'name', menuList: [],
children: 'children' // 用于el-tree组件的树形数据配置
}, menuListTreeProps: {
dataForm: { label: 'name', // 显示名称字段
id: 0, children: 'children' // 子节点字段
roleName: '', },
remark: '' // 表单数据
}, dataForm: {
dataRule: { id: 0, // 角色ID，新增时为0
roleName: [ roleName: '', // 角色名称
{ required: true, message: '角色名称不能为空', trigger: 'blur' } remark: '' // 备注
] },
} // 表单验证规则
} dataRule: {
roleName: [
{ required: true, message: '角色名称不能为空', trigger: 'blur' } // 角色名称不能为空
]
}
}
}, },
methods: { methods: {
init(id) { // 初始化方法，传入角色ID来初始化表单
this.dataForm.id = id || 0 init(id) {
this.$http({ this.dataForm.id = id || 0 // 如果没有传入ID，则初始化为0（新增）
url: this.$http.adornUrl('/sys/menu/list'),
method: 'get', // 获取菜单列表并转换为树形结构
params: this.$http.adornParams() this.$http({
}).then(({ data }) => { url: this.$http.adornUrl('/sys/menu/list'),
this.menuList = treeDataTranslate(data, 'menuId') method: 'get',
}).then(() => { params: this.$http.adornParams()
this.visible = true }).then(({ data }) => {
this.$nextTick(() => { this.menuList = treeDataTranslate(data, 'menuId') // 转换为树形数据
this.$refs['dataForm'].resetFields() }).then(() => {
this.$refs.menuListTree.setCheckedKeys([]) // 显示弹窗
}) this.visible = true
}).then(() => {
if (this.dataForm.id) { // 在下一次DOM更新后执行
this.$http({ this.$nextTick(() => {
url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`), // 重置表单字段
method: 'get', this.$refs['dataForm'].resetFields()
params: this.$http.adornParams() // 清除选中的菜单
}).then(({ data }) => { this.$refs.menuListTree.setCheckedKeys([])
if (data && data.code === 200) { })
this.dataForm.roleName = data.role.roleName }).then(() => {
this.dataForm.remark = data.role.remark // 如果是修改操作（有ID），获取角色详细信息
data.role.menuIdList.forEach(item => { if (this.dataForm.id) {
this.$refs.menuListTree.setChecked(item, true); this.$http({
}); url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
} method: 'get',
}) params: this.$http.adornParams()
} }).then(({ data }) => {
}) if (data && data.code === 200) {
}, // 填充表单数据
// 表单提交 this.dataForm.roleName = data.role.roleName
dataFormSubmit() { this.dataForm.remark = data.role.remark
this.$refs['dataForm'].validate((valid) => { // 设置菜单树选中的节点
if (valid) { data.role.menuIdList.forEach(item => {
this.$http({ this.$refs.menuListTree.setChecked(item, true)
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), })
method: 'post', }
data: this.$http.adornData({ })
'roleId': this.dataForm.id || undefined, }
'roleName': this.dataForm.roleName, })
'remark': this.dataForm.remark, },
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys())
}) // 表单提交方法
}).then(({ data }) => { dataFormSubmit() {
if (data && data.code === 200) { // 校验表单数据
this.$message({ this.$refs['dataForm'].validate((valid) => {
message: '操作成功', if (valid) {
type: 'success', // 提交数据
duration: 1500, this.$http({
onClose: () => { url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), // 根据ID决定是保存还是更新
this.visible = false method: 'post',
this.$emit('refreshDataList') data: this.$http.adornData({
} 'roleId': this.dataForm.id || undefined, // 角色ID
}) 'roleName': this.dataForm.roleName, // 角色名称
} else { 'remark': this.dataForm.remark, // 备注
this.$message.error(data.msg) // 获取已选中的菜单ID列表
} 'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys())
}) })
} }).then(({ data }) => {
}) if (data && data.code === 200) {
} // 操作成功，显示提示消息
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
// 关闭弹窗并触发刷新列表事件
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
// 显示错误提示
this.$message.error(data.msg)
}
})
}
})
}
}
} }
} </script>
</script>
Write Preview
Loading…
Cancel
Save