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

王 #25

Merged
pgf2eulj7 merged 2 commits from branch4 into main 8 months ago
Conversation 0 Commits 2 Files Changed 40
40 changed files with 4042 additions and 3089 deletions
Show Stats Download Patch File Download Diff File

32
src/store/index.js
Unescape View File

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

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

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

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

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

97
src/utils/httpRequest.js
Unescape View File

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

98
src/utils/index.js
Unescape View File

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

51
src/utils/validate.js
Unescape View File

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

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

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

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

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

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

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

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

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

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

@ -1,127 +1,150 @@
<template> <template>
<!-- Dialog弹框，用于配置云存储 -->
<el-dialog title="云存储配置" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog title="云存储配置" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
<el-form-item size="mini" label="存储类型">
<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>
<!-- 表单组件，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>
<script> <script>
export default { export default {
data() { // 定义组件的数据
return { data() {
visible: false, return {
dataForm: {}, // 控制弹框显示/隐藏
dataRule: {} visible: false,
} // 存储表单数据
}, dataForm: {},
methods: { // 存储表单验证规则
init(id) { dataRule: {}
this.visible = true }
this.$http({ },
url: this.$http.adornUrl('/sys/oss/config'), methods: {
method: 'get', // 初始化方法，用于根据 id 获取配置
params: this.$http.adornParams() init(id) {
}).then(({ data }) => { this.visible = true // 显示弹框
this.dataForm = data && data.code === 200 ? data.config : [] // 发送请求获取存储配置
}) this.$http({
}, url: this.$http.adornUrl('/sys/oss/config'), // 请求路径
// 表单提交 method: 'get', // GET 请求
dataFormSubmit() { params: this.$http.adornParams() // 参数
this.$refs['dataForm'].validate((valid) => { }).then(({ data }) => {
if (valid) { // 如果获取成功，则填充表单数据
this.$http({ this.dataForm = data && data.code === 200 ? data.config : []
url: this.$http.adornUrl('/sys/oss/saveConfig'), })
method: 'post', },
data: this.$http.adornData(this.dataForm) // 表单提交方法
}).then(({ data }) => { dataFormSubmit() {
if (data && data.code === 200) { // 验证表单是否有效
this.$message({ this.$refs['dataForm'].validate((valid) => {
message: '操作成功', if (valid) {
type: 'success', // 提交表单数据
duration: 1500, this.$http({
onClose: () => { url: this.$http.adornUrl('/sys/oss/saveConfig'), // 请求保存配置
this.visible = false method: 'post', // POST 请求
} data: this.$http.adornData(this.dataForm) // 提交表单数据
}) }).then(({ data }) => {
} else { if (data && data.code === 200) {
this.$message.error(data.msg) // 如果操作成功，显示成功提示并关闭弹框
} this.$message({
}) message: '操作成功',
} type: 'success',
}) duration: 1500,
} onClose: () => {
} this.visible = false // 关闭弹框
}
})
} else {
// 显示错误信息
this.$message.error(data.msg)
}
})
}
})
}
}
} }
</script> </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,131 +1,167 @@
<template> <template>
<div class="mod-role"> <div class="mod-role">
<!-- 搜索和管理角色的表单 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<!-- 角色名称输入框 -->
<el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input> <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<!-- 查询按钮 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<!-- 新增按钮，只有在有权限时才显示 -->
<el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</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-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 显示角色的表格 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"> <!-- 选择列，用于多选 -->
</el-table-column> <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID"> <!-- ID列 -->
</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="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 prop="remark" header-align="center" align="center" label="备注"></el-table-column>
<!-- 操作列 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 修改按钮，只有在有权限时才显示 -->
<el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button> <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> <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
<!-- 分页组件 -->
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
import AddOrUpdate from './role-add-or-update' import AddOrUpdate from './role-add-or-update' // 引入新增/修改组件
export default { export default {
data() { data() {
return { return {
// 搜索表单数据
dataForm: { dataForm: {
roleName: '' roleName: ''
}, },
// 表格数据列表
dataList: [], dataList: [],
// 当前页索引
pageIndex: 1, pageIndex: 1,
// 每页显示的数量
pageSize: 10, pageSize: 10,
// 数据总数
totalCount: 0, totalCount: 0,
// 数据加载状态
dataListLoading: false, dataListLoading: false,
// 选中的数据列表
dataListSelections: [], dataListSelections: [],
// 弹窗可见性
addOrUpdateVisible: false addOrUpdateVisible: false
} }
}, },
components: { components: {
AddOrUpdate AddOrUpdate // 注册新增/修改组件
}, },
activated() { activated() {
// 组件激活时获取数据列表
this.getDataList() this.getDataList()
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表
getDataList() { getDataList() {
this.dataListLoading = true this.dataListLoading = true // 设置加载状态
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/role/list'), url: this.$http.adornUrl('/sys/role/list'), // API接口地址
method: 'get', method: 'get', // HTTP请求方法
params: this.$http.adornParams({ params: this.$http.adornParams({
'page': this.pageIndex, 'page': this.pageIndex, // 当前页
'limit': this.pageSize, 'limit': this.pageSize, // 每页数量
'roleName': this.dataForm.roleName 'roleName': this.dataForm.roleName // 角色名称过滤
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataList = data.page.list // 成功获取数据
this.totalCount = data.page.totalCount this.dataList = data.page.list // 更新数据列表
this.totalCount = data.page.totalCount // 更新总数量
} else { } else {
// 获取数据失败
this.dataList = [] this.dataList = []
this.totalCount = 0 this.totalCount = 0
} }
this.dataListLoading = false this.dataListLoading = false // 重置加载状态
}) })
}, },
// 每页数 // 每页数量变化处理
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val // 更新每页数量
this.pageIndex = 1 this.pageIndex = 1 // 重置为第一页
this.getDataList() this.getDataList() // 再次获取数据列表
}, },
// 当前页 // 当前页变化处理
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val // 更新当前页
this.getDataList() this.getDataList() // 再次获取数据列表
}, },
// 多选 // 选择变化处理
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val // 更新选中的数据
}, },
// 新增 / 修改 // 打开新增/修改弹窗
addOrUpdateHandle(id) { addOrUpdateHandle(id) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true // 显示弹窗
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(id) this.$refs.addOrUpdate.init(id) // 初始化弹窗（如果有ID则传入）
}) })
}, },
// 删除 // 删除处理
deleteHandle(id) { deleteHandle(id) {
// 确定要删除的ID（单个或多个）
var ids = id ? [id] : this.dataListSelections.map(item => item.roleId) var ids = id ? [id] : this.dataListSelections.map(item => item.roleId)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 确认删除
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/role/delete'), url: this.$http.adornUrl('/sys/role/delete'), // API接口地址
method: 'post', method: 'post', // HTTP请求方法
data: this.$http.adornData(ids, false) data: this.$http.adornData(ids, false) // 发送要删除的ID
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 删除成功
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => this.getDataList() onClose: () => this.getDataList() // 删除成功后刷新数据列表
}) })
} else { } else {
this.$message.error(data.msg) // 删除失败
this.$message.error(data.msg) // 显示错误信息
} }
}) })
}).catch(() => { }) }).catch(() => { }) // 处理取消操作
} }
} }
} }

95
src/views/modules/sys/user-add-or-update.vue
Unescape View File

@ -1,26 +1,34 @@
<template> <template>
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<!-- 表单，使用dataForm作为模型，进行用户信息的新增或修改 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<!-- 用户名输入框 -->
<el-form-item label="用户名" prop="userName"> <el-form-item label="用户名" prop="userName">
<el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input> <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
</el-form-item> </el-form-item>
<!-- 密码输入框，若为新增则必填 -->
<el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }"> <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input> <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
</el-form-item> </el-form-item>
<!-- 确认密码输入框，若为新增则必填 -->
<el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }"> <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
<el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input> <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
</el-form-item> </el-form-item>
<!-- 邮箱输入框 -->
<el-form-item label="邮箱" prop="email"> <el-form-item label="邮箱" prop="email">
<el-input v-model="dataForm.email" placeholder="邮箱"></el-input> <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
</el-form-item> </el-form-item>
<!-- 手机号输入框 -->
<el-form-item label="手机号" prop="mobile"> <el-form-item label="手机号" prop="mobile">
<el-input v-model="dataForm.mobile" placeholder="手机号"></el-input> <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
</el-form-item> </el-form-item>
<!-- 角色选择 -->
<el-form-item label="角色" size="mini" prop="roleIdList"> <el-form-item label="角色" size="mini" prop="roleIdList">
<el-checkbox-group v-model="dataForm.roleIdList"> <el-checkbox-group v-model="dataForm.roleIdList">
<el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox> <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<!-- 状态选择 -->
<el-form-item label="状态" size="mini" prop="status"> <el-form-item label="状态" size="mini" prop="status">
<el-radio-group v-model="dataForm.status"> <el-radio-group v-model="dataForm.status">
<el-radio :label="0">禁用</el-radio> <el-radio :label="0">禁用</el-radio>
@ -28,6 +36,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
@ -36,53 +45,59 @@
</template> </template>
<script> <script>
import { isEmail, isMobile } from '@/utils/validate' import { isEmail, isMobile } from '@/utils/validate' // 导入验证函数
export default { export default {
data() { data() {
// 表单验证规则
var validatePassword = (rule, value, callback) => { var validatePassword = (rule, value, callback) => {
if (!this.dataForm.id && !/\S/.test(value)) { if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且密码为空
callback(new Error('密码不能为空')) callback(new Error('密码不能为空'))
} else { } else {
callback() callback() // 验证通过
} }
} }
var validateComfirmPassword = (rule, value, callback) => { var validateComfirmPassword = (rule, value, callback) => {
if (!this.dataForm.id && !/\S/.test(value)) { if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且确认密码为空
callback(new Error('确认密码不能为空')) callback(new Error('确认密码不能为空'))
} else if (this.dataForm.password !== value) { } else if (this.dataForm.password !== value) { // 确认密码与密码不一致
callback(new Error('确认密码与密码输入不一致')) callback(new Error('确认密码与密码输入不一致'))
} else { } else {
callback() callback() // 验证通过
} }
} }
// 验证邮箱格式
var validateEmail = (rule, value, callback) => { var validateEmail = (rule, value, callback) => {
if (!isEmail(value)) { if (!isEmail(value)) {
callback(new Error('邮箱格式错误')) callback(new Error('邮箱格式错误'))
} else { } else {
callback() callback() // 验证通过
} }
} }
// 验证手机格式
var validateMobile = (rule, value, callback) => { var validateMobile = (rule, value, callback) => {
if (!isMobile(value)) { if (!isMobile(value)) {
callback(new Error('手机号格式错误')) callback(new Error('手机号格式错误'))
} else { } else {
callback() callback() // 验证通过
} }
} }
return { return {
visible: false, visible: false, // 控制对话框可见性
roleList: [], roleList: [], // 角色列表
// 表单数据
dataForm: { dataForm: {
id: 0, id: 0, // 用户ID
userName: '', userName: '', // 用户名
password: '', password: '', // 密码
comfirmPassword: '', comfirmPassword: '', // 确认密码
salt: '', salt: '', // 盐值
email: '', email: '', // 邮箱
mobile: '', mobile: '', // 手机号
roleIdList: [], roleIdList: [], // 角色ID列表
status: 1 status: 1 // 状态（1: 正常, 0: 禁用）
}, },
// 表单验证规则
dataRule: { dataRule: {
userName: [ userName: [
{ required: true, message: '用户名不能为空', trigger: 'blur' } { required: true, message: '用户名不能为空', trigger: 'blur' }
@ -105,20 +120,23 @@ export default {
} }
}, },
methods: { methods: {
// 初始化表单，加载角色列表和用户信息
init(id) { init(id) {
this.dataForm.id = id || 0 this.dataForm.id = id || 0 // 设置用户ID
// 获取角色列表
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/role/select'), url: this.$http.adornUrl('/sys/role/select'),
method: 'get', method: 'get',
params: this.$http.adornParams() params: this.$http.adornParams() // 获取请求参数
}).then(({ data }) => { }).then(({ data }) => {
this.roleList = data && data.code === 200 ? data.list : [] this.roleList = data && data.code === 200 ? data.list : [] // 更新角色列表
}).then(() => { }).then(() => {
this.visible = true this.visible = true // 显示对话框
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs['dataForm'].resetFields() // 重置表单
}) })
}).then(() => { }).then(() => {
// 如果为修改状态，则加载用户信息
if (this.dataForm.id) { if (this.dataForm.id) {
this.$http({ this.$http({
url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`), url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
@ -126,25 +144,29 @@ export default {
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataForm.userName = data.user.username // 填充表单数据
this.dataForm.salt = data.user.salt this.dataForm.userName = data.user.username // 设置用户名
this.dataForm.email = data.user.email this.dataForm.salt = data.user.salt // 设置盐值（如果需要，这部分可以在保存时再使用）
this.dataForm.mobile = data.user.mobile this.dataForm.email = data.user.email // 设置邮箱
this.dataForm.roleIdList = data.user.roleIdList this.dataForm.mobile = data.user.mobile // 设置手机号
this.dataForm.status = data.user.status this.dataForm.roleIdList = data.user.roleIdList // 设置角色ID列表
this.dataForm.status = data.user.status // 设置用户状态
} }
}) })
} }
}) })
}, },
// 表单提交 // 表单提交处理
dataFormSubmit() { dataFormSubmit() {
// 验证表单
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) { // 如果表单验证通过
this.$http({ this.$http({
// 根据是否存在ID选择保存或更新接口
url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`), url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post', method: 'post',
data: this.$http.adornData({ data: this.$http.adornData({
// 提交表单数据
'userId': this.dataForm.id || undefined, 'userId': this.dataForm.id || undefined,
'username': this.dataForm.userName, 'username': this.dataForm.userName,
'password': this.dataForm.password, 'password': this.dataForm.password,
@ -155,18 +177,21 @@ export default {
'roleIdList': this.dataForm.roleIdList 'roleIdList': this.dataForm.roleIdList
}) })
}).then(({ data }) => { }).then(({ data }) => {
// 处理接口返回的数据
if (data && data.code === 200) { if (data && data.code === 200) {
// 操作成功的提示
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false // 关闭对话框
this.$emit('refreshDataList') this.$emit('refreshDataList') // 触发刷新数据列表事件
} }
}) })
} else { } else {
this.$message.error(data.msg) // 操作失败的提示
this.$message.error(data.msg) // 显示错误信息
} }
}) })
} }

100
src/views/modules/sys/user.vue
Unescape View File

@ -1,139 +1,167 @@
<template> <template>
<div class="mod-user"> <div class="mod-user">
<!-- 搜索表单 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<!-- 用户名输入框 -->
<el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input> <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<!-- 查询按钮 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<!-- 新增按钮，只有在有权限时显示 -->
<el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<!-- 批量删除按钮，只有在有权限时显示，并且在没有选择项时禁用 -->
<el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 用户数据表格 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<!-- 选择框列 -->
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column> </el-table-column>
<!-- ID列 -->
<el-table-column prop="userId" header-align="center" align="center" width="80" label="ID"> <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">
</el-table-column> </el-table-column>
<!-- 用户名列 -->
<el-table-column prop="username" header-align="center" align="center" label="用户名"> <el-table-column prop="username" header-align="center" align="center" label="用户名">
</el-table-column> </el-table-column>
<!-- 邮箱列 -->
<el-table-column prop="email" header-align="center" align="center" label="邮箱"> <el-table-column prop="email" header-align="center" align="center" label="邮箱">
</el-table-column> </el-table-column>
<!-- 手机号列 -->
<el-table-column prop="mobile" header-align="center" align="center" label="手机号"> <el-table-column prop="mobile" header-align="center" align="center" label="手机号">
</el-table-column> </el-table-column>
<!-- 状态列 -->
<el-table-column prop="status" header-align="center" align="center" label="状态"> <el-table-column prop="status" header-align="center" align="center" label="状态">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag> <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
<el-tag v-else size="small">正常</el-tag> <el-tag v-else size="small">正常</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<!-- 操作列 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 修改按钮，只有在有权限时显示 -->
<el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button> <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
<!-- 删除按钮，只有在有权限时显示 -->
<el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button> <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页组件 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<!-- 弹窗，用于新增或修改用户 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
import AddOrUpdate from './user-add-or-update' import AddOrUpdate from './user-add-or-update' // 导入新增/修改用户组件
export default { export default {
data() { data() {
return { return {
dataForm: { dataForm: {
userName: '' userName: '' // 搜索表单数据
}, },
dataList: [], dataList: [], // 用户数据列表
pageIndex: 1, pageIndex: 1, // 当前页码
pageSize: 10, pageSize: 10, // 每页显示条数
totalCount: 0, totalCount: 0, // 总记录数
dataListLoading: false, dataListLoading: false, // 数据加载状态
dataListSelections: [], dataListSelections: [], // 选中的用户列表
addOrUpdateVisible: false addOrUpdateVisible: false // 控制新增/修改弹窗的可见性
} }
}, },
components: { components: {
AddOrUpdate AddOrUpdate // 注册新增/修改用户组件
}, },
activated() { activated() {
this.getDataList() this.getDataList() // 组件激活时获取用户数据列表
}, },
methods: { methods: {
// 获取数据列表 // 获取用户数据列表
getDataList() { getDataList() {
this.dataListLoading = true this.dataListLoading = true // 设置加载状态为true
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/user/list'), url: this.$http.adornUrl('/sys/user/list'), // 获取用户列表的API地址
method: 'get', method: 'get',
params: this.$http.adornParams({ params: this.$http.adornParams({
'page': this.pageIndex, 'page': this.pageIndex, // 当前页码
'limit': this.pageSize, 'limit': this.pageSize, // 每页显示条数
'username': this.dataForm.userName 'username': this.dataForm.userName // 用户名搜索条件
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 请求成功，更新用户数据列表和总记录数
this.dataList = data.page.list this.dataList = data.page.list
this.totalCount = data.page.totalCount this.totalCount = data.page.totalCount
} else { } else {
// 请求失败，清空数据列表
this.dataList = [] this.dataList = []
this.totalCount = 0 this.totalCount = 0
} }
this.dataListLoading = false this.dataListLoading = false // 设置加载状态为false
}) })
}, },
// 每页数 // 每页数变化处理
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val // 更新每页显示条数
this.pageIndex = 1 this.pageIndex = 1 // 重置为第一页
this.getDataList() this.getDataList() // 重新获取数据列表
}, },
// 当前页 // 当前页变化处理
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val // 更新当前页码
this.getDataList() this.getDataList() // 重新获取数据列表
}, },
// 多选 // 多选处理
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val // 更新选中的用户列表
}, },
// 新增 / 修改 // 新增或修改用户处理
addOrUpdateHandle(id) { addOrUpdateHandle(id) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true // 显示新增/修改弹窗
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(id) this.$refs.addOrUpdate.init(id) // 初始化弹窗（传入用户ID）
}) })
}, },
// 删除 // 删除用户处理
deleteHandle(id) { deleteHandle(id) {
// 确定要删除的用户ID（单个或多个）
var userIds = id ? [id] : this.dataListSelections.map(item => item.userId) var userIds = id ? [id] : this.dataListSelections.map(item => item.userId)
this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 确认删除
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/user/delete'), url: this.$http.adornUrl('/sys/user/delete'), // 删除用户的API地址
method: 'post', method: 'post',
data: this.$http.adornData(userIds, false) data: this.$http.adornData(userIds, false) // 发送要删除的用户ID
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 删除成功
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => this.getDataList() onClose: () => this.getDataList() // 关闭提示时重新获取数据列表
}) })
} else { } else {
// 删除失败，显示错误信息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
}) })
}).catch(() => { }) }).catch(() => {
// 取消删除操作的处理逻辑（空）
})
} }
} }
} }

37
src/views/modules/wx/account/wx-account-access-info.vue
Unescape View File

@ -1,14 +1,18 @@
<template> <template>
<!-- 开发接入信息对话框 -->
<el-dialog title="开发接入信息" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog title="开发接入信息" :close-on-click-modal="false" :visible.sync="visible">
<div> <div>
<!-- 公众号信息 -->
<div class="list-item"><span class="label">公众号:</span>{{account.name}}</div> <div class="list-item"><span class="label">公众号:</span>{{account.name}}</div>
<!-- token 信息 -->
<div class="list-item"><span class="label">token:</span>{{account.token}}</div> <div class="list-item"><span class="label">token:</span>{{account.token}}</div>
<!-- aesKey 信息 -->
<div class="list-item"><span class="label">aesKey:</span>{{account.aesKey}}</div> <div class="list-item"><span class="label">aesKey:</span>{{account.aesKey}}</div>
<!-- 接入链接 -->
<div class="list-item"> <div class="list-item">
<span class="label">接入链接:</span> <span class="label">接入链接:</span>
<span v-html="accessUrl"></span> <span v-html="accessUrl"></span> <!-- 使用 v-html 渲染动态生成的接入链接 -->
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
@ -17,38 +21,43 @@
export default { export default {
data() { data() {
return { return {
visible: false, visible: false, // 控制对话框的可见状态
account: {}, account: {}, // 存储公众号的相关信息
} }
}, },
computed: { computed: {
// 计算生成接入链接
accessUrl() { accessUrl() {
let host = location.host; let host = location.host; // 获取当前主机名
// 检查主机名是否是 IP 或 localhost
if(/^(\d(.\d){3})|localhost/.test(host)){ if(/^(\d(.\d){3})|localhost/.test(host)){
host='<span class="text-red">正式域名</span>' host='<span class="text-red">正式域名</span>' // 如果是 IP 或 localhost，返回红色字体提示
} }
// 返回完整的接入链接
return location.protocol + '//' + host + '/wx/wx/msg/' + this.account.appid return location.protocol + '//' + host + '/wx/wx/msg/' + this.account.appid
} }
}, },
methods: { methods: {
// 初始化对话框，设置可见状态和账户信息
init(item) { init(item) {
this.visible = true this.visible = true // 设置对话框为可见
if (item && item.appid) { if (item && item.appid) {
this.account = item this.account = item // 如果传入的项目包含 appid，则将其赋值给 account
} }
}, },
} }
} }
</script> </script>
<style scoped> <style scoped>
.list-item{ .list-item{
line-height: 30px; line-height: 30px; /* 每一项的行高 */
} }
.label{ .label{
width: 100px; width: 100px; /* 标签的宽度 */
display: inline-block; display: inline-block; /* 使标签在每行中内联显示 */
margin-right: 10px; margin-right: 10px; /* 标签与内容之间的右边距 */
font-weight: bold; font-weight: bold; /* 标签加粗 */
text-align: right; text-align: right; /* 标签文本右对齐 */
} }
</style> </style>

129
src/views/modules/wx/account/wx-account-add-or-update.vue
Unescape View File

@ -1,41 +1,62 @@
<template> <template>
<!-- 新增/修改对话框 -->
<el-dialog <el-dialog
title="新增/修改" title="新增/修改"
:close-on-click-modal="false" :close-on-click-modal="false"
:visible.sync="visible"> :visible.sync="visible">
<!-- 表单区域 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
<el-form-item label="公众号名称" prop="name">
<el-input v-model="dataForm.name" placeholder="公众号名称"></el-input> <!-- 公众号名称输入 -->
</el-form-item> <el-form-item label="公众号名称" prop="name">
<div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div> <el-input v-model="dataForm.name" placeholder="公众号名称"></el-input>
<el-row> </el-form-item>
<!-- 提示信息 -->
<div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div>
<el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="公众号类型" prop="type"> <!-- 公众号类型选择 -->
<el-select v-model="dataForm.type" placeholder="公众号类型"> <el-form-item label="公众号类型" prop="type">
<el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option> <el-select v-model="dataForm.type" placeholder="公众号类型">
</el-select> <el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option>
</el-form-item> </el-select>
</el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否认证" prop="verified"> <!-- 是否认证开关 -->
<el-switch v-model="dataForm.verified" placeholder="是否认证"></el-switch> <el-form-item label="是否认证" prop="verified">
</el-form-item> <el-switch v-model="dataForm.verified" placeholder="是否认证"></el-switch>
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- appid 输入 -->
<el-form-item label="appid" prop="appid">
<el-input v-model="dataForm.appid" placeholder="appid"></el-input>
</el-form-item>
<!-- appsecret 输入 -->
<el-form-item label="appsecret" prop="secret">
<el-input v-model="dataForm.secret" placeholder="appsecret"></el-input>
</el-form-item>
<!-- token 输入 -->
<el-form-item label="token" prop="token">
<el-input v-model="dataForm.token" placeholder="token"></el-input>
</el-form-item>
<!-- aesKey 输入 -->
<el-form-item label="aesKey" prop="aesKey">
<el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空"></el-input>
</el-form-item>
<el-form-item label="appid" prop="appid">
<el-input v-model="dataForm.appid" placeholder="appid"></el-input>
</el-form-item>
<el-form-item label="appsecret" prop="secret">
<el-input v-model="dataForm.secret" placeholder="appsecret"></el-input>
</el-form-item>
<el-form-item label="token" prop="token">
<el-input v-model="dataForm.token" placeholder="token"></el-input>
</el-form-item>
<el-form-item label="aesKey" prop="aesKey">
<el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空"></el-input>
</el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
@ -44,69 +65,75 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex' // 从 Vuex 导入 mapState 方法以映射状态
export default {
export default {
data () { data () {
return { return {
visible: false, visible: false, // 控制对话框的可见状态
dataForm: { dataForm: { // 用于保存表单数据
appid: '', appid: '',
name: '', name: '',
type:'2', type:'2', // 默认类型
verified:true, verified: true, // 默认是否认证为 true
secret: '', secret: '',
token: 'my_weixin_token_', token: 'my_weixin_token_', // 默认token
aesKey: '' aesKey: '' // aesKey，可为空
}, },
dataRule: { dataRule: { // 表单验证规则
name: [ name: [
{ required: true, message: '公众号名称不能为空', trigger: 'blur' } { required: true, message: '公众号名称不能为空', trigger: 'blur' } // 公众号名称必填
], ],
appid: [ appid: [
{ required: true, message: 'appid不能为空', trigger: 'blur' } { required: true, message: 'appid不能为空', trigger: 'blur' } // appid必填
], ],
secret: [ secret: [
{ required: true, message: 'appsecret不能为空', trigger: 'blur' } { required: true, message: 'appsecret不能为空', trigger: 'blur' } // appsecret必填
] ]
} }
} }
}, },
computed: mapState({ computed: mapState({
ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES // 从 store 中获取账号类型
}), }),
methods: { methods: {
// 初始化对话框，设置可见状态和表单数据
init (item) { init (item) {
this.visible = true this.visible = true // 显示对话框
if(item && item.appid){ if(item && item.appid) {
this.dataForm = item this.dataForm = item // 设置表单数据为传入的项
this.dataForm.type = item.type+'' this.dataForm.type = item.type + '' // 将类型转换为字符串
}else{ } else {
// 重置表单字段
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs['dataForm'].resetFields()
}) })
} }
}, },
// 表单提交 // 表单提交处理
dataFormSubmit () { dataFormSubmit () {
// 验证表单
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
// 发送 POST 请求保存数据
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/wxAccount/save`), url: this.$http.adornUrl(`/manage/wxAccount/save`), // 请求的 URL
method: 'post', method: 'post',
data: this.$http.adornData(this.dataForm) data: this.$http.adornData(this.dataForm) // 使用 adornData 方法处理数据
}).then(({data}) => { }).then(({data}) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 操作成功，显示成功消息并关闭对话框
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false // 隐藏对话框
this.$emit('refreshDataList') this.$emit('refreshDataList') // 触发刷新数据列表事件
} }
}) })
} else { } else {
// 操作失败，显示错误消息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
}) })
@ -114,5 +141,5 @@ import { mapState } from 'vuex'
}) })
} }
} }
} }
</script> </script>

60
src/views/modules/wx/article-add-or-update.vue
Unescape View File

@ -1,68 +1,101 @@
<template> <template>
<!-- 根据visible属性的值控制整个组件内容的显示与隐藏，当visible为true时显示 -->
<div v-show="visible"> <div v-show="visible">
<!-- 定义一个表单，绑定了dataForm数据模型，使用了dataRule验证规则，设置了表单尺寸为迷你型，标签宽度为80px -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" size="mini" label-width="80px"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" size="mini" label-width="80px">
<!-- 第一行布局，使用el-row包裹 -->
<el-row> <el-row>
<!-- 占12列，用于放置文章标题相关的表单元素 -->
<el-col :span="12"> <el-col :span="12">
<!-- 文章标题的表单项，设置了必填验证，对应dataForm中的title属性 -->
<el-form-item label="文章标题" prop="title" required> <el-form-item label="文章标题" prop="title" required>
<!-- 使用el-input组件实现输入框，双向绑定dataForm.title，设置了最大长度为1024，有占位提示文字 -->
<el-input v-model="dataForm.title" :maxlength="1024" placeholder="标题"></el-input> <el-input v-model="dataForm.title" :maxlength="1024" placeholder="标题"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 同样占12列，用于放置文章类型相关的表单元素 -->
<el-col :span="12"> <el-col :span="12">
<!-- 文章类型的表单项，设置了必填验证，对应dataForm中的type属性 -->
<el-form-item label="文章类型" prop="type" required> <el-form-item label="文章类型" prop="type" required>
<!-- 使用el-select组件实现下拉选择框，双向绑定dataForm.type，有占位提示文字 -->
<el-select v-model="dataForm.type" placeholder="选择文章类型"> <el-select v-model="dataForm.type" placeholder="选择文章类型">
<!-- 循环遍历ARTICLE_TYPES对象，生成下拉选项，选项的标签显示为name，值为key，允许用户创建新的选项 -->
<el-option v-for="(name,key) in ARTICLE_TYPES" :key="name" :label="name" :value="key" allow-create></el-option> <el-option v-for="(name,key) in ARTICLE_TYPES" :key="name" :label="name" :value="key" allow-create></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第二行布局 -->
<el-row> <el-row>
<!-- 占12列，用于放置一级目录相关的表单元素 -->
<el-col :span="12"> <el-col :span="12">
<!-- 一级目录的表单项，对应dataForm中的category属性 -->
<el-form-item label="一级目录" prop="category"> <el-form-item label="一级目录" prop="category">
<!-- 使用el-input组件实现输入框，双向绑定dataForm.category，设置了最大长度为50，有占位提示文字 -->
<el-input :maxlength="50" v-model="dataForm.category" placeholder="一级目录"></el-input> <el-input :maxlength="50" v-model="dataForm.category" placeholder="一级目录"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 占12列，用于放置二级分类相关的表单元素 -->
<el-col :span="12"> <el-col :span="12">
<!-- 二级分类的表单项，对应dataForm中的subCategory属性 -->
<el-form-item label="二级分类" prop="subCategory"> <el-form-item label="二级分类" prop="subCategory">
<!-- 使用el-input组件实现输入框，双向绑定dataForm.subCategory，设置了最大长度为50，有占位提示文字 -->
<el-input :maxlength="50" v-model="dataForm.subCategory" placeholder="二级目录"></el-input> <el-input :maxlength="50" v-model="dataForm.subCategory" placeholder="二级目录"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 指向外链的表单项，对应dataForm中的targetLink属性 -->
<el-form-item label="指向外链" prop="targetLink"> <el-form-item label="指向外链" prop="targetLink">
<!-- 使用el-input组件实现输入框，双向绑定dataForm.targetLink，有占位提示文字 -->
<el-input v-model="dataForm.targetLink" placeholder="指向外链"></el-input> <el-input v-model="dataForm.targetLink" placeholder="指向外链"></el-input>
</el-form-item> </el-form-item>
<!-- 摘要的表单项，对应dataForm中的summary属性 -->
<el-form-item label="摘要" prop="summary"> <el-form-item label="摘要" prop="summary">
<!-- 使用el-input组件实现文本域输入框，双向绑定dataForm.summary，设置了行数为3，最大长度为512，显示字数限制提示 -->
<el-input v-model="dataForm.summary" placeholder="摘要" type="textarea" rows="3" maxlength="512" show-word-limit></el-input> <el-input v-model="dataForm.summary" placeholder="摘要" type="textarea" rows="3" maxlength="512" show-word-limit></el-input>
</el-form-item> </el-form-item>
<!-- 标签的表单项，使用了自定义的tags-editor组件，双向绑定dataForm.tags -->
<el-form-item label="标签" prop="tags"> <el-form-item label="标签" prop="tags">
<tags-editor v-model="dataForm.tags"></tags-editor> <tags-editor v-model="dataForm.tags"></tags-editor>
</el-form-item> </el-form-item>
<!-- 封面图的表单项，对应dataForm中的image属性 -->
<el-form-item label="封面图" prop="image"> <el-form-item label="封面图" prop="image">
<!-- 使用el-input组件实现输入框，双向绑定dataForm.image，有占位提示文字 -->
<el-input v-model="dataForm.image" placeholder="图片链接"> <el-input v-model="dataForm.image" placeholder="图片链接">
<!-- 插入一个自定义的OssUploader组件，用于上传图片，上传成功后将返回值赋给dataForm.image -->
<OssUploader slot="append" @uploaded="dataForm.image=$event"></OssUploader> <OssUploader slot="append" @uploaded="dataForm.image=$event"></OssUploader>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 引入一个富文本编辑器组件，双向绑定dataForm.content -->
<tinymce-editor ref="editor" v-model="dataForm.content"></tinymce-editor> <tinymce-editor ref="editor" v-model="dataForm.content"></tinymce-editor>
</el-form> </el-form>
<!-- 距离顶部有一定间距，靠右对齐的按钮区域 -->
<div class="margin-top text-right"> <div class="margin-top text-right">
<!-- 取消按钮，点击时通过$emit触发父组件的hide事件 -->
<el-button @click="$emit('hide')">取消</el-button> <el-button @click="$emit('hide')">取消</el-button>
<!-- 确定按钮，类型为主要按钮，点击时调用dataFormSubmit方法进行表单提交 -->
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name:'article-add-or-update', name: 'article-add-or-update',
components: { components: {
// 异步加载TinymceEditor组件，应该是用于编辑文章内容的富文本编辑器组件
TinymceEditor: () => import("@/components/tinymce-editor"), TinymceEditor: () => import("@/components/tinymce-editor"),
// 异步加载tags-editor组件，用于编辑文章标签
tagsEditor: () => import("@/components/tags-editor"), tagsEditor: () => import("@/components/tags-editor"),
// 异步加载OssUploader组件，用于上传图片（可能是上传到OSS存储服务）
OssUploader: () => import('../oss/oss-uploader') OssUploader: () => import('../oss/oss-uploader')
}, },
props:{ props: {
visible:{ visible: {
type:Boolean, type: Boolean,
default:false default: false
} }
}, },
data() { data() {
@ -94,37 +127,45 @@ export default {
}; };
}, },
computed: mapState({ computed: mapState({
ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES // 从Vuex的state中获取article模块下的ARTICLE_TYPES状态，映射到组件的计算属性中，用于文章类型下拉框的选项数据
ARTICLE_TYPES: state => state.article.ARTICLE_TYPES
}), }),
methods: { methods: {
init(id) { init(id) {
// 初始化时设置dataForm的id属性，传入的id为空字符串则设置为空，否则使用传入的值
this.dataForm.id = id || ""; this.dataForm.id = id || "";
this.$nextTick(() => { this.$nextTick(() => {
// 表单DOM更新后，重置表单所有字段的值
this.$refs["dataForm"].resetFields(); this.$refs["dataForm"].resetFields();
if (id > 0) { if (id > 0) {
// 如果传入的id大于0，表示是编辑已有文章，发起HTTP请求获取文章详情信息
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/article/info/${this.dataForm.id}`), url: this.$http.adornUrl(`/manage/article/info/${this.dataForm.id}`),
method: "get", method: "get",
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataForm=data.article; // 如果请求成功，将返回的文章数据赋值给dataForm，同时将文章类型转为字符串类型（可能原数据类型不一致）
this.dataForm = data.article;
this.dataForm.type = data.article.type + ""; this.dataForm.type = data.article.type + "";
} }
}); });
} }
}); });
}, },
// 表单提交 // 表单提交方法
dataFormSubmit() { dataFormSubmit() {
// 对表单进行验证，验证结果通过回调函数的参数valid返回
this.$refs["dataForm"].validate(valid => { this.$refs["dataForm"].validate(valid => {
if (valid) { if (valid) {
// 如果表单验证通过，发起HTTP请求保存文章数据（可能是新增或更新操作，根据后端接口逻辑）
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/article/save`), url: this.$http.adornUrl(`/manage/article/save`),
method: "post", method: "post",
data: this.$http.adornData(this.dataForm) data: this.$http.adornData(this.dataForm)
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果保存成功，弹出成功提示信息，提示框关闭后通过$emit触发父组件的refreshDataList和hide事件
this.$message({ this.$message({
message: "操作成功", message: "操作成功",
type: "success", type: "success",
@ -135,6 +176,7 @@ export default {
} }
}); });
} else { } else {
// 如果保存失败，弹出错误提示信息
this.$message.error(data.msg); this.$message.error(data.msg);
} }
}); });
@ -144,9 +186,11 @@ export default {
imgUploadSuccess(response, file, fileList) { imgUploadSuccess(response, file, fileList) {
console.log(response); console.log(response);
if (response.code == 200) { if (response.code == 200) {
// 如果图片上传成功（根据返回数据的状态码判断），将返回的图片数据赋值给dataForm.image
this.dataForm.image = response.data; this.dataForm.image = response.data;
console.log("this.article", this.article); console.log("this.article", this.article);
} else { } else {
// 如果上传失败，弹出警告提示信息
this.$message.warning(response.msg); this.$message.warning(response.msg);
} }
} }

58
src/views/modules/wx/article.vue
Unescape View File

@ -1,37 +1,56 @@
<template> <template>
<!-- 外层容器div -->
<div> <div>
<!-- 根据条件控制显示内容，当addOrUpdateVisible为false时显示以下部分 -->
<div v-show="!addOrUpdateVisible"> <div v-show="!addOrUpdateVisible">
<!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 文章类型选择的表单项 -->
<el-form-item> <el-form-item>
<!-- 使用el-select组件实现下拉选择框，双向绑定dataForm.type，有占位提示文字，选项通过循环ARTICLE_TYPES生成 -->
<el-select v-model="dataForm.type" placeholder="选择文章类型"> <el-select v-model="dataForm.type" placeholder="选择文章类型">
<el-option v-for="(name,key) in ARTICLE_TYPES" :key="key" :label="name" :value="key" allow-create></el-option> <el-option v-for="(name,key) in ARTICLE_TYPES" :key="key" :label="name" :value="key" allow-create></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 文章标题输入的表单项，使用el-input组件，双向绑定dataForm.title，有占位提示文字且可清空输入内容 -->
<el-form-item> <el-form-item>
<el-input v-model="dataForm.title" placeholder="标题" clearable></el-input> <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 操作按钮所在的表单项 -->
<el-form-item> <el-form-item>
<!-- 查询按钮，点击时先将当前页码设置为1，然后调用getDataList方法获取数据 -->
<el-button @click="pageIndex=1;getDataList()">查询</el-button> <el-button @click="pageIndex=1;getDataList()">查询</el-button>
<!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
<el-button v-if="isAuth('wx:article:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('wx:article:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
<el-button v-if="isAuth('wx:article:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('wx:article:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column> </el-table-column>
<!-- ID列，对应dataList中数据项的id属性，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="id" header-align="center" align="center" label="ID"> <el-table-column prop="id" header-align="center" align="center" label="ID">
</el-table-column> </el-table-column>
<!-- 文章类型列，对应dataList中数据项的type属性，使用formatter函数格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="type" header-align="center" align="center" :formatter="articleTypeFormat" label="文章类型"> <el-table-column prop="type" header-align="center" align="center" :formatter="articleTypeFormat" label="文章类型">
</el-table-column> </el-table-column>
<!-- 标题列，对应dataList中数据项的title属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题，内容用a标签包裹可点击跳转 -->
<el-table-column prop="title" header-align="center" align="center" show-overflow-tooltip label="标题"> <el-table-column prop="title" header-align="center" align="center" show-overflow-tooltip label="标题">
<a :href="scope.row.targetLink" slot-scope="scope">{{scope.row.title}}</a> <a :href="scope.row.targetLink" slot-scope="scope">{{scope.row.title}}</a>
</el-table-column> </el-table-column>
<!-- 一级分类列，对应dataList中数据项的category属性，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="category" header-align="center" align="center" label="一级分类"> <el-table-column prop="category" header-align="center" align="center" label="一级分类">
</el-table-column> </el-table-column>
<!-- 二级分类列，对应dataList中数据项的subCategory属性，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="subCategory" header-align="center" align="center" label="二级分类"> <el-table-column prop="subCategory" header-align="center" align="center" label="二级分类">
</el-table-column> </el-table-column>
<!-- 打开次数列，对应dataList中数据项的openCount属性，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="openCount" header-align="center" align="center" label="打开次数"> <el-table-column prop="openCount" header-align="center" align="center" label="打开次数">
</el-table-column> </el-table-column>
<!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了修改和删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
@ -39,16 +58,19 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </el-pagination>
</div> </div>
<!-- 新增 / 修改 --> <!-- 新增/修改组件，通过属性和事件与父组件进行交互 -->
<add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @hide="addOrUpdateVisible=false"></add-or-update> <add-or-update :visible="addOrUpdateVisible" ref="addOr-update" @refreshDataList="getDataList" @hide="addOrUpdateVisible=false"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
// 引入新增/修改组件
import AddOrUpdate from './article-add-or-update' import AddOrUpdate from './article-add-or-update'
// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
components: { components: {
@ -70,15 +92,19 @@ export default {
} }
}, },
computed: mapState({ computed: mapState({
ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES // 从Vuex的state中获取article模块下的ARTICLE_TYPES状态，映射到组件的计算属性中，用于文章类型的格式化显示等操作
ARTICLE_TYPES: state => state.article.ARTICLE_TYPES
}), }),
mounted() { mounted() {
// 组件挂载完成后，调用getDataList方法获取初始数据列表
this.getDataList() this.getDataList()
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表的方法
getDataList() { getDataList() {
// 设置正在加载数据的状态为true
this.dataListLoading = true this.dataListLoading = true
// 发起HTTP请求获取文章数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/article/list'), url: this.$http.adornUrl('/manage/article/list'),
method: 'get', method: 'get',
@ -91,52 +117,60 @@ export default {
'order': 'desc' 'order': 'desc'
}) })
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据的状态码判断是否请求成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，更新数据列表和总记录数
this.dataList = data.page.list this.dataList = data.page.list
this.totalCount = data.page.totalCount this.totalCount = data.page.totalCount
} else { } else {
// 如果失败，清空数据列表和总记录数
this.dataList = [] this.dataList = []
this.totalCount = 0 this.totalCount = 0
} }
// 请求完成后，设置正在加载数据的状态为false
this.dataListLoading = false this.dataListLoading = false
}) })
}, },
// 每页数 // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val
this.pageIndex = 1 this.pageIndex = 1
this.getDataList() this.getDataList()
}, },
// 当前页 // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val
this.getDataList() this.getDataList()
}, },
// 多选 // 处理表格中选择项变化的方法，更新选中的数据项列表
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val
}, },
// 新增 / 修改 // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入文章的id（可为空表示新增）
addOrUpdateHandle(id) { addOrUpdateHandle(id) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(id) this.$refs.addOrUpdate.init(id)
}) })
}, },
// 删除 // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
deleteHandle(id) { deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.id) // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的id数组进行批量删除
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { var ids = id? [id] : this.dataListSelections.map(item => item.id)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/article/delete'), url: this.$http.adornUrl('/manage/article/delete'),
method: 'post', method: 'post',
data: this.$http.adornData(ids, false) data: this.$http.adornData(ids, false)
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据判断删除操作是否成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
@ -144,11 +178,13 @@ export default {
onClose: () => this.getDataList() onClose: () => this.getDataList()
}) })
} else { } else {
// 如果失败，弹出错误提示信息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
}) })
}) })
}, },
// 文章类型格式化的方法，根据数据项中的文章类型值，从ARTICLE_TYPES对象中获取对应的显示名称并返回
articleTypeFormat(row, column, cellValue) { articleTypeFormat(row, column, cellValue) {
return this.ARTICLE_TYPES[cellValue]; return this.ARTICLE_TYPES[cellValue];
} }

46
src/views/modules/wx/assets/assets-selector.vue
Unescape View File

@ -1,37 +1,43 @@
<template> <template>
<el-dialog title="选择素材" :visible.sync="dataVisible" :modal="true" append-to-body @close="onClose"> <!-- 选择素材的对话框 -->
<material-news v-if="selectType=='news'" @selected="onSelect" selectMode></material-news> <el-dialog title="选择素材" :visible.sync="dataVisible" :modal="true" append-to-body @close="onClose">
<!-- 根据选择的素材类型加载不同的子组件 -->
<material-news v-if="selectType === 'news'" @selected="onSelect" selectMode></material-news>
<material-file v-else :fileType="selectType" @selected="onSelect" selectMode></material-file> <material-file v-else :fileType="selectType" @selected="onSelect" selectMode></material-file>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
export default { export default {
name:"assets-selector", name: "assets-selector", // 组件名称
data:function (){ data: function () {
return { return {
dataVisible : this.visible dataVisible: this.visible // 初始化 dataVisible，与父组件的 visible 属性保持同步
} }
}, },
components:{ components: {
MaterialFile:()=>import('./material-file'), // 懒加载子组件
MaterialNews:()=>import('./material-news') MaterialFile: () => import('./material-file'), // 导入 MaterialFile 组件
MaterialNews: () => import('./material-news') // 导入 MaterialNews 组件
}, },
props:{ props: {
selectType:{// image、voice、video、news selectType: { // 所选素材的类型（如 image、voice、video、news）
type:String, type: String,
default:'image' default: 'image' // 默认类型为 'image'
}, },
visible:{ visible: { // 父组件传递进来的控制对话框可见性的属性
type:Boolean, type: Boolean,
default:false default: false // 默认对话框不可见
} }
}, },
methods:{ methods: {
onSelect(itemInfo){ // 子组件素材选择事件处理
this.$emit('selected', itemInfo) onSelect(itemInfo) {
this.$emit('selected', itemInfo) // 将选择的素材信息向父组件发射事件
}, },
onClose(){ // 关闭对话框事件处理
this.$emit('onClose') onClose() {
this.$emit('onClose') // 向父组件发射关闭事件
} }
} }
} }

75
src/views/modules/wx/assets/material-file-add-or-update.vue
Unescape View File

@ -1,13 +1,19 @@
<template> <template>
<!-- 对话框，标题根据是否有 id 决定是“新增”还是“修改” -->
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<!-- 表单区域 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<!-- 媒体文件选择 -->
<el-form-item label="媒体文件"> <el-form-item label="媒体文件">
<el-button type="primary"> <el-button type="primary">
选择文件 选择文件
<input type="file" style="opacity: 0;height: 100%;position: absolute;left: 0;top: 0;" @change="onFileChange" /> <!-- 隐藏的文件输入框，选择文件后触发 onFileChange 方法 -->
<input type="file" style="opacity: 0; height: 100%; position: absolute; left: 0; top: 0;" @change="onFileChange" />
</el-button> </el-button>
<!-- 显示已选择的文件名称 -->
<div>{{dataForm.file.name}}</div> <div>{{dataForm.file.name}}</div>
</el-form-item> </el-form-item>
<!-- 媒体类型选择 -->
<el-form-item label="媒体类型" prop="mediaType"> <el-form-item label="媒体类型" prop="mediaType">
<el-select v-model="dataForm.mediaType" placeholder="媒体类型" style="width:100%"> <el-select v-model="dataForm.mediaType" placeholder="媒体类型" style="width:100%">
<el-option label="图片（2M以内，支持PNG\JPEG\JPG\GIF）" value="image"></el-option> <el-option label="图片（2M以内，支持PNG\JPEG\JPG\GIF）" value="image"></el-option>
@ -16,13 +22,15 @@
<el-option label="缩略图（64K以内JPG）" value="thumb"></el-option> <el-option label="缩略图（64K以内JPG）" value="thumb"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 素材名称输入 -->
<el-form-item label="素材名称" prop="fileName"> <el-form-item label="素材名称" prop="fileName">
<el-input v-model="dataForm.fileName" placeholder="为便于管理建议按用途分类+素材内容命名"></el-input> <el-input v-model="dataForm.fileName" placeholder="为便于管理建议按用途分类+素材内容命名"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{uploading?'提交中...':'提交'}}</el-button> <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{uploading ? '提交中...' : '提交'}}</el-button>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
@ -31,72 +39,79 @@
export default { export default {
data() { data() {
return { return {
visible: false, visible: false, // 控制对话框的可见性
uploading:false, uploading: false, // 控制是否正在上传
dataForm: { dataForm: { // 表单数据模型
mediaId: '', mediaId: '', // 媒体 ID
file: '', file: '', // 选择的文件
fileName: '', fileName: '', // 文件名称
mediaType: 'image' mediaType: 'image' // 媒体类型，默认为 'image'
}, },
dataRule: { dataRule: { // 表单验证规则
fileName: [ fileName: [
{ required: true, message: '素材名称不能为空', trigger: 'blur' } { required: true, message: '素材名称不能为空', trigger: 'blur' } // 素材名称必填
], ],
mediaType: [ mediaType: [
{ required: true, message: '素材类型不能为空', trigger: 'blur' } { required: true, message: '素材类型不能为空', trigger: 'blur' } // 媒体类型必填
] ]
} }
} }
}, },
methods: { methods: {
// 初始化方法，用于设置媒体类型并显示对话框
init(fileType) { init(fileType) {
if(fileType)this.dataForm.mediaType=fileType if (fileType) this.dataForm.mediaType = fileType // 设置媒体类型
this.visible = true this.visible = true // 显示对话框
}, },
// 表单提交 // 表单提交处理
dataFormSubmit() { dataFormSubmit() {
if(this.uploading)return if (this.uploading) return // 如果正在上传，则不再处理提交
// 验证表单
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
this.uploading=true this.uploading = true // 设置为正在上传状态
console.log(this.dataForm) console.log(this.dataForm) // 打印表单数据
let form = new FormData(); let form = new FormData(); // 创建 FormData 对象
// 将表单数据添加到 FormData 中
form.append('mediaId', this.dataForm.mediaId || '') form.append('mediaId', this.dataForm.mediaId || '')
form.append('file', this.dataForm.file) form.append('file', this.dataForm.file)
form.append('fileName', this.dataForm.fileName) form.append('fileName', this.dataForm.fileName)
form.append('mediaType', this.dataForm.mediaType) form.append('mediaType', this.dataForm.mediaType)
// 发送 POST 请求上传文件
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/wxAssets/materialFileUpload`), url: this.$http.adornUrl(`/manage/wxAssets/materialFileUpload`), // 请求的 URL
method: 'post', method: 'post',
data: form, data: form,
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' } // 设置请求头为 multipart/form-data
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 上传成功，显示成功消息
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false // 关闭对话框
this.$emit('refreshDataList') this.$emit('refreshDataList') // 触发父组件刷新数据列表事件
} }
}) })
} else { } else {
// 上传失败，显示错误消息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
this.uploading=false this.uploading = false // 重置上传状态
}) })
} }
}) })
}, },
// 文件选择变化处理
onFileChange(e) { onFileChange(e) {
let file = event.currentTarget.files[0] let file = e.currentTarget.files[0] // 获取选择的文件
this.dataForm.file = file; this.dataForm.file = file; // 设置文件到表单数据
this.dataForm.fileName = file.name.substring(0, file.name.lastIndexOf('.')) this.dataForm.fileName = file.name.substring(0, file.name.lastIndexOf('.')) // 设置文件名称（去掉后缀）
let mediaType = file.type.substring(0, file.type.lastIndexOf('/')) let mediaType = file.type.substring(0, file.type.lastIndexOf('/')) // 获取媒体类型
if (mediaType == 'audio') mediaType = 'voice' if (mediaType === 'audio') mediaType = 'voice' // 将音频类型映射为 'voice'
this.dataForm.mediaType = mediaType this.dataForm.mediaType = mediaType // 设置媒体类型到表单数据
} }
} }
} }

