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:
yzcheng90
2023-01-29 14:36:31 +08:00
parent e471a4a568
commit 230614b74c
15 changed files with 16788 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15739
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
src/api/apk/index.js
View File

@@ -5,36 +5,36 @@ import request from '@/utils/request';
*
* @author czx
* @email object_czx@163.com
* @date 2023-01-22 17:15:11
* @date 2023-01-26 20:32:33
*/
export function useApkApi() {
return {
list: (params) => {
return request({
url: '/sys/apk/list',
url: '/apk/version/list',
method: 'get',
params
});
},
add: (params) => {
return request({
url: '/sys/apk/save',
method: 'post',
data: params
url: '/apk/version/save',
method: 'post',
data: params
});
},
update: (params) => {
return request({
url: '/sys/apk/update',
method: 'post',
data: params
url: '/apk/version/update',
method: 'post',
data: params
});
},
delete: (params) => {
return request({
url: '/sys/apk/delete',
method: 'post',
data: params
url: '/apk/version/delete',
method: 'post',
data: params
});
}
};

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

@@ -41,6 +41,13 @@ export function useMenuApi() {
method: 'get',
params
});
}
},
delete: (params) => {
return request({
url: '/sys/menu/delete',
method: 'post',
data: params
});
},
};
}

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

@@ -1,7 +1,7 @@
<template>
<div class="layout-footer mt15">
<div class="layout-footer-warp">
<div>vue-prev-admin，Made by lyt with ❤️</div>
<div>任务管理平台 后台管理系统 ️</div>
<div class="mt5">{{ $t('message.login.copyright.one5') }}</div>
</div>
</div>

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

@@ -29,16 +29,6 @@
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon">
<el-popover placement="bottom" trigger="click" v-model="isShowUserNewsPopover" :width="300" popper-class="el-popover-pupop-user-news">
<el-badge :is-dot="true" @click.stop="isShowUserNewsPopover = !isShowUserNewsPopover" slot="reference">
<i class="el-icon-bell" :title="$t('message.user.title4')"></i>
</el-badge>
<transition name="el-zoom-in-top">
<UserNews v-show="isShowUserNewsPopover" />
</transition>
</el-popover>
</div>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
<i
class="iconfont"
@@ -54,10 +44,6 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>
<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -68,14 +54,13 @@
<script>
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 },
components: { Search },
data() {
return {
isScreenfull: false,
@@ -200,8 +185,6 @@ export default {
}).then(() => {
}).catch(() => {});
} else if (path === 'wareHouse') {
window.open('https://github.com/yzcheng90/x-springboot');
} else {
this.$router.push(path);
}

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

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

2
src/utils/request.js
View File

@@ -59,7 +59,7 @@ service.interceptors.response.use(
} else if (error.message == 'Network Error') {
Message.error('网络连接错误');
} else {
Message.error(error.response.data.message);
Message.error(error.message);
}
return Promise.reject(error);
}

