kuailexs/x-springboot-ui
1
0
Fork 0
mirror of https://github.com/yzcheng90/x-springboot-ui synced 2025-11-03 21:20:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
czx
2023-01-22 17:35:48 +08:00
parent 66dc0d1deb
commit 1eb38e60ac
41 changed files with 15437 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.env
View File

@@ -1,5 +0,0 @@
# port 端口号
VUE_APP_PORT = 9999
# open 运行 npm run dev 时自动打开浏览器
VUE_APP_OPEN = false

2
.env.development
View File

@@ -1,2 +0,0 @@
# 开发环境
VUE_APP_BASE_API = 'http://localhost:9999/'

2
.env.production
View File

@@ -1,2 +0,0 @@
# 线上环境
VUE_APP_BASE_API = ''

9
README.md
View File

@@ -1,3 +1,6 @@
<h1> x-springboot-ui </h1>
#### 📚 后台地址 https://github.com/yzcheng90/X-SpringBoot
#### 🚧 安装 cnpm、yarn
@@ -24,6 +27,12 @@ git checkout vue-prev-admin
cnpm install
cnpm install eslint-webpack-plugin --save-dev
cnpm install core-js --save-dev
npm install element-plus --save-dev
npm install --save @vue/composition-api
npm install --save @vue/shared
npm install --save @vue/reactivity
# 运行项目
cnpm run dev

13243
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@@ -1,9 +1,9 @@
{
"name": "vue-prev-admin",
"name": "x-springboot-ui",
"version": "1.2.1",
"private": true,
"description": "vue2 webpack admin template",
"author": "lyt_20201208",
"author": "czx",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
@@ -14,6 +14,7 @@
"dependencies": {
"axios": "0.24.0",
"clipboard": "2.0.8",
"composition-api": "0.0.0",
"countup.js": "2.0.8",
"echarts": "5.2.2",
"element-ui": "2.15.6",
@@ -48,9 +49,6 @@
"last 2 versions",
"not dead"
],
"bugs": {
"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
},
"engines": {
"node": ">=12.0.0",
"npm": ">= 6.0.0"
@@ -66,6 +64,6 @@
],
"repository": {
"type": "git",
"url": "https://gitee.com/lyt-top/vue-next-admin.git"
"url": "https://github.com/yzcheng90/x-springboot-ui.git"
}
}

41
src/api/apk/index.js Normal file
View File

@@ -0,0 +1,41 @@
import request from '@/utils/request';
/**
* APK版本管理
*
* @author czx
* @email object_czx@163.com
* @date 2023-01-22 17:15:11
*/
export function useApkApi() {
return {
list: (params) => {
return request({
url: '/sys/apk/list',
method: 'get',
params
});
},
add: (params) => {
return request({
url: '/sys/apk/save',
method: 'post',
data: params
});
},
update: (params) => {
return request({
url: '/sys/apk/update',
method: 'post',
data: params
});
},
delete: (params) => {
return request({
url: '/sys/apk/delete',
method: 'post',
data: params
});
}
};
}

21
src/api/code/index.js Normal file
View File

@@ -0,0 +1,21 @@
import request from '@/utils/request';
export function useCodeGenApi() {
return {
list: (params) => {
return request({
url: '/sys/gen/list',
method: 'get',
params: params
});
},
create: (params) => {
return request({
url: '/sys/gen/create',
method: 'post',
data: params
});
}
};
}

11
src/api/login/index.js
View File

@@ -9,16 +9,15 @@ export function useLoginApi() {
return {
signIn: (params) => {
return request({
url: '/user/signIn',
url: '/token/login',
method: 'post',
data: params,
params: params
});
},
signOut: (params) => {
signOut: () => {
return request({
url: '/user/signOut',
method: 'post',
data: params,
url: '/token/logout',
method: 'post'
});
},
};

30
src/api/menu/index.js
View File

@@ -14,35 +14,33 @@ import request from '@/utils/request';
* 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu
* 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
* @method getMenuAdmin 获取后端动态路由菜单(admin)
* @method getMenuTest 获取后端动态路由菜单(test)
*/
export function useMenuApi() {
return {
getMenuAdmin: (params) => {
// 本地数据，路径：`/public/xxx.json`
getRouterMenu: () => {
return request({
url: './admin.json',
method: 'get',
params,
url: '/sys/user/sysInfo',
method: 'get'
});
// 本地数据，路径：`/public/xxx.json`
// return request({
// url: './admin.json',
// method: 'get',
// params,
// });
// 模拟跨域
// return request({
// url: '/gitee/lyt-top/vue-next-admin-images/raw/master/vue2/admin.json',
// method: 'get',
// });
},
getMenuTest: (params) => {
// 本地数据，路径：`/public/xxx.json`
list: (params) => {
return request({
url: './test.json',
url: '/sys/menu/list',
method: 'get',
params,
params
});
// 模拟跨域
// return request({
// url: '/gitee/lyt-top/vue-next-admin-images/raw/master/vue2/test.json',
// method: 'get',
// });
},
}
};
}

21
src/api/optionLog/index.js Normal file
View File

@@ -0,0 +1,21 @@
import request from '@/utils/request';
export function useOptionLogApi() {
return {
list: (params) => {
return request({
url: '/sys/log/list',
method: 'get',
params: params
});
},
loginList: (params) => {
return request({
url: '/sys/log/loginList',
method: 'get',
params: params
});
}
};
}

41
src/api/role/index.js Normal file
View File

@@ -0,0 +1,41 @@
import request from '@/utils/request';
export function roleListApi() {
return {
list: (params) => {
return request({
url: '/sys/role/list',
method: 'get',
params
});
},
add: (params) => {
return request({
url: '/sys/role/save',
method: 'post',
data: params
});
},
update: (params) => {
return request({
url: '/sys/role/update',
method: 'post',
data: params
});
},
delete: (params) => {
return request({
url: '/sys/role/delete',
method: 'post',
data: params
});
},
select: () => {
return request({
url: '/sys/role/select',
method: 'get'
});
}
};
}

35
src/api/user/index.js Normal file
View File

@@ -0,0 +1,35 @@
import request from '@/utils/request';
export function useListApi() {
return {
list: (params) => {
return request({
url: '/sys/user/list',
method: 'get',
params
});
},
add: (params) => {
return request({
url: '/sys/user/save',
method: 'post',
data: params
});
},
update: (params) => {
return request({
url: '/sys/user/update',
method: 'post',
data: params
});
},
delete: (params) => {
return request({
url: '/sys/user/delete',
method: 'post',
data: params
});
}
};
}

6
src/i18n/lang/en.js
View File

@@ -3,8 +3,14 @@ export default {
router: {
home: 'home',
system: 'system',
systemRole: 'systemRole',
systemMenu: 'systemMenu',
systemUser: 'systemUser',
systemLogs: 'systemLogs',
optionLog: 'optionLog',
loginLog: 'loginLog',
codeGen: 'codeGen',
swagger: 'swagger',
limits: 'limits',
limitsFrontEnd: 'FrontEnd',
limitsFrontEndPage: 'FrontEndPage',

6
src/i18n/lang/zh-cn.js
View File

@@ -3,8 +3,14 @@ export default {
router: {
home: '首页',
system: '系统设置',
systemRole: '角色管理',
systemMenu: '菜单管理',
systemUser: '用户管理',
systemLogs: '日志管理',
optionLog: '操作日志',
loginLog: '登录日志',
codeGen: '代码生成',
swagger: '接口文档',
limits: '权限管理',
limitsFrontEnd: '前端控制',
limitsFrontEndPage: '页面权限',

6
src/i18n/lang/zh-tw.js
View File

@@ -3,8 +3,14 @@ export default {
router: {
home: '首頁',
system: '系統設置',
systemRole: '角色列表',
systemMenu: '選單管理',
systemUser: '用戶管理',
systemLogs: '日志管理',
optionLog: '操作日志',
loginLog: '登录日志',
codeGen: '代码生成',
swagger: '接口文档',
limits: '許可權管理',
limitsFrontEnd: '前端控制',
limitsFrontEndPage: '頁面許可權',

4
src/i18n/pages/login/en.js
View File

@@ -11,8 +11,8 @@ export default {
},
signInText: 'welcome back!',
copyright: {
one5: 'Copyright: Shenzhen XXX Software Technology Co., Ltd',
two6: 'Copyright: Shenzhen XXX software technology Guangdong ICP preparation no.05010000',
one5: 'Copyright: XXX Software Technology Co., Ltd',
two6: 'Copyright: XXX software technology ICP preparation no.xxxx',
},
},
};

6
src/i18n/pages/login/zh-cn.js
View File

@@ -1,7 +1,7 @@
// 定义内容
export default {
login: {
placeholder1: '用户名 admin 或不输均为 test',
placeholder1: '用户名 admin',
placeholder2: '密码：123456',
placeholder3: '请输入验证码',
btnText: '登 录',
@@ -11,8 +11,8 @@ export default {
},
signInText: '欢迎回来！',
copyright: {
one5: '版权所有：深圳市xxx软件科技有限公司',
two6: 'Copyright: Shenzhen XXX Software Technology 粤ICP备05010000号',
one5: '版权所有：xxx软件科技有限公司',
two6: 'Copyright: XXX Software Technology 粤ICP备xxx号',
},
},
};

4
src/i18n/pages/login/zh-tw.js
View File

@@ -11,8 +11,8 @@ export default {
},
signInText: '歡迎回來！',
copyright: {
one5: '版權所有：深圳市xxx軟件科技有限公司',
two6: 'Copyright: Shenzhen XXX Software Technology 粵ICP備05010000號',
one5: '版權所有：xxx軟件科技有限公司',
two6: 'Copyright: XXX Software Technology 粵ICP備xxxx號',
},
},
};

69
src/layout/navBars/breadcrumb/user.vue
View File

@@ -70,6 +70,9 @@ import screenfull from 'screenfull';
import { Session, Local } from '@/utils/storage.js';
import UserNews from '@/layout/navBars/breadcrumb/userNews.vue';
import Search from '@/layout/navBars/breadcrumb/search.vue';
import { useLoginApi } from '@/api/login';
import {Message} from "element-ui";
export default {
name: 'layoutBreadcrumbUser',
components: { UserNews, Search },
@@ -175,44 +178,44 @@ export default {
// `dropdown 下拉菜单` 当前项点击
onDropdownCommand(path) {
if (path === 'logOut') {
setTimeout(() => {
this.$msgbox({
closeOnClickModal: false,
closeOnPressEscape: false,
title: this.$t('message.user.logOutTitle'),
message: this.$t('message.user.logOutMessage'),
showCancelButton: true,
confirmButtonText: this.$t('message.user.logOutConfirm'),
cancelButtonText: this.$t('message.user.logOutCancel'),
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = this.$t('message.user.logOutExit');
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 700);
} else {
done();
}
},
})
.then(() => {
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
})
.catch(() => {});
}, 150);
this.$msgbox({
closeOnClickModal: false,
closeOnPressEscape: false,
title: this.$t('message.user.logOutTitle'),
message: this.$t('message.user.logOutMessage'),
showCancelButton: true,
confirmButtonText: this.$t('message.user.logOutConfirm'),
cancelButtonText: this.$t('message.user.logOutCancel'),
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = this.$t('message.user.logOutExit');
this.userLogout();
done();
instance.confirmButtonLoading = false;
} else {
done();
}
},
}).then(() => {
}).catch(() => {});
} else if (path === 'wareHouse') {
window.open('https://gitee.com/lyt-top/vue-next-admin');
window.open('https://github.com/yzcheng90/x-springboot');
} else {
this.$router.push(path);
}
},
userLogout(){
useLoginApi().signOut().then(response => {
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
}).catch(() => {
})
}
},
};
</script>

2
src/layout/upgrade/index.vue
View File

@@ -72,7 +72,7 @@ export default {
},
},
mounted() {
this.delayShow();
// this.delayShow();
setTimeout(() => {
this.btnTxt = this.$t('message.upgrade.btnTwo');
}, 200);

44
src/router/index.js
View File

@@ -179,38 +179,24 @@ export function dynamicRouter(routes) {
export function adminUser(router, to, next) {
resetRouter();
menuApi
.getMenuAdmin()
.getRouterMenu()
.then(async (res) => {
// 读取用户信息，获取对应权限进行判断
store.dispatch('userInfos/setUserInfos');
store.dispatch('routesList/setRoutesList', setFilterMenuFun(res.data, store.state.userInfos.userInfos.roles));
dynamicRoutes[0].children = res.data;
const awaitRoute = await dynamicRouter(dynamicRoutes);
[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
router.addRoute({ ...route });
});
setCacheTagsViewRoutes(JSON.parse(JSON.stringify(res.data)));
next({ ...to, replace: true });
})
.catch(() => {});
}
// eslint-disable-next-line no-console
console.log("后台请求路由进行加载")
// 添加路由，模拟数据与方法，可自行进行修改 test
// 添加动态路由，`{ path: '*', redirect: '/404' }` 防止页面刷新，静态路由丢失问题
export function testUser(router, to, next) {
resetRouter();
menuApi
.getMenuTest()
.then(async (res) => {
// 读取用户信息，获取对应权限进行判断
store.dispatch('userInfos/setUserInfos');
store.dispatch('routesList/setRoutesList', setFilterMenuFun(res.data, store.state.userInfos.userInfos.roles));
dynamicRoutes[0].children = res.data;
// 存储用户信息到浏览器缓存
Session.set('userInfo', res.data.userInfo);
// 存储用户信息到vuex
store.dispatch('userInfos/setUserInfos', res.data.userInfo);
// 保存路由信息
store.dispatch('routesList/setRoutesList', res.data.menus);
dynamicRoutes[0].children = res.data.menus;
const awaitRoute = await dynamicRouter(dynamicRoutes);
[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
router.addRoute({ ...route });
});
setCacheTagsViewRoutes(JSON.parse(JSON.stringify(res.data)));
setCacheTagsViewRoutes(JSON.parse(JSON.stringify(res.data.menus)));
next({ ...to, replace: true });
})
.catch(() => {});
@@ -230,9 +216,9 @@ export function delayNProgressDone(time = 300) {
// 动态加载后端返回路由路由(模拟数据)
export function getRouterList(router, to, next) {
if (!Session.get('userInfo')) return false;
if (Session.get('userInfo').userName === 'admin') adminUser(router, to, next);
else if (Session.get('userInfo').userName === 'test') testUser(router, to, next);
// eslint-disable-next-line no-console
console.log("开始加载路由：getRouterList")
adminUser(router, to, next);
}
// 路由加载前

2
src/store/modules/routesList.js
View File

@@ -12,6 +12,8 @@ const routesListModule = {
actions: {
// 设置路由，菜单中使用到
async setRoutesList({ commit }, data) {
// eslint-disable-next-line no-console
console.log("设置路由，菜单中使用到")
commit('getRoutesList', data);
},
},

4
src/store/modules/themeConfig.js
View File

@@ -94,9 +94,9 @@ const themeConfigModule = {
* 全局网站标题 / 副标题
*/
// 网站主标题（菜单导航、浏览器当前网页标题）
globalTitle: 'vue-prev-admin',
globalTitle: '后台管理系统',
// 网站副标题（登录页顶部文字）
globalViceTitle: 'SMALL@小柒',
globalViceTitle: '任务分发平台',
// 网站描述（登录页顶部文字）
globalViceDes: 'vue2.x后台管理系统免费开源模板',
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn

6
src/store/modules/userInfos.js
View File

@@ -6,14 +6,18 @@ const userInfosModule = {
userInfos: {},
},
mutations: {
// 设置用户信息
// 获取用户信息
getUserInfos(state, data) {
// eslint-disable-next-line no-console
console.log("获取用户信息")
state.userInfos = data;
},
},
actions: {
// 设置用户信息
async setUserInfos({ commit }, data) {
// eslint-disable-next-line no-console
console.log("设置用户信息")
if (data) {
commit('getUserInfos', data);
} else {

8
src/utils/request.js
View File

@@ -16,7 +16,7 @@ service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么 token
if (Session.get('token')) {
config.headers.common['Authorization'] = `${Session.get('token')}`;
config.headers['token'] = `${Session.get('token')}`;
}
return config;
},
@@ -33,7 +33,7 @@ service.interceptors.response.use(
const res = response.data;
if (res.code && res.code !== 0) {
// `token` 过期或者账号已在别处登录
if (res.code === 401 || res.code === 4001) {
if (res.code === 401) {
// 清除浏览器全部临时缓存
Session.clear();
router.push('/login');
@@ -42,6 +42,10 @@ service.interceptors.response.use(
MessageBox.alert('你已被登出，请重新登录', '提示', {})
.then(() => {})
.catch(() => {});
}else if(res.code === 500){
Message.error(res.msg);
}else {
Message.error("请求code 错误");
}
return Promise.reject(service.interceptors.response.error);
} else {

334
src/views/apk/index.vue Normal file
View File

@@ -0,0 +1,334 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input size="default" v-model="state.tableData.param.keyword" placeholder="请输入名称"
style="max-width: 180px"></el-input>
<el-button size="default" type="primary" class="ml10" @click="fetchData()">
<el-icon>
<ele-Search/>
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddOrEdit('add')">
<el-icon>
<ele-FolderAdd/>
</el-icon>
新增
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60"/>
<el-table-column prop="updateContent" label="更新内容" show-overflow-tooltip></el-table-column>
<el-table-column prop="versionCode" label="版本码" show-overflow-tooltip></el-table-column>
<el-table-column prop="versionName" label="版本号" show-overflow-tooltip></el-table-column>
<el-table-column prop="packageName" label="包名" show-overflow-tooltip></el-table-column>
<el-table-column prop="downloadUrl" label="下载地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="appName" label="APP名" show-overflow-tooltip></el-table-column>
<el-table-column prop="md5Value" label="MD5值" show-overflow-tooltip></el-table-column>
<el-table-column prop="fileName" label="文件名" show-overflow-tooltip></el-table-column>
<el-table-column prop="fileSize" label="文件大小" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="userId" label="上传人" show-overflow-tooltip></el-table-column>
<el-table-column prop="isForce" label="是否强制安装" show-overflow-tooltip></el-table-column>
<el-table-column prop="isIgnorable" label="是否可忽略该版本" show-overflow-tooltip></el-table-column>
<el-table-column prop="isSilent" label="是否静默下载" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)">修改</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current"
background
:page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
<el-dialog :title="state.dialog.title" :visible.sync="state.dialog.isShowDialog" width="769px">
<div>
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="更新内容">
<el-input v-model="state.ruleForm.updateContent" placeholder="更新内容" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="版本码">
<el-input v-model="state.ruleForm.versionCode" placeholder="版本码" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="版本号">
<el-input v-model="state.ruleForm.versionName" placeholder="版本号" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="包名">
<el-input v-model="state.ruleForm.packageName" placeholder="包名" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="下载地址">
<el-input v-model="state.ruleForm.downloadUrl" placeholder="下载地址" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="APP名">
<el-input v-model="state.ruleForm.appName" placeholder="APP名" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="MD5值">
<el-input v-model="state.ruleForm.md5Value" placeholder="MD5值" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="文件名">
<el-input v-model="state.ruleForm.fileName" placeholder="文件名" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="文件大小">
<el-input v-model="state.ruleForm.fileSize" placeholder="文件大小" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="创建时间">
<el-input v-model="state.ruleForm.createTime" placeholder="创建时间" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="修改时间">
<el-input v-model="state.ruleForm.updateTime" placeholder="修改时间" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="上传人">
<el-input v-model="state.ruleForm.userId" placeholder="上传人" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否强制安装">
<el-input v-model="state.ruleForm.isForce" placeholder="是否强制安装" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否可忽略该版本">
<el-input v-model="state.ruleForm.isIgnorable" placeholder="是否可忽略该版本" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否静默下载">
<el-input v-model="state.ruleForm.isSilent" placeholder="是否静默下载" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" :loading="state.submitBtn.loading" size="default">{{state.dialog.submitTxt}}</el-button>
</span>
</template>
</div>
</el-dialog>
</div>
</template>
<script>
import { useApkApi } from '@/api/apk';
import {Message, MessageBox} from 'element-ui';
export default {
name: "apk",
data() {
return {
state: {
tableData: {
data: [],
total: 0,
loading: false,
param: {
current: 1,
limit: 10,
keyword: '',
}
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
ruleForm: {
updateContent: '', // 更新内容
versionCode: '', // 版本码
versionName: '', // 版本号
packageName: '', // 包名
downloadUrl: '', // 下载地址
appName: '', // APP名
md5Value: '', // MD5值
fileName: '', // 文件名
fileSize: '', // 文件大小
createTime: '', // 创建时间
updateTime: '', // 修改时间
userId: '', // 上传人
isForce: '', // 是否强制安装
isIgnorable: '', // 是否可忽略该版本
isSilent: '', // 是否静默下载
},
submitBtn: {
loading: false,
type:''
}
}
}
},
methods: {
fetchData() {
this.state.ruleForm = {}
this.state.tableData.loading = true
useApkApi().list(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data.records
this.state.tableData.total = response.data.total
this.state.tableData.loading = false
})
},
onOpenAddOrEdit(type, row) {
if (type === 'edit') {
this.state.submitBtn.type = 'edit';
this.state.ruleForm = row;
this.state.dialog.title = '修改${column.columnComment}';
this.state.dialog.submitTxt = '修 改';
} else {
this.state.submitBtn.type = 'add';
this.state.ruleForm = {
updateContent: '', // 更新内容
versionCode: '', // 版本码
versionName: '', // 版本号
packageName: '', // 包名
downloadUrl: '', // 下载地址
appName: '', // APP名
md5Value: '', // MD5值
fileName: '', // 文件名
fileSize: '', // 文件大小
createTime: '', // 创建时间
updateTime: '', // 修改时间
userId: '', // 上传人
isForce: '', // 是否强制安装
isIgnorable: '', // 是否可忽略该版本
isSilent: '', // 是否静默下载
};
this.state.dialog.title = '新增${column.columnComment}';
this.state.dialog.submitTxt = '新 增';
}
this.state.dialog.isShowDialog = true;
},
onRowDel(row) {
MessageBox.confirm(`此操作将永久删除${column.columnComment}：“${row.roleName}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.deleteInfo(row)
}).catch(() => {
});
},
handleSizeChange(pageSize) {
this.state.tableData.data = []
this.state.tableData.param.limit = pageSize
this.fetchData()
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog() {
this.state.dialog.isShowDialog = false;
},
onCancel() {
this.closeDialog();
},
onSubmit() {
this.state.submitBtn.loading = true;
if(this.state.submitBtn.type === 'edit'){
useApkApi().update(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
}else {
useApkApi().add(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
}
},
deleteInfo(row){
useApkApi().delete(row).then(response => {
Message.success('删除成功');
this.fetchData()
}).catch(() => {
this.fetchData()
})
}
},
computed: {},
created() {
},
mounted() {
this.fetchData()
}
}
</script>
<style scoped>
</style>

231
src/views/code/index.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input size="default" v-model="state.tableData.param.keyword" placeholder="请输入名称"
style="max-width: 180px"></el-input>
<el-button size="default" type="primary" class="ml10" @click="fetchData()">
<el-icon>
<ele-Search/>
</el-icon>
查询
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60"/>
<el-table-column prop="tableName" label="表名" show-overflow-tooltip></el-table-column>
<el-table-column prop="tableComment" label="描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="engine" label="引擎" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)">
生成
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current"
background
:page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
<el-dialog :title="state.dialog.title" :visible.sync="state.dialog.isShowDialog" width="769px">
<div>
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="130px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="表名">
<el-input v-model="state.ruleForm.tableName" :disabled="true"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="模块名">
<el-input v-model="state.ruleForm.moduleName" ></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="RequestMapping">
<el-input placeholder="请输入内容" v-model="state.ruleForm.requestMapping">
<template slot="prepend">{{state.ruleForm.moduleName}}/</template>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="后台包路径">
<el-input v-model="state.ruleForm.packagePath"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="Restful接口">
<el-switch v-model="state.ruleForm.useRestful"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="字段驼峰">
<el-switch v-model="state.ruleForm.useHump"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="生成文件">
<el-checkbox label="Controller" v-model="state.ruleForm.fileController"></el-checkbox>
<el-checkbox label="Service/Impl" v-model="state.ruleForm.fileServiceImpl"></el-checkbox>
<el-checkbox label="Mapper" v-model="state.ruleForm.fileMapper"></el-checkbox>
<el-checkbox label="Entity" v-model="state.ruleForm.fileEntity"></el-checkbox>
<el-checkbox label="Mapper.xml" v-model="state.ruleForm.fileMapperXml"></el-checkbox>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="后台项目根目录">
<el-input v-model="state.ruleForm.filePath"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="前台项目目录">
<el-input v-model="state.ruleForm.uiFilePath"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="author">
<el-input v-model="state.ruleForm.author"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="email">
<el-input v-model="state.ruleForm.email"></el-input>
</el-form-item>
</el-col>
</el-row>
<template>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" :loading="state.submitBtn.loading" size="default">生 成</el-button>
&nbsp;&nbsp;&nbsp;<el-tag type="warning">代码生成后，需要进行代码格式化</el-tag>
</span>
</template>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {useCodeGenApi} from '@/api/code';
export default {
name: "user",
data() {
return {
state: {
roleListData: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
current: 1,
limit: 10,
keyword: '',
}
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
ruleForm: {
tableName: "",
mainPath: "com.suke.czx",
packagePath: "com.suke.czx.modules",
filePath: "D:\\github_project\\X-SpringBoot",
uiFilePath: "D:\\github_project\\x-springboot-ui",
moduleName: "user",
requestMapping: "user",
author: "czx",
email: "object_czx@163.com",
useRestful: false,
useHump: true,
fileController: true,
fileServiceImpl: true,
fileMapper: true,
fileMapperXml: false,
fileEntity: true
},
submitBtn: {
loading: false,
type:''
}
}
}
},
methods: {
fetchData() {
this.state.tableData.loading = true
useCodeGenApi().list(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data.records
this.state.tableData.total = response.data.total
this.state.tableData.loading = false
})
},
onOpenAddOrEdit(type, row) {
console.log(row)
this.state.ruleForm.tableName = row.tableName;
this.state.dialog.title = '生成配置';
this.state.dialog.submitTxt = '配 置';
this.state.dialog.isShowDialog = true;
},
onSubmit() {
if(!this.state.ruleForm.tableName){
this.$message('先选择表再操作');
return;
}
this.state.submitBtn.loading = true;
useCodeGenApi().create(this.state.ruleForm).then(response => {
this.$message('代码生成成功！');
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
},
handleSizeChange(pageSize) {
this.state.tableData.data = []
this.state.tableData.param.limit = pageSize
this.fetchData()
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog() {
this.state.dialog.isShowDialog = false;
},
onCancel() {
this.closeDialog();
}
},
computed: {},
created() {
},
mounted() {
this.fetchData()
}
}
</script>
<style scoped>
</style>

5
src/views/home/index.vue
View File

@@ -153,7 +153,7 @@ import * as echarts from 'echarts';
import Scroll from 'vue-seamless-scroll';
import { CountUp } from 'countup.js';
import { Session } from '@/utils/storage';
import { formatAxis, formatDate } from '@/utils/formatTime';
import { formatAxis } from '@/utils/formatTime';
import { recommendList, chartsRightList, newsInfoList, dailyMessage } from './mock';
export default {
name: 'home',
@@ -362,9 +362,10 @@ export default {
},
// 初始化登录信息
initUserInfo() {
// eslint-disable-next-line no-console
console.log("初始化登录信息")
if (!Session.get('userInfo')) return false;
this.userInfo = Session.get('userInfo');
this.userInfo.time = formatDate(new Date(this.userInfo.time), 'YYYY-mm-dd HH:MM:SS');
},
// 消息通知当前项点击
onNewsInfoListClick(v) {

93
src/views/login/index.vue
View File

@@ -21,12 +21,12 @@
<div class="login-main">
<h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
<el-form class="el-form login-form">
<el-form-item style="margin-left: 0px" prop="userName">
<el-form-item style="margin-left: 0px" prop="username">
<el-input
type="text"
:placeholder="$t('message.login.placeholder1')"
prefix-icon="el-icon-user"
v-model="ruleForm.userName"
v-model="ruleForm.username"
clearable
autocomplete="off"
>
@@ -43,22 +43,22 @@
>
</el-input>
</el-form-item>
<el-form-item style="margin-left: 0px" prop="code">
<el-form-item style="margin-left: 0px" prop="captcha">
<div class="el-row" span="24">
<div class="el-col el-col-16">
<div class="el-col el-col-14">
<el-input
type="text"
maxlength="4"
maxlength="5"
:placeholder="$t('message.login.placeholder3')"
prefix-icon="el-icon-position"
v-model="ruleForm.code"
v-model="ruleForm.captcha"
clearable
autocomplete="off"
></el-input>
</div>
<div class="el-col el-col-8">
<div class="login-code">
<span class="login-code-img">1234</span>
<div class="el-col el-col-10">
<div class="login-code" @click="getIdentifyingCode(true)">
<img id="imgIdentifyingCode" class="login-code-img" alt="点击更换" title="点击更换">
</div>
</div>
</div>
@@ -87,6 +87,8 @@ import { Session } from '@/utils/storage';
import { formatDate, formatAxis } from '@/utils/formatTime';
import { PrevLoading } from '@/utils/loading.js';
import { quotationsList } from './mock';
import { useLoginApi } from '@/api/login';
export default {
name: 'login',
data() {
@@ -98,9 +100,10 @@ export default {
loading: false,
},
ruleForm: {
userName: 'admin',
password: '123456',
code: '1234',
username: 'admin',
password: 'admin',
captcha: '',
randomStr: Math.floor(Math.random() * 999999999)
},
time: {
txt: '',
@@ -123,8 +126,22 @@ export default {
},
mounted() {
this.initRandomQuotations();
this.getRandomStr()
this.getIdentifyingCode(true)
},
methods: {
getRandomStr() {
this.ruleForm.randomStr = Math.floor(Math.random() * 999999999)
},
getIdentifyingCode(bRefresh) {
let identifyCodeSrc = 'sys/code/' + this.ruleForm.randomStr
if (bRefresh) {
this.getRandomStr()
identifyCodeSrc = 'sys/code/' + this.ruleForm.randomStr
}
const objs = document.getElementById('imgIdentifyingCode')
objs.src = identifyCodeSrc
},
// 随机语录
initRandomQuotations() {
this.quotations = this.quotationsList[Math.floor(Math.random() * this.quotationsList.length)];
@@ -139,46 +156,16 @@ export default {
// 登录按钮点击
submitForm() {
this.submit.loading = true;
setTimeout(() => {
let defaultRoles = [];
let defaultAuthBtnList = [];
// admin 页面权限标识，对应路由 meta.roles
let adminRoles = ['admin'];
// admin 按钮权限标识
let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
// common 页面权限标识，对应路由 meta.roles
let testAuthPageList = ['common'];
// test 按钮权限标识
let testAuthBtnList = ['btn.add', 'btn.link'];
if (this.ruleForm.userName === 'admin') {
defaultRoles = adminRoles;
defaultAuthBtnList = adminAuthBtnList;
} else {
defaultRoles = testAuthPageList;
defaultAuthBtnList = testAuthBtnList;
}
const userInfos = {
userName: this.ruleForm.userName === 'admin' ? 'admin' : 'test',
photo:
this.ruleForm.userName === 'admin'
? 'https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200'
: 'https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
time: new Date().getTime(),
roles: defaultRoles,
authBtnList: defaultAuthBtnList,
};
// 存储 token 到浏览器缓存
Session.set('token', Math.random().toString(36).substr(0));
// 存储用户信息到浏览器缓存
Session.set('userInfo', userInfos);
// 存储用户信息到vuex
this.$store.dispatch('userInfos/setUserInfos', userInfos);
PrevLoading.start();
this.$router.push('/');
setTimeout(() => {
this.$message.success(`${this.currentTime}，${this.$t('message.login.signInText')}`);
}, 300);
}, 300);
useLoginApi().signIn(this.ruleForm).then((res) => {
// eslint-disable-next-line no-console
this.$message.success(`${this.currentTime}，${this.$t('message.login.signInText')}`);
// 存储 token 到浏览器缓存
Session.set('token', res.token);
PrevLoading.start();
this.$router.push('/');
}).catch(() => {
this.submit.loading = false
})
},
},
destroyed() {
@@ -299,7 +286,7 @@ export default {
user-select: none;
.login-code-img {
margin-top: 2px;
width: 100px;
width: 120px;
height: 38px;
border: 1px solid var(--prev-border-color-base);
color: var(--prev-color-text-primary);

99
src/views/loginLog/index.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input size="default" v-model="state.tableData.param.keyword" placeholder="请输入名称"
style="max-width: 180px"></el-input>
<el-button size="default" type="primary" class="ml10" @click="fetchData()">
<el-icon>
<ele-Search/>
</el-icon>
查询
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60"/>
<el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
<el-table-column prop="optionName" label="用户操作" show-overflow-tooltip></el-table-column>
<el-table-column prop="optionTerminal" label="操作终端" show-overflow-tooltip></el-table-column>
<el-table-column prop="optionIp" label="IP地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="optionTime" label="操作时间" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current"
background
:page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
</div>
</template>
<script>
import {useOptionLogApi} from '@/api/optionLog';
export default {
name: "user",
data() {
return {
state: {
roleListData: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
current: 1,
limit: 10,
keyword: '',
}
}
}
}
},
methods: {
fetchData() {
this.state.tableData.loading = true
useOptionLogApi().loginList(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data.records
this.state.tableData.total = response.data.total
this.state.tableData.loading = false
})
},
handleSizeChange(pageSize) {
this.state.tableData.data = []
this.state.tableData.param.limit = pageSize
this.fetchData()
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog() {
this.state.dialog.isShowDialog = false;
},
onCancel() {
this.closeDialog();
}
},
computed: {},
created() {
},
mounted() {
this.fetchData()
}
}
</script>
<style scoped>
</style>

513
src/views/menu/index.vue Normal file
View File

@@ -0,0 +1,513 @@
<template>
<div class="system-menu-container layout-pd">
<el-card shadow="hover">
<div class="system-menu-search mb15">
<el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
<el-button size="default" type="primary" class="ml10">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddOrEdit()">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增菜单
</el-button>
</div>
<el-table
:data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%"
row-key="path"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="菜单名称" show-overflow-tooltip>
<template #default="scope">
<span class="ml10">{{ $t(scope.row.meta.title) }}</span>
</template>
</el-table-column>
<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
<el-table-column label="组件路径" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row.component }}</span>
</template>
</el-table-column>
<el-table-column label="权限标识" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row.meta.roles }}</span>
</template>
</el-table-column>
<el-table-column label="排序" show-overflow-tooltip width="80">
<template #default="scope">
{{ scope.row.orderSort }}
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip width="240">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('add')">新增</el-button>
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)">修改</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog :title="state.dialog.title" :visible.sync="state.dialog.isShowDialog" width="769px">
<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="80px">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级菜单">
<el-cascader
:options="state.menuData"
:props="{ checkStrictly: true, value: 'path', label: 'title' }"
placeholder="请选择上级菜单"
clearable
class="w100"
v-model="state.ruleForm.menuSuperior"
>
<template #default="{ node, data }">
<span>{{ data.title }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单名称">
<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
</el-form-item>
</el-col>
<template>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="路由名称">
<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="路由路径">
<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="重定向">
<el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label='菜单图标'>
<el-popover
placement="bottom"
width="450"
trigger="click"
@show="popoverShow">
<span slot="reference">
<el-input suffix-icon='data-icon' v-model="state.ruleForm.meta.icon" placeholder='请输入菜单图标'>
<template slot="append">
<i :class="state.ruleForm.meta.icon"/>
</template>
</el-input>
</span>
<div class="iconList">
<el-tabs v-model="activeName">
<el-tab-pane
v-for="(item, index) in iconList"
:key="item.label"
:name="'name'+ index"
:label="item.label">
<i v-for="item in item.list" :key="item" :class="item" @click="setIcon(item)" style="font-size:20px"></i>
</el-tab-pane>
</el-tabs>
</div>
</el-popover>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="组件路径">
<el-input v-model="state.ruleForm.component" placeholder="组件路径" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="链接地址">
<el-input
v-model="state.ruleForm.meta.isLink"
placeholder="外链/内嵌时链接地址（http:xxx.com）"
clearable
:disabled="!state.ruleForm.isLink"
>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="权限标识">
<el-select v-model="state.ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
<el-option label="admin" value="admin"></el-option>
<el-option label="common" value="common"></el-option>
</el-select>
</el-form-item>
</el-col>
</template>
<template v-if="state.ruleForm.menuType === 'btn'">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="权限标识">
<el-input v-model="state.ruleForm.btnPower" placeholder="请输入权限标识" clearable></el-input>
</el-form-item>
</el-col>
</template>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单排序">
<el-input-number v-model="state.ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
</el-form-item>
</el-col>
<template>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否隐藏">
<el-radio-group v-model="state.ruleForm.meta.isHide">
<el-radio :label="true">隐藏</el-radio>
<el-radio :label="false">不隐藏</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="页面缓存">
<el-radio-group v-model="state.ruleForm.meta.isKeepAlive">
<el-radio :label="true">缓存</el-radio>
<el-radio :label="false">不缓存</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否固定">
<el-radio-group v-model="state.ruleForm.meta.isAffix">
<el-radio :label="true">固定</el-radio>
<el-radio :label="false">不固定</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否外链">
<el-radio-group v-model="state.ruleForm.isLink" :disabled="state.ruleForm.meta.isIframe">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否内嵌">
<el-radio-group v-model="state.ruleForm.meta.isIframe" @change="onSelectIframeChange">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { useMenuApi } from '@/api/menu';
import { Message, MessageBox } from 'element-ui';
export default {
name: "menuList",
data() {
return {
state: {
tableData: {
data: [],
total: 0,
loading: false,
param: {
current: 1,
limit: 10,
keyword: '',
}
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
ruleForm: {
menuSuperior: [], // 上级菜单
menuType: 'menu', // 菜单类型
name: '', // 路由名称
component: '', // 组件路径
isLink: false, // 是否外链
menuSort: 0, // 菜单排序
path: '', // 路由路径
redirect: '', // 路由重定向，有子集 children 时
meta: {
title: '', // 菜单名称
icon: '', // 菜单图标
isHide: false, // 是否隐藏
isKeepAlive: true, // 是否缓存
isAffix: false, // 是否固定
isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
roles: '', // 权限标识，取角色管理
}
},
menuData:[]
},
activeName: '0',
iconList: [
{
label: '通用图标',
id: 'first',
list: [
'iconfont iconicon_roundadd',
'iconfont iconicon_compile',
'iconfont iconicon_glass',
'iconfont iconicon_roundclose',
'iconfont iconicon_roundreduce',
'iconfont iconicon_delete',
'iconfont iconicon_shakehands',
'iconfont iconicon_task_done',
'iconfont iconicon_voipphone',
'iconfont iconicon_safety',
'iconfont iconicon_work',
'iconfont iconicon_study',
'iconfont iconicon_task',
'iconfont iconicon_subordinate',
'iconfont iconicon_star',
'iconfont iconicon_setting',
'iconfont iconicon_sms',
'iconfont iconicon_share',
'iconfont iconicon_secret',
'iconfont iconicon_scan_namecard',
'iconfont iconicon_principal',
'iconfont iconicon_group',
'iconfont iconicon_send',
'iconfont iconicon_scan',
'iconfont iconicon_search',
'iconfont iconicon_refresh',
'iconfont iconicon_savememo',
'iconfont iconicon_QRcode',
'iconfont iconicon_im_keyboard',
'iconfont iconicon_redpacket',
'iconfont iconicon_photo',
'iconfont iconicon_qq',
'iconfont iconicon_wechat',
'iconfont iconicon_phone',
'iconfont iconicon_namecard',
'iconfont iconicon_notice',
'iconfont iconicon_next_arrow',
'iconfont iconicon_left',
'iconfont iconicon_more',
'iconfont iconicon_details',
'iconfont iconicon_message',
'iconfont iconicon_mobilephone',
'iconfont iconicon_im_voice',
'iconfont iconicon_GPS',
'iconfont iconicon_ding',
'iconfont iconicon_exchange',
'iconfont iconicon_cspace',
'iconfont iconicon_doc',
'iconfont iconicon_dispose',
'iconfont iconicon_discovery',
'iconfont iconicon_community_line',
'iconfont iconicon_cloud_history',
'iconfont iconicon_coinpurse_line',
'iconfont iconicon_airplay',
'iconfont iconicon_at',
'iconfont iconicon_addressbook',
'iconfont iconicon_boss',
'iconfont iconicon_addperson',
'iconfont iconicon_affiliations_li',
'iconfont iconicon_addmessage',
'iconfont iconicon_addresslist',
'iconfont iconicon_add'
]
},
{
label: '系统图标',
id: 'second',
list: [
'iconfont icon-zhongyingwen',
'iconfont icon-caidan',
'iconfont icon-rizhi1',
'iconfont icon-zhuti',
'iconfont icon-suoping',
'iconfont icon-bug',
'iconfont icon-qq1',
'iconfont icon-weixin1',
'iconfont icon-shouji',
'iconfont icon-mima',
'iconfont icon-yonghu',
'iconfont icon-yanzhengma',
'iconfont icon-canshu',
'iconfont icon-dongtai',
'iconfont icon-iconset0265',
'iconfont icon-shujuzhanshi2',
'iconfont icon-tuichuquanping',
'iconfont icon-rizhi',
'iconfont icon-cuowutishitubiao',
'iconfont icon-debug',
'iconfont icon-iconset0216',
'iconfont icon-quanxian',
'iconfont icon-shuaxin',
'iconfont icon-bofangqi-suoping',
'iconfont icon-quanping',
'iconfont icon-navicon',
'iconfont icon-biaodan',
'iconfont icon-liuliangyunpingtaitubiao08',
'iconfont icon-caidanguanli',
'iconfont icon-cuowu',
'iconfont icon-wxbgongju',
'iconfont icon-tuichu',
'iconfont icon-daohanglanmoshi02',
'iconfont icon-changyonglogo27',
'iconfont icon-biaoge',
'iconfont icon-baidu1',
'iconfont icon-tubiao',
'iconfont icon-souhu',
'iconfont icon-msnui-360',
'iconfont icon-iframe',
'iconfont icon-huanyingye'
]
}
]
}
},
methods: {
popoverShow() {
this.$nextTick(()=>{
this.activeName = '0'
})
},
setIcon(icon) {
this.state.ruleForm.meta.icon = icon;
},
fetchData() {
this.state.tableData.loading = true
useMenuApi().list(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data
this.state.menuData = response.data
this.state.tableData.loading = false
})
},
onOpenAddOrEdit(type,row){
if (type === 'edit') {
this.state.ruleForm = row;
this.state.dialog.title = '修改菜单';
this.state.dialog.submitTxt = '修 改';
} else {
this.state.ruleForm = {
menuSuperior: [], // 上级菜单
menuType: 'menu', // 菜单类型
name: '', // 路由名称
component: '', // 组件路径
isLink: false, // 是否外链
menuSort: 0, // 菜单排序
path: '', // 路由路径
redirect: '', // 路由重定向，有子集 children 时
meta: {
title: '', // 菜单名称
icon: '', // 菜单图标
isHide: false, // 是否隐藏
isKeepAlive: true, // 是否缓存
isAffix: false, // 是否固定
isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
roles: '', // 权限标识，取角色管理
}
};
this.state.dialog.title = '新增菜单';
this.state.dialog.submitTxt = '新 增';
}
this.state.dialog.isShowDialog = true;
},
onRowDel(row){
MessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.fetchData()
Message.success('删除成功');
}).catch(() => {});
},
onSelectIframeChange(){
if (this.state.ruleForm.meta.isIframe){
this.state.state.ruleForm.isLink = true;
}else{
this.state.state.ruleForm.isLink = false;
}
},
handleSizeChange(pageSize) {
this.state.tableData.data = []
this.state.tableData.param.limit = pageSize
this.fetchData()
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog(){
this.state.dialog.isShowDialog = false;
},
onCancel(){
this.closeDialog();
},
onSubmit(){
}
},
computed: {
},
created(){
},
mounted(){
this.fetchData()
}
}
</script>
<style scoped lang="scss">
.icon_list {
width: 100%;
height: 320px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
i {
display: inline-block;
width: 60px;
height: 45px;
color: #000000;
font-size: 20px;
border: 1px solid #E6E6E6;
border-radius: 4px;
cursor: pointer;
text-align: center;
line-height: 45px;
margin: 5px;
&:hover {
color: blue;
border-color: blue;
}
}
::v-deep .el-tabs__content {
height: 270px;
overflow-y: scroll;
overflow-x: hidden;
}
}
</style>

16
src/views/menu/menu1/menu11/index.vue
View File

@@ -1,16 +0,0 @@
<template>
<div>
<el-input v-model="val" placeholder="menu11：请输入内容测试路由缓存"></el-input>
</div>
</template>
<script>
export default {
name: 'menu11',
data() {
return {
val: '',
};
},
};
</script>

16
src/views/menu/menu1/menu12/menu121/index.vue
View File

@@ -1,16 +0,0 @@
<template>
<div>
<el-input v-model="val" placeholder="menu121：请输入内容测试路由缓存"></el-input>
</div>
</template>
<script>
export default {
name: 'menu121',
data() {
return {
val: '',
};
},
};
</script>

16
src/views/menu/menu1/menu12/menu122/index.vue
View File

@@ -1,16 +0,0 @@
<template>
<div>
<el-input v-model="val" placeholder="menu122：请输入内容测试路由缓存"></el-input>
</div>
</template>
<script>
export default {
name: 'menu122',
data() {
return {
val: '',
};
},
};
</script>

22
src/views/menu/menu1/menu13/index.vue
View File

@@ -1,22 +0,0 @@
<template>
<div>
<el-input v-model="val" placeholder="menu13：请输入内容测试路由缓存"></el-input>
</div>
</template>
<script>
export default {
name: 'menu13',
data() {
return {
val: '',
};
},
mounted() {
console.log(2222);
},
activated() {
console.log(1111);
},
};
</script>

16
src/views/menu/menu2/index.vue
View File

@@ -1,16 +0,0 @@
<template>
<div>
<el-input v-model="val" placeholder="menu2：请输入内容测试路由缓存"></el-input>
</div>
</template>
<script>
export default {
name: 'menu2',
data() {
return {
val: '',
};
},
};
</script>

172
src/views/optionLog/index.vue Normal file
View File

@@ -0,0 +1,172 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input size="default" v-model="state.tableData.param.keyword" placeholder="请输入名称"
style="max-width: 180px"></el-input>
<el-button size="default" type="primary" class="ml10" @click="fetchData()">
<el-icon>
<ele-Search/>
</el-icon>
查询
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60"/>
<el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
<el-table-column prop="operation" label="用户操作" show-overflow-tooltip></el-table-column>
<el-table-column prop="method" label="请求方法" show-overflow-tooltip></el-table-column>
<el-table-column prop="params" label="请求参数" show-overflow-tooltip></el-table-column>
<el-table-column prop="time" label="执行时长(毫秒)" show-overflow-tooltip></el-table-column>
<el-table-column prop="ip" label="IP地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="createDate" label="操作时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)">
查看
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current"
background
:page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
<el-dialog :title="state.dialog.title" :visible.sync="state.dialog.isShowDialog" width="769px">
<div>
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="用户名">
<el-input v-model="state.ruleForm.username" placeholder="请输入账户名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="用户操作">
<el-input v-model="state.ruleForm.operation" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求方法">
<el-input v-model="state.ruleForm.method" placeholder="" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求参数">
<el-input v-model="state.ruleForm.params" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="执行时长(毫秒)">
<el-input v-model="state.ruleForm.time" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="ip地址">
<el-input v-model="state.ruleForm.ip" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="操作时间">
<el-input v-model="state.ruleForm.createDate" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {useOptionLogApi} from '@/api/optionLog';
export default {
name: "user",
data() {
return {
state: {
roleListData: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
current: 1,
limit: 10,
keyword: '',
}
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
ruleForm: {
username: '',
operation: '',
method: '',
params: '',
time: '',
ip: '',
createDate: ''
}
}
}
},
methods: {
fetchData() {
this.state.tableData.loading = true
useOptionLogApi().list(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data.records
this.state.tableData.total = response.data.total
this.state.tableData.loading = false
})
},
onOpenAddOrEdit(type, row) {
this.state.ruleForm = row;
this.state.dialog.title = '查看日志';
this.state.dialog.submitTxt = '查 看';
this.state.dialog.isShowDialog = true;
},
handleSizeChange(pageSize) {
this.state.tableData.data = []
this.state.tableData.param.limit = pageSize
this.fetchData()
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog() {
this.state.dialog.isShowDialog = false;
},
onCancel() {
this.closeDialog();
}
},
computed: {},
created() {
},
mounted() {
this.fetchData()
}
}
</script>
<style scoped>
</style>

249
src/views/role/index.vue Normal file
View File

@@ -0,0 +1,249 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input size="default" v-model="state.tableData.param.keyword" placeholder="请输入名称"
style="max-width: 180px"></el-input>
<el-button size="default" type="primary" class="ml10" @click="fetchData()">
<el-icon>
<ele-Search/>
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddOrEdit('add')">
<el-icon>
<ele-FolderAdd/>
</el-icon>
新增
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60"/>
<el-table-column prop="roleId" label="角色ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
<el-table-column prop="createUserId" label="创建者ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button :disabled="scope.row.username === 'admin'" size="small" text type="primary"
@click="onOpenAddOrEdit('edit', scope.row)"
>修改
</el-button
>
<el-button :disabled="scope.row.username === 'admin'" size="small" text type="primary"
@click="onRowDel(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current"
background
:page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
<el-dialog :title="state.dialog.title" :visible.sync="state.dialog.isShowDialog" width="769px">
<div>
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色名称">
<el-input v-model="state.ruleForm.roleName" placeholder="角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="备注">
<el-input v-model="state.ruleForm.remark" placeholder="备注" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="选择菜单">
<el-tree
:data="state.menuList"
show-checkbox
node-key="menuId"
:default-checked-keys="state.ruleForm.menuIdList"
@check="selectedTree"
:props="state.defaultProps">
</el-tree>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" :loading="state.submitBtn.loading" size="default">{{
state.dialog.submitTxt
}}</el-button>
</span>
</template>
</div>
</el-dialog>
</div>
</template>
<script>
import {roleListApi} from '@/api/role';
import {useMenuApi} from '@/api/menu';
import {Message, MessageBox} from 'element-ui';
export default {
name: "role",
data() {
return {
state: {
tableData: {
data: [],
total: 0,
loading: false,
param: {
current: 1,
limit: 10,
keyword: '',
}
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
ruleForm: {
roleId: '', // 角色ID
roleName: '', // 角色名称
remark: '', // 备注
menuIdList: []
},
menuList: [],
defaultProps: {
children: 'children',
label: 'title'
},
submitBtn: {
loading: false,
type:''
}
}
}
},
methods: {
initMenu() {
useMenuApi().list({}).then(response => {
this.state.menuList = response.data
})
},
fetchData() {
this.state.ruleForm = {}
this.state.tableData.loading = true
roleListApi().list(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data.records
this.state.tableData.total = response.data.total
this.state.tableData.loading = false
})
},
onOpenAddOrEdit(type, row) {
if (type === 'edit') {
console.log(row)
this.state.submitBtn.type = 'edit';
this.state.ruleForm.menuIdList = []
this.state.ruleForm = row;
this.state.dialog.title = '修改角色';
this.state.dialog.submitTxt = '修 改';
} else {
this.state.submitBtn.type = 'add';
this.state.ruleForm = {
roleId: '', // 角色ID
roleName: '', // 角色名称
remark: '', // 备注
menuIdList: []
};
this.state.dialog.title = '新增角色';
this.state.dialog.submitTxt = '新 增';
}
this.state.dialog.isShowDialog = true;
},
onRowDel(row) {
MessageBox.confirm(`此操作将永久删除角色：“${row.roleName}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.deleteInfo(row)
}).catch(() => {
});
},
handleSizeChange(pageSize) {
this.state.tableData.data = []
this.state.tableData.param.limit = pageSize
this.fetchData()
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog() {
this.state.dialog.isShowDialog = false;
},
onCancel() {
this.closeDialog();
},
onSubmit() {
this.state.submitBtn.loading = true;
if(this.state.submitBtn.type === 'edit'){
roleListApi().update(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
}else {
roleListApi().add(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
}
},
deleteInfo(row){
roleListApi().delete(row).then(response => {
Message.success('删除成功');
this.fetchData()
}).catch(() => {
this.fetchData()
})
},
selectedTree(node, selected) {
this.state.ruleForm.menuIdList = selected.checkedKeys;
}
},
computed: {},
created() {
},
mounted() {
this.fetchData()
this.initMenu()
}
}
</script>
<style scoped>
</style>

259
src/views/user/index.vue Normal file
View File

@@ -0,0 +1,259 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input size="default" v-model="state.tableData.param.keyword" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
<el-button size="default" type="primary" class="ml10" @click="fetchData()">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddOrEdit('add')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增用户
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="userId" label="用户ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
<el-table-column prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button :disabled="scope.row.username === 'admin'" size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)"
>修改</el-button
>
<el-button :disabled="scope.row.username === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current"
background
:page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
<el-dialog :title="state.dialog.title" :visible.sync="state.dialog.isShowDialog" width="769px">
<div>
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="账户名称">
<el-input v-model="state.ruleForm.username" placeholder="请输入账户名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="账户密码">
<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="手机号">
<el-input v-model="state.ruleForm.mobile" placeholder="请输入手机号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="邮箱">
<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="用户状态">
<el-switch v-model="state.ruleForm.userStatus" inline-prompt active-text="启" inactive-text="禁"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="选择角色">
<el-select v-model="state.ruleForm.roleIdList" multiple placeholder="请选择">
<el-option
v-for="item in state.roleListData"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" :loading="state.submitBtn.loading" size="default">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</div>
</el-dialog>
</div>
</template>
<script>
import { useListApi } from '@/api/user';
import { roleListApi } from '@/api/role';
import { Message, MessageBox } from 'element-ui';
export default {
name: "user",
data() {
return {
state: {
roleListData:[],
tableData: {
data: [],
total: 0,
loading: false,
param: {
current: 1,
limit: 10,
keyword: '',
}
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
ruleForm: {
userId: '', // 账户名称
username: '', // 账户名称
mobile: '', // 手机号
email: '', // 邮箱
password: '', // 账户密码
status: 1, // 用户状态
userStatus: true, // 用户状态
roleIdList: [] // 角色
},
submitBtn: {
loading: false,
type:''
}
}
}
},
methods: {
initRoleData() {
roleListApi().select().then(response => {
this.state.roleListData = response.data
})
},
fetchData() {
this.state.tableData.loading = true
useListApi().list(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data.records
this.state.tableData.total = response.data.total
this.state.tableData.loading = false
})
},
onOpenAddOrEdit(type,row){
if (type === 'edit') {
this.state.submitBtn.type = 'edit';
this.state.ruleForm = row;
this.state.ruleForm.userStatus = row.status === 1 ? true : false;
this.state.dialog.title = '修改用户';
this.state.dialog.submitTxt = '修 改';
} else {
this.state.ruleForm = {
userId: '', // 账户名称
username: '', // 账户名称
mobile: '', // 手机号
email: '', // 邮箱
password: '', // 账户密码
status: 1, // 用户状态
userStatus: true // 用户状态
};
this.state.submitBtn.type = 'add';
this.state.dialog.title = '新增用户';
this.state.dialog.submitTxt = '新 增';
}
this.state.dialog.isShowDialog = true;
},
onRowDel(row){
MessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.deleteInfo(row)
}).catch(() => {});
},
deleteInfo(row){
useListApi().delete(row).then(response => {
Message.success('删除成功');
this.fetchData()
}).catch(() => {
this.fetchData()
})
},
handleSizeChange(pageSize) {
this.state.tableData.data = []
this.state.tableData.param.limit = pageSize
this.fetchData()
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog(){
this.state.dialog.isShowDialog = false;
},
onCancel(){
this.closeDialog();
},
onSubmit(){
this.state.submitBtn.loading = true;
if(this.state.submitBtn.type === 'edit'){
useListApi().update(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
}else {
useListApi().add(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
}
}
},
computed: {
},
created(){
},
mounted(){
this.fetchData()
this.initRoleData()
}
}
</script>
<style scoped>
</style>

19
vue.config.js
View File

@@ -1,21 +1,24 @@
const url = 'http://localhost:8080'
module.exports = {
publicPath: './',
outputDir: 'ui',
assetsDir: 'static',
productionSourceMap: false,
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
lintOnSave: false,
devServer: {
open: process.env.VUE_APP_OPEN === 'false' ? false : true, // 自动打开浏览器
host: '0.0.0.0', // 真机模拟，使用
port: process.env.VUE_APP_PORT, // 前台代理端口号
open: false, // 自动打开浏览器
port: 9999, // 前台代理端口号
https: false, // https： {type: Booleam}
hotOnly: false, // 热更新
proxy: {
// 设置代理
'/gitee': {
target: 'https://gitee.com',
ws: true,
'/': {
target: url,
ws: false,
secure: false,
changeOrigin: true,
pathRewrite: {
'^/gitee': '',
'^/': '',
},
},
},