Skip to content

F
frontend-yd-email
Commit d86fbaed by Sweet Zhang
Options

除模版变量编辑外，变量管理页面完成对接

parent 58f9725e
Showing with 129 additions and 36 deletions
src/App.vue
......@@ -4,7 +4,7 @@
<LoginPage v-if="isLoginPage && !isAuthenticated" @login="handleLogin" />
<!-- 主应用布局 -->
<div v-else class="flex flex-1 overflow-y-auto">
<div v-else class="flex flex-1 h-screen">
<!-- 侧边导航 -->
<Sidebar :current-page="currentPage" @logout="handleLogout" />
......@@ -25,6 +25,7 @@
/>
<!-- 主内容区域 -->
<div class="flex-1 flex flex-col">
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
<header class="mb-6">
<h2 class="text-2xl font-bold text-gray-800">
......@@ -49,6 +50,7 @@
</main>
</div>
</div>
</div>
</template>
<script setup lang="ts">
......
src/api/api.ts
......@@ -294,3 +294,12 @@ export const getEmailVariableGroupList = (params: {
}) => {
return request.post('/emailVariableGroup/page', params)
}
/**
* 获取变量分组详情
* @param id 变量分组id
* @returns
*/
export const getEmailVariableGroupDetail = (id: string) => {
return request.get('/emailVariableGroup/detail?variableGroupBizId=' + id)
}
src/types/index.ts
......@@ -34,6 +34,7 @@ export interface VariableTemplate {
groupName?: string
description?: string
variableBizIdList?: string[]
variableNameEns?: string[]
}
// 邮件类型
......
src/views/VariableManagement.vue
......@@ -66,7 +66,7 @@
</button>
</div>
</div>
<!-- 变量模板列表 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
<div class="p-6 border-b border-gray-200">
<div class="flex justify-between items-center">
......@@ -82,20 +82,21 @@
<div class="p-6">
<div
v-for="template in variableTemplates"
:key="template.id"
:key="template.variableGroupBizId"
class="border border-gray-200 rounded-lg p-4 mb-4 hover:border-blue-300 transition-colors"
>
<div class="flex justify-between items-start mb-3">
<h4 class="font-medium">{{ template.name }}</h4>
<h4 class="font-medium">{{ template.groupName }}</h4>
<div>
<button
<!-- 先不做编辑 -->
<!-- <button
@click="editVariableTemplate(template)"
class="text-blue-600 hover:text-blue-900 mr-3 text-sm"
>
<i class="fas fa-edit"></i>
</button>
</button> -->
<button
@click="deleteVariableTemplate(template.id)"
@click="deleteVariableTemplate(template.variableGroupBizId)"
class="text-red-600 hover:text-red-900 text-sm"
>
<i class="fas fa-trash"></i>
......@@ -105,11 +106,11 @@
<p class="text-sm text-gray-600 mb-3">{{ template.description || '无描述' }}</p>
<div class="flex flex-wrap gap-2">
<span
v-for="variableId in template.variableBizIdList"
v-for="variableId in template.variableNameEns.split(';')"
:key="variableId"
class="px-2 py-1 bg-blue-50 text-blue-700 rounded text-xs"
>
{{ variablePrefix }}{{ getVariableKeyById(variableId) }}{{ variableNextfix }}
{{ variablePrefix }}{{ variableId }}{{ variableNextfix }}
</span>
</div>
<div class="mt-3 flex justify-end">
......@@ -128,7 +129,7 @@
</div>
</div>
</div>
<!-- 变量列表 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-6 border-b border-gray-200">
<h3 class="text-lg font-semibold">变量列表</h3>
......@@ -208,7 +209,7 @@
<div class="mb-4">
<label class="block text-gray-700 mb-1 text-sm">模板名称 *</label>
<input
v-model="templateForm.name"
v-model="templateForm.groupName"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
......@@ -239,10 +240,10 @@
@change="toggleTemplateVariable(variable.variableBizId || '')"
/>
<label for="'template-var-' + variable.variableBizId">
<div class="text-sm text-gray-500">{{ variable.variableNameCn }}</div>
<div class="font-medium font-mono text-sm">
{{ variablePrefix }}{{ variable.variableNameEn }}{{ variableNextfix }}
</div>
<div class="text-xs text-gray-500">{{ variable.variableNameCn }}</div>
</label>
</div>
</div>
......@@ -298,6 +299,7 @@ import {
editEmailVariableGroup,
deleteEmailVariableGroup,
getEmailVariableGroupList,
getEmailVariableGroupDetail,
} from '@/api/api'
// 引入弹窗组件
......@@ -328,6 +330,8 @@ const handleConfirm = (triggerKey: string) => {
console.log('用户确认操作', triggerKey)
if (triggerKey === 'deleteModal') {
deleteVariable(editingVariableId.value, 'confirmDelete')
} else if (triggerKey === 'templeteDelete') {
deleteVariableTemplate(editingTemplateId.value, 'confirmDelete')
}
}
......@@ -454,7 +458,6 @@ const editVariable = (variable: Variable) => {
}
const deleteVariable = (id: string, type?: string) => {
console.log(id, type)
editingVariableId.value = id
if (id && type === 'confirmDelete') {
deleteEmailVariable(id)
......@@ -557,11 +560,39 @@ const showCreateTemplateModal = (isNew: boolean) => {
}
}
}
// 方法 - 编辑变量模版
const editVariableTemplate = (template: VariableTemplate) => {
editingTemplateId.value = template.id
templateForm.value = { ...template }
editingTemplateId.value = template.variableGroupBizId || ''
showTemplateModal.value = true
// 详情查询
if (editingTemplateId.value) {
// 详情查询出来的 variableBizIdList 数组，需要和 variables 数组匹配，找到匹配的变量，然后把状态改为勾选状态，选中变量置顶
getEmailVariableGroupDetail(editingTemplateId.value).then((res) => {
templateForm.value = {
...res.data,
variableBizIdList: res.data.emailVariableDtoList || [],
}
// 实现变量匹配逻辑：
// 1. 为每个变量对象添加selected属性
const selectedVariableIds =
res.data.emailVariableDtoList?.map((item) => item.variableBizId) || []
console.log(selectedVariableIds)
// 2. 更新variables数组，设置选中状态
variables.value = variables.value.map((variable) => ({
...variable,
selected: selectedVariableIds.includes(variable.variableBizId),
}))
// 3. 将选中的变量置顶显示（按选中状态排序）
variables.value.sort((a, b) => {
if (a.selected && !b.selected) return -1
if (!a.selected && b.selected) return 1
return 0
})
})
}
}
const closeTemplateModal = () => {
......@@ -596,44 +627,94 @@ const saveVariableTemplate = () => {
return
if (editingTemplateId.value) {
console.log('更新变量模版', templateForm.value)
// 更新现有模板
const index = variableTemplates.value.findIndex(
(t) => t.variableGroupBizId === editingTemplateId.value,
)
if (index > -1) {
variableTemplates.value[index] = {
editEmailVariableGroup({
variableGroupBizId: editingTemplateId.value,
groupName: templateForm.value.groupName || '',
description: templateForm.value.description || '',
variableBizIdList: templateForm.value.variableBizIdList || [],
}
})
.then(() => {
// 刷新变量模版列表
fetchVariableTemplates()
emits('update-variable-templates', [...variableTemplates.value])
})
.catch((error) => {
console.error('更新变量模版失败:', error)
if (error.response?.data?.message) {
openModal({
title: '错误',
message: error.response.data.message,
})
} else {
openModal({
title: '错误',
message: '更新变量模版失败',
})
}
})
} else {
// 创建新模板
const newTemplate: VariableTemplate = {
// 调用变量组保存接口
addEmailVariableGroup({
groupName: templateForm.value.groupName || '',
description: templateForm.value.description || '',
variableBizIdList: templateForm.value.variableBizIdList || [],
}
variableTemplates.value.push(newTemplate)
})
.then(() => {
// 刷新变量模版列表
fetchVariableTemplates()
emits('update-variable-templates', [...variableTemplates.value])
})
.catch((error) => {
console.error('创建变量模版失败:', error)
if (error.response?.data?.message) {
openModal({
title: '错误',
message: error.response.data.message,
})
} else {
openModal({
title: '错误',
message: '创建变量模版失败',
})
}
})
}
closeTemplateModal()
openModal({
title: '成功',
message: editingTemplateId.value ? '模板更新成功' : '模板创建成功',
})
}
const deleteVariableTemplate = (id: string) => {
if (confirm('确定要删除这个模板吗？')) {
variableTemplates.value = variableTemplates.value.filter(
(template) => template.variableGroupBizId !== id,
)
const deleteVariableTemplate = (id: string, type?: string) => {
editingTemplateId.value = id
if (type === 'confirmDelete') {
deleteEmailVariableGroup(editingTemplateId.value)
.then(() => {
// 刷新变量模版列表
fetchVariableTemplates()
emits('update-variable-templates', [...variableTemplates.value])
})
.catch((error) => {
console.error('删除变量模版失败:', error)
if (error.response?.data?.message) {
openModal({
title: '错误',
message: error.response.data.message,
})
} else {
openModal({
title: '错误',
message: '删除变量模版失败',
})
}
})
} else {
openModal({
showClose: true,
title: '确认删除',
message: '确定删除此变量模版吗？',
triggerKey: 'templeteDelete',
})
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment