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>
|