police-mailbox
/
mailbox-outer-admin-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

界面UI调整以及后续需求添加

dev_ycq
21819 2 years ago
parent
e6b345f71c
commit
9d72157295
1 changed files with 104 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 123
      src/components/ManageMail.vue

123
src/components/ManageMail.vue
Unescape View File

@ -1,51 +1,91 @@
<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 :model="form" label-width="200px" style="margin-top: 20px; margin-left: -50px;">
<el-row>
<el-col :span="6">
<el-form-item label="群众姓名">
<el-input v-model="form.contactName"></el-input>
<el-input v-model="form.contactName" placeholder="请输入群众姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="群众手机号">
<el-input v-model="form.contactPhone"></el-input>
<el-input v-model="form.contactPhone" placeholder="请输入群众手机号"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="群众身份证号">
<el-input v-model="form.contactIdCard"></el-input>
<el-input v-model="form.contactIdCard" placeholder="请输入群众身份证号"></el-input>
</el-form-item>
</el-col>
<el-col :span="3"></el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="案件编号">
<el-input v-model="form.id"></el-input>
<el-input v-model="form.id" placeholder="请输入案件编号"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :style="{ flex: '1' }">
<el-form-item label="信件内容">
<el-input v-model="form.content"></el-input>
</el-form-item>
<el-input v-model="form.content" type="textarea" placeholder="请输入信件内容"
:autosize="{ minRows: 1, maxRows: 6 }" resize="none" style="width: 100%;"></el-input>
</el-form-item></el-col>
<el-col :span="6" :style="{ flex: '1' }">
<el-form-item label="评价结果">
<el-input v-model="form.evaluate"></el-input>
<el-input v-model="form.evaluate" type="textarea" placeholder="请输入评价结果"
:autosize="{ minRows: 1, maxRows: 6 }" resize="none" style="width: 100%;"></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-col>
</el-row>
<el-row type="flex">
<el-col :span="8">
<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-col>
</el-row>
<el-row>
<el-col :span="14">
</el-col>
<el-col :span="8" :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" @click="reset" class="under-btn">重置</el-button></el-col>
<el-col :span="6">
<el-button type="primary" @click="out" class="under-btn">导出信件</el-button></el-col>
</el-row>
</el-col>
</el-row>
</el-form>
<el-button type="primary" @click="out">导出信件</el-button>
<el-table :data="tableData" border height="680px" table-layout="fixed"
<el-table :data="tableData" border height="600px" 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 fixed="left" prop="id" label="案件编号" width="200px">
</el-table-column>
<el-table-column prop="createTime" label="来信日期" width="flexColumnWidth(label,prop)">
<el-table-column prop="createTime" label="来信日期" width="120px">
</el-table-column>
<el-table-column prop="contactName" label="联系人姓名" width="flexColumnWidth(label,prop)">
<el-table-column prop="contactName" label="联系人姓名" width="100px">
</el-table-column>
<el-table-column prop="contactIdCard" label="联系人身份证号码" width="flexColumnWidth(label,prop)">
<!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
<el-table-column prop="contactIdCard" label="联系人身份证号码" width="300px">
</el-table-column>
<el-table-column prop="contactPhone" label="联系人手机号码" width="flexColumnWidth(label,prop)">
<el-table-column prop="contactPhone" label="联系人手机号码" width="200px">
</el-table-column>
<el-table-column prop="content" label="信件内容" width="flexColumnWidth(label,prop)">
<el-table-column prop="content" label="信件内容" width="400px" :show-overflow-tooltip="true">
<!-- <template v-slot="scope">
<el-popover trigger="hover" placement="top-start" title="信件内容" width="500"
v-model="scope.row.popoverVisible">
<p>{{ scope.row.content }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.content }}</el-tag>
</div>
</el-popover>
</template> -->
</el-table-column>
<el-table-column prop="evaluate" label="评价结果" width="flexColumnWidth(label,prop)">
<el-table-column prop="evaluate" label="评价结果" width="100px">
</el-table-column>
<el-table-column fixed="right" label="详情" width="100">
<template v-slot="scope">
@ -54,7 +94,7 @@
</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"
: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>
</template>
@ -80,18 +120,25 @@ const tableData = ref([])
const pageData = ref({
currentPage: 1,
pageSize: 2,
pageSize: 4,
totalSize: 0
})
onMounted(() => {
const data = JSON.stringify(pageData.value)
const requestData = {
formData: form.value,
pageData: pageData.value
}
const data = JSON.stringify(requestData)
console.log(data)
axios.post('api/mailbox/list', data, { headers: { 'Content-Type': 'application/json' } })
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
.then(function (response) {
console.log(response);
tableData.value = response.data.mails;
tableData.value.forEach(item => {
item.createTime = item.createTime.split('T')[0]
})
pageData.value.totalSize = response.data.pageSet.totalSize;
})
.catch(function (error) { console.log(error) })
@ -123,6 +170,9 @@ const handleSizeChange = (size) => {
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
.then(function (response) {
tableData.value = response.data.mails;
tableData.value.forEach(item => {
item.createTime = item.createTime.split('T')[0]
})
pageData.value.totalSize = response.data.pageSet.totalSize;
})
.catch(function (error) { console.log(error) })
@ -139,6 +189,9 @@ const handlePageChange = (currentPage) => {
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
.then(function (response) {
tableData.value = response.data.mails;
tableData.value.forEach(item => {
item.createTime = item.createTime.split('T')[0]
})
pageData.value.totalSize = response.data.pageSet.totalSize;
})
.catch(function (error) { console.log(error) })
@ -154,6 +207,9 @@ const search = () => {
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
.then(function (response) {
tableData.value = response.data.mails;
tableData.value.forEach(item => {
item.createTime = item.createTime.split('T')[0]
})
pageData.value.totalSize = response.data.pageSet.totalSize;
})
.catch(function (error) { console.log(error) })
@ -177,4 +233,9 @@ const out = () => {
</script>
<style scoped></style>
<style scoped>
.under-btn {
margin-right: 30px;
margin-bottom: 5px;
}
</style>
Write Preview
Loading…
Cancel
Save