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