From 9d72157295feee4ceeea7c703ad03cdbcb0b8cd0 Mon Sep 17 00:00:00 2001
From: 21819 <tomorasd@foxmail.com>
Date: Sat, 20 Jan 2024 21:05:11 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2UI=E8=B0=83=E6=95=B4=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E5=90=8E=E7=BB=AD=E9=9C=80=E6=B1=82=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ManageMail.vue | 147 ++++++++++++++++++++++++----------
 1 file changed, 104 insertions(+), 43 deletions(-)

diff --git a/src/components/ManageMail.vue b/src/components/ManageMail.vue
index d2912ba..91eb36a 100644
--- a/src/components/ManageMail.vue
+++ b/src/components/ManageMail.vue
@@ -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-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 :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" placeholder="请输入群众姓名"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="群众手机号">
+                    <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" 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" 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" 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" type="textarea" placeholder="请输入评价结果"
+                        :autosize="{ minRows: 1, maxRows: 6 }" resize="none" style="width: 100%;"></el-input>
+                </el-form-item>
+            </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>
\ No newline at end of file
+<style scoped>
+.under-btn {
+    margin-right: 30px;
+    margin-bottom: 5px;
+}
+</style>
\ No newline at end of file