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

登录逻辑修改，信件管理，人员管理显示界面样式调整

厅长信箱
21819 2 years ago
parent
b5463a75d3
commit
7a5c6528e2
4 changed files with 226 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/components/LoginView.vue
  2. 182
      src/components/ManageMail.vue
  3. 183
      src/components/ManageUser.vue
  4. 44
      src/layout/Index.vue

5
src/components/LoginView.vue
Unescape View File

@ -22,6 +22,7 @@
import { reactive } from 'vue' import { reactive } from 'vue'
import axios from 'axios' import axios from 'axios'
import router from '../router' import router from '../router'
import { ElMessage } from 'element-plus'
const login = reactive({ const login = reactive({
account: '', account: '',
@ -35,9 +36,11 @@ const inputCheck = () => {
const sendCaptcha = () => { const sendCaptcha = () => {
axios.post('/api/captcha', login, { headers: { 'Content-Type': 'application/json' } }).then(res => { axios.post('/api/captcha', login, { headers: { 'Content-Type': 'application/json' } }).then(res => {
ElMessage.success('验证码发送成功')
console.log(res) console.log(res)
login.captcha = res.data login.captcha = res.data
}).catch(err => { }).catch(err => {
ElMessage.error('验证码发送失败')
console.log(err) console.log(err)
}) })
} }
@ -47,9 +50,11 @@ const loginIn = () => {
console.log(res) console.log(res)
if (res.data === 200) { if (res.data === 200) {
sessionStorage.setItem('user', login.account) sessionStorage.setItem('user', login.account)
ElMessage.success('登录成功')
router.push('/') router.push('/')
} }
}).catch(err => { }).catch(err => {
ElMessage.error('登录失败')
console.log(err) console.log(err)
}) })
} }

182
src/components/ManageMail.vue
Unescape View File

