代码优化，组件复用
This commit is contained in:
郑杰
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search :roles="roles" :menus="menus" :query="query"/>
|
||||
<eHeader :roles="roles" :menus="menus" :query="query"/>
|
||||
<!--表格渲染-->
|
||||
<tree-table v-loading="loading" :data="data" :expand-all="true" :columns="columns" border size="small">
|
||||
<el-table-column prop="icon" label="图标" align="center" width="80px">
|
||||
@@ -54,10 +54,10 @@ import treeTable from '@/components/TreeTable'
|
||||
import initData from '../../../mixins/initData'
|
||||
import { del, getMenusTree } from '@/api/menu'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import search from './module/search'
|
||||
import eHeader from './module/header'
|
||||
import edit from './module/edit'
|
||||
export default {
|
||||
components: { search, edit, treeTable },
|
||||
components: { eHeader, edit, treeTable },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
|
||||
<el-dialog :visible.sync="dialog" :title="title" width="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="菜单图标">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="460"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()">
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
|
||||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
|
||||
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="sort">
|
||||
<el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="内部菜单" prop="iframe">
|
||||
<el-radio v-model="form.iframe" label="false">是</el-radio>
|
||||
<el-radio v-model="form.iframe" label="true" >否</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址">
|
||||
<el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.iframe === 'false'" label="组件路径">
|
||||
<el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目">
|
||||
<treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
|
||||
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" placeholder="请选择角色" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/menu'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect, IconSelect },
|
||||
props: {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
roles: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '新增菜单',
|
||||
form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
],
|
||||
iframe: [
|
||||
{ required: true, message: '请选择菜单类型', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.roles = []
|
||||
const _this = this
|
||||
this.roleIds.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
_this.form.roles.push(role)
|
||||
})
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
this.$parent.$parent.init()
|
||||
this.$parent.$parent.getMenus()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
|
||||
this.roleIds = []
|
||||
},
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button size="mini" type="success" @click="to">编辑</el-button>
|
||||
<el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="菜单图标">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="460"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()">
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
|
||||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
|
||||
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="sort">
|
||||
<el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="内部菜单" prop="iframe">
|
||||
<el-radio v-model="form.iframe" label="false">是</el-radio>
|
||||
<el-radio v-model="form.iframe" label="true" >否</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址">
|
||||
<el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.iframe === 'false'" label="组件路径">
|
||||
<el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目">
|
||||
<treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
|
||||
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" placeholder="请选择角色" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<eForm ref="form" :roles="roles" :menus="menus" :sup_this="sup_this" :is-add="false"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { edit } from '@/api/menu'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { Treeselect, IconSelect },
|
||||
components: { eForm },
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
@@ -71,74 +26,15 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '编辑菜单',
|
||||
form: { id: '', name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
],
|
||||
iframe: [
|
||||
{ required: true, message: '请选择菜单类型', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
to() {
|
||||
const _this = this
|
||||
this.form = { id: this.data.id, component: this.data.component, name: this.data.name, sort: this.data.sort, pid: this.data.pid, path: this.data.path, iframe: this.data.iframe.toString(), roles: [], icon: this.data.icon }
|
||||
const _this = this.$refs.form
|
||||
_this.roleIds = []
|
||||
_this.form = { id: this.data.id, component: this.data.component, name: this.data.name, sort: this.data.sort, pid: this.data.pid, path: this.data.path, iframe: this.data.iframe.toString(), roles: [], icon: this.data.icon }
|
||||
this.data.roles.forEach(function(data, index) {
|
||||
_this.roleIds.push(data.id)
|
||||
})
|
||||
this.dialog = true
|
||||
},
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.roles = []
|
||||
const _this = this
|
||||
this.roleIds.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
_this.form.roles.push(role)
|
||||
})
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
_this.sup_this.init()
|
||||
_this.sup_this.getMenus()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { id: '', name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
|
||||
this.roleIds = []
|
||||
},
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
_this.dialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
162
src/views/system/menu/module/form.vue
Normal file
162
src/views/system/menu/module/form.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增菜单' : '编辑菜单'" width="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="菜单图标">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="460"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()">
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
|
||||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
|
||||
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="sort">
|
||||
<el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="内部菜单" prop="iframe">
|
||||
<el-radio v-model="form.iframe" label="false">是</el-radio>
|
||||
<el-radio v-model="form.iframe" label="true" >否</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址">
|
||||
<el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.iframe === 'false'" label="组件路径">
|
||||
<el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目">
|
||||
<treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
|
||||
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" placeholder="请选择角色" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit } from '@/api/menu'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect, IconSelect },
|
||||
props: {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
roles: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sup_this: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
],
|
||||
iframe: [
|
||||
{ required: true, message: '请选择菜单类型', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.roles = []
|
||||
const _this = this
|
||||
this.roleIds.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
_this.form.roles.push(role)
|
||||
})
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
this.$parent.$parent.init()
|
||||
this.$parent.$parent.getMenus()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
this.sup_this.init()
|
||||
this.sup_this.getMenus()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
|
||||
this.roleIds = []
|
||||
},
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,17 +1,27 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<add v-if="checkPermission(['ADMIN','MENU_ALL','MENU_CREATE'])" :roles="roles" :menus="menus"/>
|
||||
<!-- 新增 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-if="checkPermission(['ADMIN','MENU_ALL','MENU_CREATE'])"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.form.dialog = true">新增</el-button>
|
||||
<eForm ref="form" :roles="roles" :menus="menus" :is-add="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import add from './add'
|
||||
// 查询条件
|
||||
import checkPermission from '@/utils/permission'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { add },
|
||||
components: { eForm },
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search :permissions="permissions" :query="query"/>
|
||||
<eHeader :permissions="permissions" :query="query"/>
|
||||
<!--表格渲染-->
|
||||
<tree-table v-loading="loading" :data="data" :expand-all="true" :columns="columns" border size="small">
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
@@ -36,10 +36,10 @@ import initData from '../../../mixins/initData'
|
||||
import { del } from '@/api/permission'
|
||||
import { getPermissionTree } from '@/api/permission'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import search from './module/search'
|
||||
import eHeader from './module/header'
|
||||
import edit from './module/edit'
|
||||
export default {
|
||||
components: { search, edit, treeTable },
|
||||
components: { eHeader, edit, treeTable },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
|
||||
<el-dialog :visible.sync="dialog" :title="title" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 360px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="别名" prop="alias">
|
||||
<el-input v-model="form.alias" style="width: 360px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="上级类目">
|
||||
<treeselect v-model="form.pid" :options="permissions" style="width: 360px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/permission'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '新增权限',
|
||||
form: { name: '', alias: '', pid: 0 },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
alias: [
|
||||
{ required: true, message: '请输入别名', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
this.$parent.$parent.init()
|
||||
this.$parent.$parent.getPermissions()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', alias: '', pid: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
|
||||
<el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 360px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="别名" prop="alias">
|
||||
<el-input v-model="form.alias" style="width: 360px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="上级类目">
|
||||
<treeselect v-model="form.pid" :options="permissions" style="width: 360px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<eForm ref="form" :permissions="permissions" :sup_this="sup_this" :is-add="false"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { edit } from '@/api/permission'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
components: { eForm },
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
@@ -40,58 +22,11 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '编辑权限',
|
||||
form: { id: '', name: '', alias: '', pid: 0 },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
alias: [
|
||||
{ required: true, message: '请输入别名', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
to() {
|
||||
this.form = { id: this.data.id, name: this.data.name, alias: this.data.alias, pid: this.data.pid }
|
||||
this.dialog = true
|
||||
},
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
const _this = this
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
_this.sup_this.init()
|
||||
_this.sup_this.getPermissions()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { id: '', name: '', alias: '', pid: 0 }
|
||||
const _this = this.$refs.form
|
||||
_this.form = { id: this.data.id, name: this.data.name, alias: this.data.alias, pid: this.data.pid }
|
||||
_this.dialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
118
src/views/system/permission/module/form.vue
Normal file
118
src/views/system/permission/module/form.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增权限' : '编辑权限'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 360px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="别名" prop="alias">
|
||||
<el-input v-model="form.alias" style="width: 360px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="上级类目">
|
||||
<treeselect v-model="form.pid" :options="permissions" style="width: 360px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit } from '@/api/permission'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sup_this: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: { name: '', alias: '', pid: 0 },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
alias: [
|
||||
{ required: true, message: '请输入别名', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
this.$parent.$parent.init()
|
||||
this.$parent.$parent.getPermissions()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
setTimeout(() => {
|
||||
this.sup_this.init()
|
||||
this.sup_this.getPermissions()
|
||||
}, 200)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', alias: '', pid: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,17 +1,27 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<add v-if="checkPermission(['ADMIN','PERMISSION_ALL','PERMISSION_CREATE'])" :permissions="permissions"/>
|
||||
<!-- 新增 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-if="checkPermission(['ADMIN','PERMISSION_ALL','PERMISSION_CREATE'])"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.form.dialog = true">新增</el-button>
|
||||
<eForm ref="form" :permissions="permissions" :is-add="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import add from './add'
|
||||
// 查询条件
|
||||
import checkPermission from '@/utils/permission'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { add },
|
||||
components: { eForm },
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search :permissions="permissions" :query="query"/>
|
||||
<eHeader :permissions="permissions" :query="query"/>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
|
||||
<el-table-column prop="name" label="名称"/>
|
||||
@@ -39,15 +39,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '../../../mixins/initData'
|
||||
import { del } from '@/api/role'
|
||||
import { getPermissionTree } from '@/api/permission'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import search from './module/search'
|
||||
import eHeader from './module/header'
|
||||
import edit from './module/edit'
|
||||
export default {
|
||||
components: { search, edit },
|
||||
components: { eHeader, edit },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
|
||||
<el-dialog :visible.sync="dialog" :title="title" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限">
|
||||
<treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: -10px;" label="描述">
|
||||
<el-input v-model="form.remark" style="width: 370px;" rows="5" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/role'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '新增角色',
|
||||
form: { name: '', permissions: [], remark: '' }, permissionIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.permissions = []
|
||||
const _this = this
|
||||
this.permissionIds.forEach(function(data, index) {
|
||||
const permission = { id: data }
|
||||
_this.form.permissions.push(permission)
|
||||
})
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.permissionIds = []
|
||||
this.form = { name: '', permissions: [], remark: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
|
||||
<el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限">
|
||||
<treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: -10px;" label="描述">
|
||||
<el-input v-model="form.remark" rows="5" style="width: 370px;" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<eForm ref="form" :permissions="permissions" :sup_this="sup_this" :is-add="false"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { edit } from '@/api/role'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
components: { eForm },
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
@@ -42,62 +22,15 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '编辑角色',
|
||||
form: { id: '', name: '', permissions: [], remark: '' }, permissionIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
to() {
|
||||
const _this = this
|
||||
this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, permissions: [] }
|
||||
const _this = this.$refs.form
|
||||
_this.permissionIds = []
|
||||
_this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, permissions: [] }
|
||||
this.data.permissions.forEach(function(data, index) {
|
||||
_this.permissionIds.push(data.id)
|
||||
})
|
||||
this.dialog = true
|
||||
},
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.permissions = []
|
||||
const _this = this
|
||||
this.permissionIds.forEach(function(data, index) {
|
||||
const permission = { id: data }
|
||||
_this.form.permissions.push(permission)
|
||||
})
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
_this.sup_this.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.permissionIds = []
|
||||
this.form = { name: '', permissions: [], remark: '' }
|
||||
_this.dialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
116
src/views/system/role/module/form.vue
Normal file
116
src/views/system/role/module/form.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增角色' : '编辑角色'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限">
|
||||
<treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: -10px;" label="描述">
|
||||
<el-input v-model="form.remark" style="width: 370px;" rows="5" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit } from '@/api/role'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sup_this: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: { name: '', permissions: [], remark: '' }, permissionIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.permissions = []
|
||||
const _this = this
|
||||
this.permissionIds.forEach(function(data, index) {
|
||||
const permission = { id: data }
|
||||
_this.form.permissions.push(permission)
|
||||
})
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.sup_this.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.permissionIds = []
|
||||
this.form = { name: '', permissions: [], remark: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,8 +1,20 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<add v-if="checkPermission(['ADMIN','ROLE_ALL','ROLE_CREATE'])" :permissions="permissions"/>
|
||||
<!-- 新增 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-if="checkPermission(['ADMIN','ROLE_ALL','ROLE_CREATE'])"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.form.dialog = true">新增</el-button>
|
||||
<eForm ref="form" :permissions="permissions" :is-add="true"/>
|
||||
</div>
|
||||
<!-- 导出 -->
|
||||
<el-button v-if="checkPermission(['ADMIN'])" :loading="downloadLoading" size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="download">导出</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,10 +22,10 @@
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import { parseTime } from '@/utils/index'
|
||||
import add from './add'
|
||||
import eForm from './form'
|
||||
// 查询条件
|
||||
export default {
|
||||
components: { add },
|
||||
components: { eForm },
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
@@ -32,7 +44,6 @@ export default {
|
||||
methods: {
|
||||
checkPermission,
|
||||
toQuery() {
|
||||
console.log(this.query)
|
||||
this.$parent.page = 0
|
||||
this.$parent.init()
|
||||
},
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div id="content-main" :style="'width:'+width">
|
||||
<div id="content-main" style="width:600px;">
|
||||
<el-card shadow="never" class="box-card user-info">
|
||||
<div class="avatar-content">
|
||||
<el-upload
|
||||
@@ -54,7 +54,6 @@ export default {
|
||||
components: { updatePass, updateEmail },
|
||||
data() {
|
||||
return {
|
||||
width: document.documentElement.clientWidth - 180 + 'px;',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
}
|
||||
@@ -95,78 +94,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.box-card{
|
||||
border: 0px;
|
||||
border-bottom: 1px solid #ECEDFE;
|
||||
border-radius: unset;
|
||||
h4{
|
||||
height: 26px;
|
||||
margin: 0 0 7px;
|
||||
line-height: 26px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #444242;
|
||||
display: inline-block;
|
||||
}
|
||||
p{
|
||||
font-family: Lantinghei;
|
||||
font-size: 90%;
|
||||
color: #747474;
|
||||
}
|
||||
ul{
|
||||
padding: 0;
|
||||
margin: 7px 0 0;
|
||||
list-style: none;
|
||||
font-size: 80%;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
margin: 0 30px 10px 0!important;
|
||||
}
|
||||
li:before {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #52acd9;
|
||||
color: #52acd9;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info{
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.reset-email{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.avatar-content, .user-info-content {
|
||||
float: left;
|
||||
}
|
||||
.user-info-content{
|
||||
font-family: Lantinghei;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
margin: 25px;
|
||||
div{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.box-card{border:0;border-bottom:1px solid #ECEDFE;border-radius:unset;h4{height:26px;margin:0 0 7px;line-height:26px;font-size:1.1rem;font-weight:500;color:#444242;display:inline-block}p{font-family:Lantinghei;font-size:90%;color:#747474}ul{padding:0;margin:7px 0 0;list-style:none;font-size:80%}li{float:left;margin:0 30px 10px 0!important}li:before{width:8px;height:8px;background-color:#52acd9;color:#52acd9;display:inline-block;border-radius:50%;margin-right:5px;content:'';box-sizing:border-box}}.user-info{height:170px}.reset-email{border-bottom:0}.avatar-content,.user-info-content{float:left}.user-info-content{font-family:Lantinghei;position:relative;font-size:14px;margin:25px;div{margin-bottom:15px}}.avatar-uploader-icon{font-size:28px;width:120px;height:120px;line-height:120px;text-align:center}.avatar{width:120px;height:120px;display:block;border-radius:50%}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search :roles="roles" :query="query"/>
|
||||
<eHeader :roles="roles" :query="query"/>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
|
||||
<el-table-column prop="username" label="用户名"/>
|
||||
@@ -49,15 +49,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '../../../mixins/initData'
|
||||
import { del } from '@/api/user'
|
||||
import { getRoleTree } from '@/api/role'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import search from './module/search'
|
||||
import eHeader from './module/header'
|
||||
import edit from './module/edit'
|
||||
export default {
|
||||
components: { search, edit },
|
||||
components: { eHeader, edit },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
|
||||
<el-dialog :visible.sync="dialog" :title="title" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-radio v-model="form.enabled" label="true">激活</el-radio>
|
||||
<el-radio v-model="form.enabled" label="false" >锁定</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="角色">
|
||||
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/user'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
roles: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '新增用户',
|
||||
form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
enabled: [
|
||||
{ required: true, message: '状态不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.roles = []
|
||||
const _this = this
|
||||
this.roleIds.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
_this.form.roles.push(role)
|
||||
})
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
message: '默认密码：123456',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.roleIds = []
|
||||
this.form = { username: '', email: '', enabled: 'false', roles: [] }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :title="title" style="text-align: left" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-radio v-model="form.enabled" label="true">激活</el-radio>
|
||||
<el-radio v-model="form.enabled" label="false" >锁定</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="角色">
|
||||
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<eForm ref="form" :roles="roles" :sup_this="sup_this" :is-add="false"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { edit } from '@/api/user'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
components: { eForm },
|
||||
props: {
|
||||
roles: {
|
||||
type: Array,
|
||||
@@ -39,83 +17,26 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// index.vue 的this 可用于刷新数据
|
||||
sup_this: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '编辑用户',
|
||||
form: { id: '', username: '', email: '', enabled: '', roles: [] }, roleIds: [],
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
|
||||
],
|
||||
enabled: [
|
||||
{ required: true, message: '状态不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
to() {
|
||||
const _this = this
|
||||
this.form = { id: this.data.id, username: this.data.username, email: this.data.email, enabled: this.data.enabled.toString(), roles: [] }
|
||||
const _this = this.$refs.form
|
||||
_this.roleIds = []
|
||||
_this.form = { id: this.data.id, username: this.data.username, email: this.data.email, enabled: this.data.enabled.toString(), roles: [] }
|
||||
this.data.roles.forEach(function(data, index) {
|
||||
_this.roleIds.push(data.id)
|
||||
})
|
||||
this.dialog = true
|
||||
},
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.roles = []
|
||||
const _this = this
|
||||
this.roleIds.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
_this.form.roles.push(role)
|
||||
})
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
_this.sup_this.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.roleIds = []
|
||||
this.form = { id: '', username: '', email: '', enabled: '', roles: [] }
|
||||
_this.dialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
div{display: inline-block;margin-right: 3px;}
|
||||
</style>
|
||||
|
||||
129
src/views/system/user/module/form.vue
Normal file
129
src/views/system/user/module/form.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增用户' : '编辑用户'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-radio v-model="form.enabled" label="true">激活</el-radio>
|
||||
<el-radio v-model="form.enabled" label="false" >锁定</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="角色">
|
||||
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit } from '@/api/user'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: 'Form',
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
roles: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sup_this: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false, loading: false, form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
enabled: [
|
||||
{ required: true, message: '状态不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.form.roles = []
|
||||
const _this = this
|
||||
this.roleIds.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
_this.form.roles.push(role)
|
||||
})
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
message: '默认密码：123456',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.sup_this.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.roleIds = []
|
||||
this.form = { username: '', email: '', enabled: 'false', roles: [] }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
|
||||
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
@@ -8,18 +9,36 @@
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<add v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])" :roles="roles"/>
|
||||
<el-button v-if="checkPermission(['ADMIN'])" :loading="downloadLoading" size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="download">导出</el-button>
|
||||
<!-- 新增 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.form.dialog = true">新增</el-button>
|
||||
<eForm ref="form" :roles="roles" :is-add="true"/>
|
||||
</div>
|
||||
<!-- 导出 -->
|
||||
<el-button
|
||||
v-if="checkPermission(['ADMIN'])"
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import { parseTime } from '@/utils/index'
|
||||
import add from './add'
|
||||
import eForm from './form'
|
||||
// 查询条件
|
||||
export default {
|
||||
components: { add },
|
||||
components: { eForm },
|
||||
props: {
|
||||
roles: {
|
||||
type: Array,
|
||||
@@ -45,10 +64,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
checkPermission,
|
||||
// 去查询
|
||||
toQuery() {
|
||||
this.$parent.page = 0
|
||||
this.$parent.init()
|
||||
},
|
||||
// 导出
|
||||
download() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
@@ -63,6 +84,7 @@ export default {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
// 数据转换
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'createTime' || j === 'lastPasswordResetTime') {
|
||||
Reference in New Issue
Block a user