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

View File

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

View File

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

View File

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

View File

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

View File

@ -32,10 +32,10 @@ onMounted(() => {
<template>
<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-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-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-form-item>
<el-form-item>

View File

@ -65,8 +65,8 @@ onMounted(() => {
</el-form-item>
<!-- 发送人昵称 -->
<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-form-item :label="$t('sendNickname')" prop="sendNickname">
<el-input v-model="messageStore.form.sendNickname" :placeholder="`${$t('input')}${$t('sendNickname')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 消息类型 -->
@ -81,16 +81,16 @@ onMounted(() => {
<!-- 编辑器类型 -->
<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-select>
<!--<el-input v-model="messageStore.form.editorType" :placeholder="`${$t('input')}${$t('editorType')}`" class="!w-[180px]" clearable />-->
</el-form-item>
<!-- 0:未读 1:已读 -->
<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-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(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
@ -129,11 +129,15 @@ onMounted(() => {
@page-current-change="onCurrentPageChange"
>
<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 #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 #operation="{ row }">

View File

@ -7,7 +7,7 @@ import { $t } from '@/plugins/i18n';
import { usePublicHooks } from '@/views/hooks';
import { useMessageTypeStore } from '@/store/message/messageType';
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>(), {
formInline: () => ({
@ -33,25 +33,7 @@ const props = withDefaults(defineProps<FormProps>(), {
const { switchStyle } = usePublicHooks();
const formRef = ref<FormInstance>();
const form = ref(props.formInline);
const adminUserStore = useAdminUserStore();
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(() => {
messageTypeStore.getAllMessageTypeList();
@ -67,23 +49,20 @@ defineExpose({ formRef });
</el-form-item>
<!-- 接收人用户ID -->
<el-form-item :label="$t('receivedUserId')" prop="receivedUserId">
<el-input v-model="form.receivedUserId" :placeholder="$t('receivedUserIdTip')" autocomplete="off" type="text" />
<el-form-item :label="$t('receivedUserIds')" prop="receivedUserIds">
<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>
<!-- 发送人用户ID -->
<el-form-item :label="$t('sendUserId')" prop="sendUserId">
<el-select
v-model="form.sendUserId"
:loading="loading"
:placeholder="$t('select') + $t('sendUserId')"
:remote-method="onSearchUserinfo"
clearable
filterable
remote
remote-show-suffix
@change="onSelectSendUser"
>
<el-select v-model="form.sendUserId" :loading="loading" :placeholder="$t('select') + $t('sendUserId')" :remote-method="onSearchUserinfo" clearable filterable 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">

View File

@ -10,16 +10,14 @@ export const columns: TableColumnList = [
{ label: $t('title'), prop: 'title' },
// 接收人用户ID
{
label: $t('receivedUserId'),
prop: 'receivedUserId',
formatter({ receivedUserId }) {
return !receivedUserId ? $t('all') : receivedUserId;
label: $t('receivedUserIds'),
prop: 'receivedUserIds',
formatter({ receivedUserIds }) {
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' },
// 消息内容
@ -27,11 +25,17 @@ export const columns: TableColumnList = [
// 编辑器类型
{ label: $t('editorType'), prop: 'editorType' },
// 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.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];

View File

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

View File

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

View File

@ -68,6 +68,11 @@ onMounted(() => {
<el-input v-model="messageTypeStore.form.messageName" :placeholder="`${$t('input')}${$t('messageName')}`" class="!w-[180px]" clearable />
</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-input v-model="messageTypeStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable />
@ -127,11 +132,15 @@ onMounted(() => {
</template>
<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 #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 #operation="{ row }">

View File

@ -16,8 +16,8 @@ export const columns: TableColumnList = [
{ label: $t('summary'), prop: 'summary' },
{ label: $t('table.updateTime'), prop: 'updateTime', 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.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];