laishajiang
2 years ago
3 changed files with 231 additions and 18 deletions
@ -0,0 +1,215 @@
|
||||
<template> |
||||
<div style="width: 90vw;margin: 0 auto;"> |
||||
<el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;"> |
||||
<el-row> |
||||
|
||||
<el-col :span="6"> |
||||
<el-form-item label="数据库名"> |
||||
<el-select |
||||
v-model="MailTab" |
||||
placeholder="Select" |
||||
size="small" |
||||
style="width: 240px" |
||||
> |
||||
<el-option |
||||
v-for="item in options" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="etl编号"> |
||||
<el-input v-model="form.id" placeholder="请输入etl编号" max-length="200px"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="信件编号"> |
||||
<el-input v-model="form.mailId" placeholder="请输入信件编号"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
<el-row> |
||||
|
||||
<el-col :span="6"> |
||||
<el-form-item label="是否成功"> |
||||
<el-input v-model="form.success" placeholder=""></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="3"></el-col> |
||||
<el-col :span="14" :style="{ display: 'inline-flex', alignItems: 'center' }"> |
||||
<el-row> |
||||
<el-col :span="6"></el-col> |
||||
<el-col :span="6"> |
||||
<el-button type="primary" @click="search" class="under-btn">搜索</el-button></el-col> |
||||
<el-col :span="6"> |
||||
<el-button type="default" style="position: relative; left: 100px;" @click="reset" class="under-btn">重置</el-button></el-col> |
||||
</el-row> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
|
||||
<div class="table-box" ref="tableBoxHeight" v-loading="loading"> |
||||
<el-table :data="tableData" border :height="tableHeight" table-layout="fixed" |
||||
:header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }"> |
||||
<el-table-column fixed="left" prop="id" label="etl编号" width="200px"> |
||||
</el-table-column> |
||||
<el-table-column fixed="left" prop="mailId" label="信件编号" width="200px"> |
||||
</el-table-column> |
||||
<el-table-column prop="success" label="是否成功" width="100px"> |
||||
</el-table-column> |
||||
<el-table-column prop="createTime" label="创建日期" width="120px"> |
||||
</el-table-column> |
||||
<el-table-column prop="errMsg" label="错误信息" width="800px"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div style="display: flex; justify-content: center;position: relative;top: 20px;"> |
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" |
||||
:current-page="pageData.currentPage" :page-sizes="[4, 10, 20, 40, 50]" :page-size="pageData.pageSize" |
||||
layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { request } from '../util/axios_config' |
||||
import { onMounted, ref } from 'vue'; |
||||
import router from '../router'; |
||||
const MailTab = ref('mail_etl') |
||||
|
||||
const options = [ |
||||
{ |
||||
value: 'mail_etl', |
||||
label: 'mail_etl', |
||||
}, |
||||
{ |
||||
value: 'mail_evaluate_etl', |
||||
label: 'mail_evaluate_etl', |
||||
}, |
||||
|
||||
] |
||||
const loading = ref(true); |
||||
|
||||
const form = ref({ |
||||
id: '', |
||||
mailId: '', |
||||
success: '', |
||||
}) |
||||
|
||||
// 定义可变的tableData变量，并用axios请求数据 |
||||
const tableData = ref([]) |
||||
|
||||
const pageData = ref({ |
||||
currentPage: 1, |
||||
pageSize: 8, |
||||
totalSize: 0 |
||||
}) |
||||
|
||||
const tableBoxHeight = ref(null) |
||||
const tableHeight = ref('100%') |
||||
const flexColumnWidth = (label, prop) => { |
||||
const width = Math.max(label.length * 12, 120) |
||||
return `${width}px` |
||||
} |
||||
|
||||
const handleResponse = (response) => { |
||||
tableData.value=[]; |
||||
if(MailTab.value=='mail_etl'){ |
||||
console.log("aaaa") |
||||
tableData.value = response.data.mails; |
||||
}else{ |
||||
console.log("bbbb") |
||||
tableData.value = response.data.evaMails; |
||||
} |
||||
tableData.value.forEach(item => { |
||||
item.createTime = item.createTime.split('T')[0] |
||||
}) |
||||
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||
loading.value = false; |
||||
} |
||||
|
||||
const makeRequest = (requestData, callback) => { |
||||
const data = JSON.stringify(requestData) |
||||
request({ |
||||
url: 'api/mailetl/list-submit', |
||||
method: 'POST', |
||||
data: data, |
||||
headers: { 'Content-Type': 'application/json' } |
||||
}).then(callback) |
||||
.catch(function (error) { console.log(error) }) |
||||
} |
||||
|
||||
const updateData = (requestData) => { |
||||
makeRequest(requestData, function (response) { |
||||
handleResponse(response) |
||||
}) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
const requestData = { |
||||
formData: form.value, |
||||
selectData:MailTab.value, |
||||
pageData: pageData.value |
||||
} |
||||
updateData(requestData) |
||||
}) |
||||
|
||||
|
||||
|
||||
|
||||
const handleSizeChange = (size) => { |
||||
const requestData = { |
||||
formData: form.value, |
||||
selectData:MailTab.value, |
||||
pageData: pageData.value |
||||
} |
||||
pageData.value.pageSize = size |
||||
updateData(requestData) |
||||
} |
||||
|
||||
const handlePageChange = (currentPage) => { |
||||
const requestData = { |
||||
formData: form.value, |
||||
selectData:MailTab.value, |
||||
pageData: pageData.value |
||||
} |
||||
pageData.value.currentPage = currentPage |
||||
updateData(requestData) |
||||
} |
||||
|
||||
const search = () => { |
||||
const requestData = { |
||||
formData: form.value, |
||||
selectData:MailTab.value, |
||||
pageData: pageData.value |
||||
} |
||||
updateData(requestData) |
||||
} |
||||
|
||||
const reset = () => { |
||||
form.value = { |
||||
id: '', |
||||
mailId: '', |
||||
success: '', |
||||
} |
||||
} |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.under-btn { |
||||
margin-right: 30px; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.table-box { |
||||
/* 全屏时顶部元素总和316px */ |
||||
height: calc(100vh - 336px); |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue