feat:更新列表
This commit is contained in:
fangyunong
parent
6830fff764
commit
c95ff9fa2c
1
auto-imports.d.ts
vendored
1
auto-imports.d.ts
vendored
@ -12,6 +12,7 @@ declare global {
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
|
||||
@ -15,4 +15,15 @@ export function getUserList(data:UserListQuery):Promise<UserListReturn>{
|
||||
method:'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
export function deleteUser(userId:string){
|
||||
return http({
|
||||
url:'/api/v1/AdminRoleControllers/DelUser',
|
||||
method:'POST',
|
||||
params:{
|
||||
userId
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -13,3 +13,15 @@
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
// 弹性盒布局
|
||||
.flex-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap:8px;
|
||||
&.center{
|
||||
justify-content: center;
|
||||
}
|
||||
&.right{
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
|
||||
41
src/components/Ls-UI/LsListButton.vue
Normal file
41
src/components/Ls-UI/LsListButton.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="ls-list-button">
|
||||
<n-button strong secondary type="primary" size="small" @click="handleSearch">
|
||||
搜索
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<SearchOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button strong secondary size="small" @click="handleReset">
|
||||
重置
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Refresh />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { SearchOutline, Refresh } from '@vicons/ionicons5';
|
||||
const emit = defineEmits<{
|
||||
(event: 'search'): void,
|
||||
(event: 'reset'): void
|
||||
}>();
|
||||
const handleSearch = () => {
|
||||
emit('search');
|
||||
};
|
||||
const handleReset = () => {
|
||||
emit('reset');
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.ls-list-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $miniGap;
|
||||
}
|
||||
</style>
|
||||
@ -1,65 +1,106 @@
|
||||
<template>
|
||||
<div class="main__container table">
|
||||
<header class="table-header">
|
||||
<n-input-group style="width:440px">
|
||||
<n-input :style="{ width: '50%' }" placeholder="请输入用户名称" v-model:value="roleName" />
|
||||
<n-button strong secondary type="primary">
|
||||
搜索
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<SearchOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
<div class="table-header__search">
|
||||
<n-input placeholder="请输入用户名称" v-model:value="queryInfo.userName" size="small" style="width: 240px;" clearable />
|
||||
<n-select placeholder="请选择角色" v-model:value="queryInfo.roleName" :options="options" size="small"
|
||||
style="width: 240px;" clearable/>
|
||||
</div>
|
||||
<ls-list-button @search="init" @reset="resetList"></ls-list-button>
|
||||
</header>
|
||||
<main class="table-main" ref="tableMainRef">
|
||||
<n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
|
||||
:min-height="`${height}px`" />
|
||||
:min-height="`${height}px`">
|
||||
<template #empty>
|
||||
<LsEmpty type="no-data" title="暂无数据" description="Not Found 404"></LsEmpty>
|
||||
</template>
|
||||
</n-data-table>
|
||||
<div class="table-main__pagination">
|
||||
<n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :item-count="data.length"
|
||||
show-size-picker :page-sizes="[10, 20, 30, 40]">
|
||||
<template #prefix="{ itemCount, startIndex }">
|
||||
<template #prefix="{ itemCount }">
|
||||
共 {{ itemCount }} 项
|
||||
</template>
|
||||
</n-pagination>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<n-modal v-model:show="addRoleDialog">
|
||||
<n-card style="width: 450px" title="授权角色" :bordered="false" size="huge" role="dialog" aria-modal="true">
|
||||
<n-input-group>
|
||||
<n-input readonly :style="{ width: '70%' }" placeholder="请从角色库选择角色" />
|
||||
<n-button type="warning" strong secondary :style="{ width: '30%' }">
|
||||
角色库
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Server />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
<template #footer>
|
||||
<div class="flex-content right">
|
||||
<n-button type="primary" size="small">授 权</n-button>
|
||||
<n-button @click="addRoleDialog = false" size="small">关 闭</n-button>
|
||||
</div>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { SearchOutline } from '@vicons/ionicons5';
|
||||
import { getUserList } from '@/api/roleApi';
|
||||
import { DataTableColumns, NButton, useMessage } from 'naive-ui';
|
||||
import { Server } from '@vicons/ionicons5';
|
||||
import { getUserList, deleteUser } from '@/api/roleApi';
|
||||
import { DataTableColumns, NButton, NTag, useDialog, useMessage } from 'naive-ui';
|
||||
import LsEmpty from '@/components/Ls-UI/LsEmpty.vue';
|
||||
|
||||
const message = useMessage();
|
||||
const tableMainRef = ref<HTMLElement | null>(null);
|
||||
const roleName = ref('');
|
||||
const queryInfo = reactive({
|
||||
roleName: void 0,
|
||||
userName: ''
|
||||
});
|
||||
const total = ref(0);
|
||||
const pagination = reactive<PageController>({
|
||||
pageSize: 10,
|
||||
page: 1,
|
||||
});
|
||||
const options = ref([]);
|
||||
const data = ref([]);
|
||||
const height = ref(null);
|
||||
const dialog = useDialog();
|
||||
const addRoleDialog = ref(false);
|
||||
const operationUuid = ref('');
|
||||
|
||||
// 类似render - 函数式组件渲染
|
||||
function createColumns({
|
||||
sendMail
|
||||
handleDelete,
|
||||
handleAuthorize,
|
||||
handleMenuAssign,
|
||||
handleAssignJob
|
||||
}: {
|
||||
sendMail: (rowData: UserRaw) => void
|
||||
handleDelete: (rowData: UserRaw) => void,
|
||||
handleAuthorize: (rowData: UserRaw) => void,
|
||||
handleMenuAssign: (rowData: UserRaw) => void,
|
||||
handleAssignJob: (rowData: UserRaw) => void,
|
||||
}): DataTableColumns<UserRaw> {
|
||||
return [
|
||||
{
|
||||
title: '用户名',
|
||||
key: 'userName'
|
||||
key: 'userName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
align: 'center',
|
||||
render(row: UserRaw) {
|
||||
return h('span', {}, {
|
||||
return h(NTag, {
|
||||
type: row.sex === '男' ? 'primary' : row.sex === '女' ? 'error' : 'default',
|
||||
bordered: false,
|
||||
class: 'user-table__gender-tag'
|
||||
}, {
|
||||
default: () => `${row.sex || '未知'}`
|
||||
})
|
||||
}
|
||||
@ -67,8 +108,9 @@ function createColumns({
|
||||
{
|
||||
title: '职位',
|
||||
key: 'jobCode',
|
||||
align: 'center',
|
||||
render(row: UserRaw) {
|
||||
return h('span', {}, {
|
||||
return h('span', { class: 'user-table__job' }, {
|
||||
default: () => `${row.jobCode || '无职位'}`
|
||||
})
|
||||
}
|
||||
@ -76,47 +118,117 @@ function createColumns({
|
||||
{
|
||||
title: '菜单权限',
|
||||
key: 'menuName',
|
||||
align: 'center',
|
||||
render(row: UserRaw) {
|
||||
return h('span', {}, {
|
||||
return h('span', { class: 'user-table__menu' }, {
|
||||
default: () => `${row.menuName || '无权限'}`
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
key: 'phoneNumber',
|
||||
align: 'center',
|
||||
render(row: UserRaw) {
|
||||
return h('span', { class: 'user-table__phone' }, {
|
||||
default: () => `${row.phoneNumber || '无号码'}`
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
align: 'center',
|
||||
render(row: UserRaw) {
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
return h('div', { class: 'user-table__actions' }, [
|
||||
h(NButton, {
|
||||
size: 'small',
|
||||
onClick: () => sendMail(row)
|
||||
},
|
||||
{ default: () => '点击用户' }
|
||||
)
|
||||
type: 'primary',
|
||||
strong: true,
|
||||
secondary: true,
|
||||
class: 'user-table__action-btn',
|
||||
onClick: () => handleAuthorize(row)
|
||||
}, { default: () => '授权用户' }),
|
||||
h(NButton, {
|
||||
size: 'small',
|
||||
type: 'error',
|
||||
strong: true,
|
||||
secondary: true,
|
||||
class: 'user-table__action-btn',
|
||||
onClick: () => handleDelete(row)
|
||||
}, { default: () => '删除用户' }),
|
||||
h(NButton, {
|
||||
size: 'small',
|
||||
type: 'info',
|
||||
strong: true,
|
||||
secondary: true,
|
||||
class: 'user-table__action-btn',
|
||||
onClick: () => handleMenuAssign(row)
|
||||
}, { default: () => '菜单分配' }),
|
||||
h(NButton, {
|
||||
size: 'small',
|
||||
type: 'warning',
|
||||
strong: true,
|
||||
secondary: true,
|
||||
class: 'user-table__action-btn',
|
||||
onClick: () => handleAssignJob(row)
|
||||
}, { default: () => '赋予职位' })
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 生成表格列
|
||||
const columns = createColumns({
|
||||
sendMail(rowData) {
|
||||
handleAuthorize(rowData) {
|
||||
addRoleDialog.value = true;
|
||||
operationUuid.value = rowData.id;
|
||||
},
|
||||
handleDelete(rowData) {
|
||||
dialog.warning({
|
||||
title: '警告',
|
||||
content: `你确定删除用户${rowData.userName}？`,
|
||||
positiveText: '确定',
|
||||
negativeText: '不确定',
|
||||
draggable: true,
|
||||
onPositiveClick: () => {
|
||||
deleteUser(rowData.id).then(() => {
|
||||
message.success('删除成功！');
|
||||
init();
|
||||
}).catch((error) => {
|
||||
message.error(error.message);
|
||||
})
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
message.info('取消')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleMenuAssign(rowData) {
|
||||
message.error(`我点击了${rowData.userName}`);
|
||||
},
|
||||
handleAssignJob(rowData) {
|
||||
message.error(`我点击了${rowData.userName}`);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const init = async () => {
|
||||
try {
|
||||
const { users, totalCount } = await getUserList({
|
||||
...pagination,
|
||||
roleName: roleName.value
|
||||
...queryInfo
|
||||
});
|
||||
total.value = totalCount;
|
||||
data.value = users;
|
||||
} catch (error) {
|
||||
message.error(error.message);
|
||||
}
|
||||
};
|
||||
const resetList = () => {
|
||||
pagination.page = 1;
|
||||
pagination.pageSize = 10;
|
||||
queryInfo.roleName = void 0;
|
||||
queryInfo.userName = '';
|
||||
init();
|
||||
}
|
||||
onMounted(() => {
|
||||
if (tableMainRef.value) {
|
||||
@ -133,7 +245,14 @@ onMounted(() => {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 $normolGap;
|
||||
|
||||
&__search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $miniGap;
|
||||
}
|
||||
}
|
||||
|
||||
.table-main {
|
||||
@ -149,4 +268,32 @@ onMounted(() => {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.user-table {
|
||||
|
||||
// 文本样式
|
||||
:deep() &__job,
|
||||
:deep() &__menu,
|
||||
:deep() &__phone {
|
||||
font-size: 14px;
|
||||
color: var(--n-text-color);
|
||||
}
|
||||
|
||||
// 操作按钮容器
|
||||
:deep() &__actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
:deep() &__action-btn.n-button {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user