@ -1,95 +1,97 @@
<template> <template>
<el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;"> <div style="width: 90vw;margin: 0 auto;">
<el-row> <el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;">
<el-col :span="6"> <el-row>
<el-form-item label="群众姓名"> <el-col :span="6">
<el-input v-model="form.contactName" placeholder="请输入群众姓名" max-length="200px"></el-input> <el-form-item label="群众姓名">
</el-form-item> <el-input v-model="form.contactName" placeholder="请输入群众姓名" max-length="200px"></el-input>
</el-col> </el-form-item>
<el-col :span="6"> </el-col>
<el-form-item label="群众手机号"> <el-col :span="6">
<el-input v-model="form.contactPhone" placeholder="请输入群众手机号"></el-input> <el-form-item label="群众手机号">
</el-form-item> <el-input v-model="form.contactPhone" placeholder="请输入群众手机号"></el-input>
</el-col> </el-form-item>
<el-col :span="6"> </el-col>
<el-form-item label="群众身份证号"> <el-col :span="6">
<el-input v-model="form.contactIdCard" placeholder="请输入群众身份证号"></el-input> <el-form-item label="群众身份证号">
</el-form-item> <el-input v-model="form.contactIdCard" placeholder="请输入群众身份证号"></el-input>
</el-col> </el-form-item>
<el-col :span="3"></el-col> </el-col>
</el-row> <el-col :span="3"></el-col>
<el-row> </el-row>
<el-col :span="6"> <el-row>
<el-form-item label="案件编号"> <el-col :span="6">
<el-input v-model="form.id" placeholder="请输入案件编号"></el-input> <el-form-item label="案件编号">
</el-form-item> <el-input v-model="form.id" placeholder="请输入案件编号"></el-input>
</el-col> </el-form-item>
<el-col :span="6" :style="{ flex: '1' }"> </el-col>
<el-form-item label="信件内容"> <el-col :span="6" :style="{ flex: '1' }">
<el-input v-model="form.content" type="textarea" placeholder="请输入信件内容" <el-form-item label="信件内容">
:autosize="{ minRows: 1, maxRows: 6 }" resize="none" style="width: 100%;"></el-input> <el-input v-model="form.content" type="textarea" placeholder="请输入信件内容"
</el-form-item></el-col> :autosize="{ minRows: 1, maxRows: 6 }" resize="none" style="width: 100%;"></el-input>
<el-col :span="6" :style="{ flex: '1' }"> </el-form-item></el-col>
<el-form-item label="评价结果"> <el-col :span="6" :style="{ flex: '1' }">
<el-input v-model="form.evaluate" type="textarea" placeholder="请输入评价结果" <el-form-item label="评价结果">
:autosize="{ minRows: 1, maxRows: 6 }" resize="none" style="width: 100%;"></el-input> <el-input v-model="form.evaluate" type="textarea" placeholder="请输入评价结果"
</el-form-item> :autosize="{ minRows: 1, maxRows: 6 }" resize="none" style="width: 100%;"></el-input>
</el-col> </el-form-item>
</el-row> </el-col>
<el-row type="flex"> </el-row>
<el-col :span="8"> <el-row type="flex">
<el-form-item label="来信时间"> <el-col :span="8">
<el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期" <el-form-item label="来信时间">
end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker> <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
</el-form-item> end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> </el-row>
<el-col :span="14"> <el-row>
</el-col> <el-col :span="14">
<el-col :span="8" :style="{ display: 'inline-flex', alignItems: 'center' }"> </el-col>
<el-row> <el-col :span="8" :style="{ display: 'inline-flex', alignItems: 'center' }">
<el-col :span="6"></el-col> <el-row>
<el-col :span="6"> <el-col :span="6"></el-col>
<el-button type="primary" @click="search" class="under-btn">搜索</el-button></el-col> <el-col :span="6">
<el-col :span="6"> <el-button type="primary" @click="search" class="under-btn">搜索</el-button></el-col>
<el-button type="default" @click="reset" class="under-btn">重置</el-button></el-col> <el-col :span="6">
<el-col :span="6"> <el-button type="default" @click="reset" class="under-btn">重置</el-button></el-col>
<el-button type="primary" @click="out" class="under-btn">导出信件</el-button></el-col> <el-col :span="6">
</el-row> <el-button type="primary" @click="out" class="under-btn">导出信件</el-button></el-col>
</el-col> </el-row>
</el-row> </el-col>
</el-form> </el-row>
</el-form>
<div class="table-box" ref="tableBoxHeight"> <div class="table-box" ref="tableBoxHeight">
<el-table :data="tableData" border :height="tableHeight" table-layout="fixed" <el-table :data="tableData" border :height="tableHeight" table-layout="fixed"
:header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }"> :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
<el-table-column fixed="left" prop="id" label="案件编号" width="200px"> <el-table-column fixed="left" prop="id" label="案件编号" width="200px">
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="来信日期" width="120px"> <el-table-column prop="createTime" label="来信日期" width="120px">
</el-table-column> </el-table-column>
<el-table-column prop="contactName" label="联系人姓名" width="100px"> <el-table-column prop="contactName" label="联系人姓名" width="100px">
</el-table-column> </el-table-column>
<!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 --> <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
<el-table-column prop="contactIdCard" label="联系人身份证号码" width="300px"> <el-table-column prop="contactIdCard" label="联系人身份证号码" width="300px">
</el-table-column> </el-table-column>
<el-table-column prop="contactPhone" label="联系人手机号码" width="200px"> <el-table-column prop="contactPhone" label="联系人手机号码" width="200px">
</el-table-column> </el-table-column>
<el-table-column prop="content" label="信件内容" width="400px" :show-overflow-tooltip="true"> <el-table-column prop="content" label="信件内容" width="400px" :show-overflow-tooltip="true">
</el-table-column> </el-table-column>
<el-table-column prop="satisfaction" label="评价结果" width="100px"> <el-table-column prop="satisfaction" label="评价结果" width="100px">
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="详情" width="100"> <el-table-column fixed="right" label="详情" width="100">
<template v-slot="scope"> <template v-slot="scope">
<el-button @click="handleDetail(scope.$index + 1)">详情</el-button> <el-button @click="handleDetail(scope.$index + 1)">详情</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="display: flex; justify-content: center;"> <div style="display: flex; justify-content: center;">
<el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
:current-page="pageData.currentPage" :page-sizes="[4, 10, 20, 40, 50]" :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"> layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize">
</el-pagination> </el-pagination>
</div>
</div> </div>
</div> </div>
</template> </template>

183
src/components/ManageUser.vue
Unescape View File

