From 596da4b7cf488942c8baede1eb02157ee2c31112 Mon Sep 17 00:00:00 2001
From: ldrop <ldrop>
Date: Thu, 9 Jan 2025 15:09:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modelMessage/messageSystem.js         | 112 +++++
 src/api/modelMessage/template.js              |  44 ++
 src/api/modelMessage/variable.js              |  64 +++
 .../modelMessage/messageSystem/addMessage.vue | 334 +++++++++++++++
 .../modelMessage/messageSystem/index.vue      | 283 +++++++++++++
 .../modelMessage/messageSystem/smallBell.vue  |  85 ++++
 src/views/modelMessage/template/index.vue     | 383 ++++++++++++++++++
 src/views/modelMessage/variable/index.vue     | 348 ++++++++++++++++
 8 files changed, 1653 insertions(+)
 create mode 100644 src/api/modelMessage/messageSystem.js
 create mode 100644 src/api/modelMessage/template.js
 create mode 100644 src/api/modelMessage/variable.js
 create mode 100644 src/views/modelMessage/messageSystem/addMessage.vue
 create mode 100644 src/views/modelMessage/messageSystem/index.vue
 create mode 100644 src/views/modelMessage/messageSystem/smallBell.vue
 create mode 100644 src/views/modelMessage/template/index.vue
 create mode 100644 src/views/modelMessage/variable/index.vue