198
src/views/modules/wx/assets/material-file.vue
Unescape View File

@ -1,103 +1,120 @@
<template> <template>
<div class="mod-menu"> <div class="mod-menu">
<!-- 表单，用于新增按钮 -->
<el-form :inline="true" :model="dataForm"> <el-form :inline="true" :model="dataForm">
<el-form-item v-show="!selectMode"> <el-form-item v-show="!selectMode">
<!-- 新增按钮，只有在有权限时才显示 -->
<el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 数据列表加载状态 -->
<div v-loading="dataListLoading"> <div v-loading="dataListLoading">
<!-- 遍历数据列表，生成每个素材的卡片 -->
<div class="card" v-for="item in dataList" :key="item.mediaId" @click="onSelect(item)"> <div class="card" v-for="item in dataList" :key="item.mediaId" @click="onSelect(item)">
<el-image v-if="fileType=='image'" class="card-image" :src="item.url" fit="contain" lazy></el-image> <!-- 如果是图片类型，显示图片 -->
<el-image v-if="fileType === 'image'" class="card-image" :src="item.url" fit="contain" lazy></el-image>
<div v-else class="card-preview"> <div v-else class="card-preview">
<div v-if="fileType=='voice'" class="card-preview-icon el-icon-microphone"></div> <!-- 根据不同的媒体类型显示不同的图标和提示 -->
<div v-if="fileType=='video'" class="card-preview-icon el-icon-video-camera-solid"></div> <div v-if="fileType === 'voice'" class="card-preview-icon el-icon-microphone"></div>
<div v-if="fileType === 'video'" class="card-preview-icon el-icon-video-camera-solid"></div>
<div class="card-preview-text">管理后台不支持预览<br/>微信中可正常播放</div> <div class="card-preview-text">管理后台不支持预览<br/>微信中可正常播放</div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<!-- 显示素材名称和更新时间 -->
<div class="text-cut-name">{{item.name}}</div> <div class="text-cut-name">{{item.name}}</div>
<div>{{$moment(item.updateTime).calendar()}}</div> <div>{{$moment(item.updateTime).calendar()}}</div>
<div class="flex justify-between align-center" v-show="!selectMode"> <div class="flex justify-between align-center" v-show="!selectMode">
<el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button> <!-- 复制 media_id 的按钮 -->
<el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)" >删除</el-button> <el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
<!-- 删除素材的按钮 -->
<el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20]" :page-size="20" :total="totalCount" layout="total, prev,pager, next, jumper"> <!-- 分页组件 -->
<el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20]" :page-size="20" :total="totalCount" layout="total, prev, pager, next, jumper">
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗，用于新增/修改素材 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange"></add-or-update> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
import AddOrUpdate from './material-file-add-or-update' import AddOrUpdate from './material-file-add-or-update' // 导入新增/修改组件
export default { export default {
name:'material-file', name: 'material-file', // 组件名称
props:{ props: {
fileType:{// image、voice、video fileType: { // 媒体类型，支持 image、voice、video
type:String, type: String,
default:'image' default: 'image'
}, },
selectMode:{// 是否选择模式，选择模式下点击素材选中，不可新增和删除 selectMode: { // 是否为选择模式
type:Boolean, type: Boolean,
default:false default: false
} }
}, },
components: { components: {
AddOrUpdate AddOrUpdate // 注册新增/修改组件
}, },
data() { data() {
return { return {
dataForm: {}, dataForm: {}, // 表单数据
addOrUpdateVisible: false, addOrUpdateVisible: false, // 控制新增/修改弹窗的可见性
dataList: [], dataList: [], // 素材数据列表
pageIndex: 1, pageIndex: 1, // 当前页码
pageSize: 20, pageSize: 20, // 每页显示的条数
totalCount: 0, totalCount: 0, // 数据总数
dataListLoading: false, dataListLoading: false, // 加载状态
} }
}, },
mounted(){ mounted() {
this.init() this.init() // 组件挂载后初始化数据
}, },
methods: { methods: {
init(){ init() {
if(!this.dataList.length){ // 初始化方法，如果数据列表为空则获取数据
if (!this.dataList.length) {
this.getDataList() this.getDataList()
} }
}, },
getDataList() { getDataList() {
if(this.dataListLoading) return // 获取数据列表
this.dataListLoading = true if (this.dataListLoading) return // 如果正在加载则不再请求
this.dataListLoading = true // 设置加载状态
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxAssets/materialFileBatchGet'), url: this.$http.adornUrl('/manage/wxAssets/materialFileBatchGet'), // 请求的 URL
params: this.$http.adornParams({ params: this.$http.adornParams({
'page': this.pageIndex, 'page': this.pageIndex, // 当前页码
'type': this.fileType 'type': this.fileType // 媒体类型
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code == 200) { if (data && data.code == 200) {
// 请求成功，更新数据列表和总数
this.dataList = data.data.items this.dataList = data.data.items
this.totalCount = data.data.totalCount this.totalCount = data.data.totalCount
this.pageIndex++; this.pageIndex++; // 页码自增
} else { } else {
// 请求失败，显示错误消息
this.$message.error(data.msg); this.$message.error(data.msg);
} }
this.dataListLoading = false this.dataListLoading = false // 重置加载状态
}) })
}, },
// 新增 / 修改 // 新增/修改处理
addOrUpdateHandle() { addOrUpdateHandle() {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true // 显示新增/修改弹窗
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(this.fileType) this.$refs.addOrUpdate.init(this.fileType) // 初始化新增/修改组件
}) })
}, },
onSelect(itemInfo){ onSelect(itemInfo) {
if(!this.selectMode)return // 选择素材
this.$emit('selected',itemInfo) if (!this.selectMode) return // 如果不是选择模式则不处理
this.$emit('selected', itemInfo) // 向父组件发射选择事件
}, },
//删除 // 删除素材处理
deleteHandle(id) { deleteHandle(id) {
this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', { this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
@ -105,81 +122,86 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxAssets/materialDelete'), url: this.$http.adornUrl('/manage/wxAssets/materialDelete'), // 删除请求的 URL
method: 'post', method: 'post',
data: { mediaId: id } data: { mediaId: id } // 传递媒体 ID
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 删除成功，显示成功消息并刷新数据
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => this.onChange() onClose: () => this.onChange() // 刷新数据列表
}) })
} else { } else {
// 删除失败，显示错误消息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
}) })
}) })
}, },
// 当前页 // 分页当前页变化处理
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val // 更新当前页码
this.getDataList() this.getDataList() // 获取数据列表
}, },
onCopySuccess(){ onCopySuccess() {
// 复制成功提示
this.$message.success('已复制') this.$message.success('已复制')
}, },
onCopyError(err){ onCopyError(err) {
this.$message.error('复制失败,可能是此浏览器不支持复制') // 复制失败提示
this.$message.error('复制失败, 可能是此浏览器不支持复制')
}, },
onChange(){ onChange() {
this.pageIndex=1 // 刷新数据列表的处理
this.getDataList() this.pageIndex = 1 // 重置页码为 1
this.$emit('change') this.getDataList() // 获取数据列表
this.$emit('change') // 向父组件发射变化事件
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.card{ .card {
width: 170px; width: 170px; /* 卡片宽度 */
display: inline-block; display: inline-block; /* 以行内块元素方式显示，允许多个卡片横向排列 */
background: #FFFFFF; background: #FFFFFF; /* 背景颜色 */
border: 1px solid #EBEEF5; border: 1px solid #EBEEF5; /* 边框颜色 */
box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1); /* 盒子阴影 */
margin: 0 10px 10px 0; margin: 0 10px 10px 0; /* 外边距 */
vertical-align: top; vertical-align: top; /* 垂直对齐 */
border-radius: 5px; border-radius: 5px; /* 圆角 */
box-sizing: border-box; box-sizing: border-box; /* 包含内边距和边框在内的盒模型 */
} }
.card:hover{ .card:hover {
border: 2px solid #66b1ff; border: 2px solid #66b1ff; /* 鼠标悬停时加粗边框 */
margin-bottom: 6px; margin-bottom: 6px; /* 下方外边距调整 */
} }
.card-image{ .card-image {
line-height: 170px; line-height: 170px; /* 设定行高以居中内容 */
max-height: 170px; max-height: 170px; /* 最大高度 */
width: 100%; width: 100%; /* 宽度100% */
} }
.card-preview{ .card-preview {
padding: 20px 0; padding: 20px 0; /* 上下内边距 */
color: #d9d9d9; color: #d9d9d9; /* 字体颜色 */
display: flex; display: flex; /* 使用弹性布局 */
justify-content: center; justify-content: center; /* 内容居中对齐 */
align-items: center; align-items: center; /* 垂直居中对齐 */
} }
.card-preview-icon{ .card-preview-icon {
font-size: 30px; font-size: 30px; /* 图标字体大小 */
margin-right: 5px; margin-right: 5px; /* 右侧外边距 */
} }
.card-preview-text{ .card-preview-text {
font-size: 12px; font-size: 12px; /* 文本大小 */
} }
.card-footer{ .card-footer {
color: #ccc; color: #ccc; /* 字体颜色 */
font-size: 12px; font-size: 12px; /* 字体大小 */
padding: 15px 10px; padding: 15px 10px; /* 内边距 */
} }
</style> </style>

187
src/views/modules/wx/assets/material-news-add-or-update.vue
Unescape View File

@ -1,20 +1,23 @@
<template> <template>
<div v-show="visible"> <div v-show="visible"> <!-- 控制弹窗的显示与隐藏 -->
<div class="flex"> <div class="flex">
<div class="card-list"> <div class="card-list">
<div class="text-center margin-bottom">图文列表</div> <div class="text-center margin-bottom">图文列表</div>
<!-- 遍历所有文章，生成列表项 -->
<div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index"> <div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">
<div class="text-cut-name">{{item.title}}</div> <div class="text-cut-name">{{item.title}}</div>
</div> </div>
<!-- 如果文章少于8篇且没有媒体ID，显示新增文章的按钮 -->
<div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div> <div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>
</div> </div>
<!-- 文章表单，绑定到选中的文章 -->
<el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px"> <el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">
<el-form-item label="标题" prop="title"> <el-form-item label="标题" prop="title">
<el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input> <el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="封面图" prop="thumbMediaId"> <el-form-item label="封面图" prop="thumbMediaId">
<el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id"> <el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">
<div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div> <div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div> <!-- 选择封面图的按钮 -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="摘要" prop="digest"> <el-form-item label="摘要" prop="digest">
@ -46,20 +49,21 @@
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="内容" prop="content"> <el-form-item label="内容" prop="content">
<tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor> <tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor> <!-- 富文本编辑器 -->
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="$emit('hide')">取消</el-button> <el-button @click="$emit('hide')">取消</el-button> <!-- 取消按钮 -->
<el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button> <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>
<!-- 提交按钮，根据是否有mediaId来决定按钮显示内容 -->
</div> </div>
<assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector> <assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector> <!-- 选择素材框 -->
</div> </div>
</template> </template>
<script> <script>
const articleTemplate={ const articleTemplate = { // 文章模板
templateId: 0, templateId: 0,
title: '', title: '',
content: '', content: '',
@ -73,23 +77,23 @@ const articleTemplate={
} }
export default { export default {
components: { components: {
TinymceEditor: () => import('@/components/tinymce-editor'), TinymceEditor: () => import('@/components/tinymce-editor'), // 异步引入富文本编辑器组件
AssetsSelector:()=>import('./assets-selector') AssetsSelector: () => import('./assets-selector') // 异步引入素材选择器组件
}, },
props:{ props: {
visible:{ visible: { // 控制组件可见性的属性
type:Boolean, type: Boolean,
default:false default: false
} }
}, },
data() { data() {
return { return {
assetsSelectorVisible:false, assetsSelectorVisible: false, // 控制素材选择器的可见性
mediaId:'', mediaId: '', // 用于存储文章的媒体ID
selectedIndex:0, selectedIndex: 0, // 当前选中文章的索引
articles:[], articles: [], // 存储文章列表
uploading:false, uploading: false, // 上传状态
dataRule: { dataRule: { // 表单的验证规则
title: [ title: [
{ required: true, message: '标题不能为空', trigger: 'blur' } { required: true, message: '标题不能为空', trigger: 'blur' }
], ],
@ -100,122 +104,129 @@ export default {
{ required: true, message: '封面图media_id不能为空', trigger: 'blur' } { required: true, message: '封面图media_id不能为空', trigger: 'blur' }
], ],
contentSourceUrl: [ contentSourceUrl: [
{ required: true, message: '原文地址不得为空', trigger: 'blur' } { required: true, message: '原文地址不得为空', trigger: 'blur' }
] ]
} }
} }
}, },
methods: { methods: {
init(news){ init(news) { // 初始化方法，用于加载新闻数据
if(news && news.mediaId){ if (news && news.mediaId) {
this.mediaId=news.mediaId this.mediaId = news.mediaId; // 如果有mediaId，设置mediaId
this.articles = news.content.articles this.articles = news.content.articles; // 加载新闻的文章内容
}else{ } else {
this.mediaId='' this.mediaId = ''; // 如果没有，从新初始化
this.articles=[{...articleTemplate}] this.articles = [{ ...articleTemplate }]; // 新增一篇文章，使用模板
} }
}, },
// 表单提交 // 表单提交
dataFormSubmit() { dataFormSubmit() {
if(this.uploading)return if (this.uploading) return; // 如果正在上传，返回
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => { // 验证表单
if (valid) { if (valid) {
if(this.mediaId){// 编辑，只能一次修改一篇 if (this.mediaId) { // 如果已有mediaId，执行文章更新
this.materialArticleUpdate(); this.materialArticleUpdate();
}else{ // 新增，全部文章一起保存 } else { // 否则执行文章新增
this.materialNewsUpload(); this.materialNewsUpload();
} }
} }
}) });
}, },
materialNewsUpload(){ // 上传新闻内容
this.uploading=true materialNewsUpload() {
this.uploading = true; // 设置上传状态为true
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`), url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`), // 请求URL
method: 'post', method: 'post', // 请求方法
data: this.$http.adornData(this.articles,false) data: this.$http.adornData(this.articles, false) // 请求数据
}).then(({ data }) => { }).then(({ data }) => {
// 处理成功响应
if (data && data.code === 200) { if (data && data.code === 200) {
this.$message({ this.$message({
message: "操作成功", message: "操作成功", // 成功提示
type: "success", type: "success",
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.$emit("refreshDataList"); this.$emit("refreshDataList"); // 发射刷新数据的事件
this.emit('hide') this.$emit('hide'); // 关闭弹窗
} }
}); });
} else { } else {
this.$message.error(data.msg) this.$message.error(data.msg); // 显示错误消息
} }
this.uploading=false this.uploading = false; // 重置上传状态
}) });
}, },
materialArticleUpdate(){ // 更新文章内容
this.uploading=true materialArticleUpdate() {
this.uploading = true; // 设置上传状态为true
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`), url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`), // 请求URL
method: 'post', method: 'post', // 请求方法
data: this.$http.adornData({ data: this.$http.adornData({
'mediaId':this.mediaId, 'mediaId': this.mediaId, // 传递的mediaId
'index':this.selectedIndex, 'index': this.selectedIndex, // 传递的文章索引
'articles':this.articles[this.selectedIndex] 'articles': this.articles[this.selectedIndex] // 传递的文章数据
}) })
}).then(({ data }) => { }).then(({ data }) => {
// 处理成功响应
if (data && data.code === 200) { if (data && data.code === 200) {
this.$message.success('操作成功') this.$message.success('操作成功'); // 成功提示
} else { } else {
this.$message.error(data.msg) this.$message.error(data.msg); // 显示错误消息
} }
this.uploading=false this.uploading = false; // 重置上传状态
}) });
}, },
addArticle(){ // 添加新文章
this.articles.push({...articleTemplate}) addArticle() {
this.selectedIndex=this.articles.length-1 this.articles.push({ ...articleTemplate }); // 将新的文章模板推入文章列表
this.selectedIndex = this.articles.length - 1; // 更新当前选中索引为新增文章
}, },
onAssetsSelect(assetsInfo){ // 处理素材选择
Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId) onAssetsSelect(assetsInfo) {
this.assetsSelectorVisible=false Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId); // 设置选择的封面图的mediaId
this.assetsSelectorVisible = false; // 关闭素材选择器
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.card-list{ .card-list {
width: 300px; width: 300px; /* 卡片列表的宽度 */
padding-right: 10px; padding-right: 10px; /* 右侧内边距 */
border-right: 1px solid #eeeeee; border-right: 1px solid #eeeeee; /* 右侧边框 */
} }
.card-item{ .card-item {
margin-top: 2px; margin-top: 2px; /* 上外边距 */
padding: 20px 5px; padding: 20px 5px; /* 内边距 */
border: 1px solid #ddd; border: 1px solid #ddd; /* 边框 */
font-size: 12px; font-size: 12px; /* 字体大小 */
line-height: 15px; line-height: 15px; /* 行高 */
} }
.card-item.selected{ .card-item.selected {
border: 2px solid #409EFF; border: 2px solid #409EFF; /* 选中时的边框颜色 */
} }
.text-cut-name{ .text-cut-name {
display: -webkit-box; display: -webkit-box; /* 使用盒子模型 */
word-wrap:break-word; word-wrap: break-word; /* 自动换行 */
word-break:break-all; word-break: break-all; /* 强制断行 */
-webkit-box-orient: vertical; -webkit-box-orient: vertical; /* 垂直方向的盒子模型 */
-webkit-line-clamp: 2; -webkit-line-clamp: 2; /* 限制显示的行数 */
overflow: hidden; overflow: hidden; /* 溢出隐藏 */
} }
.card-add{ .card-add {
margin-top: 2px; margin-top: 2px; /* 上外边距 */
display: block; display: block; /* 块级元素 */
border: 1px dotted #ddd; border: 1px dotted #ddd; /* 虚线边框 */
color: #ddd; color: #ddd; /* 文字颜色 */
text-align: center; text-align: center; /* 居中对齐 */
font-size: 30px; font-size: 30px; /* 文字大小 */
line-height: 50px; line-height: 50px; /* 行高 */
} }
.dialog-footer { .dialog-footer {
margin-top: 20px; margin-top: 20px; /* 上外边距 */
text-align: right; text-align: right; /* 右对齐 */
} }
</style> </style>

