feat: 添加菜单图标选择框

admin_2/src/pages/system/menu/Menu.vue

@@ -99,11 +99,11 @@ export default {
         //     return (this.current - 1) * this.size + index + 1;
         //   },
         // },
-        {
-          label: "树形展开",
-          width: "80",
-          align: "center",
-        },
+        // {
+        //   label: "树形展开",
+        //   width: "80",
+        //   align: "center",
+        // },
         {
           label: "菜单名称",
           prop: "name",
@@ -118,6 +118,11 @@ export default {
           label: "图标",
           align: "center",
           prop: "imgPath",
+          formatter: (row) => {
+            if (row.imgPath) {
+              return <i class={row.imgPath}></i>;
+            }
+          },
         },
         {
           label: "权限类型",

admin_2/src/pages/system/menu/components/AddMenu.vue

@@ -4,7 +4,7 @@
       :title="title"
       :destroy-on-close="true"
       :visible.sync="Visible"
-      width="40%"
+      width="610px"
       @close="handleClose"
       :close-on-click-modal="false"
       top="10vh"
@@ -17,7 +17,11 @@
         label-width="100px"
       >
         <el-form-item label="菜单名称" prop="name">
-          <el-input placeholder="请输入系统名称" v-model="form.name"></el-input>
+          <el-input
+            placeholder="请输入系统名称"
+            v-model="form.name"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item label="父级菜单" prop="parentId">
           <el-select
@@ -51,6 +55,7 @@
         </el-form-item>
         <el-form-item label="访问地址" prop="url">
           <el-input
+            clearable
             placeholder="请输入菜单访问地址"
             v-model="form.url"
           ></el-input>
@@ -77,7 +82,8 @@
         </el-form-item>
 
         <el-form-item label="图标" prop="imgPath">
-          <div class="icon-box grid grid-cols-2 gap-1">
+          <IconSelect v-model="form.imgPath"></IconSelect>
+          <!-- <div class="icon-box grid grid-cols-2 gap-1">
             <div
               :class="[
                 'icon-item',
@@ -101,7 +107,7 @@
               <i :class="v"></i>
               <span class="ml-2">{{ v }}</span>
             </div>
-          </div>
+          </div> -->
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -116,9 +122,12 @@
 
 <script>
 import { saveMenu } from "@/api/system";
+import IconSelect from "./IconSelect.vue";
 import iconJson from "@/assets/icon.json";
 export default {
-  components: {},
+  components: {
+    IconSelect,
+  },
   props: {
     title: {
       type: String,

admin_2/src/pages/system/menu/components/IconSelect.vue

+<template>
+  <el-popover placement="bottom-start" trigger="click" width="100%">
+    <div
+      class="content grid max-h-[300px] w-full grid-cols-2 gap-x-4 gap-y-2 overflow-auto"
+    >
+      <div
+        :class="['cursor-pointer indent-8', { active: value === '' }]"
+        @click="handleChange('')"
+      >
+        不需要图标
+      </div>
+      <div v-for="(v, i) in iconJson" :key="i">
+        <div
+          :class="[
+            'flex',
+            'cursor-pointer',
+            'items-center',
+            'gap-4',
+            { active: v === value },
+          ]"
+          @click="handleChange(v)"
+        >
+          <i :class="v"></i>
+          <span>{{ v }}</span>
+        </div>
+      </div>
+    </div>
+    <el-input
+      slot="reference"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :value="value"
+      readonly
+      :placeholder="placeholder"
+    >
+      <i v-if="value" slot="prefix" :class="value" />
+      <i v-else slot="prefix" class="el-icon-search" />
+    </el-input>
+  </el-popover>
+</template>
+
+<script>
+import iconJson from "@/assets/icon.json";
+export default {
+  model: {
+    prop: "value",
+    event: "change",
+  },
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "点击选择图标",
+    },
+  },
+  data() {
+    return {
+      iconJson,
+    };
+  },
+  methods: {
+    handleChange(v) {
+      this.$emit("change", v);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.content {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow-y: auto;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 6px;
+    background: rbga(0, 0, 0, 0);
+  }
+  .active {
+    color: var(--primary);
+  }
+}
+</style>

admin_2/src/router/index.js

@@ -186,15 +186,15 @@ const routes = [
               icon: "el-icon-box",
             },
           },
-          // {
-          //   path: "/system/menu",
-          //   component: () => import("@/pages/system/menu/Menu.vue"),
-          //   meta: {
-          //     activeMenu: "/system",
-          //     title: "菜单管理",
-          //     icon: "el-icon-guide",
-          //   },
-          // },
+          {
+            path: "/system/menu",
+            component: () => import("@/pages/system/menu/Menu.vue"),
+            meta: {
+              activeMenu: "/system",
+              title: "菜单管理",
+              icon: "el-icon-guide",
+            },
+          },
           {
             path: "/system/parameter",
             component: () => import("@/pages/system/parameter/Parameter.vue"),