kuailexs/x-springboot-ui
1
0
Fork 0
mirror of https://github.com/yzcheng90/x-springboot-ui synced 2025-11-08 00:25:41 +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 * @author czx
* @email object_czx@163.com * @email object_czx@163.com
* @date 2023-01-22 17:15:11 * @date 2023-01-26 20:32:33
*/ */
export function useApkApi() { export function useApkApi() {
return { return {
list: (params) => { list: (params) => {
return request({ return request({
url: '/sys/apk/list', url: '/apk/version/list',
method: 'get', method: 'get',
params params
}); });
}, },
add: (params) => { add: (params) => {
return request({ return request({
url: '/sys/apk/save', url: '/apk/version/save',
method: 'post', method: 'post',
data: params data: params
}); });
}, },
update: (params) => { update: (params) => {
return request({ return request({
url: '/sys/apk/update', url: '/apk/version/update',
method: 'post', method: 'post',
data: params data: params
}); });
}, },
delete: (params) => { delete: (params) => {
return request({ return request({
url: '/sys/apk/delete', url: '/apk/version/delete',
method: 'post', method: 'post',
data: params data: params
}); });
} }
}; };

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

@@ -41,6 +41,13 @@ export function useMenuApi() {
method: 'get', method: 'get',
params 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> <template>
<div class="layout-footer mt15"> <div class="layout-footer mt15">
<div class="layout-footer-warp"> <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 class="mt5">{{ $t('message.login.copyright.one5') }}</div>
</div> </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"> <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i> <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
</div> </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"> <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
<i <i
class="iconfont" class="iconfont"
@@ -54,10 +44,6 @@
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item> <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-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@@ -68,14 +54,13 @@
<script> <script>
import screenfull from 'screenfull'; import screenfull from 'screenfull';
import { Session, Local } from '@/utils/storage.js'; import { Session, Local } from '@/utils/storage.js';
import UserNews from '@/layout/navBars/breadcrumb/userNews.vue';
import Search from '@/layout/navBars/breadcrumb/search.vue'; import Search from '@/layout/navBars/breadcrumb/search.vue';
import { useLoginApi } from '@/api/login'; import { useLoginApi } from '@/api/login';
import {Message} from "element-ui"; import {Message} from "element-ui";
export default { export default {
name: 'layoutBreadcrumbUser', name: 'layoutBreadcrumbUser',
components: { UserNews, Search }, components: { Search },
data() { data() {
return { return {
isScreenfull: false, isScreenfull: false,
@@ -200,8 +185,6 @@ export default {
}).then(() => { }).then(() => {
}).catch(() => {}); }).catch(() => {});
} else if (path === 'wareHouse') {
window.open('https://github.com/yzcheng90/x-springboot');
} else { } else {
this.$router.push(path); this.$router.push(path);
} }

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

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

2
src/utils/request.js
View File

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

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

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

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

@@ -26,16 +26,16 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
class="mt15" class="mt15"
:pager-count="5" :pager-count="5"
:page-sizes="[10, 20, 30]" :page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current" :current-page="state.tableData.param.current"
background background
:page-size="state.tableData.param.limit" :page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total" :total="state.tableData.total"
> >
</el-pagination> </el-pagination>
</el-card> </el-card>
@@ -89,9 +89,14 @@
<el-input v-model="state.ruleForm.filePath"></el-input> <el-input v-model="state.ruleForm.filePath"></el-input>
</el-form-item> </el-form-item>
</el-col> </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-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="前台项目目录"> <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-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -119,113 +124,114 @@
</template> </template>
<script> <script>
import {useCodeGenApi} from '@/api/code'; import {useCodeGenApi} from '@/api/code';
export default { export default {
name: "user", name: "user",
data() { data() {
return { return {
state: { state: {
roleListData: [], roleListData: [],
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
current: 1, current: 1,
limit: 10, limit: 10,
keyword: '', 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) { methods: {
console.log(row) fetchData() {
this.state.ruleForm.tableName = row.tableName; this.state.tableData.loading = true
this.state.dialog.title = '生成配置'; useCodeGenApi().list(this.state.tableData.param).then(response => {
this.state.dialog.submitTxt = '配 置'; this.state.tableData.data = response.data.records
this.state.dialog.isShowDialog = true; this.state.tableData.total = response.data.total
}, this.state.tableData.loading = false
onSubmit() { })
if(!this.state.ruleForm.tableName){ },
this.$message('先选择表再操作'); onOpenAddOrEdit(type, row) {
return; console.log(row)
} this.state.ruleForm.tableName = row.tableName;
this.state.submitBtn.loading = true; this.state.dialog.title = '生成配置';
useCodeGenApi().create(this.state.ruleForm).then(response => { this.state.dialog.submitTxt = '配 置';
this.$message('代码生成成功！'); this.state.dialog.isShowDialog = true;
this.state.submitBtn.loading = false; },
this.closeDialog(); 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() 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) { computed: {},
this.state.tableData.data = [] created() {
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() { mounted() {
this.fetchData() this.fetchData()
}
} }
}
</script> </script>
<style scoped> <style scoped>
</style> </style>

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

@@ -19,7 +19,7 @@
<el-col :span="24"> <el-col :span="24">
<el-col :xs="12" :sm="12" :md="8" class="right-l-v"> <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label">昵称：</div> <div class="right-label">昵称：</div>
<div class="right-value">小柒</div> <div class="right-value">{{userInfo.name}}</div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :md="16" class="right-l-v"> <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label">身份：</div> <div class="right-label">身份：</div>
@@ -29,7 +29,7 @@
<el-col :span="24" class="mt5"> <el-col :span="24" class="mt5">
<el-col :xs="12" :sm="12" :md="8" class="right-l-v"> <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label one-text-overflow">IP：</div> <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>
<el-col :xs="12" :sm="12" :md="16" class="right-l-v"> <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label one-text-overflow">时间：</div> <div class="right-label one-text-overflow">时间：</div>
@@ -69,7 +69,7 @@
<el-card shadow="hover"> <el-card shadow="hover">
<div slot="header"> <div slot="header">
<span>{{ $t('message.card.title4') }}</span> <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> </div>
<el-row :gutter="15" class="home-recommend-row"> <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"> <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) { onNewsInfoListClick(v) {
window.open(v.link); window.open(v.link);
}, },
// 跳转到 gitee // 跳转到 github
onOpenGitee() { onOpenGithub() {
window.open('https://gitee.com/lyt-top/vue-next-admin'); window.open('https://github.com/yzcheng90/x-springboot-ui');
}, },
}, },
watch: { watch: {

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

@@ -56,29 +56,9 @@ export const chartsRightList = [
export const newsInfoList = [ export const newsInfoList = [
{ {
title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本', title: '[发布] 2023年01月22日发布基于1.0版本',
date: '02/28', date: '01/22',
link: 'https://gitee.com/lyt-top/vue-next-admin', link: 'https://github.com/yzcheng90/x-springboot-ui',
},
{
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',
}, },
]; ];

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

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

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

@@ -429,13 +429,12 @@ export default {
this.state.dialog.isShowDialog = true; this.state.dialog.isShowDialog = true;
}, },
onRowDel(row){ onRowDel(row){
MessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', { MessageBox.confirm(`此操作将永久删除名称：“${row.title}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}).then(() => { }).then(() => {
this.fetchData() this.deleteInfo(row);
Message.success('删除成功');
}).catch(() => {}); }).catch(() => {});
}, },
onSelectIframeChange(){ onSelectIframeChange(){
@@ -463,7 +462,18 @@ export default {
}, },
onSubmit(){ onSubmit(){
} },
deleteInfo(row) {
let param = {
menuId: row.menuId
};
useMenuApi().delete(param).then(response => {
Message.success('删除成功');
this.fetchData()
}).catch(() => {
this.fetchData()
})
},
}, },
computed: { computed: {
@@ -510,4 +520,4 @@ export default {
overflow-x: hidden; 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="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="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="remark" 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 prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200"> <el-table-column label="操作" width="200">
<template #default="scope"> <template #default="scope">
@@ -38,16 +38,16 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
class="mt15" class="mt15"
:pager-count="5" :pager-count="5"
:page-sizes="[10, 20, 30]" :page-sizes="[10, 20, 30]"
:current-page="state.tableData.param.current" :current-page="state.tableData.param.current"
background background
:page-size="state.tableData.param.limit" :page-size="state.tableData.param.limit"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total" :total="state.tableData.total"
> >
</el-pagination> </el-pagination>
</el-card> </el-card>
@@ -70,12 +70,13 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="选择菜单"> <el-form-item label="选择菜单">
<el-tree <el-tree
:data="state.menuList" :data="state.menuList"
show-checkbox show-checkbox
node-key="menuId" node-key="menuId"
:default-checked-keys="state.ruleForm.menuIdList" :default-checked-keys="state.ruleForm.menuIdList"
@check="selectedTree" @check="selectedTree"
:props="state.defaultProps"> :check-strictly="true"
:props="{children: 'children',label: 'title'}">
</el-tree> </el-tree>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -95,155 +96,151 @@
</template> </template>
<script> <script>
import {roleListApi} from '@/api/role'; import {roleListApi} from '@/api/role';
import {useMenuApi} from '@/api/menu'; import {useMenuApi} from '@/api/menu';
import {Message, MessageBox} from 'element-ui'; import {Message, MessageBox} from 'element-ui';
export default { export default {
name: "role", name: "role",
data() { data() {
return { return {
state: { state: {
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
current: 1, current: 1,
limit: 10, limit: 10,
keyword: '', 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() { methods: {
this.state.ruleForm = {} initMenu() {
this.state.tableData.loading = true useMenuApi().list({}).then(response => {
roleListApi().list(this.state.tableData.param).then(response => { this.state.menuList = response.data
this.state.tableData.data = response.data.records })
this.state.tableData.total = response.data.total },
this.state.tableData.loading = false fetchData() {
}) this.state.ruleForm = {}
}, this.state.tableData.loading = true
onOpenAddOrEdit(type, row) { roleListApi().list(this.state.tableData.param).then(response => {
if (type === 'edit') { this.state.tableData.data = response.data.records
console.log(row) this.state.tableData.total = response.data.total
this.state.submitBtn.type = 'edit'; this.state.tableData.loading = false
this.state.ruleForm.menuIdList = [] })
this.state.ruleForm = row; },
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.title = '修改角色';
this.state.dialog.submitTxt = '修 改'; this.state.dialog.submitTxt = '修 改';
} else { } else {
this.state.submitBtn.type = 'add'; this.state.submitBtn.type = 'add';
this.state.ruleForm = { this.state.ruleForm = {
roleId: '', // 角色ID roleId: '', // 角色ID
roleName: '', // 角色名称 roleName: '', // 角色名称
remark: '', // 备注 remark: '', // 备注
menuIdList: [] menuIdList: []
}; };
this.state.dialog.title = '新增角色'; this.state.dialog.title = '新增角色';
this.state.dialog.submitTxt = '新 增'; this.state.dialog.submitTxt = '新 增';
} }
this.state.dialog.isShowDialog = true; this.state.dialog.isShowDialog = true;
}, },
onRowDel(row) { onRowDel(row) {
MessageBox.confirm(`此操作将永久删除角色：“${row.roleName}”，是否继续?`, '提示', { MessageBox.confirm(`此操作将永久删除角色：“${row.roleName}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}).then(() => { }).then(() => {
this.deleteInfo(row) this.deleteInfo(row)
}).catch(() => { }).catch(() => {
}); });
}, },
handleSizeChange(pageSize) { handleSizeChange(pageSize) {
this.state.tableData.data = [] this.state.tableData.data = []
this.state.tableData.param.limit = pageSize this.state.tableData.param.limit = pageSize
this.fetchData() this.fetchData()
}, },
handleCurrentChange(current) { handleCurrentChange(current) {
this.state.tableData.data = [] this.state.tableData.data = []
this.state.tableData.param.current = current this.state.tableData.param.current = current
this.fetchData() this.fetchData()
}, },
closeDialog() { closeDialog() {
this.state.dialog.isShowDialog = false; this.state.dialog.isShowDialog = false;
}, },
onCancel() { onCancel() {
this.closeDialog(); this.closeDialog();
}, },
onSubmit() { onSubmit() {
this.state.submitBtn.loading = true; this.state.submitBtn.loading = true;
if(this.state.submitBtn.type === 'edit'){ if(this.state.submitBtn.type === 'edit'){
roleListApi().update(this.state.ruleForm).then(response => { roleListApi().update(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false; this.state.submitBtn.loading = false;
this.closeDialog(); 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() this.fetchData()
}).catch(() => { }).catch(() => {
this.state.submitBtn.loading = false
})
}else {
roleListApi().add(this.state.ruleForm).then(response => {
this.state.submitBtn.loading = false;
this.closeDialog();
this.fetchData() this.fetchData()
}).catch(() => {
this.state.submitBtn.loading = false
}) })
},
selectedTree(node, selected) {
this.state.ruleForm.menuIdList = selected.checkedKeys;
} }
}, },
deleteInfo(row){ computed: {},
roleListApi().delete(row).then(response => { created() {
Message.success('删除成功');
this.fetchData()
}).catch(() => {
this.fetchData()
})
},
selectedTree(node, selected) {
this.state.ruleForm.menuIdList = selected.checkedKeys;
}
},
computed: {},
created() {
}, },
mounted() { mounted() {
this.fetchData() this.fetchData()
this.initMenu() this.initMenu()
}
} }
}
</script> </script>
<style scoped> <style scoped>
</style> </style>

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

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