49
src/views/modules/wx/assets/material-news.vue
Unescape View File

@ -1,26 +1,45 @@
<template> <template>
<!-- 整个页面的面板容器 -->
<div class="panel"> <div class="panel">
<!-- 根据条件控制显示内容，当addOrUpdateVisible为false时显示以下内容 -->
<div v-show="!addOrUpdateVisible"> <div v-show="!addOrUpdateVisible">
<!-- 内联表单，绑定了dataForm数据模型 -->
<el-form :inline="true" :model="dataForm"> <el-form :inline="true" :model="dataForm">
<!-- 根据selectMode的值决定是否显示该表单元素，当不是选择模式时显示 -->
<el-form-item v-show="!selectMode"> <el-form-item v-show="!selectMode">
<!-- 按钮，根据权限判断是否显示（调用isAuth方法判断），类型为主要按钮，点击时调用addOrUpdateHandle方法，按钮尺寸为迷你型 -->
<el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 加载提示容器，根据dataListLoading的值显示加载状态 -->
<div class="flex justify-start" v-loading="dataListLoading"> <div class="flex justify-start" v-loading="dataListLoading">
<!-- 循环生成行，n表示行号，这里的rows应该是控制每行显示的元素数量相关 -->
<div v-for="n in rows" :key="n"> <div v-for="n in rows" :key="n">
<!-- 循环遍历dataList数据列表，用于展示具体的数据项 -->
<template v-for="(item,i) in dataList"> <template v-for="(item,i) in dataList">
<!-- 根据条件显示卡片元素，当满足i%rows==n-1时显示，点击卡片会调用onSelect方法传递当前项数据 -->
<div class="card" :key="item.mediaId" v-if="i%rows==n-1" @click="onSelect(item)"> <div class="card" :key="item.mediaId" v-if="i%rows==n-1" @click="onSelect(item)">
<!-- 卡片的预览部分，用于展示文章相关信息 -->
<div class="card-preview"> <div class="card-preview">
<!-- 循环遍历文章数组，展示每篇文章的信息，点击文章链接会在新标签页打开（target="_blank"） -->
<a v-for="(article,k) in item.content.articles" :key="k" :href="article.url" class="article-item" target="_blank"> <a v-for="(article,k) in item.content.articles" :key="k" :href="article.url" class="article-item" target="_blank">
<!-- 文章标题，做了多行文本截断显示处理 -->
<div class="article-title">{{article.title}}</div> <div class="article-title">{{article.title}}</div>
<!-- 文章缩略图，通过绑定src属性显示图片 -->
<el-image class="article-thumb" :src="article.thumbUrl"></el-image> <el-image class="article-thumb" :src="article.thumbUrl"></el-image>
</a> </a>
</div> </div>
<!-- 卡片的底部部分，用于展示更新时间以及操作按钮等 -->
<div class="card-footer"> <div class="card-footer">
<!-- 显示更新时间，使用了moment.js库（通过$moment方法调用）将时间格式化为日历格式 -->
<div>{{$moment(item.updateTime).calendar()}}</div> <div>{{$moment(item.updateTime).calendar()}}</div>
<!-- 根据是否是选择模式决定是否显示以下操作按钮 -->
<div class="flex justify-between align-center" v-show="!selectMode"> <div class="flex justify-between align-center" v-show="!selectMode">
<!-- 复制按钮，点击复制media_id，复制成功和失败分别调用对应的方法 -->
<el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button> <el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
<!-- 编辑按钮，点击调用addOrUpdateHandle方法传入当前项数据，按钮类型为文本样式 -->
<el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(item)">编辑</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(item)">编辑</el-button>
<!-- 删除按钮，点击调用deleteHandle方法传入mediaId进行删除操作，按钮类型为文本样式 -->
<el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button>
</div> </div>
</div> </div>
@ -28,20 +47,23 @@
</template> </template>
</div> </div>
</div> </div>
<!-- 分页组件，绑定了相关的分页事件和属性，用于切换页面获取不同页的数据 -->
<el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :total="totalCount" layout="total, prev,pager, next, jumper"> <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :total="totalCount" layout="total, prev,pager, next, jumper">
</el-pagination> </el-pagination>
</div> </div>
<!-- 新增 / 修改 --> <!-- 新增/修改组件，通过属性和事件与父组件进行交互 -->
<add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange" @hide="addOrUpdateVisible=false"></add-or-update> <add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange" @hide="addOrUpdateVisible=false"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
// 引入新增/修改组件
import AddOrUpdate from './material-news-add-or-update' import AddOrUpdate from './material-news-add-or-update'
export default { export default {
name: 'material-news', name: 'material-news',
components: { components: {
AddOrUpdate AddOrUpdate
}, },
// 定义组件接收的属性及其类型和默认值
props: { props: {
selectMode: {// 是否选择模式，选择模式下点击素材选中，不可新增和删除 selectMode: {// 是否选择模式，选择模式下点击素材选中，不可新增和删除
type: Boolean, type: Boolean,
@ -64,50 +86,63 @@ export default {
} }
}, },
mounted(){ mounted(){
// 组件挂载完成后调用init方法进行初始化操作
this.init(); this.init();
}, },
methods: { methods: {
init() { init() {
// 如果数据列表为空，则调用getDataList方法获取数据
if (!this.dataList.length) { if (!this.dataList.length) {
this.getDataList() this.getDataList()
} }
}, },
getDataList() { getDataList() {
// 如果正在加载数据，则直接返回，避免重复请求
if (this.dataListLoading) return if (this.dataListLoading) return
// 设置正在加载数据的状态为true
this.dataListLoading = true this.dataListLoading = true
// 发起HTTP请求获取数据，对请求的URL和参数进行了装饰处理（应该是统一处理请求相关的配置）
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxAssets/materialNewsBatchGet'), url: this.$http.adornUrl('/manage/wxAssets/materialNewsBatchGet'),
params: this.$http.adornParams({ params: this.$http.adornParams({
'page': this.pageIndex 'page': this.pageIndex
}) })
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据的状态码判断是否请求成功
if (data.code == 200) { if (data.code == 200) {
// 如果成功，更新数据列表和总记录数
this.dataList = data.data.items this.dataList = data.data.items
this.totalCount = data.data.totalCount this.totalCount = data.data.totalCount
} else { } else {
// 如果失败，弹出错误提示信息
this.$message.error(data.msg); this.$message.error(data.msg);
} }
// 请求完成后，设置正在加载数据的状态为false
this.dataListLoading = false this.dataListLoading = false
}) })
}, },
onSelect(itemInfo) { onSelect(itemInfo) {
// 如果处于选择模式，才进行后续操作，点击卡片时会通过$emit触发父组件的selected事件传递当前项信息
if (!this.selectMode) return if (!this.selectMode) return
this.$emit('selected', itemInfo) this.$emit('selected', itemInfo)
}, },
//删除 //删除操作方法
deleteHandle(id) { deleteHandle(id) {
// 弹出确认框，让用户确认是否进行删除操作
this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', { this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 如果用户确认，发起删除的HTTP请求
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxAssets/materialDelete'), url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
method: 'post', method: 'post',
data: { mediaId: id } data: { mediaId: id }
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据判断删除操作是否成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，弹出成功提示信息，并在提示框关闭后调用onChange方法更新数据列表
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
@ -115,17 +150,18 @@ export default {
onClose: () => this.onChange() onClose: () => this.onChange()
}) })
} else { } else {
// 如果失败，弹出错误提示信息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
}) })
}) })
}, },
// 当前页 // 当前页切换时的处理方法，更新当前页索引并重新获取数据列表
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val
this.getDataList() this.getDataList()
}, },
// 新增 / 修改 // 新增/修改操作方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件
addOrUpdateHandle(news) { addOrUpdateHandle(news) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true
this.$nextTick(() => { this.$nextTick(() => {
@ -133,12 +169,15 @@ export default {
}) })
}, },
onCopySuccess() { onCopySuccess() {
// 复制成功时的提示方法，弹出成功提示信息
this.$message.success('已复制') this.$message.success('已复制')
}, },
onCopyError(err) { onCopyError(err) {
// 复制失败时的提示方法，弹出失败提示信息，并可以获取到具体的错误信息
this.$message.error('复制失败,可能是此浏览器不支持复制') this.$message.error('复制失败,可能是此浏览器不支持复制')
}, },
onChange() { onChange() {
// 数据更新相关的方法，重置当前页索引为1，重新获取数据列表，并通过$emit触发父组件的change事件
this.pageIndex=1 this.pageIndex=1
this.getDataList() this.getDataList()
this.$emit('change') this.$emit('change')

106
src/views/modules/wx/msg-reply-rule-add-or-update.vue
Unescape View File

@ -1,14 +1,22 @@
<template> <template>
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" > <!-- el-dialog组件用于弹出对话框，根据dataForm中是否有id来设置标题为“新增”或“修改”，点击模态框背景不关闭对话框，通过visible属性双向绑定控制显示隐藏 -->
<el-dialog :title="!dataForm.id? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" >
<!-- el-form组件定义表单，绑定dataForm数据模型，应用dataRule验证规则，设置标签宽度为80px -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
<!-- 规则名称的表单项，对应dataForm中的ruleName属性，设置了必填验证 -->
<el-form-item label="规则名称" prop="ruleName"> <el-form-item label="规则名称" prop="ruleName">
<!-- el-input组件实现输入框，双向绑定dataForm.ruleName，有占位提示文字 -->
<el-input v-model="dataForm.ruleName" placeholder="规则名称"></el-input> <el-input v-model="dataForm.ruleName" placeholder="规则名称"></el-input>
</el-form-item> </el-form-item>
<!-- 匹配词的表单项，使用自定义的tags-editor组件，双向绑定dataForm.matchValue，用于输入或编辑匹配词（可能是多个，类似标签形式） -->
<el-form-item label="匹配词" prop="matchValue"> <el-form-item label="匹配词" prop="matchValue">
<tags-editor v-model="dataForm.matchValue"></tags-editor> <tags-editor v-model="dataForm.matchValue"></tags-editor>
</el-form-item> </el-form-item>
<!-- 第一行布局，使用el-row包裹 -->
<el-row> <el-row>
<!-- 占12列，用于放置作用范围相关的表单元素 -->
<el-col :span="12"> <el-col :span="12">
<!-- 作用范围的表单项，对应dataForm中的appid属性，通过下拉选择框选择，有全部公众号和当前公众号两个选项 -->
<el-form-item label="作用范围" prop="appid"> <el-form-item label="作用范围" prop="appid">
<el-select v-model="dataForm.appid" placeholder="作用范围"> <el-select v-model="dataForm.appid" placeholder="作用范围">
<el-option label="全部公众号" value=""></el-option> <el-option label="全部公众号" value=""></el-option>
@ -16,71 +24,91 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 同样占12列，用于放置精确匹配相关的表单元素，使用el-switch组件实现开关切换功能，双向绑定dataForm.exactMatch -->
<el-col :span="12"> <el-col :span="12">
<el-form-item label="精确匹配" prop="exactMatch"> <el-form-item label="精确匹配" prop="exactMatch">
<el-switch v-model="dataForm.exactMatch" :active-value="true" :inactive-value="false"></el-switch> <el-switch v-model="dataForm.exactMatch" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第二行布局 -->
<el-row> <el-row>
<!-- 占12列，用于放置回复类型相关的表单元素 -->
<el-col :span="12"> <el-col :span="12">
<!-- 回复类型的表单项，对应dataForm中的replyType属性，通过下拉选择框选择，选项通过循环KefuMsgType生成，选择改变时触发onReplyTypeChange方法 -->
<el-form-item label="回复类型" prop="replyType"> <el-form-item label="回复类型" prop="replyType">
<el-select v-model="dataForm.replyType" @change="onReplyTypeChange"> <el-select v-model="dataForm.replyType" @change="onReplyTypeChange">
<el-option v-for="(name,key) in KefuMsgType" :key="key" :value="key" :label="name"></el-option> <el-option v-for="(name,key) in KefuMsgType" :key="key" :value="key" :label="name"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 占12列，用于放置是否启用相关的表单元素，使用el-switch组件实现开关切换功能，双向绑定dataForm.status -->
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否启用" prop="status"> <el-form-item label="是否启用" prop="status">
<el-switch v-model="dataForm.status" :active-value="true" :inactive-value="false"></el-switch> <el-switch v-model="dataForm.status" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第三行布局 -->
<el-row> <el-row>
<!-- 占12列，用于放置生效时间相关的表单元素，使用el-time-picker组件实现时间选择功能，绑定dataForm.effectTimeStart，设置时间格式 -->
<el-col :span="12"> <el-col :span="12">
<el-form-item label="生效时间" prop="effectTimeStart"> <el-form-item label="生效时间" prop="effectTimeStart">
<el-time-picker v-model="dataForm.effectTimeStart" value-format="HH:mm:ss"></el-time-picker> <el-time-picker v-model="dataForm.effectTimeStart" value-format="HH:mm:ss"></el-time-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 占12列，用于放置失效时间相关的表单元素，使用el-time-picker组件实现时间选择功能，绑定dataForm.effectTimeEnd，设置时间格式 -->
<el-col :span="12"> <el-col :span="12">
<el-form-item label="失效时间" prop="effectTimeEnd"> <el-form-item label="失效时间" prop="effectTimeEnd">
<el-time-picker v-model="dataForm.effectTimeEnd" value-format="HH:mm:ss"></el-time-picker> <el-time-picker v-model="dataForm.effectTimeEnd" value-format="HH:mm:ss"></el-time-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 回复内容的表单项，对应dataForm中的replyContent属性，使用el-input组件实现文本域输入框，双向绑定dataForm.replyContent，有行数设置和占位提示文字 -->
<el-form-item label="回复内容" prop="replyContent"> <el-form-item label="回复内容" prop="replyContent">
<el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="文本、图文ID、media_id、json配置"></el-input> <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="文本、图文ID、media_id、json配置"></el-input>
<!-- 当回复类型为文本时显示插入链接按钮，点击调用addLink方法在回复内容中添加链接 -->
<el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button> <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
<!-- 根据assetsType的值决定是否显示按钮，点击打开素材选择器（通过控制assetsSelectorVisible属性），按钮文字根据回复类型有所不同 -->
<el-button type="text" v-show="assetsType" @click="assetsSelectorVisible=true"> <el-button type="text" v-show="assetsType" @click="assetsSelectorVisible=true">
从素材库中选择<span v-if="'miniprogrampage'==dataForm.replyType || 'music'==dataForm.replyType">缩略图</span> 从素材库中选择<span v-if="'miniprogrampage'==dataForm.replyType || 'music'==dataForm.replyType">缩略图</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
<!-- 备注说明的表单项，对应dataForm中的desc属性，使用el-input组件实现输入框，双向绑定dataForm.desc，有占位提示文字 -->
<el-form-item label="备注说明" prop="desc"> <el-form-item label="备注说明" prop="desc">
<el-input v-model="dataForm.desc" placeholder="备注说明"></el-input> <el-input v-model="dataForm.desc" placeholder="备注说明"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部的按钮区域，通过插槽定义 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<!-- 取消按钮，点击时设置visible为false关闭对话框 -->
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<!-- 确定按钮，类型为主要按钮，点击时调用dataFormSubmit方法进行表单提交 -->
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span> </span>
<!-- 素材选择器组件，根据条件控制显示，通过属性和事件与当前组件进行交互，用于选择素材相关操作 -->
<assets-selector v-if="assetsSelectorVisible && assetsType" :visible="assetsSelectorVisible" :selectType="assetsType" @selected="onAssetsSelect" @onClose="assetsSelectorVisible=false"></assets-selector> <assets-selector v-if="assetsSelectorVisible && assetsType" :visible="assetsSelectorVisible" :selectType="assetsType" @selected="onAssetsSelect" @onClose="assetsSelectorVisible=false"></assets-selector>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
components: { components: {
// 异步加载tags-editor组件，用于编辑匹配词相关功能
tagsEditor: () => import('@/components/tags-editor'), tagsEditor: () => import('@/components/tags-editor'),
AssetsSelector:()=>import('./assets/assets-selector') // 异步加载AssetsSelector组件，用于选择素材相关功能
AssetsSelector: () => import('./assets/assets-selector')
}, },
data() { data() {
return { return {
visible: false, visible: false,
assetsSelectorVisible:false, assetsSelectorVisible: false,
dataForm: { dataForm: {
// 规则ID，初始化为0
ruleId: 0, ruleId: 0,
appid:'', appid: '',
ruleName: "", ruleName: "",
exactMatch: false, exactMatch: false,
matchValue: "", matchValue: "",
@ -92,24 +120,31 @@ export default {
effectTimeEnd: "23:59:59" effectTimeEnd: "23:59:59"
}, },
dataRule: { dataRule: {
// 规则名称的验证规则，必填，触发验证的时机是失去焦点（blur）
ruleName: [ ruleName: [
{ required: true, message: "规则名称不能为空", trigger: "blur" } { required: true, message: "规则名称不能为空", trigger: "blur" }
], ],
// 匹配词的验证规则，必填，触发验证的时机是失去焦点
matchValue: [ matchValue: [
{ required: true, message: "匹配的关键词、事件等不能为空", trigger: "blur" } { required: true, message: "匹配的关键词、事件等不能为空", trigger: "blur" }
], ],
// 回复类型的验证规则，必填，触发验证的时机是失去焦点
replyType: [ replyType: [
{ required: true, message: "回复类型（1:文本2:图文3媒体）不能为空", trigger: "blur" } { required: true, message: "回复类型（1:文本2:图文3媒体）不能为空", trigger: "blur" }
], ],
// 回复内容的验证规则，必填，触发验证的时机是失去焦点
replyContent: [ replyContent: [
{ required: true, message: "回复内容不能为空", trigger: "blur" } { required: true, message: "回复内容不能为空", trigger: "blur" }
], ],
// 是否启用的验证规则，必填，触发验证的时机是失去焦点
status: [ status: [
{ required: true, message: "是否有效不能为空", trigger: "blur" } { required: true, message: "是否有效不能为空", trigger: "blur" }
], ],
// 生效起始时间的验证规则，必填，触发验证的时机是失去焦点
effectTimeStart: [ effectTimeStart: [
{ required: true, message: "生效起始时间不能为空", trigger: "blur" } { required: true, message: "生效起始时间不能为空", trigger: "blur" }
], ],
// 生效结束时间的验证规则，必填，触发验证的时机是失去焦点
effectTimeEnd: [ effectTimeEnd: [
{ required: true, message: "生效结束时间不能为空", trigger: "blur" } { required: true, message: "生效结束时间不能为空", trigger: "blur" }
] ]
@ -117,49 +152,60 @@ export default {
}; };
}, },
computed: mapState({ computed: mapState({
KefuMsgType: state=>state.message.KefuMsgType, // 从Vuex的state中获取message模块下的KefuMsgType状态，映射到组件的计算属性中，用于回复类型下拉框的选项数据
selectedAppid:state=>state.wxAccount.selectedAppid, KefuMsgType: state => state.message.KefuMsgType,
assetsType(){ // 从Vuex的state中获取wxAccount模块下的selectedAppid状态，映射到组件的计算属性中，用于作用范围下拉框中当前公众号选项的值
const config={//消息类型与选择素材类型对应关系 selectedAppid: state => state.wxAccount.selectedAppid,
'image':'image', assetsType() {
'voice':'voice', const config = {
'video':'video', // 定义消息类型与选择素材类型的对应关系，用于根据回复类型确定在素材库中选择的素材类型
'mpnews':'news', 'image': 'image',
'miniprogrampage':'image',//小程序需选择卡片图 'voice': 'voice',
'music':'image' 'video': 'video',
} 'mpnews': 'news',
return config[this.dataForm.replyType] || '' 'miniprogrampage': 'image', // 小程序需选择卡片图
'music': 'image'
};
return config[this.dataForm.replyType] || '';
} }
}), }),
methods: { methods: {
init(id) { init(id) {
// 初始化时设置dataForm的ruleId属性，传入的id为空则设置为0
this.dataForm.ruleId = id || 0; this.dataForm.ruleId = id || 0;
// 设置对话框显示状态为true，即打开对话框
this.visible = true; this.visible = true;
this.$nextTick(() => { this.$nextTick(() => {
// 表单DOM更新后，重置表单所有字段的值
this.$refs["dataForm"].resetFields(); this.$refs["dataForm"].resetFields();
if (this.dataForm.ruleId) { if (this.dataForm.ruleId) {
// 如果ruleId有值，表示是修改操作，发起HTTP请求获取规则详情信息
this.$http({ this.$http({
url: this.$http.adornUrl( `/manage/msgReplyRule/info/${this.dataForm.ruleId}` ), url: this.$http.adornUrl(`/manage/msgReplyRule/info/${this.dataForm.ruleId}`),
method: "get", method: "get",
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果请求成功，将返回的规则数据赋值给dataForm
this.dataForm = data.msgReplyRule; this.dataForm = data.msgReplyRule;
} }
}); });
} }
}); });
}, },
// 表单提交 // 表单提交方法
dataFormSubmit() { dataFormSubmit() {
// 对表单进行验证，验证结果通过回调函数的参数valid返回
this.$refs["dataForm"].validate(valid => { this.$refs["dataForm"].validate(valid => {
if (valid) { if (valid) {
// 如果表单验证通过，发起HTTP请求保存或更新规则数据（根据ruleId是否有值判断是新增还是更新操作）
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/msgReplyRule/${!this.dataForm.ruleId ? "save" : "update"}`), url: this.$http.adornUrl(`/manage/msgReplyRule/${!this.dataForm.ruleId? "save" : "update"}`),
method: "post", method: "post",
data: this.$http.adornData(this.dataForm) data: this.$http.adornData(this.dataForm)
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果操作成功，弹出成功提示信息，提示框关闭后设置对话框隐藏，并通过$emit触发父组件的refreshDataList事件
this.$message({ this.$message({
message: "操作成功", message: "操作成功",
type: "success", type: "success",
@ -170,6 +216,7 @@ export default {
} }
}); });
} else { } else {
// 如果操作失败，弹出错误提示信息
this.$message.error(data.msg); this.$message.error(data.msg);
} }
}); });
@ -177,9 +224,11 @@ export default {
}); });
}, },
addLink() { addLink() {
// 插入链接的方法，在回复内容中添加一个简单的链接示例文本（实际应用中可能需要更灵活的处理方式来确定链接地址和文字等）
this.dataForm.replyContent += '<a href="链接地址">链接文字</a>' this.dataForm.replyContent += '<a href="链接地址">链接文字</a>'
}, },
onReplyTypeChange(value) { onReplyTypeChange(value) {
// 根据回复类型改变时的不同值，设置不同的回复内容默认值（以JSON格式字符串表示，方便后续解析和使用）
if ("miniprogrampage" == value) { if ("miniprogrampage" == value) {
let demo = { title: "标题", appid: "小程序APPID", pagepath: "页面地址", thumb_media_id: "缩略图media_id" }; let demo = { title: "标题", appid: "小程序APPID", pagepath: "页面地址", thumb_media_id: "缩略图media_id" };
this.dataForm.replyContent = JSON.stringify(demo, null, 4) this.dataForm.replyContent = JSON.stringify(demo, null, 4)
@ -190,21 +239,22 @@ export default {
let demo = { head_content: "开头文字", list: [{ id: "菜单1ID", content: "菜单2内容" }, { id: "菜单2ID", content: "菜单2内容" }, { id: "菜单nID", content: "菜单n内容" }], tail_content: "结尾文字" } let demo = { head_content: "开头文字", list: [{ id: "菜单1ID", content: "菜单2内容" }, { id: "菜单2ID", content: "菜单2内容" }, { id: "菜单nID", content: "菜单n内容" }], tail_content: "结尾文字" }
this.dataForm.replyContent = JSON.stringify(demo, null, 4) this.dataForm.replyContent = JSON.stringify(demo, null, 4)
} else if ("news" == value) { } else if ("news" == value) {
let demo={title:"文章标题",description:"文章简介",url:"链接URL",picUrl:"缩略图URL"} let demo = { title: "文章标题", description: "文章简介", url: "链接URL", picUrl: "缩略图URL" }
this.dataForm.replyContent = JSON.stringify(demo, null, 4) this.dataForm.replyContent = JSON.stringify(demo, null, 4)
} else { } else {
this.dataForm.replyContent = '媒体素材media_id' this.dataForm.replyContent = '媒体素材media_id'
} }
}, },
onAssetsSelect(assetsInfo){ onAssetsSelect(assetsInfo) {
if(this.dataForm.replyType=='miniprogrampage' || this.dataForm.replyType=='music'){ // 素材选择后的处理方法，根据回复类型判断如何更新回复内容，若是小程序页面或音乐类型，更新对应的缩略图media_id，否则直接赋值为所选素材的mediaId
let data = JSON.parse(this.dataForm.replyContent) if (this.dataForm.replyType =='miniprogrampage' || this.dataForm.replyType =='music') {
if(data && data.thumb_media_id)data.thumb_media_id=assetsInfo.mediaId let data = JSON.parse(this.dataForm.replyContent);
this.dataForm.replyContent = JSON.stringify(data, null, 4) if (data && data.thumb_media_id) data.thumb_media_id = assetsInfo.mediaId;
}else{ this.dataForm.replyContent = JSON.stringify(data, null, 4);
this.dataForm.replyContent = assetsInfo.mediaId } else {
this.dataForm.replyContent = assetsInfo.mediaId;
} }
this.assetsSelectorVisible=false this.assetsSelectorVisible = false;
} }
} }
}; };

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

@ -1,50 +1,72 @@
<template> <template>
<!-- 整个模块的容器类，用于包裹后续的表单、表格、分页等组件 -->
<div class="mod-config"> <div class="mod-config">
<!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 匹配关键词输入框所在的表单项 -->
<el-form-item> <el-form-item>
<!-- 使用el-input组件实现输入框，双向绑定dataForm.matchValue，有占位提示文字且可清空输入内容 -->
<el-input v-model="dataForm.matchValue" placeholder="匹配关键词" clearable></el-input> <el-input v-model="dataForm.matchValue" placeholder="匹配关键词" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 操作按钮所在的表单项 -->
<el-form-item> <el-form-item>
<!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
<el-button v-if="isAuth('wx:msgreplyrule:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('wx:msgreplyrule:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
<el-button v-if="isAuth('wx:msgreplyrule:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('wx:msgreplyrule:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，可展开行（type="expand"），加载数据时显示加载提示，监听选择项变化事件 -->
<el-table :data="dataList" border type="expand" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border type="expand" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<!-- 展开列，通过插槽定义展开内容，这里展示了更多规则相关详细信息的表单 -->
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand"> <el-form label-position="left" inline class="demo-table-expand">
<!-- 作用范围信息展示的表单项，根据数据项中的appid值判断显示“当前公众号”或“全部公众号” -->
<el-form-item label="作用范围"> <el-form-item label="作用范围">
<span>{{ props.row.appid?'当前公众号':'全部公众号' }}</span> <span>{{ props.row.appid? '当前公众号' : '全部公众号' }}</span>
</el-form-item> </el-form-item>
<!-- 精确匹配信息展示的表单项，根据数据项中的exactMatch值判断显示“是”或“否” -->
<el-form-item label="精确匹配"> <el-form-item label="精确匹配">
<span>{{ props.row.exactMatch?'是':'否' }}</span> <span>{{ props.row.exactMatch? '是' : '否' }}</span>
</el-form-item> </el-form-item>
<!-- 是否有效信息展示的表单项，根据数据项中的status值判断显示“是”或“否” -->
<el-form-item label="是否有效"> <el-form-item label="是否有效">
<span>{{ props.row.status?'是':'否' }}</span> <span>{{ props.row.status? '是' : '否' }}</span>
</el-form-item> </el-form-item>
<!-- 备注说明信息展示的表单项，直接显示数据项中的desc值 -->
<el-form-item label="备注说明"> <el-form-item label="备注说明">
<span>{{ props.row.desc }}</span> <span>{{ props.row.desc }}</span>
</el-form-item> </el-form-item>
<!-- 生效时间信息展示的表单项，直接显示数据项中的effectTimeStart值 -->
<el-form-item label="生效时间"> <el-form-item label="生效时间">
<span>{{ props.row.effectTimeStart }}</span> <span>{{ props.row.effectTimeStart }}</span>
</el-form-item> </el-form-item>
<!-- 失效时间信息展示的表单项，直接显示数据项中的effectTimeEnd值 -->
<el-form-item label="失效时间"> <el-form-item label="失效时间">
<span>{{ props.row.effectTimeEnd }}</span> <span>{{ props.row.effectTimeEnd }}</span>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column> </el-table-column>
<!-- 规则名称列，对应dataList中数据项的ruleName属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="ruleName" header-align="center" align="center" show-overflow-tooltip label="规则名称"> <el-table-column prop="ruleName" header-align="center" align="center" show-overflow-tooltip label="规则名称">
</el-table-column> </el-table-column>
<!-- 匹配关键词列，对应dataList中数据项的matchValue属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="matchValue" header-align="center" align="center" show-overflow-tooltip label="匹配关键词"> <el-table-column prop="matchValue" header-align="center" align="center" show-overflow-tooltip label="匹配关键词">
</el-table-column> </el-table-column>
<!-- 消息类型列，对应dataList中数据项的replyType属性，使用formatter函数格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="replyType" header-align="center" align="center" :formatter="replyTypeFormat" label="消息类型"> <el-table-column prop="replyType" header-align="center" align="center" :formatter="replyTypeFormat" label="消息类型">
</el-table-column> </el-table-column>
<!-- 回复内容列，对应dataList中数据项的replyContent属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="replyContent" header-align="center" align="center" show-overflow-tooltip label="回复内容"> <el-table-column prop="replyContent" header-align="center" align="center" show-overflow-tooltip label="回复内容">
</el-table-column> </el-table-column>
<!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了修改和删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.ruleId)">修改</el-button> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.ruleId)">修改</el-button>
@ -52,15 +74,18 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div> </div>
</template> </template>
<script> <script>
// 引入新增/修改组件，用于实现规则的新增或修改功能相关交互逻辑
import AddOrUpdate from './msg-reply-rule-add-or-update' import AddOrUpdate from './msg-reply-rule-add-or-update'
// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
components: { components: {
@ -81,16 +106,20 @@ export default {
} }
}, },
computed: mapState({ computed: mapState({
KefuMsgType: state=>state.message.KefuMsgType // 从Vuex的state中获取message模块下的KefuMsgType状态，映射到组件的计算属性中，用于消息类型列的格式化显示操作
KefuMsgType: state => state.message.KefuMsgType
}), }),
activated() { activated() {
// 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
this.getDataList() this.getDataList()
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表的方法
getDataList() { getDataList() {
// 设置正在加载数据的状态为true
this.dataListLoading = true this.dataListLoading = true
// 发起HTTP请求获取消息回复规则的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/msgReplyRule/list'), url: this.$http.adornUrl('/manage/msgReplyRule/list'),
method: 'get', method: 'get',
@ -100,52 +129,60 @@ export default {
'matchValue': this.dataForm.matchValue 'matchValue': this.dataForm.matchValue
}) })
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据的状态码判断是否请求成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，更新数据列表和总记录数
this.dataList = data.page.list this.dataList = data.page.list
this.totalCount = data.page.totalCount this.totalCount = data.page.totalCount
} else { } else {
// 如果失败，清空数据列表和总记录数
this.dataList = [] this.dataList = []
this.totalCount = 0 this.totalCount = 0
} }
// 请求完成后，设置正在加载数据的状态为false
this.dataListLoading = false this.dataListLoading = false
}) })
}, },
// 每页数 // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val
this.pageIndex = 1 this.pageIndex = 1
this.getDataList() this.getDataList()
}, },
// 当前页 // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val
this.getDataList() this.getDataList()
}, },
// 多选 // 处理表格中选择项变化的方法，更新选中的数据项列表
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val
}, },
// 新增 / 修改 // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入规则的id（可为空表示新增）
addOrUpdateHandle(id) { addOrUpdateHandle(id) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(id) this.$refs.addOrUpdate.init(id)
}) })
}, },
// 删除 // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
deleteHandle(id) { deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.ruleId) // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的ruleId数组进行批量删除
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { var ids = id? [id] : this.dataListSelections.map(item => item.ruleId)
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/msgReplyRule/delete'), url: this.$http.adornUrl('/manage/msgReplyRule/delete'),
method: 'post', method: 'post',
data: this.$http.adornData(ids, false) data: this.$http.adornData(ids, false)
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据判断删除操作是否成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
@ -153,11 +190,13 @@ export default {
onClose: () => this.getDataList() onClose: () => this.getDataList()
}) })
} else { } else {
// 如果失败，弹出错误提示信息
this.$message.error(data.msg) this.$message.error(data.msg)
} }
}) })
}) })
}, },
// 消息类型格式化的方法，根据数据项中的消息类型值，从KefuMsgType对象中获取对应的显示名称并返回
replyTypeFormat(row, column, cellValue) { replyTypeFormat(row, column, cellValue) {
return this.KefuMsgType[cellValue]; return this.KefuMsgType[cellValue];
} }

120
src/views/modules/wx/msg-template-add-or-update.vue
Unescape View File

@ -1,51 +1,65 @@
<template> <template>
<!-- el-dialog组件用于创建一个对话框，设置了标题、点击模态框不关闭、双向绑定显示隐藏状态等属性 -->
<el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible"> <el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible">
<!-- el-form组件用于创建表单，绑定了表单数据模型、验证规则，设置了标签宽度、尺寸等属性 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini">
<!-- 表单项目，用于输入标题，绑定了dataForm中的title字段，设置了提示文字 -->
<el-form-item label="标题" prop="title"> <el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="标题"></el-input> <el-input v-model="dataForm.title" placeholder="标题"></el-input>
</el-form-item> </el-form-item>
<!-- 表单项目，用于输入链接，绑定了dataForm中的url字段，设置了提示文字 -->
<el-form-item label="链接" prop="url"> <el-form-item label="链接" prop="url">
<el-input v-model="dataForm.url" placeholder="跳转链接"></el-input> <el-input v-model="dataForm.url" placeholder="跳转链接"></el-input>
</el-form-item> </el-form-item>
<div> <div>
<!-- 表单项目，用于输入小程序appid，绑定了dataForm.miniprogram.appid字段，设置了提示文字 -->
<el-form-item label="小程序appid" prop="miniprogram.appid"> <el-form-item label="小程序appid" prop="miniprogram.appid">
<el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input> <el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input>
</el-form-item> </el-form-item>
<!-- 表单项目，用于输入小程序路径，绑定了dataForm.miniprogram.pagePath字段，设置了提示文字 -->
<el-form-item label="小程序路径" prop="miniprogram.pagePath"> <el-form-item label="小程序路径" prop="miniprogram.pagePath">
<el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input> <el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input>
</el-form-item> </el-form-item>
</div> </div>
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<!-- 表单项目，用于输入模版名称，绑定了dataForm中的name字段，设置了提示文字 -->
<el-form-item label="模版名称" prop="name"> <el-form-item label="模版名称" prop="name">
<el-input v-model="dataForm.name" placeholder="模版名称"></el-input> <el-input v-model="dataForm.name" placeholder="模版名称"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<!-- 表单项目，使用el-switch组件用于切换是否有效状态，绑定了dataForm中的status字段 -->
<el-form-item label="有效" prop="status"> <el-form-item label="有效" prop="status">
<el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch> <el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<div class="form-group-area"> <div class="form-group-area">
<el-form-item class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item> <!-- 表单项目，用于显示提示信息，告知消息填充数据的相关要求 -->
<el-form-item class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>
<!-- 表单项目，使用textarea类型的el-input展示模板内容，设置为禁用状态 -->
<el-form-item> <el-form-item>
<el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input> <el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input>
</el-form-item> </el-form-item>
<el-row v-for="(item,index) in dataForm.data" :key="item.name"> <!-- 使用v-for循环遍历dataForm.data数组，动态生成表单项目，用于输入消息填充数据及设置颜色 -->
<el-row v-for="(item, index) in dataForm.data" :key="item.name">
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="item.name" :prop="'data.'+index+'.value'" :rules="[{required: true,message: '填充内容不得为空', trigger: 'blur' }]"> <!-- 表单项目，根据循环的索引和字段名绑定对应的数据项的value字段，设置了必填验证规则 -->
<el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容" ></el-input> <el-form-item :label="item.name" :prop="'data.' + index + '.value'" :rules="[{required: true, message: '填充内容不得为空', trigger: 'blur' }]">
<el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="颜色" > <!-- 表单项目，用于输入颜色值，绑定对应数据项的color字段 -->
<el-form-item label="颜色">
<el-input type="color" v-model="item.color" placeholder="颜色"></el-input> <el-input type="color" v-model="item.color" placeholder="颜色"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</el-form> </el-form>
<!-- 在对话框的底部插槽中添加取消和确定按钮，分别绑定对应的点击事件 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
@ -57,18 +71,20 @@
export default { export default {
data() { data() {
return { return {
visible: false, visible: false, // 控制对话框的显示状态
// 表单数据对象，包含了各种表单字段的初始值，如id、templateId、标题、数据数组、链接等
dataForm: { dataForm: {
id: 0, id: 0,
templateId: '', templateId: '',
title: '', title: '',
data: [], data: [], // 用于存储动态生成的数据项
url: '', url: '',
miniprogram:{appid:'',pagePath:''}, miniprogram: { appid: '', pagePath: '' }, // 小程序相关信息
content: '', content: '', // 模板内容
status: true, status: true, // 模板的有效状态
name: '' name: '' // 模板名称
}, },
// 表单验证规则对象，定义了部分字段的必填等验证规则
dataRule: { dataRule: {
title: [ title: [
{ required: true, message: '标题不能为空', trigger: 'blur' } { required: true, message: '标题不能为空', trigger: 'blur' }
@ -83,26 +99,33 @@ export default {
} }
}, },
methods: { methods: {
// 初始化方法，接受一个id作为参数
init(id) { init(id) {
console.log('init',id) console.log('init', id);
this.dataForm.id = id || 0 // 设置表单数据对象的id字段，如果传入的id为空则设为0
this.visible = true this.dataForm.id = id || 0;
// 设置对话框为显示状态
this.visible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() // 重置表单字段
this.$refs['dataForm'].resetFields();
if (this.dataForm.id) { if (this.dataForm.id) {
// 如果有id，使用axios（这里假设$http是基于axios封装的）发送GET请求获取模板信息
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`), url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`),
method: 'get', method: 'get',
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
this.transformTemplate(data.msgTemplate) // 如果请求成功，调用方法处理获取到的模板信息
}else{ this.transformTemplate(data.msgTemplate);
this.$message.error(data.msg) } else {
// 如果请求失败，显示错误提示信息
this.$message.error(data.msg);
} }
}) });
} }
}) });
}, },
/** /**
* 根据content信息展开data配置项(content为微信公众平台后台配置的模板) * 根据content信息展开data配置项(content为微信公众平台后台配置的模板)
@ -110,56 +133,63 @@ export default {
* 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}] * 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}]
* 展示表单让管理员给对应的字段填充内容 * 展示表单让管理员给对应的字段填充内容
*/ */
transformTemplate(template){ transformTemplate(template) {
if(!template.miniprogram)template.miniprogram={appid:'',pagePath:''} if (!template.miniprogram) template.miniprogram = { appid: '', pagePath: '' };
if(template.data instanceof Array) {//已经配置过了，直接读取 if (template.data instanceof Array) { // 如果已经配置过了，直接读取
this.dataForm = template this.dataForm = template;
return return;
} }
template.data=[] template.data = [];
let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || [] //示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"] // 通过正则表达式匹配content中类似{{xxx.DATA}}的内容，提取出其中的xxx部分，放入keysArray数组
keysArray.map(item=>{ let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || []; // 示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]
name=item.replace('{{','').replace('.DATA}}','') keysArray.map(item => {
template.data.push({"name":name,"value":"",color:"#000000"}) const name = item.replace('{{', '').replace('.DATA}}', '');
}) // 基于提取的字段名创建对应的data数据项，设置初始的value为空，颜色为黑色
this.dataForm = template template.data.push({ "name": name, "value": "", color: "#000000" });
});
this.dataForm = template; // 更新dataForm
}, },
// 表单提交 // 表单提交的方法
dataFormSubmit() { dataFormSubmit() {
// 对整个表单进行验证
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
// 使用axios（这里假设$http是基于axios封装的）发送POST请求提交表单数据，根据id是否存在决定是保存还是更新操作
this.$http({ this.$http({
url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`), url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post', method: 'post',
data: this.$http.adornData(this.dataForm) data: this.$http.adornData(this.dataForm) // 装饰数据
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果操作成功，显示成功提示信息，并在提示信息关闭后隐藏对话框，触发父组件的refreshDataList事件
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false; // 隐藏对话框
this.$emit('refreshDataList') this.$emit('refreshDataList'); // 触发父组件的事件
} }
}) });
} else { } else {
this.$message.error(data.msg) // 如果操作失败，显示错误提示信息
this.$message.error(data.msg);
} }
}) });
} }
}) });
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.form-group-area{ .form-group-area {
border:1px dotted gray; border: 1px dotted gray; /* 添加边框样式，使其更明显 */
} }
.form-group-title{ .form-group-title {
color: gray; color: gray; /* 设置标题颜色 */
font-size: 12px; font-size: 12px; /* 设置标题字体大小 */
} }
</style> </style>

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

