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;
@@ -25,4 +27,4 @@ a{
 }
 *{
   outline: 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,256 +42,286 @@
 </template>
 
 <script>
-  import {getList, remove, update, add, getMenu} from "@/api/system/menu";
-  import {mapGetters} from "vuex";
-
-  export default {
-    data() {
-      return {
-        form: {},
-        selectionList: [],
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        option: {
-          tip: false,
-          dialogWidth: "70%",
-          tree: true,
-          border: true,
-          index: true,
-          selection: true,
-          viewBtn: true,
-          column: [
-            {
-              label: "菜单名称",
-              prop: "name",
-              search: true,
-              rules: [{
+import { getList, remove, update, add, getMenu } from "@/api/system/menu";
+import { mapGetters } from "vuex";
+import iconList from "@/config/iconList";
+export default {
+  data() {
+    return {
+      form: {},
+      selectionList: [],
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      option: {
+        tip: false,
+        dialogWidth: "70%",
+        tree: true,
+        border: true,
+        index: true,
+        selection: true,
+        viewBtn: true,
+        column: [
+          {
+            label: "菜单名称",
+            prop: "name",
+            search: true,
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单名称",
                 trigger: "blur"
-              }]
-            },
-            {
-              label: "菜单编号",
-              prop: "code",
-              search: true,
-              rules: [{
+              }
+            ]
+          },
+          {
+            label: "菜单编号",
+            prop: "code",
+            search: true,
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单编号",
                 trigger: "blur"
-              }]
-            },
-            {
-              label: "菜单别名",
-              prop: "alias",
-              rules: [{
+              }
+            ]
+          },
+          {
+            label: "菜单别名",
+            prop: "alias",
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单别名",
                 trigger: "blur"
-              }]
-            },
-            {
-              label: "路由地址",
-              prop: "path",
-              rules: [{
+              }
+            ]
+          },
+          {
+            label: "菜单图标",
+            prop: "source",
+            type: "icon-select",
+            slot: true,
+            iconList: iconList,
+            rules: [
+              {
+                required: true,
+                message: "请输入菜单图标",
+                trigger: "blur"
+              }
+            ]
+          },
+          {
+            label: "路由地址",
+            prop: "path",
+            rules: [
+              {
                 required: true,
                 message: "请输入路由地址",
                 trigger: "blur"
-              }]
-            },
+              }
+            ]
+          },
 
-            {
-              label: "上级菜单",
-              prop: "parentId",
-              type: "tree",
-              dicUrl: "/api/blade-system/menu/tree",
-              hide: true,
-              props: {
-                label: "title"
-              },
-              rules: [{
+          {
+            label: "上级菜单",
+            prop: "parentId",
+            type: "tree",
+            dicUrl: "/api/blade-system/menu/tree",
+            hide: true,
+            props: {
+              label: "title"
+            },
+            rules: [
+              {
                 required: false,
                 message: "请选择上级菜单",
                 trigger: "blur"
-              }]
-            },
+              }
+            ]
+          },
 
-            {
-              label: "菜单类型",
-              prop: "category",
-              type: "radio",
-              dicData: [
-                {
-                  label: "菜单",
-                  value: 1
-                },
-                {
-                  label: "按钮",
-                  value: 2
-                }
-              ],
-              hide: true,
-              rules: [{
+          {
+            label: "菜单类型",
+            prop: "category",
+            type: "radio",
+            dicData: [
+              {
+                label: "菜单",
+                value: 1
+              },
+              {
+                label: "按钮",
+                value: 2
+              }
+            ],
+            hide: true,
+            rules: [
+              {
                 required: true,
                 message: "请选择菜单类型",
                 trigger: "blur"
-              }]
-            },
-            {
-              label: "菜单排序",
-              prop: "sort",
-              type: "number",
-              rules: [{
+              }
+            ]
+          },
+          {
+            label: "菜单排序",
+            prop: "sort",
+            type: "number",
+            rules: [
+              {
                 required: true,
                 message: "请输入菜单排序",
                 trigger: "blur"
-              }]
-            },
-            {
-              label: "按钮功能",
-              prop: "action",
-              type: "radio",
-              dicData: [
-                {
-                  label: "工具栏",
-                  value: 0
-                },
-                {
-                  label: "操作栏",
-                  value: 1
-                },
-                {
-                  label: "工具操作栏",
-                  value: 2
-                }
-              ],
-              hide: true,
-              rules: [{
+              }
+            ]
+          },
+          {
+            label: "按钮功能",
+            prop: "action",
+            type: "radio",
+            dicData: [
+              {
+                label: "工具栏",
+                value: 0
+              },
+              {
+                label: "操作栏",
+                value: 1
+              },
+              {
+                label: "工具操作栏",
+                value: 2
+              }
+            ],
+            hide: true,
+            rules: [
+              {
                 required: true,
                 message: "请选择按钮功能",
                 trigger: "blur"
-              }]
-            },
-            {
-              label: "菜单备注",
-              prop: "remark",
-              type: "textarea",
-              span: 24,
-              minRows: 6,
-              hide: true
-            }
-          ]
-        },
-        data: []
+              }
+            ]
+          },
+          {
+            label: "菜单备注",
+            prop: "remark",
+            type: "textarea",
+            span: 24,
+            minRows: 6,
+            hide: true
+          }
+        ]
+      },
+      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
       };
     },
-
-    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() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    }
+  },
+  methods: {
+    rowSave(row, loading) {
+      add(row).then(() => {
+        loading();
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
         });
-        return ids.join(",");
-      }
+      });
+    },
+    rowUpdate(row, index, loading) {
+      update(row).then(() => {
+        loading();
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+      });
     },
-    methods: {
-      rowSave(row, loading) {
-        add(row).then(() => {
-          loading();
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
           this.onLoad(this.page);
           this.$message({
             type: "success",
             message: "操作成功!"
           });
         });
-      },
-      rowUpdate(row, index, loading) {
-        update(row).then(() => {
-          loading();
+    },
+    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();
         });
-      },
-      rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          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;
+    },
+    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;
+      });
     }
-  };
+  }
+};
 </script>
 
 <style>