132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<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>
|