43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
import type { Menu } from '#/api/system/menu/model';
|
||
|
|
|
||
|
|
import { computed, defineComponent, type PropType } from 'vue';
|
||
|
|
|
||
|
|
import { Tag } from 'ant-design-vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'TreeItem',
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
required: true,
|
||
|
|
type: Object as PropType<Menu>,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup(props, { expose }) {
|
||
|
|
expose();
|
||
|
|
|
||
|
|
interface TagProp {
|
||
|
|
color: string;
|
||
|
|
text: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const menuTagProp = computed<TagProp>(() => {
|
||
|
|
// 正则判断是否为链接
|
||
|
|
if (/^https?:\/\/[^\s/$.?#].\S*$/i.test(props.data.path)) {
|
||
|
|
return { color: 'pink', text: '外链' };
|
||
|
|
}
|
||
|
|
const type = props.data.menuType;
|
||
|
|
if (type === 'M') return { color: 'green', text: '目录' };
|
||
|
|
if (type === 'C') return { color: 'blue', text: '菜单' };
|
||
|
|
if (type === 'F') return { color: '', text: '按钮' };
|
||
|
|
return { color: 'error', text: '未知' };
|
||
|
|
});
|
||
|
|
|
||
|
|
return () => (
|
||
|
|
<div class="flex gap-[6px]">
|
||
|
|
<span>{props.data.menuName}</span>
|
||
|
|
<Tag color={menuTagProp.value.color}>{menuTagProp.value.text}</Tag>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|