page: 📄 用户配置邮箱和用户配置模板

src/api/v1/emailTemplate.ts

@@ -0,0 +1,30 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/**
+ * 邮件模板表---获取邮件模板表列表
+ */
+export const fetchGetEmailTemplateList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `emailTemplate/getEmailTemplateList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/**
+ * 邮件模板表---添加邮件模板表
+ */
+export const fetchAddEmailTemplate = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'emailTemplate/addEmailTemplate', { data });
+};
+
+/**
+ * 邮件模板表---更新邮件模板表
+ */
+export const fetchUpdateEmailTemplate = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'emailTemplate/updateEmailTemplate', { data });
+};
+
+/**
+ * 邮件模板表---删除邮件模板表
+ */
+export const fetchDeleteEmailTemplate = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'emailTemplate/deleteEmailTemplate', { data });
+};

src/api/v1/emailUsers.ts

@@ -0,0 +1,30 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/**
+ * 邮箱用户发送配置管理---获取邮箱用户发送配置管理列表
+ */
+export const fetchGetEmailUsersList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `emailUsers/getEmailUsersList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/**
+ * 邮箱用户发送配置管理---添加邮箱用户发送配置管理
+ */
+export const fetchAddEmailUsers = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'emailUsers/addEmailUsers', { data });
+};
+
+/**
+ * 邮箱用户发送配置管理---更新邮箱用户发送配置管理
+ */
+export const fetchUpdateEmailUsers = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'emailUsers/updateEmailUsers', { data });
+};
+
+/**
+ * 邮箱用户发送配置管理---删除邮箱用户发送配置管理
+ */
+export const fetchDeleteEmailUsers = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'emailUsers/deleteEmailUsers', { data });
+};

src/components/AnimateSelector/index.ts

@@ -1,5 +1,5 @@
-import { withInstall } from "@pureadmin/utils";
+import { withInstall } from '@pureadmin/utils';
-import reAnimateSelector from "./src/index.vue";
+import reAnimateSelector from './src/index.vue';
 
 /** [animate.css](https://animate.style/) 选择器组件 */
 export const ReAnimateSelector = withInstall(reAnimateSelector);

src/components/Auth/index.ts

@@ -1,4 +1,4 @@
-import auth from "./src/auth";
+import auth from './src/auth';
 
 const Auth = auth;
 

src/components/BaseDialog/SimpleDialog.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
+import { $t } from '@/plugins/i18n';
 
 const props = defineProps({
 	// ? 是否显示
@@ -19,12 +20,12 @@ const props = defineProps({
 	// ? 返回文字
 	cancelText: {
 		type: String as PropType<string>,
-		default: '返回',
+		default: $t('login.pureBack'),
 	},
 	// ? 确认文字
 	confirmText: {
 		type: String as PropType<string>,
-		default: '确认',
+		default: $t('buttons.pureConfirm'),
 	},
 });
 const emits = defineEmits(['onCancel', 'onConfirm']);

src/components/BaseDialog/index.vue

@@ -85,7 +85,7 @@ function handleClose(options: DialogOptions, index: number, args = { command: 'c
 		v-for="(options, index) in dialogStore"
 		:key="index"
 		v-model="options.visible"
-		:fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
+		:fullscreen="fullscreen ? true : !!options?.fullscreen"
 		class="pure-dialog"
 		v-bind="options"
 		@closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"

src/components/CropperPreview/src/index.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import ReCropper from '@/components/ReCropper';
 import { formatBytes } from '@pureadmin/utils';
+import { $t } from '@/plugins/i18n';
 
 defineOptions({
 	name: 'ReCropperPreview',
@@ -38,14 +39,14 @@ defineExpose({ hidePopover });
 			<template #reference>
 				<div class="w-[18vw]">
 					<ReCropper ref="refCropper" :src="imgSrc" circled @cropper="onCropper" @readied="showPopover = true" />
-					<p v-show="showPopover" class="mt-1 text-center">温馨提示：右键上方裁剪区可开启功能菜单</p>
+					<p v-show="showPopover" class="mt-1 text-center">{{ $t('cropper_preview_tips') }}</p>
 				</div>
 			</template>
 			<div class="flex flex-wrap justify-center items-center text-center">
 				<el-image v-if="cropperImg" :preview-src-list="Array.of(cropperImg)" :src="cropperImg" fit="cover" />
 				<div v-if="infos" class="mt-1">
-					<p>图像大小：{{ parseInt(infos.width) }} × {{ parseInt(infos.height) }}像素</p>
+					<p>{{ $t('image_size') }}：{{ parseInt(infos.width) }} × {{ parseInt(infos.height) }}{{ $t('pixel') }}</p>
-					<p>文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）</p>
+					<p>{{ $t('file_size') }}：{{ formatBytes(infos.size) }}（{{ infos.size }} {{ $t('bytes') }}</p>
 				</div>
 			</div>
 		</el-popover>

src/components/MyCol/index.ts

@@ -1,29 +1,29 @@
-import { ElCol } from "element-plus";
+import { ElCol } from 'element-plus';
-import { h, defineComponent } from "vue";
+import { defineComponent, h } from 'vue';
 
 // 封装element-plus的el-col组件
 export default defineComponent({
-  name: "ReCol",
+	name: 'ReCol',
-  props: {
+	props: {
-    value: {
+		value: {
-      type: Number,
+			type: Number,
-      default: 24
+			default: 24,
-    }
+		},
-  },
+	},
-  render() {
+	render() {
-    const attrs = this.$attrs;
+		const attrs = this.$attrs;
-    const val = this.value;
+		const val = this.value;
-    return h(
+		return h(
-      ElCol,
+			ElCol,
-      {
+			{
-        xs: val,
+				xs: val,
-        sm: val,
+				sm: val,
-        md: val,
+				md: val,
-        lg: val,
+				lg: val,
-        xl: val,
+				xl: val,
-        ...attrs
+				...attrs,
-      },
+			},
-      { default: () => this.$slots.default() }
+			{ default: () => this.$slots.default() },
-    );
+		);
-  }
+	},
 });

src/components/Perms/index.ts

@@ -1,4 +1,4 @@
-import perms from "./src/perms";
+import perms from './src/perms';
 
 const Perms = perms;
 

src/components/Perms/src/perms.tsx

@@ -1,20 +1,18 @@
-import { defineComponent, Fragment } from "vue";
+import { defineComponent, Fragment } from 'vue';
-import { hasPerms } from "@/utils/auth";
+import { hasPerms } from '@/utils/auth';
 
 export default defineComponent({
-  name: "Perms",
+	name: 'Perms',
-  props: {
+	props: {
-    value: {
+		value: {
-      type: undefined,
+			type: undefined,
-      default: []
+			default: [],
-    }
+		},
-  },
+	},
-  setup(props, { slots }) {
+	setup(props, { slots }) {
-    return () => {
+		return () => {
-      if (!slots) return null;
+			if (!slots) return null;
-      return hasPerms(props.value) ? (
+			return hasPerms(props.value) ? <Fragment>{slots.default?.()}</Fragment> : null;
-        <Fragment>{slots.default?.()}</Fragment>
+		};
-      ) : null;
+	},
-    };
-  }
 });

src/components/error/403.vue

@@ -14,56 +14,11 @@ const router = useRouter();
 	<div class="flex justify-center items-center h-[640px]">
 		<noAccess />
 		<div class="ml-12">
-			<p
+			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 80 } }" :initial="{ opacity: 0, y: 100 }" class="font-medium text-4xl mb-4 dark:text-white">403</p>
-				v-motion
+			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 120 } }" :initial="{ opacity: 0, y: 100 }" class="mb-4 text-gray-500">
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 80,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				class="font-medium text-4xl mb-4 dark:text-white"
-			>
-				403
-			</p>
-			<p
-				v-motion
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 120,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				class="mb-4 text-gray-500"
-			>
 				{{ $t('sorry_no_access') }}
 			</p>
-			<el-button
+			<el-button v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 160 } }" :initial="{ opacity: 0, y: 100 }" type="primary" @click="router.push('/')">
-				v-motion
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 160,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				type="primary"
-				@click="router.push('/')"
-			>
 				{{ $t('return_to_homepage') }}
 			</el-button>
 		</div>

src/components/error/404.vue

@@ -14,49 +14,13 @@ const router = useRouter();
 	<div class="flex justify-center items-center h-[640px]">
 		<noExist />
 		<div class="ml-12">
-			<p
+			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 80 } }" :initial="{ opacity: 0, y: 100 }" class="font-medium text-4xl mb-4 dark:text-white">404</p>
-				v-motion
+			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 120 } }" :initial="{ opacity: 0, y: 100 }" class="mb-4 text-gray-500">
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 80,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				class="font-medium text-4xl mb-4 dark:text-white"
-			>
-				404
-			</p>
-			<p
-				v-motion
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 120,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				class="mb-4 text-gray-500"
-			>
 				{{ $t('sorry_page_not_found') }}
 			</p>
 			<el-button
 				v-motion
-				:enter="{
+				:enter="{ opacity: 1, y: 0, transition: { delay: 160 } }"
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 160,
-					},
-				}"
 				:initial="{
 					opacity: 0,
 					y: 100,

src/components/error/500.vue

@@ -14,56 +14,11 @@ const router = useRouter();
 	<div class="flex justify-center items-center h-[640px]">
 		<noServer />
 		<div class="ml-12">
-			<p
+			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 80 } }" :initial="{ opacity: 0, y: 100 }" class="font-medium text-4xl mb-4 dark:text-white">500</p>
-				v-motion
+			<p v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 120 } }" :initial="{ opacity: 0, y: 100 }" class="mb-4 text-gray-500">
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 80,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				class="font-medium text-4xl mb-4 dark:text-white"
-			>
-				500
-			</p>
-			<p
-				v-motion
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 120,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				class="mb-4 text-gray-500"
-			>
 				{{ $t('sorry_server_error') }}
 			</p>
-			<el-button
+			<el-button v-motion :enter="{ opacity: 1, y: 0, transition: { delay: 160 } }" :initial="{ opacity: 0, y: 100 }" type="primary" @click="router.push('/')">
-				v-motion
-				:enter="{
-					opacity: 1,
-					y: 0,
-					transition: {
-						delay: 160,
-					},
-				}"
-				:initial="{
-					opacity: 0,
-					y: 100,
-				}"
-				type="primary"
-				@click="router.push('/')"
-			>
 				{{ $t('return_to_homepage') }}
 			</el-button>
 		</div>

src/store/system/emailTemplate.ts

@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia';
+import { fetchAddEmailTemplate, fetchDeleteEmailTemplate, fetchGetEmailTemplateList, fetchUpdateEmailTemplate } from '@/api/v1/emailTemplate';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 邮件模板表 Store
+ */
+export const useEmailTemplateStore = defineStore('emailTemplateStore', {
+	state() {
+		return {
+			// 邮件模板表列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 模板名称
+				templateName: undefined,
+				// 主题
+				subject: undefined,
+				// 邮件内容
+				body: undefined,
+				// 邮件类型
+				type: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 150,
+				total: 100,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/**
+		 * * 获取邮件模板表
+		 */
+		async getEmailTemplateList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取邮件模板表列表
+			const result = await fetchGetEmailTemplateList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/**
+		 * * 添加邮件模板表
+		 */
+		async addEmailTemplate(data: any) {
+			const result = await fetchAddEmailTemplate(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 修改邮件模板表
+		 */
+		async updateEmailTemplate(data: any) {
+			const result = await fetchUpdateEmailTemplate(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 删除邮件模板表
+		 */
+		async deleteEmailTemplate(data: any) {
+			const result = await fetchDeleteEmailTemplate(data);
+			return storeMessage(result);
+		},
+	},
+});

src/store/system/emailUsers.ts

@@ -0,0 +1,83 @@
+import { defineStore } from 'pinia';
+import { fetchAddEmailUsers, fetchDeleteEmailUsers, fetchGetEmailUsersList, fetchUpdateEmailUsers } from '@/api/v1/emailUsers';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 邮箱用户发送配置 Store
+ */
+export const useEmailUsersStore = defineStore('emailUsersStore', {
+	state() {
+		return {
+			// 邮箱用户发送配置列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 邮箱
+				email: undefined,
+				// 使用邮件模板
+				emailTemplate: undefined,
+				// Host地址
+				host: undefined,
+				// 端口号
+				port: undefined,
+				// 邮箱协议
+				smtpAgreement: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 150,
+				total: 100,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/**
+		 * * 获取邮箱用户发送配置
+		 */
+		async getEmailUsersList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取邮箱用户发送配置列表
+			const result = await fetchGetEmailUsersList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/**
+		 * * 添加邮箱用户发送配置
+		 */
+		async addEmailUsers(data: any) {
+			const result = await fetchAddEmailUsers(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 修改邮箱用户发送配置
+		 */
+		async updateEmailUsers(data: any) {
+			const result = await fetchUpdateEmailUsers(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 删除邮箱用户发送配置
+		 */
+		async deleteEmailUsers(data: any) {
+			const result = await fetchDeleteEmailUsers(data);
+			return storeMessage(result);
+		},
+	},
+});

src/views/system/emailTemplate/email-template-dialog.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/system/emailTemplate/utils/columns';
+import { FormProps } from '@/views/system/emailTemplate/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 模板名称
+		templateName: undefined,
+		// 主题
+		subject: undefined,
+		// 邮件内容
+		body: undefined,
+		// 邮件类型
+		type: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<el-form-item :label="$t('emailTemplate_templateName')" prop="templateName">
+			<el-input v-model="form.templateName" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailTemplate_subject')" prop="subject">
+			<el-input v-model="form.subject" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailTemplate_body')" prop="body">
+			<el-input v-model="form.body" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailTemplate_type')" prop="type">
+			<el-input v-model="form.type" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>

src/views/system/emailTemplate/index.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/system/emailTemplate/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/emailTemplate/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 { useEmailTemplateStore } from '@/store/system/emailTemplate.ts';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+
+const tableRef = ref();
+const formRef = ref();
+const emailTemplateStore = useEmailTemplateStore();
+
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	emailTemplateStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	emailTemplateStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/**
+ * 重置表单
+ * @param formEl
+ */
+const resetForm = async formEl => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="emailTemplateStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<el-form-item :label="$t('emailTemplate_templateName')" prop="templateName">
+				<el-input v-model="emailTemplateStore.form.templateName" :placeholder="`${$t('input')}${$t('emailTemplate_templateName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('emailTemplate_subject')" prop="subject">
+				<el-input v-model="emailTemplateStore.form.subject" :placeholder="`${$t('input')}${$t('emailTemplate_subject')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('emailTemplate_body')" prop="body">
+				<el-input v-model="emailTemplateStore.form.body" :placeholder="`${$t('input')}${$t('emailTemplate_body')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('emailTemplate_type')" prop="type">
+				<el-input v-model="emailTemplateStore.form.type" :placeholder="`${$t('input')}${$t('emailTemplate_type')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="emailTemplateStore.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('add_new') }}</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="emailTemplateStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="emailTemplateStore.loading"
+					:pagination="emailTemplateStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@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-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
+						<!-- TODO 待完成 -->
+						<el-popconfirm :title="`是否确认删除 ${row.typeName}数据`" @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/system/emailTemplate/utils/columns.ts

@@ -0,0 +1,33 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	// 模板名称
+	{ label: $t('emailTemplate_templateName'), prop: 'templateName' },
+	// 主题
+	{ label: $t('emailTemplate_subject'), prop: 'subject' },
+	// 邮件内容
+	{ label: $t('emailTemplate_body'), prop: 'body' },
+	// 邮件类型
+	{ label: $t('emailTemplate_type'), prop: 'type' },
+	{ 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({
+	// 模板名称
+	templateName: [{ required: true, message: `${$t('input')}${$t('emailTemplate_templateName')}`, trigger: 'blur' }],
+	// 主题
+	subject: [{ required: true, message: `${$t('input')}${$t('emailTemplate_subject')}`, trigger: 'blur' }],
+	// 邮件内容
+	body: [{ required: true, message: `${$t('input')}${$t('emailTemplate_body')}`, trigger: 'blur' }],
+	// 邮件类型
+	type: [{ required: true, message: `${$t('input')}${$t('emailTemplate_type')}`, trigger: 'blur' }],
+});

src/views/system/emailTemplate/utils/hooks.ts

@@ -0,0 +1,106 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import EmailTemplateDialog from '@/views/system/emailTemplate/email-template-dialog.vue';
+import { useEmailTemplateStore } from '@/store/system/emailTemplate.ts';
+import { h, ref } from 'vue';
+import { messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/system/emailTemplate/utils/types';
+import { $t } from '@/plugins/i18n';
+
+export const formRef = ref();
+const emailTemplateStore = useEmailTemplateStore();
+
+/**
+ * * 搜索初始化邮件模板表
+ */
+export async function onSearch() {
+	emailTemplateStore.loading = true;
+	await emailTemplateStore.getEmailTemplateList();
+	emailTemplateStore.loading = false;
+}
+
+/**
+ * * 添加邮件模板表
+ */
+export function onAdd() {
+	addDialog({
+		title: `${$t('add_new')}${$t('emailTemplate')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				templateName: undefined,
+				subject: undefined,
+				body: undefined,
+				type: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(EmailTemplateDialog, { 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 emailTemplateStore.addEmailTemplate(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新邮件模板表
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('emailTemplate')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				templateName: row.templateName,
+				subject: row.subject,
+				body: row.body,
+				type: row.type,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(EmailTemplateDialog, { 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 emailTemplateStore.updateEmailTemplate({ ...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('confirm_delete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await emailTemplateStore.deleteEmailTemplate([id]);
+	await onSearch();
+};

src/views/system/emailTemplate/utils/types.ts

@@ -0,0 +1,16 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 模板名称
+	templateName: string;
+	// 主题
+	subject: string;
+	// 邮件内容
+	body: string;
+	// 邮件类型
+	type: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}

src/views/system/emailUsers/email-users-dialog.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/system/emailUsers/utils/columns';
+import { FormProps } from '@/views/system/emailUsers/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 邮箱
+		email: undefined,
+		// 邮件模板
+		emailTemplate: undefined,
+		// 密码
+		password: undefined,
+		// Host地址
+		host: undefined,
+		// 端口号
+		port: undefined,
+		// 邮箱协议
+		smtpAgreement: undefined,
+		// 是否为默认邮件
+		isDefault: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<el-form-item :label="$t('emailUsers_email')" prop="email">
+			<el-input v-model="form.email" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailUsers_emailTemplate')" prop="emailTemplate">
+			<el-input v-model="form.emailTemplate" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailUsers_password')" prop="password">
+			<el-input v-model="form.password" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailUsers_host')" prop="host">
+			<el-input v-model="form.host" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailUsers_port')" prop="port">
+			<el-input v-model="form.port" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailUsers_smtpAgreement')" prop="smtpAgreement">
+			<el-input v-model="form.smtpAgreement" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('emailUsers_isDefault')" prop="isDefault">
+			<el-input v-model="form.isDefault" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>

src/views/system/emailUsers/index.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/system/emailUsers/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/emailUsers/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 { useEmailUsersStore } from '@/store/system/emailUsers.ts';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+
+const tableRef = ref();
+const formRef = ref();
+const emailUsersStore = useEmailUsersStore();
+
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	emailUsersStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	emailUsersStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/**
+ * 重置表单
+ * @param formEl
+ */
+const resetForm = async formEl => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="emailUsersStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<el-form-item :label="$t('emailUsers_email')" prop="email">
+				<el-input v-model="emailUsersStore.form.email" :placeholder="`${$t('input')}${$t('emailUsers_email')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('emailUsers_emailTemplate')" prop="emailTemplate">
+				<el-input v-model="emailUsersStore.form.emailTemplate" :placeholder="`${$t('input')}${$t('emailUsers_emailTemplate')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('emailUsers_host')" prop="host">
+				<el-input v-model="emailUsersStore.form.host" :placeholder="`${$t('input')}${$t('emailUsers_host')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('emailUsers_port')" prop="port">
+				<el-input v-model="emailUsersStore.form.port" :placeholder="`${$t('input')}${$t('emailUsers_port')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('emailUsers_smtpAgreement')" prop="smtpAgreement">
+				<el-input v-model="emailUsersStore.form.smtpAgreement" :placeholder="`${$t('input')}${$t('emailUsers_smtpAgreement')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="emailUsersStore.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('add_new') }}</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="emailUsersStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="emailUsersStore.loading"
+					:pagination="emailUsersStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@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-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
+						<!-- TODO 待完成 -->
+						<el-popconfirm :title="`是否确认删除 ${row.typeName}数据`" @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/system/emailUsers/utils/columns.ts

@@ -0,0 +1,46 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	{ label: $t('id'), prop: 'id' },
+	// 邮箱
+	{ label: $t('emailUsers_email'), prop: 'email' },
+	// 邮件模板
+	{ label: $t('emailUsers_emailTemplate'), prop: 'emailTemplate' },
+	// 密码
+	{ label: $t('emailUsers_password'), prop: 'password' },
+	// Host地址
+	{ label: $t('emailUsers_host'), prop: 'host' },
+	// 端口号
+	{ label: $t('emailUsers_port'), prop: 'port' },
+	// 邮箱协议
+	{ label: $t('emailUsers_smtpAgreement'), prop: 'smtpAgreement' },
+	// 是否为默认邮件
+	{ label: $t('emailUsers_isDefault'), prop: 'isDefault' },
+	{ 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({
+	// 邮箱
+	email: [{ required: true, message: `${$t('input')}${$t('emailUsers_email')}`, trigger: 'blur' }],
+	// 邮件模板
+	emailTemplate: [{ required: true, message: `${$t('input')}${$t('emailUsers_emailTemplate')}`, trigger: 'blur' }],
+	// 密码
+	password: [{ required: true, message: `${$t('input')}${$t('emailUsers_password')}`, trigger: 'blur' }],
+	// Host地址
+	host: [{ required: true, message: `${$t('input')}${$t('emailUsers_host')}`, trigger: 'blur' }],
+	// 端口号
+	port: [{ required: true, message: `${$t('input')}${$t('emailUsers_port')}`, trigger: 'blur' }],
+	// 邮箱协议
+	smtpAgreement: [{ required: true, message: `${$t('input')}${$t('emailUsers_smtpAgreement')}`, trigger: 'blur' }],
+	// 是否为默认邮件
+	isDefault: [{ required: true, message: `${$t('input')}${$t('emailUsers_isDefault')}`, trigger: 'blur' }],
+});

src/views/system/emailUsers/utils/hooks.ts

@@ -0,0 +1,112 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import EmailUsersDialog from '@/views/system/emailUsers/email-users-dialog.vue';
+import { useEmailUsersStore } from '@/store/system/emailUsers.ts';
+import { h, ref } from 'vue';
+import { messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/system/emailUsers/utils/types';
+import { $t } from '@/plugins/i18n';
+
+export const formRef = ref();
+const emailUsersStore = useEmailUsersStore();
+
+/**
+ * * 搜索初始化邮箱用户发送配置
+ */
+export async function onSearch() {
+	emailUsersStore.loading = true;
+	await emailUsersStore.getEmailUsersList();
+	emailUsersStore.loading = false;
+}
+
+/**
+ * * 添加邮箱用户发送配置
+ */
+export function onAdd() {
+	addDialog({
+		title: `${$t('add_new')}${$t('emailUsers')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				email: undefined,
+				emailTemplate: undefined,
+				password: undefined,
+				host: undefined,
+				port: undefined,
+				smtpAgreement: undefined,
+				isDefault: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(EmailUsersDialog, { 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 emailUsersStore.addEmailUsers(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新邮箱用户发送配置
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('emailUsers')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				email: row.email,
+				emailTemplate: row.emailTemplate,
+				password: row.password,
+				host: row.host,
+				port: row.port,
+				smtpAgreement: row.smtpAgreement,
+				isDefault: row.isDefault,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(EmailUsersDialog, { 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 emailUsersStore.updateEmailUsers({ ...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('confirm_delete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await emailUsersStore.deleteEmailUsers([id]);
+	await onSearch();
+};

src/views/system/emailUsers/utils/types.ts

@@ -0,0 +1,22 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 邮箱
+	email: string;
+	// 邮件模板
+	emailTemplate: number;
+	// 密码
+	password: string;
+	// Host地址
+	host: string;
+	// 端口号
+	port: number;
+	// 邮箱协议
+	smtpAgreement: string;
+	// 是否为默认邮件
+	isDefault: boolean;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}