| | |
| | | <template #query> |
| | | <QueryFilterItem> |
| | | <SearchInput |
| | | v-model="extraParamState.keyword" |
| | | v-model="extraParamState.queryCondition" |
| | | style="width: 200px" |
| | | placeholder="账号/姓名/手机号" |
| | | @on-click-search="getList" |
| | |
| | | </QueryFilterItem> |
| | | </template> |
| | | <template #btn> |
| | | <el-button |
| | | v-if="checkSubModuleItemShow('pageButton', 'addBtn')" |
| | | @click="openDialog()" |
| | | icon="Plus" |
| | | type="primary" |
| | | >新增</el-button |
| | | > |
| | | <el-button @click="openDialog()" icon="Plus" type="primary">新增</el-button> |
| | | </template> |
| | | </ProTableQueryFilterBar> |
| | | <ProTableV2 v-bind="proTableProps" :columns="column" :operationBtns="operationBtns"> |
| | | </ProTableV2> |
| | | </AppContainer> |
| | | <AddOrEditAccountDialog v-bind="dialogProps" /> |
| | | <ResetPasswordDialog v-bind="resetPasswordDialogProps"></ResetPasswordDialog> |
| | | </LoadingLayout> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { |
| | | ProTableQueryFilterBar, |
| | | OperationBtnType, |
| | | ProTableV2, |
| | | SearchInput, |
| | | LoadingLayout, |
| | |
| | | QueryFilterItem, |
| | | useTable, |
| | | useFormDialog, |
| | | defineOperationBtns, |
| | | } from '@bole-core/components'; |
| | | import { useAccess } from '@/hooks'; |
| | | import * as userServices from '@/services/api/User'; |
| | | import { RoleClientType } from '@/constants'; |
| | | import * as userRoleServices from '@/services/api/UserRole'; |
| | | import * as accountServices from '@/services/api/Account'; |
| | | import { Message, OrderInputType } from '@bole-core/core'; |
| | | import AddOrEditAccountDialog from './components/AddOrEditAccountDialog.vue'; |
| | | import ResetPasswordDialog from './components/ResetPasswordDialog.vue'; |
| | | import { formatRoleName } from '@/utils'; |
| | | |
| | | defineOptions({ |
| | | name: 'AccountManageList', |
| | | }); |
| | | |
| | | const operationBtnMap: Record<string, OperationBtnType> = { |
| | | editBtn: { emits: { onClick: (role) => openDialog(role) } }, |
| | | }; |
| | | const column: API.CustomModuleColumnDto[] = [ |
| | | { |
| | | id: '1', |
| | | enCode: 'userName', |
| | | name: '账号', |
| | | }, |
| | | { |
| | | id: '2', |
| | | enCode: 'name', |
| | | name: '姓名', |
| | | }, |
| | | { |
| | | id: '3', |
| | | enCode: 'phoneNumber', |
| | | name: '手机号', |
| | | }, |
| | | { |
| | | id: '4', |
| | | enCode: 'remark', |
| | | name: '备注', |
| | | }, |
| | | ]; |
| | | |
| | | const { checkSubModuleItemShow, column, operationBtns } = useAccess({ |
| | | operationBtnMap, |
| | | }); |
| | | const operationBtns = defineOperationBtns([ |
| | | { |
| | | data: { |
| | | enCode: 'editBtn', |
| | | name: '编辑', |
| | | }, |
| | | emits: { |
| | | onClick: (role) => openDialog(role), |
| | | }, |
| | | }, |
| | | { |
| | | data: { |
| | | enCode: 'resetPasswordBtn', |
| | | name: '重置密码', |
| | | }, |
| | | emits: { |
| | | onClick: (role) => openResetPasswordDialog(role), |
| | | }, |
| | | }, |
| | | ]); |
| | | |
| | | const BaseState = { |
| | | loading: true, |
| | |
| | | } = useTable( |
| | | async ({ pageIndex, pageSize }, extraParamState) => { |
| | | try { |
| | | let params: API.QueryUserPageInput = { |
| | | let params: API.GetBackClientUsersInput = { |
| | | pageModel: { |
| | | rows: pageSize, |
| | | page: pageIndex, |
| | | orderInput: extraParamState.orderInput, |
| | | }, |
| | | searchKey: extraParamState.keyword, |
| | | queryCondition: extraParamState.queryCondition, |
| | | }; |
| | | let res = await userServices.getUserPage(params, { |
| | | let res = await userRoleServices.getGovermentClientUsers(params, { |
| | | showLoading: !state.loading, |
| | | }); |
| | | return res; |
| | |
| | | { |
| | | defaultExtraParams: { |
| | | orderInput: [{ property: 'id', order: OrderInputType.Desc }], |
| | | keyword: '', |
| | | queryCondition: '', |
| | | }, |
| | | columnsRenderProps: { |
| | | roleNames: { |
| | | formatter: (row: API.UserListOutput) => row.roleNames.map(formatRoleName).join(','), |
| | | }, |
| | | }, |
| | | columnsRenderProps: {}, |
| | | } |
| | | ); |
| | | |
| | | function openDialog(row?: API.UserListOutput) { |
| | | function openDialog(row?: API.UserDto) { |
| | | if (row) { |
| | | handleEdit({ |
| | | id: row.id, |
| | | userName: row.userName, |
| | | name: row.name, |
| | | phoneNumber: row.phoneNumber, |
| | | channel: row.channel, |
| | | password: '', |
| | | roleName: row.roleNames?.[0] ?? '', |
| | | remark: row.remark, |
| | | |
| | | isSendMessage: row?.isSendMessage ?? false, |
| | | sendClaimMessage: row?.sendClaimMessage ?? false, |
| | | sendBillExpireMessage: row?.sendBillExpireMessage ?? false, |
| | | }); |
| | | } else { |
| | | handleAdd(); |
| | |
| | | userName: '', |
| | | name: '', |
| | | phoneNumber: '', |
| | | channel: '', |
| | | password: '', |
| | | roleName: '', |
| | | remark: '', |
| | | |
| | | isSendMessage: false, |
| | | sendClaimMessage: false, |
| | | sendBillExpireMessage: false, |
| | | }, |
| | | }); |
| | | |
| | |
| | | name: editForm.name, |
| | | userName: editForm.userName, |
| | | remark: editForm.remark, |
| | | password: editForm.password, |
| | | phoneNumber: editForm.phoneNumber, |
| | | channel: editForm.channel, |
| | | // clientId: RoleClientType.RoleBackendClientId, |
| | | roleNames: [editForm.roleName], |
| | | }; |
| | | let res; |
| | | if (isEdit) { |
| | | (params as API.UpdateAccountInput).id = editForm.id; |
| | | res = await userServices.updateAccount(params); |
| | | (params as API.UpdateGovermentClientUserInput).id = editForm.id; |
| | | res = await userRoleServices.updateGovermentClientUser(params); |
| | | } else { |
| | | res = await userServices.createAccount(params); |
| | | (params as API.CreateGoverUserInput).password = editForm.password; |
| | | res = await userRoleServices.createGovermentClientUser(params); |
| | | } |
| | | if (res) { |
| | | Message.successMessage('操作成功'); |
| | |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | |
| | | const { |
| | | dialogProps: resetPasswordDialogProps, |
| | | handleAdd: handleResetPasswordAdd, |
| | | editForm: resetPasswordEditForm, |
| | | } = useFormDialog({ |
| | | onConfirm: resetPassword, |
| | | defaultFormParams: { |
| | | userId: '', |
| | | password: '', |
| | | }, |
| | | }); |
| | | |
| | | function openResetPasswordDialog(row: API.UserDto) { |
| | | handleResetPasswordAdd({ |
| | | userId: row.id, |
| | | password: '', |
| | | }); |
| | | } |
| | | |
| | | async function resetPassword() { |
| | | try { |
| | | let params: API.ResetPasswordBaseInput = { |
| | | userId: resetPasswordEditForm.userId, |
| | | password: resetPasswordEditForm.password, |
| | | }; |
| | | let res = await accountServices.resetPassword(params); |
| | | if (res) { |
| | | Message.successMessage('操作成功'); |
| | | getList(paginationState.pageIndex); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | </script> |