@ -1,36 +1,55 @@
<template> <template>
<!-- 整个模块的容器类，用于包裹后续的表单、表格、分页以及相关弹窗组件等 -->
<div class="mod-config"> <div class="mod-config">
<!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 标题输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.title，有占位提示文字且可清空输入内容 -->
<el-form-item> <el-form-item>
<el-input v-model="dataForm.title" placeholder="标题" clearable></el-input> <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 操作按钮所在的表单项 -->
<el-form-item> <el-form-item>
<!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<!-- 批量复制按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为成功按钮，点击时调用copyHandle方法，当没有选中的数据项时禁用按钮 -->
<el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="copyHandle()" :disabled="dataListSelections.length <= 0">批量复制</el-button> <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="copyHandle()" :disabled="dataListSelections.length <= 0">批量复制</el-button>
<el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!=1">推送消息</el-button> <!-- 推送消息按钮，根据权限决定是否显示，类型为成功按钮，点击时调用templateMsgTaskHandle方法，当选中的数据项数量不为1时禁用按钮 -->
<el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!= 1">推送消息</el-button>
<!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
<el-button v-if="isAuth('wx:msgtemplate:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('wx:msgtemplate:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
<!-- 靠右对齐的表单项，包含同步公众号模板按钮和模板管理指引链接按钮 -->
<el-form-item class="fr"> <el-form-item class="fr">
<el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate?'同步中...':'同步公众号模板'}}</el-button> <!-- 同步公众号模板按钮，根据权限决定是否显示，点击时调用syncWxTemplate方法，按钮文字根据同步状态动态变化，正在同步时显示“同步中...”，否则显示“同步公众号模板”，同步过程中按钮禁用 -->
<el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate? '同步中...' : '同步公众号模板'}}</el-button>
<!-- 模板管理指引链接按钮，点击后在新标签页打开指定的链接 -->
<el-button><el-link type="primary" icon="el-icon-link" target="_blank" href="https://kf.qq.com/faq/170209E3InyI170209nIF7RJ.html">模板管理指引</el-link></el-button> <el-button><el-link type="primary" icon="el-icon-link" target="_blank" href="https://kf.qq.com/faq/170209E3InyI170209nIF7RJ.html">模板管理指引</el-link></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column> </el-table-column>
<!-- 模板ID列，对应dataList中数据项的templateId属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="templateId" show-overflow-tooltip header-align="center" align="center" label="模板ID"> <el-table-column prop="templateId" show-overflow-tooltip header-align="center" align="center" label="模板ID">
</el-table-column> </el-table-column>
<!-- 标题列，对应dataList中数据项的title属性，通过插槽使用a标签包裹内容使其可点击跳转（链接地址取自数据项的url属性），设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="title" header-align="center" align="center" label="标题"> <el-table-column prop="title" header-align="center" align="center" label="标题">
<a :href="scope.row.url" slot-scope="scope">{{scope.row.title}}</a> <a :href="scope.row.url" slot-scope="scope">{{scope.row.title}}</a>
</el-table-column> </el-table-column>
<!-- 模版名称列，对应dataList中数据项的name属性，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="name" header-align="center" align="center" label="模版名称"> <el-table-column prop="name" header-align="center" align="center" label="模版名称">
</el-table-column> </el-table-column>
<!-- 模版字段列，对应dataList中数据项的content属性，显示溢出提示，设置了表头和内容的对齐方式以及列宽度 -->
<el-table-column prop="content" show-overflow-tooltip header-align="center" align="center" label="模版字段" width="200"> <el-table-column prop="content" show-overflow-tooltip header-align="center" align="center" label="模版字段" width="200">
</el-table-column> </el-table-column>
<!-- 是否有效列，对应dataList中数据项的status属性，通过插槽根据数据项的status值判断显示“是”或“否”，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="status" header-align="center" align="center" label="是否有效"> <el-table-column prop="status" header-align="center" align="center" label="是否有效">
<span slot-scope="scope">{{scope.row.status?"是":"否"}}</span> <span slot-scope="scope">{{scope.row.status? "是" : "否"}}</span>
</el-table-column> </el-table-column>
<!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了配置和删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">配置</el-button> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">配置</el-button>
@ -38,16 +57,22 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<!-- 模板消息任务组件，根据templateMsgTaskVisible的值决定是否显示 -->
<template-msg-task v-if="templateMsgTaskVisible" ref="templateMsgTask"></template-msg-task> <template-msg-task v-if="templateMsgTaskVisible" ref="templateMsgTask"></template-msg-task>
</div> </div>
</template> </template>
<script> <script>
// 引入新增/修改组件，用于实现模板的新增或修改功能相关交互逻辑
import AddOrUpdate from './msg-template-add-or-update' import AddOrUpdate from './msg-template-add-or-update'
// 引入模板消息任务组件，用于处理模板消息相关任务逻辑
import TemplateMsgTask from '@/components/template-msg-task' import TemplateMsgTask from '@/components/template-msg-task'
export default { export default {
data() { data() {
@ -62,20 +87,23 @@ export default {
dataListLoading: false, dataListLoading: false,
dataListSelections: [], dataListSelections: [],
addOrUpdateVisible: false, addOrUpdateVisible: false,
templateMsgTaskVisible:false, templateMsgTaskVisible: false,
synchonizingWxTemplate:false synchonizingWxTemplate: false
} }
}, },
components: { components: {
AddOrUpdate,TemplateMsgTask AddOrUpdate, TemplateMsgTask
}, },
activated() { activated() {
// 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
this.getDataList() this.getDataList()
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表的方法
getDataList() { getDataList() {
this.dataListLoading = true // 设置正在加载数据的状态为true
this.dataListLoading = true;
// 发起HTTP请求获取消息模板的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/msgTemplate/list'), url: this.$http.adornUrl('/manage/msgTemplate/list'),
method: 'get', method: 'get',
@ -87,128 +115,159 @@ export default {
'order': 'desc' 'order': 'desc'
}) })
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据的状态码判断是否请求成功
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataList = data.page.list // 如果成功，更新数据列表和总记录数
this.totalCount = data.page.totalCount this.dataList = data.page.list;
this.totalCount = data.page.totalCount;
} else { } else {
this.dataList = [] // 如果失败，清空数据列表和总记录数
this.totalCount = 0 this.dataList = [];
this.totalCount = 0;
} }
this.dataListLoading = false // 请求完成后，设置正在加载数据的状态为false
}) this.dataListLoading = false;
});
}, },
// 每页数 // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val;
this.pageIndex = 1 this.pageIndex = 1;
this.getDataList() this.getDataList();
}, },
// 当前页 // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val;
this.getDataList() this.getDataList();
}, },
// 多选 // 处理表格中选择项变化的方法，更新选中的数据项列表
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val;
}, },
// 新增 / 修改 // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入模板的id（可为空表示新增）
addOrUpdateHandle(id) { addOrUpdateHandle(id) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(id) this.$refs.addOrUpdate.init(id);
}) });
}, },
// 删除 // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
deleteHandle(id) { deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.id) // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的id数组进行批量删除
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { var ids = id? [id] : this.dataListSelections.map(item => item.id);
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/msgTemplate/delete'), url: this.$http.adornUrl('/manage/msgTemplate/delete'),
method: 'post', method: 'post',
data: this.$http.adornData(ids, false) data: this.$http.adornData(ids, false)
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据判断删除操作是否成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.getDataList() this.getDataList();
} }
}) });
} else { } else {
this.$message.error(data.msg) // 如果失败，弹出错误提示信息
this.$message.error(data.msg);
} }
}) });
}) });
}, },
syncWxTemplate(){ syncWxTemplate() {
if(this.synchonizingWxTemplate)return // 如果正在同步中，则直接返回，不进行后续操作
this.synchonizingWxTemplate=true if (this.synchonizingWxTemplate) return;
// 设置正在同步的状态为true
this.synchonizingWxTemplate = true;
// 发起HTTP请求进行同步公众号模板操作
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'), url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'),
method: 'post', method: 'post'
}).then(({ data }) => { }).then(({ data }) => {
this.synchonizingWxTemplate=false // 同步完成后，设置正在同步的状态为false
if (data && data.code === 200) { this.synchonizingWxTemplate = false;
this.$message({ // 根据返回数据判断同步操作是否成功
message: '同步完成', if (data && data.code === 200) {
type: 'success', // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
duration: 1500, this.$message({
onClose: () => { message: '同步完成',
this.getDataList() type: 'success',
} duration: 1500,
}) onClose: () => {
} else { this.getDataList();
this.$message.error(data.msg) }
} });
}).catch(()=>this.synchonizingWxTemplate=false) } else {
// 如果失败，弹出错误提示信息
this.$message.error(data.msg);
}
}).catch(() => this.synchonizingWxTemplate = false);
}, },
templateMsgTaskHandle(){ templateMsgTaskHandle() {
this.templateMsgTaskVisible = true // 设置模板消息任务组件的显示状态为true，即显示该组件
this.templateMsgTaskVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.templateMsgTask.init(this.dataListSelections[0]) // 在DOM更新后，初始化模板消息任务组件，传入当前选中的唯一一条数据项（因为按钮禁用条件限制了只能选中一个）
}) this.$refs.templateMsgTask.init(this.dataListSelections[0]);
});
}, },
async copyHandle(){ async copyHandle() {
let loading; let loading;
// 循环遍历选中的数据项列表，对每个数据项进行复制操作
for (let i = 0; i < this.dataListSelections.length; i++) { for (let i = 0; i < this.dataListSelections.length; i++) {
let item = this.dataListSelections[i]; let item = this.dataListSelections[i];
loading=this.$loading({ // 显示加载提示，提示文字显示正在复制的模板标题
loading = this.$loading({
lock: true, lock: true,
text: "复制模板："+item.title, text: "复制模板：" + item.title,
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
item.id=''; // 将数据项的id清空（可能用于标识新增状态）
item.updateTime=new Date() item.id = '';
item.name+='_COPY' // 更新数据项的更新时间为当前时间
await this.addMsgTemplate(item).catch(()=>loading.close()) item.updateTime = new Date();
loading.close() // 在模版名称后添加“_COPY”后缀
item.name += '_COPY';
// 调用addMsgTemplate方法添加消息模板，使用await等待异步操作完成，若出现错误则关闭加载提示
await this.addMsgTemplate(item).catch(() => loading.close());
// 关闭加载提示
loading.close();
} }
loading.close() // 最后再关闭一次加载提示（确保关闭，可能存在多余情况，但保证逻辑完整性）
this.getDataList() loading.close();
// 重新获取数据列表，以更新展示的数据
this.getDataList();
}, },
addMsgTemplate(msgTemplate){ addMsgTemplate(msgTemplate) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// 发起HTTP请求保存消息模板数据（此处应该是执行新增操作），对请求的数据进行了装饰处理
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/msgTemplate/save'), url: this.$http.adornUrl('/manage/msgTemplate/save'),
method: 'post', method: 'post',
data: this.$http.adornData(msgTemplate) data: this.$http.adornData(msgTemplate)
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据判断保存操作是否成功
if (data && data.code === 200) { if (data && data.code === 200) {
resolve() // 如果成功，调用resolve函数，表示异步操作成功完成
resolve();
} else { } else {
this.$message.error(data.msg) // 如果失败，弹出错误提示信息，并调用reject函数，表示异步操作失败，传递错误信息
reject(data.msg) this.$message.error(data.msg);
reject(data.msg);
} }
}).catch(err=>reject(err)) }).catch(err => reject(err));
}) });
} }
} }
} }

