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

d86fbaed · Sweet Zhang · 58f9725e · d86fbaed · d86fbaed · d86fbaed
Commit d86fbaed authored Sep 24, 2025 by Sweet Zhang
Show whitespace changes
Inline Side-by-side

Showing with 129 additions and 36 deletions

src/App.vue
+3 -1

src/api/api.ts
+9 -0

src/types/index.ts
+1 -0

src/views/VariableManagement.vue
+116 -35

No files found.
--- a/src/App.vue
+++ b/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">

--- a/src/api/api.ts
+++ b/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)
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -34,6 +34,7 @@ export interface VariableTemplate {
  groupName?: string
  description?: string
  variableBizIdList?: string[]
+  variableNameEns?: string[]
 }
 // 邮件类型

--- a/src/views/VariableManagement.vue
+++ b/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
+  editingTemplateId.value = template.variableGroupBizId || ''
-  templateForm.value = { ...template }
  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(
+    editEmailVariableGroup({
-      (t) => t.variableGroupBizId === editingTemplateId.value,
-    )
-    if (index > -1) {
-      variableTemplates.value[index] = {
      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 || [],
-    }
+    })
+      .then(() => {
-    variableTemplates.value.push(newTemplate)
+        // 刷新变量模版列表
+        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) => {
+const deleteVariableTemplate = (id: string, type?: string) => {
-  if (confirm('确定要删除这个模板吗？')) {
+  editingTemplateId.value = id
-    variableTemplates.value = variableTemplates.value.filter(
+  if (type === 'confirmDelete') {
-      (template) => template.variableGroupBizId !== id,
+    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',
+    })
  }
 }