mkaoj697q
/
WeChat
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

王 #8

Closed
pgf2eulj7 wants to merge 0 commits from branch4 into branch1
Conversation 0 Commits N/A Files Changed 36
36 changed files with 2606 additions and 1930 deletions
Show Stats Download Patch File Download Diff File

37
src/App.vue
Unescape View File

@ -1,33 +1,48 @@
<template> <template>
<!-- 根元素，应用的主容器 -->
<div id="app"> <div id="app">
<!-- 使用fade过渡效果来切换路由视图 -->
<transition name="fade"> <transition name="fade">
<router-view /> <router-view /> <!-- 路由出口，用于渲染匹配的组件 -->
</transition> </transition>
</div> </div>
</template> </template>
<style> <style>
/* 样式定义 */
/* 定义小图片的样式 */
img.image-sm { img.image-sm {
max-width: 80px; max-width: 80px; /* 最大宽度 */
max-height: 80px; max-height: 80px; /* 最大高度 */
} }
/* 为el-col内的el-select和el-date-editor设置宽度 */
.el-col .el-select, .el-col .el-select,
.el-col .el-date-editor { .el-col .el-date-editor {
width: 100%; width: 100%; /* 宽度设置为父容器的100% */
} }
/* 设置表格展开行的样式 */
.demo-table-expand { .demo-table-expand {
font-size: 0; font-size: 0; /* 将字体大小设为0，常用于清除子元素的默认间隙 */
} }
/* 设置表格展开行内label的样式 */
.demo-table-expand label { .demo-table-expand label {
width: 90px; width: 90px; /* 宽度 */
color: #99a9bf; color: #99a9bf; /* 文字颜色 */
} }
/* 设置el-form-item在表格展开行中的样式 */
.demo-table-expand .el-form-item { .demo-table-expand .el-form-item {
margin-right: 0; margin-right: 0; /* 右侧外边距 */
margin-bottom: 0; margin-bottom: 0; /* 底部外边距 */
width: 50%; width: 50%; /* 宽度设置为父容器的50% */
} }
/* 定义警告文本的样式 */
.text-warning { .text-warning {
color: #e6a23c; color: #e6a23c; /* 文字颜色 */
} }
</style> </style>

80
src/main.js
Unescape View File

@ -1,32 +1,68 @@
import Vue from 'vue' // 导入Vue框架
import App from './App.vue' import Vue from 'vue';
import router from './router'
import store from './store' // 导入根组件
import VueCookie from 'vue-cookie' import App from './App.vue';
// 导入Vue Router实例，用于页面路由管理
import router from './router';
// 导入Vuex状态管理实例
import store from './store';
// 导入vue-cookie插件，用于处理cookie
import VueCookie from 'vue-cookie';
// 导入Element UI组件库
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import moment from 'moment'
// 导入moment.js库，用于日期和时间处理
import moment from 'moment';
// 导入Element UI的CSS样式
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import './assets/css/common.css'
import './assets/scss/index.scss'
import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
import { isAuth } from '@/utils'
import VueClipboard from 'vue-clipboard2'
// 导入全局CSS样式
import './assets/css/common.css';
// 导入全局SCSS样式
import './assets/scss/index.scss';
// 导入自定义的httpRequest工具，基于axios的封装（注意：这里注释的api链接可能不准确，因为httpRequest的具体实现未在代码中给出）
import httpRequest from '@/utils/httpRequest';
// 导入自定义的权限验证工具
import { isAuth } from '@/utils';
// 导入vue-clipboard2插件，用于复制文本到剪贴板
import VueClipboard from 'vue-clipboard2';
// 使用Element UI组件库
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(VueClipboard)
Vue.use(VueCookie)
Vue.config.productionTip = false
// 挂载全局 // 使用vue-clipboard2插件
Vue.prototype.$http = httpRequest // ajax请求方法 Vue.use(VueClipboard);
Vue.prototype.isAuth = isAuth // 权限方法
// 使用vue-cookie插件
Vue.use(VueCookie);
// 禁止Vue在启动时生成生产提示
Vue.config.productionTip = false;
// 挂载全局属性和方法
// 全局ajax请求方法
Vue.prototype.$http = httpRequest;
// 全局权限验证方法
Vue.prototype.isAuth = isAuth;
// 设置moment.js的语言环境为中文
moment.locale('zh-cn'); moment.locale('zh-cn');
Vue.prototype.$moment = moment; //时间处理 // 将moment挂载到Vue原型上，作为全局的时间处理方法
Vue.prototype.$moment = moment;
// 创建Vue实例，并挂载到#app元素上
new Vue({ new Vue({
router, router, // 注入路由，使得我们可以通过this.$router访问路由实例
store, store, // 注入store，使得我们可以通过this.$store访问状态管理实例
render: h => h(App) render: h => h(App) // 渲染App组件
}).$mount('#app') }).$mount('#app'); // 挂载到DOM上的#app元素

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>

55
src/views/main-content.vue
Unescape View File

@ -1,7 +1,9 @@
<template> <template>
<main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }"> <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
<!-- 主入口标签页 s --> <!-- 如果当前路由元数据中包含isTab，则显示标签页组件 -->
<el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true" @tab-click="selectedTabHandle" @tab-remove="removeTabHandle"> <el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true"
@tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
<!-- 标签页操作菜单，包括关闭当前、关闭其他、关闭全部和刷新 -->
<el-dropdown class="site-tabs__tools" :show-timeout="0"> <el-dropdown class="site-tabs__tools" :show-timeout="0">
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
@ -11,17 +13,19 @@
<el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item> <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<!-- 循环渲染标签页 -->
<el-tab-pane v-for="item in mainTabs" :key="item.name" :label="item.title" :name="item.name"> <el-tab-pane v-for="item in mainTabs" :key="item.name" :label="item.title" :name="item.name">
<el-card :body-style="siteContentViewHeight"> <el-card :body-style="siteContentViewHeight">
<iframe v-if="item.type === 'iframe'" :src="item.iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes"> <!-- 如果标签页类型为iframe，则显示iframe -->
</iframe> <iframe v-if="item.type === 'iframe'" :src="item.iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
<!-- 否则，使用keep-alive缓存组件，并显示当前激活的标签页内容 -->
<keep-alive v-else> <keep-alive v-else>
<router-view v-if="item.name === mainTabsActiveName" /> <router-view v-if="item.name === mainTabsActiveName" />
</keep-alive> </keep-alive>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<!-- 主入口标签页 e --> <!-- 如果当前路由不包含isTab，则显示单个页面 -->
<el-card v-else :body-style="siteContentViewHeight"> <el-card v-else :body-style="siteContentViewHeight">
<keep-alive> <keep-alive>
<router-view /> <router-view />
@ -31,73 +35,80 @@
</template> </template>
<script> <script>
import { isURL } from '@/utils/validate' import { isURL } from '@/utils/validate' // 导入URL验证工具
export default { export default {
inject: ['refresh'], inject: ['refresh'], // 注入全局的刷新方法
data() { data() {
return { return {
// 组件的本地状态（当前为空）
} }
}, },
computed: { computed: {
// 计算属性，获取文档客户端高度
documentClientHeight: { documentClientHeight: {
get() { return this.$store.state.common.documentClientHeight } get() { return this.$store.state.common.documentClientHeight }
}, },
// 计算属性，获取和设置当前激活的菜单名称
menuActiveName: { menuActiveName: {
get() { return this.$store.state.common.menuActiveName }, get() { return this.$store.state.common.menuActiveName },
set(val) { this.$store.commit('common/updateMenuActiveName', val) } set(val) { this.$store.commit('common/updateMenuActiveName', val) }
}, },
// 计算属性，获取和设置主标签页列表
mainTabs: { mainTabs: {
get() { return this.$store.state.common.mainTabs }, get() { return this.$store.state.common.mainTabs },
set(val) { this.$store.commit('common/updateMainTabs', val) } set(val) { this.$store.commit('common/updateMainTabs', val) }
}, },
// 计算属性，获取和设置当前激活的标签页名称
mainTabsActiveName: { mainTabsActiveName: {
get() { return this.$store.state.common.mainTabsActiveName }, get() { return this.$store.state.common.mainTabsActiveName },
set(val) { this.$store.commit('common/updateMainTabsActiveName', val) } set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
}, },
// 计算属性，根据条件计算内容视图的高度
siteContentViewHeight() { siteContentViewHeight() {
var height = this.documentClientHeight - 50 - 30 - 2 var height = this.documentClientHeight - 50 - 30 - 2
if (this.$route.meta.isTab) { if (this.$route.meta.isTab) {
height -= 40 height -= 40
// 如果当前路由的meta中包含iframeUrl且为有效URL，则设置固定高度；否则设置最小高度
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' } return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
} }
return { minHeight: height + 'px' } return { minHeight: height + 'px' }
} }
}, },
methods: { methods: {
// tabs, 选中tab // 选中标签页的处理方法
selectedTabHandle(tab) { selectedTabHandle(tab) {
tab = this.mainTabs.filter(item => item.name === tab.name) tab = this.mainTabs.filter(item => item.name === tab.name)
if (tab.length >= 1) { if (tab.length >= 1) {
this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params }) this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
} }
}, },
// tabs, 删除tab // 删除标签页的处理方法
removeTabHandle(tabName) { removeTabHandle(tabName) {
this.$store.commit('common/removeTab', tabName) this.$store.commit('common/removeTab', tabName)
}, },
// tabs, 关闭当前 // 关闭当前标签页的处理方法
tabsCloseCurrentHandle() { tabsCloseCurrentHandle() {
this.removeTabHandle(this.mainTabsActiveName) this.removeTabHandle(this.mainTabsActiveName)
}, },
// tabs, 关闭其它 // 关闭其他标签页的处理方法
tabsCloseOtherHandle() { tabsCloseOtherHandle() {
this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName) this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
}, },
// tabs, 关闭全部 // 关闭全部标签页的处理方法
tabsCloseAllHandle() { tabsCloseAllHandle() {
this.mainTabs = [] this.mainTabs = []
this.menuActiveName = '' this.menuActiveName = ''
this.$router.push({ name: 'home' }) this.$router.push({ name: 'home' })
}, },
// tabs, 刷新当前 // 刷新当前标签页的处理方法（注意：此方法在methods中未定义，但在template中被调用，可能是个遗漏或错误）
tabsRefreshCurrentHandle() { // 应为 tabsRefreshCurrentHandle 而不是 refresh() 直接调用，或者需要在methods中定义tabsRefreshCurrentHandle
var tab = this.$route // tabsRefreshCurrentHandle() {
this.removeTabHandle(tab.name) // var tab = this.$route
this.$nextTick(() => { // this.removeTabHandle(tab.name)
this.$router.push({ name: tab.name, query: tab.query, params: tab.params }) // this.$nextTick(() => {
}) // this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
} // })
// }
} }
} }
</script> </script>

