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

李

Browse Source
pull/10/head
李嫚嫚 4 months ago
parent 3ad4b38143
commit 2e5b1f43c1
15 changed files with 1859 additions and 0 deletions
Show Stats Download Patch File Download Diff File

48
src/App.vue
Unescape View File

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

68
src/main.js
Unescape View File

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

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

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

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

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

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

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

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

@ -0,0 +1,38 @@
<script>
// 导入SubMenu组件，用于递归渲染子菜单
import SubMenu from './main-sidebar-sub-menu'
export default {
name: 'sub-menu', // 组件名称
props: {
menu: {
type: Object, // 传入一个对象作为菜单数据
required: true // 该属性为必传
},
dynamicMenuRoutes: {
type: Array, // 传入一个数组作为动态路由数据
required: true // 该属性为必传
}
},
components: {
SubMenu // 注册SubMenu组件
},
computed: {
sidebarLayoutSkin() {
// 计算属性，从Vuex store中获取sidebarLayoutSkin的值
return this.$store.state.common.sidebarLayoutSkin
}
},
methods: {
// 通过menuId与动态路由进行匹配，并跳转到指定路由
gotoRouteHandle(menu) {
// 从dynamicMenuRoutes数组中筛选出menuId与传入menu对象的menuId相匹配的路由
var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
// 如果找到了匹配的路由，则使用$router.push方法跳转到该路由
if (route.length >= 1) {
this.$router.push({ name: route[0].name })
}
}
}
}
</script>

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

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

109
src/views/main.vue
Unescape View File

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

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

