auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize: ♻️ 消息接受和发送连表查询显示用户名

This commit is contained in:
Bunny 2024-10-30 23:44:10 +08:00
parent ae4323c18b
commit e06627ccb4
12 changed files with 77 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/v1/i18n.ts
View File

@ -27,8 +27,8 @@ export const fetchDeleteI18n = (data: any) => {
}; };
/** 多语言类型管理---获取多语言类型列表 */ /** 多语言类型管理---获取多语言类型列表 */
export const fetchGetI18nTypeList = () => { export const fetchGetI18nTypeList = (data: any) => {
return http.request<BaseResult<ResultTable>>('get', 'i18nType/noAuth/getI18nTypeList'); return http.request<BaseResult<ResultTable>>('get', 'i18nType/noAuth/getI18nTypeList', { params: data });
}; };
/** 多语言类型管理---添加多语言类型 */ /** 多语言类型管理---添加多语言类型 */

2
src/store/i18n/i18nType.ts
View File

@ -32,7 +32,7 @@ export const userI18nTypeStore = defineStore('i18nTypeStore', {
* * 获取多语言类型 * * 获取多语言类型
*/ */
async getI18nTypeList() { async getI18nTypeList() {
const result = await fetchGetI18nTypeList(); const result = await fetchGetI18nTypeList(this.form);
if (result.code === 200) { if (result.code === 200) {
this.datalist = result.data; this.datalist = result.data;
return true; return true;

4
src/store/message/message.ts
View File

@ -17,11 +17,11 @@ export const useMessageStore = defineStore('messageStore', {
// 消息标题 // 消息标题
title: undefined, title: undefined,
// 接收人用户ID // 接收人用户ID
receivedUserId: undefined, receivedUserIds: undefined,
// 发送人用户ID // 发送人用户ID
sendUserId: undefined, sendUserId: undefined,
// 发送人昵称 // 发送人昵称
sendNickName: undefined, sendNickname: undefined,
// 消息类型 // 消息类型
messageType: undefined, messageType: undefined,
// 消息内容 // 消息内容

2
src/store/message/messageType.ts
View File

@ -20,6 +20,8 @@ export const useMessageTypeStore = defineStore('messageTypeStore', {
status: undefined, status: undefined,
// 消息名称 // 消息名称
messageName: undefined, messageName: undefined,
// 发送人昵称
sendUserNickname: undefined,
// 消息类型 // 消息类型
messageType: undefined, messageType: undefined,
// 消息备注 // 消息备注

4
src/views/i18n/i18n-type-setting/index.vue
View File

@ -32,10 +32,10 @@ onMounted(() => {
<template> <template>
<div class="main"> <div class="main">
<el-form ref="formRef" :inline="true" :model="i18nTypeStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"> <el-form ref="formRef" :inline="true" :model="i18nTypeStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<el-form-item :label="$t('i18n_typeName')" prop="title"> <el-form-item :label="$t('i18n_typeName')" prop="typeName">
<el-input v-model="i18nTypeStore.form.typeName" :placeholder="`${$t('input')}${$t('i18n_typeName')}`" class="!w-[180px]" clearable /> <el-input v-model="i18nTypeStore.form.typeName" :placeholder="`${$t('input')}${$t('i18n_typeName')}`" class="!w-[180px]" clearable />
</el-form-item> </el-form-item>
<el-form-item :label="$t('i18n_summary')" prop="title"> <el-form-item :label="$t('i18n_summary')" prop="summary">
<el-input v-model="i18nTypeStore.form.summary" :placeholder="`${$t('input')}${$t('i18n_summary')}`" class="!w-[180px]" clearable /> <el-input v-model="i18nTypeStore.form.summary" :placeholder="`${$t('input')}${$t('i18n_summary')}`" class="!w-[180px]" clearable />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>

16
src/views/message/message/index.vue
View File

@ -65,8 +65,8 @@ onMounted(() => {
</el-form-item> </el-form-item>
<!-- 发送人昵称 --> <!-- 发送人昵称 -->
<el-form-item :label="$t('sendNickName')" prop="sendNickName"> <el-form-item :label="$t('sendNickname')" prop="sendNickname">
<el-input v-model="messageStore.form.sendNickName" :placeholder="`${$t('input')}${$t('sendNickName')}`" class="!w-[180px]" clearable /> <el-input v-model="messageStore.form.sendNickname" :placeholder="`${$t('input')}${$t('sendNickname')}`" class="!w-[180px]" clearable />
</el-form-item> </el-form-item>
<!-- 消息类型 --> <!-- 消息类型 -->
@ -81,16 +81,16 @@ onMounted(() => {
<!-- 编辑器类型 --> <!-- 编辑器类型 -->
<el-form-item :label="$t('editorType')" prop="editorType"> <el-form-item :label="$t('editorType')" prop="editorType">
<el-select v-model="messageStore.form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" clearable filterable> <el-select v-model="messageStore.form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" class="!w-[180px]" clearable filterable>
<el-option v-for="(item, index) in editorTypeList" :key="index" :label="item.label" :navigationBar="false" :value="item.value" /> <el-option v-for="(item, index) in editorTypeList" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
</el-select> </el-select>
<!--<el-input v-model="messageStore.form.editorType" :placeholder="`${$t('input')}${$t('editorType')}`" class="!w-[180px]" clearable />-->
</el-form-item> </el-form-item>
<!-- 0:未读 1:已读 --> <!-- 0:未读 1:已读 -->
<el-form-item :label="$t('status')" prop="status"> <el-form-item :label="$t('status')" prop="status">
<el-input v-model="messageStore.form.status" :placeholder="`${$t('input')}${$t('status')}`" class="!w-[180px]" clearable /> <el-input v-model="messageStore.form.status" :placeholder="`${$t('input')}${$t('status')}`" class="!w-[180px]" clearable />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="messageStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button> <el-button :icon="useRenderIcon('ri:search-line')" :loading="messageStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button> <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
@ -129,11 +129,15 @@ onMounted(() => {
@page-current-change="onCurrentPageChange" @page-current-change="onCurrentPageChange"
> >
<template #createUser="{ row }"> <template #createUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button> <el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
{{ row.createUsername }}
</el-button>
</template> </template>
<template #updateUser="{ row }"> <template #updateUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button> <el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
{{ row.updateUsername }}
</el-button>
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">

43
src/views/message/message/message-dialog.vue
View File

@ -7,7 +7,7 @@ import { $t } from '@/plugins/i18n';
import { usePublicHooks } from '@/views/hooks'; import { usePublicHooks } from '@/views/hooks';
import { useMessageTypeStore } from '@/store/message/messageType'; import { useMessageTypeStore } from '@/store/message/messageType';
import LoadingSvg from '@/assets/svg/loading.svg'; import LoadingSvg from '@/assets/svg/loading.svg';
import { useAdminUserStore } from '@/store/system/adminUser'; import { loading, onSearchUserinfo, userDataList } from '@/views/message/message/utils/hooks';
const props = withDefaults(defineProps<FormProps>(), { const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({ formInline: () => ({
@ -33,25 +33,7 @@ const props = withDefaults(defineProps<FormProps>(), {
const { switchStyle } = usePublicHooks(); const { switchStyle } = usePublicHooks();
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const form = ref(props.formInline); const form = ref(props.formInline);
const adminUserStore = useAdminUserStore();
const messageTypeStore = useMessageTypeStore(); const messageTypeStore = useMessageTypeStore();
// 搜索用户加载
const loading = ref(false);
// 用户信息列表
const userDataList = ref();
/** 搜索 */
const onSearchUserinfo = async (keyword: string) => {
loading.value = true;
userDataList.value = await adminUserStore.queryUser({ keyword });
loading.value = false;
};
/** 当选择发送用户 */
const onSelectSendUser = (va: any) => {
const user = userDataList.value.filter((user: any) => user.id === va)[0];
form.value.sendNickName = user.nickname;
};
onMounted(() => { onMounted(() => {
messageTypeStore.getAllMessageTypeList(); messageTypeStore.getAllMessageTypeList();
@ -67,23 +49,20 @@ defineExpose({ formRef });
</el-form-item> </el-form-item>
<!-- 接收人用户ID --> <!-- 接收人用户ID -->
<el-form-item :label="$t('receivedUserId')" prop="receivedUserId"> <el-form-item :label="$t('receivedUserIds')" prop="receivedUserIds">
<el-input v-model="form.receivedUserId" :placeholder="$t('receivedUserIdTip')" autocomplete="off" type="text" /> <el-select v-model="form.receivedUserIds" :loading="loading" :placeholder="$t('receivedUserIdTip')" :remote-method="onSearchUserinfo" clearable filterable multiple remote remote-show-suffix>
<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
<template #loading>
<el-icon class="is-loading">
<LoadingSvg />
</el-icon>
</template>
</el-select>
</el-form-item> </el-form-item>
<!-- 发送人用户ID --> <!-- 发送人用户ID -->
<el-form-item :label="$t('sendUserId')" prop="sendUserId"> <el-form-item :label="$t('sendUserId')" prop="sendUserId">
<el-select <el-select v-model="form.sendUserId" :loading="loading" :placeholder="$t('select') + $t('sendUserId')" :remote-method="onSearchUserinfo" clearable filterable remote remote-show-suffix>
v-model="form.sendUserId"
:loading="loading"
:placeholder="$t('select') + $t('sendUserId')"
:remote-method="onSearchUserinfo"
clearable
filterable
remote
remote-show-suffix
@change="onSelectSendUser"
>
<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" /> <el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
<template #loading> <template #loading>
<el-icon class="is-loading"> <el-icon class="is-loading">

24
src/views/message/message/utils/columns.ts
View File

@ -10,16 +10,14 @@ export const columns: TableColumnList = [
{ label: $t('title'), prop: 'title' }, { label: $t('title'), prop: 'title' },
// 接收人用户ID // 接收人用户ID
{ {
label: $t('receivedUserId'), label: $t('receivedUserIds'),
prop: 'receivedUserId', prop: 'receivedUserIds',
formatter({ receivedUserId }) { formatter({ receivedUserIds }) {
return !receivedUserId ? $t('all') : receivedUserId; return !receivedUserIds ? $t('all') : $t('portion');
}, },
}, },
// 发送人用户ID
{ label: $t('sendUserId'), prop: 'sendUserId' },
// 发送人昵称 // 发送人昵称
{ label: $t('sendNickName'), prop: 'sendNickName' }, { label: $t('sendNickname'), prop: 'sendNickname' },
// 消息类型 // 消息类型
{ label: $t('messageType'), prop: 'messageType' }, { label: $t('messageType'), prop: 'messageType' },
// 消息内容 // 消息内容
@ -27,11 +25,17 @@ export const columns: TableColumnList = [
// 编辑器类型 // 编辑器类型
{ label: $t('editorType'), prop: 'editorType' }, { label: $t('editorType'), prop: 'editorType' },
// 0:未读 1:已读 // 0:未读 1:已读
{ label: $t('status'), prop: 'status' }, {
label: $t('status'),
prop: 'status',
formatter({ status }) {
return status ? $t('readAlready') : $t('unread');
},
},
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 }, { label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 }, { label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 }, { label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 }, { label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' }, { label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
]; ];

21
src/views/message/message/utils/hooks.ts
View File

@ -6,11 +6,17 @@ import { message, messageBox } from '@/utils/message';
import type { FormItemProps } from '@/views/message/message/utils/types'; import type { FormItemProps } from '@/views/message/message/utils/types';
import { $t } from '@/plugins/i18n'; import { $t } from '@/plugins/i18n';
import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue'; import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
import { useAdminUserStore } from '@/store/system/adminUser';
export const formRef = ref(); export const formRef = ref();
// 删除ids // 删除ids
export const deleteIds = ref([]); export const deleteIds = ref([]);
// 用户信息列表
export const userDataList = ref();
// 搜索用户加载
export const loading = ref(false);
const messageStore = useMessageStore(); const messageStore = useMessageStore();
const adminUserStore = useAdminUserStore();
/** 搜索初始化系统消息 */ /** 搜索初始化系统消息 */
export async function onSearch() { export async function onSearch() {
@ -27,7 +33,7 @@ export function onAdd() {
props: { props: {
formInline: { formInline: {
title: undefined, title: undefined,
receivedUserId: undefined, receivedUserIds: undefined,
sendUserId: undefined, sendUserId: undefined,
sendNickName: undefined, sendNickName: undefined,
messageType: undefined, messageType: undefined,
@ -58,14 +64,16 @@ export function onAdd() {
* * 更新系统消息 * * 更新系统消息
* @param row * @param row
*/ */
export function onUpdate(row: any) { export async function onUpdate(row: any) {
await onSearchUserinfo();
addDialog({ addDialog({
title: `${$t('modify')}${$t('message')}`, title: `${$t('modify')}${$t('message')}`,
width: '30%', width: '30%',
props: { props: {
formInline: { formInline: {
title: row.title, title: row.title,
receivedUserId: row.receivedUserId, receivedUserIds: row.receivedUserIds ? row.receivedUserIds.split(',') : row.receivedUserIds,
sendUserId: row.sendUserId, sendUserId: row.sendUserId,
sendNickName: row.sendNickName, sendNickName: row.sendNickName,
messageType: row.messageType, messageType: row.messageType,
@ -139,3 +147,10 @@ export const onDeleteBatch = async () => {
}, },
}); });
}; };
/** 搜索 */
export const onSearchUserinfo = async (keyword: string) => {
loading.value = true;
userDataList.value = await adminUserStore.queryUser({ keyword });
loading.value = false;
};

6
src/views/message/message/utils/types.ts
View File

@ -3,11 +3,9 @@ export interface FormItemProps {
// 消息标题 // 消息标题
title: string; title: string;
// 接收人用户ID // 接收人用户ID
receivedUserId: number; receivedUserIds: string[];
// 发送人用户ID // 发送人用户ID
sendUserId: number; sendUserId: string;
// 发送人昵称
sendNickName: string;
// 消息类型 // 消息类型
messageType: string; messageType: string;
// 消息内容 // 消息内容

13
src/views/message/messageType/index.vue
View File

@ -68,6 +68,11 @@ onMounted(() => {
<el-input v-model="messageTypeStore.form.messageName" :placeholder="`${$t('input')}${$t('messageName')}`" class="!w-[180px]" clearable /> <el-input v-model="messageTypeStore.form.messageName" :placeholder="`${$t('input')}${$t('messageName')}`" class="!w-[180px]" clearable />
</el-form-item> </el-form-item>
<!-- 发送人昵称 -->
<el-form-item :label="$t('sendUserNickname')" prop="sendUserNickname">
<el-input v-model="messageTypeStore.form.sendUserNickname" :placeholder="`${$t('input')}${$t('sendUserNickname')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 消息类型 --> <!-- 消息类型 -->
<el-form-item :label="$t('messageType')" prop="messageType"> <el-form-item :label="$t('messageType')" prop="messageType">
<el-input v-model="messageTypeStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable /> <el-input v-model="messageTypeStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable />
@ -127,11 +132,15 @@ onMounted(() => {
</template> </template>
<template #createUser="{ row }"> <template #createUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button> <el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
{{ row.createUsername }}
</el-button>
</template> </template>
<template #updateUser="{ row }"> <template #updateUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button> <el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
{{ row.updateUsername }}
</el-button>
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">

4
src/views/message/messageType/utils/columns.tsx
View File

@ -16,8 +16,8 @@ export const columns: TableColumnList = [
{ label: $t('summary'), prop: 'summary' }, { label: $t('summary'), prop: 'summary' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 }, { label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 }, { label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 }, { label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 }, { label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' }, { label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
]; ];