feat: add tenant-aware IM management console
This commit is contained in:
richjohnrambo
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<n-modal v-model:show="showModal" preset="dialog" title="重置IM用户密码" :mask-closable="false">
|
||||
<n-form ref="formRef" :model="formValue" :rules="rules" label-placement="left" :label-width="90">
|
||||
<n-form-item label="用户ID">
|
||||
<n-text>{{ userId }}</n-text>
|
||||
</n-form-item>
|
||||
<n-form-item label="新密码" path="newPassword">
|
||||
<n-input
|
||||
v-model:value="formValue.newPassword"
|
||||
type="password"
|
||||
show-password-on="click"
|
||||
maxlength="72"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="确认密码" path="confirmPassword">
|
||||
<n-input
|
||||
v-model:value="formValue.confirmPassword"
|
||||
type="password"
|
||||
show-password-on="click"
|
||||
maxlength="72"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #action>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showModal = false">取消</n-button>
|
||||
<n-button type="primary" :loading="loading" @click="submit">确认重置</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { ResetPassword } from '@/api/imUser';
|
||||
import type { State } from './model';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
const message = useMessage();
|
||||
const formRef = ref();
|
||||
const showModal = ref(false);
|
||||
const loading = ref(false);
|
||||
const tenantId = ref(0);
|
||||
const userId = ref('');
|
||||
const formValue = reactive({ newPassword: '', confirmPassword: '' });
|
||||
const rules = {
|
||||
newPassword: {
|
||||
required: true,
|
||||
validator: (_rule, value: string) => {
|
||||
if (!value || value.length < 3) return new Error('密码长度不能少于3位');
|
||||
if (new TextEncoder().encode(value).length > 72) return new Error('密码长度不能超过72字节');
|
||||
return true;
|
||||
},
|
||||
trigger: ['blur', 'input'],
|
||||
},
|
||||
confirmPassword: {
|
||||
required: true,
|
||||
validator: (_rule, value: string) =>
|
||||
value === formValue.newPassword ? true : new Error('两次输入的密码不一致'),
|
||||
trigger: ['blur', 'input'],
|
||||
},
|
||||
};
|
||||
|
||||
function openModal(record: State) {
|
||||
tenantId.value = record.tenantId;
|
||||
userId.value = record.userId;
|
||||
formValue.newPassword = '';
|
||||
formValue.confirmPassword = '';
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
await formRef.value?.validate();
|
||||
loading.value = true;
|
||||
try {
|
||||
await ResetPassword({
|
||||
tenantId: tenantId.value,
|
||||
userId: userId.value,
|
||||
newPassword: formValue.newPassword,
|
||||
});
|
||||
message.success('密码已重置，用户原有登录状态已失效');
|
||||
showModal.value = false;
|
||||
emit('reload');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ openModal });
|
||||
</script>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<n-card :bordered="false" title="IM用户管理"></n-card>
|
||||
</div>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicForm
|
||||
ref="searchFormRef"
|
||||
@register="register"
|
||||
@submit="reloadTable"
|
||||
@reset="reloadTable"
|
||||
@keyup.enter="reloadTable"
|
||||
/>
|
||||
<BasicTable
|
||||
ref="actionRef"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.tenantId + '-' + row.userId"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-card>
|
||||
<ViewModal ref="viewRef" />
|
||||
<ResetPasswordModal ref="resetPasswordRef" @reload="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { usePermission } from '@/hooks/web/usePermission';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { List } from '@/api/imUser';
|
||||
import { columns, loadOptions, loadTenantOptions, schemas, State, tenantOptions } from './model';
|
||||
import { adaTableScrollX } from '@/utils/hotgo';
|
||||
import ViewModal from './view.vue';
|
||||
import ResetPasswordModal from './ResetPasswordModal.vue';
|
||||
|
||||
const message = useMessage();
|
||||
const { hasPermission } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
const isPlatformAdmin = computed(() => userStore.isCompanyDept);
|
||||
const actionRef = ref();
|
||||
const searchFormRef = ref<any>({});
|
||||
const viewRef = ref();
|
||||
const resetPasswordRef = ref();
|
||||
|
||||
const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
|
||||
if (tenantSchema) {
|
||||
tenantSchema.ifShow = () => isPlatformAdmin.value;
|
||||
}
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 220,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: State) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleView.bind(null, record),
|
||||
auth: ['/imUser/view'],
|
||||
},
|
||||
{
|
||||
label: '重置密码',
|
||||
type: 'warning',
|
||||
onClick: handleResetPassword.bind(null, record),
|
||||
auth: ['/imUser/resetPassword'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const scrollX = computed(() => {
|
||||
return adaTableScrollX(columns, actionColumn.width);
|
||||
});
|
||||
|
||||
const [register, { setFieldsValue }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 90,
|
||||
schemas,
|
||||
});
|
||||
|
||||
// 加载表格数据
|
||||
const loadDataTable = async (res) => {
|
||||
const params = { ...searchFormRef.value?.formModel, ...res };
|
||||
if (isPlatformAdmin.value && !params.tenantId) {
|
||||
return { list: [], page: 1, pageCount: 0, totalCount: 0 };
|
||||
}
|
||||
return await List(params);
|
||||
};
|
||||
|
||||
// 重新加载表格数据
|
||||
function reloadTable() {
|
||||
actionRef.value?.reload();
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function handleView(record: Recordable) {
|
||||
viewRef.value.openModal(record);
|
||||
}
|
||||
|
||||
function handleResetPassword(record: State) {
|
||||
resetPasswordRef.value.openModal(record);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadOptions();
|
||||
if (isPlatformAdmin.value) {
|
||||
await loadTenantOptions();
|
||||
if (tenantOptions.value.length > 0) {
|
||||
await setFieldsValue({ tenantId: tenantOptions.value[0].value });
|
||||
} else {
|
||||
message.warning('暂无可用租户');
|
||||
}
|
||||
}
|
||||
reloadTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,215 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { List as TenantList } from '@/api/imTenant';
|
||||
|
||||
const dict = useDictStore();
|
||||
|
||||
export const tenantOptions = ref<any[]>([]);
|
||||
|
||||
export class State {
|
||||
public tenantId = 0; // 租户ID
|
||||
public tenantName = ''; // 租户名称
|
||||
public userId = ''; // 用户ID
|
||||
public username = ''; // 登录账号
|
||||
public phone = ''; // 手机号
|
||||
public nickname = ''; // 昵称
|
||||
public publicAccount = ''; // 公开账号
|
||||
public gender = ''; // 性别
|
||||
public region = ''; // 地区
|
||||
public state = 0; // 账号状态
|
||||
public authVersion = 0; // 认证版本
|
||||
public passwordUpdatedAt = ''; // 密码更新时间
|
||||
public authNames = ''; // 登录标识
|
||||
public credentials = ''; // 凭证
|
||||
public lastSeen = ''; // 最后在线时间
|
||||
public userAgent = ''; // 客户端
|
||||
public createdAt = ''; // 创建时间
|
||||
public updatedAt = ''; // 修改时间
|
||||
public signature = ''; // 个性签名
|
||||
public avatarFileId = ''; // 头像文件ID
|
||||
public birthDate = ''; // 出生日期
|
||||
public profileJson = ''; // Tinode Public资料
|
||||
public trustedJson = ''; // Tinode Trusted资料
|
||||
public accessJson = ''; // 访问权限
|
||||
public profileVersion = 0; // 资料版本
|
||||
|
||||
constructor(state?: Partial<State>) {
|
||||
if (state) {
|
||||
Object.assign(this, state);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function newState(state: State | Record<string, any> | null): State {
|
||||
if (state !== null) {
|
||||
if (state instanceof State) {
|
||||
return cloneDeep(state);
|
||||
}
|
||||
return new State(state);
|
||||
}
|
||||
return new State();
|
||||
}
|
||||
|
||||
// 表格搜索表单
|
||||
export const schemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'tenantId',
|
||||
component: 'NSelect',
|
||||
label: '租户',
|
||||
componentProps: {
|
||||
clearable: false,
|
||||
options: computed(() => tenantOptions.value),
|
||||
placeholder: '请选择租户',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'userId',
|
||||
component: 'NInput',
|
||||
label: '用户ID',
|
||||
componentProps: {
|
||||
placeholder: '请输入用户ID',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nickname',
|
||||
component: 'NInput',
|
||||
label: '昵称',
|
||||
componentProps: {
|
||||
placeholder: '请输入昵称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'authName',
|
||||
component: 'NInput',
|
||||
label: '登录标识',
|
||||
componentProps: {
|
||||
placeholder: '请输入登录名/手机号/邮箱',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImUserStateOptions')),
|
||||
placeholder: '请选择状态',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createdAt',
|
||||
component: 'NDatePicker',
|
||||
label: '创建时间',
|
||||
componentProps: {
|
||||
type: 'datetimerange',
|
||||
clearable: true,
|
||||
shortcuts: defRangeShortcuts(),
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'lastSeen',
|
||||
component: 'NDatePicker',
|
||||
label: '最后在线',
|
||||
componentProps: {
|
||||
type: 'datetimerange',
|
||||
clearable: true,
|
||||
shortcuts: defRangeShortcuts(),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
// 表格列
|
||||
export const columns = [
|
||||
{
|
||||
title: '用户ID',
|
||||
key: 'userId',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
key: 'nickname',
|
||||
align: 'left',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '登录账号',
|
||||
key: 'username',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'phone',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '公开账号',
|
||||
key: 'publicAccount',
|
||||
align: 'left',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'state',
|
||||
align: 'left',
|
||||
width: 110,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImUserStateOptions', row.state);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '登录标识',
|
||||
key: 'authNames',
|
||||
align: 'left',
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: '凭证',
|
||||
key: 'credentials',
|
||||
align: 'left',
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
title: '最后在线',
|
||||
key: 'lastSeen',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '客户端',
|
||||
key: 'userAgent',
|
||||
align: 'left',
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createdAt',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
key: 'updatedAt',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
// 加载字典数据选项
|
||||
export function loadOptions() {
|
||||
dict.loadOptions(['ImUserStateOptions']);
|
||||
}
|
||||
|
||||
export async function loadTenantOptions() {
|
||||
const res = await TenantList({ page: 1, perPage: 20 });
|
||||
tenantOptions.value = (res?.list || []).map((item) => ({
|
||||
label: `${item.name}（${item.code}）`,
|
||||
value: item.id,
|
||||
}));
|
||||
return tenantOptions.value;
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
:title="'IM用户详情 #' + formValue.userId"
|
||||
:style="{
|
||||
width: dialogWidth,
|
||||
}"
|
||||
>
|
||||
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<n-descriptions label-placement="left" bordered :column="settingStore.isMobile ? 1 : 2">
|
||||
<n-descriptions-item label="租户">{{ formValue.tenantName }}</n-descriptions-item>
|
||||
<n-descriptions-item label="用户ID">{{ formValue.userId }}</n-descriptions-item>
|
||||
<n-descriptions-item label="登录账号">{{ formValue.username }}</n-descriptions-item>
|
||||
<n-descriptions-item label="手机号">{{ formValue.phone || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="昵称">{{ formValue.nickname || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="公开账号">{{ formValue.publicAccount || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="状态">{{ stateLabel }}</n-descriptions-item>
|
||||
<n-descriptions-item label="认证版本">{{ formValue.authVersion }}</n-descriptions-item>
|
||||
<n-descriptions-item label="登录标识">{{ formValue.authNames || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="凭证">{{ formValue.credentials || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="性别">{{ formValue.gender || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="地区">{{ formValue.region || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="出生日期">{{ formValue.birthDate || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="密码更新时间">
|
||||
{{ formValue.passwordUpdatedAt || '-' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="最后在线">{{ formValue.lastSeen || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="资料版本">{{ formValue.profileVersion }}</n-descriptions-item>
|
||||
<n-descriptions-item label="创建时间">{{ formValue.createdAt || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="修改时间">{{ formValue.updatedAt || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="客户端" :span="2">
|
||||
{{ formValue.userAgent || '-' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="个性签名" :span="2">
|
||||
{{ formValue.signature || '-' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="头像文件ID" :span="2">
|
||||
{{ formValue.avatarFileId || '-' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="访问权限" :span="2">
|
||||
<n-code :code="formValue.accessJson || '-'" language="json" word-wrap />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Public资料" :span="2">
|
||||
<n-code :code="formValue.profileJson || '-'" language="json" word-wrap />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Trusted资料" :span="2">
|
||||
<n-code :code="formValue.trustedJson || '-'" language="json" word-wrap />
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-spin>
|
||||
</n-scrollbar>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm">关闭</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { View } from '@/api/imUser';
|
||||
import { newState, State } from './model';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
|
||||
const settingStore = useProjectSettingStore();
|
||||
const dict = useDictStore();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(960);
|
||||
});
|
||||
const stateLabel = computed(() => dict.getLabel('ImUserStateOptions', formValue.value.state));
|
||||
|
||||
// 关闭弹窗
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
function openModal(state: State) {
|
||||
showModal.value = true;
|
||||
loading.value = true;
|
||||
View({ tenantId: state.tenantId, userId: state.userId })
|
||||
.then((res) => {
|
||||
formValue.value = newState(res);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
Reference in New Issue
Block a user