1、用户和角色一对多，用户和部门多对多
2、用户管理
编辑用户时部门层级展示
角色-下拉框展示
<template>
<div class="s">
<!-- 操作按钮 -->
<div class="shang">
<el-input v-model="searchText" placeholder="请输入姓名搜索关键词" style="width: 200px;"></el-input>
<el-input v-model="userEmailSearchText" placeholder="请输入邮箱号搜索关键词" style="width: 200px;"></el-input>
<el-select v-model="selectedRoleId" placeholder="请选择角色">
<el-option v-for="role in roles" :key="role.id" :label="role.role_name" :value="role.id"></el-option>
</el-select>
<el-button type="primary" @click="search">搜索</el-button>
<el-button @click="resetForm">重置</el-button>
</div>
<br>
<el-button type="primary" @click="showAddDialog">新增用户</el-button>
<el-table :data="filteredTableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="user_email" label="邮箱号"></el-table-column>
<el-table-column label="角色">
<template slot-scope="scope">
{{ scope.row.role_name }}
</template>
</el-table-column>
<el-table-column label="部门">
<template slot-scope="scope">
<span v-for="(department, index) in scope.row.department_id" :key="department">
{{ department.split(' ----- ').pop() }}
</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row.user_id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新增/编辑对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="isDialogVisible">
<el-form :model="form">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="邮箱号">
<el-input v-model="form.user_email"></el-input>
</el-form-item>
<el-form-item label="角色">
<br>
<el-select v-model="form.role" style="width:200px">
<el-option v-for="role in roles" :key="role.id" :label="role.role_name" :value="role.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="归属部门">
<treeselect v-model="form.department_ids" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"
:normalizer="normalizer" multiple />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="isDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
data() {
return {
searchText: '',
userEmailSearchText: '',
selectedRoleId: null,
selectedDepartment: [],
deptOptions: [],
tableData: [],
roles: [],
isDialogVisible: false,
dialogTitle: '新增用户',
form: {
id: '',
name: '',
user_email: '',
role: '',
department_ids: []
},
setRoleDialogVisible: false,
setDepDialogVisible: false,
userInfo: []
};
},
mounted() {
this.handleSearch();
this.setRole();
this.setDep();
this.loadDepartmentOptions();
console.log("deptOptions", this.deptOptions);
},
// 计算属性
computed: {
filteredTableData() {
let filteredData = this.tableData;
if (this.searchText) {
filteredData = filteredData.filter(user => user.name.includes(this.searchText));
}
if (this.userEmailSearchText) {
filteredData = filteredData.filter(user => user.user_email.includes(this.userEmailSearchText));
}
if (this.selectedRoleId) {
filteredData = filteredData.filter(user => user.role_id === this.selectedRoleId);
}
// 为每个用户获取角色和部门名称
filteredData.forEach(user => {
user.role_name = this.getRoleName(user.role_id);
if (user.department_id && Array.isArray(user.department_id)) {
user.department_names = user.department_id.map(departmentId => {
const department = this.deptOptions.find(dep => dep.id === departmentId);
return department? department.name : '';
});
} else {
user.department_names = []; // 确保没有部门 ID 时，department_names 是一个空数组
}
});
return filteredData;
}
},
methods: {
getRoleName(roleId) {
const role = this.roles.find(role => role.id === roleId);
return role? role.role_name : '';
},
resetForm() {
this.searchText = '';
this.userEmailSearchText = '';
this.selectedRoleId = null;
this.selectedDepartment = [];
this.handleSearch();
},
async search() {
try {
const params = {};
if (this.searchText) {
params.name = this.searchText;
}
if (this.userEmailSearchText) {
params.user_email = this.userEmailSearchText;
}
if (this.selectedRoleId) {
params.role_id = this.selectedRoleId;
}
if (this.selectedDepartment.length > 0) {
params.departments = this.selectedDepartment.map(department => department.name).join(',');
}
console.log('发送的请求参数params:', params);
const usersResponse = await axios.get('http://127.0.0.1:8000/users/search_user_by_params/', {
params: params
});
this.tableData = usersResponse.data;
} catch (error) {
console.error('搜索时出错：', error);
}
},
async handleSearch() {
try {
const usersResponse = await axios.get('http://127.0.0.1:8000/users/get_user_details_extended/');
this.tableData = usersResponse.data;
// 同时获取部门信息
const deptResponse = await axios.get('http://127.0.0.1:8000/departments/');
this.deptOptions = deptResponse.data;
console.log("this.deptOptions部门1", this.deptOptions);
} catch (error) {
console.error('Error fetching users:', error);
}
},
async loadDepartmentOptions() { // 加载部门选项的方法
try {
const response = await axios.get('http://127.0.0.1:8000/departments/');
this.departmentOptions = response.data.map(department => ({
id: department.id,
label: department.name,
children: department.children
}));
} catch (error) {
console.error('Error fetching department options:', error);
}
},
async setRole() {
try {
const response = await axios.get('http://127.0.0.1:8000/roles/');
this.roles = response.data;
this.setRoleDialogVisible = true;
} catch (error) {
console.error('Error fetching roles:', error);
}
},
normalizer(node) {
console.log("node", node);
console.log("node.children", node.children);
if (node.children) {
return {
id: node.id,
label: node.name,
children: node.children
};
}
return {
id: node.id,
label: node.name,
children: node.children
};
},
showAddDialog() {
this.dialogTitle = '新增用户11111';
this.form = {
id: '',
name: '',
user_email: '',
role_id: '',
department_ids: []
};
this.isDialogVisible = true;
},
async setDep() {
try {
const response = await axios.get('http://127.0.0.1:8000/departments/');
this.deptOptions = response.data.map(department => ({
id: department.id,
name: department.name
}));
this.setDepDialogVisible = false;
console.log("this.deptOptions部门", this.deptOptions);
} catch (error) {
console.error('Error fetching departments:', error);
}
},
showEditDialog(row) {
this.dialogTitle = '编辑用户1111';
this.form = {
id: row.user_id,
name: row.name,
user_email: row.user_email,
role: row.role_id
};
// 处理部门信息
// 根据部门名称找到对应的 ID
if (row.department_id && Array.isArray(row.department_id)) {
console.log("Row department IDs:", row.department_id);
console.log("Department Options:", this.deptOptions);
this.form.department_ids = row.department_id.map(departmentName => {
const findDepartment = (options) => {
for (const option of options) {
if (option.name === departmentName) {
return option.id;
}
if (option.children) {
const found = findDepartment(option.children);
if (found) {
return found;
}
}
}
return null;
};
return findDepartment(this.deptOptions);
}).filter(id => id!== null);
} else {
this.form.department_ids = [];
}
this.isDialogVisible = true;
},
async handleSubmit() {
const payload = {
id: this.form.id,
name: this.form.name,
user_email: this.form.user_email,
role_id: this.form.role,
department_ids: this.form.department_ids
};
console.log("用户编辑部分111111111111111111111111", this.form.id);
if (this.form.id!== "") {
try {
await axios.put(`http://127.0.0.1:8000/search/update_user/${this.form.id}`, payload);
this.$message.success('用户编辑成功');
this.handleSearch();
} catch (error) {
console.error('Error updating user:', error);
}
} else {
try {
await axios.post('http://127.0.0.1:8000/search/create_user/', payload);
this.$message.success('新增用户成功');
this.handleSearch();
} catch (error) {
console.error('Error adding user:', error);
}
}
this.isDialogVisible = false;
},
async handleDelete(id) {
try {
await axios.delete(`http://127.0.0.1:8000/users/${id}/`);
this.$message.success('用户删除成功');
this.handleSearch();
} catch (error) {
console.error('Error deleting user:', error);
}
}
}
};
</script>
<style>
/* 样式可以按需添加 */
.s {
margin-left: 20px;
margin-top: 20px;
}
.shang {
margin-top: 20px;
}
</style>
3、角色管理
<template>
<div class="s">
<!-- 操作按钮 -->
<div class="shang">
<el-input v-model="searchText" placeholder="请输入搜索关键词" style="width: 500px;"></el-input>
<el-button type="primary" @click="search">搜索</el-button>
<el-button @click="resetForm">重置</el-button>
</div>
<br>
<el-button type="primary" @click="showAddDialog">新增角色</el-button>
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="role_name" label="角色" >
<template slot-scope="scope">
<div class="centered-content">{{ scope.row.role_name }}</div>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" >
<template slot-scope="scope">
<div class="centered-content">
<el-tag :type="scope.row.status === true? 'success' : 'danger'">
{{ scope.row.status === true? '激活' : '禁用' }}
</el-tag>
</div>
</template>
</el-table-column>
<!-- can_view_files: false, // 添加文件查看权限属性
can_upload_files: false // 添 -->
<el-table-column prop="can_upload_files" label="上传文件状态" >
<template slot-scope="scope">
<div class="centered-content">
<el-tag :type="scope.row.can_upload_files === true? 'success' : 'danger'">
{{ scope.row.can_upload_files === true? '激活' : '禁用' }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="can_view_files" label="查看文件状态" >
<template slot-scope="scope">
<div class="centered-content">
<el-tag :type="scope.row.can_view_files === true? 'success' : 'danger'">
{{ scope.row.can_view_files === true? '激活' : '禁用' }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" >
<template slot-scope="scope">
<div class="centered-content">{{ scope.row.created_at | formatDate }}</div>
</template>
</el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<div class="centered-content">
<el-button size="mini" type="text" icon="el-icon-edit" @click="showEditDialog(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- 分配用户对话框 -->
<!-- 分配用户到角色的弹框 -->
<el-dialog :title="dialogTitle1" :visible.sync="isDialogVisible1">
<el-table :data="tableData1" style="width: 100%" @selection-change="handleSelectionChange">
<!-- 复选框列 -->
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="nickname" label="昵称"></el-table-column>
<el-table-column prop="phone_number" label="电话"></el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="isDialogVisible1 = false">取消</el-button>
<el-button type="primary" @click="asingnuser">确定</el-button>
<!-- @click="handleConfirm" -->
</span>
</el-dialog>
<!-- 新增/编辑对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="isDialogVisible">
<el-form :model="form">
<el-form-item label="角色">
<el-input v-model="form.role_name"></el-input>
</el-form-item>
<div class="role-permissions">
<div style="display: flex; align-items: center;">
<span>状态</span>
<el-form-item style="margin-left: 20px; flex: 1;">
<el-switch v-model="form.status" style="float: right;"></el-switch>
</el-form-item>
</div>
<div style="display: flex; align-items: center;">
<span>文件上传权限</span>
<el-form-item style="margin-left: 20px; flex: 1;">
<el-switch v-model="form.can_upload_files" style="float: right;"></el-switch>
</el-form-item>
</div>
<div style="display: flex; align-items: center;">
<span>文件查看权限</span>
<el-form-item style="margin-left: 20px; flex: 1;">
<el-switch v-model="form.can_view_files" style="float: right;"></el-switch>
</el-form-item>
</div>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="isDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
searchText: '', // 搜索关键词
tableData: [
{ created_at: '2024-06-21T05:41:57.131606Z' },
], // 存储从后端获取的数据
tableData1: [],
isDialogVisible: false, // 控制对话框的显示
dialogTitle: '新增角色', // 对话框标题
form: { // 表单数据
id: '',
role_id: null,
role_name: '',
status: true,
created_at: '',
can_view_files: false, // 添加文件查看权限属性
can_upload_files: false // 添加文件上传权限属性
},
isDialogVisible1: false, // 控制对话框的显示
dialogTitle1: '分配用户', // 对话框标题
form1: { // 表单数据
id: '',
role_id: null,
role_name: '',
status: true,
created_at: ''
},
showAssignUsers: false,
selectedUsers: [], // 存储选择的用户数据
selectedRoles: [], // 存储选择的角色
};
},
mounted() {
this.handleSearch();
this.handleSearch1();
},
methods: {
asingnuser() {
console.log("用户分配成功！！！")
},
resetForm() {
// 重置表单
this.searchText = '';
// 重新加载数据或执行其他操作
// 例如异步获取数据
this.handleSearch();
},
async search() {
try {
// 发起搜索请求
const response = await axios.get('http://127.0.0.1:8000/search/roles/', {
params: {
query: this.searchText
}
});
console.log(this.searchText);
// 更新表格数据
this.tableData = response.data;
console.log(this.tableData);
} catch (error) {
console.error('搜索时出错：', error);
}
},
handleSelectionChange(selection) {
this.selectedUsers = selection;
},
async handleSearch() {
try {
const response = await axios.get('http://127.0.0.1:8000/roles/');
this.tableData = response.data; // 将返回的用户数据存储在tableData中
} catch (error) {
console.error('Error fetching users:', error);
}
},
async handleSearch1() { // 接收角色 id 作为参数
try {
const response = await axios.get(`http://127.0.0.1:8000/users/`);
this.tableData1 = response.data;
} catch (error) {
console.error('Error fetching users:', error);
}
},
showAddDialog() {
this.dialogTitle = '新增角色';
this.form = {
id: '',
role_id: null,
role_name: '',
status: true,
created_at: ''
};
this.isDialogVisible = true;
},
showEditDialog(row) {
this.dialogTitle = '编辑用户';
this.form = { ...row }; // 将选中的行数据填充到表单中
this.isDialogVisible = true;
},
assignUser(row) {
this.isDialogVisible1 = true;
this.dialogTitle1 = '分配用户';
// 调用获取对应角色用户数据的方法，并传递角色 id
const role = this.handleSearch1(row.role_id);
console.log("role角色", role);
},
async handleSubmit() {
if (this.form.id) {
// 编辑用户
try {
await axios.put(`http://127.0.0.1:8000/roles/${this.form.id}/`, this.form);
this.$message.success('用户更新成功');
this.handleSearch();
} catch (error) {
console.error('Error updating user:', error);
}
} else {
// 新增用户
try {
await axios.post('http://127.0.0.1:8000/roles/', this.form);
this.$message.success('用户新增成功');
this.handleSearch();
} catch (error) {
console.error('Error adding user:', error);
}
}
this.isDialogVisible = false;
},
async handleDelete(id) {
try {
const confirm = await this.$confirm('确认删除该用户吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
if (confirm) {
await axios.delete(`http://127.0.0.1:8000/roles/${id}/`);
this.$message.success('用户删除成功');
this.handleSearch();
}
} catch (error) {
console.error('Error deleting user:', error);
}
},
/** 分配用户操作 */
handleAuthUser(row) {
console.log("rowsaaaaaaaaaaaaaaaaaaaaaaa", row);
const roleID = row.id;
console.log("sssssssssssssss", roleID);
// this.$router.push("/role/authUser/"+roleID);
// 使用 $router.push 导航到对应的角色授权页面
this.$router.push({ name: 'authUser', params: { roleID: this.roleID } });
},
// // 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleDataScope":
this.handleDataScope(row);
break;
case "handleAuthUser":
this.handleAuthUser(row);
break;
default:
break;
}
},
}
};
</script>
<style>
/* 样式可以按需添加 */
.s {
margin-left: 20px;
margin-top: 20px;
}
.role-permissions{
margin-top: 20px;
display: flex;
flex-direction:row;
}
.el-switch__core{
margin-top: 23px;
margin-right: 60px;
}
</style>
4、部门管理
<template>
<div class="as">
<div class="xinzeng">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="showAddDialog">新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandCollapse">展开/折叠</el-button>
</el-col> -->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="fetchData"></right-toolbar> -->
</el-row>
</div>
<div class="tab">
<el-table v-loading="loading" :data="processedData" row-key="id" :default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column prop="name" label="部门名称" width="260"></el-table-column>
<!--
<el-table-column prop="id" label="id222222222" width="260"></el-table-column>
<el-table-column prop="parent" label="部门名称1111111111" width="260"></el-table-column>
-->
<el-table-column prop="order" label="排序" width="250"></el-table-column>
<el-table-column prop="status" label="状态" width="260">
<template slot-scope="scope">
<el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '正常' : '停用' }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" width="280">
<template slot-scope="scope">
{{ scope.row.created_at | formatDate }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="showEditDialog(scope.row)"
>修改</el-button>
<!-- <el-button size="mini" type="text" icon="el-icon-plus" @click="showAddDialog">新增</el-button> -->
<el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete"
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新增/编辑对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="isDialogVisible">
<el-form :model="form">
<el-row>
<el-col :span="24" v-if="form.parent !== 0">
<el-form-item label="上级部门" prop="parent">
<treeselect v-model="form.parent" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="部门名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="form.order"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status"></el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="isDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import axios from "axios";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
data() {
return {
// {
// id: "",
// name: "",
// parent: null,
// children: [
// {
// id: "",
// name: "",
// parent: "",
// children: [
// {
// name: "",
// }
// ],
// order: "",
// status: "",
// created_at: ""
// }
// ],
// order: "",
// status: "",
// created_at: ""
// }
// 部门树选项
deptOptions: [
],
isDialogVisible: false, // 控制对话框的显示
dialogTitle: '新增部门', // 对话框标题
form: { // 表单数据a
id: '',
name: "",
parent: "",
children: [],
order: 0,
status: "",
created_at: ""
},
processedData: [],
loading: false, // 数据加载状态
defaultProps: {
children: "children",
label: "name"
},
dialogVisible: false, // 对话框的可见性
currentItem: { // 当前操作的部门项目
id: null,
name: "",
parent: null
},
rules: {
name: [
{ required: true, message: "请输入名称", trigger: "blur" }
],
parent: [
{ required: true, message: "请选择父级", trigger: "blur" }
]
},
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
};
},
created() {
this.fetchData();
},
methods: {/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.name,
children: node.children
};
},
// 获取部门数据
async fetchData() {
this.loading = true; // 开始加载数据时设置加载状态为真
try {
const response = await axios.get("http://127.0.0.1:8000/departments/");
this.processedData = response.data;
this.deptOptions = response.data;
console.log(this.processedData)
} catch (error) {
console.error("Error fetching data:", error);
} finally {
this.loading = false; // 无论成功与否，结束加载时设置加载状态为假
}
},
// 切换展开/折叠状态
toggleExpandCollapse() {
this.isExpandAll = !this.isExpandAll;
},
// 显示添加对话框
showAddDialog() {
this.dialogTitle = '新增部门';
this.form = {
id: '',
name: "",
order: '',
status: true,
created_at: '',
parent: null
};
this.isDialogVisible = true;
},
showEditDialog(row) {
this.dialogTitle = '编辑部门';
this.form = { ...row }; // 将选中的行数据填充到表单中
this.isDialogVisible = true;
},
// 表单重置
reset() {
this.form = {
id: undefined,
parent: undefined,
name: undefined,
order: undefined,
created_at: undefined,
};
this.resetForm("form");
},
/** 新增按钮操作 */
async handleAdd(row) {
this.reset();
if (row != undefined) {
this.form.parent = row.id;
}
this.isDialogVisible = true;
this.dialogTitle = "添加部门";
try {
await axios.post('http://127.0.0.1:8000/departments/', this.form);
this.$message.success('用户新增成功');
this.fetchData();
} catch (error) {
console.error('Error adding user:', error);
}
},
// // 部门弹框展示数据
// showEditDialog(row) {
// this.dialogTitle = '编辑用户';
// this.form = { ...row }; // 将选中的行数据填充到表单中
// this.isDialogVisible = true;
// },
async handleSubmit() {
if (this.form.id !== "") {
// 编辑部门
try {
await axios.put(`http://127.0.0.1:8000/departments/${this.form.id}/`, this.form);
this.$message.success('用户更新成功');
this.fetchData();
} catch (error) {
console.error('Error updating user:', error);
}
} else {
// 新增部门
try {
await axios.post('http://127.0.0.1:8000/departments/', this.form);
this.$message.success('用户新增成功');
this.fetchData();
} catch (error) {
console.error('Error adding user:', error);
}
}
this.isDialogVisible = false;
},
// 删除部门节点
async deleteNode(node) {
try {
await axios.delete(`http://127.0.0.1:8000/departments/${node.id}`);
await this.fetchData();
} catch (error) {
console.error("Error deleting node:", error);
}
},
// // 编辑部门节点
// editNode(node) {
// this.currentItem = { ...node };
// this.dialogVisible = true;
// },
// 处理新增子部门
handleAdd(row) {
// 这里可以添加具体的新增子部门逻辑
console.log("新增子部门操作", row);
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
async handleDelete(id) {
try {
await axios.delete(`http://127.0.0.1:8000/departments/${id}/`);
this.$message.success('用户删除成功');
this.fetchData();
} catch (error) {
console.error('Error deleting user:', error);
}
},
}
};
</script>
<style scoped>
.xinzeng {
padding-top: 30px;
padding-left: 35px;
}
.tab {
margin-top: 20px;
margin-left: 20px;
}
</style>
