更新

src/view/superAdmin/menu/components/components-cascader.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="flex justify-between items-center gap-2 w-full">
+    <el-cascader
+      v-if="pathIsSelect"
+      placeholder="请选择文件路径"
+      :options="pathOptions"
+      v-model="activeComponent"
+      filterable
+      class="!w-full"
+      clearable
+      @change="emitChange"
+    />
+    <el-input
+      v-else
+      v-model="tempPath"
+      placeholder="页面:view/xxx/xx.vue 插件:plugin/xx/xx.vue"
+      @change="emitChange"
+    />
+    <el-button @click="togglePathIsSelect"
+      >{{ pathIsSelect ? '手动输入' : '快捷选择' }}
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref, watch } from 'vue'
+  import pathInfo from '@/pathInfo.json'
+
+  const props = defineProps({
+    component: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const emits = defineEmits(['change'])
+
+  const pathOptions = ref([])
+  const tempPath = ref('')
+  const activeComponent = ref([])
+  const pathIsSelect = ref(true)
+
+  const togglePathIsSelect = () => {
+    if (pathIsSelect.value) {
+      tempPath.value = activeComponent.value?.join('/') || ''
+    } else {
+      activeComponent.value = tempPath.value?.split('/') || []
+    }
+
+    pathIsSelect.value = !pathIsSelect.value
+    emitChange()
+  }
+
+  function convertToCascaderOptions(data) {
+    const result = []
+
+    for (const path in data) {
+      const label = data[path]
+      const parts = path.split('/').filter(Boolean)
+
+      // 如果第一个部分是 'src'，则从第二个部分开始处理
+      const startIndex = parts[0] === 'src' ? 1 : 0
+
+      let currentLevel = result
+
+      for (let i = startIndex; i < parts.length; i++) {
+        const part = parts[i]
+        let node = currentLevel.find((item) => item.value === part)
+
+        if (!node) {
+          node = {
+            value: part,
+            label: part,
+            children: []
+          }
+          currentLevel.push(node)
+        }
+
+        if (i === parts.length - 1) {
+          // 如果是路径的最后一部分，设置标签并移除 children
+          node.label = label
+          delete node.children
+        }
+
+        currentLevel = node.children || []
+      }
+    }
+
+    return result
+  }
+
+  watch(
+    () => props.component,
+    (value) => {
+      initCascader(value)
+    }
+  )
+
+  onMounted(() => {
+    pathOptions.value = convertToCascaderOptions(pathInfo)
+    initCascader(props.component)
+  })
+
+  const initCascader = (value) => {
+    // 新增的时候
+    if (value === '') {
+      pathIsSelect.value = true
+      return
+    }
+
+    // 编辑的时候，根据路径判断是选择框还是输入框
+    if (pathInfo[`/src/${value}`]) {
+      activeComponent.value = value.split('/').filter(Boolean)
+      tempPath.value = ''
+      pathIsSelect.value = true
+      return
+    }
+    tempPath.value = value
+    activeComponent.value = []
+    pathIsSelect.value = false
+  }
+
+  const emitChange = () => {
+    emits(
+      'change',
+      pathIsSelect.value ? activeComponent.value?.join('/') : tempPath.value
+    )
+  }
+</script>
+
+<style scoped lang="scss"></style>