lilyzhou
3 years ago
committed by
GitHub
9 changed files with 837 additions and 7 deletions
@ -0,0 +1,277 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { ref, watch, computed, InjectionKey } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useMessage } from 'naive-ui' |
||||
import { queryTenantList } from '@/service/modules/tenants' |
||||
import { queryList } from '@/service/modules/queues' |
||||
import { |
||||
createUser, |
||||
updateUser, |
||||
delUserById, |
||||
verifyUserName |
||||
} from '@/service/modules/users' |
||||
import regexUtils from '@/utils/regex' |
||||
export type Mode = 'add' | 'edit' | 'delete' |
||||
|
||||
export type UserModalSharedStateType = ReturnType< |
||||
typeof useSharedUserModalState |
||||
> & { |
||||
onSuccess?: (mode: Mode) => void |
||||
} |
||||
|
||||
export const UserModalSharedStateKey: InjectionKey<UserModalSharedStateType> = |
||||
Symbol() |
||||
|
||||
export function useSharedUserModalState() { |
||||
return { |
||||
show: ref(false), |
||||
mode: ref<Mode>('add'), |
||||
user: ref() |
||||
} |
||||
} |
||||
|
||||
export function useModal({ |
||||
onSuccess, |
||||
show, |
||||
mode, |
||||
user |
||||
}: UserModalSharedStateType) { |
||||
const message = useMessage() |
||||
const { t } = useI18n() |
||||
const formRef = ref() |
||||
const formValues = ref({ |
||||
userName: '', |
||||
userPassword: '', |
||||
tenantId: 0, |
||||
email: '', |
||||
queue: '', |
||||
phone: '', |
||||
state: 1 |
||||
}) |
||||
const tenants = ref<any[]>([]) |
||||
const queues = ref<any[]>([]) |
||||
const optionsLoading = ref(false) |
||||
const confirmLoading = ref(false) |
||||
|
||||
const formRules = computed(() => { |
||||
return { |
||||
userName: { |
||||
required: true, |
||||
message: t('security.user.username_rule_msg'), |
||||
trigger: 'blur' |
||||
}, |
||||
userPassword: { |
||||
required: mode.value === 'add', |
||||
validator(rule: any, value?: string) { |
||||
if (mode.value !== 'add' && !value) { |
||||
return true |
||||
} |
||||
const msg = t('security.user.user_password_rule_msg') |
||||
if (!value || !regexUtils.password.test(value)) { |
||||
return new Error(msg) |
||||
} |
||||
return true |
||||
}, |
||||
trigger: ['blur', 'input'] |
||||
}, |
||||
tenantId: { |
||||
required: true, |
||||
validator(rule: any, value?: number) { |
||||
const msg = t('security.user.tenant_id_rule_msg') |
||||
if (typeof value === 'number') { |
||||
return true |
||||
} |
||||
return new Error(msg) |
||||
}, |
||||
trigger: 'blur' |
||||
}, |
||||
email: { |
||||
required: true, |
||||
validator(rule: any, value?: string) { |
||||
const msg = t('security.user.email_rule_msg') |
||||
if (!value || !regexUtils.email.test(value)) { |
||||
return new Error(msg) |
||||
} |
||||
return true |
||||
}, |
||||
trigger: ['blur', 'input'] |
||||
}, |
||||
phone: { |
||||
validator(rule: any, value?: string) { |
||||
const msg = t('security.user.phone_rule_msg') |
||||
if (value && !regexUtils.phone.test(value)) { |
||||
return new Error(msg) |
||||
} |
||||
return true |
||||
}, |
||||
trigger: ['blur', 'input'] |
||||
} |
||||
} |
||||
}) |
||||
|
||||
const titleMap: Record<Mode, string> = { |
||||
add: t('security.user.create_user'), |
||||
edit: t('security.user.update_user'), |
||||
delete: t('security.user.delete_user') |
||||
} |
||||
|
||||
const setFormValues = () => { |
||||
const defaultValues = { |
||||
userName: '', |
||||
userPassword: '', |
||||
tenantId: tenants.value[0]?.value, |
||||
email: '', |
||||
queue: queues.value[0]?.value, |
||||
phone: '', |
||||
state: 1 |
||||
} |
||||
if (!user.value) { |
||||
formValues.value = defaultValues |
||||
} else { |
||||
const v: any = {} |
||||
Object.keys(defaultValues).map((k) => { |
||||
v[k] = user.value[k] |
||||
}) |
||||
v.userPassword = '' |
||||
formValues.value = v |
||||
} |
||||
} |
||||
|
||||
const prepareOptions = async () => { |
||||
optionsLoading.value = true |
||||
Promise.all([queryTenantList(), queryList()]) |
||||
.then((res) => { |
||||
tenants.value = |
||||
res[0]?.map((d: any) => ({ |
||||
label: d.tenantCode, |
||||
value: d.id |
||||
})) || [] |
||||
queues.value = |
||||
res[1]?.map((d: any) => ({ |
||||
label: d.queueName, |
||||
value: d.queue |
||||
})) || [] |
||||
}) |
||||
.finally(() => { |
||||
optionsLoading.value = false |
||||
}) |
||||
} |
||||
|
||||
const onDelete = () => { |
||||
confirmLoading.value = true |
||||
delUserById({ id: user.value.id }) |
||||
.then( |
||||
() => { |
||||
onSuccess?.(mode.value) |
||||
onModalCancel() |
||||
}, |
||||
() => { |
||||
message.error(t('security.user.delete_error_msg')) |
||||
} |
||||
) |
||||
.finally(() => { |
||||
confirmLoading.value = false |
||||
}) |
||||
} |
||||
|
||||
const onCreateUser = () => { |
||||
confirmLoading.value = true |
||||
verifyUserName({ userName: formValues.value.userName }) |
||||
.then( |
||||
() => createUser(formValues.value), |
||||
(error) => { |
||||
if (`${error.message}`.includes('exists')) { |
||||
message.error(t('security.user.username_exists')) |
||||
} |
||||
return false |
||||
} |
||||
) |
||||
.then( |
||||
(res) => { |
||||
if (res) { |
||||
onSuccess?.(mode.value) |
||||
onModalCancel() |
||||
} |
||||
}, |
||||
() => { |
||||
message.error(t('security.user.save_error_msg')) |
||||
} |
||||
) |
||||
.finally(() => { |
||||
confirmLoading.value = false |
||||
}) |
||||
} |
||||
|
||||
const onUpdateUser = () => { |
||||
confirmLoading.value = true |
||||
updateUser({ id: user.value.id, ...formValues.value }) |
||||
.then( |
||||
() => { |
||||
onSuccess?.(mode.value) |
||||
onModalCancel() |
||||
}, |
||||
() => { |
||||
message.error(t('security.user.save_error_msg')) |
||||
} |
||||
) |
||||
.finally(() => { |
||||
confirmLoading.value = false |
||||
}) |
||||
} |
||||
|
||||
const onConfirm = () => { |
||||
if (mode.value === 'delete') { |
||||
onDelete() |
||||
} else { |
||||
formRef.value.validate((errors: any) => { |
||||
if (!errors) { |
||||
user.value ? onUpdateUser() : onCreateUser() |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
|
||||
const onModalCancel = () => { |
||||
show.value = false |
||||
} |
||||
|
||||
watch([show, mode], () => { |
||||
show.value && mode.value !== 'delete' && prepareOptions() |
||||
}) |
||||
|
||||
watch([queues, tenants, user], () => { |
||||
setFormValues() |
||||
}) |
||||
|
||||
return { |
||||
show, |
||||
mode, |
||||
user, |
||||
titleMap, |
||||
onModalCancel, |
||||
formRef, |
||||
formValues, |
||||
formRules, |
||||
tenants, |
||||
queues, |
||||
optionsLoading, |
||||
onConfirm, |
||||
confirmLoading |
||||
} |
||||
} |
||||
@ -0,0 +1,133 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, inject } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { |
||||
NInput, |
||||
NForm, |
||||
NFormItem, |
||||
NSelect, |
||||
NRadio, |
||||
NRadioGroup, |
||||
NSpace, |
||||
NAlert |
||||
} from 'naive-ui' |
||||
|
||||
import Modal from '@/components/modal' |
||||
import { |
||||
useModal, |
||||
useSharedUserModalState, |
||||
UserModalSharedStateKey |
||||
} from './use-modal' |
||||
|
||||
export const UserModal = defineComponent({ |
||||
name: 'user-modal', |
||||
setup() { |
||||
const { t } = useI18n() |
||||
const sharedState = |
||||
inject(UserModalSharedStateKey) || useSharedUserModalState() |
||||
const modalState = useModal(sharedState) |
||||
|
||||
return { |
||||
t, |
||||
...modalState |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = this |
||||
return ( |
||||
<Modal |
||||
show={this.show} |
||||
title={this.titleMap?.[this.mode || 'add']} |
||||
onCancel={this.onModalCancel} |
||||
confirmLoading={this.confirmLoading} |
||||
onConfirm={this.onConfirm} |
||||
> |
||||
{{ |
||||
default: () => { |
||||
if (this.mode === 'delete') { |
||||
return ( |
||||
<NAlert type='error' title={t('security.user.delete_confirm')}> |
||||
{t('security.user.delete_confirm_tip')} |
||||
</NAlert> |
||||
) |
||||
} |
||||
return ( |
||||
<NForm |
||||
ref='formRef' |
||||
model={this.formValues} |
||||
rules={this.formRules} |
||||
labelPlacement='left' |
||||
labelAlign='left' |
||||
labelWidth={80} |
||||
> |
||||
<NFormItem label={t('security.user.username')} path='userName'> |
||||
<NInput |
||||
inputProps={{ autocomplete: 'off' }} |
||||
v-model:value={this.formValues.userName} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('security.user.user_password')} |
||||
path='userPassword' |
||||
> |
||||
<NInput |
||||
inputProps={{ autocomplete: 'off' }} |
||||
type='password' |
||||
v-model:value={this.formValues.userPassword} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('security.user.tenant_code')} |
||||
path='tenantId' |
||||
> |
||||
<NSelect |
||||
options={this.tenants} |
||||
v-model:value={this.formValues.tenantId} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('security.user.queue')} path='queue'> |
||||
<NSelect |
||||
options={this.queues} |
||||
v-model:value={this.formValues.queue} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('security.user.email')} path='email'> |
||||
<NInput v-model:value={this.formValues.email} /> |
||||
</NFormItem> |
||||
<NFormItem label={t('security.user.phone')} path='phone'> |
||||
<NInput v-model:value={this.formValues.phone} /> |
||||
</NFormItem> |
||||
<NFormItem label={t('security.user.state')} path='state'> |
||||
<NRadioGroup v-model:value={this.formValues.state}> |
||||
<NSpace> |
||||
<NRadio value={1}>启用</NRadio> |
||||
<NRadio value={0}>停用</NRadio> |
||||
</NSpace> |
||||
</NRadioGroup> |
||||
</NFormItem> |
||||
</NForm> |
||||
) |
||||
} |
||||
}} |
||||
</Modal> |
||||
) |
||||
} |
||||
}) |
||||
|
||||
export default UserModal |
||||
@ -0,0 +1,144 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, provide } from 'vue' |
||||
import { |
||||
NCard, |
||||
NButton, |
||||
NInputGroup, |
||||
NInput, |
||||
NIcon, |
||||
NSpace, |
||||
NGrid, |
||||
NGridItem, |
||||
NDataTable, |
||||
NPagination, |
||||
NSkeleton |
||||
} from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { SearchOutlined } from '@vicons/antd' |
||||
import { useTable } from './use-table' |
||||
import UserModal from './components/user-modal' |
||||
import { |
||||
useSharedUserModalState, |
||||
UserModalSharedStateKey, |
||||
Mode |
||||
} from './components/use-modal' |
||||
|
||||
const UsersManage = defineComponent({ |
||||
name: 'user-manage', |
||||
setup() { |
||||
const { t } = useI18n() |
||||
const { show, mode, user } = useSharedUserModalState() |
||||
const tableState = useTable({ |
||||
onEdit: (u) => { |
||||
show.value = true |
||||
mode.value = 'edit' |
||||
user.value = u |
||||
}, |
||||
onDelete: (u) => { |
||||
show.value = true |
||||
mode.value = 'delete' |
||||
user.value = u |
||||
} |
||||
}) |
||||
|
||||
const onSuccess = (mode: Mode) => { |
||||
if (mode === 'add') { |
||||
tableState.resetPage() |
||||
} |
||||
tableState.getUserList() |
||||
} |
||||
|
||||
const onAddUser = () => { |
||||
show.value = true |
||||
mode.value = 'add' |
||||
user.value = undefined |
||||
} |
||||
|
||||
provide(UserModalSharedStateKey, { show, mode, user, onSuccess }) |
||||
|
||||
return { |
||||
t, |
||||
onAddUser, |
||||
...tableState |
||||
} |
||||
}, |
||||
render() { |
||||
const { t, onSearchValOk, onSearchValClear, userListLoading } = this |
||||
return ( |
||||
<> |
||||
<NGrid cols={1} yGap={16}> |
||||
<NGridItem> |
||||
<NCard> |
||||
<NSpace justify='space-between'> |
||||
<NButton onClick={this.onAddUser} type='primary'> |
||||
{t('security.user.create_user')} |
||||
</NButton> |
||||
<NInputGroup> |
||||
<NInput |
||||
v-model:value={this.searchInputVal} |
||||
clearable |
||||
onClear={onSearchValClear} |
||||
onKeyup={(e) => { |
||||
if (e.key === 'Enter') { |
||||
onSearchValOk() |
||||
} |
||||
}} |
||||
/> |
||||
<NButton type='primary' onClick={onSearchValOk}> |
||||
<NIcon> |
||||
<SearchOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
</NInputGroup> |
||||
</NSpace> |
||||
</NCard> |
||||
</NGridItem> |
||||
<NGridItem> |
||||
<NCard> |
||||
{userListLoading ? ( |
||||
<NSkeleton text repeat={6}></NSkeleton> |
||||
) : ( |
||||
<NSpace v-show={!userListLoading} vertical size={20}> |
||||
<NDataTable |
||||
columns={this.columns} |
||||
data={this.userList} |
||||
scrollX={this.scrollX} |
||||
bordered={false} |
||||
/> |
||||
<NSpace justify='center'> |
||||
<NPagination |
||||
v-model:page={this.page} |
||||
v-model:page-size={this.pageSize} |
||||
pageCount={this.pageCount} |
||||
pageSizes={this.pageSizes} |
||||
showSizePicker |
||||
/> |
||||
</NSpace> |
||||
</NSpace> |
||||
)} |
||||
</NCard> |
||||
</NGridItem> |
||||
</NGrid> |
||||
<UserModal /> |
||||
</> |
||||
) |
||||
} |
||||
}) |
||||
|
||||
export default UsersManage |
||||
@ -0,0 +1,212 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { ref, watch, onBeforeMount } from 'vue' |
||||
import { NSpace, NTooltip, NButton, NIcon, NTag } from 'naive-ui' |
||||
import { EditOutlined, DeleteOutlined } from '@vicons/antd' |
||||
import { queryUserList } from '@/service/modules/users' |
||||
import { useI18n } from 'vue-i18n' |
||||
|
||||
type UseTableProps = { |
||||
onEdit: (user: any) => void |
||||
onDelete: (user: any) => void |
||||
} |
||||
|
||||
function useColumns({ onEdit, onDelete }: UseTableProps) { |
||||
const { t } = useI18n() |
||||
const columns: any[] = [ |
||||
{ |
||||
title: t('security.user.index'), |
||||
key: 'index', |
||||
width: 80, |
||||
render: (rowData: any, rowIndex: number) => rowIndex + 1 |
||||
}, |
||||
{ |
||||
title: t('security.user.username'), |
||||
key: 'userName' |
||||
}, |
||||
{ |
||||
title: t('security.user.tenant_code'), |
||||
key: 'tenantCode' |
||||
}, |
||||
{ |
||||
title: t('security.user.queue'), |
||||
key: 'queue' |
||||
}, |
||||
{ |
||||
title: t('security.user.email'), |
||||
key: 'email' |
||||
}, |
||||
{ |
||||
title: t('security.user.phone'), |
||||
key: 'phone' |
||||
}, |
||||
{ |
||||
title: t('security.user.state'), |
||||
key: 'state', |
||||
render: (rowData: any, rowIndex: number) => { |
||||
return rowData.state === 1 ? ( |
||||
<NTag type='success'>启用</NTag> |
||||
) : ( |
||||
<NTag type='error'>停用</NTag> |
||||
) |
||||
} |
||||
}, |
||||
{ |
||||
title: t('security.user.create_time'), |
||||
key: 'createTime', |
||||
width: 200 |
||||
}, |
||||
{ |
||||
title: t('security.user.update_time'), |
||||
key: 'updateTime', |
||||
width: 200 |
||||
}, |
||||
{ |
||||
title: t('security.user.operation'), |
||||
key: 'operation', |
||||
fixed: 'right', |
||||
width: 120, |
||||
render: (rowData: any, rowIndex: number) => { |
||||
return ( |
||||
<NSpace> |
||||
<NTooltip trigger='hover'> |
||||
{{ |
||||
trigger: () => ( |
||||
<NButton |
||||
circle |
||||
type='info' |
||||
size='small' |
||||
onClick={() => { |
||||
onEdit(rowData) |
||||
}} |
||||
> |
||||
{{ |
||||
icon: () => ( |
||||
<NIcon> |
||||
<EditOutlined /> |
||||
</NIcon> |
||||
) |
||||
}} |
||||
</NButton> |
||||
), |
||||
default: () => t('security.user.edit') |
||||
}} |
||||
</NTooltip> |
||||
<NTooltip trigger='hover'> |
||||
{{ |
||||
trigger: () => ( |
||||
<NButton |
||||
circle |
||||
type='error' |
||||
size='small' |
||||
onClick={() => { |
||||
onDelete(rowData) |
||||
}} |
||||
> |
||||
{{ |
||||
icon: () => ( |
||||
<NIcon> |
||||
<DeleteOutlined /> |
||||
</NIcon> |
||||
) |
||||
}} |
||||
</NButton> |
||||
), |
||||
default: () => t('security.user.delete') |
||||
}} |
||||
</NTooltip> |
||||
</NSpace> |
||||
) |
||||
} |
||||
} |
||||
].map((d: any) => ({ ...d, width: d.width || 160 })) |
||||
|
||||
const scrollX = columns.reduce((p, c) => p + c.width, 0) |
||||
|
||||
return { |
||||
columns, |
||||
scrollX |
||||
} |
||||
} |
||||
|
||||
export function useTable(props: UseTableProps) { |
||||
const page = ref(1) |
||||
const pageCount = ref(0) |
||||
const pageSize = ref(10) |
||||
const searchInputVal = ref() |
||||
const searchVal = ref('') |
||||
const pageSizes = [10, 30, 50] |
||||
const userListLoading = ref(false) |
||||
const userList = ref([]) |
||||
const { columns, scrollX } = useColumns(props) |
||||
|
||||
const getUserList = () => { |
||||
userListLoading.value = true |
||||
queryUserList({ |
||||
pageNo: page.value, |
||||
pageSize: pageSize.value, |
||||
searchVal: searchVal.value |
||||
}) |
||||
.then((res: any) => { |
||||
userList.value = res?.totalList || [] |
||||
pageCount.value = res?.totalPage || 0 |
||||
}) |
||||
.finally(() => { |
||||
userListLoading.value = false |
||||
}) |
||||
} |
||||
|
||||
const resetPage = () => { |
||||
page.value = 1 |
||||
} |
||||
|
||||
const onSearchValOk = () => { |
||||
resetPage() |
||||
searchVal.value = searchInputVal.value |
||||
} |
||||
|
||||
const onSearchValClear = () => { |
||||
resetPage() |
||||
searchVal.value = '' |
||||
} |
||||
|
||||
onBeforeMount(() => { |
||||
getUserList() |
||||
}) |
||||
|
||||
watch([page, pageSize, searchVal], () => { |
||||
getUserList() |
||||
}) |
||||
|
||||
return { |
||||
userList, |
||||
userListLoading, |
||||
getUserList, |
||||
page, |
||||
pageCount, |
||||
pageSize, |
||||
searchVal, |
||||
searchInputVal, |
||||
pageSizes, |
||||
columns, |
||||
scrollX, |
||||
onSearchValOk, |
||||
onSearchValClear, |
||||
resetPage |
||||
} |
||||
} |
||||
Loading…
Reference in new issue