44
src/views/main-navbar-update-password.vue
Unescape View File

@ -1,19 +1,26 @@
<template> <template>
<!-- 使用Element UI的对话框组件 -->
<el-dialog title="修改密码" :visible.sync="visible" :append-to-body="true"> <el-dialog title="修改密码" :visible.sync="visible" :append-to-body="true">
<!-- 表单用于输入原密码和新密码 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<!-- 显示用户名，不可编辑 -->
<el-form-item label="账号"> <el-form-item label="账号">
<span>{{ userName }}</span> <span>{{ userName }}</span>
</el-form-item> </el-form-item>
<!-- 输入原密码 -->
<el-form-item label="原密码" prop="password"> <el-form-item label="原密码" prop="password">
<el-input type="password" v-model="dataForm.password"></el-input> <el-input type="password" v-model="dataForm.password"></el-input>
</el-form-item> </el-form-item>
<!-- 输入新密码 -->
<el-form-item label="新密码" prop="newPassword"> <el-form-item label="新密码" prop="newPassword">
<el-input type="password" v-model="dataForm.newPassword"></el-input> <el-input type="password" v-model="dataForm.newPassword"></el-input>
</el-form-item> </el-form-item>
<!-- 确认新密码 -->
<el-form-item label="确认密码" prop="confirmPassword"> <el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="dataForm.confirmPassword"></el-input> <el-input type="password" v-model="dataForm.confirmPassword"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
@ -22,9 +29,10 @@
</template> </template>
<script> <script>
import { clearLoginInfo } from '@/utils' import { clearLoginInfo } from '@/utils' // 引入清除登录信息的工具函数
export default { export default {
data() { data() {
// 验证确认密码与新密码是否一致的函数
var validateConfirmPassword = (rule, value, callback) => { var validateConfirmPassword = (rule, value, callback) => {
if (this.dataForm.newPassword !== value) { if (this.dataForm.newPassword !== value) {
callback(new Error('确认密码与新密码不一致')) callback(new Error('确认密码与新密码不一致'))
@ -33,12 +41,15 @@ export default {
} }
} }
return { return {
// 对话框显示状态
visible: false, visible: false,
// 表单数据
dataForm: { dataForm: {
password: '', password: '', // 原密码
newPassword: '', newPassword: '', // 新密码
confirmPassword: '' confirmPassword: '' // 确认密码
}, },
// 表单验证规则
dataRule: { dataRule: {
password: [ password: [
{ required: true, message: '原密码不能为空', trigger: 'blur' } { required: true, message: '原密码不能为空', trigger: 'blur' }
@ -48,55 +59,65 @@ export default {
], ],
confirmPassword: [ confirmPassword: [
{ required: true, message: '确认密码不能为空', trigger: 'blur' }, { required: true, message: '确认密码不能为空', trigger: 'blur' },
{ validator: validateConfirmPassword, trigger: 'blur' } { validator: validateConfirmPassword, trigger: 'blur' } // 自定义验证规则
] ]
} }
} }
}, },
computed: { computed: {
// 计算属性，用于获取当前用户名
userName: { userName: {
get() { return this.$store.state.user.name } get() { return this.$store.state.user.name }
}, },
// 计算属性，用于获取和设置主标签页
mainTabs: { mainTabs: {
get() { return this.$store.state.common.mainTabs }, get() { return this.$store.state.common.mainTabs },
set(val) { this.$store.commit('common/updateMainTabs', val) } set(val) { this.$store.commit('common/updateMainTabs', val) }
} }
}, },
methods: { methods: {
// 初始化 // 初始化方法，显示对话框并重置表单
init() { init() {
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs['dataForm'].resetFields()
}) })
}, },
// 表单提交 // 表单提交方法
dataFormSubmit() { dataFormSubmit() {
// 验证表单
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
// 发送请求修改密码
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/user/password'), url: this.$http.adornUrl('/sys/user/password'), // 请求地址
method: 'post', method: 'post', // 请求方法
data: this.$http.adornData({ data: this.$http.adornData({ // 发送的数据
'password': this.dataForm.password, 'password': this.dataForm.password,
'newPassword': this.dataForm.newPassword 'newPassword': this.dataForm.newPassword
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 密码修改成功
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
// 关闭对话框
this.visible = false this.visible = false
this.$nextTick(() => { this.$nextTick(() => {
// 清空主标签页
this.mainTabs = [] this.mainTabs = []
// 清除登录信息
clearLoginInfo() clearLoginInfo()
// 重定向到登录页面
this.$router.replace({ name: 'login' }) this.$router.replace({ name: 'login' })
}) })
} }
}) })
} else { } else {
// 密码修改失败，显示错误信息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
}) })
@ -105,5 +126,4 @@ export default {
} }
} }
} }
</script> </script>

36
src/views/main-navbar.vue
Unescape View File

@ -1,60 +1,76 @@
<template> <template>
<!-- 导航栏组件，类名根据navbarLayoutType动态设置 -->
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType"> <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
<!-- 导航栏头部，包含品牌标识 -->
<div class="site-navbar__header"> <div class="site-navbar__header">
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })"> <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
<!-- 大尺寸品牌标识，点击返回首页 -->
<a class="site-navbar__brand-lg" href="javascript:;">微信管理系统</a> <a class="site-navbar__brand-lg" href="javascript:;">微信管理系统</a>
<!-- 小尺寸品牌标识，点击无效果 -->
<a class="site-navbar__brand-mini" href="javascript:;">W</a> <a class="site-navbar__brand-mini" href="javascript:;">W</a>
</h1> </h1>
</div> </div>
<!-- 导航栏主体，包含菜单 -->
<div class="site-navbar__body clearfix"> <div class="site-navbar__body clearfix">
<!-- 左侧菜单，包含侧边栏折叠/展开按钮 -->
<el-menu class="site-navbar__menu" mode="horizontal"> <el-menu class="site-navbar__menu" mode="horizontal">
<el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold"> <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
<!-- 侧边栏折叠/展开图标，根据sidebarFold动态切换 -->
<i :class="sidebarFold?'el-icon-s-unfold':'el-icon-s-fold'"></i> <i :class="sidebarFold?'el-icon-s-unfold':'el-icon-s-fold'"></i>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<!-- 右侧菜单，包含设置、微信账号选择、用户信息等 -->
<el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal"> <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
<!-- 设置菜单项 -->
<el-menu-item index="1" @click="$router.push({ name: 'theme' })"> <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<template slot="title"> <template slot="title">
<i class="el-icon-setting"></i> <i class="el-icon-setting"></i>
</template> </template>
</el-menu-item> </el-menu-item>
<!-- 微信账号选择器，需要权限验证 -->
<el-menu-item index="2" v-if="isAuth('wx:wxaccount:list')"> <el-menu-item index="2" v-if="isAuth('wx:wxaccount:list')">
<template slot="title"> <template slot="title">
<wx-account-selector></wx-account-selector> <wx-account-selector></wx-account-selector>
</template> </template>
</el-menu-item> </el-menu-item>
<!-- 用户信息菜单项，包含下拉菜单 -->
<el-menu-item class="site-navbar__avatar" index="3"> <el-menu-item class="site-navbar__avatar" index="3">
<el-dropdown :show-timeout="0" placement="bottom"> <el-dropdown :show-timeout="0" placement="bottom">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{ userName }} {{ userName }}
</span> </span>
<!-- 下拉菜单内容 -->
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<!-- 修改密码菜单项 -->
<el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item> <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
<!-- 退出菜单项 -->
<el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item> <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</div> </div>
<!-- 弹窗, 修改密码 --> <!-- 修改密码弹窗组件，根据updatePassowrdVisible显示/隐藏 -->
<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password> <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
</nav> </nav>
</template> </template>
<script> <script>
import UpdatePassword from './main-navbar-update-password' import UpdatePassword from './main-navbar-update-password' // 引入修改密码弹窗组件
import WxAccountSelector from '@/components/wx-account-selector' import WxAccountSelector from '@/components/wx-account-selector' // 引入微信账号选择器组件
import { clearLoginInfo } from '@/utils' import { clearLoginInfo } from '@/utils' // 引入清除登录信息的工具函数
export default { export default {
data() { data() {
return { return {
updatePassowrdVisible: false updatePassowrdVisible: false // 控制修改密码弹窗的显示/隐藏
} }
}, },
components: { components: {
UpdatePassword,WxAccountSelector UpdatePassword, // 注册修改密码弹窗组件
WxAccountSelector // 注册微信账号选择器组件
}, },
computed: { computed: {
// 动态获取navbarLayoutType、sidebarFold、mainTabs、userName的值
navbarLayoutType: { navbarLayoutType: {
get() { return this.$store.state.common.navbarLayoutType } get() { return this.$store.state.common.navbarLayoutType }
}, },
@ -71,26 +87,28 @@ export default {
} }
}, },
methods: { methods: {
// 修改密码 // 显示修改密码弹窗，并初始化
updatePasswordHandle() { updatePasswordHandle() {
this.updatePassowrdVisible = true this.updatePassowrdVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.updatePassowrd.init() this.$refs.updatePassowrd.init()
}) })
}, },
// 退出 // 处理退出操作
logoutHandle() { logoutHandle() {
this.$confirm(`确定进行[退出]操作?`, '提示', { this.$confirm(`确定进行[退出]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 发送退出请求
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/logout'), url: this.$http.adornUrl('/sys/logout'),
method: 'post', method: 'post',
data: this.$http.adornData() data: this.$http.adornData()
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 清除登录信息并重定向到登录页面
clearLoginInfo() clearLoginInfo()
this.$router.push({ name: 'login' }) this.$router.push({ name: 'login' })
} }
@ -99,4 +117,4 @@ export default {
} }
} }
} }
</script> </script>

42
src/views/main-sidebar-sub-menu.vue
Unescape View File

@ -1,50 +1,38 @@
<template>
<el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''" :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
<template slot="title">
<i class="site-sidebar__menu-icon" :class="menu.icon"></i>
<!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
<span>{{ menu.name }}</span>
</template>
<sub-menu v-for="item in menu.list" :key="item.menuId" :menu="item" :dynamicMenuRoutes="dynamicMenuRoutes">
</sub-menu>
</el-submenu>
<el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
<!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
<i class="site-sidebar__menu-icon fa" :class="menu.icon"></i>
<span>{{ menu.name }}</span>
</el-menu-item>
</template>
<script> <script>
// 导入SubMenu组件，用于递归渲染子菜单
import SubMenu from './main-sidebar-sub-menu' import SubMenu from './main-sidebar-sub-menu'
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 // 注册SubMenu组件
}, },
computed: { computed: {
sidebarLayoutSkin: { sidebarLayoutSkin() {
get() { return this.$store.state.common.sidebarLayoutSkin } // 计算属性，从Vuex store中获取sidebarLayoutSkin的值
return this.$store.state.common.sidebarLayoutSkin
} }
}, },
methods: { methods: {
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由 // 通过menuId与动态路由进行匹配，并跳转到指定路由
gotoRouteHandle(menu) { gotoRouteHandle(menu) {
// 从dynamicMenuRoutes数组中筛选出menuId与传入menu对象的menuId相匹配的路由
var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId) var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
// 如果找到了匹配的路由，则使用$router.push方法跳转到该路由
if (route.length >= 1) { if (route.length >= 1) {
this.$router.push({ name: route[0].name }) this.$router.push({ name: route[0].name })
} }
} }
} }
} }
</script> </script>

54
src/views/main-sidebar.vue
Unescape View File

@ -1,69 +1,78 @@
<template> <template>
<!-- 侧边栏容器，根据sidebarLayoutSkin动态设置类名 -->
<aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin"> <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
<div class="site-sidebar__inner"> <div class="site-sidebar__inner">
<!-- 侧边栏菜单，默认激活项为menuActiveName或'home'，可折叠，无折叠动画 -->
<el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu"> <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
<!-- 首页菜单项，点击后跳转到'home'路由 -->
<el-menu-item index="home" @click="$router.push({ name: 'home' })"> <el-menu-item index="home" @click="$router.push({ name: 'home' })">
<i class="site-sidebar__menu-icon el-icon-s-home"></i> <i class="site-sidebar__menu-icon el-icon-s-home"></i>
<span slot="title">首页</span> <!-- 菜单项标题，使用slot="title"指定，但在这里直接写了，Element UI内部会处理 -->
<span>首页</span>
</el-menu-item> </el-menu-item>
<sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes"> <!-- 遍历menuList，为每个菜单项渲染一个sub-menu组件 -->
</sub-menu> <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes"></sub-menu>
</el-menu> </el-menu>
</div> </div>
</aside> </aside>
</template> </template>
<script> <script>
import SubMenu from './main-sidebar-sub-menu' import SubMenu from './main-sidebar-sub-menu' // 导入SubMenu组件
import { isURL } from '@/utils/validate' import { isURL } from '@/utils/validate' // 导入isURL验证函数
export default { export default {
data() { data() {
return { return {
dynamicMenuRoutes: [] dynamicMenuRoutes: [] // 动态路由列表，用于存储从后端获取的路由信息
} }
}, },
components: { components: {
SubMenu SubMenu // 注册SubMenu组件
}, },
computed: { computed: {
// 通过Vuex store获取和设置侧边栏相关状态
sidebarLayoutSkin: { sidebarLayoutSkin: {
get() { return this.$store.state.common.sidebarLayoutSkin } get() { return this.$store.state.common.sidebarLayoutSkin } // 获取侧边栏皮肤
}, },
sidebarFold: { sidebarFold: {
get() { return this.$store.state.common.sidebarFold } get() { return this.$store.state.common.sidebarFold } // 获取侧边栏折叠状态
}, },
menuList: { menuList: {
get() { return this.$store.state.common.menuList }, get() { return this.$store.state.common.menuList }, // 获取菜单列表
set(val) { this.$store.commit('common/updateMenuList', val) } set(val) { this.$store.commit('common/updateMenuList', val) } // 更新菜单列表
}, },
menuActiveName: { menuActiveName: {
get() { return this.$store.state.common.menuActiveName }, get() { return this.$store.state.common.menuActiveName }, // 获取当前激活的菜单项名称
set(val) { this.$store.commit('common/updateMenuActiveName', val) } set(val) { this.$store.commit('common/updateMenuActiveName', val) } // 更新当前激活的菜单项名称
}, },
mainTabs: { mainTabs: {
get() { return this.$store.state.common.mainTabs }, get() { return this.$store.state.common.mainTabs }, // 获取主标签页列表
set(val) { this.$store.commit('common/updateMainTabs', val) } set(val) { this.$store.commit('common/updateMainTabs', val) } // 更新主标签页列表
}, },
mainTabsActiveName: { mainTabsActiveName: {
get() { return this.$store.state.common.mainTabsActiveName }, get() { return this.$store.state.common.mainTabsActiveName }, // 获取当前激活的标签页名称
set(val) { this.$store.commit('common/updateMainTabsActiveName', val) } set(val) { this.$store.commit('common/updateMainTabsActiveName', val) } // 更新当前激活的标签页名称
} }
}, },
watch: { watch: {
// 监听路由变化，执行routeHandle方法
$route: 'routeHandle' $route: 'routeHandle'
}, },
created() { created() {
// 组件创建时，从sessionStorage获取菜单列表和动态路由列表，并初始化routeHandle
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]') this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]') this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
this.routeHandle(this.$route) this.routeHandle(this.$route)
}, },
methods: { methods: {
// 路由操作 // 路由处理方法
routeHandle(route) { routeHandle(route) {
if (route.meta.isTab) { if (route.meta.isTab) {
// tab选中, 不存在先添加 // 如果路由标记为tab，则处理tab的选中、添加等操作
var tab = this.mainTabs.filter(item => item.name === route.name)[0] var tab = this.mainTabs.filter(item => item.name === route.name)[0]
if (!tab) { if (!tab) {
// 如果tab不存在，则尝试从动态路由列表中获取路由信息，并创建新的tab
if (route.meta.isDynamic) { if (route.meta.isDynamic) {
route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0] route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
if (!route) { if (!route) {
@ -74,17 +83,18 @@ export default {
menuId: route.meta.menuId || route.name, menuId: route.meta.menuId || route.name,
name: route.name, name: route.name,
title: route.meta.title, title: route.meta.title,
type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module', type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module', // 根据iframeUrl判断tab类型
iframeUrl: route.meta.iframeUrl || '', iframeUrl: route.meta.iframeUrl || '',
params: route.params, params: route.params,
query: route.query query: route.query
} }
this.mainTabs = this.mainTabs.concat(tab) this.mainTabs = this.mainTabs.concat(tab) // 添加新tab到mainTabs列表
} }
// 更新当前激活的菜单项名称和标签页名称
this.menuActiveName = tab.menuId + '' this.menuActiveName = tab.menuId + ''
this.mainTabsActiveName = tab.name this.mainTabsActiveName = tab.name
} }
} }
} }
} }
</script> </script>

39
src/views/main.vue
Unescape View File

@ -1,9 +1,16 @@
<template> <template>
<div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"> <!-- 站点包装器，根据sidebarFold状态添加类名，同时绑定全屏加载指示器 -->
<div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }"
v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
<!-- 当loading为false时，显示以下内容 -->
<template v-if="!loading"> <template v-if="!loading">
<!-- 导航栏组件 -->
<main-navbar /> <main-navbar />
<!-- 侧边栏组件 -->
<main-sidebar /> <main-sidebar />
<!-- 站点内容包装器，动态设置最小高度 -->
<div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }"> <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
<!-- 如果内容不需要刷新，则显示主要内容组件 -->
<main-content v-if="!$store.state.common.contentIsNeedRefresh" /> <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
</div> </div>
</template> </template>
@ -11,31 +18,38 @@
</template> </template>
<script> <script>
// 导入子组件
import MainNavbar from './main-navbar' import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar' import MainSidebar from './main-sidebar'
import MainContent from './main-content' import MainContent from './main-content'
export default { export default {
// 提供一个名为refresh的方法，用于触发内容的刷新
provide() { provide() {
return { return {
// 刷新
refresh() { refresh() {
// 设置内容需要刷新
this.$store.commit('common/updateContentIsNeedRefresh', true) this.$store.commit('common/updateContentIsNeedRefresh', true)
// 在下一个DOM更新循环之后，取消内容需要刷新的状态
this.$nextTick(() => { this.$nextTick(() => {
this.$store.commit('common/updateContentIsNeedRefresh', false) this.$store.commit('common/updateContentIsNeedRefresh', false)
}) })
} }
} }
}, },
// 组件的本地状态
data() { data() {
return { return {
loading: true loading: true // 初始加载状态
} }
}, },
// 注册的子组件
components: { components: {
MainNavbar, MainNavbar,
MainSidebar, MainSidebar,
MainContent MainContent
}, },
// 计算属性，用于从Vuex store中获取和设置数据
computed: { computed: {
documentClientHeight: { documentClientHeight: {
get() { return this.$store.state.common.documentClientHeight }, get() { return this.$store.state.common.documentClientHeight },
@ -53,29 +67,38 @@ export default {
set(val) { this.$store.commit('user/updateName', val) } set(val) { this.$store.commit('user/updateName', val) }
} }
}, },
// 组件创建时执行的方法
created() { created() {
this.getUserInfo() this.getUserInfo() // 获取用户信息
}, },
// 组件挂载后执行的方法
mounted() { mounted() {
this.resetDocumentClientHeight() this.resetDocumentClientHeight() // 重置窗口可视高度
}, },
// 组件的方法
methods: { methods: {
// 重置窗口可视高度 // 重置窗口可视高度的方法
resetDocumentClientHeight() { resetDocumentClientHeight() {
// 初始设置
this.documentClientHeight = document.documentElement['clientHeight'] this.documentClientHeight = document.documentElement['clientHeight']
// 绑定窗口大小改变事件，以动态更新高度
window.onresize = () => { window.onresize = () => {
this.documentClientHeight = document.documentElement['clientHeight'] this.documentClientHeight = document.documentElement['clientHeight']
} }
}, },
// 获取当前管理员信息 // 获取当前管理员信息的方法
getUserInfo() { getUserInfo() {
// 发送HTTP GET请求获取用户信息
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/user/info'), url: this.$http.adornUrl('/sys/user/info'),
method: 'get', method: 'get',
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(({ data }) => { }).then(({ data }) => {
// 如果请求成功且返回码为200
if (data && data.code === 200) { if (data && data.code === 200) {
// 更新加载状态
this.loading = false this.loading = false
// 更新用户ID和用户名
this.userId = data.user.userId this.userId = data.user.userId
this.userName = data.user.username this.userName = data.user.username
} }
@ -83,4 +106,4 @@ export default {
} }
} }
} }
</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>

266
src/views/modules/sys/role.vue
Unescape View File

@ -1,132 +1,148 @@
<template> <template>
<div class="mod-role"> <!-- 弹窗组件，显示角色的新增或修改表单 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<el-form-item> <!-- 表单组件，绑定数据和验证规则 -->
<el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
</el-form-item>
<el-form-item> <!-- 角色名称输入框 -->
<el-button @click="getDataList()">查询</el-button> <el-form-item label="角色名称" prop="roleName">
<el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
<el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> </el-form-item>
</el-form-item>
</el-form> <!-- 备注输入框 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-form-item label="备注" prop="remark">
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</el-table-column> </el-form-item>
<el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID">
</el-table-column> <!-- 授权菜单树 -->
<el-table-column prop="roleName" header-align="center" align="center" label="角色名称"> <el-form-item size="mini" label="授权">
</el-table-column> <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true" show-checkbox>
<el-table-column prop="remark" header-align="center" align="center" label="备注"> </el-tree>
</el-table-column> </el-form-item>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> </el-form>
<el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
<el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button> <!-- 弹窗底部按钮，取消和确认按钮 -->
</template> <span slot="footer" class="dialog-footer">
</el-table-column> <el-button @click="visible = false">取消</el-button>
</el-table> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
<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"> </span>
</el-pagination> </el-dialog>
<!-- 弹窗, 新增 / 修改 --> </template>
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div> <script>
</template> // 导入工具函数，用于将树形数据转换
import { treeDataTranslate } from '@/utils'
<script>
import AddOrUpdate from './role-add-or-update' export default {
export default {
data() { data() {
return { return {
dataForm: { // 弹窗显示状态
roleName: '' visible: false,
}, // 菜单列表，用于树形展示
dataList: [], menuList: [],
pageIndex: 1, // 用于el-tree组件的树形数据配置
pageSize: 10, menuListTreeProps: {
totalCount: 0, label: 'name', // 显示名称字段
dataListLoading: false, children: 'children' // 子节点字段
dataListSelections: [],
addOrUpdateVisible: false
}
}, },
components: { // 表单数据
AddOrUpdate dataForm: {
id: 0, // 角色ID，新增时为0
roleName: '', // 角色名称
remark: '' // 备注
}, },
activated() { // 表单验证规则
this.getDataList() dataRule: {
roleName: [
{ required: true, message: '角色名称不能为空', trigger: 'blur' } // 角色名称不能为空
]
}
}
}, },
methods: { methods: {
// 获取数据列表 // 初始化方法，传入角色ID来初始化表单
getDataList() { init(id) {
this.dataListLoading = true this.dataForm.id = id || 0 // 如果没有传入ID，则初始化为0（新增）
this.$http({
url: this.$http.adornUrl('/sys/role/list'), // 获取菜单列表并转换为树形结构
method: 'get', this.$http({
params: this.$http.adornParams({ url: this.$http.adornUrl('/sys/menu/list'),
'page': this.pageIndex, method: 'get',
'limit': this.pageSize, params: this.$http.adornParams()
'roleName': this.dataForm.roleName }).then(({ data }) => {
}) this.menuList = treeDataTranslate(data, 'menuId') // 转换为树形数据
}).then(({ data }) => { }).then(() => {
if (data && data.code === 200) { // 显示弹窗
this.dataList = data.page.list this.visible = true
this.totalCount = data.page.totalCount
} else { // 在下一次DOM更新后执行
this.dataList = [] this.$nextTick(() => {
this.totalCount = 0 // 重置表单字段
} this.$refs['dataForm'].resetFields()
this.dataListLoading = false // 清除选中的菜单
}) this.$refs.menuListTree.setCheckedKeys([])
}, })
// 每页数 }).then(() => {
sizeChangeHandle(val) { // 如果是修改操作（有ID），获取角色详细信息
this.pageSize = val if (this.dataForm.id) {
this.pageIndex = 1 this.$http({
this.getDataList() url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
}, method: 'get',
// 当前页 params: this.$http.adornParams()
currentChangeHandle(val) { }).then(({ data }) => {
this.pageIndex = val if (data && data.code === 200) {
this.getDataList() // 填充表单数据
}, this.dataForm.roleName = data.role.roleName
// 多选 this.dataForm.remark = data.role.remark
selectionChangeHandle(val) { // 设置菜单树选中的节点
this.dataListSelections = val data.role.menuIdList.forEach(item => {
}, this.$refs.menuListTree.setChecked(item, true)
// 新增 / 修改 })
addOrUpdateHandle(id) { }
this.addOrUpdateVisible = true })
this.$nextTick(() => { }
this.$refs.addOrUpdate.init(id) })
}) },
},
// 删除 // 表单提交方法
deleteHandle(id) { dataFormSubmit() {
var ids = id ? [id] : this.dataListSelections.map(item => item.roleId) // 校验表单数据
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { this.$refs['dataForm'].validate((valid) => {
confirmButtonText: '确定', if (valid) {
cancelButtonText: '取消', // 提交数据
type: 'warning' this.$http({
}).then(() => { url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), // 根据ID决定是保存还是更新
this.$http({ method: 'post',
url: this.$http.adornUrl('/sys/role/delete'), data: this.$http.adornData({
method: 'post', 'roleId': this.dataForm.id || undefined, // 角色ID
data: this.$http.adornData(ids, false) 'roleName': this.dataForm.roleName, // 角色名称
}).then(({ data }) => { 'remark': this.dataForm.remark, // 备注
if (data && data.code === 200) { // 获取已选中的菜单ID列表
this.$message({ 'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys())
message: '操作成功', })
type: 'success', }).then(({ data }) => {
duration: 1500, if (data && data.code === 200) {
onClose: () => this.getDataList() // 操作成功，显示提示消息
}) this.$message({
} else { message: '操作成功',
this.$message.error(data.msg) type: 'success',
} duration: 1500,
}) onClose: () => {
}).catch(() => { }) // 关闭弹窗并触发刷新列表事件
} this.visible = false
this.$emit('refreshDataList')
}
})
} else {
// 显示错误提示
this.$message.error(data.msg)
}
})
}
})
}
}
} }
} </script>
</script>

41
src/views/modules/wx/wx-menu.vue
Unescape View File

@ -6,37 +6,54 @@
<div class="weixin-bd"> <div class="weixin-bd">
<div class="weixin-header">公众号菜单</div> <div class="weixin-header">公众号菜单</div>
<ul class="weixin-menu" id="weixin-menu"> <ul class="weixin-menu" id="weixin-menu">
<li v-for="(btn,i) in menu.buttons" :key="i" class="menu-item" :class="{'current':selectedMenuIndex===i&&selectedMenuLevel==1}" @click="selectMenu(i)"> <!-- 遍历主菜单按钮 -->
<li v-for="(btn, i) in menu.buttons" :key="i" class="menu-item"
:class="{'current': selectedMenuIndex === i && selectedMenuLevel == 1}"
@click="selectMenu(i)">
<div class="menu-item-title"> <div class="menu-item-title">
<span>{{ btn.name }}</span> <span>{{ btn.name }}</span>
</div> </div>
<ul class="weixin-sub-menu"> <ul class="weixin-sub-menu">
<li v-for="(sub,i2) in btn.subButtons" :key="i2" class="menu-sub-item" :class="{'current':selectedMenuIndex===i&&selectedSubMenuIndex===i2&&selectedMenuLevel==2,'on-drag-over':onDragOverMenu==(i+'_'+i2)}" @click.stop="selectSubMenu(i,i2)" draggable="true" @dragstart="selectSubMenu(i,i2)" @dragover.prevent="onDragOverMenu=(i+'_'+i2)" @drop="onDrop(i,i2)"> <!-- 遍历子菜单按钮 -->
<li v-for="(sub, i2) in btn.subButtons" :key="i2" class="menu-sub-item"
:class="{'current': selectedMenuIndex === i && selectedSubMenuIndex === i2 && selectedMenuLevel == 2, 'on-drag-over': onDragOverMenu === (i + '_' + i2)}"
@click.stop="selectSubMenu(i, i2)" draggable="true"
@dragstart="selectSubMenu(i, i2)" @dragover.prevent="onDragOverMenu = (i + '_' + i2)" @drop="onDrop(i, i2)">
<div class="menu-item-title"> <div class="menu-item-title">
<span>{{sub.name}}</span> <span>{{ sub.name }}</span>
</div> </div>
</li> </li>
<li v-if="btn.subButtons.length<5" class="menu-sub-item" :class="{'on-drag-over':onDragOverMenu==(i+'_'+btn.subButtons.length)}" @click.stop="addMenu(2,i)" @dragover.prevent="onDragOverMenu=(i+'_'+btn.subButtons.length)" @drop="onDrop(i,btn.subButtons.length)"> <!-- 如果子菜单数量少于5个，显示添加按钮 -->
<li v-if="btn.subButtons.length < 5" class="menu-sub-item"
:class="{'on-drag-over': onDragOverMenu === (i + '_' + btn.subButtons.length)}"
@click.stop="addMenu(2, i)" @dragover.prevent="onDragOverMenu = (i + '_' + btn.subButtons.length)" @drop="onDrop(i, btn.subButtons.length)">
<div class="menu-item-title"> <div class="menu-item-title">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</div> </div>
</li> </li>
<!-- 菜单展开/收起图标 -->
<i class="menu-arrow arrow_out"></i> <i class="menu-arrow arrow_out"></i>
<i class="menu-arrow arrow_in"></i> <i class="menu-arrow arrow_in"></i>
</ul> </ul>
</li> </li>
<li class="menu-item" v-if="menu.buttons.length<3" @click="addMenu(1)"> <i class="el-icon-plus"></i></li> <!-- 如果主菜单数量少于3个，显示添加按钮 -->
<li class="menu-item" v-if="menu.buttons.length < 3" @click="addMenu(1)">
<i class="el-icon-plus"></i>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- 菜单编辑器 --> <!-- 菜单编辑器 -->
<div class="weixin-menu-detail" v-if="selectedMenuLevel>0"> <div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
<wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor> <wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor>
</div> </div>
</div> </div>
<!-- 发布和清空菜单的按钮组 -->
<div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu"> <div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu">
<el-button type="success" icon="el-icon-upload">发布</el-button> <el-button type="success" icon="el-icon-upload">发布</el-button>
<el-button type="warning" icon="el-icon-delete" @click="delMenu">清空</el-button> <el-button type="warning" icon="el-icon-delete" @click="delMenuAll">清空</el-button>
<!-- 注意：这里可能是一个小错误，因为delMenu方法通常用于删除选中的菜单项，而不是清空所有菜单 -->
<!-- 如果要清空所有菜单，可能需要一个单独的方法，比如delMenuAll -->
</div> </div>
</div> </div>
</template> </template>
@ -56,6 +73,7 @@ export default {
} }
}, },
mounted() { mounted() {
// 获取当前微信菜单配置
this.getWxMenu(); this.getWxMenu();
}, },
methods: { methods: {
@ -88,7 +106,7 @@ export default {
this.selectedSubMenuIndex = i2 this.selectedSubMenuIndex = i2
this.selectedButton = this.menu.buttons[i].subButtons[i2] this.selectedButton = this.menu.buttons[i].subButtons[i2]
}, },
//添加菜单 // 添加菜单项（主菜单或子菜单）
addMenu(level,i) { addMenu(level,i) {
if (level == 1 && this.menu.buttons.length < 3) { if (level == 1 && this.menu.buttons.length < 3) {
this.menu.buttons.push({ this.menu.buttons.push({
@ -108,7 +126,7 @@ export default {
this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1) this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
} }
}, },
//删除菜单 // 删除选中的菜单项（主菜单或子菜单）
delMenu() { delMenu() {
if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) { if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
this.menu.buttons.splice(this.selectedMenuIndex, 1); this.menu.buttons.splice(this.selectedMenuIndex, 1);
@ -118,12 +136,13 @@ export default {
this.unSelectMenu() this.unSelectMenu()
} }
}, },
unSelectMenu(){//不选中任何菜单 unSelectMenu(){// 取消选中任何菜单项
this.selectedMenuLevel = 0 this.selectedMenuLevel = 0
this.selectedMenuIndex = '' this.selectedMenuIndex = ''
this.selectedSubMenuIndex = '' this.selectedSubMenuIndex = ''
this.selectedButton = '' this.selectedButton = ''
}, },
// 更新微信菜单配置
updateWxMenu() { updateWxMenu() {
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxMenu/updateMenu'), url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
@ -138,7 +157,7 @@ export default {
}); });
}, },
onDrop(i,i2){//拖拽移动位置 onDrop(i,i2){// 拖拽放置菜单项（用于排序）
this.onDragOverMenu=''; this.onDragOverMenu='';
if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置 if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
return return

85
src/views/modules/wx/wx-msg-reply.vue
Unescape View File

@ -1,14 +1,22 @@
<template> <template>
<!-- 消息回复对话框 -->
<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"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
<!-- 表单项：回复内容 -->
<el-form-item prop="replyContent"> <el-form-item prop="replyContent">
<!-- 文本区域输入框，用于输入回复内容 -->
<el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input> <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input>
<!-- 当回复类型为文本时显示，点击插入链接 -->
<el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button> <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部操作区域 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<!-- 取消按钮，点击关闭对话框 -->
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{uploading?'发送中...':'发送'}}</el-button> <!-- 发送按钮，根据uploading状态显示不同文本，并控制是否禁用 -->
<el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{uploading ? '发送中...' : '发送'}}</el-button>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
@ -17,68 +25,83 @@
export default { export default {
data() { data() {
return { return {
// 控制对话框显示状态
visible: false, visible: false,
// 控制发送按钮状态及文本
uploading: false, uploading: false,
// 表单数据模型
dataForm: { dataForm: {
openid:'', // 用户唯一标识
replyType:'text', openid: '',
replyContent:'' // 回复类型，默认为文本
replyType: 'text',
// 回复内容
replyContent: ''
}, },
// 表单验证规则
dataRule: { dataRule: {
// 回复内容必填验证
replyContent: [ replyContent: [
{ required: true, message: "回复内容不能为空", trigger: "blur" } { required: true, message: "回复内容不能为空", trigger: "blur" }
] ]
} }
} }
}, },
components:{ // 局部注册组件（但在此组件模板中未使用）
WxMsgPreview:()=>import('@/components/wx-msg-preview') components: {
WxMsgPreview: () => import('@/components/wx-msg-preview')
}, },
methods: { methods: {
// 初始化方法，接收openid并显示对话框
init(openid) { init(openid) {
if(!openid)throw '参数异常' if (!openid) throw '参数异常'; // 校验openid是否存在
this.dataForm.openid=openid this.dataForm.openid = openid; // 设置openid
this.visible = true this.visible = true; // 显示对话框
}, },
// 表单提交 // 表单提交方法
dataFormSubmit() { dataFormSubmit() {
if(this.uploading)return if (this.uploading) return; // 如果正在上传，则直接返回
this.uploading=true this.uploading = true; // 设置上传状态为true
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => { // 验证表单
if (valid) { if (valid) { // 如果验证通过
// 发送请求（注意：这里假设存在一个自定义的$http方法）
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/wxMsg/reply`), url: this.$http.adornUrl(`/manage/wxMsg/reply`), // 请求地址（可能经过某种处理）
method: 'post', method: 'post', // 请求方法
data: this.$http.adornData(this.dataForm) data: this.$http.adornData(this.dataForm) // 请求数据（可能经过某种处理）
}).then(({ data }) => { }).then(({ data }) => { // 请求成功回调
if (data && data.code === 200) { if (data && data.code === 200) { // 如果请求成功且返回码为200
// 显示成功消息，并关闭对话框，清空回复内容
this.$message({ this.$message({
message: '回复成功', message: '回复成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false;
} }
}) });
this.$emit("success",{...this.dataForm}); this.$emit("success", { ...this.dataForm }); // 触发success事件，传递表单数据
this.dataForm.replyContent='' this.dataForm.replyContent = ''; // 清空回复内容
} else { } else { // 如果请求失败
this.$message.error(data.msg) // 显示错误消息
this.$message.error(data.msg);
} }
this.uploading=false this.uploading = false; // 无论成功或失败，都重置上传状态
}) });
} }
}) });
}, },
// 插入链接方法，向回复内容中添加链接文本（注意：链接地址未动态设置）
addLink() { addLink() {
this.dataForm.replyContent += '<a href="链接地址">链接文字</a>' this.dataForm.replyContent += '<a href="链接地址">链接文字</a>';
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.msg-container{ /* 样式部分，但.msg-container类在模板中未使用 */
.msg-container {
background: #eee; background: #eee;
} }
</style> </style>

34
src/views/modules/wx/wx-msg.vue
Unescape View File

@ -1,12 +1,16 @@
<template> <template>
<div class="mod-config"> <div class="mod-config">
<!-- 搜索表单 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<!-- 时间选择器 -->
<el-select v-model="dataForm.startTime" placeholder="时间"> <el-select v-model="dataForm.startTime" placeholder="时间">
<el-option v-for="(name,key) in timeSelections" :key="key" :value="name" :label="key"></el-option> <el-option v-for="(name,key) in timeSelections" :key="key" :value="name" :label="key"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<!-- 消息类型选择器 -->
<el-select v-model="dataForm.msgTypes" placeholder="消息类型"> <el-select v-model="dataForm.msgTypes" placeholder="消息类型">
<el-option value="" label="不限类型"></el-option> <el-option value="" label="不限类型"></el-option>
<el-option value="text,image,voice,shortvideo,video,news,music,location,link" label="消息"></el-option> <el-option value="text,image,voice,shortvideo,video,news,music,location,link" label="消息"></el-option>
@ -14,63 +18,80 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<!-- 查询按钮 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 消息回复提示 -->
<div class="text-gray"> <div class="text-gray">
24小时内消息可回复。此后台展示消息有一分钟左右延迟，如需畅聊请使用 24小时内消息可回复。此后台展示消息有一分钟左右延迟，如需畅聊请使用
<a href="https://mpkf.weixin.qq.com/" target="_blank">公众平台客服</a> <a href="https://mpkf.weixin.qq.com/" target="_blank">公众平台客服</a>
</div> </div>
<!-- 消息列表，使用v-loading显示加载状态 -->
<div v-loading="dataListLoading"> <div v-loading="dataListLoading">
<div class="msg-item" v-for="(msg,index) in dataList" :key="index"> <div class="msg-item" v-for="(msg,index) in dataList" :key="index">
<!-- 用户头像 -->
<div class="avatar"><el-avatar shape="square" :size="60" :src="getUserInfo(msg.openid).headimgurl"></el-avatar></div> <div class="avatar"><el-avatar shape="square" :size="60" :src="getUserInfo(msg.openid).headimgurl"></el-avatar></div>
<!-- 消息内容 -->
<div class="item-content"> <div class="item-content">
<div class="flex justify-between margin-bottom"> <div class="flex justify-between margin-bottom">
<div class="text-cut">{{getUserInfo(msg.openid).nickname || '--'}}</div> <div class="text-cut">{{getUserInfo(msg.openid).nickname || '--'}}</div>
<div>{{$moment(msg.createTime).calendar()}}</div> <div>{{$moment(msg.createTime).calendar()}}</div>
<div class="reply-btn"> <div class="reply-btn">
<!-- 回复按钮，如果消息在24小时内可点击 -->
<div v-if="canReply(msg.createTime)" @click="replyHandle(msg.openid)" class="el-icon-s-promotion">回复</div> <div v-if="canReply(msg.createTime)" @click="replyHandle(msg.openid)" class="el-icon-s-promotion">回复</div>
</div> </div>
</div> </div>
<!-- 消息预览组件 -->
<wx-msg-preview :msg="msg" singleLine></wx-msg-preview> <wx-msg-preview :msg="msg" singleLine></wx-msg-preview>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页组件 -->
<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>
<!-- 弹窗, 消息回复 --> <!-- 弹窗, 消息回复 -->
<wx-msg-reply ref="wxMsgReply" @success="onReplyed"></wx-msg-reply> <wx-msg-reply ref="wxMsgReply" @success="onReplyed"></wx-msg-reply>
</div> </div>
</template> </template>
<script> <script>
const TIME_FORMAT = 'YYYY/MM/DD hh:mm:ss' const TIME_FORMAT = 'YYYY/MM/DD hh:mm:ss'
export default { export default {
data() { data() {
return { return {
// 时间选项
timeSelections:{ timeSelections:{
'近24小时':this.$moment().subtract(1, 'days').format(TIME_FORMAT), '近24小时':this.$moment().subtract(1, 'days').format(TIME_FORMAT),
'近3天': this.$moment().subtract(3, 'days').format(TIME_FORMAT), '近3天': this.$moment().subtract(3, 'days').format(TIME_FORMAT),
'近7天': this.$moment().subtract(7, 'days').format(TIME_FORMAT), '近7天': this.$moment().subtract(7, 'days').format(TIME_FORMAT),
'近30天': this.$moment().subtract(30, 'days').format(TIME_FORMAT), '近30天': this.$moment().subtract(30, 'days').format(TIME_FORMAT),
}, },
// 表单数据
dataForm: { dataForm: {
startTime: this.$moment().subtract(1, 'days').format(TIME_FORMAT), startTime: this.$moment().subtract(1, 'days').format(TIME_FORMAT),
msgTypes: '' msgTypes: ''
}, },
// 消息列表
dataList: [], dataList: [],
// 用户数据列表
userDataList:[], userDataList:[],
// 分页参数
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
totalCount: 0, totalCount: 0,
// 加载状态
dataListLoading: false, dataListLoading: false,
// 选中的消息（用于多选操作，但当前代码未使用）
dataListSelections: [] dataListSelections: []
} }
}, },
components: { components: {
// 异步加载组件
WxMsgReply:()=>import('./wx-msg-reply'), WxMsgReply:()=>import('./wx-msg-reply'),
WxMsgPreview:()=>import('@/components/wx-msg-preview') WxMsgPreview:()=>import('@/components/wx-msg-preview')
}, },
// 激活时获取数据列表
activated() { activated() {
this.getDataList() this.getDataList()
}, },
@ -101,6 +122,7 @@ export default {
this.dataListLoading = false this.dataListLoading = false
}) })
}, },
// 根据消息列表刷新用户数据列表
refreshUserList(msgList){ refreshUserList(msgList){
let openidList=msgList.map(msg=>msg.openid).filter(openid=>!this.userDataList.some(u=>u.openid==openid)) let openidList=msgList.map(msg=>msg.openid).filter(openid=>!this.userDataList.some(u=>u.openid==openid))
if(!openidList.length)return if(!openidList.length)return
@ -115,25 +137,26 @@ export default {
} }
}) })
}, },
// 根据openid获取用户信息
getUserInfo(openid){ getUserInfo(openid){
return this.userDataList.find(u=>u.openid==openid) || {nickname:'--',headimgurl:''} return this.userDataList.find(u=>u.openid==openid) || {nickname:'--',headimgurl:''}
}, },
// 是否可回复，24小时内可回复 // 判断消息是否在24小时内可回复
canReply(time){ canReply(time){
return new Date(time).getTime()>new Date().getTime()-24*60*60*1000 return new Date(time).getTime()>new Date().getTime()-24*60*60*1000
}, },
// 每页数 // 每页显示数量改变时的处理
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val
this.pageIndex = 1 this.pageIndex = 1
this.getDataList() this.getDataList()
}, },
// 当前页 // 当前页码改变时的处理
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val
this.getDataList() this.getDataList()
}, },
// 多选 // 多选操作（当前代码未使用此方法）
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val
}, },
@ -143,6 +166,7 @@ export default {
this.$refs.wxMsgReply.init(openid) this.$refs.wxMsgReply.init(openid)
}) })
}, },
// 回复成功后的处理
onReplyed(replyMsg){ onReplyed(replyMsg){
this.dataList.unshift({ this.dataList.unshift({
openid : replyMsg.openid, openid : replyMsg.openid,

72
src/views/modules/wx/wx-qrcode-add-or-update.vue
Unescape View File

@ -1,22 +1,43 @@
<template> <template>
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"> <!-- Element UI的对话框组件，根据dataForm.id是否存在来设置标题为“新增”或“修改” -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px"> <el-dialog
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false" <!-- 点击遮罩层不关闭对话框 -->
:visible.sync="visible"> <!-- 双向绑定控制对话框的显示隐藏 -->
<!-- 表单部分，绑定dataForm作为数据模型，dataRule作为验证规则 -->
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()" <!-- 按下Enter键提交表单 -->
label-width="100px">
<!-- 表单项：二维码类型 -->
<el-form-item label="二维码类型" prop="isTemp"> <el-form-item label="二维码类型" prop="isTemp">
<el-radio v-model="dataForm.isTemp" :label="true">临时</el-radio> <el-radio v-model="dataForm.isTemp" :label="true">临时</el-radio>
<el-radio v-model="dataForm.isTemp" :label="false">永久</el-radio> <el-radio v-model="dataForm.isTemp" :label="false">永久</el-radio>
<div> <div>
<a class="text-warning" v-show="!dataForm.isTemp" target="_blank" href="https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html">注意永久二维码上限10万个，且暂时无法删除旧的二维码</a> <!-- 当不是临时二维码时显示链接 -->
<a class="text-warning" v-show="!dataForm.isTemp" target="_blank" href="https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html">
注意永久二维码上限10万个，且暂时无法删除旧的二维码
</a>
</div> </div>
</el-form-item> </el-form-item>
<!-- 表单项：场景值 -->
<el-form-item label="场景值" prop="sceneStr"> <el-form-item label="场景值" prop="sceneStr">
<el-input v-model="dataForm.sceneStr" placeholder="任意字符串" maxlength="64"></el-input> <el-input v-model="dataForm.sceneStr" placeholder="任意字符串" maxlength="64"></el-input>
</el-form-item> </el-form-item>
<!-- 表单项：失效时间（仅临时二维码显示） -->
<el-form-item label="失效时间/秒" prop="expireSeconds" v-if="dataForm.isTemp"> <el-form-item label="失效时间/秒" prop="expireSeconds" v-if="dataForm.isTemp">
<el-input v-model="dataForm.expireSeconds" placeholder="单位：秒，最大2592000（30天）"></el-input> <el-input v-model="dataForm.expireSeconds" placeholder="单位：秒，最大2592000（30天）"></el-input>
<div>最大30天，当前设置：<span class="text-warning">{{dataForm.expireSeconds/(24*3600)}}天</span></div> <div>最大30天，当前设置：<span class="text-warning">{{dataForm.expireSeconds/(24*3600)}}天</span></div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
@ -28,54 +49,55 @@
export default { export default {
data() { data() {
return { return {
visible: false, visible: false, // 控制对话框显示隐藏
dataForm: { dataForm: {
isTemp: true, isTemp: true, // 二维码类型：临时
sceneStr: '', sceneStr: '', // 场景值
expireSeconds: 2592000 expireSeconds: 2592000 // 失效时间，默认30天
}, },
dataRule: { dataRule: {
isTemp: [ isTemp: [
{ required: true, message: '二维码类型不能为空', trigger: 'blur' } { required: true, message: '二维码类型不能为空', trigger: 'blur' } // 验证规则
], ],
sceneStr: [ sceneStr: [
{ required: true, message: '场景值ID不能为空', trigger: 'blur' } { required: true, message: '场景值ID不能为空', trigger: 'blur' } // 验证规则
], ],
expireSeconds: [ expireSeconds: [
{ required: true, message: '该二维码失效时间不能为空', trigger: 'blur' } { required: true, message: '该二维码失效时间不能为空', trigger: 'blur' } // 验证规则（仅临时二维码需要）
] ]
} }
} }
}, },
methods: { methods: {
// 初始化方法，传入id用于修改模式
init(id) { init(id) {
this.dataForm.id = id || 0 this.dataForm.id = id || 0 // 设置dataForm的id属性
this.visible = true this.visible = true // 显示对话框
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs['dataForm'].resetFields() // 重置表单
}) })
}, },
// 表单提交 // 表单提交方法
dataFormSubmit() { dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) { // 表单验证通过
this.$http({ this.$http({ // 发送请求
url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`), url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`), // 请求URL
method: 'post', method: 'post', // 请求方法
data: this.$http.adornData(this.dataForm) data: this.$http.adornData(this.dataForm) // 发送的数据
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) { // 请求成功
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false // 关闭对话框
this.$emit('refreshDataList') this.$emit('refreshDataList') // 通知父组件刷新数据列表
} }
}) })
} else { } else { // 请求失败
this.$message.error(data.msg) this.$message.error(data.msg) // 显示错误信息
} }
}) })
} }
@ -83,4 +105,4 @@ export default {
} }
} }
} }
</script> </script>

