<template>
|
<div>
|
<el-card style="margin: 10px;">
|
<el-row style="display: flex;justify-content: space-between">
|
<el-col :span="6">
|
<b style="margin-right: 20px">{{ $t('menu.MailSendLog') }}</b>
|
</el-col>
|
<el-col :span="18" align="right">
|
<el-date-picker
|
style="margin-right: 5px"
|
size="default"
|
v-model="searchValue.datearray"
|
type="datetimerange"
|
:start-placeholder="$t('label.DateFrom')"
|
:end-placeholder="$t('label.DateTo')"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
>
|
</el-date-picker>
|
<el-button :icon="icon.Search" type="primary" size="default" @click="SearchData"
|
style="margin-top: -6px;">
|
{{ $t('button.Search') }}
|
</el-button>
|
</el-col>
|
</el-row>
|
<el-divider :style="{'margin':'10px 0px'}"></el-divider>
|
<el-table v-loading="loading" :data="mailsendlogs" stripe border size="default" highlight-current-row
|
element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
:header-row-style="{ height: '45px', color: 'var(--el-color-primary)', background: 'var(--el-color-info-light)', }"
|
:header-cell-style="{ height: '45px', margin: '0px', padding: '0px', background: 'var(--el-color-info-light)' }">
|
<el-table-column type="index" fixed :label="$t('label.Index')" width="80"/>
|
<el-table-column prop="createtime" width="150" align="left" :label="$t('label.CreateTime')"
|
:formatter="formatterDatetime"/>
|
<el-table-column prop="username" align="left" :label="$t('label.Name')" width="300"/>
|
<el-table-column prop="account" align="left" :label="$t('label.Account')" width="230"/>
|
<el-table-column prop="status" :label="$t('label.Status')" width="160">
|
<template #default="scope">
|
<el-tag v-if="scope.row.status===0" type="success">
|
{{ $t('label.PENDING') }}
|
</el-tag>
|
<el-tag v-else-if="scope.row.status===1" type="warning">
|
{{ $t('label.QUEUING') }}
|
</el-tag>
|
<el-tag v-else-if="scope.row.status===2" type="info">
|
{{ $t('label.SUCCESSFUL') }}
|
</el-tag>
|
<el-tag v-else-if="scope.row.status===3" type="danger">
|
{{ $t('label.FAILED') }}
|
</el-tag>
|
<el-tag v-else type="info">
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="count" align="left" :label="$t('label.TryCount')" width="240"/>
|
<el-table-column prop="trytime" width="150" align="left" :label="$t('label.TryTime')"
|
:formatter="formatterDatetime"/>
|
<el-table-column prop="routekey" align="left" :label="$t('label.routekey')" width="350"/>
|
<el-table-column prop="exchange" align="left" :label="$t('label.exchange')" min-width="1800" width="*"/>
|
</el-table>
|
<el-affix position="bottom" :offset="10">
|
<div style="background: white;padding-bottom:10px;">
|
<el-divider :style="{'margin':'10px 0px'}"></el-divider>
|
<div style="margin-top:10px; display: flex;justify-content: flex-end">
|
<el-pagination
|
:currentPage="pageIndex"
|
:page-size="pageSize"
|
background
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
:page-sizes="[10, 20, 50, 100, 200]"
|
layout="sizes, prev, pager, next, jumper, ->, total, slot"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-affix>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
|
import * as icon from '@element-plus/icons-vue'
|
import {onMounted, onBeforeUnmount, getCurrentInstance, reactive, toRefs} from "vue";
|
import {formatDate} from '@/utils/common'
|
import {GetMailSendLogs} from "@/api/admin/system"
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
|
export default {
|
name: "MailSendLog",
|
components: {},
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore()
|
const state = reactive({
|
title: '',
|
total: 0,
|
pageIndex: 1,
|
pageSize: store.config.ListSize,
|
loading: false,
|
windowWidth: document.documentElement.clientWidth,
|
windowHeight: document.documentElement.clientHeight,
|
mailsendlogs: [],
|
searchValue: {
|
filter: "",
|
datearray: '',
|
},
|
});
|
|
onMounted(() => {
|
Init();
|
LoadData();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
|
};
|
const sizeChange = (currentSize) => {
|
state.pageSize = currentSize;
|
store.config.ListSize = state.pageSize;
|
LoadData();
|
};
|
const currentChange = (currentPage) => {
|
state.pageIndex = currentPage;
|
LoadData();
|
};
|
const getSearchCondition = () => {
|
let condition;
|
condition = {
|
pageIndex: state.pageIndex,
|
pageSize: state.pageSize,
|
datearray: state.searchValue.datearray,
|
startDateTime: state.searchValue.datearray ? state.searchValue.datearray[0] : null,
|
endDateTime: state.searchValue.datearray ? state.searchValue.datearray[1] : null,
|
}
|
|
return condition;
|
};
|
const LoadData = () => {
|
state.loading = true;
|
let condition = getSearchCondition();
|
|
GetMailSendLogs(condition).then(resp => {
|
state.loading = false;
|
if (resp.data) {
|
state.mailsendlogs = resp.data.data;
|
state.total = resp.data.total;
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
};
|
const SearchData = () => {
|
state.pageIndex = 1;
|
LoadData();
|
};
|
const downloadFile = (filename) => {
|
window.open(filename, "_target")
|
};
|
//formatter
|
const formatterDatetime = (row, column) => {
|
let date = null;
|
switch (column.property) {
|
case "createtime":
|
if (!row.createtime)
|
return null;
|
date = new Date(row.createtime);
|
break;
|
case "trytime":
|
if (!row.trytime)
|
return null;
|
date = new Date(row.trytime);
|
break;
|
case "actiontime":
|
if (!row.actiontime)
|
return null;
|
date = new Date(row.actiontime);
|
break;
|
case "validdateto":
|
if (!row.validdateto)
|
return null;
|
date = new Date(row.validdateto);
|
break;
|
case "validdatefrom":
|
if (!row.validdatefrom)
|
return null;
|
date = new Date(row.validdatefrom);
|
break;
|
}
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm');
|
};
|
|
return {
|
...toRefs(state), LoadData, sizeChange, currentChange, SearchData,
|
downloadFile,
|
formatterDatetime, icon
|
}
|
},
|
}
|
</script>
|
|
<style>
|
|
</style>
|