321
src/views/apk/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="system-user-container layout-padding">
<div class="system-user-container layout-padding" v-loading.fullscreen.lock="state.fullscreenLoading">
<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="请输入名称"
@@ -10,33 +10,45 @@
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddOrEdit('add')">
<el-button size="default" type="success" class="ml10" @click="showUploadDialog()">
<el-icon>
<ele-FolderAdd/>
</el-icon>
新增
上传APK
</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">
<el-table-column prop="updateContent" label="更新内容" show-overflow-tooltip></el-table-column>
<el-table-column prop="appName" label="APP名" 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="fileName" label="文件名" show-overflow-tooltip></el-table-column>
<el-table-column prop="md5Value" label="MD5值" show-overflow-tooltip></el-table-column>
<el-table-column prop="fileSize" label="文件大小" show-overflow-tooltip></el-table-column>
<el-table-column prop="isForce" label="强制安装" show-overflow-tooltip>
<template #default="scope">
<el-tag type="primary" v-if="scope.row.isForce == 0">是</el-tag>
<el-tag type="info" v-else>否</el-tag>
</template>
</el-table-column>
<el-table-column prop="isIgnorable" label="忽略该版本" show-overflow-tooltip>
<template #default="scope">
<el-tag type="primary" v-if="scope.row.isIgnorable == 0">是</el-tag>
<el-tag type="info" v-else>否</el-tag>
</template>
</el-table-column>
<el-table-column prop="isSilent" label="静默下载" show-overflow-tooltip>
<template #default="scope">
<el-tag type="primary" v-if="scope.row.isSilent == 0">是</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="100">
<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>
@@ -55,119 +67,111 @@
>
</el-pagination>
</el-card>
<el-dialog title="上传APK" :visible.sync="state.dialog.isShowUploadDialog" width="400px">
<el-upload
class="upload-demo"
drag
list-type="apk"
action="/sys/oss/upload/apk"
:on-success="apkUploadSuccess"
:on-progress="apkUploading"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传APK文件，且不超过100MB</div>
</el-upload>
</el-dialog>
<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-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="120px">
<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-input disabled 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 label="包名">
<el-input disabled v-model="state.ruleForm.packageName" placeholder="包名" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="版本码">
<el-input disabled v-model="state.ruleForm.versionCode" 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 disabled 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 disabled v-model="state.ruleForm.downloadUrl" 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.fileName" placeholder="文件名" clearable></el-input>
<el-input disabled v-model="state.ruleForm.fileName" placeholder="文件名" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<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 disabled v-model="state.ruleForm.md5Value" placeholder="MD5值" 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.fileSize" placeholder="文件大小" clearable></el-input>
<el-input disabled v-model="state.ruleForm.fileSize" placeholder="文件大小" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<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 label="强制安装">
<el-radio-group v-model="state.ruleForm.isForce">
<el-radio-button :label="0">是</el-radio-button>
<el-radio-button :label="1">否</el-radio-button>
</el-radio-group>
</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 label="可忽略该版本">
<el-radio-group v-model="state.ruleForm.isIgnorable">
<el-radio-button :label="0">是</el-radio-button>
<el-radio-button :label="1">否</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<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 label="静默下载">
<el-radio-group v-model="state.ruleForm.isSilent">
<el-radio-button :label="0">是</el-radio-button>
<el-radio-button :label="1">否</el-radio-button>
</el-radio-group>
</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-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="更新内容">
<el-input v-model="state.ruleForm.updateContent" type="textarea" :rows="3" 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>
</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>
<el-button type="primary" @click="onSubmit" :loading="state.submitBtn.loading" size="default">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</div>
@@ -176,7 +180,7 @@
</template>
<script>
import { useApkApi } from '@/api/apk';
import {useApkApi} from '@/api/apk';
import {Message, MessageBox} from 'element-ui';
export default {
@@ -184,6 +188,7 @@
data() {
return {
state: {
fullscreenLoading: false,
tableData: {
data: [],
total: 0,
@@ -195,31 +200,29 @@
}
},
dialog: {
isShowUploadDialog: false,
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
ruleForm: {
updateContent: '', // 更新内容
versionCode: '', // 版本码
versionName: '', // 版本号
packageName: '', // 包名
downloadUrl: '', // 下载地址
appName: '', // APP名
md5Value: '', // MD5值
fileName: '', // 文件名
fileSize: '', // 文件大小
createTime: '', // 创建时间
updateTime: '', // 修改时间
userId: '', // 上传人
isForce: '', // 是否强制安装
isIgnorable: '', // 是否可忽略该版本
isSilent: '', // 是否静默下载
},
updateContent: '', // 更新内容
versionCode: '', // 版本码
versionName: '', // 版本号
packageName: '', // 包名
downloadUrl: '', // 下载地址
appName: '', // APP名
md5Value: '', // MD5值
fileName: '', // 文件名
fileSize: 0, // 文件大小
isForce: 0, // 是否强制安装
isIgnorable: 1, // 是否可忽略该版本
isSilent: 0, // 是否静默下载
},
submitBtn: {
loading: false,
type:''
type: ''
}
}
}
@@ -234,38 +237,43 @@
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 = '新 增';
showUploadDialog(){
this.state.dialog.isShowUploadDialog = true;
},
apkUploading(event, file, fileList){
this.state.fullscreenLoading = true;
},
apkUploadSuccess(response, file, fileList){
console.log(response)
this.state.fullscreenLoading = false;
if(response.code == 0){
this.onOpenAddOrEdit(response.data);
}else {
Message.error(response.msg);
}
},
onOpenAddOrEdit(data) {
this.state.submitBtn.type = 'add';
this.state.ruleForm = {
updateContent: '', // 更新内容
versionCode: data.versionCode, // 版本码
versionName: data.versionName, // 版本号
packageName: data.packageName, // 包名
downloadUrl: data.downloadUrl, // 下载地址
appName: data.appName, // APP名
md5Value: data.md5Value, // MD5值
fileName: data.fileName, // 文件名
fileSize: data.fileSize, // 文件大小
isForce: 0, // 是否强制安装
isIgnorable: 1, // 是否可忽略该版本
isSilent: 0, // 是否静默下载
};
this.state.dialog.title = '上传APK';
this.state.dialog.submitTxt = '新 增';
this.state.dialog.isShowDialog = true;
},
onRowDel(row) {
MessageBox.confirm(`此操作将永久删除${column.columnComment}：“${row.roleName}”，是否继续?`, '提示', {
MessageBox.confirm(`此操作将永久删除，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
@@ -286,31 +294,22 @@
},
closeDialog() {
this.state.dialog.isShowDialog = false;
this.state.dialog.isShowUploadDialog = 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
})
}
useApkApi().add(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
})
},
deleteInfo(row){
deleteInfo(row) {
useApkApi().delete(row).then(response => {
Message.success('删除成功');
this.fetchData()
@@ -331,4 +330,4 @@
<style scoped>
</style>
</style>

222
src/views/code/index.vue
View File

@@ -26,16 +26,16 @@
</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"
@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>
@@ -89,9 +89,14 @@
<el-input v-model="state.ruleForm.filePath"></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="是否生成UI页面">
<el-switch v-model="state.ruleForm.genUi"></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-input v-model="state.ruleForm.uiFilePath"></el-input>
<el-input :disabled="!state.ruleForm.genUi" 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">
@@ -119,113 +124,114 @@
</template>
<script>
import {useCodeGenApi} from '@/api/code';
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: '',
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: "E:\\github\\X-SpringBoot",
uiFilePath: "E:\\github\\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,
genUi: true
},
submitBtn: {
loading: false,
type:''
}
},
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();
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()
}).catch(() => {
this.state.submitBtn.loading = false
})
},
handleCurrentChange(current) {
this.state.tableData.data = []
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog() {
this.state.dialog.isShowDialog = false;
},
onCancel() {
this.closeDialog();
}
},
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() {
computed: {},
created() {
},
mounted() {
this.fetchData()
},
mounted() {
this.fetchData()
}
}
}
</script>
<style scoped>
</style>
</style>

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

@@ -19,7 +19,7 @@
<el-col :span="24">
<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label">昵称：</div>
<div class="right-value">小柒</div>
<div class="right-value">{{userInfo.name}}</div>
</el-col>
<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label">身份：</div>
@@ -29,7 +29,7 @@
<el-col :span="24" class="mt5">
<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label one-text-overflow">IP：</div>
<div class="right-value one-text-overflow">192.168.1.1</div>
<div class="right-value one-text-overflow">{{userInfo.loginIp}}</div>
</el-col>
<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label one-text-overflow">时间：</div>
@@ -69,7 +69,7 @@
<el-card shadow="hover">
<div slot="header">
<span>{{ $t('message.card.title4') }}</span>
<el-button class="home-card-more" type="text" @click="onOpenGitee">{{ $t('message.card.title5') }}</el-button>
<el-button class="home-card-more" type="text" @click="onOpenGithub">{{ $t('message.card.title5') }}</el-button>
</div>
<el-row :gutter="15" class="home-recommend-row">
<el-col :sm="24" :md="12" :lg="6" :xl="6" v-for="(v, k) in recommendList" :key="k">
@@ -371,9 +371,9 @@ export default {
onNewsInfoListClick(v) {
window.open(v.link);
},
// 跳转到 gitee
onOpenGitee() {
window.open('https://gitee.com/lyt-top/vue-next-admin');
// 跳转到 github
onOpenGithub() {
window.open('https://github.com/yzcheng90/x-springboot-ui');
},
},
watch: {

26
src/views/home/mock.js
View File

@@ -56,29 +56,9 @@ export const chartsRightList = [
export const newsInfoList = [
{
title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本',
date: '02/28',
link: 'https://gitee.com/lyt-top/vue-next-admin',
},
{
title: '[发布] 2021年04月15日发布 vue2.x + webpack 重构版本',
date: '04/15',
link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
},
{
title: '[重构] 2021年04月10日 重构 vue2.x + webpack v1.0.0 版本',
date: '04/10',
link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
},
{
title: '[预览] 2020年12月08日，基于 vue3.x 版本后台模板的预览',
date: '12/08',
link: 'http://lyt-top.gitee.io/vue-next-admin-preview/#/login',
},
{
title: '[预览] 2020年11月15日，基于 vue2.x 版本后台模板的预览',
date: '11/15',
link: 'https://lyt-top.gitee.io/vue-prev-admin-preview/#/login',
title: '[发布] 2023年01月22日发布基于1.0版本',
date: '01/22',
link: 'https://github.com/yzcheng90/x-springboot-ui',
},
];

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

@@ -1,333 +1,359 @@
<template>
<div class="login">
<div class="login-weaper">
<div class="login-left">
<div class="login-time">{{ time.txt }}</div>
<div class="login-left-box">
<div>
<div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
<h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
<div class="msg">
<div class="msg-author">
<span>{{ quotations.name }}</span>
<span>{{ quotations.comeFrom }}</span>
</div>
<div class="msg-txt">{{ quotations.content }}</div>
</div>
</div>
</div>
</div>
<div class="login-right">
<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-input
type="text"
:placeholder="$t('message.login.placeholder1')"
prefix-icon="el-icon-user"
v-model="ruleForm.username"
clearable
autocomplete="off"
>
</el-input>
</el-form-item>
<el-form-item style="margin-left: 0px" prop="password">
<el-input
type="password"
:placeholder="$t('message.login.placeholder2')"
prefix-icon="el-icon-lock"
v-model="ruleForm.password"
autocomplete="off"
:show-password="true"
>
</el-input>
</el-form-item>
<el-form-item style="margin-left: 0px" prop="captcha">
<div class="el-row" span="24">
<div class="el-col el-col-14">
<el-input
type="text"
maxlength="5"
:placeholder="$t('message.login.placeholder3')"
prefix-icon="el-icon-position"
v-model="ruleForm.captcha"
clearable
autocomplete="off"
></el-input>
</div>
<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>
</el-form-item>
<el-form-item style="margin: 40px 0px 0">
<el-button type="primary" class="login-submit" @click="submitForm" :loading="submit.loading">
<span>{{ $t('message.login.btnText') }}</span>
</el-button>
</el-form-item>
</el-form>
<div class="login-menu">
<a href="javascript:;">{{ $t('message.login.link.one1') }}</a>
<a href="javascript:;">{{ $t('message.login.link.one2') }}</a>
</div>
</div>
</div>
</div>
<div class="vue-particles">
<vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push" style="height: 100%"></vue-particles>
</div>
</div>
<div class="login">
<div class="login-weaper">
<div class="login-left">
<div class="login-time">{{ time.txt }}</div>
<div class="login-left-box">
<div>
<div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
<h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
<div class="msg">
<div class="msg-author">
<span>{{ quotations.name }}</span>
<span>{{ quotations.comeFrom }}</span>
</div>
<div class="msg-txt">{{ quotations.content }}</div>
</div>
</div>
</div>
</div>
<div class="login-right">
<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-input
type="text"
:placeholder="$t('message.login.placeholder1')"
prefix-icon="el-icon-user"
v-model="ruleForm.username"
clearable
autocomplete="off"
>
</el-input>
</el-form-item>
<el-form-item style="margin-left: 0px" prop="password">
<el-input
type="password"
:placeholder="$t('message.login.placeholder2')"
prefix-icon="el-icon-lock"
v-model="ruleForm.password"
autocomplete="off"
:show-password="true"
>
</el-input>
</el-form-item>
<el-form-item style="margin-left: 0px" prop="captcha">
<div class="el-row" span="24">
<div class="el-col el-col-14">
<el-input
type="text"
maxlength="5"
:placeholder="$t('message.login.placeholder3')"
prefix-icon="el-icon-position"
v-model="ruleForm.captcha"
clearable
autocomplete="off"
></el-input>
</div>
<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>
</el-form-item>
<el-form-item style="margin: 40px 0px 0">
<el-button type="primary" class="login-submit" @click="submitForm"
:loading="submit.loading">
<span>{{ $t('message.login.btnText') }}</span>
</el-button>
</el-form-item>
</el-form>
<!-- <div class="login-menu">-->
<!-- <a href="javascript:;">{{ $t('message.login.link.one1') }}</a>-->
<!-- <a href="javascript:;">{{ $t('message.login.link.one2') }}</a>-->
<!-- </div>-->
</div>
</div>
</div>
<div class="vue-particles">
<vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push"
style="height: 100%"></vue-particles>
</div>
</div>
</template>
<script>
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';
import {Session} from '@/utils/storage';
import {formatAxis, formatDate} from '@/utils/formatTime';
import {PrevLoading} from '@/utils/loading.js';
import {quotationsList} from './mock';
import {useLoginApi} from '@/api/login';
export default {
name: 'login',
data() {
return {
quotationsList,
quotations: {},
isView: false,
submit: {
loading: false,
},
ruleForm: {
username: 'admin',
password: 'admin',
captcha: '',
randomStr: Math.floor(Math.random() * 999999999)
},
time: {
txt: '',
fun: null,
},
};
},
computed: {
// 获取当前时间
currentTime() {
return formatAxis(new Date());
},
// 获取布局配置信息
getThemeConfig() {
return this.$store.state.themeConfig.themeConfig;
},
},
created() {
this.initTime();
},
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)];
},
// 初始化左上角时间显示
initTime() {
this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
this.time.fun = setInterval(() => {
this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
}, 1000);
},
// 登录按钮点击
submitForm() {
this.submit.loading = true;
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() {
clearInterval(this.time.fun);
},
};
export default {
name: 'login',
data() {
return {
quotationsList,
quotations: {},
isView: false,
submit: {
loading: false,
},
ruleForm: {
username: 'admin',
password: 'admin',
captcha: '',
randomStr: Math.floor(Math.random() * 999999999)
},
time: {
txt: '',
fun: null,
},
};
},
computed: {
// 获取当前时间
currentTime() {
return formatAxis(new Date());
},
// 获取布局配置信息
getThemeConfig() {
return this.$store.state.themeConfig.themeConfig;
},
},
created() {
this.initTime();
},
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)];
},
// 初始化左上角时间显示
initTime() {
this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
this.time.fun = setInterval(() => {
this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
}, 1000);
},
// 登录按钮点击
submitForm() {
this.submit.loading = true;
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() {
clearInterval(this.time.fun);
},
};
</script>
<style scoped lang="scss">
.login {
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
position: relative;
.vue-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
}
.login-weaper {
margin: auto;
height: 500px;
display: flex;
box-sizing: border-box;
position: relative;
z-index: 1;
border: none;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.login-left {
width: 491px;
padding: 20px;
font-size: 16px;
color: var(--prev-color-text-white);
position: relative;
background-color: var(--prev-color-primary);
display: flex;
flex-direction: column;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
.login-time {
width: 100%;
color: var(--prev-color-text-white);
opacity: 0.9;
font-size: 14px;
overflow: hidden;
}
.login-left-box {
flex: 1;
overflow: hidden;
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding: 80px 45px;
.logo {
font-size: 22px;
margin-bottom: 15px;
}
.title {
color: var(--prev-color-text-white);
font-weight: 300;
letter-spacing: 2px;
font-size: 16px;
}
.msg {
color: var(--prev-color-text-white);
font-size: 13px;
margin-top: 35px;
.msg-author {
opacity: 0.6;
span:last-of-type {
margin-left: 15px;
}
}
.msg-txt {
margin-top: 15px;
line-height: 22px;
}
}
}
}
.login-right {
width: 491px;
padding: 20px;
position: relative;
align-items: center;
display: flex;
background-color: var(--prev-bg-white);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
.login-main {
margin: 0 auto;
width: 70%;
.login-title {
color: var(--prev-color-text-primary);
margin-bottom: 40px;
font-weight: 500;
font-size: 22px;
text-align: center;
letter-spacing: 4px;
}
.login-form {
margin: 10px 0;
i {
color: var(--prev-color-text-primary);
}
.el-form-item {
margin-bottom: 20px !important;
.login-code {
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 0 0 10px;
user-select: none;
.login-code-img {
margin-top: 2px;
width: 120px;
height: 38px;
border: 1px solid var(--prev-border-color-base);
color: var(--prev-color-text-primary);
font-size: 14px;
font-weight: 700;
letter-spacing: 5px;
line-height: 38px;
text-indent: 5px;
text-align: center;
cursor: pointer;
transition: all ease 0.2s;
border-radius: 4px;
&:hover {
border-color: var(--prev-border-color-hover);
transition: all ease 0.2s;
}
}
}
.login-submit {
width: 100%;
letter-spacing: 2px;
}
}
}
.login-menu {
margin-top: 30px;
width: 100%;
text-align: left;
a {
color: var(--prev-color-text-secondary);
font-size: 12px;
margin: 0 8px;
text-decoration: none;
&:hover {
color: var(--prev-color-primary);
text-decoration: underline;
}
}
}
}
}
}
}
.login {
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
position: relative;
.vue-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
}
.login-weaper {
margin: auto;
height: 500px;
display: flex;
box-sizing: border-box;
position: relative;
z-index: 1;
border: none;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.login-left {
width: 491px;
padding: 20px;
font-size: 16px;
color: var(--prev-color-text-white);
position: relative;
background-color: var(--prev-color-primary);
display: flex;
flex-direction: column;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
.login-time {
width: 100%;
color: var(--prev-color-text-white);
opacity: 0.9;
font-size: 14px;
overflow: hidden;
}
.login-left-box {
flex: 1;
overflow: hidden;
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding: 80px 45px;
.logo {
font-size: 22px;
margin-bottom: 15px;
}
.title {
color: var(--prev-color-text-white);
font-weight: 300;
letter-spacing: 2px;
font-size: 16px;
}
.msg {
color: var(--prev-color-text-white);
font-size: 13px;
margin-top: 35px;
.msg-author {
opacity: 0.6;
span:last-of-type {
margin-left: 15px;
}
}
.msg-txt {
margin-top: 15px;
line-height: 22px;
}
}
}
}
.login-right {
width: 491px;
padding: 20px;
position: relative;
align-items: center;
display: flex;
background-color: var(--prev-bg-white);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
.login-main {
margin: 0 auto;
width: 70%;
.login-title {
color: var(--prev-color-text-primary);
margin-bottom: 40px;
font-weight: 500;
font-size: 22px;
text-align: center;
letter-spacing: 4px;
}
.login-form {
margin: 10px 0;
i {
color: var(--prev-color-text-primary);
}
.el-form-item {
margin-bottom: 20px !important;
.login-code {
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 0 0 10px;
user-select: none;
.login-code-img {
margin-top: 2px;
width: 120px;
height: 38px;
border: 1px solid var(--prev-border-color-base);
color: var(--prev-color-text-primary);
font-size: 14px;
font-weight: 700;
letter-spacing: 5px;
line-height: 38px;
text-indent: 5px;
text-align: center;
cursor: pointer;
transition: all ease 0.2s;
border-radius: 4px;
&:hover {
border-color: var(--prev-border-color-hover);
transition: all ease 0.2s;
}
}
}
.login-submit {
width: 100%;
letter-spacing: 2px;
}
}
}
.login-menu {
margin-top: 30px;
width: 100%;
text-align: left;
a {
color: var(--prev-color-text-secondary);
font-size: 12px;
margin: 0 8px;
text-decoration: none;
&:hover {
color: var(--prev-color-primary);
text-decoration: underline;
}
}
}
}
}
}
}
</style>

20
src/views/menu/index.vue
View File

@@ -429,13 +429,12 @@ export default {
this.state.dialog.isShowDialog = true;
},
onRowDel(row){
MessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', {
MessageBox.confirm(`此操作将永久删除名称：“${row.title}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.fetchData()
Message.success('删除成功');
this.deleteInfo(row);
}).catch(() => {});
},
onSelectIframeChange(){
@@ -463,7 +462,18 @@ export default {
},
onSubmit(){
}
},
deleteInfo(row) {
let param = {
menuId: row.menuId
};
useMenuApi().delete(param).then(response => {
Message.success('删除成功');
this.fetchData()
}).catch(() => {
this.fetchData()
})
},
},
computed: {
@@ -510,4 +520,4 @@ export default {
overflow-x: hidden;
}
}
</style>
</style>

299
src/views/role/index.vue
View File

@@ -22,7 +22,7 @@
<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="createUserName" 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">
@@ -38,16 +38,16 @@
</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"
@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>
@@ -70,12 +70,13 @@
<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">
:data="state.menuList"
show-checkbox
node-key="menuId"
:default-checked-keys="state.ruleForm.menuIdList"
@check="selectedTree"
:check-strictly="true"
:props="{children: 'children',label: 'title'}">
</el-tree>
</el-form-item>
</el-col>
@@ -95,155 +96,151 @@
</template>
<script>
import {roleListApi} from '@/api/role';
import {useMenuApi} from '@/api/menu';
import {Message, MessageBox} from 'element-ui';
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: '',
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: [],
submitBtn: {
loading: false,
type:''
}
},
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;
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.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.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
})
},
selectedTree(node, selected) {
this.state.ruleForm.menuIdList = selected.checkedKeys;
}
},
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() {
computed: {},
created() {
},
mounted() {
this.fetchData()
this.initMenu()
},
mounted() {
this.fetchData()
this.initMenu()
}
}
}
</script>
<style scoped>
</style>
</style>

489
src/views/user/index.vue
View File

@@ -1,259 +1,266 @@
<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
<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-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>
</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-radio-group v-model="state.ruleForm.status">
<el-radio-button :label="0">禁用</el-radio-button>
<el-radio-button :label="1">正常</el-radio-button>
</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-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>
<el-button type="primary" @click="onSubmit" :loading="state.submitBtn.loading" size="default">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</div>
</el-dialog>
</div>
</template>
</div>
</el-dialog>
</div>
</template>
<script>
import { useListApi } from '@/api/user';
import { roleListApi } from '@/api/role';
import { Message, MessageBox } from 'element-ui';
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: '',
}
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, // 用户状态
roleIdList: [] // 角色
},
submitBtn: {
loading: false,
type: ''
}
}
}
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
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, // 用户状态
};
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
})
}
}
},
ruleForm: {
userId: '', // 账户名称
username: '', // 账户名称
mobile: '', // 手机号
email: '', // 邮箱
password: '', // 账户密码
status: 1, // 用户状态
userStatus: true, // 用户状态
roleIdList: [] // 角色
computed: {},
created() {
},
submitBtn: {
loading: false,
type:''
mounted() {
this.fetchData()
this.initRoleData()
}
}
}
},
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>
</style>