图片引用
< img : src= "logo" width= "100%" height= "100%" / >
import logoImg from '@/assets/logo/home.png'
data ( ) {
return {
logo : logoImg,
}
}
查询表单
< el- form : model= "queryParams" ref= "queryForm" size= "small" : inline= "true" v- show= "showSearch" label- width= "68px" >
< el- form- item label= "姓名" prop= "name" >
< el- input
v- model= "queryParams.name"
placeholder= "请输入姓名"
clearable
@keyup. enter. native= "handleQuery"
/ >
< / el- form- item>
< el- form- item label= "出生日期" prop= "dateOfBirth" >
< el- date- picker clearable
v- model= "queryParams.dateOfBirth"
type= "date"
value- format= "yyyy-MM-dd"
: picker- options= "pickerOptions"
placeholder= "请选择出生日期" >
< / el- date- picker>
< / el- form- item>
< el- form- item>
< el- button type= "primary" icon= "el-icon-search" size= "mini" @click= "handleQuery" > 搜索< / el- button>
< el- button icon= "el-icon-refresh" size= "mini" @click= "resetQuery" > 重置< / el- button>
< / el- form- item>
< / el- form>
import { listInformation, getInformation, delInformation, addInformation, updateInformation } from "@/api/system/information" ;
export default {
data ( ) {
return {
pickerOptions : {
disabledDate ( time ) {
return time. getTime ( ) > Date. now ( ) ;
} ,
} ,
loading : true ,
total : 0 ,
informationList : [ ] ,
queryParams : {
pageNum : 1 ,
pageSize : 10 ,
name : null ,
dateOfBirth : null ,
} ,
}
methods : {
resetQuery ( ) {
this . resetForm ( "queryForm" ) ;
this . handleQuery ( ) ;
} ,
handleQuery ( ) {
this . queryParams. pageNum = 1 ;
this . getList ( ) ;
} ,
getList ( ) {
this . loading = true ;
listInformation ( this . queryParams) . then ( response => {
this . informationList = response. rows;
this . total = response. total;
this . loading = false ;
} ) ;
} ,
}
}
表格展示
// 表格上面的按钮
< el-row :gutter = " 10" class = " mb8" >
< el-col :span = " 1.5" >
< el-button
type = " primary"
plain
icon = " el-icon-plus"
size = " mini"
@click = " handleAdd"
v-hasPermi = " ['system:information:add']"
> 新增</ el-button>
</ el-col>
< el-col :span = " 1.5" >
< el-button
type = " danger"
plain
icon = " el-icon-delete"
size = " mini"
:disabled = " multiple"
@click = " handleDelete"
v-hasPermi = " ['system:information:remove']"
> 删除</ el-button>
</ el-col>
< el-col :span = " 1.5" >
< el-button
type = " warning"
plain
icon = " el-icon-download"
size = " mini"
@click = " handleExport"
v-hasPermi = " ['system:information:export']"
> 导出</ el-button>
</ el-col>
< right-toolbar :showSearch.sync = " showSearch" @queryTable = " getList" > </ right-toolbar>
</ el-row>
< el-table v-loading = " loading" :data = " informationList" @selection-change = " handleSelectionChange" >
< el-table-column type = " selection" width = " 55" align = " center" />
< el-table-column label = " 主键" align = " center" prop = " id" />
< el-table-column label = " 姓名" align = " center" prop = " name" />
< el-table-column label = " 性别" align = " center" prop = " sex" >
< template slot-scope = " scope" >
< dict-tag :options = " dict.type.sys_user_sex" :value = " scope.row.sex ? scope.row.sex.split(',') : []" />
</ template>
</ el-table-column>
< el-table-column label = " 审核状态" align = " center" prop = " status" v-if = " user.userName!='admin' " >
< template slot-scope = " scope" >
< dict-tag :options = " dict.type.info_status" :value = " scope.row.status ? scope.row.status.split(',') : []" />
</ template>
</ el-table-column>
< el-table-column label = " 操作" align = " center" fixed = " right" class-name = " small-padding fixed-width" width = " 240px" >
< template slot-scope = " scope" >
< span v-if = " user.userName=='admin' " >
< el-button
size = " mini"
type = " text"
@click = " updateStatus(scope.row)"
v-hasPermi = " ['system:information:edit']"
> 审批</ el-button>
< el-button
size = " mini"
type = " text"
@click = " cancelStatus(scope.row)"
v-hasPermi = " ['system:information:edit']"
> 取消审批</ el-button>
< el-button
size = " mini"
type = " text"
@click = " handleView(scope.row)"
v-hasPermi = " ['system:information:edit']"
> 查看详情</ el-button>
< br/>
</ span>
< el-button
size = " mini"
type = " text"
icon = " el-icon-edit"
@click = " handleUpdate(scope.row)"
v-hasPermi = " ['system:information:edit']"
style = " margin-left : 10px; "
> 修改</ el-button>
< el-button
size = " mini"
type = " text"
icon = " el-icon-delete"
@click = " handleDelete(scope.row)"
v-hasPermi = " ['system:information:remove']"
> 删除</ el-button>
</ template>
</ el-table-column>
</ el-table>
< pagination
v-show = " total>0"
:total = " total"
:page.sync = " queryParams.pageNum"
:limit.sync = " queryParams.pageSize"
@pagination = " getList"
/>
import { selectDictLabel} from '@/main.js'
import { listInformation, getInformation, delInformation, addInformation, updateInformation } from "@/api/system/information" ;
export default {
dicts : [ 'sys_user_sex' ] ,
data ( ) { } ,
created ( ) {
this . getList ( ) ;
this . getUser ( ) ;
this . getDeptTree ( ) ;
} ,
methods : {
handleSelectionChange ( selection ) {
this . ids = selection. map ( item => item. id)
this . single = selection. length!== 1
this . multiple = ! selection. length
} ,
handleAdd ( ) {
this . reset ( ) ;
this . open = true ;
this . title = "添加档案基本信息" ;
} ,
handleExport ( ) {
this . download ( 'system/information/export' , {
... this . queryParams
} , ` information_ ${ new Date ( ) . getTime ( ) } .xlsx ` )
}
updateStatus ( row ) {
const id = row. id || this . ids
this . $modal. confirm ( '是否确认审批档案基本信息编号为"' + id + '"的数据项?' ) . then ( function ( ) {
row. status= "1" ;
return updateInformation ( row) ;
} ) . then ( ( ) => {
this . getList ( ) ;
this . $modal. msgSuccess ( "审批成功" ) ;
} ) . catch ( ( ) => { } ) ;
} ,
cancelStatus ( row ) {
const id = row. id || this . ids
this . $prompt ( '请输入档案基本信息编号为"' + id + '"取消审批的原因:' , '提示' , {
confirmButtonText : '确定' ,
cancelButtonText : '取消' ,
} ) . then ( ( { value } ) => {
row. status = "2" ;
row. rmk = value;
updateInformation ( row) ;
this . getList ( ) ;
this . $modal. msgSuccess ( "取消成功" ) ;
} ) . catch ( ( ) => { } ) ;
} ,
handleView ( row ) {
this . reset ( ) ;
const id = row. id || this . ids
getInformation ( id) . then ( response => {
this . form = response. data;
this . openDetail = true ;
} ) ;
} ,
handleUpdate ( row ) {
this . reset ( ) ;
const id = row. id || this . ids
getInformation ( id) . then ( response => {
this . form = response. data;
this . open = true ;
this . title = "修改档案基本信息" ;
} ) ;
} ,
handleDelete ( row ) {
const ids = row. id || this . ids;
this . $modal. confirm ( '是否确认删除档案基本信息编号为"' + ids + '"的数据项?' ) . then ( function ( ) {
return delInformation ( ids) ;
} ) . then ( ( ) => {
this . getList ( ) ;
this . $modal. msgSuccess ( "删除成功" ) ;
} ) . catch ( ( ) => { } ) ;
} ,
reset ( ) {
this . form = {
id : null ,
name : null ,
sex : null , 。。。
} ;
this . resetForm ( "form" ) ;
} ,
}
新增修改
< el-dialog :title = " title" :visible.sync = " open" width = " 1500px" append-to-body >
< el-form ref = " form" :model = " form" :rules = " rules" label-width = " 160px" >
< el-tabs v-model = " activeName" @tab-click = " handleClick" >
< el-tab-pane label = " 基础身份信息" name = " first" >
< el-row>
< el-col :span = " 6" >
< el-form-item label = " 姓名" prop = " name" >
< el-input v-model = " form.name" placeholder = " 请输入姓名" />
</ el-form-item>
</ el-col>
< el-col :span = " 6" >
< el-form-item label = " 性别" prop = " sex" >
< el-select v-model = " form.sex" placeholder = " 请选择" >
< el-option
v-for = " dict in dict.type.sys_user_sex"
:key = " dict.value"
:label = " dict.label"
:value = " dict.value" >
</ el-option>
</ el-select>
</ el-form-item>
</ el-col>
< el-col :span = " 6" >
< el-form-item label = " 联系电话" prop = " phone" >
< el-input v-model = " form.phone" placeholder = " 请输入联系电话" />
</ el-form-item>
</ el-col>
< el-col :span = " 6" >
< el-form-item label = " 出生日期" prop = " dateOfBirth" >
< el-date-picker clearable
v-model = " form.dateOfBirth"
type = " date"
value-format = " yyyy-MM-dd"
:picker-options = " pickerOptions"
placeholder = " 请选择出生日期" >
</ el-date-picker>
</ el-form-item>
</ el-col>
</ el-row>
</ el-tab-pane>
< el-tab-pane label = " 组织生活、社会活动信息" name = " second" >
< el-row>
< el-col :span = " 24" >
< el-form-item label = " 身份证号" prop = " idCard" >
< el-input v-model = " form.idCard" placeholder = " 请输入身份证号" />
</ el-form-item>
</ el-col>
</ el-row>
</ el-tab-pane>
</ el-tabs>
</ el-form>
< div slot = " footer" class = " dialog-footer" >
< el-button type = " primary" @click = " submitForm" > 确 定</ el-button>
< el-button @click = " cancel" > 取 消</ el-button>
</ div>
</ el-dialog>
import { deptTreeSelect } from "@/api/system/user" ;
import Treeselect from "@riophae/vue -treeselect" ;
import "@riophae/vue -treeselect/dist/vue -treeselect.css" ;
export default {
name : "Information" ,
dicts : [ 'sys_info_marital_status' , 。。。] ,
components : { Treeselect } ,
data ( ) {
var isCardId = ( rule, value, callback ) => {
if ( ! value) {
return new Error ( "请输入身份证号)" ) ;
} else {
const reg =
/ ^[1-9]\d{5}(18|19|20|21|22|23|24)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$ / ;
const card = reg. test ( value) ;
if ( ! card) {
callback ( new Error ( "身份证号格式有误!" ) ) ;
} else {
callback ( ) ;
}
}
} ;
var validatorPhone = function ( rule, value, callback ) {
if ( value === '' ) {
callback ( new Error ( '手机号不能为空' ) )
} else if ( ! / ^1\d{10}$ / . test ( value) ) {
callback ( new Error ( '手机号格式错误' ) )
} else {
callback ( )
}
}
return {
rules : {
name : [
{ required : true , message : '请输入姓名' , trigger : 'blur' } ,
{ min : 2 , max : 5 , message : '长度在 2 到 5 个字符' , trigger : 'blur' }
] ,
sex : [
{ required : true , message : '请选择性别' , trigger : 'change' }
] ,
dateOfBirth : [
{ type : 'string' , required : true , message : '请选择出生日期' , trigger : 'change' }
] ,
idCard : [
{ required : true , message : '请输入身份证号' , trigger : 'blur' } ,
{ validator : isCardId, message : '身份证号格式有误' , trigger : "blur" }
] ,
phone : [
{ required : true , message : '请输入联系电话' , trigger : 'blur' } ,
{ validator : validatorPhone, message : '联系电话格式有误' , trigger : "blur" }
] ,
}
} ,
methods : {
cancel ( ) {
this . open = false ;
this . reset ( ) ;
} ,
submitForm ( ) {
this . $refs[ "form" ] . validate ( valid => {
if ( valid) {
if ( this . form. id != null ) {
updateInformation ( this . form) . then ( response => {
this . $modal. msgSuccess ( "修改成功" ) ;
this . open = false ;
this . getList ( ) ;
} ) ;
} else {
addInformation ( this . form) . then ( response => {
this . $modal. msgSuccess ( "新增成功" ) ;
this . open = false ;
this . getList ( ) ;
} ) ;
}
} else {
this . $message ( {
message : '请将必填信息填写完整!!' ,
type : 'warning'
} ) ;
}
} ) ;
} ,
}
详情
< el-dialog title = " 信息详细" :visible.sync = " openDetail" width = " 1000px" append-to-body >
< el-form ref = " form" :model = " form" label-width = " 160px" size = " mini" >
< dev style = " margin-bottom : 20px; font-size : 18px; " >
< b style = " margin-left : 450px; " > 基础信息</ b>
</ dev>
< el-row style = " margin-top : 20px; " >
< el-col :span = " 6" >
< el-form-item label = " 姓名:" > {{ form.name }}</ el-form-item>
</ el-col>
< el-col :span = " 6" >
< el-form-item label = " 民族:" > {{ form.ethnicGroup }}</ el-form-item>
</ el-col>
< el-col :span = " 6" >
< el-form-item label = " 出生日期:" > {{ form.dateOfBirth }}</ el-form-item>
</ el-col>
< el-col :span = " 12" >
< el-form-item label = " 户籍类别:" > {{ selectDictLabel(dict.type.type_status,form.type) }}</ el-form-item>
</ el-col>
</ el-row>
< dev style = " margin-bottom : 20px; font-size : 18px; " >
< b style = " margin-left : 400px; " > 组织生活、社会活动信息</ b>
</ dev>
< el-row style = " margin-top : 20px; " >
< el-col :span = " 12" >
< el-form-item label = " 所在党支部:" > {{ form.partyBranch }}</ el-form-item>
</ el-col>
< el-col :span = " 12" >
< el-form-item label = " 社会职务:" > {{ selectDictLabel(dict.type.sys_socialduty,form.socialDuty) }}</ el-form-item>
</ el-col>
</ el-form>
< div slot = " footer" class = " dialog-footer" >
< el-button @click = " openDetail = false" > 关 闭</ el-button>
</ div>
</ el-dialog>
图表
< div>
< el- row style= "margin-top: 40px;margin-left: 30px;" >
< el- col : span= "12" >
< div ref= "chart" style= "width: 600px; height: 400px;" > < / div>
< / el- col>
。。。
< / el- row>
< / div>
import { listInformation2 } from "@/api/system/table" ;
import * as echarts from 'echarts' ;
export default {
name : "Table" ,
data ( ) {
return {
dataEchars1 : [ ] ,
dataEchars2 : [ ] ,
dataEchars3 : [ ] ,
dataEchars4 : [ ] ,
} ;
} ,
created ( ) {
this . getList2 ( ) ;
} ,
methods : {
getList2 ( ) {
listInformation2 ( ) . then ( response => {
this . dataEchars1= response[ 0 ] . rows; 。。。
this . initechars ( ) ;
} ) ;
} ,
initechars ( ) {
let myChart = echarts. init ( this . $refs. chart) ;
let option = {
title : {
text : '学历状态统计' ,
subtext : '全部档案' ,
left : 'center'
} ,
tooltip : {
trigger : 'item'
} ,
legend : {
orient : 'vertical' ,
left : 'left'
} ,
series : [
{
name : '学历状态统计图' ,
type : 'pie' ,
radius : '50%' ,
data : this . dataEchars1,
emphasis : {
itemStyle : {
shadowBlur : 10 ,
shadowOffsetX : 0 ,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
}
]
} ;
myChart. setOption ( option) ;
。。。。
} ,
}
} ;
@PreAuthorize ( "@ss.hasPermi('system:table:query')" )
@GetMapping ( "/list1" )
public List < TableDataInfo > list1 ( SoldierInformation soldierInformation) {
List < Long > Null ;
List < SoldierInformation > list = soldierInformationService. selectAllSoldierInformationList ( ) ;
List < PieChart > pieChart1 = new ArrayList < PieChart > ( ) ;
List < PieChart > pieChart2 = new ArrayList < PieChart > ( ) ; 。。。
if ( list. size ( ) > 0 ) {
int qualification1 = 0 ;
int qualification2 = 0 ;
int education1 = 0 ;
int education2 = 0 ;
if ( list. size ( ) > 0 ) {
for ( int i = 0 ; i < list. size ( ) ; i++ ) {
if ( ( "0" ) . equals ( list. get ( i) . getEducation ( ) ) ) {
qualification1 += 1 ;
} else if ( ( "1" ) . equals ( list. get ( i) . getEducation ( ) ) ) {
qualification2 += 1 ;
} else if ( ( "2" ) . equals ( list. get ( i) . getEducation ( ) ) ) {
qualification3 += 1 ;
} else 。。。
if ( ( "0" ) . equals ( list. get ( i) . getEducation1 ( ) ) ) {
education1 += 1 ;
} else if ( ( "1" ) . equals ( list. get ( i) . getEducation1 ( ) ) ) {
education2 += 1 ;
} else 。。。
}
pieChart1. add ( new PieChart ( "博士研究生" , qualification1) ) ;
pieChart1. add ( new PieChart ( "硕士研究生" , qualification2) ) ; 。。。
pieChart2. add ( new PieChart ( "博士" , education1) ) ;
pieChart2. add ( new PieChart ( "硕士" , education2) ) ; 。。。
}
}
TableDataInfo tableDataInfo1 = getDataTable ( pieChart1) ;
TableDataInfo tableDataInfo2 = getDataTable ( pieChart2) ; 。。。
List < TableDataInfo > resultList = new ArrayList < > ( ) ;
resultList. add ( tableDataInfo1) ;
resultList. add ( tableDataInfo2) ; 。。。
return resultList;
}