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

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

This commit is contained in:
bunny 2024-10-10 16:55:47 +08:00
parent 89ff11e1b7
commit ccf028fcd0
25 changed files with 966 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/v1/emailTemplate.ts Normal file
View File

@ -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 });
};

30
src/api/v1/emailUsers.ts Normal file
View File

@ -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 });
};

4
src/components/AnimateSelector/index.ts
View File

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

2
src/components/Auth/index.ts
View File

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

5
src/components/BaseDialog/SimpleDialog.vue
View File

@ -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']);

2
src/components/BaseDialog/index.vue
View File

@ -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)"

7
src/components/CropperPreview/src/index.vue
View File

@ -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>文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）</p>
<p>{{ $t('image_size') }}：{{ parseInt(infos.width) }} × {{ parseInt(infos.height) }}{{ $t('pixel') }}</p>
<p>{{ $t('file_size') }}：{{ formatBytes(infos.size) }}（{{ infos.size }} {{ $t('bytes') }}</p>
</div>
</div>
</el-popover>

16
src/components/MyCol/index.ts
View File

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

2
src/components/Perms/index.ts
View File

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

16
src/components/Perms/src/perms.tsx
View File

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

51
src/components/error/403.vue
View File

@ -14,56 +14,11 @@ const router = useRouter();
<div class="flex justify-center items-center h-[640px]">
<noAccess />
<div class="ml-12">
<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>
<p
v-motion
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 120,
},
}"
:initial="{
opacity: 0,
y: 100,
}"
class="mb-4 text-gray-500"
>
<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>
<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
v-motion
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 160,
},
}"
:initial="{
opacity: 0,
y: 100,
}"
type="primary"
@click="router.push('/')"
>
<el-button 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>

42
src/components/error/404.vue
View File

@ -14,49 +14,13 @@ const router = useRouter();
<div class="flex justify-center items-center h-[640px]">
<noExist />
<div class="ml-12">
<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>
<p
v-motion
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 120,
},
}"
:initial="{
opacity: 0,
y: 100,
}"
class="mb-4 text-gray-500"
>
<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>
<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="{
opacity: 1,
y: 0,
transition: {
delay: 160,
},
}"
:enter="{ opacity: 1, y: 0, transition: { delay: 160 } }"
:initial="{
opacity: 0,
y: 100,

51
src/components/error/500.vue
View File

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

81
src/store/system/emailTemplate.ts Normal file
View File

@ -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);
},
},
});

83
src/store/system/emailUsers.ts Normal file
View File

@ -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);
},
},
});

42
src/views/system/emailTemplate/email-template-dialog.vue Normal file
View File

@ -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>

122
src/views/system/emailTemplate/index.vue Normal file
View File

@ -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>

33
src/views/system/emailTemplate/utils/columns.ts Normal file
View File

@ -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' }],
});

106
src/views/system/emailTemplate/utils/hooks.ts Normal file
View File

@ -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();
};

16
src/views/system/emailTemplate/utils/types.ts Normal file
View File

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

57
src/views/system/emailUsers/email-users-dialog.vue Normal file
View File

@ -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>

125
src/views/system/emailUsers/index.vue Normal file
View File

@ -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>

46
src/views/system/emailUsers/utils/columns.ts Normal file
View File

@ -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' }],
});

112
src/views/system/emailUsers/utils/hooks.ts Normal file
View File

@ -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();
};

22
src/views/system/emailUsers/utils/types.ts Normal file
View File

@ -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;
}