completepage: 🍻 消息管理页面CURD

src/api/v1/message.ts

@@ -0,0 +1,22 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/** 系统消息---获取系统消息列表 */
+export const fetchGetMessageList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `message/getMessageList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/** 系统消息---添加系统消息 */
+export const fetchAddMessage = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'message/addMessage', { data });
+};
+
+/** 系统消息---更新系统消息 */
+export const fetchUpdateMessage = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'message/updateMessage', { data });
+};
+
+/** 系统消息---删除系统消息 */
+export const fetchDeleteMessage = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'message/deleteMessage', { data });
+};

src/store/message/message.ts

@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia';
+import { fetchAddMessage, fetchDeleteMessage, fetchGetMessageList, fetchUpdateMessage } from '@/api/v1/message';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 系统消息 Store
+ */
+export const useMessageStore = defineStore('messageStore', {
+	state() {
+		return {
+			// 系统消息列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 消息标题
+				title: undefined,
+				// 接收人用户ID
+				receivedUserId: undefined,
+				// 发送人用户ID
+				sendUserId: undefined,
+				// 发送人昵称
+				sendNickName: undefined,
+				// 消息类型
+				messageType: undefined,
+				// 消息内容
+				content: undefined,
+				// 编辑器类型
+				editorType: undefined,
+				// 0:未读 1:已读
+				status: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 150,
+				total: 100,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/** 获取系统消息 */
+		async getMessageList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取系统消息列表
+			const result = await fetchGetMessageList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/** 添加系统消息 */
+		async addMessage(data: any) {
+			const result = await fetchAddMessage(data);
+			return storeMessage(result);
+		},
+
+		/** 修改系统消息 */
+		async updateMessage(data: any) {
+			const result = await fetchUpdateMessage(data);
+			return storeMessage(result);
+		},
+
+		/** 删除系统消息 */
+		async deleteMessage(data: any) {
+			const result = await fetchDeleteMessage(data);
+			return storeMessage(result);
+		},
+	},
+});

src/store/message/messageType.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { fetchAddMessageType, fetchDeleteMessageType, fetchGetMessageTypeList, fetchUpdateMessageType } from '@/api/v1/messageType';
+import { fetchAddMessageType, fetchDeleteMessageType, fetchGetAllMessageTypes, fetchGetMessageTypeList, fetchUpdateMessageType } from '@/api/v1/messageType';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
@@ -12,6 +12,8 @@ export const useMessageTypeStore = defineStore('messageTypeStore', {
 		return {
 			// 系统消息类型列表
 			datalist: [],
+			// 所有消息类型
+			allMessageTypeList: [],
 			// 查询表单
 			form: {
 				// 1:启用 0:禁用
@@ -52,6 +54,12 @@ export const useMessageTypeStore = defineStore('messageTypeStore', {
 			return pagination(result);
 		},
 
+		/** 所有系统类型 */
+		async getAllMessageTypeList() {
+			const baseResult = await fetchGetAllMessageTypes();
+			this.allMessageTypeList = baseResult.data;
+		},
+
 		/** 添加系统消息类型 */
 		async addMessageType(data: any) {
 			const result = await fetchAddMessageType(data);

src/views/message/message/index.vue

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns, editorTypeList } from '@/views/message/message/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/message/message/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import { $t } from '@/plugins/i18n';
+import { useMessageStore } from '@/store/message/message';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import { FormInstance } from 'element-plus';
+
+const tableRef = ref();
+const formRef = ref();
+const messageStore = useMessageStore();
+
+/** 当前页改变时 */
+const onCurrentPageChange = async (value: number) => {
+	messageStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	messageStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/**
+ * * 选择多行
+ * @param rows
+ */
+const onSelectionChange = (rows: Array<any>) => {
+	deleteIds.value = rows.map((row: any) => row.id);
+};
+
+/**
+ * 重置表单
+ * @param formEl
+ */
+const resetForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="messageStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<!-- 消息标题 -->
+			<el-form-item :label="$t('title')" prop="title">
+				<el-input v-model="messageStore.form.title" :placeholder="`${$t('input')}${$t('title')}`" class="!w-[180px]" clearable />
+			</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>
+
+			<!-- 消息类型 -->
+			<el-form-item :label="$t('messageType')" prop="messageType">
+				<el-input v-model="messageStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 消息内容 -->
+			<el-form-item :label="$t('content')" prop="content">
+				<el-input v-model="messageStore.form.content" :placeholder="`${$t('input')}${$t('content')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 编辑器类型 -->
+			<el-form-item :label="$t('editorType')" prop="editorType">
+				<el-select v-model="messageStore.form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" 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>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar :columns="columns" title="系统消息" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
+
+				<!-- 批量删除按钮 -->
+				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('delete_batches') }}
+				</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="messageStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="messageStore.loading"
+					:pagination="messageStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@selection-change="onSelectionChange"
+					@page-current-change="onCurrentPageChange"
+				>
+					<template #createUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+					</template>
+
+					<template #operation="{ row }">
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-popconfirm :title="`${$t('delete')}${row.title}?`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>

