南京理工查询统计（数据看板）优化整改: 会员管理和医疗互助统计总数加点击详情弹出人员列表；
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user