187 lines
4.5 KiB
Plaintext
187 lines
4.5 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"
|
|
:style="{ minHeight: fwbHeight+'px' }"
|
|
:scroll="{x:'100%',y:fwbHeight}"
|
|
v-model:expandedRowKeys="expandKeys"
|
|
>
|
|
<template #bodyCell="{ column, record, index }">
|
|
<template v-if="column.key == 'action'">
|
|
<a-space>
|
|
<a-button type="primary" @click="handleAdd(record.id)" v-perm="['sys:dept:add']">
|
|
<template #icon><PlusOutlined /></template>
|
|
新增</a-button
|
|
>
|
|
<a-button type="primary" @click="handleEdit(record)" v-perm="['sys:dept:update']">
|
|
<template #icon><EditOutlined /></template>
|
|
编辑
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
danger
|
|
@click="handleDelete(record.id)"
|
|
v-perm="['sys:dept:delete']"
|
|
>
|
|
<template #icon><DeleteOutlined /></template>
|
|
删除
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</a-spin>
|
|
</a-card>
|
|
<editDialog
|
|
ref="editRef"
|
|
v-if="editVisible"
|
|
:deptId="deptId"
|
|
:pid="pid"
|
|
v-model:visible="editVisible"
|
|
@success="getLists"
|
|
/>
|
|
</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 { getDeptList, deptDelete } from '@/api/system/dept';
|
|
import { Modal, message } from 'ant-design-vue';
|
|
import { columns } from './columns';
|
|
import { buildTree } from '@/utils/auth';
|
|
|
|
/**
|
|
* 导入组件
|
|
*/
|
|
const editDialog = defineAsyncComponent(() => import('./edit.vue'));
|
|
|
|
/**
|
|
* 定义参数变量
|
|
*/
|
|
const fwbHeight = document.body.clientHeight - 400;
|
|
const isExpand = ref(false);
|
|
const loading = ref(false);
|
|
const editVisible = ref(false);
|
|
const expandAllRows = ref(false);
|
|
const arrayList = ref([]);
|
|
const expandKeys = ref([]);
|
|
const deptId = ref(0);
|
|
const pid = ref(0);
|
|
const lists = ref([]);
|
|
|
|
/**
|
|
* 获取部门列表
|
|
*/
|
|
const getLists = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const data = await getDeptList();
|
|
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) => {
|
|
deptId.value = 0;
|
|
pid.value = parentId ? parentId : 0;
|
|
await nextTick();
|
|
editVisible.value = true;
|
|
};
|
|
|
|
/**
|
|
* 执行编辑
|
|
* @param data 参数
|
|
*/
|
|
const handleEdit = async (data: any) => {
|
|
deptId.value = data.id;
|
|
await nextTick();
|
|
editVisible.value = true;
|
|
};
|
|
|
|
/**
|
|
* 执行删除
|
|
* @param deptId 部门ID
|
|
*/
|
|
const handleDelete = (deptId: number) => {
|
|
Modal.confirm({
|
|
title: '提示',
|
|
content: '确定要删除？',
|
|
onOk: async () => {
|
|
loading.value = true;
|
|
await deptDelete(deptId);
|
|
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>
|