feat menu icon

src/config/iconList.js

@@ -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",
+    ]
+  }
+]

src/config/website.js

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

src/store/modules/user.js

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

src/styles/avue.scss

@@ -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);
+}

src/styles/common.scss

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

src/views/system/menu.vue

@@ -26,6 +26,13 @@
                 slot="roleId">
         <el-tag>{{row.roleName}}</el-tag>
       </template>
+      <template slot-scope="{row}"
+                slot="source">
+        <div style="text-align:center">
+          <i :class="row.source"></i>
+        </div>
+      </template>
+
       <template slot-scope="{row}"
                 slot="deptId">
         <el-tag>{{row.deptName}}</el-tag>
@@ -35,10 +42,10 @@
 </template>
 
 <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() {
     return {
       form: {},
@@ -61,39 +68,61 @@
             label: "菜单名称",
             prop: "name",
             search: true,
-              rules: [{
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单名称",
                 trigger: "blur"
-              }]
+              }
+            ]
           },
           {
             label: "菜单编号",
             prop: "code",
             search: true,
-              rules: [{
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单编号",
                 trigger: "blur"
-              }]
+              }
+            ]
           },
           {
             label: "菜单别名",
             prop: "alias",
-              rules: [{
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单别名",
                 trigger: "blur"
-              }]
+              }
+            ]
+          },
+          {
+            label: "菜单图标",
+            prop: "source",
+            type: "icon-select",
+            slot: true,
+            iconList: iconList,
+            rules: [
+              {
+                required: true,
+                message: "请输入菜单图标",
+                trigger: "blur"
+              }
+            ]
           },
           {
             label: "路由地址",
             prop: "path",
-              rules: [{
+            rules: [
+              {
                 required: true,
                 message: "请输入路由地址",
                 trigger: "blur"
-              }]
+              }
+            ]
           },
 
           {
@@ -105,11 +134,13 @@
             props: {
               label: "title"
             },
-              rules: [{
+            rules: [
+              {
                 required: false,
                 message: "请选择上级菜单",
                 trigger: "blur"
-              }]
+              }
+            ]
           },
 
           {
@@ -127,21 +158,25 @@
               }
             ],
             hide: true,
-              rules: [{
+            rules: [
+              {
                 required: true,
                 message: "请选择菜单类型",
                 trigger: "blur"
-              }]
+              }
+            ]
           },
           {
             label: "菜单排序",
             prop: "sort",
             type: "number",
-              rules: [{
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单排序",
                 trigger: "blur"
-              }]
+              }
+            ]
           },
           {
             label: "按钮功能",
@@ -162,11 +197,13 @@
               }
             ],
             hide: true,
-              rules: [{
+            rules: [
+              {
                 required: true,
                 message: "请选择按钮功能",
                 trigger: "blur"
-              }]
+              }
+            ]
           },
           {
             label: "菜单备注",
@@ -284,7 +321,7 @@
       });
     }
   }
-  };
+};
 </script>
 
 <style>