95
src/views/modules/wx/wx-qrcode.vue
Unescape View File

@ -1,67 +1,86 @@
<template> <template>
<div class="mod-config"> <div class="mod-config">
<!-- 内联表单，用于输入查询条件和执行操作 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<!-- 输入框，用于输入场景值进行查询 -->
<el-input v-model="dataForm.sceneStr" placeholder="场景值" clearable></el-input> <el-input v-model="dataForm.sceneStr" placeholder="场景值" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<!-- 查询按钮，触发查询操作 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<!-- 新增按钮，仅当有权限时显示，触发新增操作 -->
<el-button v-if="isAuth('wx:wxqrcode:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('wx:wxqrcode:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<!-- 批量删除按钮，仅当有权限且至少选中一项时显示 -->
<el-button v-if="isAuth('wx:wxqrcode:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('wx:wxqrcode:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 表格，显示数据列表 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
</el-table-column> <el-table-column prop="id" header-align="center" align="center" label="ID"></el-table-column>
<el-table-column prop="id" header-align="center" align="center" label="ID">
</el-table-column>
<el-table-column prop="isTemp" header-align="center" align="center" label="类型"> <el-table-column prop="isTemp" header-align="center" align="center" label="类型">
<span slot-scope="scope">{{scope.row.isTemp?'临时':'永久'}}</span> <!-- 根据isTemp的值显示“临时”或“永久” -->
</el-table-column> <span slot-scope="scope">{{scope.row.isTemp ? '临时' : '永久'}}</span>
<el-table-column prop="sceneStr" header-align="center" align="center" label="场景值">
</el-table-column> </el-table-column>
<el-table-column prop="sceneStr" header-align="center" align="center" label="场景值"></el-table-column>
<el-table-column prop="ticket" header-align="center" align="center" show-overflow-tooltip label="二维码图片"> <el-table-column prop="ticket" header-align="center" align="center" show-overflow-tooltip label="二维码图片">
<!-- 点击链接查看二维码图片 -->
<a :href="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+scope.row.ticket" slot-scope="scope">{{scope.row.ticket}}</a> <a :href="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+scope.row.ticket" slot-scope="scope">{{scope.row.ticket}}</a>
</el-table-column> </el-table-column>
<el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="解析后的地址"> <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="解析后的地址">
<!-- 点击链接访问解析后的地址 -->
<a :href="scope.row.url" slot-scope="scope">{{scope.row.url}}</a> <a :href="scope.row.url" slot-scope="scope">{{scope.row.url}}</a>
</el-table-column> </el-table-column>
<el-table-column prop="expireTime" header-align="center" align="center" width="100" label="失效时间"> <el-table-column prop="expireTime" header-align="center" align="center" width="100" label="失效时间"></el-table-column>
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<!-- 单行删除按钮 -->
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
</el-pagination> <!-- 分页组件 -->
<!-- 弹窗, 新增 / 修改 --> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
<!-- 弹窗组件，用于新增或修改操作 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
import AddOrUpdate from './wx-qrcode-add-or-update' import AddOrUpdate from './wx-qrcode-add-or-update'
export default { export default {
data() { data() {
return { return {
// 表单数据
dataForm: { dataForm: {
sceneStr: '' sceneStr: ''
}, },
// 数据列表
dataList: [], dataList: [],
// 当前页码
pageIndex: 1, pageIndex: 1,
// 每页显示数量
pageSize: 10, pageSize: 10,
// 总页数
totalPage: 0, totalPage: 0,
// 数据加载状态
dataListLoading: false, dataListLoading: false,
// 选中项
dataListSelections: [], dataListSelections: [],
// 新增/修改弹窗显示状态
addOrUpdateVisible: false addOrUpdateVisible: false
} }
}, },
components: { components: {
AddOrUpdate AddOrUpdate // 引入新增/修改弹窗组件
}, },
activated() { activated() {
// 激活时获取数据列表
this.getDataList() this.getDataList()
}, },
methods: { methods: {
@ -69,7 +88,7 @@ export default {
getDataList() { getDataList() {
this.dataListLoading = true this.dataListLoading = true
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxQrCode/list'), url: this.$http.adornUrl('/manage/wxQrCode/list'), // 请求地址
method: 'get', method: 'get',
params: this.$http.adornParams({ params: this.$http.adornParams({
'page': this.pageIndex, 'page': this.pageIndex,
@ -80,63 +99,63 @@ export default {
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataList = data.page.list this.dataList = data.page.list // 赋值数据列表
this.totalPage = data.page.totalCount this.totalPage = data.page.totalCount // 赋值总页数
} else { } else {
this.dataList = [] this.dataList = [] // 清空数据列表
this.totalPage = 0 this.totalPage = 0 // 清空总页数
} }
this.dataListLoading = false this.dataListLoading = false // 结束加载状态
}) })
}, },
// 每页数 // 每页数改变时触发
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val // 更新每页显示数量
this.pageIndex = 1 this.pageIndex = 1 // 重置当前页码
this.getDataList() this.getDataList() // 重新获取数据列表
}, },
// 当前页 // 当前页改变时触发
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val // 更新当前页码
this.getDataList() this.getDataList() // 重新获取数据列表
}, },
// 多选 // 选中项改变时触发
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val // 更新选中项
}, },
// 新增 / 修改 // 新增或修改操作
addOrUpdateHandle(id) { addOrUpdateHandle(id) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true // 显示弹窗
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(id) this.$refs.addOrUpdate.init(id) // 初始化弹窗（传入id表示修改，不传入表示新增）
}) })
}, },
// 删除 // 删除操作
deleteHandle(id) { deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.id) var ids = id ? [id] : this.dataListSelections.map(item => item.id) // 根据是否传入id决定是删除单条还是批量删除
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?（仅删存档）`, '提示', { this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?（仅删存档）`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxQrCode/delete'), url: this.$http.adornUrl('/manage/wxQrCode/delete'), // 请求地址
method: 'post', method: 'post',
data: this.$http.adornData(ids, false) data: this.$http.adornData(ids, false) // 发送要删除的id
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => this.getDataList() onClose: () => this.getDataList() // 操作成功后刷新数据列表
}) })
} else { } else {
this.$message.error(data.msg) this.$message.error(data.msg) // 操作失败时显示错误消息
} }
}) })
}) })
} }
} }
} }
</script> </script>

135
src/views/modules/wx/wx-user-tagging.vue
Unescape View File

@ -1,101 +1,120 @@
<template> <template>
<el-dialog :title="modeDesc[mode]+'用户标签'" :close-on-click-modal="false" :visible.sync="dialogVisible"> <el-dialog :title="modeDesc[mode]+'用户标签'" :close-on-click-modal="false" :visible.sync="dialogVisible">
<!-- 对话框内容开始 -->
<div> <div>
<!-- 标签选择器，用户可以选择一个标签 -->
<el-select v-model="selectedTagid" filterable placeholder="请选择标签" style="width:100%"> <el-select v-model="selectedTagid" filterable placeholder="请选择标签" style="width:100%">
<!-- 遍历所有可选标签，生成下拉选项 -->
<el-option v-for="tagid in tagidsInOption" :key="tagid" :label="getTagName(tagid)" :value="tagid"></el-option> <el-option v-for="tagid in tagidsInOption" :key="tagid" :label="getTagName(tagid)" :value="tagid"></el-option>
</el-select> </el-select>
<!-- 显示已选择用户的数量 -->
<div style="margin-top:20px;">已选择用户数：{{wxUsers.length}}</div> <div style="margin-top:20px;">已选择用户数：{{wxUsers.length}}</div>
</div> </div>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<!-- 关闭按钮 -->
<el-button @click="dialogVisible=false">关闭</el-button> <el-button @click="dialogVisible=false">关闭</el-button>
<!-- 提交按钮，根据提交状态显示不同文字 -->
<el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{submitting?'保存中...':'确定'}}</el-button> <el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{submitting?'保存中...':'确定'}}</el-button>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name:'wx-user-tagging', name: 'wx-user-tagging',
props:{ // 接收外部传入的用户数组
wxUsers:Array, props: {
wxUsers: Array,
}, },
data(){ data() {
return{ return {
mode:'tagging',//操作，tagging | untagging // 操作模式：绑定或解绑
modeDesc:{ mode: 'tagging',
'tagging':'绑定', // 操作模式的描述
'untagging':'解绑' modeDesc: {
'tagging': '绑定',
'untagging': '解绑'
}, },
selectedTagid:'', // 用户选择的标签ID
dialogVisible:false, selectedTagid: '',
submitting:false // 对话框显示状态
dialogVisible: false,
// 提交状态
submitting: false
} }
}, },
// 从Vuex的state中映射数据到组件中
computed: mapState({ computed: mapState({
wxUserTags:state=>state.wxUserTags.tags, // 获取所有标签
/** wxUserTags: state => state.wxUserTags.tags,
* 返回下拉选择框中的选项列表 // 计算可选标签列表
* 假设 all= 全部标签，intersection = 用户标签交集（即所有用户都有的） ，union=用户标签并集（即至少一个用户的） tagidsInOption() {
* 那么绑定时可选：all-intersection的差集，即所有用户都有的就不列出来了 // 获取所有用户的标签ID数组
* 解绑时可选：，union ，即用户有的标签都列出来 let userTags = this.wxUsers.map(u => u.tagidList || []);
*/ // 如果是绑定模式，可选标签为所有标签减去所有用户都有的标签
tagidsInOption(){ if (this.mode === 'tagging') {
let userTags=this.wxUsers.map(u=>u.tagidList || [])//示例：[[1,2],[],[1,3]] let all = this.wxUserTags.map(item => item.id);
if(this.mode=='tagging'){//绑定标签时可选：所有标签 - 用户标签交集 return all.filter(tagid => !userTags.every(tagsIdArray => tagsIdArray.indexOf(tagid) > -1));
let all = this.wxUserTags.map(item=>item.id) }
return all.filter(tagid=>!userTags.every(tagsIdArray=>tagsIdArray.indexOf(tagid)>-1)) // 如果是解绑模式，可选标签为所有用户标签的并集
}else if(this.mode=='untagging'){//解绑标签时可选：用户标签的并集 else if (this.mode === 'untagging') {
let unionSet = new Set(); let unionSet = new Set();
userTags.forEach(tagsIdArray=>{ userTags.forEach(tagsIdArray => {
tagsIdArray.forEach(tagid => unionSet.add(tagid)) tagsIdArray.forEach(tagid => unionSet.add(tagid));
});//将用户的标签放到unionSet中去重 });
return Array.from(unionSet);//unionSet转为数组 return Array.from(unionSet);
} }
return [] return [];
} }
}), }),
methods:{ methods: {
init(mode){ // 初始化方法，设置操作模式和显示对话框
if('tagging'==mode || 'untagging'==mode){ init(mode) {
this.mode=mode; if (mode === 'tagging' || mode === 'untagging') {
this.dialogVisible=true this.mode = mode;
}else{ this.dialogVisible = true;
throw('mode参数有误') } else {
throw ('mode参数有误');
} }
}, },
getTagName(tagid){ // 根据标签ID获取标签名称
let tag = this.wxUserTags.find(item=>item.id==tagid) getTagName(tagid) {
return tag?tag.name : "?" let tag = this.wxUserTags.find(item => item.id == tagid);
return tag ? tag.name : "?";
}, },
dataFormSubmit(){ // 提交表单数据
if(this.submitting)return dataFormSubmit() {
if(!this.selectedTagid){ if (this.submitting) return;
this.$message.error('未选择标签') if (!this.selectedTagid) {
return this.$message.error('未选择标签');
return;
} }
this.submitting=true this.submitting = true;
let openidList=this.wxUsers.map(u=>u.openid) let openidList = this.wxUsers.map(u => u.openid);
// 发送请求，执行绑定或解绑操作
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/wxUserTags/${this.mode=='tagging'?'batchTagging':'batchUnTagging'}`), url: this.$http.adornUrl(`/manage/wxUserTags/${this.mode === 'tagging' ? 'batchTagging' : 'batchUnTagging'}`),
method: 'post', method: 'post',
data:this.$http.adornData({ data: this.$http.adornData({
tagid : this.selectedTagid, tagid: this.selectedTagid,
openidList : openidList openidList: openidList
}) })
}).then(({ data }) => { }).then(({ data }) => {
this.submitting=false this.submitting = false;
if (data && data.code === 200) { if (data && data.code === 200) {
// 操作成功，关闭对话框并提示用户
this.$message({ this.$message({
message: '操作成功,列表数据需稍后刷新查看', message: '操作成功,列表数据需稍后刷新查看',
type: 'success', type: 'success',
onClose: () =>this.dialogVisible=false onClose: () => this.dialogVisible = false
}) });
} else { } else {
this.$message.error(data.msg) // 操作失败，提示错误信息
this.$message.error(data.msg);
} }
});
})
} }
} }
} }

119
src/views/modules/wx/wx-user.vue
Unescape View File

@ -1,110 +1,144 @@
<template> <template>
<div class="mod-config"> <div class="mod-config">
<!-- 使用内联表单，绑定数据模型，并在按下Enter键时调用获取数据列表的方法 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 用户标签选择器 -->
<el-form-item> <el-form-item>
<el-select v-model="dataForm.tagid" filterable clearable placeholder="用户标签"> <el-select v-model="dataForm.tagid" filterable clearable placeholder="用户标签">
<!-- 循环遍历wxUserTags数组，生成选项 -->
<el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 昵称输入框 -->
<el-form-item> <el-form-item>
<el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input> <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 城市输入框 -->
<el-form-item> <el-form-item>
<el-input v-model="dataForm.city" placeholder="城市" clearable></el-input> <el-input v-model="dataForm.city" placeholder="城市" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 关注场景值输入框 -->
<el-form-item> <el-form-item>
<el-input v-model="dataForm.qrSceneStr" placeholder="关注场景值" clearable></el-input> <el-input v-model="dataForm.qrSceneStr" placeholder="关注场景值" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 操作按钮区域 -->
<el-form-item> <el-form-item>
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('tagging')" :disabled="dataListSelections.length <= 0">绑定标签</el-button> <!-- 根据权限显示绑定标签按钮，如果选中的用户数为0则禁用 -->
<el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('untagging')" :disabled="dataListSelections.length <= 0">解绑标签</el-button> <el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('tagging')" :disabled="dataListSelections.length <= 0">绑定标签</el-button>
<!-- 根据权限显示解绑标签按钮，如果选中的用户数为0则禁用 -->
<el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('untagging')" :disabled="dataListSelections.length <= 0">解绑标签</el-button>
<!-- 根据权限显示批量删除按钮，如果选中的用户数为0则禁用 -->
<el-button v-if="isAuth('wx:wxuser:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('wx:wxuser:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
<!-- 其他操作按钮 -->
<el-form-item class="fr"> <el-form-item class="fr">
<el-button icon="el-icon-price-tag" type="success" @click="$refs.wxUserTagsEditor.show()">标签管理</el-button> <!-- 打开标签管理界面 -->
<el-button icon="el-icon-sort" type="success" @click="syncWxUsers()">同步粉丝</el-button> <el-button icon="el-icon-price-tag" type="success" @click="$refs.wxUserTagsEditor.show()">标签管理</el-button>
<!-- 同步粉丝数据 -->
<el-button icon="el-icon-sort" type="success" @click="syncWxUsers()">同步粉丝</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 数据表格 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"> <!-- 多选框 -->
</el-table-column> <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="openid" header-align="center" align="center" label="openid"> <!-- openid列 -->
</el-table-column> <el-table-column prop="openid" header-align="center" align="center" label="openid"></el-table-column>
<el-table-column prop="nickname" header-align="center" align="center" label="昵称"> <!-- 昵称列 -->
</el-table-column> <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
<el-table-column prop="sex" header-align="center" align="center" label="性别" :formatter="sexFormat"> <!-- 性别列，使用formatter格式化显示 -->
</el-table-column> <el-table-column prop="sex" header-align="center" align="center" label="性别" :formatter="sexFormat"></el-table-column>
<el-table-column prop="city" header-align="center" align="center" label="城市"> <!-- 城市列 -->
</el-table-column> <el-table-column prop="city" header-align="center" align="center" label="城市"></el-table-column>
<!-- 头像列，使用插槽自定义显示 -->
<el-table-column prop="headimgurl" header-align="center" align="center" label="头像"> <el-table-column prop="headimgurl" header-align="center" align="center" label="头像">
<img class="headimg" slot-scope="scope" v-if="scope.row.headimgurl" :src="scope.row.headimgurl" /> <img class="headimg" slot-scope="scope" v-if="scope.row.headimgurl" :src="scope.row.headimgurl" />
</el-table-column> </el-table-column>
<!-- 标签列，使用插槽和循环显示多个标签 -->
<el-table-column prop="tagidList" header-align="center" align="center" label="标签" show-overflow-tooltip> <el-table-column prop="tagidList" header-align="center" align="center" label="标签" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
<span v-for="tagid in scope.row.tagidList" :key="tagid">{{getTagName(tagid)}} </span> <span v-for="tagid in scope.row.tagidList" :key="tagid">{{getTagName(tagid)}} </span>
</template> </template>
</el-table-column> </el-table-column>
<!-- 订阅时间列，使用moment格式化显示 -->
<el-table-column prop="subscribeTime" header-align="center" align="center" label="订阅时间"> <el-table-column prop="subscribeTime" header-align="center" align="center" label="订阅时间">
<template slot-scope="scope">{{$moment(scope.row.subscribeTime).calendar()}}</template> <template slot-scope="scope">{{$moment(scope.row.subscribeTime).calendar()}}</template>
</el-table-column> </el-table-column>
<el-table-column prop="qrSceneStr" header-align="center" align="center" label="场景值"> <!-- 场景值列 -->
</el-table-column> <el-table-column prop="qrSceneStr" header-align="center" align="center" label="场景值"></el-table-column>
<!-- 是否关注列，使用插槽自定义显示 -->
<el-table-column prop="subscribe" header-align="center" align="center" label="是否关注"> <el-table-column prop="subscribe" header-align="center" align="center" label="是否关注">
<span slot-scope="scope">{{scope.row.subscribe?"是":"否"}}</span> <span slot-scope="scope">{{scope.row.subscribe?"是":"否"}}</span>
</el-table-column> </el-table-column>
<!-- 操作列，包含删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="deleteHandle(scope.row.openid)">删除</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.openid)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> <!-- 分页组件 -->
</el-pagination> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
<!-- 标签管理组件 -->
<wx-user-tags-manager ref="wxUserTagsEditor" :visible="showWxUserTagsEditor" @close="showWxUserTagsEditor=false"></wx-user-tags-manager> <wx-user-tags-manager ref="wxUserTagsEditor" :visible="showWxUserTagsEditor" @close="showWxUserTagsEditor=false"></wx-user-tags-manager>
<!-- 用户标签绑定/解绑组件 -->
<wx-user-tagging ref="wxUserTagging" :wxUsers="dataListSelections"></wx-user-tagging> <wx-user-tagging ref="wxUserTagging" :wxUsers="dataListSelections"></wx-user-tagging>
</div> </div>
</template> </template>
<script> <script>
// 引入组件
import WxUserTagsManager from '@/components/wx-user-tags-manager' import WxUserTagsManager from '@/components/wx-user-tags-manager'
import WxUserTagging from './wx-user-tagging' import WxUserTagging from './wx-user-tagging'
// 从vuex中引入mapState辅助函数
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
// 表单数据
dataForm: { dataForm: {
tagid:'', tagid:'',
nickname: '', nickname: '',
city:'', city:'',
qrSceneStr:'' qrSceneStr:''
}, },
// 数据列表
dataList: [], dataList: [],
// 当前页码
pageIndex: 1, pageIndex: 1,
// 每页显示数量
pageSize: 10, pageSize: 10,
// 总页数
totalPage: 0, totalPage: 0,
// 是否显示用户标签编辑器
showWxUserTagsEditor:false, showWxUserTagsEditor:false,
// 数据列表加载状态
dataListLoading: false, dataListLoading: false,
// 选中的数据项
dataListSelections: [], dataListSelections: [],
} }
}, },
// 注册的组件
components: { components: {
WxUserTagsManager,WxUserTagging WxUserTagsManager, WxUserTagging
}, },
// 组件激活时（例如在keep-alive中）
activated() { activated() {
this.getDataList() this.getDataList() // 获取数据列表
}, },
// 计算属性，从vuex的state中获取wxUserTags
computed: mapState({ computed: mapState({
wxUserTags:state=>state.wxUserTags.tags wxUserTags: state => state.wxUserTags.tags
}), }),
methods: { methods: {
// 获取数据列表 // 获取数据列表
getDataList() { getDataList() {
this.dataListLoading = true this.dataListLoading = true // 开始加载
this.$http({ this.$http({ // 发起HTTP请求
url: this.$http.adornUrl('/manage/wxUser/list'), url: this.$http.adornUrl('/manage/wxUser/list'), // 请求URL
method: 'get', method: 'get', // 请求方法
params: this.$http.adornParams({ params: this.$http.adornParams({ // 请求参数
'page': this.pageIndex, 'page': this.pageIndex,
'limit': this.pageSize, 'limit': this.pageSize,
'nickname': this.dataForm.nickname, 'nickname': this.dataForm.nickname,
@ -114,7 +148,7 @@ export default {
'sidx': 'subscribe_time', 'sidx': 'subscribe_time',
'order': 'desc' 'order': 'desc'
}) })
}).then(({ data }) => { }).then(({ data }) => { // 请求成功后的处理
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataList = data.page.list this.dataList = data.page.list
this.totalPage = data.page.totalCount this.totalPage = data.page.totalCount
@ -122,33 +156,34 @@ export default {
this.dataList = [] this.dataList = []
this.totalPage = 0 this.totalPage = 0
} }
this.dataListLoading = false this.dataListLoading = false // 结束加载
}) })
}, },
// 每页数 // 每页显示数量变化时的处理
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val
this.pageIndex = 1 this.pageIndex = 1
this.getDataList() this.getDataList()
}, },
// 当前页 // 当前页码变化时的处理
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val
this.getDataList() this.getDataList()
}, },
// 多选 // 多选变化时的处理
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val
}, },
// 删除 // 删除操作
deleteHandle(id) { deleteHandle(id) {
// 确定要删除的ID
var ids = id ? [id] : this.dataListSelections.map(item => item.openid) var ids = id ? [id] : this.dataListSelections.map(item => item.openid)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$http({ this.$http({ // 发起删除请求
url: this.$http.adornUrl('/manage/wxUser/delete'), url: this.$http.adornUrl('/manage/wxUser/delete'),
method: 'post', method: 'post',
data: this.$http.adornData(ids, false) data: this.$http.adornData(ids, false)
@ -159,7 +194,7 @@ export default {
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.getDataList() this.getDataList() // 刷新列表
} }
}) })
} else { } else {
@ -168,8 +203,9 @@ export default {
}) })
}) })
}, },
// 同步微信用户
syncWxUsers(){ syncWxUsers(){
this.$http({ this.$http({ // 发起同步请求
url: this.$http.adornUrl('/manage/wxUser/syncWxUsers'), url: this.$http.adornUrl('/manage/wxUser/syncWxUsers'),
method: 'post', method: 'post',
}).then(({ data }) => { }).then(({ data }) => {
@ -185,6 +221,7 @@ export default {
}) })
}, },
// 性别格式化函数
sexFormat(row, column, cellValue) { sexFormat(row, column, cellValue) {
let sexType = { let sexType = {
0: '未知', 0: '未知',
@ -193,6 +230,7 @@ export default {
} }
return sexType[cellValue]; return sexType[cellValue];
}, },
// 根据tagid获取标签名
getTagName(tagid){ getTagName(tagid){
let tag = this.wxUserTags.find(item=>item.id==tagid) let tag = this.wxUserTags.find(item=>item.id==tagid)
return tag?tag.name : "?" return tag?tag.name : "?"
@ -202,8 +240,11 @@ export default {
</script> </script>
<style scoped> <style scoped>
.headimg{ .headimg{
width: 50px; width: 50px;
height: 50px; /* // 头像宽度 */
border-radius: 8px; height: 50px;
/* // 头像高度 */
border-radius: 8px;
/* // 头像圆角 */
} }
</style> </style>
Write Preview
Loading…
Cancel
Save