c-zhangr1/UNION_NJUST
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

南京理工查询统计（数据看板）优化整改: 会员管理和医疗互助统计总数加点击详情弹出人员列表；

Browse Source
This commit is contained in:
c-duxc1
2026-10-10 10:26:46 +08:00
parent d551f8c94e
commit f9a87d12e2
6 changed files with 988 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
target/classes/static/components/dashboard/DataBoardDetail.vue
+246
View File
@@ -0,0 +1,246 @@
<template>
<el-dialog :title="title" :visible.sync="visible" width="88%" top="5vh"
append-to-body :close-on-click-modal="false">
<el-form :inline="true" :model="form" size="small" class="dashboard-detail-filter">
<el-form-item label="统计年度" v-if="detailType === 'member'">
<el-date-picker v-model="form.year" type="year" value-format="yyyy"
clearable placeholder="选择年度" @change="search"></el-date-picker>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="form.dateRange" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
clearable @change="search"></el-date-picker>
</el-form-item>
<el-form-item label="所属工会">
<el-select v-model="form.unionId" clearable filterable placeholder="所属工会"
@change="flushUnits(false)">
<el-option v-for="item in unions" :key="item.id"
:label="item.unionname" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属单位">
<el-select v-model="form.unitId" clearable filterable placeholder="所属单位" @change="search">
<el-option v-for="item in units" :key="item.id"
:label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="人员类型">
<el-select v-model="form.personType" clearable placeholder="人员类型" @change="search">
<el-option v-for="item in personTypeOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="在职状态">
<el-select v-model="form.userState" clearable placeholder="在职状态" @change="search">
<el-option v-for="item in userStateOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="form.sex" clearable placeholder="性别" @change="search">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<template v-if="detailType === 'medical'">
<el-form-item label="补助类型">
<el-select v-model="form.medicalType" clearable placeholder="补助类型" @change="search">
<el-option v-for="item in medicalTypeOptions" :key="item.value"
:label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="申请状态">
<el-select v-model="form.stateId" clearable placeholder="申请状态" @change="search">
<el-option v-for="item in medicalStates" :key="item.value"
:label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</template>
<el-form-item label="人员">
<el-input v-model="form.searchKeyword" clearable placeholder="姓名或工号"
@keyup.enter.native="search"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
<el-button type="success" icon="el-icon-download" @click="exportData">导出</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border stripe height="calc(75vh - 170px)"
v-loading="loading" style="width: 100%">
<el-table-column type="index" label="序号" width="70" align="center"
:index="indexMethod"></el-table-column>
<el-table-column prop="loginname" label="工号" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column prop="username" label="姓名" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="sex" label="性别" width="70" align="center"></el-table-column>
<el-table-column prop="persontype" label="人员类型" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column prop="userstate" label="在职状态" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="unionname" label="所属工会" min-width="160" show-overflow-tooltip></el-table-column>
<el-table-column prop="unitname" label="所属单位" min-width="160" show-overflow-tooltip></el-table-column>
<template v-if="detailType === 'medical'">
<el-table-column prop="typename" label="补助类型" min-width="110"></el-table-column>
<el-table-column prop="detailtime" label="申请时间" min-width="160"></el-table-column>
<el-table-column prop="state_name" label="申请状态" min-width="120"></el-table-column>
<el-table-column prop="total_grant" label="补助金额" min-width="110" align="right"></el-table-column>
</template>
<el-table-column v-else prop="detailtime" label="加入时间" min-width="160"></el-table-column>
</el-table>
<el-pagination class="dashboard-detail-pagination"
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="pageForm.pageNumber"
:page-size="pageForm.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="pageForm.totalCount"
@current-change="pageChange"
@size-change="pageSizeChange"></el-pagination>
</el-dialog>
</template>
<script>
module.exports = {
props: {
baseUrl: {
type: String,
required: true
}
},
data() {
return {
visible: false,
loading: false,
title: '指标明细',
detailType: 'member',
form: this.emptyForm(),
initialForm: {},
tableData: [],
unions: [],
units: [],
personTypeOptions: [],
userStateOptions: [],
medicalStates: [],
medicalTypeOptions: [
{label: '医疗补助', value: 1},
{label: '重疾补助', value: 2},
{label: '特殊门诊补助', value: 3}
],
pageForm: {
pageNumber: 1,
pageSize: 10,
totalCount: 0
}
}
},
methods: {
emptyForm() {
return {
detailType: 'member',
year: '',
dateRange: [],
unionId: '',
unitId: '',
personType: '',
userState: '',
sex: '',
medicalType: '',
stateId: '',
searchKeyword: ''
}
},
async open(title, detailType, filters) {
this.title = title || '指标明细'
this.detailType = detailType || 'member'
const form = this.emptyForm()
form.detailType = this.detailType
Object.assign(form, filters || {})
if (form.startTime || form.endTime) {
form.dateRange = [form.startTime || '', form.endTime || '']
}
this.form = form
this.initialForm = clone(form)
this.visible = true
await this.flushUnits(true)
this.search()
},
buildParams() {
const params = clone(this.form)
params.detailType = this.detailType
params.startTime = params.dateRange && params.dateRange.length ? params.dateRange[0] : ''
params.endTime = params.dateRange && params.dateRange.length ? params.dateRange[1] : ''
delete params.dateRange
return params
},
async loadData() {
this.loading = true
const params = Object.assign(this.buildParams(), {
pageNumber: this.pageForm.pageNumber,
pageSize: this.pageForm.pageSize
})
const resp = await $.get(this.baseUrl + '/detailPage', params)
requestLaterFun(resp, data => {
this.tableData = data.list || []
this.pageForm.totalCount = data.totalCount || 0
})
this.loading = false
},
search() {
if (!this.visible) return
this.pageForm.pageNumber = 1
this.loadData()
},
async reset() {
this.form = clone(this.initialForm)
await this.flushUnits(true)
this.search()
},
async flushUnits(preserveUnit) {
if (!preserveUnit) {
this.$set(this.form, 'unitId', '')
}
this.units = await getUnits(this.form.unionId)
if (!preserveUnit) {
this.search()
}
},
pageChange(pageNumber) {
this.pageForm.pageNumber = pageNumber
this.loadData()
},
pageSizeChange(pageSize) {
this.pageForm.pageSize = pageSize
this.pageForm.pageNumber = 1
this.loadData()
},
indexMethod(index) {
return (this.pageForm.pageNumber - 1) * this.pageForm.pageSize + index + 1
},
exportData() {
window.open(this.baseUrl + '/exportDetail?' + $.param(this.buildParams()))
}
},
async created() {
this.unions = await getUnions(null)
this.personTypeOptions = await getDictOptions('UserType')
this.userStateOptions = await getDictOptions('UserState')
const resp = await $.get(this.baseUrl + '/detailOptions')
requestLaterFun(resp, data => {
this.medicalStates = data.medicalStates || []
})
}
}
</script>
<style scoped>
.dashboard-detail-filter {
margin-bottom: 4px;
}
.dashboard-detail-filter .el-form-item {
margin-bottom: 12px;
}
.dashboard-detail-pagination {
margin-top: 15px;
text-align: right;
}
</style>