open-source/eladmin-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码优化，组件复用

Browse Source
This commit is contained in:
郑杰
2019-01-06 12:45:24 +08:00
parent 22a95e6fcc
commit ff0c36b5d4
40 changed files with 858 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/system/menu/index.vue
View File

@@ -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 {

137
src/views/system/menu/module/add.vue
View File

@@ -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>

118
src/views/system/menu/module/edit.vue
View File

@@ -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
View 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>

20
src/views/system/menu/module/search.vue → src/views/system/menu/module/header.vue
View File

@@ -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,