90
src/views/modules/wx/template-msg-log.vue
Unescape View File

@ -1,38 +1,57 @@
<template> <template>
<!-- 整个模块的容器类，用于包裹后续的表单、表格以及分页组件等 -->
<div class="mod-config"> <div class="mod-config">
<!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- openid输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.touser，有占位提示文字且可清空输入内容 -->
<el-form-item> <el-form-item>
<el-input v-model="dataForm.touser" placeholder="openid" clearable></el-input> <el-input v-model="dataForm.touser" placeholder="openid" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 操作按钮所在的表单项 -->
<el-form-item> <el-form-item>
<!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<!-- 批量删除按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
<el-button v-if="isAuth('wx:templatemsglog:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('wx:templatemsglog:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column> </el-table-column>
<!-- openid列，对应dataList中数据项的touser属性，设置了表头和内容的对齐方式以及列宽度 -->
<el-table-column prop="touser" header-align="center" align="center" label="openid" width="100"> <el-table-column prop="touser" header-align="center" align="center" label="openid" width="100">
</el-table-column> </el-table-column>
<!-- 内容列，对应dataList中数据项的data属性，使用formatter函数（tableJsonFormat方法）格式化显示内容，设置了表头和内容的对齐方式以及列宽度 -->
<el-table-column prop="data" header-align="center" align="center" :formatter="tableJsonFormat" label="内容" width="300"> <el-table-column prop="data" header-align="center" align="center" :formatter="tableJsonFormat" label="内容" width="300">
</el-table-column> </el-table-column>
<!-- 发送结果列，对应dataList中数据项的sendResult属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题和宽度 -->
<el-table-column prop="sendResult" header-align="center" align="center" show-overflow-tooltip label="发送结果" width="150"> <el-table-column prop="sendResult" header-align="center" align="center" show-overflow-tooltip label="发送结果" width="150">
</el-table-column> </el-table-column>
<!-- 发送时间列，对应dataList中数据项的sendTime属性，设置了表头和内容的对齐方式以及列标题和宽度 -->
<el-table-column prop="sendTime" header-align="center" align="center" width="100" label="发送时间"> <el-table-column prop="sendTime" header-align="center" align="center" width="100" label="发送时间">
</el-table-column> </el-table-column>
<!-- 链接列，对应dataList中数据项的url属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="链接"> <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="链接">
</el-table-column> </el-table-column>
<!-- 小程序列，对应dataList中数据项的miniprogram属性，使用formatter函数（tableJsonFormat方法）格式化显示内容，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="miniprogram" header-align="center" align="center" :formatter="tableJsonFormat" show-overflow-tooltip label="小程序"> <el-table-column prop="miniprogram" header-align="center" align="center" :formatter="tableJsonFormat" show-overflow-tooltip label="小程序">
</el-table-column> </el-table-column>
<!-- 模板ID列，对应dataList中数据项的templateId属性，设置了表头和内容的对齐方式以及列标题和宽度 -->
<el-table-column prop="templateId" header-align="center" align="center" label="模板ID" width="150"> <el-table-column prop="templateId" header-align="center" align="center" label="模板ID" width="150">
</el-table-column> </el-table-column>
<!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="deleteHandle(scope.row.logId)">删除</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.logId)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
<!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="current-changeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
@ -42,6 +61,7 @@ export default {
data() { data() {
return { return {
dataForm: { dataForm: {
// 用于存储查询条件中的openid，初始为空字符串
touser: '' touser: ''
}, },
dataList: [], dataList: [],
@ -54,12 +74,15 @@ export default {
} }
}, },
activated() { activated() {
// 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
this.getDataList() this.getDataList()
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表的方法
getDataList() { getDataList() {
this.dataListLoading = true // 设置正在加载数据的状态为true
this.dataListLoading = true;
// 发起HTTP请求获取模板消息日志的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/templateMsgLog/list'), url: this.$http.adornUrl('/manage/templateMsgLog/list'),
method: 'get', method: 'get',
@ -71,64 +94,75 @@ export default {
'order': 'desc' 'order': 'desc'
}) })
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据的状态码判断是否请求成功
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataList = data.page.list // 如果成功，更新数据列表和总记录数
this.totalCount = data.page.totalCount this.dataList = data.page.list;
this.totalCount = data.page.totalCount;
} else { } else {
this.dataList = [] // 如果失败，清空数据列表和总记录数
this.totalCount = 0 this.dataList = [];
this.totalCount = 0;
} }
this.dataListLoading = false // 请求完成后，设置正在加载数据的状态为false
}) this.dataListLoading = false;
});
}, },
// 每页数 // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
sizeChangeHandle(val) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val;
this.pageIndex = 1 this.pageIndex = 1;
this.getDataList() this.getDataList();
}, },
// 当前页 // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
currentChangeHandle(val) { currentChangeHandle(val) {
this.pageIndex = val this.pageIndex = val;
this.getDataList() this.getDataList();
}, },
// 多选 // 处理表格中选择项变化的方法，更新选中的数据项列表
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val this.dataListSelections = val;
}, },
// 删除 // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
deleteHandle(id) { deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => item.logId) // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的logId数组进行批量删除
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { var ids = id? [id] : this.dataListSelections.map(item => item.logId);
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/templateMsgLog/delete'), url: this.$http.adornUrl('/manage/templateMsgLog/delete'),
method: 'post', method: 'post',
data: this.$http.adornData(ids, false) data: this.$http.adornData(ids, false)
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据判断删除操作是否成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.getDataList() this.getDataList();
} }
}) });
} else { } else {
this.$message.error(data.msg) // 如果失败，弹出错误提示信息
this.$message.error(data.msg);
} }
}) });
}) });
}, },
tableJsonFormat(row, column, cellValue){ tableJsonFormat(row, column, cellValue) {
// 如果传入的要格式化的值为空，则直接返回空字符串
if (!cellValue) { if (!cellValue) {
return ''; return '';
} }
return JSON.stringify(cellValue) // 将传入的值（通常是JSON对象类型的数据）转换为JSON字符串格式进行显示，方便查看数据内容
return JSON.stringify(cellValue);
} }
} }
} }

152
src/views/modules/wx/wx-account.vue
Unescape View File

@ -1,41 +1,42 @@
<template> <template>
<!-- 整个模块的容器类，用于包裹后续的表单、表格以及相关弹窗组件等 -->
<div class="mod-config"> <div class="mod-config">
<!-- 定义一个内联表单，用于搜索和操作 --> <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 参数名输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.key，有占位提示文字且可清空输入内容 -->
<el-form-item> <el-form-item>
<!-- 输入框，用于输入搜索关键词 -->
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item> </el-form-item>
<!-- 操作按钮所在的表单项 -->
<el-form-item> <el-form-item>
<!-- 查询按钮，触发数据列表的获取 --> <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
<!-- 新增按钮，根据权限显示 --> <!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
<el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<!-- 批量删除按钮，根据权限和选中项显示 --> <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
<el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" <el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
:disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 数据列表展示 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
style="width: 100%;"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<!-- 选择框列 --> <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
<el-table-column type="selection" header-align="center" align="center" width="50"> <el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column> </el-table-column>
<!-- appid列 --> <!-- appid列，对应dataList中数据项的appid属性，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="appid" header-align="center" align="center" label="appid"> <el-table-column prop="appid" header-align="center" align="center" label="appid">
</el-table-column> </el-table-column>
<!-- 公众号名称列 --> <!-- 公众号名称列，对应dataList中数据项的name属性，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="name" header-align="center" align="center" label="公众号名称"> <el-table-column prop="name" header-align="center" align="center" label="公众号名称">
</el-table-column> </el-table-column>
<!-- 类型列，使用formatter格式化显示 --> <!-- 类型列，对应dataList中数据项的type属性，使用formatter函数（accountTypeFormat方法）格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat"> <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
</el-table-column> </el-table-column>
<!-- 是否认证列，使用插槽自定义显示 --> <!-- 是否认证列，对应dataList中数据项的verified属性，通过插槽根据数据项的verified值判断显示“是”或“否”，设置了表头和内容的对齐方式以及列标题 -->
<el-table-column prop="verified" header-align="center" align="center" label="是否认证"> <el-table-column prop="verified" header-align="center" align="center" label="是否认证">
<span slot-scope="scope">{{ scope.row.verified ? "是" : "否" }}</span> <span slot-scope="scope">{{scope.row.verified? "是" : "否"}}</span>
</el-table-column> </el-table-column>
<!-- 操作列，包含接入、修改和删除按钮 --> <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了接入、修改和删除按钮 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button> <el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button>
@ -44,102 +45,129 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 新增/修改弹窗组件 -->
<!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<!-- 接入信息弹窗组件 --> <!-- 账号接入信息组件，根据accountAccessVisible的值决定是否显示 -->
<account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access> <account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access>
</div> </div>
</template> </template>
<script> <script>
import AddOrUpdate from './account/wx-account-add-or-update' // 引入新增/修改组件 // 引入新增/修改组件，用于实现公众号账号的新增或修改功能相关交互逻辑
import AccountAccess from './account/wx-account-access-info' // 引入接入信息组件 import AddOrUpdate from './account/wx-account-add-or-update'
import { mapState } from 'vuex' // 引入Vuex的mapState辅助函数 // 引入账号接入信息组件，用于展示和处理公众号账号接入相关信息逻辑
import AccountAccess from './account/wx-account-access-info'
// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
import { mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
dataForm: { key: '' }, // 搜索表单数据 dataForm: {
dataList: [], // 数据列表 // 用于存储查询条件中的参数名，初始为空字符串
dataListLoading: false, // 数据列表加载状态 key: ''
dataListSelections: [], // 选中项 },
addOrUpdateVisible: false, // 新增/修改弹窗显示状态 dataList: [],
accountAccessVisible: false // 接入信息弹窗显示状态 dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
accountAccessVisible: false
} }
}, },
components: { AddOrUpdate, AccountAccess }, // 注册组件 components: {
AddOrUpdate, AccountAccess
},
computed: mapState({ computed: mapState({
ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES // 从Vuex获取账号类型映射 // 从Vuex的state中获取wxAccount模块下的ACCOUNT_TYPES状态，映射到组件的计算属性中，用于类型列的格式化显示操作
ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
}), }),
activated() { activated() {
this.getDataList() // 组件激活时获取数据列表 // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
this.getDataList()
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表的方法
getDataList() { getDataList() {
this.dataListLoading = true // 设置正在加载数据的状态为true
this.dataListLoading = true;
// 发起HTTP请求获取微信公众号账号的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxAccount/list'), // 请求地址 url: this.$http.adornUrl('/manage/wxAccount/list'),
method: 'get', method: 'get',
params: this.$http.adornParams({ 'key': this.dataForm.key }) // 请求参数 params: this.$http.adornParams({
'key': this.dataForm.key
})
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据的状态码判断是否请求成功
if (data && data.code === 200) { if (data && data.code === 200) {
this.dataList = data.list // 更新数据列表 // 如果成功，更新数据列表，并通过Vuex的mutation更新账号列表状态（可能用于其他地方的数据同步等）
this.$store.commit('wxAccount/updateAccountList', data.list) // 更新Vuex中的账号列表 this.dataList = data.list;
this.$store.commit('wxAccount/updateAccountList', data.list);
} else { } else {
this.dataList = [] // 清空数据列表 // 如果失败，清空数据列表
this.dataList = [];
} }
this.dataListLoading = false // 结束加载状态 // 请求完成后，设置正在加载数据的状态为false
}) this.dataListLoading = false;
});
}, },
// 多选处理 // 处理表格中选择项变化的方法，更新选中的数据项列表
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val // 更新选中项 this.dataListSelections = val;
}, },
// 新增/修改处理 // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入要操作的数据项（可为空表示新增）
addOrUpdateHandle(item) { addOrUpdateHandle(item) {
this.addOrUpdateVisible = true // 显示弹窗 this.addOrUpdateVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.init(item) // 初始化弹窗数据 this.$refs.addOrUpdate.init(item);
}) });
}, },
// 接入信息处理
accessInfo(item) { accessInfo(item) {
this.accountAccessVisible = true // 显示弹窗 // 设置账号接入信息组件的显示状态为true，即显示该组件
this.accountAccessVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.accountAccessDialog.init(item) // 初始化弹窗数据 // 在DOM更新后，初始化账号接入信息组件，传入要操作的数据项
}) this.$refs.accountAccessDialog.init(item);
});
}, },
// 删除处理 // 删除操作的方法，根据传入的appid判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
deleteHandle(appid) { deleteHandle(appid) {
var ids = appid ? [appid] : this.dataListSelections.map(item => item.appid) // 获取要删除的appid // 如果传入了appid，表示单个删除，将其放入数组；否则使用选中的数据项的appid数组进行批量删除
this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', { var ids = appid? [appid] : this.dataListSelections.map(item => {
return item.appid
});
this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxAccount/delete'), // 请求地址 url: this.$http.adornUrl('/manage/wxAccount/delete'),
method: 'post', method: 'post',
data: this.$http.adornData(ids, false) // 请求数据 data: this.$http.adornData(ids, false)
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据判断删除操作是否成功
if (data && data.code === 200) { if (data && data.code === 200) {
// 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.getDataList() // 刷新数据列表 this.getDataList();
} }
}) });
} else { } else {
this.$message.error(data.msg) // 显示错误信息 // 如果失败，弹出错误提示信息
this.$message.error(data.msg);
} }
}) });
}) });
}, },
// 类型格式化函数
accountTypeFormat(row, column, cellValue) { accountTypeFormat(row, column, cellValue) {
return this.ACCOUNT_TYPES[cellValue] // 根据类型值返回对应的类型名称 // 根据数据项中的类型值，从ACCOUNT_TYPES对象中获取对应的显示名称并返回，用于格式化类型列的显示内容
return this.ACCOUNT_TYPES[cellValue];
} }
} }
} }