@ -0,0 +1,178 @@
<template>
<div>
<div id="app-menu">
<!-- 预览窗 -->
<div class="weixin-preview">
<div class="weixin-bd">
<div class="weixin-header">公众号菜单</div>
<ul class="weixin-menu" id="weixin-menu">
<!-- 遍历主菜单按钮 -->
<li v-for="(btn, i) in menu.buttons" :key="i" class="menu-item"
:class="{'current': selectedMenuIndex === i && selectedMenuLevel == 1}"
@click="selectMenu(i)">
<div class="menu-item-title">
<span>{{ btn.name }}</span>
</div>
<ul class="weixin-sub-menu">
<!-- 遍历子菜单按钮 -->
<li v-for="(sub, i2) in btn.subButtons" :key="i2" class="menu-sub-item"
:class="{'current': selectedMenuIndex === i && selectedSubMenuIndex === i2 && selectedMenuLevel == 2, 'on-drag-over': onDragOverMenu === (i + '_' + i2)}"
@click.stop="selectSubMenu(i, i2)" draggable="true"
@dragstart="selectSubMenu(i, i2)" @dragover.prevent="onDragOverMenu = (i + '_' + i2)" @drop="onDrop(i, i2)">
<div class="menu-item-title">
<span>{{ sub.name }}</span>
</div>
</li>
<!-- 如果子菜单数量少于5个，显示添加按钮 -->
<li v-if="btn.subButtons.length < 5" class="menu-sub-item"
:class="{'on-drag-over': onDragOverMenu === (i + '_' + btn.subButtons.length)}"
@click.stop="addMenu(2, i)" @dragover.prevent="onDragOverMenu = (i + '_' + btn.subButtons.length)" @drop="onDrop(i, btn.subButtons.length)">
<div class="menu-item-title">
<i class="el-icon-plus"></i>
</div>
</li>
<!-- 菜单展开/收起图标 -->
<i class="menu-arrow arrow_out"></i>
<i class="menu-arrow arrow_in"></i>
</ul>
</li>
<!-- 如果主菜单数量少于3个，显示添加按钮 -->
<li class="menu-item" v-if="menu.buttons.length < 3" @click="addMenu(1)">
<i class="el-icon-plus"></i>
</li>
</ul>
</div>
</div>
<!-- 菜单编辑器 -->
<div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
<wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor>
</div>
</div>
<!-- 发布和清空菜单的按钮组 -->
<div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu">
<el-button type="success" icon="el-icon-upload">发布</el-button>
<el-button type="warning" icon="el-icon-delete" @click="delMenuAll">清空</el-button>
<!-- 注意：这里可能是一个小错误，因为delMenu方法通常用于删除选中的菜单项，而不是清空所有菜单 -->
<!-- 如果要清空所有菜单，可能需要一个单独的方法，比如delMenuAll -->
</div>
</div>
</template>
<script>
export default {
components: {
wxMenuButtonEditor: () => import('./wx-menu-button-editor')
},
data() {
return {
menu: { 'buttons': [] },//当前菜单
selectedMenuIndex: '',//当前选中菜单索引
selectedSubMenuIndex: '',//当前选中子菜单索引
selectedMenuLevel: 0,//选中菜单级别
selectedButton: '',//选中的菜单按钮
onDragOverMenu:'' //当前鼠标拖动到的位置
}
},
mounted() {
// 获取当前微信菜单配置
this.getWxMenu();
},
methods: {
getWxMenu() {
this.$http({
url: this.$http.adornUrl('/manage/wxMenu/getMenu')
}).then(({ data }) => {
if (data.code == 200) {
this.menu = data.data.menu;
} else {
this.$message({
type: 'error',
message: data.msg
});
}
});
},
//选中主菜单
selectMenu(i) {
this.selectedMenuLevel = 1
this.selectedSubMenuIndex = ''
this.selectedMenuIndex = i
this.selectedButton = this.menu.buttons[i]
},
//选中子菜单
selectSubMenu(i,i2) {
this.selectedMenuLevel = 2
this.selectedMenuIndex = i
this.selectedSubMenuIndex = i2
this.selectedButton = this.menu.buttons[i].subButtons[i2]
},
// 添加菜单项（主菜单或子菜单）
addMenu(level,i) {
if (level == 1 && this.menu.buttons.length < 3) {
this.menu.buttons.push({
"type": "view",
"name": "菜单名称",
"subButtons": [],
"url": ""
})
this.selectMenu(this.menu.buttons.length - 1)
}
if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
this.menu.buttons[i].subButtons.push({
"type": "view",
"name": "子菜单名称",
"url": ""
})
this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
}
},
// 删除选中的菜单项（主菜单或子菜单）
delMenu() {
if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
this.menu.buttons.splice(this.selectedMenuIndex, 1);
this.unSelectMenu()
} else if (this.selectedMenuLevel == 2) {
this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1);
this.unSelectMenu()
}
},
unSelectMenu(){// 取消选中任何菜单项
this.selectedMenuLevel = 0
this.selectedMenuIndex = ''
this.selectedSubMenuIndex = ''
this.selectedButton = ''
},
// 更新微信菜单配置
updateWxMenu() {
this.$http({
url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
data: this.menu,
method: 'post'
}).then(({ data }) => {
if (data.code == 200) {
this.$message.success('操作成功')
} else {
this.$message.error(data.msg);
}
});
},
onDrop(i,i2){// 拖拽放置菜单项（用于排序）
this.onDragOverMenu='';
if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
return
if(i!=this.selectedMenuIndex && this.menu.buttons[i].subButtons.length>=5){
this.$message.error('目标组已满');
return
}
this.menu.buttons[i].subButtons.splice(i2,0,this.selectedButton)
let delSubIndex = this.selectedSubMenuIndex
if(i==this.selectedMenuIndex && i2<this.selectedSubMenuIndex)
delSubIndex++
this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1);
this.unSelectMenu()
}
}
}
</script>
<style src="@/assets/css/wx-menu.css"></style>

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

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

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

