suojin
/
bladex_sabar
mirror of https://git.javablade.com/blade/Saber.git
22
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat menu icon

Browse Source
pull/59/head
smallwei 7 years ago
parent 6d449910b5
commit 770fe065f8
6 changed files with 316 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      src/config/iconList.js
  2. 3
      src/config/website.js
  3. 8
      src/store/modules/user.js
  4. 15
      src/styles/avue.scss
  5. 2
      src/styles/common.scss
  6. 447
      src/views/system/menu.vue

49
src/config/iconList.js
Unescape View File

@ -0,0 +1,49 @@
export default [
{
label: "阿里云图标",
list: [
"iconfont icon-zhongyingwen",
"iconfont icon-caidan",
"iconfont icon-rizhi1",
"iconfont icon-zhuti",
"iconfont icon-suoping",
"iconfont icon-bug",
"iconfont icon-qq1",
"iconfont icon-weixin1",
"iconfont icon-shouji",
"iconfont icon-mima",
"iconfont icon-yonghu",
"iconfont icon-yanzhengma",
"iconfont icon-canshu",
"iconfont icon-dongtai",
"iconfont icon-iconset0265",
"iconfont icon-shujuzhanshi2",
"iconfont icon-tuichuquanping",
"iconfont icon-rizhi",
"iconfont icon-cuowutishitubiao",
"iconfont icon-debug",
"iconfont icon-iconset0216",
"iconfont icon-quanxian",
"iconfont icon-quanxian",
"iconfont icon-shuaxin",
"iconfont icon-bofangqi-suoping",
"iconfont icon-quanping",
"iconfont icon-navicon",
"iconfont icon-biaodan",
"iconfont icon-liuliangyunpingtaitubiao08",
"iconfont icon-caidanguanli",
"iconfont icon-cuowu",
"iconfont icon-wxbgongju",
"iconfont icon-tuichu",
"iconfont icon-daohanglanmoshi02",
"iconfont icon-changyonglogo27",
"iconfont icon-biaoge",
"iconfont icon-baidu1",
"iconfont icon-tubiao",
"iconfont icon-souhu",
"iconfont icon-msnui-360",
"iconfont icon-iframe",
"iconfont icon-huanyingye",
]
}
]

3
src/config/website.js
Unescape View File

@ -25,10 +25,11 @@ export default {
}, },
//配置菜单的属性 //配置菜单的属性
menu: { menu: {
iconDefault: 'iconfont icon-caidan',
props: { props: {
label: 'name', label: 'name',
path: 'path', path: 'path',
icon: 'icon', icon: 'source',
children: 'children' children: 'children'
} }
} }

8
src/store/modules/user.js
Unescape View File

@ -1,20 +1,22 @@
import { setToken, removeToken } from '@/util/auth' import { setToken, removeToken } from '@/util/auth'
import { setStore, getStore } from '@/util/store' import { setStore, getStore } from '@/util/store'
import { isURL } from '@/util/validate' import { isURL, validatenull } from '@/util/validate'
import { deepClone } from '@/util/util' import { deepClone } from '@/util/util'
import webiste from '@/config/website' import webiste from '@/config/website'
import { loginByUsername, getUserInfo, getMenu, getTopMenu, logout, refeshToken, getButtons } from '@/api/user' import { loginByUsername, getUserInfo, getMenu, getTopMenu, logout, refeshToken, getButtons } from '@/api/user'
function addPath(ele, first) { function addPath(ele, first) {
const propsConfig = webiste.menu.props; const menu = webiste.menu;
const propsConfig = menu.props;
const propsDefault = { const propsDefault = {
label: propsConfig.label || 'name', label: propsConfig.label || 'name',
path: propsConfig.path || 'path', path: propsConfig.path || 'path',
icon: propsConfig.icon || 'icon', icon: propsConfig.icon || 'icon',
children: propsConfig.children || 'children' children: propsConfig.children || 'children'
} }
ele.icon = 'icon-caidan'; const icon = ele[propsDefault.icon];
ele[propsDefault.icon] = validatenull(icon) ? menu.iconDefault : icon;
const isChild = ele[propsDefault.children] && ele[propsDefault.children].length !== 0; const isChild = ele[propsDefault.children] && ele[propsDefault.children].length !== 0;
if (!isChild) ele[propsDefault.children] = []; if (!isChild) ele[propsDefault.children] = [];
if (!isChild && first && !isURL(ele[propsDefault.path])) { if (!isChild && first && !isURL(ele[propsDefault.path])) {

15
src/styles/avue.scss
Unescape View File

@ -0,0 +1,15 @@
//修改阿里巴巴图表库样式
.iconfont{
margin-right: 5px;
font-size: 20px !important;
}
.avue-icon-select__item{
margin-bottom: 20px;
}
.avue-icon-select__list .iconfont{
padding: 20px;
font-size: 24px;
}
.avue-icon-select__list .iconfont:hover{
transform: scale(1.4);
}

2
src/styles/common.scss
Unescape View File

@ -18,6 +18,8 @@
@import './media.scss'; @import './media.scss';
//通用配置 //通用配置
@import './normalize.scss'; @import './normalize.scss';
//通用配置
@import './avue.scss';
a{ a{
text-decoration: none; text-decoration: none;

447
src/views/system/menu.vue
Unescape View File

@ -26,6 +26,13 @@
slot="roleId"> slot="roleId">
<el-tag>{{row.roleName}}</el-tag> <el-tag>{{row.roleName}}</el-tag>
</template> </template>
<template slot-scope="{row}"
slot="source">
<div style="text-align:center">
<i :class="row.source"></i>
</div>
</template>
<template slot-scope="{row}" <template slot-scope="{row}"
slot="deptId"> slot="deptId">
<el-tag>{{row.deptName}}</el-tag> <el-tag>{{row.deptName}}</el-tag>
@ -35,256 +42,286 @@
</template> </template>
<script> <script>
import {getList, remove, update, add, getMenu} from "@/api/system/menu"; import { getList, remove, update, add, getMenu } from "@/api/system/menu";
import {mapGetters} from "vuex"; import { mapGetters } from "vuex";
import iconList from "@/config/iconList";
export default { export default {
data() { data() {
return { return {
form: {}, form: {},
selectionList: [], selectionList: [],
page: { page: {
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
total: 0 total: 0
}, },
option: { option: {
tip: false, tip: false,
dialogWidth: "70%", dialogWidth: "70%",
tree: true, tree: true,
border: true, border: true,
index: true, index: true,
selection: true, selection: true,
viewBtn: true, viewBtn: true,
column: [ column: [
{ {
label: "菜单名称", label: "菜单名称",
prop: "name", prop: "name",
search: true, search: true,
rules: [{ rules: [
{
required: true, required: true,
message: "请输入菜单名称", message: "请输入菜单名称",
trigger: "blur" trigger: "blur"
}] }
}, ]
{ },
label: "菜单编号", {
prop: "code", label: "菜单编号",
search: true, prop: "code",
rules: [{ search: true,
rules: [
{
required: true, required: true,
message: "请输入菜单编号", message: "请输入菜单编号",
trigger: "blur" trigger: "blur"
}] }
}, ]
{ },
label: "菜单别名", {
prop: "alias", label: "菜单别名",
rules: [{ prop: "alias",
rules: [
{
required: true, required: true,
message: "请输入菜单别名", message: "请输入菜单别名",
trigger: "blur" trigger: "blur"
}] }
}, ]
{ },
label: "路由地址", {
prop: "path", label: "菜单图标",
rules: [{ prop: "source",
type: "icon-select",
slot: true,
iconList: iconList,
rules: [
{
required: true,
message: "请输入菜单图标",
trigger: "blur"
}
]
},
{
label: "路由地址",
prop: "path",
rules: [
{
required: true, required: true,
message: "请输入路由地址", message: "请输入路由地址",
trigger: "blur" trigger: "blur"
}] }
}, ]
},
{ {
label: "上级菜单", label: "上级菜单",
prop: "parentId", prop: "parentId",
type: "tree", type: "tree",
dicUrl: "/api/blade-system/menu/tree", dicUrl: "/api/blade-system/menu/tree",
hide: true, hide: true,
props: { props: {
label: "title" label: "title"
}, },
rules: [{ rules: [
{
required: false, required: false,
message: "请选择上级菜单", message: "请选择上级菜单",
trigger: "blur" trigger: "blur"
}] }
}, ]
},
{ {
label: "菜单类型", label: "菜单类型",
prop: "category", prop: "category",
type: "radio", type: "radio",
dicData: [ dicData: [
{ {
label: "菜单", label: "菜单",
value: 1 value: 1
}, },
{ {
label: "按钮", label: "按钮",
value: 2 value: 2
} }
], ],
hide: true, hide: true,
rules: [{ rules: [
{
required: true, required: true,
message: "请选择菜单类型", message: "请选择菜单类型",
trigger: "blur" trigger: "blur"
}] }
}, ]
{ },
label: "菜单排序", {
prop: "sort", label: "菜单排序",
type: "number", prop: "sort",
rules: [{ type: "number",
rules: [
{
required: true, required: true,
message: "请输入菜单排序", message: "请输入菜单排序",
trigger: "blur" trigger: "blur"
}] }
}, ]
{ },
label: "按钮功能", {
prop: "action", label: "按钮功能",
type: "radio", prop: "action",
dicData: [ type: "radio",
{ dicData: [
label: "工具栏", {
value: 0 label: "工具栏",
}, value: 0
{ },
label: "操作栏", {
value: 1 label: "操作栏",
}, value: 1
{ },
label: "工具操作栏", {
value: 2 label: "工具操作栏",
} value: 2
], }
hide: true, ],
rules: [{ hide: true,
rules: [
{
required: true, required: true,
message: "请选择按钮功能", message: "请选择按钮功能",
trigger: "blur" trigger: "blur"
}] }
}, ]
{ },
label: "菜单备注", {
prop: "remark", label: "菜单备注",
type: "textarea", prop: "remark",
span: 24, type: "textarea",
minRows: 6, span: 24,
hide: true minRows: 6,
} hide: true
] }
}, ]
data: [] },
data: []
};
},
computed: {
...mapGetters(["permission"]),
permissionList() {
return {
addBtn: this.permission.menu_add,
viewBtn: this.permission.menu_view,
delBtn: this.permission.menu_delete,
editBtn: this.permission.menu_edit
}; };
}, },
ids() {
computed: { let ids = [];
...mapGetters(["permission"]), this.selectionList.forEach(ele => {
permissionList() { ids.push(ele.id);
return { });
addBtn: this.permission.menu_add, return ids.join(",");
viewBtn: this.permission.menu_view, }
delBtn: this.permission.menu_delete, },
editBtn: this.permission.menu_edit methods: {
}; rowSave(row, loading) {
}, add(row).then(() => {
ids() { loading();
let ids = []; this.onLoad(this.page);
this.selectionList.forEach(ele => { this.$message({
ids.push(ele.id); type: "success",
message: "操作成功!"
}); });
return ids.join(","); });
} },
rowUpdate(row, index, loading) {
update(row).then(() => {
loading();
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
});
}, },
methods: { rowDel(row) {
rowSave(row, loading) { this.$confirm("确定将选择数据删除?", {
add(row).then(() => { confirmButtonText: "确定",
loading(); cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page); this.onLoad(this.page);
this.$message({ this.$message({
type: "success", type: "success",
message: "操作成功!" message: "操作成功!"
}); });
}); });
}, },
rowUpdate(row, index, loading) { searchReset() {
update(row).then(() => { this.onLoad(this.page);
loading(); },
searchChange(params) {
this.onLoad(this.page, params);
},
selectionChange(list) {
this.selectionList = list;
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoad(this.page); this.onLoad(this.page);
this.$message({ this.$message({
type: "success", type: "success",
message: "操作成功!" message: "操作成功!"
}); });
this.$refs.crud.toggleSelection();
}); });
}, },
rowDel(row) { beforeOpen(done, type) {
this.$confirm("确定将选择数据删除?", { if (["edit", "view"].includes(type)) {
confirmButtonText: "确定", getMenu(this.form.id).then(res => {
cancelButtonText: "取消", this.form = res.data.data;
type: "warning"
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
});
},
searchReset() {
this.onLoad(this.page);
},
searchChange(params) {
this.onLoad(this.page, params);
},
selectionChange(list) {
this.selectionList = list;
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
});
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getMenu(this.form.id).then(res => {
this.form = res.data.data;
});
}
done();
},
onLoad(page, params = {}) {
getList(page.currentPage, page.pageSize, params).then(res => {
const data = res.data.data;
this.data = data;
}); });
} }
done();
},
onLoad(page, params = {}) {
getList(page.currentPage, page.pageSize, params).then(res => {
const data = res.data.data;
this.data = data;
});
} }
}; }
};
</script> </script>
<style> <style>

Write Preview
Loading…
Cancel
Save