68
src/views/modules/wx/wx-assets.vue
Unescape View File

@ -1,21 +1,24 @@
<template> <template>
<!-- 使用element-ui的el-tabs组件创建一个标签页切换组件 --> <!-- 使用el-tabs组件创建选项卡，通过v-model双向绑定activeTab来控制当前选中的选项卡，监听tab-click事件，触发handleTabClick方法 -->
<el-tabs v-model="activeTab" @tab-click="handleTabClick"> <el-tabs v-model="activeTab" @tab-click="handleTabClick">
<!-- 图片素材标签页，使用el-tab-pane组件定义每个标签页的内容 --> <!-- 图片素材选项卡面板，标签显示为“图片素材（数量）”，数量通过assetsCount.imageCount动态获取，设置name属性为“image”，采用懒加载模式 -->
<el-tab-pane :label="'图片素材（' + assetsCount.imageCount + ')'" name="image" lazy> <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
<!-- 引入自定义的MaterialFile组件，用于展示图片素材 --> <!-- 引入自定义组件material-file，设置其fileType属性为“image”，用于展示和管理图片素材相关功能，同时监听其@change事件，触发materialCount方法 -->
<material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file> <material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file>
</el-tab-pane> </el-tab-pane>
<!-- 语音素材标签页 --> <!-- 语音素材选项卡面板，标签显示为“语音素材（数量）”，数量通过assetsCount.voiceCount动态获取，设置name属性为“voice”，采用懒加载模式 -->
<el-tab-pane :label="'语音素材（' + assetsCount.voiceCount + ')'" name="voice" lazy> <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
<!-- 引入自定义组件material-file，设置其fileType属性为“voice”，用于展示和管理语音素材相关功能，同时监听其@change事件，触发materialCount方法 -->
<material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file> <material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file>
</el-tab-pane> </el-tab-pane>
<!-- 视频素材标签页 --> <!-- 视频素材选项卡面板，标签显示为“视频素材（数量）”，数量通过assetsCount.videoCount动态获取，设置name属性为“video”，采用懒加载模式 -->
<el-tab-pane :label="'视频素材（' + assetsCount.videoCount + ')'" name="video" lazy> <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
<!-- 引入自定义组件material-file，设置其fileType属性为“video”，用于展示和管理视频素材相关功能，同时监听其@change事件，触发materialCount方法 -->
<material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file> <material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file>
</el-tab-pane> </el-tab-pane>
<!-- 图文素材标签页，使用自定义的MaterialNews组件 --> <!-- 图文素材选项卡面板，标签显示为“图文素材（数量）”，数量通过assetsCount.newsCount动态获取，设置name属性为“news”，采用懒加载模式 -->
<el-tab-pane :label="'图文素材（' + assetsCount.newsCount + ')'" name="news" lazy> <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
<!-- 引入自定义组件material-news，用于展示和管理图文素材相关功能，同时监听其@change事件，触发materialCount方法 -->
<material-news ref="newsPanel" @change="materialCount"></material-news> <material-news ref="newsPanel" @change="materialCount"></material-news>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -25,49 +28,54 @@
export default { export default {
data() { data() {
return { return {
// 当前激活的标签页名称 // 用于双向绑定el-tabs组件中当前选中的选项卡名称，初始值为“image”，表示默认选中图片素材选项卡
activeTab: 'image', activeTab: 'image',
// 素材数量对象，用于存储各类素材的数量
assetsCount: { assetsCount: {
imageCount: '..', // 图片素材数量，初始化为占位符 // 图片素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
videoCount: '..', // 视频素材数量，初始化为占位符 imageCount: '..',
voiceCount: '..', // 语音素材数量，初始化为占位符 // 视频素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
newsCount: '..' // 图文素材数量，初始化为占位符 videoCount: '..',
// 语音素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
voiceCount: '..',
// 图文素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
newsCount: '..'
} }
}; };
}, },
// 组件注册，异步加载MaterialFile和MaterialNews组件
components: { components: {
// 动态导入自定义组件material-file，用于处理不同类型的素材文件（图片、语音、视频）相关功能
MaterialFile: () => import('./assets/material-file'), MaterialFile: () => import('./assets/material-file'),
// 动态导入自定义组件material-news，用于处理图文素材相关功能
MaterialNews: () => import('./assets/material-news') MaterialNews: () => import('./assets/material-news')
}, },
// 组件挂载完成后立即执行的钩子函数
mounted() { mounted() {
this.materialCount(); // 组件挂载后立即调用materialCount方法获取素材数量 // 组件挂载完成后，调用materialCount方法，用于获取各类素材的数量信息
this.materialCount();
}, },
methods: { methods: {
// 标签页点击事件处理函数
handleTabClick(tab, event) { handleTabClick(tab, event) {
// 在下次DOM更新循环后执行以下代码，确保操作的元素已经渲染完成
this.$nextTick(() => { this.$nextTick(() => {
// 在DOM更新完成后，调用对应标签页组件的init方法（假设该方法存在） // 通过ref获取对应选项卡面板的组件实例，并调用其init方法进行初始化操作（不同组件的init方法可能有不同的初始化逻辑）
this.$refs[tab.name + 'Panel'].init() this.$refs[tab.name + 'Panel'].init();
}) });
}, },
// 获取素材数量的方法
materialCount() { materialCount() {
// 使用自定义的$http方法（可能是封装的axios）发送请求获取素材数量 // 发起HTTP请求，获取素材数量信息，对请求的URL进行了装饰处理（可能是统一处理请求相关的配置，比如添加前缀、处理参数等）
this.$http({ this.$http({
url: this.$http.adornUrl('/manage/wxAssets/materialCount') // 发送请求的URL url: this.$http.adornUrl('/manage/wxAssets/materialCount')
}).then(({ data }) => { }).then(({ data }) => {
// 根据返回数据的状态码判断请求是否成功
if (data && data.code == 200) { if (data && data.code == 200) {
// 如果请求成功，更新assetsCount对象 // 如果成功，将返回数据中的素材数量信息更新到assetsCount对象中，用于在选项卡标签等处显示准确的数量
this.assetsCount = data.data this.assetsCount = data.data;
} else { } else {
// 如果请求失败，显示错误信息 // 如果请求失败，弹出错误提示信息，显示接口返回的错误消息内容
this.$message.error(data.msg); this.$message.error(data.msg);
} }
}) });
} }
} }
}; };
</script> </script>

115
src/views/modules/wx/wx-menu-button-editor.vue
Unescape View File

@ -1,38 +1,38 @@
<template> <template>
<!-- 最外层的 div 作为整体容器 -->
<div> <div>
<!-- 菜单项的输入框组，底部有边框 --> <!-- 菜单输入组容器，设置底部边框样式，用于展示菜单名称以及删除菜单按钮 -->
<div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;"> <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
<!-- 显示菜单名称 --> <!-- 展示菜单名称，通过插值表达式绑定 button.name 获取名称值 -->
<div class="menu-name">{{ button.name }}</div> <div class="menu-name">{{button.name}}</div>
<!-- 删除菜单项的按钮，点击时触发'delMenu'事件 --> <!-- 删除菜单按钮，点击时通过 $emit 触发父组件的 'delMenu' 事件，由父组件来处理菜单删除相关逻辑 -->
<div class="menu-del" @click="$emit('delMenu')">删除菜单</div> <div class="menu-del" @click="$emit('delMenu')">删除菜单</div>
</div> </div>
<!-- 菜单输入组容器，用于输入菜单名称 -->
<!-- 菜单名称的输入框组 -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 菜单名称标签 -->
<div class="menu-label">菜单名称</div> <div class="menu-label">菜单名称</div>
<!-- 菜单名称输入框所在的容器 -->
<div class="menu-input"> <div class="menu-input">
<!-- 输入框，用于输入菜单名称，绑定到button.name，并监听输入事件 --> <!-- 文本输入框，用于输入菜单名称，绑定 v-model 到 button.name 实现双向数据绑定，监听 input 事件，触发 checkMenuName 方法来检查名称长度是否合规 -->
<input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name" <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name" @input="checkMenuName(button.name)">
@input="checkMenuName(button.name)"> <!-- 提示信息，当 menuNameBounds 为 true 时显示，提示字数超过上限，通过 v-show 根据条件控制显示与否 -->
<!-- 当菜单名称超过字数限制时显示 -->
<p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p> <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
<!-- 显示菜单名称的字数限制 --> <!-- 提示信息，显示菜单名称的字数限制规则，根据 selectedMenuLevel 的值动态展示不同的字数上限说明 -->
<p class="menu-tips">字数不超过{{ selectedMenuLevel == 1 ? '5' : '8' }}个汉字</p> <p class="menu-tips">字数不超过{{selectedMenuLevel==1?'5':'8'}}个汉字</p>
</div> </div>
</div> </div>
<!-- 根据按钮是否有子按钮或者子按钮数组长度是否为 0 来决定是否显示下面的内容，若没有子按钮则展示以下配置项 -->
<!-- 当没有子菜单或子菜单为空时显示 --> <div v-show="!button.subButtons || button.subButtons.length==0">
<div v-show="!button.subButtons || button.subButtons.length == 0"> <!-- 菜单输入组容器，用于选择菜单内容类型 -->
<!-- 菜单内容的输入框组 -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 菜单内容类型标签 -->
<div class="menu-label">菜单内容</div> <div class="menu-label">菜单内容</div>
<!-- 下拉选择框，用于选择菜单的类型，通过 v-model 双向绑定 button.type，绑定不同的选项值，每个选项对应不同的菜单功能 -->
<div class="menu-input"> <div class="menu-input">
<!-- 下拉选择框，用于选择菜单类型 -->
<select v-model="button.type" name="type" class="menu-input-text"> <select v-model="button.type" name="type" class="menu-input-text">
<option value="view">跳转网页(view)</option> <option value="view">跳转网页(view)</option>
<option value="media_id">发送消息(media_id)</option> <option value="media_id">发送消息(media_id)</option>
<!-- 注释掉的选项 -->
<!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>--> <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
<option value="miniprogram">打开指定小程序(miniprogram)</option> <option value="miniprogram">打开指定小程序(miniprogram)</option>
<option value="click">自定义点击事件(click)</option> <option value="click">自定义点击事件(click)</option>
@ -45,55 +45,83 @@
</select> </select>
</div> </div>
</div> </div>
<!-- 当菜单类型为 'view' 时显示的内容，用于配置跳转网页相关信息 -->
<!-- 根据选择的菜单类型显示不同的内容输入框 --> <div class="menu-content" v-if="button.type=='view'">
<div class="menu-content" v-if="button.type == 'view'"> <!-- 菜单输入组容器，用于输入页面地址 -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 提示信息，说明点击该子菜单后的跳转行为 -->
<p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p> <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
<!-- 页面地址标签 -->
<div class="menu-label">页面地址</div> <div class="menu-label">页面地址</div>
<!-- 页面地址输入框所在的容器 -->
<div class="menu-input"> <div class="menu-input">
<!-- 文本输入框，用于输入页面地址，通过 v-model 双向绑定 button.url -->
<input type="text" placeholder="" class="menu-input-text" v-model="button.url"> <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
</div> </div>
</div> </div>
</div> </div>
<div class="menu-content" v-else-if="button.type == 'media_id'"> <!-- 当菜单类型为 'media_id' 时显示的内容，用于配置发送图文消息相关信息 -->
<div class="menu-content" v-else-if="button.type=='media_id'">
<!-- 菜单输入组容器，用于输入图文消息的 media_id -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 提示信息，说明点击该菜单后的行为 -->
<p class="menu-tips">订阅者点击该菜单会收到以下图文消息</p> <p class="menu-tips">订阅者点击该菜单会收到以下图文消息</p>
<!-- media_id 标签 -->
<div class="menu-label">media_id</div> <div class="menu-label">media_id</div>
<!-- media_id 输入框所在的容器 -->
<div class="menu-input"> <div class="menu-input">
<!-- 文本输入框，用于输入图文消息的 media_id，通过 v-model 双向绑定 button.mediaId -->
<input type="text" placeholder="图文消息media_id" class="menu-input-text" v-model="button.mediaId"> <input type="text" placeholder="图文消息media_id" class="menu-input-text" v-model="button.mediaId">
</div> </div>
</div> </div>
</div> </div>
<div class="menu-content" v-else-if="button.type == 'miniprogram'"> <!-- 当菜单类型为 'miniprogram' 时显示的内容，用于配置小程序相关信息，包含 appId、页面路径以及备用网页等 -->
<div class="menu-content" v-else-if="button.type=='miniprogram'">
<!-- 菜单输入组容器，用于输入小程序的 appId -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 提示信息，说明点击该子菜单后的跳转行为 -->
<p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p> <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
<!-- 小程序 appId 标签 -->
<div class="menu-label">小程序appId</div> <div class="menu-label">小程序appId</div>
<!-- 小程序 appId 输入框所在的容器 -->
<div class="menu-input"> <div class="menu-input">
<input type="text" placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text" <!-- 文本输入框，用于输入小程序的 appId，通过 v-model 双向绑定 button.appId，并提示仅认证公众号可配置 -->
v-model="button.appId"> <input type="text" placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text" v-model="button.appId">
</div> </div>
</div> </div>
<!-- 菜单输入组容器，用于输入小程序的页面路径 -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 小程序路径标签 -->
<div class="menu-label">小程序路径</div> <div class="menu-label">小程序路径</div>
<!-- 小程序路径输入框所在的容器 -->
<div class="menu-input"> <div class="menu-input">
<input type="text" placeholder="小程序的页面路径 pages/index/index" class="menu-input-text" <!-- 文本输入框，用于输入小程序的页面路径，通过 v-model 双向绑定 button.pagePath，并给出示例路径 -->
v-model="button.pagePath"> <input type="text" placeholder="小程序的页面路径 pages/index/index" class="menu-input-text" v-model="button.pagePath">
</div> </div>
</div> </div>
<!-- 菜单输入组容器，用于输入备用网页地址 -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 备用网页标签 -->
<div class="menu-label">备用网页</div> <div class="menu-label">备用网页</div>
<!-- 备用网页地址输入框所在的容器 -->
<div class="menu-input"> <div class="menu-input">
<!-- 文本输入框，用于输入备用网页地址，通过 v-model 双向绑定 button.url，并给出相关说明 -->
<input type="text" placeholder="" class="menu-input-text" v-model="button.url"> <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
<p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p> <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
</div> </div>
</div> </div>
</div> </div>
<!-- 当菜单类型为其他值（非上述几种情况）时显示的内容，用于配置菜单 KEY 值 -->
<div class="menu-content" v-else> <div class="menu-content" v-else>
<!-- 菜单输入组容器，用于输入菜单 KEY 值 -->
<div class="menu-input-group"> <div class="menu-input-group">
<!-- 提示信息，说明 KEY 值的长度限制及用途 -->
<p class="menu-tips">用于消息接口推送，不超过128字节</p> <p class="menu-tips">用于消息接口推送，不超过128字节</p>
<!-- 菜单 KEY 值标签 -->
<div class="menu-label">菜单KEY值</div> <div class="menu-label">菜单KEY值</div>
<!-- 菜单 KEY 值输入框所在的容器 -->
<div class="menu-input"> <div class="menu-input">
<!-- 文本输入框，用于输入菜单 KEY 值，通过 v-model 双向绑定 button.key -->
<input type="text" placeholder="" class="menu-input-text" v-model="button.key"> <input type="text" placeholder="" class="menu-input-text" v-model="button.key">
</div> </div>
</div> </div>
@ -104,13 +132,14 @@
<script> <script>
export default { export default {
// 定义组件接收的属性
props: { props: {
// 接收父组件传递的菜单级别，默认为1 // 表示选中的菜单层级，类型为数字，默认值为 1
selectedMenuLevel: { selectedMenuLevel: {
type: Number, type: Number,
default: 1 default: 1
}, },
// 接收父组件传递的菜单对象，必传 // 表示菜单相关的数据对象，类型为对象，是必填项
button: { button: {
type: Object, type: Object,
required: true required: true
@ -118,29 +147,35 @@ export default {
}, },
data() { data() {
return { return {
// 菜单名称是否超过字数限制的标志 // 用于标记菜单名称长度是否超出上限，初始值为 false
menuNameBounds: false, menuNameBounds: false,
} }
}, },
methods: { methods: {
// 检查菜单名称长度的方法 // 检查菜单名称长度的方法
checkMenuName: function (val) { checkMenuName: function (val) {
// 根据菜单级别和菜单名称长度设置menuNameBounds的值 // 如果选中的菜单层级为 1 且菜单名称长度（通过 getMenuNameLen 方法获取）小于等于 10
if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 5) { // 注意：原代码逻辑可能有误，应为5而非10 if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 10) {
this.menuNameBounds = false // 将 menuNameBounds 设置为 false，表示菜单名称长度未超出上限
} else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 8) { this.menuNameBounds = false;
this.menuNameBounds = false }
} else { // 如果选中的菜单层级为 2 且菜单名称长度小于等于 16
this.menuNameBounds = true else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 16) {
this.menuNameBounds = false;
}
// 其他情况，即超出对应层级的长度限制，将 menuNameBounds 设置为 true
else {
this.menuNameBounds = true;
} }
}, },
// 获取菜单名称长度的方法，考虑中文字符占两个字节 // 获取菜单名称长度的方法
getMenuNameLen: function (val) { getMenuNameLen: function (val) {
var len = 0; var len = 0;
// 遍历菜单名称字符串的每个字符
for (var i = 0; i < val.length; i++) { for (var i = 0; i < val.length; i++) {
var a = val.charAt(i); var a = val.charAt(i);
// 判断字符是否为中文字符，并累加长度 // 判断字符是否为双字节字符（非 ASCII 码字符），如果是则长度计为 2，否则计为 1
a.match(/[^\x00-\xff]/ig) != null ? len += 2 : len += 1; a.match(/[^\x00-\xff]/ig)!= null? len += 2 : len += 1;
} }
return len; return len;
} }

Write Preview
Loading…
Cancel
Save