301 lines
7.8 KiB
Vue
301 lines
7.8 KiB
Vue
<script setup lang="tsx">
|
|
import {
|
|
userList as userListApi,
|
|
changeUserStatus as changeUserStatusApi,
|
|
editUser as editUserApi,
|
|
deleteUser as deleteUserApi
|
|
} from "@/api/user";
|
|
import { h, reactive, ref } from "vue";
|
|
import { Delete, Edit } from "@element-plus/icons-vue";
|
|
import { addDialog } from "@/components/ReDialog/index";
|
|
import forms, { type FormProps } from "./component/form.vue";
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
import AddFill from "@iconify-icons/ri/add-circle-line";
|
|
import { storageLocal } from "@pureadmin/utils";
|
|
import { userKey } from "@/utils/auth";
|
|
import { message } from "@/utils/message";
|
|
import useGetGlobalProperties from "@/hooks/useGetGlobalProperties";
|
|
|
|
defineOptions({
|
|
// name 作为一种规范最好必须写上并且和路由的name保持一致
|
|
name: "UserList"
|
|
});
|
|
|
|
const { $bus } = useGetGlobalProperties();
|
|
|
|
// 编辑-模态框
|
|
const userEditFormRef = ref();
|
|
|
|
// 查询表单
|
|
const userListForm = {
|
|
current: 1,
|
|
size: 10
|
|
};
|
|
|
|
let userListData = reactive({
|
|
data: [],
|
|
total: 0
|
|
}); // 表格数据
|
|
|
|
// 定义用户列表接口方法
|
|
const userList = () => {
|
|
userListApi(userListForm).then(res => {
|
|
if (res.code === 200) {
|
|
userListData.data = res.data.records;
|
|
userListData.total = res.data.total;
|
|
userListForm.current = res.data.current;
|
|
userListForm.size = res.data.size;
|
|
}
|
|
});
|
|
};
|
|
|
|
// 定义分页相关事件
|
|
const pageChange = (page: number, size: number) => {
|
|
userListForm.size = size;
|
|
userListForm.current = page;
|
|
userList();
|
|
};
|
|
|
|
// 定义用户状态变化接口
|
|
const changeUserStatus = (status: number, userId: string) => {
|
|
changeUserStatusApi({
|
|
id: userId,
|
|
status: status.toString()
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
userList();
|
|
}
|
|
});
|
|
};
|
|
|
|
// 打开编辑模态框
|
|
const openEditDialog = (userInfo?: any) => {
|
|
addDialog({
|
|
width: "20%",
|
|
title: userInfo.name,
|
|
contentRenderer: () => h(forms, { ref: userEditFormRef }),
|
|
props: {
|
|
formInline: {
|
|
id: userInfo.id,
|
|
name: userInfo.name,
|
|
avatar: userInfo.avatar,
|
|
account: userInfo.account,
|
|
email: userInfo.email,
|
|
isAdmin: userInfo.isAdmin,
|
|
status: userInfo.status
|
|
}
|
|
},
|
|
beforeSure: (done, { options }) => {
|
|
const FormRef = userEditFormRef.value.getUserEditFormRef();
|
|
FormRef.validate(valid => {
|
|
if (!valid) return;
|
|
editUserApi(options.props.formInline).then(res => {
|
|
if (res.code === 200) {
|
|
done();
|
|
userList();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 打开添加模态框
|
|
const openAddDialog = () => {
|
|
addDialog({
|
|
width: "20%",
|
|
title: "添加管理员",
|
|
contentRenderer: () => h(forms, { ref: userEditFormRef }),
|
|
props: {
|
|
formInline: {
|
|
isAdmin: 0,
|
|
status: 1
|
|
}
|
|
},
|
|
beforeSure: (done, { options }) => {
|
|
const FormRef = userEditFormRef.value.getUserEditFormRef();
|
|
FormRef.validate(valid => {
|
|
if (!valid) return;
|
|
editUserApi(options.props.formInline).then(res => {
|
|
if (res.code === 200) {
|
|
done();
|
|
userList();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 删除用户
|
|
const userDelete = (userId: string) => {
|
|
if (userId !== "" || userId !== undefined) {
|
|
deleteUserApi(userId).then(res => {
|
|
if (res.code === 200) {
|
|
userList();
|
|
} else {
|
|
message(res.message, { type: "error" });
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// 编辑和删除按钮的显示与否
|
|
const deleteOrEditBtnDisable = (userInfo?: object) => {
|
|
const loginUser = storageLocal().getItem(userKey);
|
|
// 登陆用户是否为超级管理员
|
|
if (loginUser.isAdmin !== 1) {
|
|
return false;
|
|
}
|
|
|
|
// 是否删除的自身
|
|
if (loginUser.id === userInfo.id) {
|
|
return false;
|
|
}
|
|
|
|
// 如果当前被删除用户是超管则需要登陆用户是宇宙无敌管理员
|
|
return !(userInfo.isAdmin === 1 && loginUser.account !== "admin");
|
|
};
|
|
|
|
$bus.on("userListData", value => {
|
|
userListData.data = value.data.records;
|
|
userListData.total = value.data.total;
|
|
userListForm.current = value.data.current;
|
|
userListForm.size = value.data.size;
|
|
});
|
|
// 调用接口
|
|
userList(); // 用户列表接口
|
|
</script>
|
|
|
|
<template>
|
|
<div class="user-list-table">
|
|
<div class="user-list-table-header">
|
|
<el-button
|
|
type="primary"
|
|
:icon="useRenderIcon(AddFill)"
|
|
@click="openAddDialog"
|
|
>
|
|
添加
|
|
</el-button>
|
|
</div>
|
|
<div class="list">
|
|
<el-table :data="userListData.data" :border="true" style="width: 100%">
|
|
<el-table-column prop="id" label="id" min-width="125" align="center" />
|
|
<el-table-column
|
|
prop="name"
|
|
label="名称"
|
|
min-width="80"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="avatar"
|
|
label="头像"
|
|
min-width="35"
|
|
align="center"
|
|
>
|
|
<template #default="scope">
|
|
<img class="table-avatar" :src="scope.row.avatar" alt="头像" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="account" label="账号" align="center" />
|
|
<el-table-column prop="email" label="邮箱" align="center" />
|
|
<el-table-column
|
|
prop="isAdmin"
|
|
label="是否为超级管理员"
|
|
min-width="60"
|
|
align="center"
|
|
>
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.isAdmin === 1" effect="dark">是</el-tag>
|
|
<el-tag v-else effect="dark" type="warning">否</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
label="状态"
|
|
min-width="70"
|
|
align="center"
|
|
>
|
|
<template #default="scope">
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
:disabled="!deleteOrEditBtnDisable(scope.row)"
|
|
active-text="启用"
|
|
inactive-text="禁用"
|
|
:active-value="1"
|
|
:inactive-value="0"
|
|
@change="changeUserStatus(scope.row.status, scope.row.id)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createdAt" label="创建时间" align="center" />
|
|
<el-table-column prop="updatedAt" label="更新时间" align="center" />
|
|
<el-table-column label="操作" align="center">
|
|
<template #default="scope">
|
|
<el-button
|
|
v-if="deleteOrEditBtnDisable(scope.row)"
|
|
size="small"
|
|
type="primary"
|
|
:icon="Edit"
|
|
@click="openEditDialog(scope.row)"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
<el-popconfirm
|
|
v-if="deleteOrEditBtnDisable(scope.row)"
|
|
width="220"
|
|
confirm-button-text="确认"
|
|
cancel-button-text="取消"
|
|
icon-color="#626AEF"
|
|
title="是否删除?"
|
|
@confirm="userDelete(scope.row.id)"
|
|
>
|
|
<template #reference>
|
|
<el-button size="small" type="danger" :icon="Delete">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="div-page">
|
|
<el-pagination
|
|
small
|
|
background
|
|
layout="total,prev,pager,next"
|
|
:page-size="userListForm.size"
|
|
:total="userListData.total"
|
|
@change="pageChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.table-avatar {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-list-form .el-input {
|
|
--el-input-width: 220px;
|
|
}
|
|
|
|
.list {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.user-list-table-header {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.div-page {
|
|
padding: 20px;
|
|
text-align: right;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|