feat(oa): 添加知识管理和邮件功能模块
- 新增知识分类和知识文章的完整CRUD接口- 实现知识文章预览组件，支持富文本和附件展示 - 添加动态邮件配置功能，支持多种邮箱类型自动识别 - 实现邮件模板管理功能，提供多种商务邮件模板- 添加邮件发送功能，支持批量发送和附件上传 - 完善邮件工具类，支持富文本、附件和内嵌图片发送- 新增发件人邮箱账号管理功能 - 添加家具信息管理相关接口- 配置默认邮件服务参数
This commit is contained in:
@@ -37,6 +37,7 @@
|
||||
"vue": "3.5.16",
|
||||
"vue-cropper": "1.1.1",
|
||||
"vue-router": "4.5.1",
|
||||
"vue3-treeselect": "^0.1.10",
|
||||
"vuedraggable": "4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
44
gear-ui3/src/api/oa/article.js
Normal file
44
gear-ui3/src/api/oa/article.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询知识管理列表
|
||||
export function listArticle(query) {
|
||||
return request({
|
||||
url: '/oa/article/listArticle',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询知识管理详细
|
||||
export function getArticle(articleId) {
|
||||
return request({
|
||||
url: '/oa/article/' + articleId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增知识管理
|
||||
export function addArticle(data) {
|
||||
return request({
|
||||
url: '/oa/article',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改知识管理
|
||||
export function updateArticle(data) {
|
||||
return request({
|
||||
url: '/oa/article',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除知识管理
|
||||
export function delArticle(articleId) {
|
||||
return request({
|
||||
url: '/oa/article/' + articleId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
gear-ui3/src/api/oa/category.js
Normal file
44
gear-ui3/src/api/oa/category.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询知识分类列表
|
||||
export function listCategory(query) {
|
||||
return request({
|
||||
url: '/oa/category/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询知识分类详细
|
||||
export function getCategory(categoryId) {
|
||||
return request({
|
||||
url: '/oa/category/' + categoryId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增知识分类
|
||||
export function addCategory(data) {
|
||||
return request({
|
||||
url: '/oa/category',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改知识分类
|
||||
export function updateCategory(data) {
|
||||
return request({
|
||||
url: '/oa/category',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除知识分类
|
||||
export function delCategory(categoryId) {
|
||||
return request({
|
||||
url: '/oa/category/' + categoryId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
gear-ui3/src/api/oa/contact.js
Normal file
44
gear-ui3/src/api/oa/contact.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询家具列表
|
||||
export function listFurnitureTable(query) {
|
||||
return request({
|
||||
url: '/oa/furnitureTable/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询家具详细
|
||||
export function getFurnitureTable(furnitureId) {
|
||||
return request({
|
||||
url: '/oa/furnitureTable/' + furnitureId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增家具
|
||||
export function addFurnitureTable(data) {
|
||||
return request({
|
||||
url: '/oa/furnitureTable',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改家具
|
||||
export function updateFurnitureTable(data) {
|
||||
return request({
|
||||
url: '/oa/furnitureTable',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除家具
|
||||
export function delFurnitureTable(furnitureId) {
|
||||
return request({
|
||||
url: '/oa/furnitureTable/' + furnitureId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
53
gear-ui3/src/api/oa/emailAccount.js
Normal file
53
gear-ui3/src/api/oa/emailAccount.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询发件人邮箱账号管理列表
|
||||
export function listEmailAccount(query) {
|
||||
return request({
|
||||
url: '/oa/emailAccount/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询发件人邮箱账号管理详细
|
||||
export function getEmailAccount(emailId) {
|
||||
return request({
|
||||
url: '/oa/emailAccount/' + emailId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增发件人邮箱账号管理
|
||||
export function addEmailAccount(data) {
|
||||
return request({
|
||||
url: '/oa/emailAccount',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改发件人邮箱账号管理
|
||||
export function updateEmailAccount(data) {
|
||||
return request({
|
||||
url: '/oa/emailAccount',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除发件人邮箱账号管理
|
||||
export function delEmailAccount(emailId) {
|
||||
return request({
|
||||
url: '/oa/emailAccount/' + emailId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 发送邮件（单条和批量共用）
|
||||
export function sendEmail(data) {
|
||||
return request({
|
||||
url: '/oa/emailAccount/sendBatchEmail',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
44
gear-ui3/src/api/oa/emailTemplate.js
Normal file
44
gear-ui3/src/api/oa/emailTemplate.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询邮件模板列表
|
||||
export function listEmailTemplate(query) {
|
||||
return request({
|
||||
url: '/oa/emailTemplate/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询邮件模板详细
|
||||
export function getEmailTemplate(id) {
|
||||
return request({
|
||||
url: '/oa/emailTemplate/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增邮件模板
|
||||
export function addEmailTemplate(data) {
|
||||
return request({
|
||||
url: '/oa/emailTemplate',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改邮件模板
|
||||
export function updateEmailTemplate(data) {
|
||||
return request({
|
||||
url: '/oa/emailTemplate',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除邮件模板
|
||||
export function delEmailTemplate(id) {
|
||||
return request({
|
||||
url: '/oa/emailTemplate/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
347
gear-ui3/src/views/sale/article/components/ArticlePreview.vue
Normal file
347
gear-ui3/src/views/sale/article/components/ArticlePreview.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="article-preview">
|
||||
<!-- 文章标题区 -->
|
||||
<div class="article-header">
|
||||
<div class="title-area">
|
||||
<h1 class="article-title">{{ article.articleTitle }}</h1>
|
||||
<div class="meta-info">
|
||||
<span class="category">
|
||||
<i class="el-icon-folder"></i>
|
||||
{{ article.category.categoryName || '未分类' }}
|
||||
</span>
|
||||
<span class="create-time">
|
||||
<i class="el-icon-time"></i>
|
||||
{{ parseTime(article.createTime) }}
|
||||
</span>
|
||||
<span class="source" v-if="article.source">
|
||||
<i class="el-icon-link"></i>
|
||||
{{ article.source }}
|
||||
</span>
|
||||
<span class="views">
|
||||
<i class="el-icon-view"></i>
|
||||
浏览 {{ article.checkNum }} 次
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtitle-area" v-if="article.subhead">
|
||||
<div class="subtitle">{{ article.subhead }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文章摘要 -->
|
||||
<div class="article-summary" v-if="article.remark">
|
||||
<p>{{ article.remark }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 文章正文 -->
|
||||
<div class="article-content">
|
||||
<div v-html="article.content" class="rich-content"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文章附件 -->
|
||||
<div class="article-attachments" v-if="article.accessory">
|
||||
<div class="attachments-header">附件下载</div>
|
||||
<div class="attachment-item">
|
||||
<i class="el-icon-paperclip"></i>
|
||||
<span>{{ getAttachmentName(article.accessory) }}</span>
|
||||
<a :href="article.accessory" target="_blank" class="download-btn">
|
||||
下载 <i class="el-icon-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ArticlePreview',
|
||||
props: {
|
||||
article: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
articleTitle: '',
|
||||
subhead: '',
|
||||
remark: '',
|
||||
content: '',
|
||||
accessory: '',
|
||||
category: {},
|
||||
source: '',
|
||||
checkNum: 0,
|
||||
createTime: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAttachmentName(url) {
|
||||
if (!url) return '未命名文件';
|
||||
// 提取URL最后的文件名部分
|
||||
const segments = url.split('/');
|
||||
return segments.pop() || '未命名文件';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-preview {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
.article-header {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.title-area {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.article-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
margin: 0 0 15px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
|
||||
.meta-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
gap: 20px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
color: #409EFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.views {
|
||||
color: #67C23A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle-area {
|
||||
background: #f5f7fa;
|
||||
border-left: 4px solid #409EFF;
|
||||
padding: 12px 20px;
|
||||
border-radius: 4px;
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-summary {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.rich-content {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #303133;
|
||||
|
||||
:deep(*) {
|
||||
p {
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
h2, h3, h4 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.8em;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: #f9f9f9;
|
||||
border-left: 4px solid #ddd;
|
||||
margin: 1.5em 0;
|
||||
padding: 0.5em 15px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 1.2em auto;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5em 0;
|
||||
|
||||
th {
|
||||
background: #f5f7fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #dfe6ec;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409EFF;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f9f2f4;
|
||||
color: #c7254e;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
margin: 1.5em 0;
|
||||
|
||||
code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 1.2em;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-attachments {
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 6px;
|
||||
padding: 15px 20px;
|
||||
margin-top: 30px;
|
||||
|
||||
.attachments-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px dashed #dcdfe6;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
|
||||
i {
|
||||
color: #909399;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
color: #606266;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
padding: 5px 12px;
|
||||
background-color: #ecf5ff;
|
||||
color: #409EFF;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 20px 15px;
|
||||
|
||||
.article-header .title-area .article-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.article-header .meta-info {
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.article-summary p,
|
||||
.article-content .rich-content {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
519
gear-ui3/src/views/sale/article/index.vue
Normal file
519
gear-ui3/src/views/sale/article/index.vue
Normal file
@@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['oa:article:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['oa:article:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['oa:article:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['oa:article:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<div class="card-container" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
v-for="(item, index) in articleList"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
:xl="4"
|
||||
class="mb20"
|
||||
>
|
||||
<el-card
|
||||
class="article-card"
|
||||
:body-style="{ padding: '16px', height: '100%', display: 'flex', flexDirection: 'column' }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-title">{{ item.articleTitle }}</span>
|
||||
<el-tag type="info" size="mini" class="category-tag">
|
||||
{{ item.category.categoryName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="card-subtitle">{{ item.subhead }}</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-stat">
|
||||
<i class="el-icon-view"></i>
|
||||
<span>浏览 {{ item.checkNum }} 次</span>
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
<div><i class="el-icon-user"></i> {{ item.createBy }}</div>
|
||||
<div><i class="el-icon-time"></i> {{ parseTime(item.createTime, '{y}-{m}-{d}') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handlePreview(item)"
|
||||
>预览</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>编辑</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改知识管理对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="60%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-form-item label="文章标题" prop="articleTitle">
|
||||
<el-input v-model="form.articleTitle" placeholder="请输入文章标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item label="文章分类" prop="categoryId">
|
||||
<el-input v-model="form.categoryId" placeholder="请输入文章分类" />
|
||||
</el-form-item>
|
||||
</el-col>-->
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form-item label="文章分类" prop="categoryId">
|
||||
<!-- <el-input v-model="form.categoryId" placeholder="请输入文章分类" />-->
|
||||
<treeselect v-model="form.categoryId" :options="categoryList" :normalizer="normalizer" placeholder="选择分类" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="16">
|
||||
<el-form-item label="副标题" prop="subhead">
|
||||
<el-input v-model="form.subhead" placeholder="请输入副标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="来源" prop="source">
|
||||
<el-input v-model="form.source" placeholder="请输入来源" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="描述" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="内容">
|
||||
<editor v-model="form.content" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="附件" prop="accessory">
|
||||
<file-upload v-model="form.accessory"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看公告对话框 -->
|
||||
<el-dialog :title="title" v-model="openPreview" v-if="openPreview" width="65%" @close="closeDialog" append-to-body>
|
||||
<ArticlePreview :article="form"/>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addArticle, delArticle, getArticle, listArticle, updateArticle } from "@/api/oa/article";
|
||||
import { listCategory } from "@/api/oa/category";
|
||||
import Treeselect from 'vue3-treeselect'
|
||||
import 'vue3-treeselect/dist/vue3-treeselect.css'
|
||||
import ArticlePreview from "./components/ArticlePreview.vue";
|
||||
|
||||
export default {
|
||||
name: "Article",
|
||||
components: { Treeselect, ArticlePreview },
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 知识管理表格数据
|
||||
articleList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
categoryId: undefined,
|
||||
articleTitle: undefined,
|
||||
},
|
||||
categoryList: [],
|
||||
//查看弹出层
|
||||
openPreview: false,
|
||||
categoryName: '',
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
articleId: [
|
||||
{ required: true, message: "文章id不能为空", trigger: "blur" }
|
||||
],
|
||||
categoryId: [
|
||||
{ required: true, message: "文章分类不能为空", trigger: "blur" }
|
||||
],
|
||||
articleTitle: [
|
||||
{ required: true, message: "文章标题不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询知识管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listArticle(this.queryParams).then(response => {
|
||||
this.articleList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
articleId: undefined,
|
||||
categoryId: undefined,
|
||||
articleTitle: undefined,
|
||||
subhead: undefined,
|
||||
source: undefined,
|
||||
content: undefined,
|
||||
checkNum: undefined,
|
||||
accessory: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.articleId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加知识管理";
|
||||
listCategory().then(response => {
|
||||
this.categoryList = this.handleTree(response.data, "categoryId", "parentId");
|
||||
})
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const articleId = row.articleId || this.ids
|
||||
listCategory().then(response => {
|
||||
this.categoryList = this.handleTree(response.data, "categoryId", "parentId");
|
||||
})
|
||||
getArticle(articleId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改知识管理";
|
||||
});
|
||||
},
|
||||
|
||||
/** 查看按钮操作 */
|
||||
handlePreview(row){
|
||||
this.reset();
|
||||
this.openPreview = true;
|
||||
this.categoryName= row.category.categoryName;
|
||||
|
||||
const articleId = row.articleId || this.ids
|
||||
listCategory().then(response => {
|
||||
this.categoryList = this.handleTree(response.data, "categoryId", "parentId");
|
||||
})
|
||||
getArticle(articleId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.title = "文章预览";
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
//删除project关联表属性
|
||||
delete this.form.category;
|
||||
if (this.form.articleId != null) {
|
||||
updateArticle(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addArticle(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**关闭预览弹出层**/
|
||||
closeDialog(){
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 转换部门数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.categoryId,
|
||||
label: node.categoryName,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const articleIds = row.articleId || this.ids;
|
||||
this.$modal.confirm('是否确认删除知识管理编号为"' + articleIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delArticle(articleIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/article/export', {
|
||||
...this.queryParams
|
||||
}, `article_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
.card-container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
height: 100%;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ebeef5;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
margin-left: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.card-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 1px solid #f0f2f5;
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
|
||||
.el-button-group {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.article-card {
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
|
||||
.category-tag {
|
||||
align-self: flex-start;
|
||||
margin-top: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1139
gear-ui3/src/views/sale/contact/index.vue
Normal file
1139
gear-ui3/src/views/sale/contact/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
32
gear-ui3/src/views/sale/contact/templates/business.js
Normal file
32
gear-ui3/src/views/sale/contact/templates/business.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 商务邮件模板
|
||||
* 适用于商务合作、客户沟通等场景
|
||||
*/
|
||||
export const businessTemplate = {
|
||||
name: "商务模板",
|
||||
description: "专业的商务合作邮件模板，适合客户沟通和商务洽谈",
|
||||
category: "business",
|
||||
html: `
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; text-align: center;">
|
||||
<h1 style="color: white; margin: 0; font-size: 28px; font-weight: 300; font-family: Arial, sans-serif;">商务合作</h1>
|
||||
<p style="color: rgba(255,255,255,0.8); margin: 10px 0 0 0; font-size: 16px; font-family: Arial, sans-serif;">Professional Business Communication</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 40px 30px; background-color: #ffffff;">
|
||||
<div style="margin-bottom: 30px;">
|
||||
<h2 style="color: #333; font-size: 24px; margin-bottom: 20px; border-bottom: 2px solid #667eea; padding-bottom: 10px; font-family: Arial, sans-serif;">
|
||||
尊敬的客户
|
||||
</h2>
|
||||
<div style="line-height: 1.8; color: #555; font-size: 16px; font-family: Arial, sans-serif;">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`
|
||||
};
|
||||
|
||||
export default businessTemplate;
|
||||
32
gear-ui3/src/views/sale/contact/templates/index.js
Normal file
32
gear-ui3/src/views/sale/contact/templates/index.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 邮件模板索引文件
|
||||
* 统一管理所有邮件模板
|
||||
*/
|
||||
import { businessTemplate } from './business.js';
|
||||
import { marketingTemplate } from './marketing.js';
|
||||
import { notificationTemplate } from './notification.js';
|
||||
import { productTemplate } from './product.js';
|
||||
|
||||
// 所有模板集合
|
||||
export const emailTemplates = {
|
||||
business: businessTemplate,
|
||||
product: productTemplate,
|
||||
marketing: marketingTemplate,
|
||||
notification: notificationTemplate
|
||||
};
|
||||
|
||||
// 根据模板键获取模板
|
||||
export function getTemplate(templateKey) {
|
||||
return emailTemplates[templateKey] || null;
|
||||
}
|
||||
|
||||
// 获取所有模板
|
||||
export function getAllTemplates() {
|
||||
return emailTemplates;
|
||||
}
|
||||
|
||||
export default {
|
||||
emailTemplates,
|
||||
getTemplate,
|
||||
getAllTemplates
|
||||
};
|
||||
103
gear-ui3/src/views/sale/contact/templates/marketing.js
Normal file
103
gear-ui3/src/views/sale/contact/templates/marketing.js
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* 营销邮件模板
|
||||
* 适用于产品推广、活动宣传等营销场景
|
||||
*/
|
||||
export const marketingTemplate = {
|
||||
name: "营销推广模板",
|
||||
description: "专业的营销推广邮件模板，适合产品推广和活动宣传",
|
||||
category: "marketing",
|
||||
html: `
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<!-- 头部横幅 -->
|
||||
<tr>
|
||||
<td style="background: linear-gradient(45deg, #ff6b6b, #ffa726); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: white; margin: 0; font-size: 32px; font-weight: 600; font-family: Arial, sans-serif;">限时优惠</h1>
|
||||
<p style="color: rgba(255,255,255,0.9); margin: 15px 0 0 0; font-size: 18px; font-family: Arial, sans-serif;">Special Offer</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<tr>
|
||||
<td style="padding: 40px 30px; background-color: #ffffff;">
|
||||
<!-- 优惠信息 -->
|
||||
<div style="margin-bottom: 30px;">
|
||||
<h2 style="color: #2c3e50; font-size: 26px; margin-bottom: 20px; text-align: center; font-family: Arial, sans-serif;">
|
||||
🎉 特别优惠活动
|
||||
</h2>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%); border-radius: 12px; margin-bottom: 30px;">
|
||||
<tr>
|
||||
<td style="padding: 25px; color: white; text-align: center;">
|
||||
<h3 style="margin: 0 0 15px 0; font-size: 24px; font-family: Arial, sans-serif;">限时折扣</h3>
|
||||
<p style="margin: 0; font-size: 18px; font-family: Arial, sans-serif;">全场商品 <strong>8折优惠</strong></p>
|
||||
<p style="margin: 10px 0 0 0; font-size: 14px; font-family: Arial, sans-serif;">活动时间：2024年1月1日 - 2024年1月31日</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 产品推荐 -->
|
||||
<div style="margin-bottom: 30px;">
|
||||
<h3 style="color: #2c3e50; margin: 0 0 20px 0; font-size: 20px; text-align: center; font-family: Arial, sans-serif;">🔥 热门推荐</h3>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="width: 50%; padding-right: 10px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: #f8f9fa; border-radius: 8px;">
|
||||
<tr>
|
||||
<td style="padding: 20px; text-align: center;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(45deg, #ff6b6b, #ffa726); border-radius: 50%; margin: 0 auto 15px; display: inline-block; line-height: 80px; font-size: 32px; color: white;">🏠</div>
|
||||
<h4 style="margin: 0 0 10px 0; color: #2c3e50; font-family: Arial, sans-serif;">精品家具</h4>
|
||||
<p style="margin: 0 0 15px 0; color: #7f8c8d; font-size: 14px; font-family: Arial, sans-serif;">现代简约风格，品质保证</p>
|
||||
<div style="background: #ff6b6b; color: white; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-family: Arial, sans-serif;">
|
||||
原价 ¥2999 现价 ¥2399
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td style="width: 50%; padding-left: 10px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: #f8f9fa; border-radius: 8px;">
|
||||
<tr>
|
||||
<td style="padding: 20px; text-align: center;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(45deg, #4ecdc4, #44a08d); border-radius: 50%; margin: 0 auto 15px; display: inline-block; line-height: 80px; font-size: 32px; color: white;">🛋️</div>
|
||||
<h4 style="margin: 0 0 10px 0; color: #2c3e50; font-family: Arial, sans-serif;">办公用品</h4>
|
||||
<p style="margin: 0 0 15px 0; color: #7f8c8d; font-size: 14px; font-family: Arial, sans-serif;">专业办公环境解决方案</p>
|
||||
<div style="background: #4ecdc4; color: white; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-family: Arial, sans-serif;">
|
||||
原价 ¥1999 现价 ¥1599
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 行动号召 -->
|
||||
<div style="text-align: center; margin-bottom: 30px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">
|
||||
<tr>
|
||||
<td style="background: linear-gradient(45deg, #ff6b6b, #ffa726); border-radius: 25px; padding: 15px 30px;">
|
||||
<a href="#" style="color: white; text-decoration: none; font-size: 18px; font-weight: bold; font-family: Arial, sans-serif;">
|
||||
🛒 立即购买
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 邮件正文内容 -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #ff6b6b;">
|
||||
<tr>
|
||||
<td style="padding: 25px;">
|
||||
<h3 style="color: #2c3e50; margin: 0 0 15px 0; font-size: 18px; font-family: Arial, sans-serif;">📧 详细信息</h3>
|
||||
<div style="line-height: 1.8; color: #555; font-size: 16px; font-family: Arial, sans-serif;">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`
|
||||
};
|
||||
82
gear-ui3/src/views/sale/contact/templates/notification.js
Normal file
82
gear-ui3/src/views/sale/contact/templates/notification.js
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* 通知邮件模板
|
||||
* 适用于系统通知、状态更新等场景
|
||||
*/
|
||||
export const notificationTemplate = {
|
||||
name: "系统通知模板",
|
||||
description: "简洁专业的系统通知邮件模板，适合状态更新和重要通知",
|
||||
category: "notification",
|
||||
html: `
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<!-- 头部 -->
|
||||
<tr>
|
||||
<td style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; text-align: center;">
|
||||
<h1 style="color: white; margin: 0; font-size: 28px; font-weight: 300; font-family: Arial, sans-serif;">系统通知</h1>
|
||||
<p style="color: rgba(255,255,255,0.8); margin: 10px 0 0 0; font-size: 16px; font-family: Arial, sans-serif;">System Notification</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<tr>
|
||||
<td style="padding: 40px 30px; background-color: #ffffff;">
|
||||
<!-- 通知图标 -->
|
||||
<div style="text-align: center; margin-bottom: 30px;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(45deg, #667eea, #764ba2); border-radius: 50%; margin: 0 auto; display: inline-block; line-height: 80px; font-size: 36px; color: white;">📢</div>
|
||||
</div>
|
||||
|
||||
<!-- 通知标题 -->
|
||||
<div style="text-align: center; margin-bottom: 30px;">
|
||||
<h2 style="color: #2c3e50; font-size: 24px; margin-bottom: 15px; font-family: Arial, sans-serif;">
|
||||
重要通知
|
||||
</h2>
|
||||
<p style="color: #7f8c8d; font-size: 16px; margin: 0; font-family: Arial, sans-serif;">
|
||||
请仔细阅读以下内容
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 通知内容卡片 -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: #f8f9fa; border-radius: 12px; margin-bottom: 30px;">
|
||||
<tr>
|
||||
<td style="padding: 30px;">
|
||||
<div style="background: white; border-radius: 8px; padding: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
|
||||
<h3 style="color: #2c3e50; margin: 0 0 20px 0; font-size: 20px; font-family: Arial, sans-serif;">
|
||||
📋 通知详情
|
||||
</h3>
|
||||
<div style="line-height: 1.8; color: #555; font-size: 16px; font-family: Arial, sans-serif;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 重要信息提示 -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; margin-bottom: 30px;">
|
||||
<tr>
|
||||
<td style="padding: 20px; color: white;">
|
||||
<h4 style="margin: 0 0 10px 0; font-size: 18px; font-family: Arial, sans-serif;">⚠️ 重要提醒</h4>
|
||||
<ul style="margin: 0; padding-left: 20px; line-height: 1.6; font-family: Arial, sans-serif;">
|
||||
<li>请及时处理相关事项</li>
|
||||
<li>如有疑问请联系客服</li>
|
||||
<li>感谢您的配合与支持</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: #ecf0f1; border-radius: 8px;">
|
||||
<tr>
|
||||
<td style="padding: 20px; text-align: center;">
|
||||
<h4 style="margin: 0 0 15px 0; color: #2c3e50; font-family: Arial, sans-serif;">📞 联系我们</h4>
|
||||
<p style="margin: 0; color: #7f8c8d; font-family: Arial, sans-serif;">
|
||||
客服电话：400-123-4567 | 邮箱：support@company.com
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`
|
||||
};
|
||||
94
gear-ui3/src/views/sale/contact/templates/product.js
Normal file
94
gear-ui3/src/views/sale/contact/templates/product.js
Normal file
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* 产品介绍邮件模板
|
||||
* 适用于产品展示、新品发布等场景
|
||||
*/
|
||||
export const productTemplate = {
|
||||
name: "产品介绍模板",
|
||||
description: "现代化的产品展示邮件模板，适合产品介绍和新品发布",
|
||||
category: "product",
|
||||
html: `
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<!-- 头部横幅 -->
|
||||
<tr>
|
||||
<td style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: white; margin: 0; font-size: 32px; font-weight: 600; font-family: Arial, sans-serif;">产品展示</h1>
|
||||
<p style="color: rgba(255,255,255,0.9); margin: 15px 0 0 0; font-size: 18px; font-family: Arial, sans-serif;">Product Showcase</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<tr>
|
||||
<td style="padding: 40px 30px; background-color: #ffffff;">
|
||||
<!-- 产品介绍 -->
|
||||
<div style="margin-bottom: 40px;">
|
||||
<h2 style="color: #2c3e50; font-size: 26px; margin-bottom: 25px; text-align: center; font-family: Arial, sans-serif;">
|
||||
🚀 产品特色
|
||||
</h2>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; margin-bottom: 30px;">
|
||||
<tr>
|
||||
<td style="padding: 25px; color: white;">
|
||||
<h3 style="margin: 0 0 15px 0; font-size: 20px; font-family: Arial, sans-serif;">✨ 核心优势</h3>
|
||||
<ul style="margin: 0; padding-left: 20px; line-height: 1.8; font-family: Arial, sans-serif;">
|
||||
<li>高质量材料，确保产品耐用性</li>
|
||||
<li>创新设计，满足现代审美需求</li>
|
||||
<li>环保认证，符合国际标准</li>
|
||||
<li>专业服务，全程技术支持</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 邮件正文内容 -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #4ecdc4;">
|
||||
<tr>
|
||||
<td style="padding: 25px;">
|
||||
<h3 style="color: #2c3e50; margin: 0 0 15px 0; font-size: 18px; font-family: Arial, sans-serif;">📧 详细信息</h3>
|
||||
<div style="line-height: 1.8; color: #555; font-size: 16px; font-family: Arial, sans-serif;">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 产品图片展示区域 -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #ecf0f1; border-radius: 8px; margin-bottom: 30px;">
|
||||
<tr>
|
||||
<td style="padding: 25px;">
|
||||
<h3 style="color: #2c3e50; margin: 0 0 20px 0; font-size: 20px; text-align: center; font-family: Arial, sans-serif;">📸 产品展示</h3>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="width: 50%; padding-right: 7px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: white; border-radius: 6px;">
|
||||
<tr>
|
||||
<td style="padding: 15px; text-align: center;">
|
||||
<div style="width: 60px; height: 60px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border-radius: 50%; margin: 0 auto 10px; display: inline-block; line-height: 60px; font-size: 24px; color: white;">🏠</div>
|
||||
<h4 style="margin: 0 0 5px 0; color: #2c3e50; font-family: Arial, sans-serif;">家居系列</h4>
|
||||
<p style="margin: 0; color: #7f8c8d; font-size: 14px; font-family: Arial, sans-serif;">现代简约风格</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td style="width: 50%; padding-left: 7px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: white; border-radius: 6px;">
|
||||
<tr>
|
||||
<td style="padding: 15px; text-align: center;">
|
||||
<div style="width: 60px; height: 60px; background: linear-gradient(45deg, #667eea, #764ba2); border-radius: 50%; margin: 0 auto 10px; display: inline-block; line-height: 60px; font-size: 24px; color: white;">🛋️</div>
|
||||
<h4 style="margin: 0 0 5px 0; color: #2c3e50; font-family: Arial, sans-serif;">办公系列</h4>
|
||||
<p style="margin: 0; color: #7f8c8d; font-size: 14px; font-family: Arial, sans-serif;">专业办公环境</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`
|
||||
};
|
||||
|
||||
export default productTemplate;
|
||||
483
gear-ui3/src/views/sale/email/index.vue
Normal file
483
gear-ui3/src/views/sale/email/index.vue
Normal file
@@ -0,0 +1,483 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="邮箱账号" prop="email">
|
||||
<el-input
|
||||
v-model="queryParams.email"
|
||||
placeholder="请输入邮箱账号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择邮箱类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in email_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 表格部分多级表头分组 -->
|
||||
<el-table v-loading="loading" :data="emailAccountList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="邮箱账号" align="center" prop="email" />
|
||||
<el-table-column label="基本信息" align="center">
|
||||
<el-table-column label="邮箱账号" align="center" prop="email" />
|
||||
<el-table-column label="邮箱类型" align="center" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="email_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="API方式" align="center">
|
||||
<el-table-column label="accessKey" align="center" prop="accessKey" />
|
||||
<el-table-column label="secretKey" align="center" prop="secretKey" />
|
||||
</el-table-column>
|
||||
<el-table-column label="SMTP类型" align="center">
|
||||
<el-table-column label="邮箱授权码/密码" align="center" prop="password" />
|
||||
<el-table-column label="SMTP服务器地址" align="center" prop="smtpHost" />
|
||||
<el-table-column label="SMTP端口" align="center" prop="smtpPort" />
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改发件人邮箱账号管理对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
|
||||
<!-- 基本信息组 -->
|
||||
<el-divider>基本信息</el-divider>
|
||||
<el-form-item label="邮箱账号" prop="email">
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入邮箱账号（输入后会自动填写SMTP配置）"
|
||||
@blur="autoFillSmtpConfig"
|
||||
>
|
||||
<el-tooltip slot="append" content="支持自动填写常见邮箱的SMTP配置" placement="top">
|
||||
<i class="el-icon-question" style="cursor: pointer; color: #909399;"></i>
|
||||
</el-tooltip>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择邮箱类型">
|
||||
<el-option
|
||||
v-for="dict in email_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 方式切换提示 -->
|
||||
<el-form-item label-width="0">
|
||||
<el-radio-group v-model="emailMode" size="small">
|
||||
<el-radio-button label="smtp">SMTP方式</el-radio-button>
|
||||
<el-radio-button label="api">API方式</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- API方式组 -->
|
||||
<template v-if="emailMode === 'api'">
|
||||
<el-divider>API方式</el-divider>
|
||||
<el-form-item label="accessKey" prop="accessKey">
|
||||
<el-input v-model="form.accessKey" placeholder="请输入API方式用accessKey" />
|
||||
</el-form-item>
|
||||
<el-form-item label="secretKey" prop="secretKey">
|
||||
<el-input v-model="form.secretKey" placeholder="请输入API方式用secretKey" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- SMTP类型组 -->
|
||||
<template v-else>
|
||||
<el-divider>SMTP类型</el-divider>
|
||||
<el-form-item label="邮箱授权码/密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入邮箱授权码/密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP服务器地址" prop="smtpHost">
|
||||
<el-input
|
||||
v-model="form.smtpHost"
|
||||
placeholder="请输入SMTP服务器地址（支持自动填写常见邮箱配置）"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP端口" prop="smtpPort">
|
||||
<el-input
|
||||
v-model="form.smtpPort"
|
||||
placeholder="请输入SMTP端口（支持自动填写常见邮箱配置）"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addEmailAccount, delEmailAccount, getEmailAccount, listEmailAccount, updateEmailAccount } from "@/api/oa/emailAccount";
|
||||
|
||||
export default {
|
||||
name: "EmailAccount",
|
||||
dicts: ['email_type'],
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const { email_type } = proxy.useDict('email_type');
|
||||
return {
|
||||
email_type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 发件人邮箱账号管理表格数据
|
||||
emailAccountList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
email: undefined,
|
||||
type: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
emailMode: 'smtp', // 新增：用于切换表单分组
|
||||
// SMTP配置映射表
|
||||
smtpConfigs: {
|
||||
'163.com': {
|
||||
host: 'smtp.163.com',
|
||||
port: '465'
|
||||
},
|
||||
'126.com': {
|
||||
host: 'smtp.126.com',
|
||||
port: '465'
|
||||
},
|
||||
'qq.com': {
|
||||
host: 'smtp.qq.com',
|
||||
port: '465'
|
||||
},
|
||||
'sina.com': {
|
||||
host: 'smtp.sina.com',
|
||||
port: '465'
|
||||
},
|
||||
'sina.cn': {
|
||||
host: 'smtp.sina.cn',
|
||||
port: '465'
|
||||
},
|
||||
'sohu.com': {
|
||||
host: 'smtp.sohu.com',
|
||||
port: '465'
|
||||
},
|
||||
'gmail.com': {
|
||||
host: 'smtp.gmail.com',
|
||||
port: '587'
|
||||
},
|
||||
'outlook.com': {
|
||||
host: 'smtp-mail.outlook.com',
|
||||
port: '587'
|
||||
},
|
||||
'hotmail.com': {
|
||||
host: 'smtp-mail.outlook.com',
|
||||
port: '587'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 根据字段自动切换分组
|
||||
'form.accessKey'(val) {
|
||||
this.updateEmailMode();
|
||||
},
|
||||
'form.secretKey'(val) {
|
||||
this.updateEmailMode();
|
||||
},
|
||||
'form.password'(val) {
|
||||
this.updateEmailMode();
|
||||
},
|
||||
'form.smtpHost'(val) {
|
||||
this.updateEmailMode();
|
||||
},
|
||||
'form.smtpPort'(val) {
|
||||
this.updateEmailMode();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询发件人邮箱账号管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listEmailAccount(this.queryParams).then(response => {
|
||||
this.emailAccountList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
emailId: undefined,
|
||||
email: undefined,
|
||||
password: undefined,
|
||||
smtpHost: undefined,
|
||||
smtpPort: undefined,
|
||||
accessKey: undefined,
|
||||
secretKey: undefined,
|
||||
remark: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
createBy: undefined,
|
||||
updateBy: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.emailMode = 'smtp';
|
||||
this.resetForm("form");
|
||||
|
||||
// 如果邮箱字段有值，尝试自动填写SMTP配置
|
||||
if (this.form.email) {
|
||||
this.$nextTick(() => {
|
||||
this.autoFillSmtpConfig();
|
||||
});
|
||||
}
|
||||
},
|
||||
updateEmailMode() {
|
||||
// 只要API字段有值就是API方式，否则为SMTP
|
||||
if ((this.form.accessKey && this.form.accessKey.trim()) || (this.form.secretKey && this.form.secretKey.trim())) {
|
||||
this.emailMode = 'api';
|
||||
// 清空SMTP相关字段
|
||||
this.form.password = undefined;
|
||||
this.form.smtpHost = undefined;
|
||||
this.form.smtpPort = undefined;
|
||||
} else if ((this.form.password && this.form.password.trim()) || (this.form.smtpHost && this.form.smtpHost.trim()) || (this.form.smtpPort && this.form.smtpPort.trim())) {
|
||||
this.emailMode = 'smtp';
|
||||
// 清空API相关字段
|
||||
this.form.accessKey = undefined;
|
||||
this.form.secretKey = undefined;
|
||||
}
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.emailId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加发件人邮箱账号管理";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const emailId = row.emailId || this.ids
|
||||
getEmailAccount(emailId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改发件人邮箱账号管理";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
// 提交时不带type字段
|
||||
const submitForm = { ...this.form };
|
||||
// delete submitForm.type;
|
||||
if (submitForm.emailId != null) {
|
||||
updateEmailAccount(submitForm).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addEmailAccount(submitForm).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const emailIds = row.emailId || this.ids;
|
||||
this.$modal.confirm('是否确认删除发件人邮箱账号管理编号为"' + emailIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delEmailAccount(emailIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/emailAccount/export', {
|
||||
...this.queryParams
|
||||
}, `emailAccount_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 自动填写SMTP配置 */
|
||||
autoFillSmtpConfig() {
|
||||
if (!this.form.email) return;
|
||||
|
||||
// 提取邮箱域名
|
||||
const emailDomain = this.form.email.split('@')[1];
|
||||
if (!emailDomain) return;
|
||||
|
||||
// 查找匹配的SMTP配置
|
||||
const smtpConfig = this.smtpConfigs[emailDomain.toLowerCase()];
|
||||
if (smtpConfig) {
|
||||
// 只有在SMTP模式下才自动填写
|
||||
if (this.emailMode === 'smtp') {
|
||||
let filled = false;
|
||||
|
||||
// 如果SMTP服务器地址为空，则自动填写
|
||||
if (!this.form.smtpHost || this.form.smtpHost.trim() === '') {
|
||||
this.form.smtpHost = smtpConfig.host;
|
||||
filled = true;
|
||||
}
|
||||
|
||||
// 如果SMTP端口为空，则自动填写
|
||||
if (!this.form.smtpPort || this.form.smtpPort.trim() === '') {
|
||||
this.form.smtpPort = smtpConfig.port;
|
||||
filled = true;
|
||||
}
|
||||
|
||||
// 只有在实际填写了内容时才显示提示
|
||||
if (filled) {
|
||||
this.$message({
|
||||
message: `已自动填写${emailDomain}的SMTP配置`,
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
418
gear-ui3/src/views/sale/template/index.vue
Normal file
418
gear-ui3/src/views/sale/template/index.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="模板名称" prop="templateName">
|
||||
<el-input
|
||||
v-model="queryParams.templateName"
|
||||
placeholder="请输入模板名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板分类" prop="category">
|
||||
<el-input
|
||||
v-model="queryParams.category"
|
||||
placeholder="请输入模板分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="emailTemplateList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键" align="center" prop="id" v-if="false" />
|
||||
<el-table-column label="模板名称" align="center" prop="templateName" />
|
||||
<el-table-column label="模板分类" align="center" prop="category" />
|
||||
<!-- <el-table-column label="模板内容" align="center" prop="content" /> -->
|
||||
<!-- <el-table-column label="附件信息" align="center" prop="attachments" /> -->
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleDetail(scope.row)"
|
||||
>详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改邮件模板对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="模板名称" prop="templateName">
|
||||
<el-input v-model="form.templateName" placeholder="请输入模板名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模板分类" prop="category">
|
||||
<el-input v-model="form.category" placeholder="请输入模板分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模板内容">
|
||||
<editor v-model="form.content" :min-height="192"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件" prop="attachments" v-if="!form.id">
|
||||
<FileUpload v-model="form.attachments" multiple :limit="10" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 模板详情对话框 -->
|
||||
<el-dialog :title="'模板详情'" v-model="detailOpen" width="800px" append-to-body>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="模板名称">{{ detailData.templateName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="模板分类">{{ detailData.category }}</el-descriptions-item>
|
||||
<el-descriptions-item label="模板内容">
|
||||
<div style="white-space: pre-wrap; word-break: break-all;" v-html="detailData.content"></div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="附件">
|
||||
<div v-if="detailData.attachments" class="attachment-list">
|
||||
<template>
|
||||
<div v-for="(url, idx) in attachmentUrlList" :key="idx" class="attachment-item">
|
||||
<template v-if="isImage(url)">
|
||||
<a :href="url" target="_blank" class="attachment-img-link">
|
||||
<img :src="url" alt="图片附件" class="attachment-img" />
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-link :href="url" target="_blank" class="attachment-file-link">
|
||||
<i class="el-icon-paperclip" style="margin-right:4px;"></i>附件{{idx+1}}
|
||||
</el-link>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>无</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<div style="white-space: pre-wrap; word-break: break-all;">{{ detailData.remark }}</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="detailOpen = false">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addEmailTemplate, delEmailTemplate, getEmailTemplate, listEmailTemplate, updateEmailTemplate } from "@/api/oa/emailTemplate";
|
||||
import { listByIds } from '@/api/system/oss';
|
||||
import FileUpload from '@/components/FileUpload';
|
||||
|
||||
export default {
|
||||
name: "EmailTemplate",
|
||||
components: {
|
||||
FileUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 邮件模板表格数据
|
||||
emailTemplateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
templateName: undefined,
|
||||
category: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
detailOpen: false,
|
||||
detailData: {},
|
||||
attachmentUrlList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询邮件模板列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listEmailTemplate(this.queryParams).then(response => {
|
||||
this.emailTemplateList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
templateName: undefined,
|
||||
category: undefined,
|
||||
content: undefined,
|
||||
attachments: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
createBy: undefined,
|
||||
updateBy: undefined,
|
||||
delFlag: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加邮件模板";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getEmailTemplate(id).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改邮件模板";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(async valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
// attachments字段为url拼成的csv字符串
|
||||
let attachmentsCsv = '';
|
||||
if (this.form.attachments) {
|
||||
try {
|
||||
const ossIds = this.form.attachments.split(',').filter(id => id);
|
||||
if (ossIds.length > 0) {
|
||||
console.log(ossIds)
|
||||
const res = await listByIds(ossIds.join(','));
|
||||
console.log(res)
|
||||
attachmentsCsv = (res.data || []).map(item => item.url).join(',');
|
||||
}
|
||||
} catch (e) {
|
||||
this.$modal.msgError('附件获取失败');
|
||||
this.buttonLoading = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
const submitData = {
|
||||
...this.form,
|
||||
attachments: attachmentsCsv
|
||||
};
|
||||
const request = this.form.id != null ? updateEmailTemplate : addEmailTemplate;
|
||||
request(submitData).then(response => {
|
||||
this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除邮件模板编号为"' + ids + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delEmailTemplate(ids);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/emailTemplate/export', {
|
||||
...this.queryParams
|
||||
}, `emailTemplate_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
handleDetail(row) {
|
||||
this.detailData = { ...row };
|
||||
// 解析csv字符串为url数组
|
||||
if (row.attachments && typeof row.attachments === 'string') {
|
||||
this.attachmentUrlList = row.attachments.split(',').map(s => s.trim()).filter(Boolean);
|
||||
} else if (Array.isArray(row.attachments)) {
|
||||
this.attachmentUrlList = row.attachments;
|
||||
} else {
|
||||
this.attachmentUrlList = [];
|
||||
}
|
||||
this.detailOpen = true;
|
||||
},
|
||||
isImage(url) {
|
||||
return /\.(png|jpe?g|gif|bmp|webp|svg)(\?.*)?$/i.test(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.attachment-list {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
padding: 16px 12px 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 24px;
|
||||
}
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-width: 120px;
|
||||
max-width: 180px;
|
||||
}
|
||||
.attachment-img-link {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.attachment-img-link:hover .attachment-img {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
}
|
||||
.attachment-img {
|
||||
max-width: 120px;
|
||||
max-height: 80px;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
.attachment-file-link {
|
||||
font-weight: 500;
|
||||
color: #409EFF;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
margin-top: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.attachment-file-link:hover {
|
||||
color: #fff;
|
||||
background: #409EFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user