档案管理系统总结
系统背景说明
由于文件多，种类多，文件创建者多，创建时间为不定期，要保护好一些重要的文件极为不便，同时由于人员的流动，对原有的文件的再现，显得力不从心，有时查找与重新整理文件要浪费许多的人力、物力。而且近年来，由于竞争的激烈程度不断的加深，档案的管理不当会严重到导致公司面临着亏损甚至破产的局面。于是公司不断地在探索希望能找到解决的方法。为了解决以上的问题，让公司能够有效的掌握，有效的共享文件资源，保护好文件，及促进档案管理的信息化、规范化和集成化，本人多方听取意见、追加和完善大量实用功能，进而了解文件管理的流程，同时结合各部门、各行业与企业文件管理的方法，开发出一套适合于档案多而复杂的管理系统。
综合描述
- 操作系统：WIN10 64位
- 数据库：MYSQL；
- 服务器：Tomcat；
- 开发语言：JAVA；
- 开发工具：IDEA；
- 架构：SpringMVC+Spring+Mybatis+Shiro+Vue.js+Element Ui
业务描述
员工管理模块
功能描述
系统管理员以可视化的效果维护本系统用户信息，并赋予用户对应的角色权限。
首先根据需求在MySQL数据库里创建t_user表
一.基础组件的创建
1.逆向工程创建 mapper ,domain
generatorConfig.xml
<table tableName="t_user" domainObjectName="System" >
<!-- 参考 javaModelGenerator 的 constructorBased属性 -->
<property name="constructorBased" value="false" />
<generatedKey column="id" sqlStatement="JDBC" />
</table>
2.service层的创建
public interface UserService extends IBaseService<User>{
void updateStateToDisable(Long id);
int deleteByPrimaryKey(Long id);
int insert(T record);
T selectByPrimaryKey(Long id);
int updateByPrimaryKey(T record);
PageResult selectForList(BaseQueryObject qo);
}
二.高级查询分页
1.创建查询的对象
2.service层的创建高级查询分页的方法
public class UserQueryObject extends BaseQueryObject{
//关键字查询
private String keyword;
public String getKeyword() {
if(StringUtils.hasLength(keyword)){
return keyword.trim();
}
return null;
}
public void setKeyword(String keyword) {
this.keyword = keyword;
}
}
3.编写高级查询的分页的sql
public class PageResult {
private long total = 0;
private List rows = new ArrayList();
public PageResult() {
}
public PageResult(long total, List rows) {
this.total = total;
this.rows = rows;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}
4.创建controller
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
/**
* 根据id查询用户
*
*/
@RequestMapping("/getById")
@ResponseBody
public User getById(Long id) {
return userService.selectByPrimaryKey(id);
}
/**
* 用户主界面
*/
@RequestMapping("/index")
public String index(Model model){
return "user";
}
/**
* 用户列表数据
*
*/
@RequestMapping("/list")
@ResponseBody
public PageResult list(UserQueryObject qo){
return userService.selectForList(qo);
}
/**
*
*批量删除
*/
@RequestMapping("/batchDelete")
@ResponseBody
public AjaxResult batchDelete(Long[] ids){
try {
for (Long id : ids) {
userService.deleteByPrimaryKey(id);
}
return AjaxResult.success();
} catch (Exception e){
e.printStackTrace();
return AjaxResult.error(e.getMessage());
}
}
/**
* 用户删除
*/
@RequestMapping("/remove")
@ResponseBody
public AjaxResult remove(Long id){
try {
userService.deleteByPrimaryKey(id);
return AjaxResult.success();
}catch (Exception e){
e.printStackTrace();
return AjaxResult.error("啊,系统异常啦,我们正在殴打程序员O(∩_∩)O~");
}
}
}
5.创建高级查询分页的方法
三.使用Vue.js+Element Ui展示页面,CRUD增删改查功能实现
1.添加功能
JSP部分
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户管理</title>
<jsp:include page="/static/common/common_header.jsp"/>
<style>
#table {
width: 100%;
}
.page {
margin-right: 20px;
float: right;
}
.top {
clear: both;
text-align: center
}
.searchFrom {
margin: 0 auto;
float: none;
}
.el-dialog__body{
padding: 30px 200px 30px 150px;
}
.el-form-item {
margin-bottom: 0px;
margin-top: 20px;
}
.submit{
float: right;
}
.new {
float: right;
margin-right: 5%;
margin-bottom: 0px;
margin-top: 20px;
}
.batchDelete {
margin-left: 5%;
float: left;
margin-top: 20px
}
</style>
</head>
<body>
<div id="table">
<div class="top">
<div class="searchFrom">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="关键字">
<el-input v-model="formInline.user" placeholder="关键字"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit"><i class="el-icon-search"> </i>查询</el-button>
</el-form-item>
<el-button type="primary" class="new" @click="winReload"><i class="el-icon-refresh"> </i>刷新</el-button>
<el-button type="primary" class="new" @click="newUser">
<i class="el-icon-plus"> </i>
新建用户
</el-button>
</el-form>
</div>
</div>
<el-table
:data="tableData"
style="width: 100%"
border="true"
fit="true"
highlight-current-row="true"
stripe="true"
:row-key="getRowKey"
@selection-change="handleSelectionChange"
>
<el-table-column
fixed
prop="id"
label="ID"
align="center"
type="selection"
:reserve-selection="true"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="userName"
label="用户名"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="realName"
label="真实姓名"
min-width="10%"
align="center">
</el-table-column>
<%--<el-table-column--%>
<%--prop="password"--%>
<%--label="密码"--%>
<%--min-width="10%"--%>
<%--align="center">--%>
<%--</el-table-column>--%>
<el-table-column
prop="identity"
label="身份证"
min-width="15%"
align="center">
</el-table-column>
<el-table-column
prop="departIn"
label="所在部门"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="telephone"
label="联系电话"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="education"
label="学历"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="address"
label="地址"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="sex"
label="性别"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="remarks"
label="备注"
min-width="10%"
align="center">
</el-table-column>
<el-table-column
prop="entryTime"
label="入职时间"
value-format="yyyy-MM-dd HH:mm:ss"
min-width="10%"
align="center">
</el-table-column>
<%--<el-table-column--%>
<%--prop="state"--%>
<%--label="状态"--%>
<%--min-width="10%"--%>
<%--align="center">--%>
<%--</el-table-column>--%>
<el-table-column
fixed="right"
label="操作"
min-width="20%"
align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="batchDelete">
<el-button type="danger" @click="batchDelete()"><i class="el-icon-delete"> </i>批量删除</el-button>
</div>
<div id="page" style="margin-top: 20px">
<el-pagination class="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:pager-count="5"
:current-page="currentPage"
:hide-on-single-page="true"
:page-sizes="[5,10,20,40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<el-dialog
title="用户录入"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
:lock-scroll="true"
top="20px"
<%--:show-close="false"--%>
:close-on-press-escape="true"
:before-close="handleDialogClose">
<el-form :model="ruleForm" ref="ruleForm" label-width="250px" class="demo-ruleForm" label-position="left">
<el-form-item label="用户名" prop="userName">
<el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="真实姓名" prop="realName">
<el-input v-model="ruleForm.realName" placeholder="请输入您的真实姓名"></el-input>
</el-form-item>
<el-form-item label="身份证" prop="identity">
<el-input v-model="ruleForm.identity" placeholder="请输入您的身份证号码" ></el-input>
</el-form-item>
<%--<el-form-item label="所在部门" prop="departIn">--%>
<%--<el-input type="text" v-model="ruleForm.departIn" placeholder="所在部门"></el-input>--%>
<%--</el-form-item>--%>
<el-form-item label="所在部门" prop="departIn">
<el-select v-model="ruleForm.departIn" placeholder="请选择用户类型">
<el-option v-for="item in departIn"
:key="item.id"
:label="item.detailName"
:value="item.catalogNum"
></el-option>
</el-select>
</el-form-item>
<%--<el-form-item label="学历" prop="education">--%>
<%--<el-input v-model="ruleForm.education" type="text" placeholder="学历"></el-input>--%>
<%--</el-form-item>--%>
<el-form-item label="学历" prop="education">
<el-select v-model="ruleForm.education" placeholder="请选择用户类型">
<el-option v-for="item in education"
:key="item.id"
:label="item.detailName"
:value="item.catalogNum"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-select v-model="ruleForm.address" placeholder="请选择用户类型">
<el-option v-for="item in address"
:key="item.id"
:label="item.detailName"
:value="item.catalogNum"
></el-option>
</el-select>
</el-form-item>
<%--<el-form-item label="地址" prop="address">--%>
<%--<el-input v-model="ruleForm.address" placeholder="请选择您的地址"></el-input>--%>
<%--</el-form-item>--%>
<%--<el-form-item label="性别" prop="sex">--%>
<%--<el-input v-model="ruleForm.sex" placeholder="性别"></el-input>--%>
<%--</el-form-item>--%>
<el-form-item label="性别" prop="sex">
<el-select v-model="ruleForm.sex" placeholder="请选择用户类型">
<el-option v-for="item in sex"
:key="item.id"
:label="item.detailName"
:value="item.catalogNum"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input v-model="ruleForm.remarks" placeholder="备注"></el-input>
</el-form-item>
<div class="submit">
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-button @click="closeDialog('ruleForm')">取消</el-button>
</el-form-item>
</div>
<br style="clear: both">
</el-form>
</el-dialog>
</div>
</div>
</body>
<script type="text/javascript" src="/static/js/model/user.js"></script>
</html>
JS部分
var table = new Vue({
el: "#table",
data() {
return {
total: 5,
currentPage: 1,
pageSize: 10,
tableData: [],
multipleSelection: [],
formInline: {
user: '',
region: ''
},
dialogFormVisible: false,
ruleForms: {
id: '',
userName: '',
realName: '',
identity: '',
departIn: '',
education:'',
address: '',
sex: '',
remarks: '',
},
ruleForm: {
id: '',
userName: '',
realName: '',
identity: '',
departIn: '',
education:'',
address: '',
sex: '',
remarks: '',
},
education: [],
departIn: [],
address: [],
sex: [],
// rules: {},
isEdit: true,
};
},
mounted: function () {
// 组件创建完后获取数据，
// 此时 data 已经被 observed 了
this.fetchData();
this.defaultData();
},
methods: {
/* //格式化
formstate(val){
/!*console.log("aaaaaa");
console.log(val.state);*!/
if(val.state == 0)
{return "启用"}
else if (val.state == -1)
{return "禁止"}
},*/
toggleSelection(rows) {
if (rows) {
rows.forEach(function (row) {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
callbackFunction(result) {
alert(result + "aaa");
},
//分页查数据
fetchData(currentPage, pageSize) { //获取数据
$.ajax({
url: "/user/list",
data: {
"currentPage": currentPage,
"pageSize": pageSize,
},
type: "post",
dataType: "json",
error: function () {
},
success: function (pageList) {
table.tableData = []
var tablelist = table.tableData;
table.total = pageList.total
for (var i = 0; i < pageList.rows.length; i++) {
tablelist.push(pageList.rows[i])
}
}
})
},
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.fetchData(1, val);
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData(val, this.pageSize);
console.log(`当前页: ${val}`);
},
//保存选中状态
getRowKey(row) {
return row.id
},
//新建和修改
newUser() {
table.isEdit = false;
table.ruleForm = table.ruleForms
table.dialogFormVisible = true;
},
//刷新
winReload:function(cond){
window.location.reload();
},
//批量删除
batchDelete() {
var id = []
for (var i = 0; i < this.multipleSelection.length; i++) {
id[i] = this.multipleSelection[i].id
}
this.$confirm('此操作将删除所选资源全部信息,请谨慎操作 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "/user/batchDelete",
data: {
ids: id.toString()
},
type: "post",
dataType: "json",
error: function () {
},
success: function (result) {
table.fetchData(table.currentPage, table.pageSize)
if (result.success) {
result.msg = "删除成功！！"
result.success = "success"
table.open(result)
} else {
result.msg = "网络繁忙！！请稍后再试！！"
result.success = "error"
table.open(result)
}
}
})
}).catch(() => {
var result = {msg:"",success:""}
result.msg = "已取消删除"
result.success = "info"
table.open(result)
});
},
//编辑
handleEdit(index, row,val) {
console.debug(row)
console.debug(val)
table.isEdit = true;
table.dialogFormVisible = true;
row = JSON.stringify(row)
row = JSON.parse(row)
table.ruleForm = row
},
//删除
handleDelete(index, row) {
this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "/user/remove",
data: {
"id": row.id
},
dataType: "json",
error: function (result) {
},
success: function (result) {
table.fetchData(table.currentPage, table.pageSize)
if (result.success) {
result.msg = "删除成功！！"
result.success = "success"
table.open(result)
} else {
result.msg = "网络繁忙！！请稍后再试！！"
result.success = "error"
table.open(result)
}
}
})
}).catch(() => {
var result = {msg:"",success:""}
result.msg = "已取消删除"
result.success = "info"
table.open(result)
});
},
//提交高级查询表单
onSubmit() {
console.log(table.formInline);
},
//消息弹出框
open(result) {
this.$message({
showClose: true,
message: result.msg,
type: result.success,
// center: true
});
},
//提交表单
submitForm(formName) {
$.post("/user/save", table.ruleForm , result => {
if (result.success) {
result.msg = "保存成功！！"
result.success = "success"
table.open(result)
} else {
result.msg = "网络繁忙！！请稍后再试！！"
result.success = "error"
table.open(result)
}
});
},
//关闭弹出框
closeDialog(formName) {
if (!table.isEdit) {
this.$confirm('是否保留数据?', '提示', {
confirmButtonText: '保留',
cancelButtonText: '不保留',
type: 'warning',
center: true,
showClose: false,
}).then(() => {
table.ruleForms = table.ruleForm
var result = {msg: "保留成功！", success: "success"}
table.open(result)
table.dialogFormVisible = false;
}).catch(() => {
this.$refs[formName].resetFields();
var result = {msg: "数据已清除！", success: "inof"}
table.open(result)
table.dialogFormVisible = false;
});
} else {
this.$refs[formName].resetFields();
table.dialogFormVisible = false;
}
},
handleDialogClose() {
table.dialogFormVisible = false;
},
defaultData() {
//获取档案类型
$.ajax({
url: "/systemdictionarydetail/selectAllById",
data: {
ident: "xl"
},
type: "post",
dataType: "json",
error: function () {
},
success: function (education) {
table.education = education
}
})
//获取部门
$.ajax({
url: "/systemdictionarydetail/selectAllById",
data: {
ident: "dalb"
},
type: "post",
dataType: "json",
error: function () {
},
success: function (departIn) {
table.departIn = departIn
}
})
//获取性别
$.ajax({
url: "/systemdictionarydetail/selectAllById",
data: {
ident: "xb"
},
type: "post",
dataType: "json",
error: function () {
},
success: function (sex) {
table.sex = sex
}
})
//获取用户地址
$.ajax({
url: "/systemdictionarydetail/selectAllById",
data: {
ident: "cddd"
},
type: "post",
dataType: "json",
error: function () {
},
success: function (address) {
table.address = address
}
})
},
}
});
2.修改功能
//编辑
handleEdit(index, row,val) {
console.debug(row)
console.debug(val)
table.isEdit = true;
table.dialogFormVisible = true;
row = JSON.stringify(row)
row = JSON.parse(row)
table.ruleForm = row
},
3.删除功能
//删除
handleDelete(index, row) {
this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "/user/remove",
data: {
"id": row.id
},
dataType: "json",
error: function (result) {
},
success: function (result) {
table.fetchData(table.currentPage, table.pageSize)
if (result.success) {
result.msg = "删除成功！！"
result.success = "success"
table.open(result)
} else {
result.msg = "网络繁忙！！请稍后再试！！"
result.success = "error"
table.open(result)
}
}
})
}).catch(() => {
var result = {msg:"",success:""}
result.msg = "已取消删除"
result.success = "info"
table.open(result)
});
},
//批量删除
batchDelete() {
var id = []
for (var i = 0; i < this.multipleSelection.length; i++) {
id[i] = this.multipleSelection[i].id
}
this.$confirm('此操作将删除所选资源全部信息,请谨慎操作 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "/user/batchDelete",
data: {
ids: id.toString()
},
type: "post",
dataType: "json",
error: function () {
},
success: function (result) {
table.fetchData(table.currentPage, table.pageSize)
if (result.success) {
result.msg = "删除成功！！"
result.success = "success"
table.open(result)
} else {
result.msg = "网络繁忙！！请稍后再试！！"
result.success = "error"
table.open(result)
}
}
})
}).catch(() => {
var result = {msg:"",success:""}
result.msg = "已取消删除"
result.success = "info"
table.open(result)
});
},
页面刷新功能
<el-button type="primary" class="new" @click="winReload"><i class="el-icon-refresh"> </i>刷新</el-button>
//刷新
winReload:function(cond){
window.location.reload();
},
部门管理模块
功能描述
部门管理主要用于维护企业各个部门的相应信息，主要有：部门名称、联系电话、传真、负责人等数据，可以提供增删改查的功能。
一.基础组件的创建
1.逆向工程创建 mapper ,domain
2.service层的创建
二.高级查询分页
1.创建查询的对象
2.service层的创建高级查询分页的方法
3.编写高级查询的分页的sql
4.创建controller
5.创建高级查询分页的方法
三.CRUD增删改查功能实现
1.添加功能
2.修改功能
3.删除功能
四.使用Vue.js+Element Ui展示页面
系统配置模块
功能描述
系统配置主要是用于修改当前系统的名称、公司名称、公司电话、公司传真、公司地址、公司网址等信息。
1227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
