| | |
| | | import { ref } from 'vue'; |
| | | |
| | | import { useAccess } from '@vben/access'; |
| | | import { |
| | | Page, |
| | | useVbenDrawer, |
| | | useVbenModal, |
| | | type VbenFormProps, |
| | | } from '@vben/common-ui'; |
| | | import { Page, useVbenDrawer, useVbenModal, type VbenFormProps } from '@vben/common-ui'; |
| | | import { $t } from '@vben/locales'; |
| | | import { preferences } from '@vben/preferences'; |
| | | import { getVxePopupContainer } from '@vben/utils'; |
| | | |
| | | import { |
| | | Avatar, |
| | | Dropdown, |
| | | Menu, |
| | | MenuItem, |
| | | Modal, |
| | | Popconfirm, |
| | | Space, |
| | | } from 'ant-design-vue'; |
| | | import { Avatar, Dropdown, Menu, MenuItem, Modal, Popconfirm, Space } from 'ant-design-vue'; |
| | | |
| | | import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; |
| | | import { vxeCheckboxChecked } from '#/adapter/vxe-table'; |
| | | import { |
| | | userExport, |
| | | userList, |
| | | userRemove, |
| | | userStatusChange, |
| | | } from '#/api/system/user'; |
| | | import { userExport, userList, userRemove, userStatusChange } from '#/api/system/user'; |
| | | import { TableSwitch } from '#/components/table'; |
| | | import { commonDownloadExcel } from '#/utils/file/download'; |
| | | |
| | |
| | | * 导入 |
| | | */ |
| | | const [UserImpotModal, userImportModalApi] = useVbenModal({ |
| | | connectedComponent: userImportModal, |
| | | connectedComponent: userImportModal |
| | | }); |
| | | |
| | | function handleImport() { |
| | |
| | | |
| | | // 左边部门用 |
| | | const selectDeptId = ref<string[]>([]); |
| | | defineExpose({ |
| | | tableSelect |
| | | }); |
| | | |
| | | const formOptions: VbenFormProps = { |
| | | schema: querySchema(), |
| | | commonConfig: { |
| | | labelWidth: 80, |
| | | componentProps: { |
| | | allowClear: true, |
| | | }, |
| | | allowClear: true |
| | | } |
| | | }, |
| | | wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4', |
| | | handleReset: async () => { |
| | |
| | | await reload(formValues); |
| | | }, |
| | | // 日期选择格式化 |
| | | fieldMappingTime: [ |
| | | [ |
| | | 'createTime', |
| | | ['params[beginTime]', 'params[endTime]'], |
| | | ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'], |
| | | ], |
| | | ], |
| | | fieldMappingTime: [['createTime', ['params[beginTime]', 'params[endTime]'], ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59']]] |
| | | }; |
| | | |
| | | const gridOptions: VxeGridProps = { |
| | |
| | | reserve: true, |
| | | // 点击行选中 |
| | | trigger: 'default', |
| | | checkMethod: ({ row }) => row?.userId !== 1, |
| | | checkMethod: ({ row }) => row?.userId !== 1 |
| | | }, |
| | | columns, |
| | | height: 'auto', |
| | |
| | | return await userList({ |
| | | pageNum: page.currentPage, |
| | | pageSize: page.pageSize, |
| | | ...formValues, |
| | | ...formValues |
| | | }); |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | }, |
| | | rowConfig: { |
| | | isHover: true, |
| | | keyField: 'userId', |
| | | height: 48, |
| | | height: 48 |
| | | }, |
| | | id: 'system-user-index', |
| | | id: 'system-user-index' |
| | | }; |
| | | const [BasicTable, tableApi] = useVbenVxeGrid({ |
| | | formOptions, |
| | | gridOptions, |
| | | gridOptions |
| | | }); |
| | | |
| | | const [UserDrawer, userDrawerApi] = useVbenDrawer({ |
| | | connectedComponent: userDrawer, |
| | | connectedComponent: userDrawer |
| | | }); |
| | | |
| | | function handleAdd() { |
| | |
| | | onOk: async () => { |
| | | await userRemove(ids); |
| | | await tableApi.query(); |
| | | }, |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function handleDownloadExcel() { |
| | | commonDownloadExcel(userExport, '用户管理', tableApi.formApi.form.values, { |
| | | fieldMappingTime: formOptions.fieldMappingTime, |
| | | fieldMappingTime: formOptions.fieldMappingTime |
| | | }); |
| | | } |
| | | |
| | | const [UserInfoModal, userInfoModalApi] = useVbenModal({ |
| | | connectedComponent: userInfoModal, |
| | | connectedComponent: userInfoModal |
| | | }); |
| | | function handleUserInfo(row: Recordable<any>) { |
| | | userInfoModalApi.setData({ userId: row.userId }); |
| | |
| | | } |
| | | |
| | | const [UserResetPwdModal, userResetPwdModalApi] = useVbenModal({ |
| | | connectedComponent: userResetPwdModal, |
| | | connectedComponent: userResetPwdModal |
| | | }); |
| | | |
| | | function handleResetPwd(record: Recordable<any>) { |
| | | userResetPwdModalApi.setData({ record }); |
| | | userResetPwdModalApi.open(); |
| | | } |
| | | |
| | | // 选中数据 |
| | | function tableSelect() { |
| | | return tableApi.grid.getCheckboxRecords(); |
| | | } |
| | | |
| | | const { hasAccessByCodes } = useAccess(); |
| | |
| | | <template> |
| | | <Page :auto-content-height="true"> |
| | | <div class="flex h-full gap-[8px]"> |
| | | <DeptTree |
| | | v-model:select-dept-id="selectDeptId" |
| | | class="w-[260px]" |
| | | @reload="() => tableApi.reload()" |
| | | @select="() => tableApi.reload()" |
| | | /> |
| | | <DeptTree v-model:select-dept-id="selectDeptId" class="w-[260px]" @reload="() => tableApi.reload()" @select="() => tableApi.reload()" /> |
| | | <BasicTable class="flex-1 overflow-hidden" table-title="用户列表"> |
| | | <template #toolbar-tools> |
| | | <Space> |
| | | <a-button |
| | | v-access:code="['system:user:export']" |
| | | @click="handleDownloadExcel" |
| | | > |
| | | <a-button v-access:code="['system:user:export']" @click="handleDownloadExcel"> |
| | | {{ $t('pages.common.export') }} |
| | | </a-button> |
| | | <a-button |
| | | v-access:code="['system:user:import']" |
| | | @click="handleImport" |
| | | > |
| | | <a-button v-access:code="['system:user:import']" @click="handleImport"> |
| | | {{ $t('pages.common.import') }} |
| | | </a-button> |
| | | <a-button |
| | |
| | | > |
| | | {{ $t('pages.common.delete') }} |
| | | </a-button> |
| | | <a-button |
| | | type="primary" |
| | | v-access:code="['system:user:add']" |
| | | @click="handleAdd" |
| | | > |
| | | <a-button type="primary" v-access:code="['system:user:add']" @click="handleAdd"> |
| | | {{ $t('pages.common.add') }} |
| | | </a-button> |
| | | </Space> |
| | |
| | | <TableSwitch |
| | | v-model="row.status" |
| | | :api="() => userStatusChange(row)" |
| | | :disabled=" |
| | | row.userId === 1 || !hasAccessByCodes(['system:user:edit']) |
| | | " |
| | | :disabled="row.userId === 1 || !hasAccessByCodes(['system:user:edit'])" |
| | | :reload="() => tableApi.query()" |
| | | /> |
| | | </template> |
| | | <template #action="{ row }"> |
| | | <template v-if="row.userId !== 1"> |
| | | <Space> |
| | | <ghost-button |
| | | v-access:code="['system:user:edit']" |
| | | @click.stop="handleEdit(row)" |
| | | > |
| | | <ghost-button v-access:code="['system:user:edit']" @click.stop="handleEdit(row)"> |
| | | {{ $t('pages.common.edit') }} |
| | | </ghost-button> |
| | | <Popconfirm |
| | | :get-popup-container="getVxePopupContainer" |
| | | placement="left" |
| | | title="确认删除?" |
| | | @confirm="handleDelete(row)" |
| | | > |
| | | <ghost-button |
| | | danger |
| | | v-access:code="['system:user:remove']" |
| | | @click.stop="" |
| | | > |
| | | <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确认删除?" @confirm="handleDelete(row)"> |
| | | <ghost-button danger v-access:code="['system:user:remove']" @click.stop=""> |
| | | {{ $t('pages.common.delete') }} |
| | | </ghost-button> |
| | | </Popconfirm> |
| | | </Space> |
| | | <Dropdown |
| | | :get-popup-container="getVxePopupContainer" |
| | | placement="bottomRight" |
| | | > |
| | | <Dropdown :get-popup-container="getVxePopupContainer" placement="bottomRight"> |
| | | <template #overlay> |
| | | <Menu> |
| | | <MenuItem key="1" @click="handleUserInfo(row)"> |
| | | 用户信息 |
| | | </MenuItem> |
| | | <MenuItem key="1" @click="handleUserInfo(row)"> 用户信息 </MenuItem> |
| | | <span v-access:code="['system:user:resetPwd']"> |
| | | <MenuItem key="2" @click="handleResetPwd(row)"> |
| | | 重置密码 |
| | | </MenuItem> |
| | | <MenuItem key="2" @click="handleResetPwd(row)"> 重置密码 </MenuItem> |
| | | </span> |
| | | </Menu> |
| | | </template> |