laishajiang
2 years ago
3 changed files with 321 additions and 0 deletions
@ -0,0 +1,6 @@ |
|||||||
|
import { get, post} from "@/util/request" |
||||||
|
|
||||||
|
export function getdetail(id) { |
||||||
|
return post('/mailbox/detail',id) |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,111 @@ |
|||||||
|
<template> |
||||||
|
<div class="detail-list" > |
||||||
|
<label style="width: 100px; font-size: 30px; ">信件详情</label> |
||||||
|
<el-button @click="back()" style="margin-left:1500px; width: 100px; font-size: 16px; border: solid;">返回</el-button> |
||||||
|
|
||||||
|
<el-form ref="form" :model="form" label-width="120px" style="margin-top: 50px;"> |
||||||
|
<el-form-item label="案件编号"> |
||||||
|
<el-col :span="12" > |
||||||
|
<el-input v-model="form.id" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="姓名"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.contactName" style="border: groove; font-size: 16px; " type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="手机号" > |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.contactPhone" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="身份证号码" > |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.contactIdCard" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="信件内容"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input type="textarea" :rows="12" v-model="form.content" style="border: groove; font-size: 16px;" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="评价"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.satisfaction" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
</el-form> |
||||||
|
|
||||||
|
<!-- <h1>{{ mailID }}</h1> --> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<!-- <script setup> |
||||||
|
import { onMounted } from 'vue'; |
||||||
|
import router from '../router'; |
||||||
|
import axios from 'axios'; |
||||||
|
const mailID = router.currentRoute.value.params.id; |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
console.log(mailID); |
||||||
|
axios.post('/api/mailbox/detail', { id: mailID }).then(res => { |
||||||
|
console.log(res.data); |
||||||
|
}).catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
</script> --> |
||||||
|
<script> |
||||||
|
import router from '../router'; |
||||||
|
import { getdetail } from '@/api/detail' |
||||||
|
import axios from 'axios'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
mailID:router.currentRoute.value.params.id, |
||||||
|
form: { |
||||||
|
id: '', |
||||||
|
date: '', |
||||||
|
contactName: '', |
||||||
|
contactPhone: '', |
||||||
|
contactIdCard: '', |
||||||
|
content: '', |
||||||
|
satisfaction: '', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
axios.post('/api/mailbox/detail', { id: this.mailID }).then(res => { |
||||||
|
this.form = res.data |
||||||
|
if(res.data.satisfaction == "SATISFIED"){ |
||||||
|
this.form.satisfaction = "满意" |
||||||
|
}else if(res.data.satisfaction == "NOT_SATISFIED"){ |
||||||
|
this.form.satisfaction = "不满意" |
||||||
|
}else if(res.data.satisfaction == "BASICALLY_SATISFIED"){ |
||||||
|
this.form.satisfaction = "基本满意" |
||||||
|
}else{ |
||||||
|
this.form.satisfaction = "暂无评价" |
||||||
|
} |
||||||
|
}).catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
back() { |
||||||
|
router.push('/mailbox') |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.detail-list .el-form-item__label{ |
||||||
|
margin-left:20px ; |
||||||
|
width: 200px; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,204 @@ |
|||||||
|
<template> |
||||||
|
<el-form :model="form" label-width="100px" :inline="true"> |
||||||
|
<el-form-item label="来信时间"> |
||||||
|
<el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="群众姓名"> |
||||||
|
<el-input v-model="form.contactName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="群众手机号"> |
||||||
|
<el-input v-model="form.contactPhone"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="群众身份证号"> |
||||||
|
<el-input v-model="form.contactIdCard"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="案件编号"> |
||||||
|
<el-input v-model="form.id"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="信件内容"> |
||||||
|
<el-input v-model="form.content"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="评价结果"> |
||||||
|
<el-input v-model="form.evaluate"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="search">搜索</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="default" @click="reset">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<el-button type="primary" @click="out">导出信件</el-button> |
||||||
|
<el-table :data="tableData" border height="680px" table-layout="fixed" |
||||||
|
:header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }"> |
||||||
|
<el-table-column fixed="left" prop="id" label="案件编号" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="createTime" label="来信日期" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contactName" label="联系人姓名" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contactIdCard" label="联系人身份证号码" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contactPhone" label="联系人手机号码" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="content" label="信件内容" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="evaluate" label="评价结果" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column fixed="right" label="详情" width="100"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-button @click="handleDetail(scope.$index + 1)">详情</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" |
||||||
|
:current-page="pageData.currentPage" :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageData.pageSize" |
||||||
|
layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize"> |
||||||
|
</el-pagination> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
import axios from 'axios' |
||||||
|
import { onMounted, onUpdated } from 'vue'; |
||||||
|
import router from '../router'; |
||||||
|
|
||||||
|
const form = ref({ |
||||||
|
date: '', |
||||||
|
contactName: '', |
||||||
|
contactPhone: '', |
||||||
|
contactIdCard: '', |
||||||
|
id: '', |
||||||
|
content: '', |
||||||
|
evaluate: '' |
||||||
|
}) |
||||||
|
|
||||||
|
// 定义可变的tableData变量，并用axios请求数据 |
||||||
|
const tableData = ref([]) |
||||||
|
|
||||||
|
const pageData = ref({ |
||||||
|
currentPage: 1, |
||||||
|
pageSize: 2, |
||||||
|
totalSize: 0 |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
const data = JSON.stringify(pageData.value) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
console.log(response); |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
}) |
||||||
|
|
||||||
|
onUpdated(() => { |
||||||
|
console.log('updated') |
||||||
|
}) |
||||||
|
|
||||||
|
const flexColumnWidth = (label, prop) => { |
||||||
|
const width = Math.max(label.length * 12, 120) |
||||||
|
return `${width}px` |
||||||
|
} |
||||||
|
|
||||||
|
const handleDetail = (index) => { |
||||||
|
console.log(index) |
||||||
|
console.log(tableData.value[index - 1].id) |
||||||
|
router.push('/mailbox/detail/' + tableData.value[index - 1].id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleSizeChange = (size) => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
pageData.value.pageSize = size |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
const handlePageChange = (currentPage) => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
pageData.value.currentPage = currentPage |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
const search = () => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
const reset = () => { |
||||||
|
form.value = { |
||||||
|
date: '', |
||||||
|
name: '', |
||||||
|
phone: '', |
||||||
|
id_card: '', |
||||||
|
mail_id: '', |
||||||
|
mail_context: '', |
||||||
|
mail_appraise: '' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const out = () => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/exportexcel', data, { headers: { 'Content-Type': 'application/json'},responseType: 'blob' }).then(function (res) { |
||||||
|
var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8'}) |
||||||
|
var contentDisposition = res.headers['content-disposition'] |
||||||
|
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*') |
||||||
|
var result = patt.exec(contentDisposition) |
||||||
|
var filename = result[1] |
||||||
|
var downloadElement = document.createElement('a') |
||||||
|
var href = window.URL.createObjectURL(blob) // 创建下载的链接 |
||||||
|
var reg = /^["](.*)["]$/g |
||||||
|
downloadElement.style.display = 'none' |
||||||
|
downloadElement.href = href |
||||||
|
downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名 |
||||||
|
document.body.appendChild(downloadElement) |
||||||
|
downloadElement.click() // 点击下载 |
||||||
|
document.body.removeChild(downloadElement) // 下载完成移除元素 |
||||||
|
window.URL.revokeObjectURL(href) |
||||||
|
}) |
||||||
|
|
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
Loading…
Reference in new issue