@ -0,0 +1,208 @@
<template>
<div class="mod-config">
<!-- 搜索表单 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<!-- 时间选择器 -->
<el-select v-model="dataForm.startTime" placeholder="时间">
<el-option v-for="(name,key) in timeSelections" :key="key" :value="name" :label="key"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<!-- 消息类型选择器 -->
<el-select v-model="dataForm.msgTypes" placeholder="消息类型">
<el-option value="" label="不限类型"></el-option>
<el-option value="text,image,voice,shortvideo,video,news,music,location,link" label="消息"></el-option>
<el-option value="event,transfer_customer_service" label="事件"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<!-- 查询按钮 -->
<el-button @click="getDataList()">查询</el-button>
</el-form-item>
</el-form>
<!-- 消息回复提示 -->
<div class="text-gray">
24小时内消息可回复。此后台展示消息有一分钟左右延迟，如需畅聊请使用
<a href="https://mpkf.weixin.qq.com/" target="_blank">公众平台客服</a>
</div>
<!-- 消息列表，使用v-loading显示加载状态 -->
<div v-loading="dataListLoading">
<div class="msg-item" v-for="(msg,index) in dataList" :key="index">
<!-- 用户头像 -->
<div class="avatar"><el-avatar shape="square" :size="60" :src="getUserInfo(msg.openid).headimgurl"></el-avatar></div>
<!-- 消息内容 -->
<div class="item-content">
<div class="flex justify-between margin-bottom">
<div class="text-cut">{{getUserInfo(msg.openid).nickname || '--'}}</div>
<div>{{$moment(msg.createTime).calendar()}}</div>
<div class="reply-btn">
<!-- 回复按钮，如果消息在24小时内可点击 -->
<div v-if="canReply(msg.createTime)" @click="replyHandle(msg.openid)" class="el-icon-s-promotion">回复</div>
</div>
</div>
<!-- 消息预览组件 -->
<wx-msg-preview :msg="msg" singleLine></wx-msg-preview>
</div>
</div>
</div>
<!-- 分页组件 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 消息回复 -->
<wx-msg-reply ref="wxMsgReply" @success="onReplyed"></wx-msg-reply>
</div>
</template>
<script>
const TIME_FORMAT = 'YYYY/MM/DD hh:mm:ss'
export default {
data() {
return {
// 时间选项
timeSelections:{
'近24小时':this.$moment().subtract(1, 'days').format(TIME_FORMAT),
'近3天': this.$moment().subtract(3, 'days').format(TIME_FORMAT),
'近7天': this.$moment().subtract(7, 'days').format(TIME_FORMAT),
'近30天': this.$moment().subtract(30, 'days').format(TIME_FORMAT),
},
// 表单数据
dataForm: {
startTime: this.$moment().subtract(1, 'days').format(TIME_FORMAT),
msgTypes: ''
},
// 消息列表
dataList: [],
// 用户数据列表
userDataList:[],
// 分页参数
pageIndex: 1,
pageSize: 20,
totalCount: 0,
// 加载状态
dataListLoading: false,
// 选中的消息（用于多选操作，但当前代码未使用）
dataListSelections: []
}
},
components: {
// 异步加载组件
WxMsgReply:()=>import('./wx-msg-reply'),
WxMsgPreview:()=>import('@/components/wx-msg-preview')
},
// 激活时获取数据列表
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/manage/wxMsg/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'msgTypes': this.dataForm.msgTypes,
'startTime':this.dataForm.startTime,
'sidx': 'create_time',
'order': 'desc'
})
}).then(({ data }) => {
if (data && data.code === 200) {
this.dataList = data.page.list
this.totalCount = data.page.totalCount
this.refreshUserList(this.dataList)
} else {
this.dataList = []
this.totalCount = 0
}
this.dataListLoading = false
})
},
// 根据消息列表刷新用户数据列表
refreshUserList(msgList){
let openidList=msgList.map(msg=>msg.openid).filter(openid=>!this.userDataList.some(u=>u.openid==openid))
if(!openidList.length)return
openidList = Array.from(new Set(openidList))//去重
this.$http({
url: this.$http.adornUrl('/manage/wxUser/listByIds'),
method: 'post',
data: this.$http.adornParams(openidList,false)
}).then(({ data }) => {
if (data && data.code === 200) {
this.userDataList = this.userDataList.concat(data.data)
}
})
},
// 根据openid获取用户信息
getUserInfo(openid){
return this.userDataList.find(u=>u.openid==openid) || {nickname:'--',headimgurl:''}
},
// 判断消息是否在24小时内可回复
canReply(time){
return new Date(time).getTime()>new Date().getTime()-24*60*60*1000
},
// 每页显示数量改变时的处理
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页码改变时的处理
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 多选操作（当前代码未使用此方法）
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 回复消息
replyHandle(openid) {
this.$nextTick(() => {
this.$refs.wxMsgReply.init(openid)
})
},
// 回复成功后的处理
onReplyed(replyMsg){
this.dataList.unshift({
openid : replyMsg.openid,
msgType : replyMsg.replyType,
detail : {
content : replyMsg.replyContent
},
inOut : 1,
createTime : new Date()
})
}
}
}
</script>
<style scoped>
.msg-item{
border: 1px solid #DCDFE6;
display: flex;
justify-content: flex-start;
align-items: top;
margin-top: 20px;
padding: 10px 20px;
}
.avatar{
flex: 0;
display: inline-block;
min-width: 60px;
margin-right: 20px;
}
.item-content{
flex: 1;
line-height: 20px;
max-width: 100%;
overflow: hidden;
}
.reply-btn{
width: 50px;
}
</style>

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

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

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

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

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

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

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

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