Skip to content

G
gin-vue-admin

HeliosJ / gin-vue-admin
与 Fork 源项目一致

Fork自 FLIPPED-AURORA / gin-vue-admin

通知 4
Star 0
Fork 0
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 c5932c0a 编写于 作者: Mr.奇淼（'s avatar Mr.奇淼（
浏览文件
操作

增加前端form校验

上级 b6ea56ee
隐藏空白更改
内联 并排
Showing with 241 addition and 177 deletion
QMPlusVuePage/src/main.js
浏览文件 @ c5932c0a
......@@ -3,6 +3,8 @@ import App from './App.vue'
// 引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 全局配置elementui的dialog不能通过点击遮罩层关闭
ElementUI.Dialog.props.closeOnClickModal.default = false
Vue.use(ElementUI);
// 引入封装的router
import router from '@/router/index'
......
QMPlusVuePage/src/view/superAdmin/api/api.vue
浏览文件 @ c5932c0a
......@@ -25,15 +25,14 @@
<el-tag
:key="scope.row.methodFiletr"
:type="scope.row.method|tagTypeFiletr"
size="mini"
effect="dark">
{{scope.row.method|methodFiletr}}
</el-tag>
effect="dark"
size="mini"
>{{scope.row.method|methodFiletr}}</el-tag>
<!-- {{scope.row.method|methodFiletr}} -->
</div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="editApi(scope.row)" size="small" type="text">编辑</el-button>
......@@ -53,11 +52,11 @@
></el-pagination>
<el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="新增Api">
<el-form :inline="true" :model="form" label-width="80px">
<el-form-item label="路径">
<el-form :inline="true" :model="form" :rules="rules" label-width="80px" ref="apiForm">
<el-form-item label="路径" prop="path">
<el-input autocomplete="off" v-model="form.path"></el-input>
</el-form-item>
<el-form-item label="请求">
<el-form-item label="请求" prop="method">
<el-select placeholder="请选择" v-model="form.method">
<el-option
:key="item.value"
......@@ -67,16 +66,14 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="api分组">
<el-form-item label="api分组" prop="group">
<el-input autocomplete="off" v-model="form.group"></el-input>
</el-form-item>
<el-form-item label="api简介">
<el-form-item label="api简介" prop="description">
<el-input autocomplete="off" v-model="form.description"></el-input>
</el-form-item>
</el-form>
<div class="warning">
新增Api需要在角色管理内配置权限才可使用
</div>
<div class="warning">新增Api需要在角色管理内配置权限才可使用</div>
<div class="dialog-footer" slot="footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button @click="enterDialog" type="primary">确 定</el-button>
......@@ -99,27 +96,27 @@ import {
import infoList from '@/components/mixins/infoList'
const methodOptions = [
{
value: 'POST',
label: '创建',
type:'success'
},
{
value: 'GET',
label: '查看',
type:''
},
{
value: 'PUT',
label: '更新',
type:'warning'
},
{
value: 'DELETE',
label: '删除',
type:'danger'
}
]
{
value: 'POST',
label: '创建',
type: 'success'
},
{
value: 'GET',
label: '查看',
type: ''
},
{
value: 'PUT',
label: '更新',
type: 'warning'
},
{
value: 'DELETE',
label: '删除',
type: 'danger'
}
]
export default {
name: 'Api',
......@@ -132,10 +129,21 @@ export default {
form: {
path: '',
group: '',
method: '',
description: ''
},
methodOptions: methodOptions,
type: ''
type: '',
rules: {
path: [{ required: true, message: '请输入api路径', trigger: 'blur' }],
group: [{ required: true, message: '请输入组名称', trigger: 'blur' }],
method: [
{ required: true, message: '请选择请求方式', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入api介绍', trigger: 'blur' }
]
}
}
},
methods: {
......@@ -150,7 +158,7 @@ export default {
path: '',
group: '',
description: '',
method:''
method: ''
}
},
closeDialog() {
......@@ -190,56 +198,60 @@ export default {
})
},
async enterDialog() {
switch (this.type) {
case 'addApi':
{
const res = await createApi(this.form)
if (res.success) {
this.$message({
type: 'success',
message: '添加成功',
showClose: true
})
}
this.getTableData()
this.closeDialog()
}
this.$refs.apiForm.validate(async valid => {
if (valid) {
switch (this.type) {
case 'addApi':
{
const res = await createApi(this.form)
if (res.success) {
this.$message({
type: 'success',
message: '添加成功',
showClose: true
})
}
this.getTableData()
this.closeDialog()
}
break
case 'edit':
{
const res = await updataApi(this.form)
if (res.success) {
this.$message({
type: 'success',
message: '添加成功',
showClose: true
})
}
this.getTableData()
this.closeDialog()
break
case 'edit':
{
const res = await updataApi(this.form)
if (res.success) {
this.$message({
type: 'success',
message: '添加成功',
showClose: true
})
}
this.getTableData()
this.closeDialog()
}
break
default:
{
this.$message({
type: 'error',
message: '未知操作',
showClose: true
})
}
break
}
break
default:
{
this.$message({
type: 'error',
message: '未知操作',
showClose: true
})
}
break
}
}
})
}
},
filters:{
methodFiletr(value){
const target = methodOptions.filter(item=>item.value === value)[0]
filters: {
methodFiletr(value) {
const target = methodOptions.filter(item => item.value === value)[0]
// return target && `${target.label}(${target.value})`
return target && `${target.label}`
},
tagTypeFiletr(value){
const target = methodOptions.filter(item=>item.value === value)[0]
tagTypeFiletr(value) {
const target = methodOptions.filter(item => item.value === value)[0]
return target && `${target.type}`
}
}
......@@ -252,10 +264,10 @@ export default {
float: right;
}
}
.el-tag--mini{
.el-tag--mini {
margin-left: 5px;
}
.warning {
color: #DC143C;
color: #dc143c;
}
</style>
\ No newline at end of file
QMPlusVuePage/src/view/superAdmin/authority/authority.vue
浏览文件 @ c5932c0a
......@@ -4,35 +4,35 @@
<el-button @click="addAuthority('0')" type="primary">新增角色</el-button>
</div>
<el-table
:data="tableData"
style="width: 100%"
row-key="ID"
border
stripe
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column label="id" min-width="180" prop="ID"></el-table-column>
<el-table-column label="角色id" min-width="180" prop="authorityId"></el-table-column>
<el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
<el-table-column fixed="right" label="操作" min-width="300">
<template slot-scope="scope">
<el-button @click="opdendrawer(scope.row)" size="small" type="text">设置权限</el-button>
<el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
<el-button @click="addAuthority(scope.row.authorityId)" size="small" type="text">新增子角色</el-button>
</template>
</el-table-column>
</el-table>
:data="tableData"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
border
row-key="ID"
stripe
style="width: 100%"
>
<el-table-column label="id" min-width="180" prop="ID"></el-table-column>
<el-table-column label="角色id" min-width="180" prop="authorityId"></el-table-column>
<el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
<el-table-column fixed="right" label="操作" min-width="300">
<template slot-scope="scope">
<el-button @click="opdendrawer(scope.row)" size="small" type="text">设置权限</el-button>
<el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
<el-button @click="addAuthority(scope.row.authorityId)" size="small" type="text">新增子角色</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新增角色弹窗 -->
<el-dialog :visible.sync="dialogFormVisible" title="新增角色">
<el-form :model="form">
<el-form-item label="父级角色ID">
<el-form :model="form" :rules="rules" ref="authorityForm">
<el-form-item label="父级角色ID" prop="parentId">
<el-input autocomplete="off" disabled v-model="form.parentId"></el-input>
</el-form-item>
<el-form-item label="角色ID">
<el-form-item label="角色ID" prop="authorityId">
<el-input autocomplete="off" v-model="form.authorityId"></el-input>
</el-form-item>
<el-form-item label="角色姓名">
<el-form-item label="角色姓名" prop="authorityName">
<el-input autocomplete="off" v-model="form.authorityName"></el-input>
</el-form-item>
</el-form>
......@@ -42,7 +42,7 @@
</div>
</el-dialog>
<el-drawer :visible.sync="drawer" v-if="drawer" :with-header="false" size="40%" title="角色配置">
<el-drawer :visible.sync="drawer" :with-header="false" size="40%" title="角色配置" v-if="drawer">
<el-tabs class="role-box" type="border-card">
<el-tab-pane label="角色菜单">
<Menus :row="activeRow" />
......@@ -50,8 +50,8 @@
<el-tab-pane label="角色api">
<apis :row="activeRow" />
</el-tab-pane>
<el-tab-pane label="资源权限">
<Datas :row="activeRow" :authority="tableData" />
<el-tab-pane label="资源权限">
<Datas :authority="tableData" :row="activeRow" />
</el-tab-pane>
</el-tabs>
</el-drawer>
......@@ -87,7 +87,18 @@ export default {
form: {
authorityId: '',
authorityName: '',
parentId:'0'
parentId: '0'
},
rules: {
authorityId: [
{ required: true, message: '请输入角色ID', trigger: 'blur' }
],
authorityName: [
{ required: true, message: '请输入角色名', trigger: 'blur' }
],
parentId: [
{ required: true, message: '请选择请求方式', trigger: 'blur' }
]
}
}
},
......@@ -140,17 +151,28 @@ export default {
// 确定弹窗
async enterDialog() {
const res = await createAuthority(this.form)
if (res.success) {
if (this.form.authorityId == '0') {
this.$message({
type: 'success',
message: '添加成功!'
type: 'error',
message: '角色id不能为0'
})
this.getTableData()
this.closeDialog()
return false
}
this.initForm()
this.dialogFormVisible = false
this.$refs.authorityForm.validate(async valid => {
if (valid) {
const res = await createAuthority(this.form)
if (res.success) {
this.$message({
type: 'success',
message: '添加成功!'
})
this.getTableData()
this.closeDialog()
}
this.initForm()
this.dialogFormVisible = false
}
})
},
// 增加角色
addAuthority(parentId) {
......@@ -158,7 +180,7 @@ export default {
this.dialogFormVisible = true
}
},
created(){
created() {
this.pageSize = 999
}
}
......@@ -173,9 +195,9 @@ export default {
}
}
.role-box {
.el-tabs__content {
height: calc(100vh - 150px);
overflow: auto;
}
.el-tabs__content {
height: calc(100vh - 150px);
overflow: auto;
}
}
</style>
\ No newline at end of file
QMPlusVuePage/src/view/superAdmin/menu/menu.vue
浏览文件 @ c5932c0a
......@@ -5,7 +5,7 @@
</div>
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
<el-table :data="tableData" border stripe row-key="ID">
<el-table :data="tableData" border row-key="ID" stripe>
<el-table-column label="ID" min-width="100" prop="ID"></el-table-column>
<el-table-column label="路由Name" min-width="160" prop="name"></el-table-column>
<el-table-column label="是否隐藏" min-width="100" prop="hidden">
......@@ -36,8 +36,8 @@
</el-table>
<el-dialog :before-close="handleClose" :visible.sync="dialogFormVisible" title="新增菜单">
<el-form :inline="true" :model="form" label-width="80px">
<el-form-item label="路由name">
<el-form :inline="true" :model="form" :rules="rules" label-width="85px" ref="menuForm">
<el-form-item label="路由name" prop="path">
<el-input autocomplete="off" placeholder="唯一英文字符串" v-model="form.path"></el-input>
</el-form-item>
<el-form-item label="是否隐藏">
......@@ -49,10 +49,10 @@
<el-form-item label="父节点Id">
<el-input autocomplete="off" disabled v-model="form.parentId"></el-input>
</el-form-item>
<el-form-item label="文件路径">
<el-form-item label="文件路径" prop="component">
<el-input autocomplete="off" v-model="form.component"></el-input>
</el-form-item>
<el-form-item label="展示名称">
<el-form-item label="展示名称" prop="meta.title">
<el-input autocomplete="off" v-model="form.meta.title"></el-input>
</el-form-item>
<el-form-item label="图标">
......@@ -62,9 +62,7 @@
<el-input autocomplete="off" v-model="form.sort"></el-input>
</el-form-item>
</el-form>
<div class="warning">
新增菜单需要在角色管理内配置权限才可使用
</div>
<div class="warning">新增菜单需要在角色管理内配置权限才可使用</div>
<div class="dialog-footer" slot="footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button @click="enterDialog" type="primary">确 定</el-button>
......@@ -104,30 +102,40 @@ export default {
icon: ''
}
},
rules: {
path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
component: [
{ required: true, message: '请输入文件路径', trigger: 'blur' }
],
'meta.title': [
{ required: true, message: '请输入菜单展示名称', trigger: 'blur' }
]
},
isEdit: false
}
},
methods: {
handleClose(done){
handleClose(done) {
this.initForm()
done()
},
// 懒加载子菜单
load(tree, treeNode, resolve) {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
},
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
},
// 删除菜单
deleteMenu(ID) {
this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
......@@ -172,26 +180,30 @@ export default {
},
// 添加menu
async enterDialog() {
let res
this.form.name = this.form.path
if (this.isEdit) {
res = await updataBaseMenu(this.form)
} else {
res = await addBaseMenu(this.form)
}
if (res.success) {
this.$message({
type: 'success',
message: '添加成功!'
})
this.getTableData()
} else {
this.$message({
type: 'error',
message: '添加失败!'
})
}
this.dialogFormVisible = false
this.$refs.menuForm.validate(async valid => {
if (valid) {
let res
this.form.name = this.form.path
if (this.isEdit) {
res = await updataBaseMenu(this.form)
} else {
res = await addBaseMenu(this.form)
}
if (res.success) {
this.$message({
type: 'success',
message: '添加成功!'
})
this.getTableData()
} else {
this.$message({
type: 'error',
message: '添加失败!'
})
}
this.dialogFormVisible = false
}
})
},
// 添加菜单方法，id为 0则为添加根菜单
addMenu(id) {
......@@ -207,7 +219,7 @@ export default {
this.isEdit = true
}
},
created(){
created() {
this.pageSize = 999
}
}
......@@ -220,6 +232,6 @@ export default {
}
}
.warning {
color: #DC143C;
color: #dc143c;
}
</style>
\ No newline at end of file
QMPlusVuePage/src/view/superAdmin/user/user.vue
浏览文件 @ c5932c0a
......@@ -43,14 +43,14 @@
></el-pagination>
<el-dialog :visible.sync="addUserDialog" custom-class="user-dialog" title="新增用户">
<el-form :model="userInfo">
<el-form-item label="用户名" label-width="80px">
<el-form :rules="rules" ref="userForm" :model="userInfo" >
<el-form-item label="用户名" label-width="80px" prop="username">
<el-input v-model="userInfo.username"></el-input>
</el-form-item>
<el-form-item label="密码" label-width="80px">
<el-form-item label="密码" label-width="80px" prop="password">
<el-input v-model="userInfo.password"></el-input>
</el-form-item>
<el-form-item label="别名" label-width="80px">
<el-form-item label="别名" label-width="80px" prop="nickName">
<el-input v-model="userInfo.nickName"></el-input>
</el-form-item>
<el-form-item label="头像" label-width="80px">
......@@ -66,7 +66,7 @@
<i class="el-icon-plus avatar-uploader-icon" v-else></i>
</el-upload>
</el-form-item>
<el-form-item label="用户角色" label-width="80px">
<el-form-item label="用户角色" label-width="80px" prop="authorityId">
<el-select placeholder="请选择" v-model="userInfo.authorityId">
<el-option
:key="item.authorityId"
......@@ -109,7 +109,19 @@ export default {
nickName: '',
headerImg: '',
authorityId: ''
}
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [
{ required: true, message: '请输入用户密码', trigger: 'blur' }
],
nickName: [
{ required: true, message: '请输入用户昵称', trigger: 'blur' }
],
authorityId: [
{ required: true, message: '请选择用户角色', trigger: 'blur' }
]
},
}
},
computed: {
......@@ -117,12 +129,16 @@ export default {
},
methods: {
async enterAddUserDialog() {
const res = await regist(this.userInfo)
if (res.success) {
this.$message({ type: 'success', message: '创建成功' })
}
await this.getTableData()
this.closeAddUserDialog()
this.$refs.userForm.validate(async valid => {
if (valid) {
const res = await regist(this.userInfo)
if (res.success) {
this.$message({ type: 'success', message: '创建成功' })
}
await this.getTableData()
this.closeAddUserDialog()
}
})
},
closeAddUserDialog() {
this.userInfo = {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或