146 lines
3.7 KiB
Plaintext
146 lines
3.7 KiB
Plaintext
<template>
|
|
<div class="menu-index">
|
|
<a-card :bordered="false" class="pt-3 mb-3 proCard">
|
|
<div>
|
|
<a-space>
|
|
<a-button type="primary" @click="handleAdd()" v-perm="['sys:dept:add']">
|
|
<template #icon><PlusOutlined /></template>
|
|
新增
|
|
</a-button>
|
|
<a-button @click="handleExpand"> 展开/折叠</a-button>
|
|
</a-space>
|
|
</div>
|
|
</a-card>
|
|
<a-card :bordered="false" class="pt-3 mb-3 proCard">
|
|
<a-spin :spinning="loading">
|
|
<a-table border ref="tableRef" :dataSource="lists" :columns="columns" v-model:expandedRowKeys="expandKeys">
|
|
<template v-slot:bodyCell="{ column, record, index }">
|
|
<template v-if="column.key=='action'">
|
|
<a-space>
|
|
<a-button type="primary" @click="handleAdd(record.id)" v-perm="['sys:category:add']">
|
|
<template #icon><PlusOutlined /></template>
|
|
新增</a-button>
|
|
<a-button type="primary" @click="handleEdit(record)" v-perm="['sys:category:update']">
|
|
<template #icon><EditOutlined /></template>
|
|
编辑
|
|
</a-button>
|
|
<a-button type="primary" danger @click="handleDelete(record.id)" v-perm="['sys:category:delete']">
|
|
<template #icon><DeleteOutlined /></template>
|
|
删除
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</a-spin>
|
|
</a-card>
|
|
<editDialog
|
|
ref="editRef"
|
|
v-if="editVisible"
|
|
:categoryId="categoryId"
|
|
:pid="pid"
|
|
v-model:visible="editVisible"
|
|
@success="getLists"
|
|
>
|
|
</editDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="menu">
|
|
import {defineAsyncComponent, nextTick, onMounted, ref} from "vue";
|
|
import { PlusOutlined,EditOutlined,DeleteOutlined} from '@ant-design/icons-vue';
|
|
import {getCategoryList,categoryDelete} from "@/api/content/category";
|
|
import { Modal,message } from 'ant-design-vue';
|
|
import { columns } from './columns';
|
|
import {buildTree} from "@/utils/auth";
|
|
|
|
const editDialog = defineAsyncComponent(() =>
|
|
import('./edit.vue')
|
|
)
|
|
|
|
const isExpand = ref(false);
|
|
const loading = ref(false);
|
|
const editVisible=ref(false);
|
|
const expandAllRows = ref(false)
|
|
const arrayList = ref([])
|
|
const expandKeys= ref([])
|
|
const categoryId=ref(0);
|
|
const pid=ref(0)
|
|
const lists = ref([]);
|
|
|
|
const getLists = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const data = await getCategoryList();
|
|
data.map(item=>{
|
|
item.key = item.id
|
|
})
|
|
arrayList.value = data
|
|
lists.value = buildTree(data);
|
|
loading.value = false;
|
|
} catch (error) {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleAdd = async (parentId:any) => {
|
|
categoryId.value=0
|
|
pid.value=parentId?parentId:0
|
|
await nextTick();
|
|
editVisible.value=true
|
|
};
|
|
|
|
const handleEdit = async (data: any) => {
|
|
categoryId.value=data.id
|
|
await nextTick();
|
|
editVisible.value=true
|
|
};
|
|
|
|
const handleDelete = (categoryId: number) => {
|
|
Modal.confirm({
|
|
title: '提示',
|
|
content: "确定要删除？",
|
|
onOk: async () => {
|
|
loading.value = true;
|
|
await categoryDelete(categoryId);
|
|
message.success("删除成功");
|
|
getLists()
|
|
loading.value = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleExpand = () => {
|
|
expandAllRows.value = !expandAllRows.value;
|
|
toggleExpand()
|
|
};
|
|
|
|
const toggleExpand = () => {
|
|
expandKeys.value = []
|
|
if(expandAllRows.value){
|
|
arrayList.value.map(item=>{
|
|
expandKeys.value.push(item.id)
|
|
})
|
|
} else {
|
|
expandKeys.value = []
|
|
}
|
|
};
|
|
|
|
const getAll=()=>{
|
|
getLists();
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
getAll()
|
|
});
|
|
|
|
// onActivated(() => {
|
|
// getAll()
|
|
// });
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |