From 7a5c6528e208517bfc807e6f41185fd212ef35c0 Mon Sep 17 00:00:00 2001
From: 21819 <tomorasd@foxmail.com>
Date: Mon, 29 Jan 2024 17:45:44 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=80=BB=E8=BE=91=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=EF=BC=8C=E4=BF=A1=E4=BB=B6=E7=AE=A1=E7=90=86=EF=BC=8C?=
 =?UTF-8?q?=E4=BA=BA=E5=91=98=E7=AE=A1=E7=90=86=E6=98=BE=E7=A4=BA=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoginView.vue  |   5 +
 src/components/ManageMail.vue | 182 ++++++++++++++++-----------------
 src/components/ManageUser.vue | 183 +++++++++++++++++-----------------
 src/layout/Index.vue          |  44 ++++++--
 4 files changed, 226 insertions(+), 188 deletions(-)

diff --git a/src/components/LoginView.vue b/src/components/LoginView.vue
index cac1c37..4f45928 100644
--- a/src/components/LoginView.vue
+++ b/src/components/LoginView.vue
@@ -22,6 +22,7 @@
 import { reactive } from 'vue'
 import axios from 'axios'
 import router from '../router'
+import { ElMessage } from 'element-plus'
 
 const login = reactive({
     account: '',
@@ -35,9 +36,11 @@ const inputCheck = () => {
 
 const sendCaptcha = () => {
     axios.post('/api/captcha', login, { headers: { 'Content-Type': 'application/json' } }).then(res => {
+        ElMessage.success('验证码发送成功')
         console.log(res)
         login.captcha = res.data
     }).catch(err => {
+        ElMessage.error('验证码发送失败')
         console.log(err)
     })
 }
@@ -47,9 +50,11 @@ const loginIn = () => {
         console.log(res)
         if (res.data === 200) {
             sessionStorage.setItem('user', login.account)
+            ElMessage.success('登录成功')
             router.push('/')
         }
     }).catch(err => {
+        ElMessage.error('登录失败')
         console.log(err)
     })
 }
diff --git a/src/components/ManageMail.vue b/src/components/ManageMail.vue
index 99c306f..951d02e 100644
--- a/src/components/ManageMail.vue
+++ b/src/components/ManageMail.vue
@@ -1,95 +1,97 @@
 <template>
-    <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-input v-model="form.contactName" placeholder="请输入群众姓名" max-length="200px"></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>
+    <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-input v-model="form.contactName" placeholder="请输入群众姓名" max-length="200px"></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>
 
-    <div class="table-box" ref="tableBoxHeight">
-        <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="案件编号" width="200px">
-            </el-table-column>
-            <el-table-column prop="createTime" label="来信日期" width="120px">
-            </el-table-column>
-            <el-table-column prop="contactName" label="联系人姓名" width="100px">
-            </el-table-column>
-            <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
-            <el-table-column prop="contactIdCard" label="联系人身份证号码" width="300px">
-            </el-table-column>
-            <el-table-column prop="contactPhone" label="联系人手机号码" width="200px">
-            </el-table-column>
-            <el-table-column prop="content" label="信件内容" width="400px" :show-overflow-tooltip="true">
-            </el-table-column>
-            <el-table-column prop="satisfaction" label="评价结果" width="100px">
-            </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>
-        <div style="display: flex; justify-content: center;">
-            <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 class="table-box" ref="tableBoxHeight">
+            <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="案件编号" width="200px">
+                </el-table-column>
+                <el-table-column prop="createTime" label="来信日期" width="120px">
+                </el-table-column>
+                <el-table-column prop="contactName" label="联系人姓名" width="100px">
+                </el-table-column>
+                <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
+                <el-table-column prop="contactIdCard" label="联系人身份证号码" width="300px">
+                </el-table-column>
+                <el-table-column prop="contactPhone" label="联系人手机号码" width="200px">
+                </el-table-column>
+                <el-table-column prop="content" label="信件内容" width="400px" :show-overflow-tooltip="true">
+                </el-table-column>
+                <el-table-column prop="satisfaction" label="评价结果" width="100px">
+                </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>
+            <div style="display: flex; justify-content: center;">
+                <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>
     </div>
 </template>
diff --git a/src/components/ManageUser.vue b/src/components/ManageUser.vue
index 633586f..3f829fd 100644
--- a/src/components/ManageUser.vue
+++ b/src/components/ManageUser.vue
@@ -1,95 +1,98 @@
 <template>
-    <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-input v-model="form.realName" placeholder="请输入群众姓名" max-length="200px"></el-input>
-                </el-form-item>
-            </el-col>
-            <el-col :span="6">
-                <el-form-item label="群众手机号">
-                    <el-input v-model="form.phone" placeholder="请输入群众手机号"></el-input>
-                </el-form-item>
-            </el-col>
-            <el-col :span="6">
-                <el-form-item label="群众身份证号">
-                    <el-input v-model="form.idCard" placeholder="请输入群众身份证号"></el-input>
-                </el-form-item>
-            </el-col>
-            <el-col :span="3"></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="newUser = true" class="under-btn">新增用户</el-button></el-col>
-                    <el-dialog v-model="newUser" title="新增用户" width="40%">
-                        <el-form :model="newForm" label-width="150px">
-                            <el-form-item label="新管理员姓名">
-                                <el-input v-model="newForm.realName" placeholder="请输入新管理员姓名" max-length="200px"></el-input>
-                            </el-form-item>
-                            <el-form-item label="新管理员手机号">
-                                <el-input v-model="newForm.phone" placeholder="请输入新管理员手机号"></el-input>
-                            </el-form-item>
-                            <el-form-item label="新管理员身份证号">
-                                <el-input v-model="newForm.idCard" placeholder="请输入新管理员身份证号"></el-input>
-                            </el-form-item></el-form>
-                        <template #footer>
-                            <span class="dialog-footer">
-                                <el-button @click="cancleNewUser">取消</el-button>
-                                <el-button type="primary" @click="submitNewUser">
-                                    提交
-                                </el-button>
-                            </span>
-                        </template>
-                    </el-dialog>
-                </el-row>
-            </el-col>
-        </el-row>
-    </el-form>
+    <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-input v-model="form.realName" placeholder="请输入群众姓名" max-length="200px"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="群众手机号">
+                        <el-input v-model="form.phone" placeholder="请输入群众手机号"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="群众身份证号">
+                        <el-input v-model="form.idCard" placeholder="请输入群众身份证号"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="3"></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="newUser = true" class="under-btn">新增用户</el-button></el-col>
+                        <el-dialog v-model="newUser" title="新增用户" width="40%">
+                            <el-form :model="newForm" label-width="150px">
+                                <el-form-item label="新管理员姓名">
+                                    <el-input v-model="newForm.realName" placeholder="请输入新管理员姓名"
+                                        max-length="200px"></el-input>
+                                </el-form-item>
+                                <el-form-item label="新管理员手机号">
+                                    <el-input v-model="newForm.phone" placeholder="请输入新管理员手机号"></el-input>
+                                </el-form-item>
+                                <el-form-item label="新管理员身份证号">
+                                    <el-input v-model="newForm.idCard" placeholder="请输入新管理员身份证号"></el-input>
+                                </el-form-item></el-form>
+                            <template #footer>
+                                <span class="dialog-footer">
+                                    <el-button @click="cancleNewUser">取消</el-button>
+                                    <el-button type="primary" @click="submitNewUser">
+                                        提交
+                                    </el-button>
+                                </span>
+                            </template>
+                        </el-dialog>
+                    </el-row>
+                </el-col>
+            </el-row>
+        </el-form>
 
-    <div class="table-box" ref="tableBoxHeight">
-        <el-table :data="tableData" border :height="tableHeight" table-layout="fixed"
-            :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
-            <el-table-column prop="createTime" label="用户创建日期" width="120px">
-            </el-table-column>
-            <el-table-column prop="realName" label="联系人姓名" width="100px">
-            </el-table-column>
-            <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
-            <el-table-column prop="idCard" label="联系人身份证号码" width="300px">
-            </el-table-column>
-            <el-table-column prop="phone" label="联系人手机号码" width="200px">
-            </el-table-column>
-            <el-table-column fixed="right" label="详情" width="100">
-                <template v-slot="scope">
-                    <el-popconfirm title="你确定要删除这个管理员吗？" @confirm="handleDelete(scope.$index + 1)">
-                        <template #reference>
-                            <el-button type="danger">删除</el-button>
-                        </template>
-                    </el-popconfirm>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div style="display: flex; justify-content: center;">
-            <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 class="table-box" ref="tableBoxHeight">
+            <el-table :data="tableData" border :height="tableHeight" table-layout="fixed"
+                :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
+                <el-table-column prop="createTime" label="用户创建日期" width="120px">
+                </el-table-column>
+                <el-table-column prop="realName" label="联系人姓名" width="100px">
+                </el-table-column>
+                <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
+                <el-table-column prop="idCard" label="联系人身份证号码" width="300px">
+                </el-table-column>
+                <el-table-column prop="phone" label="联系人手机号码" width="200px">
+                </el-table-column>
+                <el-table-column fixed="right" label="详情" width="100">
+                    <template v-slot="scope">
+                        <el-popconfirm title="你确定要删除这个管理员吗？" @confirm="handleDelete(scope.$index + 1)">
+                            <template #reference>
+                                <el-button type="danger">删除</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div style="display: flex; justify-content: center;">
+                <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>
     </div>
 </template>
diff --git a/src/layout/Index.vue b/src/layout/Index.vue
index 7c2e4b9..e0742fe 100644
--- a/src/layout/Index.vue
+++ b/src/layout/Index.vue
@@ -1,10 +1,11 @@
 <template>
     <header class="flex v-center between">
-        <div>
+        <div style="display: inline-flex;align-items: center;justify-content: center;height: 100%;">
+            <el-image src="public\police-icon.png" style="width: 40px;height: 40px;margin-right: 10px;"></el-image>
             <div class="title"><a href="">局长信箱即接即办管理端</a></div>
         </div>
         <div>
-            <el-button type="primary" @click="router.push('/login')">退出</el-button>
+            <el-button type="primary" @click="logout">退出</el-button>
         </div>
     </header>
     <div class="flex">
@@ -12,19 +13,27 @@
 
             <nav>
                 <a class="flex v-center center wrap pointer" @click="router.push('/')">
-                    <el-icon><HomeFilled /></el-icon>
+                    <el-icon>
+                        <HomeFilled />
+                    </el-icon>
                     <span>首页</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/holiday')">
-                    <el-icon><Platform /></el-icon>
+                    <el-icon>
+                        <Platform />
+                    </el-icon>
                     <span>节假日管理</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/mailbox')">
-                    <el-icon><Menu /></el-icon>
+                    <el-icon>
+                        <Menu />
+                    </el-icon>
                     <span>信件管理</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/user')">
-                    <el-icon><User /></el-icon>
+                    <el-icon>
+                        <User />
+                    </el-icon>
                     <span>人员管理</span>
                 </a>
             </nav>
@@ -33,46 +42,65 @@
     </div>
 </template>
 <script setup>
-import { HomeFilled, Platform, Setting, Menu, User} from '@element-plus/icons-vue'
+import { HomeFilled, Platform, Setting, Menu, User } from '@element-plus/icons-vue'
 
 import { useRouter } from "vue-router";
 
+import axios from 'axios';
+import { ElMessage } from 'element-plus'
+
 const router = useRouter();
 
+const logout = () => {
+    sessionStorage.removeItem('user');
+    axios.post('/api/logout')
+        .then((res) => { if (res.data === 200) { ElMessage.success('登出成功'); } })
+        .catch((e) => { console.log(e) });
+    router.push('/login');
+}
+
 </script>
 <style lang="scss" scoped>
 :root {
     --header-height: 80px;
 }
+
 header {
     background-color: #162582;
     color: #fff;
     height: var(--header-height);
     padding: 0 20px;
+
     .title {
         font-size: 28px;
+
         a {
             text-decoration: none;
             color: inherit;
         }
     }
 }
+
 aside {
     background-color: #071254;
     color: #fff;
     width: 100px;
     height: calc(100vh - var(--header-height));
+
     nav {
         a {
             height: 100px;
             color: #707ab6;
+
             &:hover {
                 color: #fff;
             }
+
             .el-icon {
                 font-size: 50px;
-                
+
             }
+
             span {
                 width: 100%;
                 text-align: center;