@ -1,95 +1,98 @@
<template> <template>
<el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;"> <div style="width: 90vw; margin: 0 auto;">
<el-row> <el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;">
<el-col :span="6"> <el-row>
<el-form-item label="群众姓名"> <el-col :span="6">
<el-input v-model="form.realName" placeholder="请输入群众姓名" max-length="200px"></el-input> <el-form-item label="群众姓名">
</el-form-item> <el-input v-model="form.realName" placeholder="请输入群众姓名" max-length="200px"></el-input>
</el-col> </el-form-item>
<el-col :span="6"> </el-col>
<el-form-item label="群众手机号"> <el-col :span="6">
<el-input v-model="form.phone" placeholder="请输入群众手机号"></el-input> <el-form-item label="群众手机号">
</el-form-item> <el-input v-model="form.phone" placeholder="请输入群众手机号"></el-input>
</el-col> </el-form-item>
<el-col :span="6"> </el-col>
<el-form-item label="群众身份证号"> <el-col :span="6">
<el-input v-model="form.idCard" placeholder="请输入群众身份证号"></el-input> <el-form-item label="群众身份证号">
</el-form-item> <el-input v-model="form.idCard" placeholder="请输入群众身份证号"></el-input>
</el-col> </el-form-item>
<el-col :span="3"></el-col> </el-col>
</el-row> <el-col :span="3"></el-col>
<el-row type="flex"> </el-row>
<el-col :span="8"> <el-row type="flex">
<el-form-item label="创建时间"> <el-col :span="8">
<el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期" <el-form-item label="创建时间">
end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker> <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
</el-form-item> end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> </el-row>
<el-col :span="14"> <el-row>
</el-col> <el-col :span="14">
<el-col :span="8" :style="{ display: 'inline-flex', alignItems: 'center' }"> </el-col>
<el-row> <el-col :span="8" :style="{ display: 'inline-flex', alignItems: 'center' }">
<el-col :span="6"></el-col> <el-row>
<el-col :span="6"> <el-col :span="6"></el-col>
<el-button type="primary" @click="search" class="under-btn">搜索</el-button></el-col> <el-col :span="6">
<el-col :span="6"> <el-button type="primary" @click="search" class="under-btn">搜索</el-button></el-col>
<el-button type="default" @click="reset" class="under-btn">重置</el-button></el-col> <el-col :span="6">
<el-col :span="6"> <el-button type="default" @click="reset" class="under-btn">重置</el-button></el-col>
<el-button type="primary" @click="newUser = true" class="under-btn">新增用户</el-button></el-col> <el-col :span="6">
<el-dialog v-model="newUser" title="新增用户" width="40%"> <el-button type="primary" @click="newUser = true" class="under-btn">新增用户</el-button></el-col>
<el-form :model="newForm" label-width="150px"> <el-dialog v-model="newUser" title="新增用户" width="40%">
<el-form-item label="新管理员姓名"> <el-form :model="newForm" label-width="150px">
<el-input v-model="newForm.realName" placeholder="请输入新管理员姓名" max-length="200px"></el-input> <el-form-item label="新管理员姓名">
</el-form-item> <el-input v-model="newForm.realName" placeholder="请输入新管理员姓名"
<el-form-item label="新管理员手机号"> max-length="200px"></el-input>
<el-input v-model="newForm.phone" placeholder="请输入新管理员手机号"></el-input> </el-form-item>
</el-form-item> <el-form-item label="新管理员手机号">
<el-form-item label="新管理员身份证号"> <el-input v-model="newForm.phone" placeholder="请输入新管理员手机号"></el-input>
<el-input v-model="newForm.idCard" placeholder="请输入新管理员身份证号"></el-input> </el-form-item>
</el-form-item></el-form> <el-form-item label="新管理员身份证号">
<template #footer> <el-input v-model="newForm.idCard" placeholder="请输入新管理员身份证号"></el-input>
<span class="dialog-footer"> </el-form-item></el-form>
<el-button @click="cancleNewUser">取消</el-button> <template #footer>
<el-button type="primary" @click="submitNewUser"> <span class="dialog-footer">
提交 <el-button @click="cancleNewUser">取消</el-button>
</el-button> <el-button type="primary" @click="submitNewUser">
</span> 提交
</template> </el-button>
</el-dialog> </span>
</el-row> </template>
</el-col> </el-dialog>
</el-row> </el-row>
</el-form> </el-col>
</el-row>
</el-form>
<div class="table-box" ref="tableBoxHeight"> <div class="table-box" ref="tableBoxHeight">
<el-table :data="tableData" border :height="tableHeight" table-layout="fixed" <el-table :data="tableData" border :height="tableHeight" table-layout="fixed"
:header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }"> :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
<el-table-column prop="createTime" label="用户创建日期" width="120px"> <el-table-column prop="createTime" label="用户创建日期" width="120px">
</el-table-column> </el-table-column>
<el-table-column prop="realName" label="联系人姓名" width="100px"> <el-table-column prop="realName" label="联系人姓名" width="100px">
</el-table-column> </el-table-column>
<!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 --> <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
<el-table-column prop="idCard" label="联系人身份证号码" width="300px"> <el-table-column prop="idCard" label="联系人身份证号码" width="300px">
</el-table-column> </el-table-column>
<el-table-column prop="phone" label="联系人手机号码" width="200px"> <el-table-column prop="phone" label="联系人手机号码" width="200px">
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="详情" width="100"> <el-table-column fixed="right" label="详情" width="100">
<template v-slot="scope"> <template v-slot="scope">
<el-popconfirm title="你确定要删除这个管理员吗？" @confirm="handleDelete(scope.$index + 1)"> <el-popconfirm title="你确定要删除这个管理员吗？" @confirm="handleDelete(scope.$index + 1)">
<template #reference> <template #reference>
<el-button type="danger">删除</el-button> <el-button type="danger">删除</el-button>
</template> </template>
</el-popconfirm> </el-popconfirm>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="display: flex; justify-content: center;"> <div style="display: flex; justify-content: center;">
<el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
:current-page="pageData.currentPage" :page-sizes="[4, 10, 20, 40, 50]" :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"> layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize">
</el-pagination> </el-pagination>
</div>
</div> </div>
</div> </div>
</template> </template>

