系统·优化

src/components/IconSelect/index.vue

@@ -1,7 +1,7 @@
 <!-- @author zhengjie -->
 <template>
   <div class="icon-body">
-    <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
+    <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="getIcons">
       <i slot="suffix" class="el-icon-search el-input__icon" />
     </el-input>
     <div class="icon-list">
@@ -12,6 +12,15 @@
             <span>{{ item }}</span>
           </div>
         </div>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="page"
+          :limit.sync="pageSize"
+          :pageSizes="pageSizes"
+          @pagination="getIcons"
+        />
       </div>
     </div>
   </div>
@@ -29,7 +38,11 @@ export default {
   data() {
     return {
       name: '',
-      iconList: icons
+      iconList: icons,
+      page:1,
+      pageSize:25,
+      total: icons.length,
+      pageSizes:[25]
     }
   },
   methods: {
@@ -38,6 +51,21 @@ export default {
       if (this.name) {
         this.iconList = this.iconList.filter(item => item.includes(this.name))
       }
+      this.page = 1;
+      this.total = this.iconList.length;
+      const start = (this.page - 1) * this.pageSize;
+      this.iconList = this.iconList.slice(start, start + this.pageSize)
+      return this.iconList;
+    },
+    getIcons() {
+      this.iconList = icons;
+      if (this.name) {
+        this.iconList = this.iconList.filter(item => item.includes(this.name));
+      }
+      this.total = this.iconList.length;
+      const start = (this.page - 1) * this.pageSize;
+      this.iconList = this.iconList.slice(start, start + this.pageSize)
+      return this.iconList;
     },
     selectedIcon(name) {
       this.$emit('selected', name)
@@ -45,7 +73,10 @@ export default {
     },
     reset() {
       this.name = ''
-      this.iconList = icons
+      this.iconList = icons;
+      this.total = this.iconList.length;
+      const start = (this.page - 1) * this.pageSize;
+      this.iconList = this.iconList.slice(start, start + this.pageSize)
     }
   }
 }
@@ -66,7 +97,7 @@ export default {
         display: flex;
         flex-wrap: wrap;
         .icon-item-wrapper {
-          width: calc(100% / 3);
+          width: calc(100% / 5);
           height: 25px;
           line-height: 25px;
           cursor: pointer;

src/main.js

@@ -59,7 +59,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 DictData.install()
-
+Element.Dialog.props.closeOnClickModal.default = false; // 全局关闭点遮罩关闭弹框
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/system/menu/index.vue

@@ -65,6 +65,11 @@
       <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
       <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="menuType" label="状态" width="80">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_menu_type" :value="scope.row.menuType"/>
+        </template>
+      </el-table-column>
       <el-table-column prop="status" label="状态" width="80">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
@@ -134,7 +139,7 @@
             <el-form-item label="菜单图标" prop="icon">
               <el-popover
                 placement="bottom-start"
-                width="460"
+                width="685"
                 trigger="click"
                 @show="$refs['iconSelect'].reset()"
               >
@@ -306,7 +311,7 @@ import IconSelect from "@/components/IconSelect"
 
 export default {
   name: "Menu",
-  dicts: ['sys_show_hide', 'sys_normal_disable'],
+  dicts: ['sys_show_hide', 'sys_normal_disable','sys_menu_type'],
   components: { Treeselect, IconSelect },
   data() {
     return {