feat:引入TreeSelect和IconSelect组件

src/components/IconSelect/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="icon-body">
+    <el-input
+      v-model="iconName"
+      style="position: relative;"
+      clearable
+      placeholder="请输入图标名称"
+      @clear="filterIcons"
+      @input="filterIcons"
+    >
+      <template #suffix><i class="el-icon-search el-input__icon" /></template>
+    </el-input>
+    <div class="icon-list">
+      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+        <svg-icon color="#999" :icon-class="item" style="height: 30px;width: 16px;margin-right: 5px" />
+        <span>{{ item }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {defineEmits, ref} from "vue";
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+let icons = []
+const modules = import.meta.glob('../../assets/icons/svg/*.svg');
+for (const path in modules) {
+  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
+  icons.push(p);
+}
+const iconList = ref(icons);
+
+const iconName = ref('');
+
+const emit = defineEmits(['selected']);
+
+function filterIcons() {
+  iconList.value = icons
+  if (iconName.value) {
+    iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
+  }
+}
+
+function selectedIcon(name) {
+  emit('selected', name)
+  document.body.click()
+}
+
+function reset() {
+  iconName.value = ''
+  iconList.value = icons
+}
+
+defineExpose({
+  reset
+})
+</script>
+
+<style lang='scss' scoped>
+.icon-body {
+  width: 100%;
+  padding: 10px;
+  .icon-list {
+    height: 200px;
+    overflow-y: scroll;
+    div {
+      height: 30px;
+      line-height: 30px;
+      margin-bottom: -5px;
+      cursor: pointer;
+      width: 33%;
+      float: left;
+    }
+    span {
+      display: inline-block;
+      vertical-align: -0.15em;
+      fill: currentColor;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/components/TreeSelect/index.vue

@@ -1,195 +1,155 @@
 <template>
+  <div class="el-tree-select">
     <el-select
-    v-model="valueTitle"
+        style="width: 100%"
-    :clearable="clearable"
+        v-model="valueId"
+        ref="treeSelect"
+        :filterable="true"
+        :clearable="true"
         @clear="clearHandle"
+        :filter-method="selectFilterData"
         :placeholder="placeholder"
     >
-    <el-option
+      <el-option :value="valueId" :label="valueTitle">
-      :value="valueTitle"
-      :label="valueTitle"
-      class="options"
-    >
         <el-tree
             id="tree-option"
             ref="selectTree"
             :accordion="accordion"
             :data="options"
-        :props="treeProps"
+            :props="state.props"
-        :node-key="treeProps.value"
+            :node-key="state.props.value"
+            :expand-on-click-node="false"
             :default-expanded-keys="defaultExpandedKey"
+            :filter-node-method="filterNode"
             @node-click="handleNodeClick"
-        :disabled="disabled"
+        ></el-tree>
-      />
       </el-option>
     </el-select>
+  </div>
 </template>
 
-<script lang="ts">
+<script setup>
-import { defineComponent, reactive, toRefs, nextTick, onMounted, getCurrentInstance, PropType, watch } from 'vue'
+import {defineEmits, ref, getCurrentInstance ,nextTick,onMounted,computed,watch} from "vue";
+const { proxy } = getCurrentInstance();
 
-interface TreeProps {
+const state = defineProps({
-  value: number
+  /* 配置项 */
-  label: string
-  children: string
-}
-
-export default defineComponent({
-  name: 'ElTreeSelect',
   props: {
-    placeholder: {
+    type: Object,
+    default: () => {
+      return {
+        value: 'id', // ID字段名
+        label: 'label', // 显示名称
+        children: 'children' // 子级字段名
+      }
+    }
+  },
+  /* 自动收起 */
+  accordion: {
+    type: Boolean,
+    default: () => {
+      return false
+    }
+  },
+  /**当前双向数据绑定的值 */
+  value: {
     type: [String, Number],
     default: ''
   },
-    user: {
+  /**当前的数据 */
-      type: Boolean,
+  options: {
-      default: false
+    type: Array,
+    default: () => []
   },
-    // 选项列表数据(一维数组)
+  /**输入框内部的文字 */
-    originOptions: { type: Array, required: true },
+  placeholder: {
-    // 选项列表数据(树形结构的对象数组)
+    type: String,
-    options: { type: Array, required: true },
+    default: ''
-    // 初始值
-    defalut: { type: [String,Number], default: null },
-    // 可清空选项
-    clearable: { type: Boolean, default: true },
-    // 自动收起
-    accordion: { type: Boolean, default: false },
-    treeProps: {
-      type: Object as PropType<TreeProps>,
-      default: () => {
-        return {
-          value: 'menuId',
-          label: 'menuName',
-          children: 'children'
   }
-      }
-    },
-    disabled: {
-      type: Boolean, default: false
-    }
-  },
-  emits: ['callBack'],
-  setup(props, ctx) {
-    const instance = getCurrentInstance() as any
-    const state = reactive({
-      valueId: 0,
-      valueTitle: '',
-      defaultExpandedKey: Array<number>()
 })
 
-    // 初始化滚动条
+const emit = defineEmits(['update:value']);
-    const initScroll = () => {
+
+const valueId = computed({
+  get: () => state.value,
+  set: (val) => {
+    emit('update:value', val)
+  }
+});
+const valueTitle = ref('');
+const defaultExpandedKey = ref([]);
+
+function initHandle() {
   nextTick(() => {
-        const scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0] as any
+    const selectedValue = valueId.value;
-        const scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar') as any
+    if(selectedValue !== null && typeof (selectedValue) !== "undefined"){
-        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
+      const node = proxy.$refs.selectTree.getNode(selectedValue)
-        scrollBar.forEach((ele: any) => {
+      if (node) {
-          ele.style.width = 0
+        valueTitle.value = node.data[state.props.label]
-        })
+        proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
+        defaultExpandedKey.value = [selectedValue] // 设置默认展开
+      }else{
+        clearHandle()
+      }
+    }
   })
 }
-
+function handleNodeClick(node) {
-    // 清空选中样式
+  valueTitle.value = node[state.props.label]
-    const clearSelected = () => {
+  valueId.value = node[state.props.value];
+  defaultExpandedKey.value = [];
+  proxy.$refs.treeSelect.blur()
+  selectFilterData('')
+}
+function selectFilterData(val) {
+  proxy.$refs.selectTree.filter(val)
+}
+function filterNode(value, data) {
+  if (!value) return true
+  return data[state.props['label']].indexOf(value) !== -1
+}
+function clearHandle() {
+  valueTitle.value = ''
+  valueId.value = ''
+  defaultExpandedKey.value = [];
+  clearSelected()
+}
+function clearSelected() {
   const allNode = document.querySelectorAll('#tree-option .el-tree-node')
   allNode.forEach((element) => element.classList.remove('is-current'))
 }
 
-    const initHandle = () => {
-      initScroll()
-    }
-
-    // 处理默认值并显示
-    const defaultValue = () => {
-      if (props.defalut !== null) {
-        const deafaultModels = props.originOptions.filter((item: any) => {
-          return item[props.treeProps.value] === props.defalut
-        })
-
-        if (deafaultModels.length > 0) {
-          state.valueId = props.defalut
-          state.valueTitle = (deafaultModels[0] as any)[props.treeProps.label]
-        } else {
-          if (!props.user) {
-            state.valueId = 0
-            state.valueTitle = '主类目'
-          } else {
-            state.valueId = 0
-            state.valueTitle = ''
-          }
-        }
-        instance.ctx.$refs.selectTree.setCurrentKey(props.defalut)
-        state.defaultExpandedKey = [props.defalut] as number[]
-      }
-    }
-
 onMounted(() => {
   initHandle()
 })
 
-    watch(() => props.options, () => {
+watch(valueId, () => {
-      if (props.options) {
+  initHandle();
-        defaultValue()
-      }
-    })
-
-    // 更新数据
-    const updateData = (value: any, label: any) => {
-      state.valueTitle = label
-      state.valueId = value
-      state.defaultExpandedKey = []
-      ctx.emit('callBack', value)
-    }
-
-    // 点击节点调用
-    const handleNodeClick = (node: any) => {
-      updateData(node[props.treeProps.value], node[props.treeProps.label])
-    }
-
-    // 清除选中
-    const clearHandle = () => {
-      updateData(null, null)
-      clearSelected()
-    }
-
-    return {
-      ...toRefs(state),
-      handleNodeClick,
-      clearHandle
-    }
-  }
 })
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
-.el-select.el-select--medium{
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  width: 100%;
+  padding: 0;
+  background-color: #fff;
+  height: auto;
 }
 
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
 .el-select-dropdown__item.selected {
   font-weight: normal;
 }
-ul li :deep(.el-tree .el-tree-node__content) {
+
+ul li  .el-tree .el-tree-node__content {
   height: auto;
   padding: 0 20px;
+  box-sizing: border-box;
 }
-.el-tree-node__label {
+
-  font-weight: normal;
+:deep(.el-tree-node__content:hover),
-}
+:deep(.el-tree-node__content:active),
-.el-tree :deep(.is-current .el-tree-node__label) {
+:deep(.is-current > div:first-child),
-  color: #409eff;
+:deep( .el-tree-node__content:focus ){
-  font-weight: 700;
+  background-color: mix(#fff, #409EFF, 90%);
-}
+  color: #409EFF;
-.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
-  color: #606266;
-  font-weight: normal;
 }
 </style>

src/views/system/menu/components/Menu.vue

@@ -83,12 +83,10 @@
           :rules="state.rules"
           label-width="80px">
         <el-form-item label="父级菜单" prop="parentId">
-          <treeselect
+          <tree-select
-              placeholder="请选择父级菜单"
+              v-model:value="state.formData.parentId"
-              v-model="state.formData.parentId"
-              :multiple="false"
               :options="state.menuOptions"
-              :defaultExpandLevel="1"
+              placeholder="选择上级菜单"
           />
         </el-form-item>
 
@@ -115,7 +113,30 @@
         </el-form-item>
 
         <el-form-item label="菜单图标">
-          <el-input v-model="state.formData.icon" placeholder="请输入图标" maxlength="50"/>
+
+          <el-popover
+              placement="bottom-start"
+              :width="540"
+              v-model:visible="showChooseIcon"
+              trigger="click"
+              @show="showSelectIcon"
+          >
+            <icon-select ref="iconSelectRef" @selected="selected"/>
+            <template #reference>
+              <el-input v-model="state.formData.icon" placeholder="点击选择图标" readonly>
+                <template #prefix>
+                  <svg-icon
+                      v-if="state.formData.icon"
+                      :icon-class="state.formData.icon"
+                      class="el-input__icon"
+                      style="height: 40px;width: 16px;"
+                      color="#999"
+                  />
+                  <i v-else class="el-icon-search el-input__icon"/>
+                </template>
+              </el-input>
+            </template>
+          </el-popover>
         </el-form-item>
 
         <el-form-item label="状态">
@@ -150,12 +171,15 @@ import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus";
 import {defineEmits, reactive, ref, unref, onMounted, getCurrentInstance} from "vue";
 
-import Treeselect from 'vue3-treeselect'
-import 'vue3-treeselect/dist/vue3-treeselect.css'
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
-const emit = defineEmits(['menuClick'])
+import TreeSelect from '@/components/TreeSelect/index.vue';
+import IconSelect from '@/components/IconSelect/index.vue';
 
+
+const emit = defineEmits(['menuClick'])
+const showChooseIcon = ref(false);
+const iconSelectRef = ref(null);
 const state = reactive({
   loading: true,
   // 选中ID数组
@@ -180,7 +204,7 @@ const state = reactive({
     parentId: 0,
     name: undefined,
     visible: 1,
-    icon: undefined,
+    icon: '',
     sort: 1,
     component: 'Layout',
     path: undefined
@@ -220,7 +244,7 @@ function handleQuery() {
 function loadTreeSelectMenuOptions() {
   const menuOptions: any[] = []
   listTreeSelectMenus().then(response => {
-    const menuOption = {id: 0, label: '无', children: response.data}
+    const menuOption = {id: 0, label: '顶级菜单', children: response.data}
     menuOptions.push(menuOption)
     state.menuOptions = menuOptions
   })
@@ -268,6 +292,7 @@ function handleUpdate(row: any) {
 }
 
 const dataForm = ref(ElForm)
+
 function submitForm() {
   const form = unref(dataForm)
   form.validate((valid: any) => {
@@ -296,7 +321,7 @@ function resetForm() {
     parentId: 0,
     name: undefined,
     visible: 1,
-    icon: undefined,
+    icon: '',
     sort: 1,
     component: 'Layout',
     path: undefined
@@ -323,6 +348,17 @@ function handleDelete(row: any) {
   )
 }
 
+function showSelectIcon() {
+  (iconSelectRef as any).value.reset();
+  showChooseIcon.value = true;
+}
+
+function selected(name: string) {
+  state.formData.icon = name;
+  showChooseIcon.value = false;
+}
+
+
 onMounted(() => {
   handleQuery()
 })

vite.config.ts

@@ -12,12 +12,11 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
 
     return (
         {
-
             plugins: [
                 vue(),
                 viteSvgIcons({
                     // 指定需要缓存的图标文件夹
-                    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+                    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
                     // 指定symbolId格式
                     symbolId: 'icon-[dir]-[name]',
                 })