diff --git a/src/api/modelMessage/messageSystem.js b/src/api/modelMessage/messageSystem.js
new file mode 100644
index 0000000..45b32ca
--- /dev/null
+++ b/src/api/modelMessage/messageSystem.js
@@ -0,0 +1,112 @@
+import request from '@/utils/request'
+
+// 查询消息管理列表
+export function listMessageSystem(query) {
+  return request({
+    url: '/modelMessage/messageSystem/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询消息管理详细
+export function getMessageSystem(messageId) {
+  return request({
+    url: '/modelMessage/messageSystem/' + messageId,
+    method: 'get'
+  })
+}
+
+// 新增消息管理
+export function addMessage(data) {
+  return request({
+    url: '/modelMessage/messageSystem',
+    method: 'post',
+    data: data,
+    headers: { 'isRepeatSubmit': false }
+  })
+}
+
+// 修改消息管理
+export function updateMessageSystem(data) {
+  return request({
+    url: '/modelMessage/messageSystem',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除消息管理
+export function delMessageSystem(messageId) {
+  return request({
+    url: '/modelMessage/messageSystem/' + messageId,
+    method: 'delete'
+  })
+}
+
+// 查询系统用户收件人
+export function selectUser(sendMode) {
+  const url = '/modelMessage/messageSystem/selectUser' + (sendMode ? `?sendMode=${encodeURIComponent(sendMode)}` : '');
+  return request({
+    url: url,
+    method: 'get'
+  });
+}
+
+// 查询角色信息
+export function selectRole() {
+  return request({
+    url: '/modelMessage/messageSystem/selectRole',
+    method: 'get'
+  })
+}
+
+// 查询部门信息
+export function selectDept() {
+  return request({
+    url: '/modelMessage/messageSystem/selectDept',
+    method: 'get'
+  })
+}
+
+//消息状态
+export function getUpdate(messageId) {
+  return request({
+    url: '/modelMessage/messageSystem/' + messageId,
+    method: 'post'
+  })
+}
+
+//根据角色ID获取所有符合条件的用户信息。
+export function getUsersByRoleId(roleId) {
+  return request({
+    url: 'modelMessage/messageSystem/getUsersByRole/'+roleId,
+    method: 'get'
+  })
+}
+
+//根据部门ID获取所有符合条件的用户信息。
+export function getUserNamesByDeptId(deptId) {
+  return request({
+    url: 'modelMessage/messageSystem/getUserNameByDeptId/'+deptId,  
+    method: 'get'
+  })
+}
+
+// 查询模版签名
+export function selecTemplates() {
+  return request({
+    url: '/modelMessage/messageSystem/selecTemplates',
+    method: 'get'
+  })
+}
+
+// 批量发送消息
+export function batchAddMessage(data) {
+  return request({
+    url: '/modelMessage/messageSystem',
+    method: 'post',
+    data: data,
+    headers: { 'isRepeatSubmit': false } 
+  })
+}
diff --git a/src/api/modelMessage/template.js b/src/api/modelMessage/template.js
new file mode 100644
index 0000000..4c07791
--- /dev/null
+++ b/src/api/modelMessage/template.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询模版管理列表
+export function listTemplate(query) {
+  return request({
+    url: '/modelMessage/template/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询模版管理详细
+export function getTemplate(templateId) {
+  return request({
+    url: '/modelMessage/template/' + templateId,
+    method: 'get'
+  })
+}
+
+// 新增模版管理
+export function addTemplate(data) {
+  return request({
+    url: '/modelMessage/template',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改模版管理
+export function updateTemplate(data) {
+  return request({
+    url: '/modelMessage/template',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除模版管理
+export function delTemplate(templateId) {
+  return request({
+    url: '/modelMessage/template/' + templateId,
+    method: 'delete'
+  })
+}
diff --git a/src/api/modelMessage/variable.js b/src/api/modelMessage/variable.js
new file mode 100644
index 0000000..048db50
--- /dev/null
+++ b/src/api/modelMessage/variable.js
@@ -0,0 +1,64 @@
+import request from '@/utils/request'
+
+// 查询变量管理列表
+export function listVariable(query) {
+  return request({
+    url: '/modelMessage/variable/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询变量管理详细
+export function getVariable(variableId) {
+  return request({
+    url: '/modelMessage/variable/' + variableId,
+    method: 'get'
+  })
+}
+
+// 新增变量管理
+export function addVariable(data) {
+  return request({
+    url: '/modelMessage/variable',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改变量管理
+export function updateVariable(data) {
+  return request({
+    url: '/modelMessage/variable',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除变量管理
+export function delVariable(variableId) {
+  return request({
+    url: '/modelMessage/variable/' + variableId,
+    method: 'delete'
+  })
+}
+
+// 查询变量
+export function selectVariable() {
+  return request({
+    url: '/modelMessage/variable/selectMessageVariable',
+    method: 'get'
+  })
+}
+
+// 根据变量类型生成不同的变量内容
+export function generateVariableContent(variableType, customLength) {
+  return request({
+    url: '/modelMessage/variable/generate',
+    method: 'get',
+    params: {
+      variableType,
+      customLength: customLength || undefined // 可选参数
+    }
+  })
+}
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/addMessage.vue b/src/views/modelMessage/messageSystem/addMessage.vue
new file mode 100644
index 0000000..b73a441
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/addMessage.vue
@@ -0,0 +1,334 @@
+<template>
+  <el-dialog :title="title" v-model="dialogVisible" width="500px" append-to-body @closed="handleClosed" class="custom-dialog">
+    <el-form ref="messageSystemFormRef" :model="form" :rules="rules" label-width="80px" class="custom-form" v-loading="loading" element-loading-text="信息正在发送中...">
+      <el-form-item label="标题" prop="messageTitle">
+        <el-input v-model="form.messageTitle" placeholder="请输入标题" />
+      </el-form-item>
+      <el-form-item label="发送方式" prop="sendMode">
+        <el-select v-model="form.sendMode" placeholder="请选择发送方式" clearable style="width: 100%" @change="fetchRecipients">
+          <el-option v-for="dict in send_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="号码" prop="code" v-if="isCodeFieldVisible">
+        <el-input v-model="form.code" placeholder="请输入手机号或者邮箱" disabled />
+      </el-form-item>
+      <el-form-item label="内容类型" prop="contentType">
+        <el-radio-group v-model="form.contentType" @change="handleContentTypeChange">
+          <el-radio label="template">模版签名</el-radio>
+          <el-radio label="content">消息内容</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="模版签名" prop="messageContent" v-if="form.contentType === 'template'">
+        <el-select v-model="form.messageContent" placeholder="请选择模版签名" style="width: 100%;" @change="handleTemplateChange">
+          <el-option v-for="temp in templates" :key="temp.templateId" :label="temp.templateCode" :value="temp.templateCode" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="消息内容" prop="messageContent" v-if="form.contentType === 'content'">
+        <el-input v-model="form.messageContent" type="textarea" placeholder="(手机号内容格式必须为：模板名?模板参数=值)" @input="handleContentInput"  maxlength="100" show-word-limit/>
+      </el-form-item>
+      <el-form-item label="消息类型" prop="messageType">
+        <el-select v-model="form.messageType" placeholder="请选择消息类型" clearable >
+          <el-option v-for="dict in message_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="收件人类型" prop="recipientType" label-width="92px">
+        <el-radio-group v-model="form.recipientType" @change="fetchRecipients">
+          <el-radio v-for="type in recipientTypes" :key="type.value" :label="type.value">{{ type.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="hasSelectedOptions" :label="selectedLabel" prop="messageRecipient">
+        <div v-if="form.recipientType === 'dept'" style="width: 100%;">
+          <el-tree-select v-model="form.messageRecipient" :data="depts" placeholder="请选择部门" clearable
+            :props="{ value: 'deptId', label: 'deptName', children: 'children' }" @change="handleDeptChange" multiple />
+        </div>
+        <div v-else style="width: 100%;">
+          <el-select v-model="form.messageRecipient" placeholder="请选择" @change="handleSelectionChange" multiple>
+            <el-option v-for="item in selectedOptions" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :loading="loading">发 送</el-button>
+        <el-button @click="toggleDialog">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, getCurrentInstance, defineProps, defineEmits, defineExpose } from 'vue';
+import { getUserNamesByDeptId, getUsersByRoleId, selectUser, selectRole, selectDept, selecTemplates, batchAddMessage } from '@/api/modelMessage/messageSystem';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({ title: { type: String, default: "发送消息界面" } });
+const { proxy } = getCurrentInstance();
+const { send_mode, message_type} = proxy.useDict("send_mode", "message_type");
+const emit = defineEmits(['success', 'close']);
+const users = ref([]);
+const roles = ref([]);
+const depts = ref([]);
+const templates = ref([]);
+const messageSystemFormRef = ref(null);
+const dialogVisible = ref(false);
+const form = ref({
+  messageTitle: null,
+  messageContent: null,
+  messageTemplate: null,
+  messageRecipient: [], 
+  remark: null,
+  sendMode: null,
+  recipientType: null,
+  code: null,
+  contentType: null 
+});
+
+const loading = ref(false);
+
+const isCodeFieldVisible = computed(() => ['1', '2'].includes(form.value.sendMode)); //0 平台 1 短信 2 邮箱
+const recipientTypes=computed(() =>[{ value: 'user', label: '用户' },{ value: 'role', label: '角色' },{ value: 'dept', label: '部门' }]);
+const selectedLabel = computed(() => recipientTypes.value.find(type => type.value === form.value.recipientType)?.label || '');
+const hasSelectedOptions = computed(() => form.value.recipientType && (users.value.length || roles.value.length || depts.value.length));
+
+const rules = ref({ //验证
+  messageTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  sendMode: [{ required: true, message: '请选择发送方式', trigger: 'change' }],
+  messageRecipient: [{ required: true, message: '请选择收件人', trigger: 'change' }],
+  messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
+  recipientType: [{ required: true, message: '请选择收件人方式', trigger: 'change' }],
+  contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
+  messageContent: [{ required: true, message: '模版签名或消息内容不能为空', trigger: 'blur' },
+    { validator: validateMessageContent, trigger: 'blur' }],
+  ...(isCodeFieldVisible.value ? { code: [{ required: true, message: '手机号或者邮箱', trigger: 'blur' }] } : {})
+});
+
+const selectedOptions = computed(() => {
+  if (!form.value.recipientType) return [];
+  const data = form.value.recipientType === 'user' ? users.value : form.value.recipientType === 'role' ? roles.value :  depts.value;
+  return data.map(item => ({
+    id: item.userId || item.roleId || item.deptId, name: item.userName || item.roleName || item.deptName,
+    phonenumber: item.phonenumber, email: item.email
+  }));
+});
+
+//获取部门 角色 平台信息
+async function fetchRecipients() {
+  form.value.messageRecipient = null;
+  switch (form.value.recipientType) {
+    case 'user': await getUsers(); break;
+    case 'role': await getRoles(); break;
+    case 'dept': await getDepts(); break;
+  }
+}
+
+//选择对应的平台 角色 部门 填充对应的号码信息
+async function handleSelectionChange(selectedIds) {
+  try {
+    let users = [];
+    if (form.value.recipientType === 'role') {
+      for (const id of selectedIds) {
+        const roleUsers = (await getUsersByRoleId(id)).data;
+        users.push(...roleUsers.filter(user => user.phonenumber || user.email || user.name));
+      }
+    } else if (form.value.recipientType === 'dept') {
+      for (const id of selectedIds) {
+        const deptUsers = (await getUserNamesByDeptId(id)).data;
+        users.push(...deptUsers.filter(user => user.phonenumber || user.email || user.name));
+      }
+    } else {
+      users = selectedOptions.value.filter(option => selectedIds.includes(option.id) && (option.phonenumber || option.email || option.name));
+    }
+    updateCodeField(users);
+  } catch (error) {
+    console.error('未获取到用户信息', error);
+  }
+}
+
+//部门信息
+async function handleDeptChange(deptIds) {
+  try {
+    const users = [];
+    for (const deptId of deptIds) {
+      const deptUsers = (await getUserNamesByDeptId(deptId)).data;
+      users.push(...deptUsers.filter(user => user.phonenumber || user.email || user.name));
+    }
+    updateCodeField(users);
+  } catch (error) {
+    console.error('未获取到部门成员信息', error);
+  }
+}
+
+function updateCodeField(users) {
+  form.value.code = users.map(user => {
+    if (form.value.sendMode === '0') return user.name || ''; // 用户
+    if (form.value.sendMode === '1') return user.phonenumber || ''; // 短信
+    if (form.value.sendMode === '2') return user.email || ''; // 邮箱
+    return ''; 
+  }).join(', ');
+  if (!form.value.code) {
+    ElMessage.warning('未找到该收件人有效联系方式！');
+  }
+}
+
+//发送信息提交
+async function submitForm() {
+  loading.value = true;
+  await messageSystemFormRef.value.validate(async valid => {
+    if (valid) {
+      try {
+        const recipients = await getRecipients();
+        const messages = recipients.map(recipient => ({
+          ...form.value, messageRecipient: recipient.userName || recipient.name,
+          code: form.value.sendMode === '1' ? recipient.phonenumber : form.value.sendMode === '2' ? recipient.email : recipient.name,
+          sendMode: form.value.sendMode
+        }));
+        await batchAddMessage(messages);
+        ElMessage.success("消息发送成功！");
+        emit('success');
+        toggleDialog();
+      } catch (error) {
+        ElMessage.error('发送信息失败:', error);
+      }
+    } else {
+      ElMessage.warning("请将信息输入完整！");
+    }
+  });
+  loading.value = false;
+}
+
+//过滤掉不符合的用户
+async function getRecipients() {
+  if (form.value.recipientType === 'dept') {
+    const users = [];
+    for (const deptId of form.value.messageRecipient) {
+      users.push(...(await getUserNamesByDeptId(deptId)).data.filter(user => user.deptId));
+    }
+    return users;
+  } else if (form.value.recipientType === 'role') {
+    return form.value.messageRecipient.flatMap(async id => (await getUsersByRoleId(id)).data);
+  } else if (form.value.recipientType === 'user') {
+    return selectedOptions.value.filter(option => form.value.messageRecipient.includes(option.id));
+  }
+  return [];
+}
+
+//查询平台 角色 部门 模版信息 部门为树状
+async function getUsers() {
+  try {
+    users.value = (await selectUser(form.value.sendMode)).data;
+  } catch (error) {
+    console.error('未获取到用户信息', error);
+  }
+}
+async function getRoles() {
+  try {
+    roles.value = (await selectRole()).data;
+  } catch (error) {
+    console.error('未获取到角色信息', error);
+  }
+}
+async function getDepts() {
+  try {
+    depts.value = buildTree((await selectDept()).data);
+  } catch (error) {
+    console.error('未获取到部门信息', error);
+  }
+}
+function buildTree(depts) {
+  const map = {}, root = [];
+  depts.forEach(dept => {
+    map[dept.deptId] = dept;
+    if (dept.parentId === 0) root.push(dept);
+    else {
+      map[dept.parentId].children = map[dept.parentId].children || [];
+      map[dept.parentId].children.push(dept);
+    }
+  });
+  return root;
+}
+async function getTemplate() {
+  try {
+    templates.value = (await selecTemplates()).data;
+  } catch (error) {
+    console.error('未获取到模版信息', error);
+  }
+}
+
+function reset() {
+  form.value = { messageTitle: null, messageContent: null, messageTemplate: null, messageRecipient: null, remark: null, sendMode: null, recipientType: null };
+  proxy.resetForm("messageSystemFormRef");
+}
+function toggleDialog() {
+  dialogVisible.value = !dialogVisible.value;
+  if (!dialogVisible.value) {
+    reset();
+    emit('close');
+  }
+}
+function handleClosed() {reset(); emit('close');}
+function handleContentTypeChange() {form.value.messageContent = null;}
+function handleTemplateChange(value) { form.value.messageContent = value;}
+function handleContentInput(value) {form.value.messageContent = value;}
+function validateMessageContent(rule, value, callback) {
+  const pattern = /^[^?]+?\?[^=]+?=.*$/;
+  if (form.value.sendMode === '1' && form.value.contentType === 'content' && !pattern.test(value)) {
+    callback(new Error('短信输入内容格式必须为：模板名?模板参数=值'));
+  } else {
+    callback();
+  }
+}
+defineExpose(
+  { open: () => { 
+    dialogVisible.value = true;  
+    fetchRecipients();
+  }, 
+  getTemplate
+});
+getTemplate();
+</script>
+
+<style scoped>
+.custom-dialog {
+  background: linear-gradient(135deg, #1f1f1f, #3d3d3d);
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.custom-form {
+  padding: 20px;
+}
+
+.custom-form .el-form-item__label {
+  color: #fff;
+}
+
+.custom-form .el-input__inner, .custom-form .el-select .el-input__inner {
+  background-color: #2c2c2c;
+  border-color: #444;
+  color: #fff;
+}
+
+.custom-form .el-input__inner::placeholder, .custom-form .el-select .el-input__inner::placeholder {
+  color: #888;
+}
+
+.custom-form .el-input__inner:focus, .custom-form .el-select .el-input__inner:focus {
+  border-color: #00aaff;
+}
+
+.custom-button {
+  background-color: #00aaff;
+  border-color: #00aaff;
+  color: #fff;
+}
+
+.custom-button:hover {
+  background-color: #0088cc;
+  border-color: #0088cc;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/index.vue b/src/views/modelMessage/messageSystem/index.vue
new file mode 100644
index 0000000..53113a6
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/index.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" class="form-container">
+      <el-form-item label="标题" prop="messageTitle">
+        <el-input v-model="queryParams.messageTitle" placeholder="请输入标题" clearable @keyup.enter="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="消息状态" prop="messageStatus">
+        <el-select v-model="queryParams.messageStatus" placeholder="请选择状态" clearable style="width: 190px">
+          <el-option v-for="dict in message_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @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="Plus" @click="handleAdd" v-hasPermi="['modelMessage:messageSystem:add']">发送信息</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">批量删除</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+   
+    <el-table v-loading="loading" :data="filteredMessageSystemList" @selection-change="handleSelectionChange" class="table-container">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="标题" align="center" prop="messageTitle" >
+        <template #default="scope">
+        <span @click="openDrawer(scope.row.messageId)" class="message-title" style="cursor: pointer; color: darkcyan;">
+          {{ scope.row.messageTitle }}
+        </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="发件人" align="center" prop="createBy" />
+      <el-table-column label="发件时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="消息状态" align="center" prop="messageStatus">
+        <template #default="scope">
+          <dict-tag :options="message_status" :value="scope.row.messageStatus" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <AddMessage ref="sendMessageRef" @success="handleSendSuccess"/>
+
+    <el-dialog :title="title" v-model="drawerVisible" width="40%" append-to-body :show-overlay="false" class="custom-dialog">
+      <div>
+        <el-descriptions :column="1" border class="descriptions">
+          <el-descriptions-item label="标题">{{ detailForm.messageTitle }}</el-descriptions-item>
+          <el-descriptions-item label="发件人">{{ detailForm.createBy }}</el-descriptions-item>
+          <el-descriptions-item label="发送方式">
+            <dict-tag :options="send_mode" :value="detailForm.sendMode" />
+          </el-descriptions-item>
+          <el-descriptions-item label="发送时间">{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
+          <el-descriptions-item label="消息内容">{{ detailForm.messageContent }}</el-descriptions-item>
+          <el-descriptions-item label="收件人">{{ detailForm.messageRecipient }}</el-descriptions-item>
+          <el-descriptions-item label="消息类型">
+            <dict-tag :options="message_type" :value="detailForm.messageType" />
+          </el-descriptions-item>
+          <el-descriptions-item label="备注">{{ detailForm.remark }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="MessageSystem">
+import { ref, reactive, computed, toRefs, getCurrentInstance } from 'vue';
+import { delMessageSystem, listMessageSystem, getMessageSystem, getUpdate } from "@/api/modelMessage/messageSystem";
+import AddMessage from './addMessage.vue';
+import useUserStore from '@/store/modules/user';
+
+const { proxy } = getCurrentInstance();
+const { message_status, message_type, send_mode } = proxy.useDict("message_status", "message_type", "send_mode");
+const userStore = useUserStore();
+const isCustomer = computed(() => !userStore.roles.includes('admin') && !userStore.roles.includes('engineer'));
+
+const messageSystemList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const multiple = ref(true);
+const title = ref('');
+const total = ref(0);
+const sendMessageRef = ref(false);
+const drawerVisible = ref(false);
+const detailForm = ref({});
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    messageTitle: null,
+    messageStatus: null,
+  }
+});
+
+const { queryParams } = toRefs(data);
+
+// 查询消息管理列表
+function getList() {
+  loading.value = true;
+  listMessageSystem(queryParams.value).then(response => {
+    messageSystemList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 搜索按钮操作
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+// 重置按钮操作
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.messageId);
+  multiple.value = !selection.length;
+}
+
+// 发送信息操作
+function handleAdd() {
+  sendMessageRef.value.open();
+  sendMessageRef.value.getTemplate();
+}
+
+// 删除按钮操作
+function handleDelete(row) {
+  const _messageIds = row.messageId || ids.value;
+  proxy.$modal.confirm('是否确认删除消息管理编号为"' + _messageIds + '"的数据项？').then(function () {
+    return delMessageSystem(_messageIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除信息成功！");
+  }).catch(() => { });
+}
+
+function handleSendSuccess() {
+  getList();
+}
+
+// 打开抽屉并加载详细信息
+function openDrawer(messageId) {
+  getMessageSystem(messageId).then(response => {
+    detailForm.value = response.data;
+    title.value ='信息详情';
+    drawerVisible.value = true;
+    getUpdate(messageId).then(response => {});
+  });
+}
+
+//过滤
+const filteredMessageSystemList = computed(() => {
+  if (isCustomer.value) {
+    return messageSystemList.value.filter(item => item.sendMode === '0');
+  }
+  return messageSystemList.value;
+});
+
+getList();
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.el-button {
+  transition: all 0.3s ease-in-out;
+}
+
+.el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+.el-form {
+  margin-bottom: 20px;
+}
+
+.el-input__inner,
+.el-textarea__inner {
+  border-radius: 4px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.el-input__inner:focus,
+.el-textarea__inner:focus {
+  border-color: #409eff;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 5px rgba(64, 158, 255, 0.5);
+}
+
+.el-table {
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.el-table .el-table__header-wrapper {
+  background-color: #409eff;
+  color: #ffffff;
+}
+
+.el-table .cell {
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5;
+  transition: background-color 0.3s ease;
+}
+
+.el-table .cell:hover {
+  background-color: #f0f4ff;
+}
+
+.el-dialog {
+  background-color: #f0f4ff;
+  border-radius: 8px;
+}
+
+.el-dialog__header {
+  background-color: #409eff;
+  color: #ffffff;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.el-descriptions {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(4, 116, 245, 0.1);
+}
+
+.el-descriptions-item {
+  margin-bottom: 20px;
+}
+
+.el-descriptions-item label {
+  color: #409eff;
+}
+
+.pagination {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.custom-dialog {
+  background-color: #f8f9fa;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.dict-tag {
+  background-color: #e0f7fa;
+  color: #009688;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid #b2ebf2;
+}
+
+.dict-tag:hover {
+  background-color: #b2ebf2;
+  color: #00695c;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/smallBell.vue b/src/views/modelMessage/messageSystem/smallBell.vue
new file mode 100644
index 0000000..f5f2ae9
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/smallBell.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-popover v-model="showPopover" placement="bottom-start" width="200" trigger="hover">
+    <template #reference>
+      <el-button type="text" @mouseover="fetchLatestMessages" @mouseout="hidePopover">
+        <el-icon size="20" color="#5a5e66" style="transform: scaleX(1.1) scaleY(1.1); margin-right: 5px;">
+          <Bell />
+        </el-icon>
+      </el-button>
+    </template>
+    <div v-if="filteredNotifications.length > 0">
+      <h4 style="margin: 0px; padding: 0px;">信息中心</h4>
+      <ul class="notification-list">
+        <li style="cursor: pointer;" v-for="(item, index) in filteredNotifications" :key="index" @click="viewDetails(item)">
+          {{ item.messageTitle }}
+        </li>
+      </ul>
+    </div>
+    <div v-else>
+      暂无信息
+    </div>
+  </el-popover>
+</template>
+
+<script setup name="NotificationBell">
+import { ref, computed } from 'vue';
+import { listMessageSystem } from "@/api/modelMessage/messageSystem";
+import { getCurrentInstance } from 'vue';
+import useUserStore from '@/store/modules/user';
+
+const { proxy } = getCurrentInstance();
+
+const userStore = useUserStore();
+const isCustomer = computed(() => !userStore.roles.includes('admin') && !userStore.roles.includes('engineer'));
+const messageSystemList = ref([])
+const filteredNotifications = computed(() => {
+  if (isCustomer.value) {
+    return messageSystemList.value.filter(item => item.sendMode === '0').slice(0, 5);
+  }
+  return messageSystemList.value.slice(0, 5);
+});
+
+const showPopover = ref(false);
+const latestNotifications = ref([]);
+
+async function fetchLatestMessages() {
+  try {
+    const response = await listMessageSystem();
+    messageSystemList.value = response.rows;
+    latestNotifications.value = response.rows.slice(0, 5);
+  } catch (error) {
+    console.error('获取信息失败:', error);
+  }
+}
+
+function viewDetails(item) {
+  proxy.$emit('view-details', item); // 向父组件传递事件
+}
+
+// 隐藏popover
+function hidePopover() {
+  showPopover.value = false;
+}
+
+defineExpose({ fetchLatestMessages });
+</script>
+
+<style scoped>
+.notification-list {
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+}
+
+.notification-list li {
+  list-style-type: none;
+  padding: 5px 0;
+  cursor: pointer;
+}
+
+.notification-list li:hover {
+  background-color: #e0e0e0;
+  color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/template/index.vue b/src/views/modelMessage/template/index.vue
new file mode 100644
index 0000000..160e055
--- /dev/null
+++ b/src/views/modelMessage/template/index.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="模版名称" prop="templateName">
+        <el-input v-model="queryParams.templateName" placeholder="请输入模版名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @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="Plus" @click="handleAdd">新增模版</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除模版</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="模版名称" align="center" prop="templateName" />
+      <el-table-column label="模版CODE" align="center" prop="templateCode" />
+      <el-table-column label="模版类型" align="center" prop="templateType">
+        <template #default="scope">
+          <dict-tag :options="template_type" :value="scope.row.templateType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="模版内容" align="center" prop="templateContent" />
+      <el-table-column label="变量" align="center" prop="templateVariable" />
+      <el-table-column label="场景说明" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 添加或修改模版管理对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body class="dialog-container">
+      <el-form ref="templateRef" :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="模版CODE" prop="templateCode" label-width="90px">
+          <el-input v-model="form.templateCode" placeholder="请输入模版CODE" @blur="validateTemplateCode" />
+        </el-form-item>
+        <el-form-item label="模版类型" prop="templateType">
+          <el-select v-model="form.templateType" placeholder="请选择模版类型">
+            <el-option v-for="dict in template_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="变量" prop="templateVariable">
+          <el-select v-model="form.templateVariable" placeholder="请选择变量" multiple @change="handleVariableChange">
+            <el-option v-for="item in variable" :key="item.variableId" :label="item.variableName" :value="item.variableName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模版内容" prop="templateContent">
+          <el-input v-model="form.templateContent" type="textarea" placeholder="请输入模版内容" />
+        </el-form-item>
+        <el-form-item label="场景说明" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入场景说明" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Template">
+import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/modelMessage/template";
+import { selectVariable } from "@/api/modelMessage/variable";
+
+const { proxy } = getCurrentInstance();
+const { template_type } = proxy.useDict("template_type");
+const templateList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const variable = ref([]);
+
+const data = reactive({
+  form: {templateContent: ''},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    templateName: null,
+    templateType: null,
+  },
+  rules: {
+    templateName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
+    templateCode: [{ required: true, message: '请输入模版CODE', trigger: 'blur' },{validator:validateTemplateCode,trigger: 'blur' }],
+    templateType: [{ required: true, message: '请选择模版类型', trigger: 'change' }],
+    templateVariable: [{ required: true, message: '请选择变量', trigger: 'change' }],
+    remark: [{ required: true, message: '请输入场景说明', trigger: 'blur' }],
+    templateContent: [{ required: true, message: '请输入模版内容', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询模版管理列表 */
+function getList() {
+  loading.value = true;
+  listTemplate(queryParams.value).then(response => {
+    templateList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {templateId: null, templateName: null, templateCode: null, templateType: null, templateContent: '', 
+    templateVariable: [], createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null};
+  proxy.resetForm("templateRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.templateId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getVariable();
+  open.value = true;
+  title.value = "添加模版";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  getVariable();
+  const _templateId = row.templateId || ids.value
+  getTemplate(_templateId).then(response => {
+    form.value = response.data;
+    form.value.templateVariable = response.data.templateVariable.split('/');
+    open.value = true;
+    title.value = "编辑模版";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["templateRef"].validate(valid => {
+    if (valid) {
+      form.value.templateVariable = form.value.templateVariable.join('/');
+      if (form.value.templateId != null) {
+        updateTemplate(form.value).then(response => {
+          proxy.$modal.msgSuccess("编辑模版成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addTemplate(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增模版成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 验证 templateCode 是否以 SMS_ 开头 */
+function validateTemplateCode(rule, value, callback) {
+  if (!value.startsWith('SMS_')) {
+    callback(new Error('模版CODE必须以SMS_开头'));
+  } else {
+    callback();
+  }
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _templateIds = row.templateId || ids.value;
+  proxy.$modal.confirm('是否确认删除模版管理编号为"' + _templateIds + '"的数据项？').then(function() {
+    return delTemplate(_templateIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('modelMessage/template/export', {
+    ...queryParams.value
+  }, `template_${new Date().getTime()}.xlsx`)
+}
+
+async function getVariable() {
+  try {
+    variable.value = (await selectVariable()).data;
+  } catch (error) {
+    console.error('未获取到变量信息', error);
+  }
+}
+
+// 当变量选项改变时触发
+function handleVariableChange(value) {
+  form.value.templateVariable = value;
+  if (!form.value.templateContent) {
+    form.value.templateContent = '';
+  }
+  const currentPlaceholders = form.value.templateContent.match(/\$\{\w+\}/g) || []; // 获取当前模板内容中的所有变量占位符
+  const selectedVariableContents = variable.value.filter(v => value.includes(v.variableName)) // 获取选中的变量占位符
+    .map(v => `\${${v.variableContent}}`);
+  currentPlaceholders.forEach(placeholder => { // 移除未选中的变量占位符
+    if (!selectedVariableContents.includes(placeholder)) {
+      form.value.templateContent = form.value.templateContent.replace(placeholder, '').trim();
+    }
+  });
+  // 填充模板内容
+  const selectedVariable = variable.value.find(v => v.variableName === value[value.length - 1]);
+  if (selectedVariable) {
+    const variablePlaceholder = `\${${selectedVariable.variableContent}}`;
+    if (!form.value.templateContent.includes(variablePlaceholder)) {
+      form.value.templateContent += ` ${variablePlaceholder}`;
+    }
+  }
+  form.value.templateContent = form.value.templateContent.replace(/\s+/g, ' ').trim();
+}
+
+getVariable();
+getList();
+</script>
+<style scoped>
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #f5f7fa;
+}
+
+.app-container {
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.el-button {
+  transition: all 0.3s ease-in-out;
+}
+
+.el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+.el-form {
+  margin-bottom: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 18px;
+}
+
+.el-input__inner,
+.el-textarea__inner {
+  border-radius: 4px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.el-input__inner:focus,
+.el-textarea__inner:focus {
+  border-color: #409eff;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 5px rgba(64, 158, 255, 0.5);
+}
+
+.el-button--primary {
+  color: white;
+  background: linear-gradient(90deg, #66b1ff, #409eff);
+}
+
+.el-button--danger {
+  color: white;
+  background: linear-gradient(90deg, #f8aaaa, #ee9397);
+}
+
+.el-button--warning {
+  color: white;
+  background: linear-gradient(90deg, #f5c185, #e2af92);
+}
+
+.el-table th {
+  background-color: #f5f7fa;
+  color: #909399;
+  font-weight: bold;
+}
+
+.el-table tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+.el-table tbody tr:hover {
+  background-color: #ecf5ff !important;
+}
+
+.el-table .el-table__row td {
+  border-bottom: none;
+}
+
+.dialog-container {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.dialog-footer {
+  text-align: right;
+  margin-top: 20px;
+}
+
+.el-button--default {
+  background-color: #f5f7fa;
+  border-color: #dcdfe6;
+  color: #606266;
+  transition: all 0.3s ease-in-out;
+}
+
+.el-button--default:hover {
+  background-color: #ebeef5;
+  border-color: #dcdfe6;
+}
+
+.dialog-fade-enter-active,
+.dialog-fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.dialog-fade-enter,
+.dialog-fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/variable/index.vue b/src/views/modelMessage/variable/index.vue
new file mode 100644
index 0000000..9b0cad1
--- /dev/null
+++ b/src/views/modelMessage/variable/index.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="变量名称" prop="variableName">
+        <el-input v-model="queryParams.variableName" placeholder="请输入变量名称" clearable   @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @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="Plus" @click="handleAdd">新增变量</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除变量</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="variableList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="变量名称" align="center" prop="variableName" />
+      <el-table-column label="变量类型" align="center" prop="variableType" />
+      <el-table-column label="变量内容" align="center" prop="variableContent" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 添加或修改变量管理对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="variableRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="变量名称" prop="variableName">
+          <el-input v-model="form.variableName" placeholder="请输入变量名称" />
+        </el-form-item>
+        <el-form-item label="变量类型" prop="variableType">
+          <el-select v-model="form.variableType" placeholder="请选择变量类型" @change="handleVariableTypeChange">
+            <el-option label="指定文本" value="指定文本"></el-option>
+            <el-option label="内置变量" value="内置变量"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.variableType === '内置变量'" label="内置变量内容" label-width="100px" prop="builtInVariable">
+          <el-select v-model="form.variableContent" placeholder="请选择内置变量">
+            <el-option label="发送时间" value="time"></el-option>
+            <el-option label="发送日期" value="date"></el-option>
+            <el-option label="发送日期时间" value="datetime"></el-option>
+            <el-option label="发件人" value="addresser"></el-option>
+            <el-option label="收件人" value="recipients"></el-option>
+            <el-option label="随机n位数字" value="RandomnDigits"></el-option>
+            <el-option label="随机n位字母" value="RandomnCharacters"></el-option>
+            <el-option label="随机n位数字字母" value="RandomN-digitLetters"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.variableType !== '内置变量'" label="变量内容" prop="variableContent">
+          <el-input v-model="form.variableContent" type="textarea" placeholder="请输入变量内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Variable">
+import { listVariable, getVariable, delVariable, addVariable, updateVariable } from "@/api/modelMessage/variable";
+import { ElMessage } from "element-plus";
+const { proxy } = getCurrentInstance();
+
+const variableList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {
+    variableName: null,
+    variableType: null,
+    variableContent: null,
+    builtInVariable: null
+  },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    variableName: null,
+  },
+  rules: {
+    variableName: [{ required: true, message: '请输入变量名称', trigger: 'blur' }],
+    variableType: [{ required: true, message: '请选择变量类型', trigger: 'change' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data); 
+ 
+/** 查询变量管理列表 */
+function getList() {
+  loading.value = true;
+  listVariable(queryParams.value).then(response => {
+    variableList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = { variableId: null, variableName: null, variableType: null, variableContent: null, builtInVariable: null,
+    createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null };
+  proxy.resetForm("variableRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.variableId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加变量";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _variableId = row.variableId || ids.value
+  getVariable(_variableId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "编辑变量";
+  });
+}
+
+// 当变量类型改变时触发
+function handleVariableTypeChange(value) {
+  if (value === '内置变量') {
+    form.value.builtInVariable = null;
+    form.value.variableContent = '';
+  } else {
+    form.value.variableContent = ''; 
+  }
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["variableRef"].validate(async (valid) => {
+    if (valid) {
+      try {
+        let result;
+        if (form.value.variableId != null) {
+          result = await updateVariable(form.value);
+          proxy.$modal.msgSuccess("编辑成功");
+        } else {
+          result = await addVariable(form.value);
+          proxy.$modal.msgSuccess("新增成功");
+        }
+
+        // 关闭对话框并刷新列表
+        open.value = false;
+        getList();
+      } catch (error) {
+        ElMessage.error('操作失败');
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _variableIds = row.variableId || ids.value;
+  proxy.$modal.confirm('是否确认删除变量管理编号为"' + _variableIds + '"的数据项？').then(function() {
+   return delVariable(_variableIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('modelMessage/variable/export', {
+    ...queryParams.value
+  }, `variable_${new Date().getTime()}.xlsx`)
+}
+
+getList();
+</script>
+<style scoped>
+.app-container {
+  padding: 20px;
+  background-color: #f8f9fa;
+}
+
+.el-form, .el-table, .el-dialog {
+  margin-bottom: 20px;
+}
+
+.el-button {
+  transition: all 0.3s ease;
+  font-weight: bold;
+}
+
+.el-button:hover {
+  transform: scale(1.05);
+}
+
+.el-button--primary {
+  background: linear-gradient(90deg, #67c23a, #5cb87a);
+  border-color: transparent;
+  color: white;
+}
+
+.el-button--danger {
+  background: linear-gradient(90deg, #f56c6c, #e05b5b);
+  border-color: transparent;
+  color: white;
+}
+
+.el-button--warning {
+  background: linear-gradient(90deg, #e6a23c, #d98e2d);
+  border-color: transparent;
+  color: white;
+}
+
+.el-button--plain {
+  color: #409eff;
+  background-color: #ecf5ff;
+  border-color: #b3d8ff;
+}
+
+.el-button--plain:hover {
+  background: linear-gradient(90deg, #ecf5ff, #d9ecff);
+}
+
+/* Table */
+.el-table {
+  margin-top: 20px;
+}
+
+.el-table th > .cell {
+  color: #303133;
+  font-weight: bold;
+}
+
+.el-table td {
+  padding: 10px;
+}
+
+/* Form */
+.el-form-item {
+  margin-bottom: 10px;
+}
+
+.el-input, .el-select {
+  width: 100%;
+}
+
+/* Dialog */
+.el-dialog {
+  border-radius: 12px;
+}
+
+.el-dialog__header {
+  background-color: #f5f7fa;
+  padding: 15px;
+  border-bottom: 1px solid #ebeef5;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.el-dialog__footer {
+  border-top: 1px solid #ebeef5;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+/* Input fields */
+.el-input__inner {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+/* Select dropdown */
+.el-select .el-input__inner {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+/* Textarea */
+.el-textarea__inner {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+/* Icons */
+.el-icon {
+  color: #409eff;
+}
+
+/* Hover effects */
+.el-button:hover {
+  cursor: pointer;
+}
+
+</style>
\ No newline at end of file
-- 
Gitee