初始版本提交

src/components/MenuSelect/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '/@/utils/index';
+import menuSelect from './src/MenuSelect.vue';
+import jumpMenu from './src/JumpMenu.vue';
+export const MenuSelect = withInstall(menuSelect);
+export const JumpMenu = withInstall(jumpMenu);

src/components/MenuSelect/src/JumpMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <TreeSelect
+      v-model:value="selectData"
+      style="width: 100%"
+      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+      :placeholder="placeholder"
+      allow-clear
+      tree-default-expand-all
+      :tree-data="treeData"
+      :field-names="{ children: 'children', label: 'title', value: 'id' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { TreeSelect } from 'ant-design-vue';
+  import { onMounted, ref } from 'vue';
+  import { getJumpMenuMenuTree } from '/@/api/system/menu';
+  const treeData = ref<Recordable[]>([]);
+  const selectData = ref<string | undefined>('');
+  const props = defineProps({
+    value: String,
+    placeholder: String,
+  });
+
+  const emit = defineEmits(['update:value', 'icon', 'name', 'path']);
+
+  onMounted(() => {
+    fetch();
+  });
+
+  async function fetch() {
+    treeData.value = ((await getJumpMenuMenuTree()) as unknown as Recordable[]) || [];
+    selectData.value = props.value;
+  }
+  function handleSelect(value, node) {
+    console.log('node: ', node);
+    emit('update:value', value);
+    emit('icon', node.icon);
+    emit('name', node.title);
+    emit('path', node.path);
+  }
+</script>

src/components/MenuSelect/src/MenuSelect.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <TreeSelect
+      v-model:value="selectData"
+      style="width: 100%"
+      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+      :placeholder="placeholder"
+      allow-clear
+      show-search
+      tree-default-expand-all
+      :tree-data="treeData"
+      :field-names="{ children: 'children', label: 'title', value: 'id' }"
+      tree-node-filter-prop="title"
+      @change="handleChange"
+      :key="key"
+    >
+      <template #title="{ systemName, parentId, title }">
+        {{ title }}&nbsp;&nbsp;<b v-if="!(parentId > 0)">[{{ systemName }}]</b>
+      </template>
+    </TreeSelect>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { TreeSelect } from 'ant-design-vue';
+  import { onMounted, ref, watch } from 'vue';
+  import { getMenuTree } from '/@/api/system/menu';
+  const treeData = ref<Recordable[]>([]);
+  const selectData = ref<string | undefined>('');
+
+  // const value = ref<string>();
+
+  const props = defineProps({
+    value: String,
+    placeholder: String,
+  });
+
+  const emit = defineEmits(['options-change', 'change', 'update:value']);
+  const key = ref(0);
+  onMounted(() => {
+    fetch();
+  });
+
+  watch(
+    () => props.value,
+    () => {
+      fetch();
+    },
+  );
+
+  async function fetch() {
+    treeData.value = ((await getMenuTree()) as unknown as Recordable[]) || [];
+    treeData.value = treeData.value.filter((data) => {
+      return process.env.NODE_ENV === 'production' ? data.systemId !== '1' : data;
+    });
+    selectData.value = props.value;
+    emit('options-change', treeData.value);
+  }
+
+  //多选
+  // function handleChange(...args) {
+  //   emit('change', ...args);
+  // }
+
+  //单选
+  function handleChange(val, node) {
+    selectData.value = val;
+    emit('change', val, node);
+    key.value++;
+  }
+</script>