95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<template>
|
||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||
<BasicTree ref="asyncExpandTreeRef" title="菜单列表" toolbar search
|
||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
|
||
:renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||
:defaultExpandAll="true" @select="handleSelect" />
|
||
<BasicModal @register="register" title="删除" :helpMessage="['提示1', '提示2']" @ok="handleSubmit">
|
||
确认要删除菜单吗？
|
||
</BasicModal>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, h, nextTick, unref } from 'vue';
|
||
import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
|
||
import { getMenuList, deleteMenu } from '@/api/demo/system';
|
||
import { FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||
import { BasicModal, useModal } from '@/components/Modal';
|
||
import { router } from '@/router';
|
||
const [register, { closeModal, openModal }] = useModal();
|
||
defineOptions({ name: 'DeptTree' });
|
||
|
||
const emit = defineEmits(['select', 'edit']);
|
||
|
||
const treeData = ref < TreeItem[] > ([]);
|
||
let selectItemId = ref('')
|
||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||
|
||
async function handleSubmit() {
|
||
var query = [selectItemId.value]
|
||
const data = await deleteMenu(query);
|
||
closeModal();
|
||
|
||
}
|
||
|
||
async function fetch() {
|
||
treeData.value = (await getMenuList()) as unknown as TreeItem[];
|
||
// 展开全部
|
||
nextTick(() => {
|
||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||
});
|
||
}
|
||
|
||
function handleSelect(keys) {
|
||
emit('select', keys[0]);
|
||
}
|
||
const btnList = router.currentRoute.value.meta.elements
|
||
const actionList: TreeActionItem[] = []
|
||
btnList.forEach(element => {
|
||
if (element.domId == 'btnEdit') {
|
||
actionList.push({
|
||
render: (node) => {
|
||
return h(FormOutlined, {
|
||
class: 'ml-2',
|
||
onClick: () => {
|
||
emit('edit', node);
|
||
},
|
||
});
|
||
},
|
||
})
|
||
} else if (element.domId == 'btnDelete') {
|
||
actionList.push({
|
||
render: (node) => {
|
||
return h(DeleteOutlined, {
|
||
class: 'ml-2',
|
||
onClick: () => {
|
||
selectItemId.value = node.id
|
||
openModal(true, {
|
||
isUpdate: false,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
})
|
||
}
|
||
});
|
||
|
||
function createIcon({ level }) {
|
||
if (level === 1) {
|
||
return 'ion:git-compare-outline';
|
||
}
|
||
if (level === 2) {
|
||
return 'ion:home';
|
||
}
|
||
if (level === 3) {
|
||
return 'ion:airplane';
|
||
}
|
||
return '';
|
||
}
|
||
onMounted(() => {
|
||
fetch();
|
||
});
|
||
defineExpose({
|
||
fetch
|
||
})
|
||
</script> |