src/views/message/message/message-dialog.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { editorTypeList, rules } from '@/views/message/message/utils/columns';
+import { FormProps } from '@/views/message/message/utils/types';
+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';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 消息标题
+		title: undefined,
+		// 接收人用户ID
+		receivedUserId: undefined,
+		// 发送人用户ID
+		sendUserId: undefined,
+		// 发送人昵称
+		sendNickName: undefined,
+		// 消息类型
+		messageType: undefined,
+		// 消息内容
+		content: undefined,
+		// 编辑器类型
+		editorType: undefined,
+		// 0:未读 1:已读
+		status: undefined,
+	}),
+});
+// 用户是否停用样式
+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();
+});
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 消息标题 -->
+		<el-form-item :label="$t('title')" prop="title">
+			<el-input v-model="form.title" :placeholder="$t('input') + $t('title')" autocomplete="off" maxlength="100" type="text" />
+		</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>
+
+		<!-- 发送人用户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-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 :label="$t('messageType')" prop="messageType">
+			<el-select v-model="form.messageType" :placeholder="`${$t('select')}${$t('messageType')}`" clearable filterable>
+				<el-option v-for="(item, index) in messageTypeStore.allMessageTypeList" :key="index" :label="item.messageName" :navigationBar="false" :value="item.messageType" />
+			</el-select>
+		</el-form-item>
+
+		<!-- 编辑器类型 -->
+		<el-form-item :label="$t('editorType')" prop="editorType">
+			<el-select v-model="form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" clearable filterable>
+				<el-option v-for="(item, index) in editorTypeList" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
+			</el-select>
+		</el-form-item>
+
+		<!-- 消息内容 -->
+		<el-form-item :label="$t('content')" prop="content">
+			<el-input v-model="form.content" :placeholder="$t('input') + $t('content')" autocomplete="off" type="textarea" />
+		</el-form-item>
+
+		<!-- 0:未读 1:已读 -->
+		<el-form-item :label="$t('status')" prop="status">
+			<el-switch v-model="form.status" :active-text="$t('readAlready')" :active-value="true" :inactive-text="$t('unread')" :inactive-value="false" :style="switchStyle" inline-prompt />
+		</el-form-item>
+	</el-form>
+</template>

src/views/message/message/utils/columns.ts

