feat: user
This commit is contained in:
dap
@@ -10,8 +10,17 @@ import {
|
||||
type VbenFormProps,
|
||||
} from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { getPopupContainer } from '@vben/utils';
|
||||
|
||||
import { Avatar, Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import {
|
||||
Avatar,
|
||||
Dropdown,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Modal,
|
||||
Popconfirm,
|
||||
Space,
|
||||
} from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
|
||||
@@ -28,6 +37,8 @@ import { columns, querySchema } from './data';
|
||||
import DeptTree from './dept-tree.vue';
|
||||
import userDrawer from './user-drawer.vue';
|
||||
import userImportModal from './user-import-modal.vue';
|
||||
import userInfoModal from './user-info-modal.vue';
|
||||
import userResetPwdModal from './user-reset-pwd-modal.vue';
|
||||
|
||||
/**
|
||||
* 导入
|
||||
@@ -100,6 +111,7 @@ const gridOptions: VxeGridProps = {
|
||||
rowConfig: {
|
||||
isHover: true,
|
||||
keyField: 'userId',
|
||||
height: 48,
|
||||
},
|
||||
round: true,
|
||||
align: 'center',
|
||||
@@ -152,95 +164,133 @@ function handleMultiDelete() {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const [UserInfoModal, userInfoModalApi] = useVbenModal({
|
||||
connectedComponent: userInfoModal,
|
||||
});
|
||||
function handleUserInfo(row: Recordable<any>) {
|
||||
userInfoModalApi.setData({ userId: row.userId });
|
||||
userInfoModalApi.open();
|
||||
}
|
||||
|
||||
const [UserResetPwdModal, userResetPwdModalApi] = useVbenModal({
|
||||
connectedComponent: userResetPwdModal,
|
||||
});
|
||||
|
||||
function handleResetPwd(record: Recordable<any>) {
|
||||
userResetPwdModalApi.setData({ record });
|
||||
userResetPwdModalApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true" content-class="flex gap-[8px]">
|
||||
<DeptTree
|
||||
v-model:select-dept-id="selectDeptId"
|
||||
:height="300"
|
||||
class="w-[260px]"
|
||||
@select="() => tableApi.query()"
|
||||
/>
|
||||
<BasicTable class="flex-1">
|
||||
<template #toolbar-actions>
|
||||
<span class="pl-[7px] text-[16px]">用户列表</span>
|
||||
</template>
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
v-access:code="['system:user:export']"
|
||||
@click="downloadExcel(userExport, '用户管理', {})"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
v-access:code="['system:user:import']"
|
||||
@click="handleImport"
|
||||
>
|
||||
{{ $t('pages.common.import') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!checked"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['system:user:remove']"
|
||||
@click="handleMultiDelete"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['system:user:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #avatar="{ row }">
|
||||
<Avatar v-if="row.avatar" :src="row.avatar" />
|
||||
<Avatar
|
||||
v-else
|
||||
src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
|
||||
/>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<TableSwitch
|
||||
v-model="row.status"
|
||||
:api="() => userStatusChange(row)"
|
||||
:disabled="row.userId === 1"
|
||||
:reload="() => tableApi.query()"
|
||||
/>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space v-if="row.userId !== 1">
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-access:code="['system:user:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</a-button>
|
||||
<Popconfirm
|
||||
placement="left"
|
||||
title="确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<Page :auto-content-height="true">
|
||||
<div class="flex h-full gap-[8px]">
|
||||
<DeptTree
|
||||
v-model:select-dept-id="selectDeptId"
|
||||
:height="300"
|
||||
class="w-[260px]"
|
||||
@select="() => tableApi.query()"
|
||||
/>
|
||||
<BasicTable class="flex-1 overflow-hidden">
|
||||
<template #toolbar-actions>
|
||||
<span class="pl-[7px] text-[16px]">用户列表</span>
|
||||
</template>
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
v-access:code="['system:user:export']"
|
||||
@click="downloadExcel(userExport, '用户管理', {})"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
v-access:code="['system:user:import']"
|
||||
@click="handleImport"
|
||||
>
|
||||
{{ $t('pages.common.import') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!checked"
|
||||
danger
|
||||
size="small"
|
||||
type="primary"
|
||||
v-access:code="['system:user:remove']"
|
||||
@click.stop=""
|
||||
@click="handleMultiDelete"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['system:user:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #avatar="{ row }">
|
||||
<Avatar v-if="row.avatar" :src="row.avatar" />
|
||||
<Avatar
|
||||
v-else
|
||||
src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
|
||||
/>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<TableSwitch
|
||||
v-model="row.status"
|
||||
:api="() => userStatusChange(row)"
|
||||
:disabled="row.userId === 1"
|
||||
:reload="() => tableApi.query()"
|
||||
/>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<template v-if="row.userId !== 1">
|
||||
<a-button
|
||||
size="small"
|
||||
type="link"
|
||||
v-access:code="['system:user:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</a-button>
|
||||
<Popconfirm
|
||||
placement="left"
|
||||
title="确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<a-button
|
||||
danger
|
||||
size="small"
|
||||
type="link"
|
||||
v-access:code="['system:user:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
</Popconfirm>
|
||||
<Dropdown
|
||||
:get-popup-container="getPopupContainer"
|
||||
placement="bottomRight"
|
||||
>
|
||||
<template #overlay>
|
||||
<Menu>
|
||||
<MenuItem key="1" @click="handleUserInfo(row)">
|
||||
用户信息
|
||||
</MenuItem>
|
||||
<MenuItem key="2" @click="handleResetPwd(row)">
|
||||
重置密码
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</template>
|
||||
<a-button size="small" type="link">更多</a-button>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<UserImpotModal />
|
||||
<UserDrawer @reload="tableApi.query()" />
|
||||
<UserInfoModal />
|
||||
<UserResetPwdModal />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user