tougao_web/src/components/page/mailboxStyle.vue

<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 type="index" :label="$t('mailboxStyle.no')" width="70" align="center"></el-table-column>
      <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>