@@ -0,0 +1,56 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+import type { FormRules } from 'element-plus';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	// 消息标题
+	{ label: $t('title'), prop: 'title' },
+	// 接收人用户ID
+	{
+		label: $t('receivedUserId'),
+		prop: 'receivedUserId',
+		formatter({ receivedUserId }) {
+			return !receivedUserId ? $t('all') : receivedUserId;
+		},
+	},
+	// 发送人用户ID
+	{ label: $t('sendUserId'), prop: 'sendUserId' },
+	// 发送人昵称
+	{ label: $t('sendNickName'), prop: 'sendNickName' },
+	// 消息类型
+	{ label: $t('messageType'), prop: 'messageType' },
+	// 消息内容
+	{ label: $t('content'), prop: 'content' },
+	// 编辑器类型
+	{ label: $t('editorType'), prop: 'editorType' },
+	// 0:未读 1:已读
+	{ label: $t('status'), prop: 'status' },
+	{ 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.operation'), fixed: 'right', width: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive<FormRules>({
+	// 消息标题
+	title: [{ required: true, message: `${$t('input')}${$t('title')}`, trigger: 'blur' }],
+	// 发送人用户ID
+	sendUserId: [{ required: true, message: `${$t('input')}${$t('sendUserId')}`, trigger: 'blur' }],
+	// 消息类型
+	messageType: [{ required: true, message: `${$t('input')}${$t('messageType')}`, trigger: 'blur' }],
+	// 消息内容
+	content: [{ required: true, message: `${$t('input')}${$t('content')}`, trigger: 'blur' }],
+	// 编辑器类型
+	editorType: [{ required: true, message: `${$t('input')}${$t('editorType')}`, trigger: 'blur' }],
+});
+
+/** 编辑器类型 */
+export const editorTypeList = [
+	{ label: $t('markdown'), value: 'markdown' },
+	{ label: $t('richText'), value: 'richText' },
+];

src/views/message/message/utils/hooks.ts

@@ -0,0 +1,141 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import MessageDialog from '@/views/message/message/message-dialog.vue';
+import { useMessageStore } from '@/store/message/message';
+import { h, ref } from 'vue';
+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';
+
+export const formRef = ref();
+// 删除ids
+export const deleteIds = ref([]);
+const messageStore = useMessageStore();
+
+/** 搜索初始化系统消息 */
+export async function onSearch() {
+	messageStore.loading = true;
+	await messageStore.getMessageList();
+	messageStore.loading = false;
+}
+
+/** 添加系统消息 */
+export function onAdd() {
+	addDialog({
+		title: `${$t('addNew')}${$t('message')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				title: undefined,
+				receivedUserId: undefined,
+				sendUserId: undefined,
+				sendNickName: undefined,
+				messageType: undefined,
+				content: undefined,
+				editorType: undefined,
+				status: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(MessageDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await messageStore.addMessage(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新系统消息
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('message')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				title: row.title,
+				receivedUserId: row.receivedUserId,
+				sendUserId: row.sendUserId,
+				sendNickName: row.sendNickName,
+				messageType: row.messageType,
+				content: row.content,
+				editorType: row.editorType,
+				status: row.status,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(MessageDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await messageStore.updateMessage({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 删除系统消息 */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirmDelete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await messageStore.deleteMessage([id]);
+	await onSearch();
+};
+
+/** 批量删除 */
+export const onDeleteBatch = async () => {
+	const ids = deleteIds.value;
+	const formDeletedBatchRef = ref();
+
+	addDialog({
+		title: $t('deleteBatchTip'),
+		width: '30%',
+		props: { formInline: { confirmText: '' } },
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
+		beforeSure: (done, { options }) => {
+			formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const text = options.props.formInline.confirmText.toLowerCase();
+				if (text === 'yes' || text === 'y') {
+					// 删除数据
+					await messageStore.deleteMessage(ids);
+					await onSearch();
+
+					done();
+				} else message($t('deleteBatchTip'), { type: 'warning' });
+			});
+		},
+	});
+};

src/views/message/message/utils/types.ts

@@ -0,0 +1,24 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 消息标题
+	title: string;
+	// 接收人用户ID
+	receivedUserId: number;
+	// 发送人用户ID
+	sendUserId: number;
+	// 发送人昵称
+	sendNickName: string;
+	// 消息类型
+	messageType: string;
+	// 消息内容
+	content: string;
+	// 编辑器类型
+	editorType: string;
+	// 0:未读 1:已读
+	status: boolean;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}