125 lines
2.8 KiB
Vue
125 lines
2.8 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('/')
|
|
console.log(activeComponent.value)
|
|
}
|
|
|
|
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}` || pathInfo[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>
|