邮件模版

2026-03-13 10:20:53 +08:00
parent 3c27591fc7
commit 213ca978b7
17 changed files with 21350 additions and 744 deletions
--- a/src/components/page/mailboxStyle.vue
+++ b/src/components/page/mailboxStyle.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="admin-container">
+    <h2>{{ $t('mailboxStyle.title') }}</h2>
+    <p class="subtitle">{{ $t('mailboxStyle.subtitle') }}</p>
+
+    <div class="toolbar">
+   
+      <div class="right-actions">
+        <el-button type="primary" icon="el-icon-refresh" @click="fetchList">{{ $t('mailboxStyle.searchBtn') }}</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="handleCreate">{{ $t('mailboxStyle.createStyle') }}</el-button>
+      </div>
+    </div>
+
+    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;" v-loading="loading">
+      <el-table-column prop="name" :label="$t('mailboxStyle.colName')" min-width="220">
+        <template slot-scope="scope">
+          <div class="title-cell">
+            <strong>{{ scope.row.title }}</strong>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="description" :label="$t('mailboxStyle.colDescription')" min-width="220">
+        <template slot-scope="scope">
+          <span>{{ scope.row.description || '-' }}</span>
+        </template>
+      </el-table-column>
+     
+   
+      <el-table-column width="160">
+        <template slot-scope="scope">
+          <el-button type="text" icon="el-icon-view" @click="handlePreview(scope.row)"></el-button>
+          <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
+          <el-button type="text" icon="el-icon-delete"  class="delete-btn" @click="handleDelete(scope.row)"></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      :title="$t('mailboxMould.previewTitle')"
+      :visible.sync="previewVisible"
+      width="80%"
+    >
+      <div class="preview-body" v-html="previewContent"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="previewVisible = false">{{ $t('mailboxMould.previewClose') }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const API = {
+  listStyles: 'api/mail_template/listStyles',
+  getAllJournal: 'api/Journal/getAllJournal',
+  deleteStyle: 'api/mail_template/deleteStyle'
+};
+
+export default {
+  name: 'mailboxStyle',
+  data() {
+    return {
+      searchQuery: '',
+      loading: false,
+      journalList: [],
+      filters: {
+        journalId: '',
+        scene: '',
+        language: ''
+      },
+      tableData: [],
+      previewVisible: false,
+      previewContent: ''
+    };
+  },
+  created() {
+    this.loadJournals();
+  },
+  methods: {
+    loadJournals() {
+      this.$api
+        .post(API.getAllJournal, {})
+        .then(res => {
+          const list = (res && res.data && res.data.journals) || res.data || [];
+          const mapped = (Array.isArray(list) ? list : []).map(j => ({
+            journal_id: j.journal_id || j.id,
+            title: j.title || j.name || ''
+          }));
+          this.journalList = mapped;
+          if (mapped.length > 0) {
+            this.filters.journalId = String(mapped[0].journal_id);
+          }
+          this.fetchList();
+        })
+        .catch(() => {
+          this.journalList = [];
+        });
+    },
+    fetchList() {
+      this.loading = true;
+      const params = {
+        journal_id: this.filters.journalId || '',
+        scene: this.filters.scene || '',
+        language: this.filters.language || ''
+      };
+      this.$api
+        .post(API.listStyles, params)
+        .then(res => {
+          this.loading = false;
+          const list = (res && res.data && res.data.list) || [];
+          this.tableData = (Array.isArray(list) ? list : []).map(item => ({
+            id: item.style_id || item.id,
+            style_id: item.style_id || item.id,
+            title: item.name,
+           
+            header_html: item.header_html,
+            footer_html: item.footer_html,
+            description: item.description || '',
+         
+          }));
+        })
+        .catch(() => {
+          this.loading = false;
+          this.tableData = [];
+        });
+    },
+    handleCreate() {
+      this.$router.push({ path: '/mailboxStyleDetail' });
+    },
+    handleEdit(row) {
+      const styleId = row && (row.style_id || row.id);
+      // TODO: 跳转到“风格详情”页，并带上 style_id
+      this.$router.push({ path: '/mailboxStyleDetail', query: styleId ? { style_id: String(styleId) } : {} });
+    },
+    handlePreview(row) {
+      const header = (row && row.header_html) || '';
+      const footer = (row && row.footer_html) || '';
+      this.previewContent = `${header}${footer}`;
+      this.previewVisible = true;
+    },
+    handleDelete(row) {
+      const styleId = row && (row.style_id || row.id);
+      if (!styleId) return;
+      this.$confirm(this.$t('mailboxMould.deleteConfirm'), this.$t('mailboxMould.colActions'), {
+        confirmButtonText: this.$t('mailboxMould.confirm'),
+        cancelButtonText: this.$t('mailboxMould.cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$api.post(API.deleteStyle, { style_id: String(styleId) }).then(res => {
+          if (res && res.code === 0) {
+            this.$message.success(this.$t('mailboxMould.deleteSuccess'));
+            this.fetchList();
+          } else {
+            this.$message.error((res && res.msg) || this.$t('mailboxMould.deleteFail'));
+          }
+        }).catch(() => {
+          this.$message.error(this.$t('mailboxMould.deleteFail'));
+        });
+      }).catch(() => {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.admin-container {
+  padding: 20px;
+  background: #fff;
+}
+.subtitle {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.right-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+}
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.status-dot.active {
+  background-color: #52c41a;
+}
+.delete-btn {
+  color: #f5222d !important;
+}
+.preview-body {
+  max-height: 70vh;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid #eee;
+  background: #fff;
+}
+</style>
+