Browse Source

feat icon-select

smallwei 6 years ago
parent
commit
3fa9d88d06

File diff suppressed because it is too large
+ 1 - 1
public/cdn/avue/index.css


File diff suppressed because it is too large
+ 1 - 1
public/cdn/avue/index.js


+ 43 - 0
src/const/iconList.js

@@ -0,0 +1,43 @@
+export default [
+  {
+    label: "基本图标",
+    list: [
+      "el-icon-info",
+      "el-icon-error",
+      "el-icon-error",
+      "el-icon-success",
+      "el-icon-warning",
+      "el-icon-question"
+    ]
+  },
+  {
+    label: "方向图标",
+    list: [
+      "el-icon-info",
+      "el-icon-back",
+      "el-icon-arrow-left",
+      "el-icon-arrow-down",
+      "el-icon-arrow-right",
+      "el-icon-arrow-up"
+    ]
+  },
+  {
+    label: "符号图标",
+    list: [
+      "el-icon-plus",
+      "el-icon-minus",
+      "el-icon-close",
+      "el-icon-check"
+    ]
+  },
+  {
+    label: "阿里云图标",
+    list: [
+      "iconfont icon-zhongyingwen",
+      "iconfont icon-rizhi1",
+      "iconfont icon-bug",
+      "iconfont icon-qq1",
+      "iconfont icon-weixin1"
+    ]
+  }
+]

+ 10 - 8
src/page/index/top/index.vue

@@ -60,10 +60,12 @@
              @click="handleScreen"></i>
         </div>
       </el-tooltip>
-      <el-tooltip v-if="this.userInfo.avatar" effect="dark"
+      <el-tooltip v-if="this.userInfo.avatar"
+                  effect="dark"
                   content="用户头像"
                   placement="bottom">
-        <img id="thumbnail" class="top-bar__img">
+        <img id="thumbnail"
+             class="top-bar__img">
       </el-tooltip>
       <el-dropdown>
         <span class="el-dropdown-link">
@@ -81,20 +83,20 @@
                             divided>退出系统</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <top-setting></top-setting>
+      <!-- <top-setting></top-setting> -->
     </div>
   </div>
 </template>
 <script>
 import { mapGetters, mapState } from "vuex";
-import { fullscreenToggel, listenfullscreen,handleImg } from "@/util/util";
+import { fullscreenToggel, listenfullscreen, handleImg } from "@/util/util";
 import topLock from "./top-lock";
 import topMenu from "./top-menu";
 import topSearch from "./top-search";
 import topTheme from "./top-theme";
 import topLogs from "./top-logs";
 import topColor from "./top-color";
-import topSetting from "./top-setting";
+// import topSetting from "./top-setting";
 export default {
   components: {
     topLock,
@@ -102,8 +104,8 @@ export default {
     topSearch,
     topTheme,
     topLogs,
-    topColor,
-    topSetting
+    topColor
+    // topSetting
   },
   name: "top",
   data() {
@@ -111,7 +113,7 @@ export default {
   },
   filters: {},
   created() {
-    handleImg(this.userInfo.avatar, 'thumbnail');
+    handleImg(this.userInfo.avatar, "thumbnail");
   },
   mounted() {
     listenfullscreen(this.setScreen);

+ 7 - 7
src/router/axios.js

@@ -1,9 +1,9 @@
-import {serialize} from '@/util/util'
-import {getStore} from '../util/store'
+import { serialize } from '@/util/util'
+import { getStore } from '../util/store'
 import NProgress from 'nprogress' // progress bar
 import errorCode from '@/const/errorCode'
 import router from "@/router/router"
-import {Message} from 'element-ui'
+import { Message } from 'element-ui'
 import 'nprogress/nprogress.css'
 import store from "@/store"; // progress bar style
 axios.defaults.timeout = 30000
@@ -21,9 +21,9 @@ NProgress.configure({
 // HTTPrequest拦截
 axios.interceptors.request.use(config => {
   NProgress.start() // start progress bar
-  const TENANT_ID = getStore({name: 'tenantId'})
+  const TENANT_ID = getStore({ name: 'tenantId' })
   const isToken = (config.headers || {}).isToken === false
-  let token =  store.getters.access_token
+  let token = store.getters.access_token
   if (token && !isToken) {
     config.headers['Authorization'] = 'Bearer ' + token// token
   }
@@ -31,7 +31,7 @@ axios.interceptors.request.use(config => {
     config.headers['TENANT_ID'] = TENANT_ID // 租户ID
   }
   // headers中配置serialize为true开启序列化
-  if (config.methods === 'post' && config.headers.serialize) {
+  if (config.method === 'post' && config.headers.serialize) {
     config.data = serialize(config.data)
     delete config.data.serialize
   }
@@ -48,7 +48,7 @@ axios.interceptors.response.use(res => {
   const message = res.data.msg || errorCode[status] || errorCode['default']
   if (status === 401) {
     store.dispatch('FedLogOut').then(() => {
-      router.push({path: '/login'})
+      router.push({ path: '/login' })
     })
     return
   }

+ 193 - 187
src/views/admin/menu/index.vue

@@ -86,9 +86,10 @@
               </el-form-item>
               <el-form-item label="图标"
                             prop="icon">
-                <el-input v-model="form.icon"
-                          :disabled="formEdit"
-                          placeholder="请输入图标"></el-input>
+                <avue-crud-icon-select v-model="form.icon"
+                                       :iconList="iconList"
+                                       :disabled="formEdit"
+                                       placeholder="请输入图标"></avue-crud-icon-select>
               </el-form-item>
               <el-form-item label="类型"
                             prop="type">
@@ -152,202 +153,207 @@
 </template>
 
 <script>
-  import {addObj, delObj, fetchMenuTree, getObj, putObj} from '@/api/admin/menu'
-  import {mapGetters} from 'vuex'
+import {
+  addObj,
+  delObj,
+  fetchMenuTree,
+  getObj,
+  putObj
+} from "@/api/admin/menu";
+import { mapGetters } from "vuex";
+import iconList from "@/const/iconList";
 
-  export default {
-    name: 'menu',
-    data() {
-      return {
-        list: null,
-        total: null,
-        formEdit: true,
-        formAdd: true,
-        formStatus: '',
-        showElement: false,
-        typeOptions: ['0', '1'],
-        methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
-        listQuery: {
-          name: undefined
-        },
-        treeData: [],
-        oExpandedKey: {
-          // key (from tree id) : expandedOrNot boolean
-        },
-        oTreeNodeChildren: {
-          // id1 : [children] (from tree node id1)
-          // id2 : [children] (from tree node id2)
-        },
-        aExpandedKeys: [],
-        defaultProps: {
-          children: 'children',
-          label: 'name'
-        },
-        labelPosition: 'right',
-        form: {
-          permission: undefined,
-          name: undefined,
-          menuId: undefined,
-          parentId: undefined,
-          icon: undefined,
-          sort: undefined,
-          component: undefined,
-          type: undefined,
-          path: undefined
-        },
-        currentId: -1,
-        menuManager_btn_add: false,
-        menuManager_btn_edit: false,
-        menuManager_btn_del: false
-      }
-    },
-    filters: {
-      typeFilter(type) {
-        const typeMap = {
-          0: '菜单',
-          1: '按钮'
-        }
-        return typeMap[type]
-      }
-    },
-    created() {
-      this.getList()
-      this.menuManager_btn_add = this.permissions['sys_menu_add']
-      this.menuManager_btn_edit = this.permissions['sys_menu_edit']
-      this.menuManager_btn_del = this.permissions['sys_menu_del']
-    },
-    computed: {
-      ...mapGetters([
-        'elements',
-        'permissions'
-      ])
-    },
-    methods: {
-      getList() {
-        fetchMenuTree(this.listQuery).then(response => {
-          this.treeData = response.data.data
-        })
-      },
-      filterNode(value, data) {
-        if (!value) return true
-        return data.label.indexOf(value) !== -1
+export default {
+  name: "menu",
+  data() {
+    return {
+      iconList: iconList,
+      list: null,
+      total: null,
+      formEdit: true,
+      formAdd: true,
+      formStatus: "",
+      showElement: false,
+      typeOptions: ["0", "1"],
+      methodOptions: ["GET", "POST", "PUT", "DELETE"],
+      listQuery: {
+        name: undefined
       },
-
-      nodeExpand(data) {
-        let aChildren = data.children
-        if (aChildren.length > 0) {
-          this.oExpandedKey[data.id] = true
-          this.oTreeNodeChildren[data.id] = aChildren
-        }
-        this.setExpandedKeys()
+      treeData: [],
+      oExpandedKey: {
+        // key (from tree id) : expandedOrNot boolean
       },
-      nodeCollapse(data) {
-        this.oExpandedKey[data.id] = false
-        // 如果有子节点
-        this.treeRecursion(this.oTreeNodeChildren[data.id], (oNode) => {
-          this.oExpandedKey[oNode.id] = false
-        });
-        this.setExpandedKeys()
+      oTreeNodeChildren: {
+        // id1 : [children] (from tree node id1)
+        // id2 : [children] (from tree node id2)
       },
-      setExpandedKeys() {
-        let oTemp = this.oExpandedKey
-        this.aExpandedKeys = []
-        for (let sKey in oTemp) {
-          if (oTemp[sKey]) {
-            this.aExpandedKeys.push(parseInt(sKey));
-          }
-        }
+      aExpandedKeys: [],
+      defaultProps: {
+        children: "children",
+        label: "name"
       },
-      treeRecursion(aChildren, fnCallback) {
-        if (aChildren) {
-          for (let i = 0; i < aChildren.length; ++i) {
-            let oNode = aChildren[i]
-            fnCallback && fnCallback(oNode)
-            this.treeRecursion(oNode.children, fnCallback)
-          }
-        }
+      labelPosition: "right",
+      form: {
+        permission: undefined,
+        name: undefined,
+        menuId: undefined,
+        parentId: undefined,
+        icon: undefined,
+        sort: undefined,
+        component: undefined,
+        type: undefined,
+        path: undefined
       },
+      currentId: -1,
+      menuManager_btn_add: false,
+      menuManager_btn_edit: false,
+      menuManager_btn_del: false
+    };
+  },
+  filters: {
+    typeFilter(type) {
+      const typeMap = {
+        0: "菜单",
+        1: "按钮"
+      };
+      return typeMap[type];
+    }
+  },
+  created() {
+    this.getList();
+    this.menuManager_btn_add = this.permissions["sys_menu_add"];
+    this.menuManager_btn_edit = this.permissions["sys_menu_edit"];
+    this.menuManager_btn_del = this.permissions["sys_menu_del"];
+  },
+  computed: {
+    ...mapGetters(["elements", "permissions"])
+  },
+  methods: {
+    getList() {
+      fetchMenuTree(this.listQuery).then(response => {
+        this.treeData = response.data.data;
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
 
-      getNodeData(data) {
-        if (!this.formEdit) {
-          this.formStatus = 'update'
+    nodeExpand(data) {
+      let aChildren = data.children;
+      if (aChildren.length > 0) {
+        this.oExpandedKey[data.id] = true;
+        this.oTreeNodeChildren[data.id] = aChildren;
+      }
+      this.setExpandedKeys();
+    },
+    nodeCollapse(data) {
+      this.oExpandedKey[data.id] = false;
+      // 如果有子节点
+      this.treeRecursion(this.oTreeNodeChildren[data.id], oNode => {
+        this.oExpandedKey[oNode.id] = false;
+      });
+      this.setExpandedKeys();
+    },
+    setExpandedKeys() {
+      let oTemp = this.oExpandedKey;
+      this.aExpandedKeys = [];
+      for (let sKey in oTemp) {
+        if (oTemp[sKey]) {
+          this.aExpandedKeys.push(parseInt(sKey));
         }
-        getObj(data.id).then(response => {
-          this.form = response.data.data
-        })
-        this.currentId = data.id
-        this.showElement = true
-      },
-      handlerEdit() {
-        if (this.form.menuId) {
-          this.formEdit = false
-          this.formStatus = 'update'
+      }
+    },
+    treeRecursion(aChildren, fnCallback) {
+      if (aChildren) {
+        for (let i = 0; i < aChildren.length; ++i) {
+          let oNode = aChildren[i];
+          fnCallback && fnCallback(oNode);
+          this.treeRecursion(oNode.children, fnCallback);
         }
-      },
-      handlerAdd() {
-        this.resetForm()
-        this.formEdit = false
-        this.formStatus = 'create'
-      },
-      handleDelete() {
-        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          delObj(this.currentId).then(() => {
-            this.getList()
-            this.resetForm()
-            this.onCancel()
-            this.$notify({
-              title: '成功',
-              message: '删除成功',
-              type: 'success',
-              duration: 2000
-            })
-          })
-        })
-      },
-      update() {
-        putObj(this.form).then(() => {
-          this.getList()
-          this.$notify({
-            title: '成功',
-            message: '更新成功',
-            type: 'success',
-            duration: 2000
-          })
-        })
-      },
-      create() {
-        addObj(this.form).then(() => {
-          this.getList()
+      }
+    },
+
+    getNodeData(data) {
+      if (!this.formEdit) {
+        this.formStatus = "update";
+      }
+      getObj(data.id).then(response => {
+        this.form = response.data.data;
+      });
+      this.currentId = data.id;
+      this.showElement = true;
+    },
+    handlerEdit() {
+      if (this.form.menuId) {
+        this.formEdit = false;
+        this.formStatus = "update";
+      }
+    },
+    handlerAdd() {
+      this.resetForm();
+      this.formEdit = false;
+      this.formStatus = "create";
+    },
+    handleDelete() {
+      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        delObj(this.currentId).then(() => {
+          this.getList();
+          this.resetForm();
+          this.onCancel();
           this.$notify({
-            title: '成功',
-            message: '创建成功',
-            type: 'success',
+            title: "成功",
+            message: "删除成功",
+            type: "success",
             duration: 2000
-          })
-        })
-      },
-      onCancel() {
-        this.formEdit = true
-        this.formStatus = ''
-      },
-      resetForm() {
-        this.form = {
-          permission: undefined,
-          name: undefined,
-          menuId: undefined,
-          parentId: this.currentId,
-          icon: undefined,
-          sort: undefined,
-          component: undefined,
-          type: undefined,
-          path: undefined
-        }
-      }
+          });
+        });
+      });
+    },
+    update() {
+      putObj(this.form).then(() => {
+        this.getList();
+        this.$notify({
+          title: "成功",
+          message: "更新成功",
+          type: "success",
+          duration: 2000
+        });
+      });
+    },
+    create() {
+      addObj(this.form).then(() => {
+        this.getList();
+        this.$notify({
+          title: "成功",
+          message: "创建成功",
+          type: "success",
+          duration: 2000
+        });
+      });
+    },
+    onCancel() {
+      this.formEdit = true;
+      this.formStatus = "";
+    },
+    resetForm() {
+      this.form = {
+        permission: undefined,
+        name: undefined,
+        menuId: undefined,
+        parentId: this.currentId,
+        icon: undefined,
+        sort: undefined,
+        component: undefined,
+        type: undefined,
+        path: undefined
+      };
     }
   }
+};
 </script>