44
src/layout/Index.vue
Unescape View File

@ -1,10 +1,11 @@
<template> <template>
<header class="flex v-center between"> <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 class="title"><a href="">局长信箱即接即办管理端</a></div>
</div> </div>
<div> <div>
<el-button type="primary" @click="router.push('/login')">退出</el-button> <el-button type="primary" @click="logout">退出</el-button>
</div> </div>
</header> </header>
<div class="flex"> <div class="flex">
@ -12,19 +13,27 @@
<nav> <nav>
<a class="flex v-center center wrap pointer" @click="router.push('/')"> <a class="flex v-center center wrap pointer" @click="router.push('/')">
<el-icon><HomeFilled /></el-icon> <el-icon>
<HomeFilled />
</el-icon>
<span>首页</span> <span>首页</span>
</a> </a>
<a class="flex v-center center wrap pointer" @click="router.push('/holiday')"> <a class="flex v-center center wrap pointer" @click="router.push('/holiday')">
<el-icon><Platform /></el-icon> <el-icon>
<Platform />
</el-icon>
<span>节假日管理</span> <span>节假日管理</span>
</a> </a>
<a class="flex v-center center wrap pointer" @click="router.push('/mailbox')"> <a class="flex v-center center wrap pointer" @click="router.push('/mailbox')">
<el-icon><Menu /></el-icon> <el-icon>
<Menu />
</el-icon>
<span>信件管理</span> <span>信件管理</span>
</a> </a>
<a class="flex v-center center wrap pointer" @click="router.push('/user')"> <a class="flex v-center center wrap pointer" @click="router.push('/user')">
<el-icon><User /></el-icon> <el-icon>
<User />
</el-icon>
<span>人员管理</span> <span>人员管理</span>
</a> </a>
</nav> </nav>
@ -33,46 +42,65 @@
</div> </div>
</template> </template>
<script setup> <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 { useRouter } from "vue-router";
import axios from 'axios';
import { ElMessage } from 'element-plus'
const router = useRouter(); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:root { :root {
--header-height: 80px; --header-height: 80px;
} }
header { header {
background-color: #162582; background-color: #162582;
color: #fff; color: #fff;
height: var(--header-height); height: var(--header-height);
padding: 0 20px; padding: 0 20px;
.title { .title {
font-size: 28px; font-size: 28px;
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
} }
} }
aside { aside {
background-color: #071254; background-color: #071254;
color: #fff; color: #fff;
width: 100px; width: 100px;
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
nav { nav {
a { a {
height: 100px; height: 100px;
color: #707ab6; color: #707ab6;
&:hover { &:hover {
color: #fff; color: #fff;
} }
.el-icon { .el-icon {
font-size: 50px; font-size: 50px;
} }
span { span {
width: 100%; width: 100%;
text-align: center; text-align: center;

Write Preview
Loading…
Cancel
Save