<template> 
 | 
  <div class="fa-card-a" shadow="never"> 
 | 
    <div class="mod-message__mail-template"> 
 | 
      <zt-table-wraper v-slot="{ table }" delete-url="/sys/mailtemplate" query-url="/sys/mailtemplate/page"> 
 | 
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()"> 
 | 
              <el-form-item style="margin-top: 2px;margin-left: 10px"> 
 | 
                <el-input v-model="dataForm.name" :placeholder="$t('mail.name')" clearable></el-input> 
 | 
              </el-form-item> 
 | 
              <el-form-item class="message-btn"> 
 | 
                <zt-button type="query" @click="table.query()"/> 
 | 
                <zt-button type="add" @click="table.editHandle()"/> 
 | 
                <zt-button type="primary" @click="configHandle()">{{ $t('mail.config') }}</zt-button> 
 | 
                <zt-button type="delete" @click="table.deleteHandle()"/> 
 | 
              </el-form-item> 
 | 
            </el-form> 
 | 
            <el-table v-adaptive="{bottomOffset:70}" 
 | 
                      v-loading="table.dataLoading" 
 | 
                      :data="table.dataList" 
 | 
                      style="margin-top: 10px" 
 | 
                      border height="100px" @selection-change="table.selectionChangeHandle" 
 | 
                      @sort-change="table.sortChangeHandle"> 
 | 
              <el-table-column type="selection" width="40"/> 
 | 
              <el-table-column :label="$t('mail.name')" prop="name"/> 
 | 
              <el-table-column :label="$t('mail.subject')" prop="subject"/> 
 | 
              <el-table-column :label="$t('mail.createDate')" prop="createDate" sortable="custom" width="160"/> 
 | 
              <zt-table-column-handle :table="table" width="180"> 
 | 
                <template v-slot="{ row }"> 
 | 
                  <zt-table-button @click="sendHandle(row.id)">{{ $t('mail.send') }}</zt-table-button> 
 | 
                </template> 
 | 
              </zt-table-column-handle> 
 | 
            </el-table> 
 | 
        <!-- 弹窗, 新增 / 修改 --> 
 | 
        <add-or-update @refreshDataList="table.query"/> 
 | 
        <!-- 弹窗, 邮件配置 --> 
 | 
        <config v-if="configVisible" ref="config"></config> 
 | 
        <!-- 弹窗, 发送邮件 --> 
 | 
        <send v-if="sendVisible" ref="send" @refreshDataList="table.query"></send> 
 | 
      </zt-table-wraper> 
 | 
    </div> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import AddOrUpdate from './mail-template-add-or-update' 
 | 
import Config from './mail-template-config' 
 | 
import Send from './mail-template-send' 
 | 
  
 | 
export default { 
 | 
  data() { 
 | 
    return { 
 | 
      dataForm: { 
 | 
        name: '' 
 | 
      }, 
 | 
      configVisible: false, 
 | 
      sendVisible: false 
 | 
    } 
 | 
  }, 
 | 
  components: { 
 | 
    AddOrUpdate, 
 | 
    Config, 
 | 
    Send 
 | 
  }, 
 | 
  methods: { 
 | 
    // 邮件配置 
 | 
    configHandle() { 
 | 
      this.configVisible = true 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.config.$refs['dialog'].init() 
 | 
      }) 
 | 
    }, 
 | 
    // 发送邮件 
 | 
    sendHandle(id) { 
 | 
      this.sendVisible = true 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.send.dataForm.id = id 
 | 
        this.$refs.send.$refs['dialog'].init() 
 | 
      }) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |