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

80
src/main.js
Unescape View File

@ -1,32 +1,68 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueCookie from 'vue-cookie'
// 导入Vue框架
import Vue from 'vue';
// 导入根组件
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 moment from 'moment'
// 导入moment.js库，用于日期和时间处理
import moment from 'moment';
// 导入Element UI的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(VueClipboard)
Vue.use(VueCookie)
Vue.config.productionTip = false
// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法
Vue.prototype.isAuth = isAuth // 权限方法
// 使用vue-clipboard2插件
Vue.use(VueClipboard);
// 使用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');
Vue.prototype.$moment = moment; //时间处理
// 将moment挂载到Vue原型上，作为全局的时间处理方法
Vue.prototype.$moment = moment;
// 创建Vue实例，并挂载到#app元素上
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
router, // 注入路由，使得我们可以通过this.$router访问路由实例
store, // 注入store，使得我们可以通过this.$store访问状态管理实例
render: h => h(App) // 渲染App组件
}).$mount('#app'); // 挂载到DOM上的#app元素

32
src/store/index.js
Unescape View File

@ -1,5 +1,7 @@
import Vue from 'vue'
import Vuex from 'vuex'
// 引入各个模块的 Vuex 状态管理文件
import common from './modules/common'
import user from './modules/user'
import article from './modules/article'
@ -7,18 +9,26 @@ import message from './modules/message'
import wxUserTags from './modules/wxUserTags'
import wxAccount from './modules/wxAccount'
// 注册 Vuex 插件，使其可用于 Vue 中
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
common,
user,
article,
message,
wxUserTags,
wxAccount
},
mutations: {
},
strict: true
// 使用 modules 来组织不同的子模块
modules: {
// 引入并注册各个模块
common, // 公共模块，可能用于存储一些通用的状态
user, // 用户模块，存储用户信息相关的状态
article, // 文章模块，存储与文章相关的状态
message, // 消息模块，存储消息相关的状态
wxUserTags, // 微信用户标签模块，管理微信用户标签的状态
wxAccount // 微信账号模块，管理微信账号相关的状态
},
// 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 {
namespaced: true,
state: {
ACCOUNT_TYPES:{
1:'订阅号',
2:'服务号'
},
accountList:[],
selectedAppid:''
},
mutations: {
updateAccountList (state, list) {
state.accountList = list
if(!list.length)return
if(!state.selectedAppid){
let appidCookie = Vue.cookie.get('appid')
let selectedAppid = appidCookie?appidCookie:list[0].appid
this.commit('wxAccount/selectAccount',selectedAppid)
}
},
selectAccount (state, appid) {
Vue.cookie.set('appid',appid)
let oldAppid = state.selectedAppid
state.selectedAppid = appid
if(oldAppid){//切换账号时刷新网页
location.reload();
}
},
}
}
// Vuex模块启用命名空间
namespaced: true,
// Vuex的state，用来存储应用状态
state: {
// 账户类型，映射数字ID到账户类型名称
ACCOUNT_TYPES: {
1: '订阅号',
2: '服务号'
},
// 存储账户列表
accountList: [],
// 当前选中的Appid，用来标识选择的账号
selectedAppid: ''
},
// Vuex的mutations，用来修改state
mutations: {
// 更新账户列表
updateAccountList (state, list) {
// 更新state中的accountList
state.accountList = list;
// 如果列表为空，直接返回
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 {
namespaced: true,
state: {
tags:[]
},
mutations: {
updateTags (state, tags) {
state.tags = tags
}
}
// 启用 Vuex 模块的命名空间，避免命名冲突
namespaced: true,
// state 存储模块的状态
state: {
// 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 merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'
const baseUrl = '/wx'
const baseUrl = '/wx' // 设置请求的基础路径
// 创建axios实例
const http = axios.create({
timeout: 1000 * 30,
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
timeout: 1000 * 30, // 设置请求超时为30秒
withCredentials: true, // 允许携带跨域请求的cookie
headers: {
'Content-Type': 'application/json; charset=utf-8' // 默认请求头为json格式
}
})
/**
* 请求拦截
*/
* 请求拦截器
* 在每个请求发送之前，加入token（从cookie中获取）
*/
http.interceptors.request.use(config => {
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
return config
config.headers['token'] = Vue.cookie.get('token') // 在请求头中加入token
return config // 返回请求配置
}, error => {
return Promise.reject(error)
return Promise.reject(error) // 请求出错时，返回Promise拒绝
})
/**
* 响应拦截
*/
* 响应拦截器
* 对响应数据进行拦截处理
* 如果返回的状态码为401（未授权），则清除登录信息并跳转到登录页
*/
http.interceptors.response.use(response => {
if (response.data && response.data.code === 401) { // 401, token失效
clearLoginInfo()
router.push({ name: 'login' })
}
return response
if (response.data && response.data.code === 401) { // 判断返回的code是否为401，代表token失效
clearLoginInfo() // 清除登录信息
router.push({ name: 'login' }) // 跳转到登录页面
}
return response // 返回响应数据
}, error => {
return Promise.reject(error)
return Promise.reject(error) // 响应出错时，返回Promise拒绝
})
/**
* 请求地址处理
* @param {*} actionName action方法名称
*/
* 请求地址处理函数
* @param {*} actionName 接口的名称，拼接成完整的URL
* @returns {string} 拼接后的完整URL
*/
http.adornUrl = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
return baseUrl + actionName
// 在开发环境下，如果开启了代理，则请求路径会带上代理前缀
return baseUrl + actionName // 返回完整的请求URL
}
/**
* get请求参数处理
* @param {*} params 参数对象
* @param {*} openDefultParams 是否开启默认参数?
*/
* get请求的参数处理
* @param {*} params 请求的参数对象
* @param {*} openDefultParams 是否开启默认参数
* @returns {object} 处理后的参数对象
*/
http.adornParams = (params = {}, openDefultParams = true) => {
var defaults = {
't': new Date().getTime()
}
return openDefultParams ? merge(defaults, params) : params
const defaults = {
't': new Date().getTime() // 添加时间戳参数，防止缓存
}
return openDefultParams ? merge(defaults, params) : params // 合并默认参数和传入的参数
}
/**
* post请求数据处理
* @param {*} data 数据对象
* @param {*} openDefultdata 是否开启默认数据?
* @param {*} contentType 数据格式
* json: 'application/json; charset=utf-8'
* form: 'application/x-www-form-urlencoded; charset=utf-8'
*/
* post请求的数据处理
* @param {*} data 请求的数据对象
* @param {*} openDefultdata 是否开启默认数据
* @param {*} contentType 数据格式类型（'json'或'form'）
* @returns {string} 处理后的数据
*/
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
var defaults = {
't': new Date().getTime()
}
data = openDefultdata ? merge(defaults, data) : data
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
const defaults = {
't': new Date().getTime() // 添加时间戳参数，防止缓存
}
data = openDefultdata ? merge(defaults, data) : 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'
/**
* 获取uuid
*/
* 获取UUID
* 生成一个标准的UUID（例如：xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx）
* 使用随机数和指定格式的规则生成UUID
*/
export function getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
}
/**
* 是否有权限
* @param {*} key
*/
* 检查是否有某个权限
* @param {*} key 权限的标识符
* @returns {boolean} 如果权限列表中包含该权限返回true，否则返回false
*/
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 {*} id
* @param {*} pid
*/
* 将平面数据转换为树形数据
* @param {*} data 原始平面数据
* @param {*} id 唯一标识符字段，默认为'id'
* @param {*} pid 父级标识符字段，默认为'parentId'
* @returns {Array} 转换后的树形数据
*/
export function treeDataTranslate(data, id = 'id', pid = 'parentId') {
var res = []
var temp = {}
for (var i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
for (var k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'] = []
}
if (!temp[data[k][pid]]['_level']) {
temp[data[k][pid]]['_level'] = 1
}
data[k]['_level'] = temp[data[k][pid]]._level + 1
temp[data[k][pid]]['children'].push(data[k])
} else {
res.push(data[k])
}
}
return res
var res = [] // 存储最终的树形结构
var temp = {} // 临时存储每个节点，以便快速查找父节点
// 将数据转换为临时对象，key为节点的id，值为节点本身
for (var i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
// 遍历数据，根据pid将节点组织成树形结构
for (var k = 0; k < data.length; k++) {
// 如果节点的父节点存在，并且当前节点的id不等于父节点的id
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
// 如果父节点没有'children'属性，则初始化为数组
if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'] = []
}
// 如果父节点没有'_level'属性，则设置为1
if (!temp[data[k][pid]]['_level']) {
temp[data[k][pid]]['_level'] = 1
}
// 当前节点的级别为父节点的级别+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() {
Vue.cookie.delete('token')
//store.commit('resetStore')
router.options.isAddDynamicMenuRoutes = false
// 删除cookie中的'token'
Vue.cookie.delete('token')
// 目前注释掉了重置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) {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
/**
* 手机号码
* @param {*} s
*/
export function isMobile(s) {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
/**
* 验证手机号码格式（中国手机号）
* @param {*} s - 需要验证的手机号
* @returns {boolean} - 返回是否是有效的手机号码
*/
export function isMobile(s) {
return /^1[0-9]{10}$/.test(s)
}
/**
* 电话号码
* @param {*} s
*/
export function isPhone(s) {
}
/**
* 验证固定电话号码格式
* @param {*} s - 需要验证的电话号码
* @returns {boolean} - 返回是否是有效的电话号码（包括区号和本地号码）
*/
export function isPhone(s) {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
/**
* URL地址
* @param {*} s
*/
export function isURL(s) {
}
/**
* 验证URL地址格式
* @param {*} s - 需要验证的URL地址
* @returns {boolean} - 返回是否是有效的URL地址（包括http或https协议）
*/
export function isURL(s) {
return /^http[s]?:\/\/.*/.test(s)
}
}

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

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

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

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

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

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

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

@ -1,7 +1,9 @@
<template>
<main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
<!-- 主入口标签页 s -->
<el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true" @tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
<!-- 如果当前路由元数据中包含isTab，则显示标签页组件 -->
<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">
<i class="el-icon-arrow-down el-icon--right"></i>
<el-dropdown-menu slot="dropdown">
@ -11,17 +13,19 @@
<el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 循环渲染标签页 -->
<el-tab-pane v-for="item in mainTabs" :key="item.name" :label="item.title" :name="item.name">
<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>
<router-view v-if="item.name === mainTabsActiveName" />
</keep-alive>
</el-card>
</el-tab-pane>
</el-tabs>
<!-- 主入口标签页 e -->
<!-- 如果当前路由不包含isTab，则显示单个页面 -->
<el-card v-else :body-style="siteContentViewHeight">
<keep-alive>
<router-view />
@ -31,73 +35,80 @@
</template>
<script>
import { isURL } from '@/utils/validate'
import { isURL } from '@/utils/validate' // 导入URL验证工具
export default {
inject: ['refresh'],
inject: ['refresh'], // 注入全局的刷新方法
data() {
return {
// 组件的本地状态（当前为空）
}
},
computed: {
// 计算属性，获取文档客户端高度
documentClientHeight: {
get() { return this.$store.state.common.documentClientHeight }
},
// 计算属性，获取和设置当前激活的菜单名称
menuActiveName: {
get() { return this.$store.state.common.menuActiveName },
set(val) { this.$store.commit('common/updateMenuActiveName', val) }
},
// 计算属性，获取和设置主标签页列表
mainTabs: {
get() { return this.$store.state.common.mainTabs },
set(val) { this.$store.commit('common/updateMainTabs', val) }
},
// 计算属性，获取和设置当前激活的标签页名称
mainTabsActiveName: {
get() { return this.$store.state.common.mainTabsActiveName },
set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
},
// 计算属性，根据条件计算内容视图的高度
siteContentViewHeight() {
var height = this.documentClientHeight - 50 - 30 - 2
if (this.$route.meta.isTab) {
height -= 40
// 如果当前路由的meta中包含iframeUrl且为有效URL，则设置固定高度；否则设置最小高度
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
}
return { minHeight: height + 'px' }
}
},
methods: {
// tabs, 选中tab
// 选中标签页的处理方法
selectedTabHandle(tab) {
tab = this.mainTabs.filter(item => item.name === tab.name)
if (tab.length >= 1) {
this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
}
},
// tabs, 删除tab
// 删除标签页的处理方法
removeTabHandle(tabName) {
this.$store.commit('common/removeTab', tabName)
},
// tabs, 关闭当前
// 关闭当前标签页的处理方法
tabsCloseCurrentHandle() {
this.removeTabHandle(this.mainTabsActiveName)
},
// tabs, 关闭其它
// 关闭其他标签页的处理方法
tabsCloseOtherHandle() {
this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
},
// tabs, 关闭全部
// 关闭全部标签页的处理方法
tabsCloseAllHandle() {
this.mainTabs = []
this.menuActiveName = ''
this.$router.push({ name: 'home' })
},
// tabs, 刷新当前
tabsRefreshCurrentHandle() {
var tab = this.$route
this.removeTabHandle(tab.name)
this.$nextTick(() => {
this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
})
}
// 刷新当前标签页的处理方法（注意：此方法在methods中未定义，但在template中被调用，可能是个遗漏或错误）
// 应为 tabsRefreshCurrentHandle 而不是 refresh() 直接调用，或者需要在methods中定义tabsRefreshCurrentHandle
// tabsRefreshCurrentHandle() {
// var tab = this.$route
// this.removeTabHandle(tab.name)
// 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>
<!-- 使用Element UI的对话框组件 -->
<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-item label="账号">
<span>{{ userName }}</span>
</el-form-item>
<!-- 输入原密码 -->
<el-form-item label="原密码" prop="password">
<el-input type="password" v-model="dataForm.password"></el-input>
</el-form-item>
<!-- 输入新密码 -->
<el-form-item label="新密码" prop="newPassword">
<el-input type="password" v-model="dataForm.newPassword"></el-input>
</el-form-item>
<!-- 确认新密码 -->
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="dataForm.confirmPassword"></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>
@ -22,9 +29,10 @@
</template>
<script>
import { clearLoginInfo } from '@/utils'
import { clearLoginInfo } from '@/utils' // 引入清除登录信息的工具函数
export default {
data() {
// 验证确认密码与新密码是否一致的函数
var validateConfirmPassword = (rule, value, callback) => {
if (this.dataForm.newPassword !== value) {
callback(new Error('确认密码与新密码不一致'))
@ -33,12 +41,15 @@ export default {
}
}
return {
// 对话框显示状态
visible: false,
// 表单数据
dataForm: {
password: '',
newPassword: '',
confirmPassword: ''
password: '', // 原密码
newPassword: '', // 新密码
confirmPassword: '' // 确认密码
},
// 表单验证规则
dataRule: {
password: [
{ required: true, message: '原密码不能为空', trigger: 'blur' }
@ -48,55 +59,65 @@ export default {
],
confirmPassword: [
{ required: true, message: '确认密码不能为空', trigger: 'blur' },
{ validator: validateConfirmPassword, trigger: 'blur' }
{ validator: validateConfirmPassword, trigger: 'blur' } // 自定义验证规则
]
}
}
},
computed: {
// 计算属性，用于获取当前用户名
userName: {
get() { return this.$store.state.user.name }
},
// 计算属性，用于获取和设置主标签页
mainTabs: {
get() { return this.$store.state.common.mainTabs },
set(val) { this.$store.commit('common/updateMainTabs', val) }
}
},
methods: {
// 初始化
// 初始化方法，显示对话框并重置表单
init() {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
})
},
// 表单提交
// 表单提交方法
dataFormSubmit() {
// 验证表单
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 发送请求修改密码
this.$http({
url: this.$http.adornUrl('/sys/user/password'),
method: 'post',
data: this.$http.adornData({
url: this.$http.adornUrl('/sys/user/password'), // 请求地址
method: 'post', // 请求方法
data: this.$http.adornData({ // 发送的数据
'password': this.dataForm.password,
'newPassword': this.dataForm.newPassword
})
}).then(({ data }) => {
if (data && data.code === 200) {
// 密码修改成功
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
// 关闭对话框
this.visible = false
this.$nextTick(() => {
// 清空主标签页
this.mainTabs = []
// 清除登录信息
clearLoginInfo()
// 重定向到登录页面
this.$router.replace({ name: 'login' })
})
}
})
} else {
// 密码修改失败，显示错误信息
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>
<!-- 导航栏组件，类名根据navbarLayoutType动态设置 -->
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
<!-- 导航栏头部，包含品牌标识 -->
<div class="site-navbar__header">
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
<!-- 大尺寸品牌标识，点击返回首页 -->
<a class="site-navbar__brand-lg" href="javascript:;">微信管理系统</a>
<!-- 小尺寸品牌标识，点击无效果 -->
<a class="site-navbar__brand-mini" href="javascript:;">W</a>
</h1>
</div>
<!-- 导航栏主体，包含菜单 -->
<div class="site-navbar__body clearfix">
<!-- 左侧菜单，包含侧边栏折叠/展开按钮 -->
<el-menu class="site-navbar__menu" mode="horizontal">
<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>
</el-menu-item>
</el-menu>
<!-- 右侧菜单，包含设置、微信账号选择、用户信息等 -->
<el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
<!-- 设置菜单项 -->
<el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<template slot="title">
<i class="el-icon-setting"></i>
</template>
</el-menu-item>
<!-- 微信账号选择器，需要权限验证 -->
<el-menu-item index="2" v-if="isAuth('wx:wxaccount:list')">
<template slot="title">
<wx-account-selector></wx-account-selector>
</template>
</el-menu-item>
<!-- 用户信息菜单项，包含下拉菜单 -->
<el-menu-item class="site-navbar__avatar" index="3">
<el-dropdown :show-timeout="0" placement="bottom">
<span class="el-dropdown-link">
{{ userName }}
</span>
<!-- 下拉菜单内容 -->
<el-dropdown-menu slot="dropdown">
<!-- 修改密码菜单项 -->
<el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
<!-- 退出菜单项 -->
<el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
</el-menu>
</div>
<!-- 弹窗, 修改密码 -->
<!-- 修改密码弹窗组件，根据updatePassowrdVisible显示/隐藏 -->
<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
</nav>
</template>
<script>
import UpdatePassword from './main-navbar-update-password'
import WxAccountSelector from '@/components/wx-account-selector'
import { clearLoginInfo } from '@/utils'
import UpdatePassword from './main-navbar-update-password' // 引入修改密码弹窗组件
import WxAccountSelector from '@/components/wx-account-selector' // 引入微信账号选择器组件
import { clearLoginInfo } from '@/utils' // 引入清除登录信息的工具函数
export default {
data() {
return {
updatePassowrdVisible: false
updatePassowrdVisible: false // 控制修改密码弹窗的显示/隐藏
}
},
components: {
UpdatePassword,WxAccountSelector
UpdatePassword, // 注册修改密码弹窗组件
WxAccountSelector // 注册微信账号选择器组件
},
computed: {
// 动态获取navbarLayoutType、sidebarFold、mainTabs、userName的值
navbarLayoutType: {
get() { return this.$store.state.common.navbarLayoutType }
},
@ -71,26 +87,28 @@ export default {
}
},
methods: {
// 修改密码
// 显示修改密码弹窗，并初始化
updatePasswordHandle() {
this.updatePassowrdVisible = true
this.$nextTick(() => {
this.$refs.updatePassowrd.init()
})
},
// 退出
// 处理退出操作
logoutHandle() {
this.$confirm(`确定进行[退出]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送退出请求
this.$http({
url: this.$http.adornUrl('/sys/logout'),
method: 'post',
data: this.$http.adornData()
}).then(({ data }) => {
if (data && data.code === 200) {
// 清除登录信息并重定向到登录页面
clearLoginInfo()
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>
// 导入SubMenu组件，用于递归渲染子菜单
import SubMenu from './main-sidebar-sub-menu'
export default {
name: 'sub-menu',
name: 'sub-menu', // 组件名称
props: {
menu: {
type: Object,
required: true
type: Object, // 传入一个对象作为菜单数据
required: true // 该属性为必传
},
dynamicMenuRoutes: {
type: Array,
required: true
type: Array, // 传入一个数组作为动态路由数据
required: true // 该属性为必传
}
},
components: {
SubMenu
SubMenu // 注册SubMenu组件
},
computed: {
sidebarLayoutSkin: {
get() { return this.$store.state.common.sidebarLayoutSkin }
sidebarLayoutSkin() {
// 计算属性，从Vuex store中获取sidebarLayoutSkin的值
return this.$store.state.common.sidebarLayoutSkin
}
},
methods: {
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
// 通过menuId与动态路由进行匹配，并跳转到指定路由
gotoRouteHandle(menu) {
// 从dynamicMenuRoutes数组中筛选出menuId与传入menu对象的menuId相匹配的路由
var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
// 如果找到了匹配的路由，则使用$router.push方法跳转到该路由
if (route.length >= 1) {
this.$router.push({ name: route[0].name })
}
}
}
}
</script>
</script>

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

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

39
src/views/main.vue
Unescape View File

@ -1,9 +1,16 @@
<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">
<!-- 导航栏组件 -->
<main-navbar />
<!-- 侧边栏组件 -->
<main-sidebar />
<!-- 站点内容包装器，动态设置最小高度 -->
<div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
<!-- 如果内容不需要刷新，则显示主要内容组件 -->
<main-content v-if="!$store.state.common.contentIsNeedRefresh" />
</div>
</template>
@ -11,31 +18,38 @@
</template>
<script>
// 导入子组件
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
export default {
// 提供一个名为refresh的方法，用于触发内容的刷新
provide() {
return {
// 刷新
refresh() {
// 设置内容需要刷新
this.$store.commit('common/updateContentIsNeedRefresh', true)
// 在下一个DOM更新循环之后，取消内容需要刷新的状态
this.$nextTick(() => {
this.$store.commit('common/updateContentIsNeedRefresh', false)
})
}
}
},
// 组件的本地状态
data() {
return {
loading: true
loading: true // 初始加载状态
}
},
// 注册的子组件
components: {
MainNavbar,
MainSidebar,
MainContent
},
// 计算属性，用于从Vuex store中获取和设置数据
computed: {
documentClientHeight: {
get() { return this.$store.state.common.documentClientHeight },
@ -53,29 +67,38 @@ export default {
set(val) { this.$store.commit('user/updateName', val) }
}
},
// 组件创建时执行的方法
created() {
this.getUserInfo()
this.getUserInfo() // 获取用户信息
},
// 组件挂载后执行的方法
mounted() {
this.resetDocumentClientHeight()
this.resetDocumentClientHeight() // 重置窗口可视高度
},
// 组件的方法
methods: {
// 重置窗口可视高度
// 重置窗口可视高度的方法
resetDocumentClientHeight() {
// 初始设置
this.documentClientHeight = document.documentElement['clientHeight']
// 绑定窗口大小改变事件，以动态更新高度
window.onresize = () => {
this.documentClientHeight = document.documentElement['clientHeight']
}
},
// 获取当前管理员信息
// 获取当前管理员信息的方法
getUserInfo() {
// 发送HTTP GET请求获取用户信息
this.$http({
url: this.$http.adornUrl('/sys/user/info'),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
// 如果请求成功且返回码为200
if (data && data.code === 200) {
// 更新加载状态
this.loading = false
// 更新用户ID和用户名
this.userId = data.user.userId
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>
<!-- Dialog弹框，用于配置云存储 -->
<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="存储类型">
<el-radio-group v-model="dataForm.type">
<el-radio :label="1">七牛</el-radio>
<el-radio :label="2">阿里云</el-radio>
<el-radio :label="3">腾讯云</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="dataForm.type === 1">
<el-form-item label="域名">
<el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input>
</el-form-item>
<el-form-item label="路径前缀">
<el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input>
</el-form-item>
<el-form-item label="AccessKey">
<el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input>
</el-form-item>
<el-form-item label="SecretKey">
<el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input>
</el-form-item>
<el-form-item label="空间名">
<el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input>
</el-form-item>
</template>
<template v-else-if="dataForm.type === 2">
<el-form-item label="域名">
<el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名"></el-input>
</el-form-item>
<el-form-item label="路径前缀">
<el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
</el-form-item>
<el-form-item label="EndPoint">
<el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
</el-form-item>
<el-form-item label="AccessKeyId">
<el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
</el-form-item>
<el-form-item label="AccessKeySecret">
<el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
</el-form-item>
<el-form-item label="BucketName">
<el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
</el-form-item>
</template>
<template v-else-if="dataForm.type === 3">
<el-form-item label="域名">
<el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input>
</el-form-item>
<el-form-item label="路径前缀">
<el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input>
</el-form-item>
<el-form-item label="AppId">
<el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
</el-form-item>
<el-form-item label="SecretId">
<el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input>
</el-form-item>
<el-form-item label="SecretKey">
<el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input>
</el-form-item>
<el-form-item label="BucketName">
<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>
<!-- 表单组件，model 绑定 dataForm，rules 绑定 dataRule -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
<!-- 存储类型选择项 -->
<el-form-item size="mini" label="存储类型">
<el-radio-group v-model="dataForm.type">
<el-radio :label="1">七牛</el-radio>
<el-radio :label="2">阿里云</el-radio>
<el-radio :label="3">腾讯云</el-radio>
</el-radio-group>
</el-form-item>
<!-- 当选择七牛云时显示七牛相关配置项 -->
<template v-if="dataForm.type === 1">
<el-form-item label="域名">
<el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input>
</el-form-item>
<el-form-item label="路径前缀">
<el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input>
</el-form-item>
<el-form-item label="AccessKey">
<el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input>
</el-form-item>
<el-form-item label="SecretKey">
<el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input>
</el-form-item>
<el-form-item label="空间名">
<el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input>
</el-form-item>
</template>
<!-- 当选择阿里云时显示阿里云相关配置项 -->
<template v-else-if="dataForm.type === 2">
<el-form-item label="域名">
<el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名"></el-input>
</el-form-item>
<el-form-item label="路径前缀">
<el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
</el-form-item>
<el-form-item label="EndPoint">
<el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
</el-form-item>
<el-form-item label="AccessKeyId">
<el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
</el-form-item>
<el-form-item label="AccessKeySecret">
<el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
</el-form-item>
<el-form-item label="BucketName">
<el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
</el-form-item>
</template>
<!-- 当选择腾讯云时显示腾讯云相关配置项 -->
<template v-else-if="dataForm.type === 3">
<el-form-item label="域名">
<el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input>
</el-form-item>
<el-form-item label="路径前缀">
<el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input>
</el-form-item>
<el-form-item label="AppId">
<el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
</el-form-item>
<el-form-item label="SecretId">
<el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input>
</el-form-item>
<el-form-item label="SecretKey">
<el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input>
</el-form-item>
<el-form-item label="BucketName">
<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>
</template>
</template>
<script>
export default {
data() {
return {
visible: false,
dataForm: {},
dataRule: {}
}
},
methods: {
init(id) {
this.visible = true
this.$http({
url: this.$http.adornUrl('/sys/oss/config'),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
this.dataForm = data && data.code === 200 ? data.config : []
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl('/sys/oss/saveConfig'),
method: 'post',
data: this.$http.adornData(this.dataForm)
}).then(({ data }) => {
if (data && data.code === 200) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
// 定义组件的数据
data() {
return {
// 控制弹框显示/隐藏
visible: false,
// 存储表单数据
dataForm: {},
// 存储表单验证规则
dataRule: {}
}
},
methods: {
// 初始化方法，用于根据 id 获取配置
init(id) {
this.visible = true // 显示弹框
// 发送请求获取存储配置
this.$http({
url: this.$http.adornUrl('/sys/oss/config'), // 请求路径
method: 'get', // GET 请求
params: this.$http.adornParams() // 参数
}).then(({ data }) => {
// 如果获取成功，则填充表单数据
this.dataForm = data && data.code === 200 ? data.config : []
})
},
// 表单提交方法
dataFormSubmit() {
// 验证表单是否有效
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 提交表单数据
this.$http({
url: this.$http.adornUrl('/sys/oss/saveConfig'), // 请求保存配置
method: 'post', // POST 请求
data: this.$http.adornData(this.dataForm) // 提交表单数据
}).then(({ data }) => {
if (data && data.code === 200) {
// 如果操作成功，显示成功提示并关闭弹框
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false // 关闭弹框
}
})
} else {
// 显示错误信息
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script>

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

@ -1,87 +1,105 @@
<template>
<div @click="selectFile">
<input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
<div>{{uploading?infoText:'上传文件'}}</div>
</div>
</template>
<script>
// 腾讯云对象存储组件，文件直接上传到腾讯云，可在后端服务无对应外网权限时使用
// 使用本组件需引入腾讯云对象存储依赖 <script src="https://unpkg.com/cos-js-sdk-v5@0.5.23/dist/cos-js-sdk-v5.min.js" async></script>
<!-- 触发文件选择的区域，点击时触发 selectFile 方法 -->
<div @click="selectFile">
<!-- 隐藏的文件输入框，通过 click 触发文件选择 -->
<input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
<!-- 显示上传状态文本，如果正在上传则显示 infoText，否则显示 "上传文件" -->
<div>{{uploading ? infoText : '上传文件'}}</div>
</div>
</template>
<script>
// 腾讯云对象存储组件，允许文件直接上传到腾讯云，适合后端没有外网权限时使用
// 使用本组件时需引入腾讯云对象存储 SDK，具体请参考：https://unpkg.com/cos-js-sdk-v5@0.5.23/dist/cos-js-sdk-v5.min.js
var cos;
export default {
name: "oss-uploader",
data() {
return {
uploading: false,
infoText:"上传中...",
cosConfig:[]
}
},
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)
})
}
}
name: "oss-uploader", // 组件名称
data() {
return {
uploading: false, // 上传状态，默认未上传
infoText: "上传中...", // 上传中显示的提示文本
cosConfig: [] // 腾讯云 COS 配置数据
}
</script>
<style scoped>
</style>
},
mounted() {
// 组件加载完毕后，发起请求获取 COS 配置数据
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>
<!-- 点击外部div触发文件选择操作 -->
<div @click="selectFile">
<input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
<div>{{uploading?infoText:'上传文件'}}</div>
<!-- 隐藏的文件上传input，选择文件后触发onFileChange方法 -->
<input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
<!-- 显示上传中的状态或默认的“上传文件”文本 -->
<div>{{uploading ? infoText : '上传文件'}}</div>
</div>
</template>
<script>
export default {
name: "oss-uploader",
</template>
<script>
export default {
name: "oss-uploader", // 组件名称为 "oss-uploader"
data() {
return {
uploading: false,
infoText: "上传中...",
cosConfig: []
}
return {
uploading: false, // 上传状态，默认为false
infoText: "上传中...", // 上传中文本，上传中时显示此文本
cosConfig: [] // 存储云存储配置
}
},
mounted() {
this.$http({
url: this.$http.adornUrl('/sys/oss/config'),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 200 && data.config.type) {
this.cosConfig = data.config
} else {
this.$message.error('请先配置云存储相关信息！')
}
})
// 组件挂载后请求获取云存储的配置
this.$http({
url: this.$http.adornUrl('/sys/oss/config'), // 获取配置的API接口
method: 'get', // 使用GET请求
params: this.$http.adornParams() // 请求参数
}).then(({ data }) => {
// 请求成功后处理返回数据
if (data && data.code === 200 && data.config.type) {
this.cosConfig = data.config // 设置云存储配置
} 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 formData = new FormData();
formData.append("file", file)
this.$http({
url: this.$http.adornUrl('/sys/oss/upload'),
method: 'post',
data: formData
}).then(({ data }) => {
console.log(data)
if (data && data.code === 200) {
this.$emit('uploaded', data.url)
} else {
this.$message.error("文件上传失败：" + data.msg)
}
this.uploading = false;
})
}
// 选择文件的事件处理函数
selectFile() {
if (!this.uploading) {
// 如果当前不是上传中状态，则模拟点击隐藏的input元素，打开文件选择框
this.$refs.fileInput.click();
}
},
// 文件选择后触发的事件处理函数
onFileChange() {
let file = this.$refs.fileInput.files[0]; // 获取文件对象
this.uploading = true; // 设置上传状态为true，表示正在上传
let formData = new FormData();
formData.append("file", file); // 将文件添加到formData对象中
// 发起POST请求上传文件
this.$http({
url: this.$http.adornUrl('/sys/oss/upload'), // 上传文件的API接口
method: 'post', // 使用POST请求
data: formData // 上传的文件数据
}).then(({ data }) => {
// 请求成功后处理返回的数据
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>
export default {
data() {
return {
dataForm: {},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalCount: 0,
dataListLoading: false,
dataListSelections: [],
configVisible: false,
uploadVisible: false
}
},
components: {
Config: () => import('./oss-config'),
OssUploader: () => import('./oss-uploader')
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/oss/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'sidx': 'id',
'order': 'desc'
})
}).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
},
// 云存储配置
configHandle() {
this.configVisible = true
this.$nextTick(() => {
this.$refs.config.init()
})
},
// 上传文件
uploadHandle() {
this.uploadVisible = true
this.$nextTick(() => {
this.$refs.upload.init()
})
},
// 删除
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)
}
}
data() {
return {
// 表单数据模型
dataForm: {},
// 文件列表数据
dataList: [],
// 当前页码
pageIndex: 1,
// 每页显示数量
pageSize: 10,
// 总记录数
totalCount: 0,
// 表格加载状态
dataListLoading: false,
// 存储已选中项
dataListSelections: [],
// 云存储配置弹窗是否显示
configVisible: false,
// 上传文件弹窗是否显示
uploadVisible: false
}
},
components: {
// 动态引入云存储配置组件
Config: () => import('./oss-config'),
// 动态引入文件上传组件
OssUploader: () => import('./oss-uploader')
},
// 组件激活时加载数据列表
activated() {
this.getDataList();
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl('/sys/oss/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex, // 当前页
'limit': this.pageSize, // 每页条数
'sidx': 'id', // 排序字段
'order': 'desc' // 排序方式
})
}).then(({ data }) => {
// 如果请求成功，设置dataList和totalCount
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;
},
}
}
</script>

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

@ -1,96 +1,117 @@
<template>
<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="paramKey">
<el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
</el-form-item>
<el-form-item label="参数值" prop="paramValue">
<el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<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>
<!-- 弹窗组件，显示标题是“新增”或“修改”取决于dataForm.id -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<!-- 表单组件，绑定数据模型为dataForm，表单校验规则为dataRule，按回车键提交表单 -->
<el-form-item label="参数名" prop="paramKey">
<!-- 参数名输入框，验证参数名 -->
<el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
</el-form-item>
<el-form-item label="参数值" prop="paramValue">
<!-- 参数值输入框，验证参数值 -->
<el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<!-- 备注输入框 -->
<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>
<script>
export default {
data() {
return {
visible: false,
dataForm: {
id: 0,
paramKey: '',
paramValue: '',
remark: ''
},
dataRule: {
paramKey: [
{ required: true, message: '参数名不能为空', trigger: 'blur' }
],
paramValue: [
{ required: true, message: '参数值不能为空', trigger: 'blur' }
]
}
}
},
methods: {
init(id) {
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 200) {
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)
}
})
}
})
}
}
data() {
return {
visible: false, // 控制弹窗的显示与隐藏
dataForm: {
id: 0, // 数据表单的ID，新增时为0，修改时为已有的ID
paramKey: '', // 参数名
paramValue: '',// 参数值
remark: '' // 备注
},
dataRule: {
paramKey: [
{ required: true, message: '参数名不能为空', trigger: 'blur' }
],
paramValue: [
{ required: true, message: '参数值不能为空', trigger: 'blur' }
]
}
}
},
methods: {
// 初始化表单，设置ID并请求数据（如果是编辑状态）
init(id) {
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields() // 重置表单字段
if (this.dataForm.id) {
// 如果是编辑，发送请求获取已有数据
this.$http({
url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 200) {
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, // 如果是编辑，传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>

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

@ -1,134 +1,172 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<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 prop="id" header-align="center" align="center" width="80" label="ID">
</el-table-column>
<el-table-column prop="paramKey" header-align="center" align="center" label="参数名">
</el-table-column>
<el-table-column prop="paramValue" header-align="center" align="center" label="参数值">
</el-table-column>
<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">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<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>
<!-- 表单部分，包含参数名的查询框和操作按钮 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 表单项，使用 inline 布局，按回车触发查询 -->
<el-form-item>
<el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
<!-- 输入框，绑定 model 为 dataForm.paramKey，允许清除内容 -->
</el-form-item>
<el-form-item>
<!-- 查询按钮，点击时触发 getDataList 方法 -->
<el-button @click="getDataList()">查询</el-button>
<!-- 新增按钮，点击时触发 addOrUpdateHandle 方法 -->
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
<!-- 批量删除按钮，点击时触发 deleteHandle 方法，只有当有选中的数据时可用 -->
<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<!-- 表格部分，用于显示数据列表 -->
<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>
<!-- ID列 -->
<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
<!-- 参数名列 -->
<el-table-column prop="paramKey" header-align="center" align="center" label="参数名"></el-table-column>
<!-- 参数值列 -->
<el-table-column prop="paramValue" header-align="center" align="center" label="参数值"></el-table-column>
<!-- 备注列 -->
<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>
<script>
import AddOrUpdate from './config-add-or-update'
export default {
data() {
return {
dataForm: {
paramKey: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalCount: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
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(() => { })
}
}
data() {
return {
// 表单数据
dataForm: {
paramKey: ''
},
// 数据列表
dataList: [],
// 当前页
pageIndex: 1,
// 每页显示条数
pageSize: 10,
// 总数据条数
totalCount: 0,
// 数据加载状态
dataListLoading: false,
// 表格选中的数据
dataListSelections: [],
// 新增/修改弹窗是否可见
addOrUpdateVisible: false
}
},
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>

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

@ -1,90 +1,107 @@
<template>
<div class="mod-log">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
</el-form-item>
</el-form>
<el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
<el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
</el-table-column>
<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-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="params" 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>
<el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址">
</el-table-column>
<el-table-column prop="createDate" header-align="center" align="center" width="180" 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>
</div>
<!-- 搜索表单部分 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 输入框，绑定到 dataForm.key，用于搜索用户操作或者用户名 -->
<el-form-item>
<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
</el-form-item>
<el-form-item>
<!-- 查询按钮，点击时触发 getDataList 方法 -->
<el-button @click="getDataList()">查询</el-button>
</el-form-item>
</el-form>
<!-- 表格显示数据 -->
<el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
<!-- 表格的列定义 -->
<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
<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-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="params" 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>
<el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址"></el-table-column>
<el-table-column prop="createDate" header-align="center" align="center" width="180" 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>
</div>
</template>
<script>
export default {
data() {
return {
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalCount: 0,
dataListLoading: false,
selectionDataList: []
}
},
created() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/log/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key,
'sidx': 'id',
'order': 'desc'
})
}).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()
}
}
data() {
return {
// 表单数据，包含一个搜索条件 'key'
dataForm: {
key: ''
},
// 数据列表，存储表格数据
dataList: [],
// 当前页
pageIndex: 1,
// 每页显示的数据条数
pageSize: 10,
// 总数据条数
totalCount: 0,
// 数据加载状态
dataListLoading: false,
// 选中的数据（当前表格中未使用）
selectionDataList: []
}
},
created() {
// 组件创建时，获取数据列表
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
// 启动加载状态
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/log/list'), // 请求日志列表接口
method: 'get',
params: this.$http.adornParams({
// 请求参数，包含分页、搜索关键字、排序字段、排序方式等
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key, // 搜索条件
'sidx': 'id', // 排序字段，按照 id 排序
'order': 'desc' // 排序方式，降序
})
}).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() // 重新获取数据
}
}
}
</script>

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

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

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

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

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

@ -1,111 +1,148 @@
<template>
<!-- 弹窗组件，显示角色的新增或修改表单 -->
<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-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</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>
</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-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<!-- 角色名称输入框 -->
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
</el-form-item>
<!-- 备注输入框 -->
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</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>
</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>
<script>
import { treeDataTranslate } from '@/utils'
export default {
</template>
<script>
// 导入工具函数，用于将树形数据转换
import { treeDataTranslate } from '@/utils'
export default {
data() {
return {
visible: false,
menuList: [],
menuListTreeProps: {
label: 'name',
children: 'children'
},
dataForm: {
id: 0,
roleName: '',
remark: ''
},
dataRule: {
roleName: [
{ required: true, message: '角色名称不能为空', trigger: 'blur' }
]
}
}
return {
// 弹窗显示状态
visible: false,
// 菜单列表，用于树形展示
menuList: [],
// 用于el-tree组件的树形数据配置
menuListTreeProps: {
label: 'name', // 显示名称字段
children: 'children' // 子节点字段
},
// 表单数据
dataForm: {
id: 0, // 角色ID，新增时为0
roleName: '', // 角色名称
remark: '' // 备注
},
// 表单验证规则
dataRule: {
roleName: [
{ required: true, message: '角色名称不能为空', trigger: 'blur' } // 角色名称不能为空
]
}
}
},
methods: {
init(id) {
this.dataForm.id = id || 0
this.$http({
url: this.$http.adornUrl('/sys/menu/list'),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
this.menuList = treeDataTranslate(data, 'menuId')
}).then(() => {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.$refs.menuListTree.setCheckedKeys([])
})
}).then(() => {
if (this.dataForm.id) {
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
this.dataForm.remark = data.role.remark
data.role.menuIdList.forEach(item => {
this.$refs.menuListTree.setChecked(item, true);
});
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
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 }) => {
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)
}
})
}
})
}
// 初始化方法，传入角色ID来初始化表单
init(id) {
this.dataForm.id = id || 0 // 如果没有传入ID，则初始化为0（新增）
// 获取菜单列表并转换为树形结构
this.$http({
url: this.$http.adornUrl('/sys/menu/list'),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
this.menuList = treeDataTranslate(data, 'menuId') // 转换为树形数据
}).then(() => {
// 显示弹窗
this.visible = true
// 在下一次DOM更新后执行
this.$nextTick(() => {
// 重置表单字段
this.$refs['dataForm'].resetFields()
// 清除选中的菜单
this.$refs.menuListTree.setCheckedKeys([])
})
}).then(() => {
// 如果是修改操作（有ID），获取角色详细信息
if (this.dataForm.id) {
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
this.dataForm.remark = data.role.remark
// 设置菜单树选中的节点
data.role.menuIdList.forEach(item => {
this.$refs.menuListTree.setChecked(item, true)
})
}
})
}
})
},
// 表单提交方法
dataFormSubmit() {
// 校验表单数据
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 提交数据
this.$http({
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), // 根据ID决定是保存还是更新
method: 'post',
data: this.$http.adornData({
'roleId': this.dataForm.id || undefined, // 角色ID
'roleName': this.dataForm.roleName, // 角色名称
'remark': this.dataForm.remark, // 备注
// 获取已选中的菜单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>
<div class="mod-role">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<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 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-table-column>
<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">
<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>
</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>
<script>
import AddOrUpdate from './role-add-or-update'
export default {
<!-- 弹窗组件，显示角色的新增或修改表单 -->
<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-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
</el-form-item>
<!-- 备注输入框 -->
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</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>
</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>
<script>
// 导入工具函数，用于将树形数据转换
import { treeDataTranslate } from '@/utils'
export default {
data() {
return {
dataForm: {
roleName: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalCount: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
return {
// 弹窗显示状态
visible: false,
// 菜单列表，用于树形展示
menuList: [],
// 用于el-tree组件的树形数据配置
menuListTreeProps: {
label: 'name', // 显示名称字段
children: 'children' // 子节点字段
},
components: {
AddOrUpdate
// 表单数据
dataForm: {
id: 0, // 角色ID，新增时为0
roleName: '', // 角色名称
remark: '' // 备注
},
activated() {
this.getDataList()
// 表单验证规则
dataRule: {
roleName: [
{ required: true, message: '角色名称不能为空', trigger: 'blur' } // 角色名称不能为空
]
}
}
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/role/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'roleName': this.dataForm.roleName
})
}).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.roleId)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/sys/role/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(() => { })
}
// 初始化方法，传入角色ID来初始化表单
init(id) {
this.dataForm.id = id || 0 // 如果没有传入ID，则初始化为0（新增）
// 获取菜单列表并转换为树形结构
this.$http({
url: this.$http.adornUrl('/sys/menu/list'),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
this.menuList = treeDataTranslate(data, 'menuId') // 转换为树形数据
}).then(() => {
// 显示弹窗
this.visible = true
// 在下一次DOM更新后执行
this.$nextTick(() => {
// 重置表单字段
this.$refs['dataForm'].resetFields()
// 清除选中的菜单
this.$refs.menuListTree.setCheckedKeys([])
})
}).then(() => {
// 如果是修改操作（有ID），获取角色详细信息
if (this.dataForm.id) {
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
this.dataForm.remark = data.role.remark
// 设置菜单树选中的节点
data.role.menuIdList.forEach(item => {
this.$refs.menuListTree.setChecked(item, true)
})
}
})
}
})
},
// 表单提交方法
dataFormSubmit() {
// 校验表单数据
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 提交数据
this.$http({
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), // 根据ID决定是保存还是更新
method: 'post',
data: this.$http.adornData({
'roleId': this.dataForm.id || undefined, // 角色ID
'roleName': this.dataForm.roleName, // 角色名称
'remark': this.dataForm.remark, // 备注
// 获取已选中的菜单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>

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

@ -6,37 +6,54 @@
<div class="weixin-bd">
<div class="weixin-header">公众号菜单</div>
<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">
<span>{{ btn.name }}</span>
</div>
<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">
<span>{{sub.name}}</span>
<span>{{ sub.name }}</span>
</div>
</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">
<i class="el-icon-plus"></i>
</div>
</li>
<!-- 菜单展开/收起图标 -->
<i class="menu-arrow arrow_out"></i>
<i class="menu-arrow arrow_in"></i>
</ul>
</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>
</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>
</div>
</div>
<!-- 发布和清空菜单的按钮组 -->
<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="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>
</template>
@ -56,6 +73,7 @@ export default {
}
},
mounted() {
// 获取当前微信菜单配置
this.getWxMenu();
},
methods: {
@ -88,7 +106,7 @@ export default {
this.selectedSubMenuIndex = i2
this.selectedButton = this.menu.buttons[i].subButtons[i2]
},
//添加菜单
// 添加菜单项（主菜单或子菜单）
addMenu(level,i) {
if (level == 1 && this.menu.buttons.length < 3) {
this.menu.buttons.push({
@ -108,7 +126,7 @@ export default {
this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
}
},
//删除菜单
// 删除选中的菜单项（主菜单或子菜单）
delMenu() {
if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
this.menu.buttons.splice(this.selectedMenuIndex, 1);
@ -118,12 +136,13 @@ export default {
this.unSelectMenu()
}
},
unSelectMenu(){//不选中任何菜单
unSelectMenu(){// 取消选中任何菜单项
this.selectedMenuLevel = 0
this.selectedMenuIndex = ''
this.selectedSubMenuIndex = ''
this.selectedButton = ''
},
// 更新微信菜单配置
updateWxMenu() {
this.$http({
url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
@ -138,7 +157,7 @@ export default {
});
},
onDrop(i,i2){//拖拽移动位置
onDrop(i,i2){// 拖拽放置菜单项（用于排序）
this.onDragOverMenu='';
if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
return

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

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

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

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

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

@ -1,22 +1,43 @@
<template>
<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="100px">
<!-- Element UI的对话框组件，根据dataForm.id是否存在来设置标题为“新增”或“修改” -->
<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-radio v-model="dataForm.isTemp" :label="true">临时</el-radio>
<el-radio v-model="dataForm.isTemp" :label="false">永久</el-radio>
<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>
</el-form-item>
<!-- 表单项：场景值 -->
<el-form-item label="场景值" prop="sceneStr">
<el-input v-model="dataForm.sceneStr" placeholder="任意字符串" maxlength="64"></el-input>
</el-form-item>
<!-- 表单项：失效时间（仅临时二维码显示） -->
<el-form-item label="失效时间/秒" prop="expireSeconds" v-if="dataForm.isTemp">
<el-input v-model="dataForm.expireSeconds" placeholder="单位：秒，最大2592000（30天）"></el-input>
<div>最大30天，当前设置：<span class="text-warning">{{dataForm.expireSeconds/(24*3600)}}天</span></div>
</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>
@ -28,54 +49,55 @@
export default {
data() {
return {
visible: false,
visible: false, // 控制对话框显示隐藏
dataForm: {
isTemp: true,
sceneStr: '',
expireSeconds: 2592000
isTemp: true, // 二维码类型：临时
sceneStr: '', // 场景值
expireSeconds: 2592000 // 失效时间，默认30天
},
dataRule: {
isTemp: [
{ required: true, message: '二维码类型不能为空', trigger: 'blur' }
{ required: true, message: '二维码类型不能为空', trigger: 'blur' } // 验证规则
],
sceneStr: [
{ required: true, message: '场景值ID不能为空', trigger: 'blur' }
{ required: true, message: '场景值ID不能为空', trigger: 'blur' } // 验证规则
],
expireSeconds: [
{ required: true, message: '该二维码失效时间不能为空', trigger: 'blur' }
{ required: true, message: '该二维码失效时间不能为空', trigger: 'blur' } // 验证规则（仅临时二维码需要）
]
}
}
},
methods: {
// 初始化方法，传入id用于修改模式
init(id) {
this.dataForm.id = id || 0
this.visible = true
this.dataForm.id = id || 0 // 设置dataForm的id属性
this.visible = true // 显示对话框
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.$refs['dataForm'].resetFields() // 重置表单
})
},
// 表单提交
// 表单提交方法
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`),
method: 'post',
data: this.$http.adornData(this.dataForm)
if (valid) { // 表单验证通过
this.$http({ // 发送请求
url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`), // 请求URL
method: 'post', // 请求方法
data: this.$http.adornData(this.dataForm) // 发送的数据
}).then(({ data }) => {
if (data && data.code === 200) {
if (data && data.code === 200) { // 请求成功
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
this.visible = false // 关闭对话框
this.$emit('refreshDataList') // 通知父组件刷新数据列表
}
})
} else {
this.$message.error(data.msg)
} else { // 请求失败
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>
<div class="mod-config">
<!-- 内联表单，用于输入查询条件和执行操作 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<!-- 输入框，用于输入场景值进行查询 -->
<el-input v-model="dataForm.sceneStr" placeholder="场景值" clearable></el-input>
</el-form-item>
<el-form-item>
<!-- 查询按钮，触发查询操作 -->
<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:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<!-- 表格，显示数据列表 -->
<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 prop="id" header-align="center" align="center" label="ID">
</el-table-column>
<el-table-column type="selection" header-align="center" align="center" width="50"></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="类型">
<span slot-scope="scope">{{scope.row.isTemp?'临时':'永久'}}</span>
</el-table-column>
<el-table-column prop="sceneStr" header-align="center" align="center" label="场景值">
<!-- 根据isTemp的值显示“临时”或“永久” -->
<span slot-scope="scope">{{scope.row.isTemp ? '临时' : '永久'}}</span>
</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="二维码图片">
<!-- 点击链接查看二维码图片 -->
<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 prop="url" header-align="center" align="center" show-overflow-tooltip label="解析后的地址">
<!-- 点击链接访问解析后的地址 -->
<a :href="scope.row.url" slot-scope="scope">{{scope.row.url}}</a>
</el-table-column>
<el-table-column prop="expireTime" header-align="center" align="center" width="100" label="失效时间">
</el-table-column>
<el-table-column prop="expireTime" header-align="center" align="center" width="100" label="失效时间"></el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<!-- 单行删除按钮 -->
<template slot-scope="scope">
<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="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>
</div>
</template>
<script>
import AddOrUpdate from './wx-qrcode-add-or-update'
export default {
data() {
return {
// 表单数据
dataForm: {
sceneStr: ''
},
// 数据列表
dataList: [],
// 当前页码
pageIndex: 1,
// 每页显示数量
pageSize: 10,
// 总页数
totalPage: 0,
// 数据加载状态
dataListLoading: false,
// 选中项
dataListSelections: [],
// 新增/修改弹窗显示状态
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate
AddOrUpdate // 引入新增/修改弹窗组件
},
activated() {
// 激活时获取数据列表
this.getDataList()
},
methods: {
@ -69,7 +88,7 @@ export default {
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/manage/wxQrCode/list'),
url: this.$http.adornUrl('/manage/wxQrCode/list'), // 请求地址
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
@ -80,63 +99,63 @@ export default {
})
}).then(({ data }) => {
if (data && data.code === 200) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
this.dataList = data.page.list // 赋值数据列表
this.totalPage = data.page.totalCount // 赋值总页数
} else {
this.dataList = []
this.totalPage = 0
this.dataList = [] // 清空数据列表
this.totalPage = 0 // 清空总页数
}
this.dataListLoading = false
this.dataListLoading = false // 结束加载状态
})
},
// 每页数
// 每页数改变时触发
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
this.pageSize = val // 更新每页显示数量
this.pageIndex = 1 // 重置当前页码
this.getDataList() // 重新获取数据列表
},
// 当前页
// 当前页改变时触发
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
this.pageIndex = val // 更新当前页码
this.getDataList() // 重新获取数据列表
},
// 多选
// 选中项改变时触发
selectionChangeHandle(val) {
this.dataListSelections = val
this.dataListSelections = val // 更新选中项
},
// 新增 / 修改
// 新增或修改操作
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.addOrUpdateVisible = true // 显示弹窗
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
this.$refs.addOrUpdate.init(id) // 初始化弹窗（传入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 ? '删除' : '批量删除'}]操作?（仅删存档）`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/manage/wxQrCode/delete'),
url: this.$http.adornUrl('/manage/wxQrCode/delete'), // 请求地址
method: 'post',
data: this.$http.adornData(ids, false)
data: this.$http.adornData(ids, false) // 发送要删除的id
}).then(({ data }) => {
if (data && data.code === 200) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => this.getDataList()
onClose: () => this.getDataList() // 操作成功后刷新数据列表
})
} 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>
<el-dialog :title="modeDesc[mode]+'用户标签'" :close-on-click-modal="false" :visible.sync="dialogVisible">
<!-- 对话框内容开始 -->
<div>
<!-- 标签选择器，用户可以选择一个标签 -->
<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-select>
<!-- 显示已选择用户的数量 -->
<div style="margin-top:20px;">已选择用户数：{{wxUsers.length}}</div>
</div>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer">
<!-- 关闭按钮 -->
<el-button @click="dialogVisible=false">关闭</el-button>
<!-- 提交按钮，根据提交状态显示不同文字 -->
<el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{submitting?'保存中...':'确定'}}</el-button>
</span>
</el-dialog>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:'wx-user-tagging',
props:{
wxUsers:Array,
name: 'wx-user-tagging',
// 接收外部传入的用户数组
props: {
wxUsers: Array,
},
data(){
return{
mode:'tagging',//操作，tagging | untagging
modeDesc:{
'tagging':'绑定',
'untagging':'解绑'
data() {
return {
// 操作模式：绑定或解绑
mode: 'tagging',
// 操作模式的描述
modeDesc: {
'tagging': '绑定',
'untagging': '解绑'
},
selectedTagid:'',
dialogVisible:false,
submitting:false
// 用户选择的标签ID
selectedTagid: '',
// 对话框显示状态
dialogVisible: false,
// 提交状态
submitting: false
}
},
// 从Vuex的state中映射数据到组件中
computed: mapState({
wxUserTags:state=>state.wxUserTags.tags,
/**
* 返回下拉选择框中的选项列表
* 假设 all= 全部标签，intersection = 用户标签交集（即所有用户都有的） ，union=用户标签并集（即至少一个用户的）
* 那么绑定时可选：all-intersection的差集，即所有用户都有的就不列出来了
* 解绑时可选：，union ，即用户有的标签都列出来
*/
tagidsInOption(){
let userTags=this.wxUsers.map(u=>u.tagidList || [])//示例：[[1,2],[],[1,3]]
if(this.mode=='tagging'){//绑定标签时可选：所有标签 - 用户标签交集
let all = this.wxUserTags.map(item=>item.id)
return all.filter(tagid=>!userTags.every(tagsIdArray=>tagsIdArray.indexOf(tagid)>-1))
}else if(this.mode=='untagging'){//解绑标签时可选：用户标签的并集
// 获取所有标签
wxUserTags: state => state.wxUserTags.tags,
// 计算可选标签列表
tagidsInOption() {
// 获取所有用户的标签ID数组
let userTags = this.wxUsers.map(u => u.tagidList || []);
// 如果是绑定模式，可选标签为所有标签减去所有用户都有的标签
if (this.mode === 'tagging') {
let all = this.wxUserTags.map(item => item.id);
return all.filter(tagid => !userTags.every(tagsIdArray => tagsIdArray.indexOf(tagid) > -1));
}
// 如果是解绑模式，可选标签为所有用户标签的并集
else if (this.mode === 'untagging') {
let unionSet = new Set();
userTags.forEach(tagsIdArray=>{
tagsIdArray.forEach(tagid => unionSet.add(tagid))
});//将用户的标签放到unionSet中去重
return Array.from(unionSet);//unionSet转为数组
userTags.forEach(tagsIdArray => {
tagsIdArray.forEach(tagid => unionSet.add(tagid));
});
return Array.from(unionSet);
}
return []
return [];
}
}),
methods:{
init(mode){
if('tagging'==mode || 'untagging'==mode){
this.mode=mode;
this.dialogVisible=true
}else{
throw('mode参数有误')
methods: {
// 初始化方法，设置操作模式和显示对话框
init(mode) {
if (mode === 'tagging' || mode === 'untagging') {
this.mode = mode;
this.dialogVisible = true;
} else {
throw ('mode参数有误');
}
},
getTagName(tagid){
let tag = this.wxUserTags.find(item=>item.id==tagid)
return tag?tag.name : "?"
// 根据标签ID获取标签名称
getTagName(tagid) {
let tag = this.wxUserTags.find(item => item.id == tagid);
return tag ? tag.name : "?";
},
dataFormSubmit(){
if(this.submitting)return
if(!this.selectedTagid){
this.$message.error('未选择标签')
return
// 提交表单数据
dataFormSubmit() {
if (this.submitting) return;
if (!this.selectedTagid) {
this.$message.error('未选择标签');
return;
}
this.submitting=true
let openidList=this.wxUsers.map(u=>u.openid)
this.submitting = true;
let openidList = this.wxUsers.map(u => u.openid);
// 发送请求，执行绑定或解绑操作
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',
data:this.$http.adornData({
tagid : this.selectedTagid,
openidList : openidList
data: this.$http.adornData({
tagid: this.selectedTagid,
openidList: openidList
})
}).then(({ data }) => {
this.submitting=false
this.submitting = false;
if (data && data.code === 200) {
// 操作成功，关闭对话框并提示用户
this.$message({
message: '操作成功,列表数据需稍后刷新查看',
type: 'success',
onClose: () =>this.dialogVisible=false
})
onClose: () => this.dialogVisible = false
});
} 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>
<div class="mod-config">
<!-- 使用内联表单，绑定数据模型，并在按下Enter键时调用获取数据列表的方法 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 用户标签选择器 -->
<el-form-item>
<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-select>
</el-form-item>
<!-- 昵称输入框 -->
<el-form-item>
<el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
</el-form-item>
<!-- 城市输入框 -->
<el-form-item>
<el-input v-model="dataForm.city" placeholder="城市" clearable></el-input>
</el-form-item>
<!-- 关注场景值输入框 -->
<el-form-item>
<el-input v-model="dataForm.qrSceneStr" placeholder="关注场景值" clearable></el-input>
</el-form-item>
<!-- 操作按钮区域 -->
<el-form-item>
<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>
<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: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-form-item>
<!-- 其他操作按钮 -->
<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>
<!-- 数据表格 -->
<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 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="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 type="selection" header-align="center" align="center" width="50"></el-table-column>
<!-- openid列 -->
<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>
<!-- 性别列，使用formatter格式化显示 -->
<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="headimgurl" header-align="center" align="center" label="头像">
<img class="headimg" slot-scope="scope" v-if="scope.row.headimgurl" :src="scope.row.headimgurl" />
</el-table-column>
<!-- 标签列，使用插槽和循环显示多个标签 -->
<el-table-column prop="tagidList" header-align="center" align="center" label="标签" show-overflow-tooltip>
<template slot-scope="scope">
<span v-for="tagid in scope.row.tagidList" :key="tagid">{{getTagName(tagid)}} </span>
</template>
</el-table-column>
<!-- 订阅时间列，使用moment格式化显示 -->
<el-table-column prop="subscribeTime" header-align="center" align="center" label="订阅时间">
<template slot-scope="scope">{{$moment(scope.row.subscribeTime).calendar()}}</template>
</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="是否关注">
<span slot-scope="scope">{{scope.row.subscribe?"是":"否"}}</span>
</el-table-column>
<!-- 操作列，包含删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="deleteHandle(scope.row.openid)">删除</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="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-tagging ref="wxUserTagging" :wxUsers="dataListSelections"></wx-user-tagging>
</div>
</template>
<script>
// 引入组件
import WxUserTagsManager from '@/components/wx-user-tags-manager'
import WxUserTagging from './wx-user-tagging'
// 从vuex中引入mapState辅助函数
import { mapState } from 'vuex'
export default {
data() {
return {
// 表单数据
dataForm: {
tagid:'',
nickname: '',
city:'',
qrSceneStr:''
},
// 数据列表
dataList: [],
// 当前页码
pageIndex: 1,
// 每页显示数量
pageSize: 10,
// 总页数
totalPage: 0,
// 是否显示用户标签编辑器
showWxUserTagsEditor:false,
// 数据列表加载状态
dataListLoading: false,
// 选中的数据项
dataListSelections: [],
}
},
// 注册的组件
components: {
WxUserTagsManager,WxUserTagging
WxUserTagsManager, WxUserTagging
},
// 组件激活时（例如在keep-alive中）
activated() {
this.getDataList()
this.getDataList() // 获取数据列表
},
// 计算属性，从vuex的state中获取wxUserTags
computed: mapState({
wxUserTags:state=>state.wxUserTags.tags
wxUserTags: state => state.wxUserTags.tags
}),
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/manage/wxUser/list'),
method: 'get',
params: this.$http.adornParams({
this.dataListLoading = true // 开始加载
this.$http({ // 发起HTTP请求
url: this.$http.adornUrl('/manage/wxUser/list'), // 请求URL
method: 'get', // 请求方法
params: this.$http.adornParams({ // 请求参数
'page': this.pageIndex,
'limit': this.pageSize,
'nickname': this.dataForm.nickname,
@ -114,7 +148,7 @@ export default {
'sidx': 'subscribe_time',
'order': 'desc'
})
}).then(({ data }) => {
}).then(({ data }) => { // 请求成功后的处理
if (data && data.code === 200) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
@ -122,33 +156,34 @@ export default {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
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
},
// 删除
// 删除操作
deleteHandle(id) {
// 确定要删除的ID
var ids = id ? [id] : this.dataListSelections.map(item => item.openid)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
this.$http({ // 发起删除请求
url: this.$http.adornUrl('/manage/wxUser/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
@ -159,7 +194,7 @@ export default {
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
this.getDataList() // 刷新列表
}
})
} else {
@ -168,8 +203,9 @@ export default {
})
})
},
// 同步微信用户
syncWxUsers(){
this.$http({
this.$http({ // 发起同步请求
url: this.$http.adornUrl('/manage/wxUser/syncWxUsers'),
method: 'post',
}).then(({ data }) => {
@ -185,6 +221,7 @@ export default {
})
},
// 性别格式化函数
sexFormat(row, column, cellValue) {
let sexType = {
0: '未知',
@ -193,6 +230,7 @@ export default {
}
return sexType[cellValue];
},
// 根据tagid获取标签名
getTagName(tagid){
let tag = this.wxUserTags.find(item=>item.id==tagid)
return tag?tag.name : "?"
@ -202,8 +240,11 @@ export default {
</script>
<style scoped>
.headimg{
width: 50px;
height: 50px;
border-radius: 8px;
width: 50px;
/* // 头像宽度 */
height: 50px;
/* // 头像高度 */
border-radius: 8px;
/* // 头像圆角 */
}
</style>
Write Preview
Loading…
Cancel
Save