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

change

Browse Source
This commit is contained in:
c-zhangr1
2026-08-20 17:26:14 +08:00
parent 840f7e2a59
commit 24cc40c698
31 changed files with 2012 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/assets/platform/css/meeting-list-layout.css
+75
View File
@@ -0,0 +1,75 @@
/*
* 会务管理列表页统一满屏布局：查询区和分页区固定，表格使用剩余高度并在内部滚动。
*/
.meeting-list-layout {
height: calc(100vh - 84px);
min-height: 0;
overflow: hidden;
}
.meeting-list-layout > .transition-item {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
}
.meeting-list-layout > .transition-item > .meeting-search-card {
flex: 0 0 auto;
}
.meeting-list-layout > .transition-item > .meeting-table-card {
flex: 1 1 0;
min-height: 0;
margin-top: 0 !important;
overflow: hidden;
}
.meeting-list-layout > .transition-item > .meeting-table-card > .el-card__body {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
.meeting-list-layout .meeting-table-card .ele-table-tool {
flex: 0 0 auto;
}
.meeting-list-layout .meeting-table-card .meeting-main-table {
flex: 1 1 0;
min-height: 0;
}
.meeting-list-layout .meeting-table-card .el-pagination-container {
flex: 0 0 52px;
min-height: 52px;
margin-top: 12px !important;
margin-bottom: 0 !important;
overflow: visible;
}
.meeting-list-layout .meeting-main-table .el-table__body-wrapper {
overflow-y: auto;
}
@media (max-height: 760px) {
.meeting-list-layout > .transition-item {
gap: 12px;
}
.meeting-list-layout > .transition-item > .meeting-table-card > .el-card__body {
padding-top: 14px;
padding-bottom: 10px;
}
.meeting-list-layout .meeting-table-card .el-pagination-container {
flex-basis: 48px;
min-height: 48px;
margin-top: 8px !important;
}
}
src/main/resources/views/platform/zhgh/dayofficework/meeting/delegationApproval/index.html
+8 -5
View File
@@ -2,10 +2,12 @@
layout("/layouts/platform.html"){
#-->
<div id="app">
<guava ref="guava">
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<el-card shadow="never">
<div id="app">
<guava ref="guava" class="meeting-list-layout">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="年度">
<el-date-picker
@@ -35,14 +37,15 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="申请列表">
<el-radio-group v-model="pageForm.approval" size="small" @change="doSearch">
<el-radio-button :label="true">已审核</el-radio-button>
<el-radio-button :label="false">未审核</el-radio-button>
</el-radio-group>
</table-tool>
<el-table :data="tableData" @sort-change="pageOrder" style="width: 100%">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" style="width: 100%">
<el-table-column type="index" width="50px" label="序号" :index="indexMethod"></el-table-column>
<el-table-column
:label="column.label"
src/main/resources/views/platform/zhgh/dayofficework/meeting/leave/index.html
+7 -4
View File
@@ -1,9 +1,11 @@
<!--#
layout("/layouts/platform.html"){
#-->
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<div id="app">
<guava ref="guava">
<el-card shadow="never">
<guava ref="guava" class="meeting-list-layout">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="年度">
<el-date-picker
@@ -33,9 +35,10 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="申请列表"></table-tool>
<el-table :data="tableData" @sort-change="pageOrder" style="width: 100%">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" style="width: 100%">
<el-table-column type="index" width="50px" label="序号" :index="indexMethod"></el-table-column>
<el-table-column
:label="column.label"
src/main/resources/views/platform/zhgh/dayofficework/meeting/manage/basicForm.js
+1 -1
View File
@@ -246,7 +246,7 @@ const basicForm = {
// 民主管理模块才需要按教代会届次筛选人员。
isDemocraticModule() {
const module = this.moduleOptions.find((item) => item.id === this.pageForm.moduleId)
return module && module.name === '民主管理'
return module && module.name === '提案工作'
}
},
methods: {
src/main/resources/views/platform/zhgh/dayofficework/meeting/manage/index.html
+7 -4
View File
@@ -2,14 +2,16 @@
layout("/layouts/platform.html"){
#-->
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<style>
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="meeting-list-layout">
<template>
<el-card shadow="never">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="年度">
<el-date-picker
@@ -30,14 +32,15 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never" class="mt20">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="会议列表">
<el-button type="primary" size="small" @click="onAdd">
<i class="ti-plus"></i>
新增会议
</el-button>
</table-tool>
<el-table :data="tableData" @sort-change="pageOrder" :size="tableSize">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" :size="tableSize">
<el-table-column label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
<el-table-column
:label="column.label"
src/main/resources/views/platform/zhgh/dayofficework/meeting/mine/index.html
+24 -6
View File
@@ -2,6 +2,8 @@
layout("/layouts/platform.html"){
#-->
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<style>
.timePeriod_card {
border-top: 5px solid #106898;
@@ -15,9 +17,9 @@ layout("/layouts/platform.html"){
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="meeting-list-layout">
<template>
<el-card shadow="never">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="年度">
<el-date-picker
@@ -47,9 +49,10 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never" class="mt20">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="会议列表"></table-tool>
<el-table :data="tableData" @sort-change="pageOrder" :size="tableSize" ref="meetingTable">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" :size="tableSize" ref="meetingTable">
<el-table-column type="expand">
<template slot-scope="{ row }">
<el-row :gutter="20" justify="start" style="flex-wrap: wrap" type="flex"
@@ -62,9 +65,12 @@ layout("/layouts/platform.html"){
<el-form-item label="结束时间">{{tp.endTime}}</el-form-item>
</el-form>
<el-row justify="space-around" style="border-top: 1px solid #ebeef5;padding: 10px 0 0 0" type="flex">
<el-button v-if="tp.joinStatus === true" @click="onLeave(tp)" size="medium" type="text">请假</el-button>
<el-button v-if="tp.joinStatus === true" :disabled="isMeetingHandled(tp)"
@click="onLeave(tp)" size="medium" type="text">请假</el-button>
<el-button v-if="tp.joinStatus === false" size="medium" type="text" disabled>您已请假</el-button>
<el-button v-if="tp.signStatus === false" :disabled="isSignDisabled(tp.startTime)" @click="onSign(tp)" size="medium" type="text">签到</el-button>
<el-button v-if="tp.signStatus === false"
:disabled="isMeetingHandled(tp) || isSignDisabled(tp.startTime)"
@click="onSign(tp)" size="medium" type="text">签到</el-button>
<el-button v-if="tp.signStatus === true" size="medium" type="text" disabled>您已签到</el-button>
</el-row>
</el-card>
@@ -127,11 +133,19 @@ layout("/layouts/platform.html"){
}
},
methods: {
// 已请假或已签到后同时禁用请假、签到按钮，避免继续发起互斥操作。
isMeetingHandled(timePeriod) {
return timePeriod.joinStatus === false || timePeriod.signStatus === true
},
// 场次开始前禁用签到，避免用户在会议开始前提交签到操作。
isSignDisabled(startTime) {
return this.$moment().isBefore(this.$moment(startTime))
},
onLeave(row) {
if (this.isMeetingHandled(row)) {
this.$message.warning(row.signStatus === true ? '您已签到，不能请假' : '您已请假，请勿重复操作')
return
}
if(!row.canLeave) {
this.$message.warning('该场次不能请假')
return
@@ -159,6 +173,10 @@ layout("/layouts/platform.html"){
}).catch(() => {})
},
onSign(row) {
if (this.isMeetingHandled(row)) {
this.$message.warning(row.signStatus === true ? '您已签到，请勿重复操作' : '您已请假，不能签到')
return
}
this.$confirm('您确定要签到吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
src/main/resources/views/platform/zhgh/dayofficework/meeting/online/index.html
+48 -22
View File
@@ -2,6 +2,8 @@
layout("/layouts/platform.html"){
#-->
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<style>
.qrcode {
min-width: 240px;
@@ -70,9 +72,9 @@ layout("/layouts/platform.html"){
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="meeting-list-layout">
<template>
<el-card shadow="never">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="年度">
<el-date-picker
@@ -102,9 +104,10 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never" class="mt20">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="会议列表"></table-tool>
<el-table :data="tableData" @sort-change="pageOrder" :size="tableSize" ref="meetingTable">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" :size="tableSize" ref="meetingTable">
<el-table-column type="expand">
<template slot-scope="{ row }">
<el-row :gutter="20" justify="start" style="flex-wrap: wrap" type="flex"
@@ -179,15 +182,20 @@ layout("/layouts/platform.html"){
</el-col>
</el-row>
<el-table :data="userData" :max-height="signTableHeight" class="mt20" ref="signTable">
<el-table :data="userData"
:max-height="signTableHeight"
:default-sort="{prop: 'signRank', order: 'descending'}"
@sort-change="changeSignRankOrder"
class="mt20"
ref="signTable">
<el-table-column label="姓名" prop="userName"></el-table-column>
<el-table-column label="工号" prop="loginName"></el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="单位" prop="unitName"></el-table-column>
<el-table-column label="签到时间" prop="signTime"></el-table-column>
<el-table-column label="签到名次">
<el-table-column label="签到名次" prop="signRank" sortable="custom">
<template slot-scope="scope">
{{userData.length - scope.$index}}
{{scope.row.signRank}}
</template>
</el-table-column>
</el-table>
@@ -224,6 +232,7 @@ layout("/layouts/platform.html"){
lastTimeData: [],
realTimeData: [],
userData: [],
signRankOrder: 'descending',
signTableHeight: 600
}
},
@@ -261,22 +270,39 @@ layout("/layouts/platform.html"){
this.$message.warning(resp.msg)
}
},
async getRealTimeData() {
this.lastTimeData = clone(this.realTimeData)
const resp = await this.$axios.post('/platform/meeting/online/getRealTimeData/' + this.timePeriodId)
if (resp.code === 0) {
this.lastTimeData = clone(this.realTimeData)
this.$set(this, 'realTimeData', resp.data.countData)
let ud = clone(this.userData)
ud.unshift(...resp.data.userData)
let uMap = new Map()
for (let u of ud) {
if (!uMap.has(u.loginName)) {
uMap.set(u.loginName, u)
}
}
this.$set(this, 'userData', [...uMap.values()])
getRealTimeData() {
// 表格初始化可能触发默认排序事件，尚未选择会议时段时不调用实时数据接口。
if (!this.timePeriodId) {
return
}
this.lastTimeData = clone(this.realTimeData)
const requestOrder = this.signRankOrder
this.$axios.post('/platform/meeting/online/getRealTimeData/' + this.timePeriodId, {
signRankOrder: requestOrder
}).then((resp) => {
// 排序切换过程中可能存在尚未返回的轮询请求，旧排序结果不再覆盖当前列表。
if (requestOrder !== this.signRankOrder) {
return
}
if (resp.code === 0) {
this.lastTimeData = clone(this.realTimeData)
this.$set(this, 'realTimeData', resp.data.countData)
const rankedUsers = resp.data.userData || []
// 后台已按签到时间排序，此处只补充对应的固定签到名次用于页面展示。
rankedUsers.forEach((user, index) => {
user.signRank = requestOrder === 'ascending' ? index + 1 : rankedUsers.length - index
})
this.$set(this, 'userData', rankedUsers)
}
})
},
changeSignRankOrder({prop, order}) {
if (prop !== 'signRank') {
return
}
// Element清除排序时恢复默认的名次降序，并立即重新调用后台查询。
this.signRankOrder = order || 'descending'
this.getRealTimeData()
},
startPolling(func) {
this.lastTimeData = []
src/main/resources/views/platform/zhgh/dayofficework/meeting/schoolUnionApproval/index.html
+8 -5
View File
@@ -2,10 +2,12 @@
layout("/layouts/platform.html"){
#-->
<div id="app">
<guava ref="guava">
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<el-card shadow="never">
<div id="app">
<guava ref="guava" class="meeting-list-layout">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="年度">
<el-date-picker
@@ -35,14 +37,15 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="申请列表">
<el-radio-group v-model="pageForm.approval" size="small" @change="doSearch">
<el-radio-button :label="true">已审核</el-radio-button>
<el-radio-button :label="false">未审核</el-radio-button>
</el-radio-group>
</table-tool>
<el-table :data="tableData" @sort-change="pageOrder" style="width: 100%">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" style="width: 100%">
<el-table-column type="index" width="50px" label="序号" :index="indexMethod"></el-table-column>
<el-table-column
:label="column.label"
src/main/resources/views/platform/zhgh/dayofficework/meeting/statistics/index.html
+7 -4
View File
@@ -2,14 +2,16 @@
layout("/layouts/platform.html"){
#-->
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<style>
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="meeting-list-layout">
<template>
<el-card shadow="never">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="年度">
<el-date-picker
@@ -39,9 +41,10 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never" class="mt20">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="会议列表"></table-tool>
<el-table :data="tableData" @sort-change="pageOrder" :size="tableSize" ref="meetingTable">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" :size="tableSize" ref="meetingTable">
<el-table-column label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
<el-table-column
:label="column.label"
src/main/resources/views/platform/zhgh/dayofficework/meeting/statistics/periodsInfo.js
+240 -84
View File
@@ -1,86 +1,108 @@
const periodsInfo = {
template: /*language=HTML*/ `
<div>
<el-alert title="可点击表格中的数字查看具体人员名单" type="info" effect="dark" class="mb20" :closable="false" show-icon></el-alert>
<el-table ref="periodsTable" :data="periodsTableData" :size="tableSize" @cell-click="handleCellClick">
<el-table-column
:label="column.label"
:prop="column.prop"
:key="column.prop"
:width="column.width"
:sortable="column.sortable"
align="center"
header-align="center"
show-overflow-tooltip
:class-name="column.className"
v-if="!column.condition || column.condition.includes(typeOptions.find(o => o.id === selectRow.typeId)?.designId)"
v-for="column in periodsTableColumns"
>
<template slot-scope="{ row }">
<el-link v-if="column.className && column.className === 'export-column'"
@click="onUser(row, column.prop)" type="primary">
{{ row[column.prop] }}
</el-link>
<span v-else-if="column.prop === 'proportionNum'">
{{ proportionNum(row.comeCount, row.totalCount) }}
</span>
<span v-else>
{{ row[column.prop] }}
</span>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" header-align="center" label="操作" width="160">
<template slot-scope="{ row }">
<el-button @click="exportUser(row)" size="mini" type="primary">导出人员</el-button>
</template>
</el-table-column>
</el-table>
<div class="meeting-statistics-detail">
<section class="statistics-panel periods-panel">
<table-tool label="会议列表"></table-tool>
<div class="periods-tip">点击【**人数】可查看对应【人员名单】列表</div>
<div class="periods-table-wrap">
<el-table ref="periodsTable"
:data="periodsTableData"
:size="tableSize"
height="100%"
@cell-click="handleCellClick">
<el-table-column
:label="column.label"
:prop="column.prop"
:key="column.prop"
:width="column.width"
:sortable="column.sortable"
align="center"
header-align="center"
show-overflow-tooltip
:class-name="column.className"
v-if="!column.condition || column.condition.includes(typeOptions.find(o => o.id === selectRow.typeId)?.designId)"
v-for="column in periodsTableColumns"
>
<template slot-scope="{ row }">
<el-link v-if="column.className && column.className === 'export-column'"
@click.stop="selectUserList(row, column.prop, column.label)" type="primary">
{{ row[column.prop] }}
</el-link>
<span v-else-if="column.prop === 'proportionNum'">
{{ proportionNum(row.comeCount, row.totalCount) }}
</span>
<span v-else>
{{ row[column.prop] }}
</span>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" header-align="center" label="操作" width="120">
<template slot-scope="{ row }">
<el-button @click="exportUser(row)" size="mini" type="primary">导出人员</el-button>
</template>
</el-table-column>
</el-table>
</div>
</section>
<el-alert :title="tooltip + '人员名单'" type="info" effect="dark" class="mt20 mb20" :closable="false" show-icon></el-alert>
<div style="padding: 20px; border-radius: 8px; border: 1px solid #ebeef5">
<search @search="doSearch">
<search-item label="姓名/工号">
<el-input placeholder="请输入姓名或工号" clearable v-model="pageForm.searchKeyword"
@keyup.enter.native="doSearch">
</el-input>
</search-item>
<search-item label="所属工会">
<el-select v-model="pageForm.unionId" placeholder="请选择所属工会" filterable clearable
@change="doSearch" style="width: 100%">
<el-option
v-for="item in unionList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</search-item>
<search-item label="所属单位">
<el-select @change="doSearch"
clearable
filterable
placeholder="请选择单位" style="width: 100%" v-model="pageForm.unitId">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unitList"></el-option>
</el-select>
</search-item>
</search>
</div>
<el-table :data="userTableData" :row-key="(row)=>{row.id}" :size="tableSize" class="mt20">
<el-table-column label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
<el-table-column
:label="column.label"
:prop="column.prop"
:key="column.prop"
:width="column.width"
:sortable="column.sortable"
align="center"
header-align="center"
show-overflow-tooltip
v-for="column in tableColumns"
>
</el-table-column>
</el-table>
<!--#include("/layouts/pagination.html"){}#-->
<section class="statistics-panel users-panel">
<table-tool :label="tooltip + '人员名单'"></table-tool>
<div class="person-search">
<search @search="doSearch">
<search-item label="姓名/工号">
<el-input placeholder="请输入姓名或工号" clearable v-model="pageForm.searchKeyword"
@keyup.enter.native="doSearch">
</el-input>
</search-item>
<search-item label="所属工会">
<el-select v-model="pageForm.unionId" placeholder="请选择所属工会" filterable clearable
@change="doSearch" style="width: 100%">
<el-option
v-for="item in unionList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</search-item>
<search-item label="所属单位">
<el-select @change="doSearch"
clearable
filterable
placeholder="请选择单位" style="width: 100%" v-model="pageForm.unitId">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unitList"></el-option>
</el-select>
</search-item>
</search>
</div>
<div class="users-table-wrap">
<el-table ref="userTable"
:data="userTableData"
:row-key="(row)=>{row.id}"
:size="tableSize"
v-loading="userTableLoading"
element-loading-text="数据加载中"
height="100%">
<el-table-column label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
<el-table-column
:label="column.label"
:prop="column.prop"
:key="column.prop"
:width="column.width"
:sortable="column.sortable"
align="center"
header-align="center"
show-overflow-tooltip
v-for="column in tableColumns"
>
</el-table-column>
</el-table>
</div>
<div class="users-pagination">
<!--#include("/layouts/pagination.html"){}#-->
</div>
</section>
<slot></slot>
</div>
`,
props: {
@@ -124,6 +146,8 @@ const periodsInfo = {
{prop: 'proportionNum', label: '人数比例', width: 100},
],
userTableData: [],
userTableLoading: false,
userRequestSerial: 0,
tooltip: '',
selectPeriodRow: {},
@@ -135,11 +159,20 @@ const periodsInfo = {
if (!cell.classList.contains('export-column')) {
return; // 不是目标列，直接返回
}
this.onUser(row, column.property)
this.tooltip = '【' + row.periodName + '-' + column.label + '】'
this.selectUserList(row, column.property, column.label)
},
selectUserList(row, type, label) {
// 人数链接阻止事件冒泡后统一从此处查询，避免链接点击与单元格点击重复请求人员接口。
this.tooltip = '【' + row.periodName + '-' + label + '】'
this.onUser(row, type)
},
onOpen(row) {
this.selectRow = row
// 打开新的会议统计详情时重置人员查询状态，避免残留上一次查看的数据。
this.userRequestSerial++
this.userTableLoading = false
this.userTableData = []
this.pageForm.totalCount = 0
this.$axios.post(loc() + '/view', {meetingId: row.id})
.then((res) => {
this.periodsTableData = res.data
@@ -150,6 +183,17 @@ const periodsInfo = {
this.pageForm.pageNumber = 1
this.onUser()
},
pageNumberChange(pageNumber) {
// 人员名单分页必须继续使用当前会议时段和人数类型查询，不能调用通用会议分页接口。
this.pageForm.pageNumber = pageNumber
this.onUser()
},
pageSizeChange(pageSize) {
// 切换每页条数后从第一页重新查询，并复用人员表格的加载及防并发覆盖逻辑。
this.pageForm.pageSize = pageSize
this.pageForm.pageNumber = 1
this.onUser()
},
onUser(row, type) {
this.selectPeriodRow = row || this.selectPeriodRow
this.selectUserType = type || this.selectUserType
@@ -158,11 +202,25 @@ const periodsInfo = {
this.$set(this.pageForm, 'meetingId', this.selectPeriodRow.meetingId)
this.$set(this.pageForm, 'periodId', this.selectPeriodRow.id)
// 每次查询分配递增序号，快速切换人数类型时仅允许最后一次请求更新列表。
const requestSerial = ++this.userRequestSerial
this.userTableLoading = true
this.userTableData = []
this.pageForm.totalCount = 0
this.$axios.post(loc() + "/queryUserTable", this.pageForm).then((res) => {
if (requestSerial !== this.userRequestSerial) {
return
}
if (res.code === 0) {
this.userTableData = res.data.list
this.pageForm.totalCount = res.data.totalCount
}
this.userTableLoading = false
}, () => {
// 接口异常时只关闭当前有效请求的加载状态，旧请求不影响新请求的转圈提示。
if (requestSerial === this.userRequestSerial) {
this.userTableLoading = false
}
})
},
exportUser(row) {
@@ -179,8 +237,106 @@ const periodsInfo = {
},
},
style: /*language=CSS*/ `
.el-alert__icon {
color: #006DB9;
.meeting-statistics-detail {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
box-sizing: border-box;
}
.meeting-statistics-detail .statistics-panel {
min-height: 0;
padding: 14px 16px;
border: 1px solid #ebeef5;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
overflow: hidden;
}
.meeting-statistics-detail .periods-panel {
flex: 0 0 260px;
display: flex;
flex-direction: column;
}
.meeting-statistics-detail .users-panel {
flex: 1;
display: flex;
flex-direction: column;
}
.meeting-statistics-detail .ele-table-tool {
flex: 0 0 38px;
min-height: 38px;
}
.meeting-statistics-detail .periods-tip {
flex: 0 0 22px;
color: #f56c6c;
font-size: 13px;
line-height: 18px;
}
.meeting-statistics-detail .periods-table-wrap,
.meeting-statistics-detail .users-table-wrap {
min-height: 0;
overflow: hidden;
}
.meeting-statistics-detail .periods-table-wrap {
flex: 1;
}
.meeting-statistics-detail .person-search {
flex: 0 0 auto;
padding: 12px 16px;
border: 1px solid #e4ebf5;
border-radius: 6px;
background: #f5f9ff;
box-sizing: border-box;
}
.meeting-statistics-detail .person-search .search {
margin: 0;
}
.meeting-statistics-detail .users-table-wrap {
flex: 1 1 0;
margin-top: 12px;
}
.meeting-statistics-detail .users-pagination {
flex: 0 0 64px;
min-height: 64px;
display: flex;
align-items: flex-start;
overflow: visible;
box-sizing: border-box;
}
.meeting-statistics-detail .users-pagination .el-pagination-container {
width: 100%;
margin-top: 12px !important;
margin-bottom: 0 !important;
}
.meeting-statistics-detail .el-table__body-wrapper {
overflow-y: auto;
}
@media (max-height: 760px) {
.meeting-statistics-detail .periods-panel {
flex-basis: 230px;
}
.meeting-statistics-detail .statistics-panel {
padding-top: 10px;
padding-bottom: 10px;
}
}
`
}
src/main/resources/views/platform/zhgh/dayofficework/meeting/type/index.html
+7 -4
View File
@@ -2,14 +2,16 @@
layout("/layouts/platform.html"){
#-->
<link rel="stylesheet" href="${base!}/assets/platform/css/meeting-list-layout.css">
<style>
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="meeting-list-layout">
<template>
<el-card shadow="never">
<el-card shadow="never" class="meeting-search-card">
<search @search="doSearch">
<search-item label="名称/编码">
<el-input placeholder="请输入名称或编码" clearable v-model="pageForm.searchKeyword"
@@ -19,14 +21,15 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card shadow="never" class="mt20">
<el-card shadow="never" class="meeting-table-card">
<table-tool label="类型列表">
<el-button type="primary" size="small" @click="onAdd">
<i class="ti-plus"></i>
新增类型
</el-button>
</table-tool>
<el-table :data="tableData" @sort-change="pageOrder" :size="tableSize">
<el-table class="meeting-main-table" height="100%" v-loading="tableLoading"
:data="tableData" @sort-change="pageOrder" :size="tableSize">
<el-table-column label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
<el-table-column
:label="column.label"
src/main/resources/views/platform/zhgh/staffmanage/member/change/common/memberChange.js
+1 -3
View File
@@ -1,7 +1,7 @@
const MEMBER_CHANGE = {
template: /*language=HTML*/ `
<el-card shadow="never">
<snaker-start v-if="showFlowHeader" slot="header" label="会员变更" define_key="HYBG"></snaker-start>
<snaker-start slot="header" label="会员变更" define_key="HYBG"></snaker-start>
<el-form :model="formData" ref="formRef" :rules="formRules" label-width="0" label-suffix="："
class="flow-task-form">
<el-descriptions :column="3" border>
@@ -288,8 +288,6 @@ const MEMBER_CHANGE = {
props: {
id: { type: String, default: '' },
showThreeUnit: { type: Boolean, default: false },
// 控制公共变更组件的标题及流程图入口，默认保留原会员变更页面样式。
showFlowHeader: { type: Boolean, default: true },
},
mixins: [initTableMixins],
store,
src/main/resources/views/platform/zhgh/staffmanage/member/statistics/personType/index.html
+296
View File
@@ -0,0 +1,296 @@
<!--#
layout("/layouts/platform.html"){
#-->
<style>
/* 人员类型统计页面固定占满平台内容区，避免页面本身产生纵向滚动条。 */
#app .person-type-statistics-layout {
display: flex;
flex-direction: column;
min-height: 0;
height: calc(100vh - 82px);
overflow: hidden;
}
#app .person-type-statistics-query-card {
flex: 0 0 auto;
}
/* 列表卡片使用剩余空间，数据超出时仅由 Element 表格内部滚动。 */
#app .person-type-statistics-list-card {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#app .person-type-statistics-list-card > .el-card__body {
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
}
#app .person-type-statistics-list-card .ele-table-tool,
#app .person-type-statistics-list-card .el-pagination-container {
flex: 0 0 auto;
}
/* 固定高度表格使用纵向弹性布局，让数据区占满中间空间，合计行始终贴在列表底部。 */
#app .person-type-statistics-list-card .el-table {
display: flex;
flex-direction: column;
min-height: 0;
}
#app .person-type-statistics-list-card .el-table__header-wrapper,
#app .person-type-statistics-list-card .el-table__footer-wrapper {
flex: 0 0 auto;
}
#app .person-type-statistics-list-card .el-table__body-wrapper {
flex: 1 1 auto;
min-height: 0;
}
</style>
<div id="app" v-cloak>
<guava ref="guava">
<template>
<div class="person-type-statistics-layout">
<el-card class="person-type-statistics-query-card" shadow="never">
<search @search="doSearch">
<search-item label="所属分工会" v-if="schoolAdmin">
<el-select v-model="pageForm.unionId" clearable filterable
placeholder="请选择所属分工会" style="width: 100%"
@change="handleUnionChange">
<el-option v-for="item in unions" :key="item.id"
:label="item.name" :value="item.id"></el-option>
</el-select>
</search-item>
<search-item label="所属单位" v-if="pageForm.queryType === 'unit'">
<el-select v-model="pageForm.unitId" clearable filterable
placeholder="请选择所属单位" style="width: 100%"
@change="doSearch">
<el-option v-for="item in units" :key="item.id"
:label="item.name" :value="item.id"></el-option>
</el-select>
</search-item>
<search-item v-if="schoolAdmin">
<el-radio-group v-model="pageForm.queryType" @change="handleQueryTypeChange">
<el-radio-button label="union">按分工会统计</el-radio-button>
<el-radio-button label="unit">按单位统计</el-radio-button>
</el-radio-group>
</search-item>
</search>
</el-card>
<el-card class="mt10 person-type-statistics-list-card" shadow="never">
<table-tool label="人员类型统计">
<el-button type="primary" icon="el-icon-download" @click="doExport">导出</el-button>
</table-tool>
<el-table v-loading="tableLoading" :data="tableData" :height="tableHeight"
border show-summary :summary-method="getSummaries"
ref="statisticsTableRef" style="width: 100%">
<el-table-column align="center" header-align="center" type="index" :index="indexMethod"
label="序号" width="80"></el-table-column>
<el-table-column v-if="pageForm.queryType === 'union'" align="center"
header-align="center" label="分工会" min-width="220">
<template slot-scope="{row}">
{{row.unionCode ? '（' + row.unionCode + '）' : ''}}{{row.unionName}}
</template>
</el-table-column>
<el-table-column v-else align="center" header-align="center"
label="单位" min-width="220">
<template slot-scope="{row}">
{{row.unitCode ? '（' + row.unitCode + '）' : ''}}{{row.unitName}}
</template>
</el-table-column>
<el-table-column v-if="schoolAdmin && pageForm.queryType === 'unit'"
align="center" header-align="center" label="所属分工会"
prop="unionName" min-width="180"></el-table-column>
<el-table-column align="center" header-align="center" label="小计"
prop="totalNum" min-width="100"></el-table-column>
<el-table-column v-for="item in personTypeOptions" :key="item.prop"
align="center" header-align="center" :label="item.name"
:prop="item.prop" min-width="120"></el-table-column>
</el-table>
<!--#include("/layouts/pagination.html"){}#-->
</el-card>
</div>
</template>
</guava>
</div>
<script nonce="${cspNonce!}">
new Vue({
el: "#app",
store,
mixins: [initTableMixins],
data() {
return {
pageForm: {
queryType: "union",
unionId: "",
unitId: ""
},
personTypeOptions: [],
summaryData: {},
schoolAdmin: false,
unions: [],
units: [],
tableHeight: 300,
tableResizeObserver: null,
pageRequestSequence: 0
}
},
methods: {
/** 查询后端统计结果，并使用后端返回的实际维度防止非校级用户越权切换。 */
pageData() {
// 翻页或重新查询时立即清空旧页并显示加载状态，避免用户误认为旧数据属于新页。
const requestSequence = ++this.pageRequestSequence
const requestData = Object.assign({}, this.pageForm)
this.tableData = []
this.tableLoading = true
this.$axios.post(loc() + "/pageData", requestData).then((resp) => {
// 快速切换分页时只接收最后一次请求，防止较慢的旧请求覆盖当前页。
if (requestSequence !== this.pageRequestSequence) {
return
}
if (resp.code === 0) {
const data = resp.data || {}
const pageData = data.pageData || {}
this.tableData = pageData.list || []
this.pageForm.totalCount = pageData.totalCount || 0
this.personTypeOptions = data.personTypeOptions || []
this.summaryData = data.summary || {}
this.schoolAdmin = data.schoolAdmin === true
this.pageForm.queryType = data.queryType || "unit"
// 动态列和合计数据返回后重新布局，确保合计行列宽对齐并固定在底部。
this.updateTableHeight()
} else {
this.$message.error(resp.msg)
}
}).finally(() => {
if (requestSequence === this.pageRequestSequence) {
this.tableLoading = false
}
})
},
/** 按列表卡片剩余空间计算表格高度，固定工具栏和分页并启用表格内部滚动。 */
updateTableHeight() {
this.$nextTick(() => {
const cardBody = this.$el.querySelector(".person-type-statistics-list-card > .el-card__body")
if (!cardBody || cardBody.clientHeight <= 0) {
return
}
const getOuterHeight = (element) => {
if (!element) {
return 0
}
const style = window.getComputedStyle(element)
return element.offsetHeight
+ (parseFloat(style.marginTop) || 0)
+ (parseFloat(style.marginBottom) || 0)
}
const bodyStyle = window.getComputedStyle(cardBody)
const bodyPadding = (parseFloat(bodyStyle.paddingTop) || 0)
+ (parseFloat(bodyStyle.paddingBottom) || 0)
const tableTool = cardBody.querySelector(".ele-table-tool")
const pagination = cardBody.querySelector(".el-pagination-container")
const reservedHeight = bodyPadding
+ getOuterHeight(tableTool)
+ getOuterHeight(pagination)
const nextHeight = Math.max(1, Math.floor(cardBody.clientHeight - reservedHeight))
if (this.tableHeight !== nextHeight) {
this.tableHeight = nextHeight
}
this.$nextTick(() => {
if (this.$refs.statisticsTableRef) {
this.$refs.statisticsTableRef.doLayout()
}
})
})
},
/** 切换分工会时清空单位，并重新加载该分工会下的单位选项。 */
handleUnionChange(unionId) {
this.pageForm.unitId = ""
this.loadUnits(unionId)
this.doSearch()
},
/** 切换统计维度后清空本地筛选并重新查询统计数据。 */
handleQueryTypeChange() {
this.pageForm.unionId = ""
this.pageForm.unitId = ""
this.loadUnits("")
this.doSearch()
},
/** 加载单位下拉选项，非校级用户只能加载当前所属工会的单位。 */
loadUnits(unionId) {
let targetUnionId = unionId
if (!this.schoolAdmin && this.$store.state.user.union) {
targetUnionId = this.$store.state.user.union.id
}
const unitPromise = targetUnionId
? this.$businessTool.listUnit(targetUnionId)
: this.$businessTool.listUnit()
unitPromise.then((data) => {
this.units = data || []
})
},
/** 初始化机构筛选数据。 */
initOrganizationOptions() {
this.$businessTool.listUnion().then((data) => {
this.unions = data || []
})
this.loadUnits("")
},
/** 使用后台返回的全量统计结果生成合计行，合计不受当前页数据影响。 */
getSummaries({columns}) {
return columns.map((column, index) => {
if (index === 0) {
return "合计"
}
if (!column.property) {
return ""
}
const value = this.summaryData[column.property]
return value === undefined || value === null ? "" : value
})
},
/** 按当前实际统计维度导出人员类型统计。 */
doExport() {
const params = $.param({
queryType: this.pageForm.queryType,
unionId: this.pageForm.unionId,
unitId: this.pageForm.unitId
})
window.open(loc() + "/doExport?" + params)
}
},
created() {
this.schoolAdmin = this.$auth.hasRoleOr([
"SYSADMIN",
"SCHOOL_UNION_ADMIN",
"SCHOOL_UNION_MEMBER_ADMIN"
])
if (!this.schoolAdmin) {
this.pageForm.queryType = "unit"
}
this.initOrganizationOptions()
this.pageData()
},
mounted() {
const listCardBody = this.$el.querySelector(".person-type-statistics-list-card > .el-card__body")
if (listCardBody && window.ResizeObserver) {
// 查询区换行或窗口尺寸变化时，重新分配表格内部滚动区域高度。
this.tableResizeObserver = new ResizeObserver(this.updateTableHeight)
this.tableResizeObserver.observe(listCardBody)
}
this.updateTableHeight()
window.addEventListener("resize", this.updateTableHeight)
},
beforeDestroy() {
if (this.tableResizeObserver) {
this.tableResizeObserver.disconnect()
this.tableResizeObserver = null
}
window.removeEventListener("resize", this.updateTableHeight)
}
})
</script>
<!--#
}
#-->
src/main/resources/views/platform/zhgh/staffmanage/sourcechange/pending/index.html
+291 -26
View File
@@ -1,9 +1,81 @@
<!--#
layout("/layouts/platform.html"){
#-->
<style>
/* 待确认人员变更沿用原会员变更表单的字段宽度及单选框布局。 */
.pending-member-change-form .el-descriptions-item__label {
width: 15% !important;
}
.pending-member-change-form .welfare-member-radio-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
}
.pending-member-change-form .welfare-member-radio-group .el-radio {
margin-right: 12px;
flex-shrink: 0;
}
/* 批量按钮位于状态切换左侧，并保留少量操作间距。 */
.pending-list-toolbar-actions {
display: flex;
align-items: center;
}
.pending-list-toolbar-actions .pending-batch-change-button {
margin-right: 8px;
}
/* 批量变更弹窗固定在当前浏览器可视区域正中间。 */
.el-dialog.pending-batch-change-dialog {
position: absolute;
top: 50%;
left: 50%;
margin: 0 !important;
transform: translate(-50%, -50%);
}
/* 待确认人员列表固定占满平台内容区，页面本身不产生纵向滚动条。 */
#app .pending-confirm-list-layout {
display: flex;
flex-direction: column;
min-height: 0;
height: calc(100vh - 82px);
overflow: hidden;
}
#app .pending-confirm-query-card {
flex: 0 0 auto;
}
/* 列表卡片填充剩余高度，超出数据仅在表格内部滚动。 */
#app .pending-confirm-table-card {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#app .pending-confirm-table-card > .el-card__body {
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
}
#app .pending-confirm-table-card .ele-table-tool,
#app .pending-confirm-table-card .el-pagination-container {
flex: 0 0 auto;
}
</style>
<div id="app" v-cloak>
<guava ref="guava">
<el-card shadow="never">
<guava ref="guava" @vchange="handleGuavaChange">
<div class="pending-confirm-list-layout">
<el-card class="pending-confirm-query-card" shadow="never">
<search @search="doSearch">
<search-item label="姓名/工号">
<el-input clearable placeholder="请输入姓名或工号"
@@ -35,16 +107,27 @@ layout("/layouts/platform.html"){
</search>
</el-card>
<el-card class="mt10" shadow="never">
<el-card class="mt10 pending-confirm-table-card" shadow="never">
<table-tool label="待确认人员记录">
<el-radio-group @change="doSearch" size="small" v-model="pageForm.pendingConfirmStatus">
<el-radio-button :label="1">待确认</el-radio-button>
<el-radio-button :label="2">已确认</el-radio-button>
</el-radio-group>
<div class="pending-list-toolbar-actions">
<el-button class="pending-batch-change-button" type="primary"
icon="el-icon-edit" size="small"
v-if="pageForm.pendingConfirmStatus === 1"
@click="openBatchChange">批量变更</el-button>
<el-radio-group @change="handleConfirmStatusChange" size="small"
v-model="pageForm.pendingConfirmStatus">
<el-radio-button :label="1">待确认</el-radio-button>
<el-radio-button :label="2">已确认</el-radio-button>
</el-radio-group>
</div>
</table-tool>
<el-table :data="tableData" :size="tableSize" @sort-change="pageOrder"
<el-table :data="tableData" :size="tableSize" :height="pendingTableHeight"
@sort-change="pageOrder"
@selection-change="handleSelectionChange"
class="vi-table" ref="table" row-key="id" style="width: 100%">
<el-table-column v-if="pageForm.pendingConfirmStatus === 1" type="selection"
align="center" fixed="left" width="55"></el-table-column>
<el-table-column :index="indexMethod" align="center" fixed="left"
header-align="center" label="序号" type="index" width="80"></el-table-column>
<el-table-column align="center" header-align="center" label="工号" min-width="120"
@@ -70,30 +153,54 @@ layout("/layouts/platform.html"){
</el-table-column>
<el-table-column align="center" fixed="right" header-align="center" label="操作" width="100">
<template slot-scope="{row}">
<el-button @click="openChange(row.id)" size="mini" type="primary">变更</el-button>
<el-button @click="openChange(row.id)" size="mini" type="primary"
v-if="row.pendingConfirmStatus === 1"
:loading="pendingChangeLoading && pendingChangeLoadingUserId === row.id"
:disabled="pendingChangeLoading">变更</el-button>
<el-button @click="openView(row.id)" size="mini" type="primary"
v-else-if="row.pendingConfirmStatus === 2"
:loading="pendingChangeLoading && pendingChangeLoadingUserId === row.id"
:disabled="pendingChangeLoading">查看</el-button>
</template>
</el-table-column>
</el-table>
<!--#include("/layouts/pagination.html"){}#-->
</el-card>
</div>
<template #public>
<member-change ref="memberChangeRef" :show-three-unit="true" :show-flow-header="false"
@do-back="closeChange" @do-submit="doSubmit"></member-change>
<!--#include("memberChange.html"){}#-->
</template>
</guava>
<el-dialog title="批量变更人员类型" :visible.sync="batchDialogVisible"
append-to-body width="480px" custom-class="pending-batch-change-dialog"
@closed="resetBatchChange">
<el-form :model="batchChangeForm" :rules="batchChangeRules"
ref="batchChangeFormRef" label-width="100px">
<el-form-item label="人员类型" prop="personType">
<el-select v-model="batchChangeForm.personType" filterable
placeholder="请选择人员类型" style="width: 100%">
<el-option v-for="item in pendingPersonTypeOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="batchDialogVisible = false">取消</el-button>
<el-button type="primary" :loading="batchSubmitting"
@click="confirmBatchChange">确认</el-button>
</template>
</el-dialog>
</div>
<script nonce="${cspNonce!}">
<!--#include("../../member/change/common/memberChange.js"){}#-->
<!--#include("memberChange.js"){}#-->
new Vue({
el: "#app",
store,
mixins: [initTableMixins],
components: {
"member-change": MEMBER_CHANGE
},
mixins: [initTableMixins, PENDING_MEMBER_CHANGE],
data() {
return {
pageForm: {
@@ -105,21 +212,135 @@ layout("/layouts/platform.html"){
pendingConfirmStatus: 1
},
unions: [],
units: []
units: [],
selectedPendingUsers: [],
batchDialogVisible: false,
batchSubmitting: false,
batchChangeForm: {
personType: ""
},
batchChangeRules: {
personType: [{required: true, message: "请选择人员类型", trigger: "change"}]
},
pendingTableHeight: 300,
pendingTableResizeObserver: null
}
},
methods: {
/** 分页查询待确认或已确认人员。 */
pageData() {
this.selectedPendingUsers = []
return $.post("/platform/sourcechange/pending/pageData", this.pageForm).then((resp) => {
if (resp.code === 0) {
this.tableData = resp.data.list
this.pageForm.totalCount = resp.data.totalCount
this.$nextTick(() => {
if (this.$refs.table) {
this.$refs.table.clearSelection()
}
this.updatePendingTableHeight()
})
} else {
this.$message.warning(resp.msg)
}
})
},
/** 根据列表卡片可用空间固定表格高度，使大量数据仅在表格内部滚动。 */
updatePendingTableHeight() {
this.$nextTick(() => {
const cardBody = this.$el.querySelector(".pending-confirm-table-card > .el-card__body")
if (!cardBody || cardBody.clientHeight <= 0) {
return
}
const getOuterHeight = (element) => {
if (!element) {
return 0
}
const style = window.getComputedStyle(element)
return element.offsetHeight
+ (parseFloat(style.marginTop) || 0)
+ (parseFloat(style.marginBottom) || 0)
}
const bodyStyle = window.getComputedStyle(cardBody)
const bodyPadding = (parseFloat(bodyStyle.paddingTop) || 0)
+ (parseFloat(bodyStyle.paddingBottom) || 0)
const tableTool = cardBody.querySelector(".ele-table-tool")
const pagination = cardBody.querySelector(".el-pagination-container")
const reservedHeight = bodyPadding
+ getOuterHeight(tableTool)
+ getOuterHeight(pagination)
const nextHeight = Math.max(1, Math.floor(cardBody.clientHeight - reservedHeight))
if (this.pendingTableHeight !== nextHeight) {
this.pendingTableHeight = nextHeight
}
this.$nextTick(() => {
if (this.$refs.table) {
this.$refs.table.doLayout()
}
})
})
},
/** 切换确认状态时清空已勾选人员，并从第一页重新查询。 */
handleConfirmStatusChange() {
this.selectedPendingUsers = []
this.doSearch()
},
/** 保存当前页勾选的待确认人员，供批量变更使用。 */
handleSelectionChange(selection) {
this.selectedPendingUsers = (selection || []).filter((item) => item.pendingConfirmStatus === 1)
},
/** 校验勾选结果后打开批量人员类型弹窗。 */
openBatchChange() {
if (this.selectedPendingUsers.length === 0) {
this.$message.warning("请先勾选需要变更的人员")
return
}
this.batchChangeForm.personType = ""
this.batchDialogVisible = true
},
/** 二次确认批量操作，防止误改多名人员。 */
confirmBatchChange() {
this.$refs.batchChangeFormRef.validate((valid) => {
if (!valid) {
return
}
const selectedCount = this.selectedPendingUsers.length
this.$confirm("是否确认变更已勾选的" + selectedCount + "名人员？", "提示", {
type: "warning"
}).then(() => {
this.submitBatchChange()
}).catch(() => {})
})
},
/** 调用批量接口，在一个事务中修改人员类型并完成确认。 */
submitBatchChange() {
const userIds = this.selectedPendingUsers.map((item) => item.id)
this.batchSubmitting = true
this.$axios.post("/platform/sourcechange/pending/batchChange", {
userIds: JSON.stringify(userIds),
personType: this.batchChangeForm.personType
}).then((resp) => {
if (resp.code === 0) {
this.$message.success(resp.msg)
this.batchDialogVisible = false
this.doSearch()
} else {
this.$message.error(resp.msg)
}
}).catch(() => {
this.$message.error("批量变更失败，请稍后重试")
}).finally(() => {
this.batchSubmitting = false
})
},
/** 关闭弹窗后清理表单，避免保留上次选择的人员类型。 */
resetBatchChange() {
this.batchSubmitting = false
this.batchChangeForm.personType = ""
if (this.$refs.batchChangeFormRef) {
this.$refs.batchChangeFormRef.clearValidate()
}
},
/** 切换工会时重新加载所属单位。 */
flushUnits() {
this.$set(this.pageForm, "unitId", "")
@@ -134,21 +355,47 @@ layout("/layouts/platform.html"){
})
}
},
/** 打开人员变更组件并加载当前人员信息。 */
/** 打开人员详情，根据只读参数进入变更或查看模式。 */
async openPendingMemberDetail(userId, readonly) {
if (this.pendingChangeLoading) {
return
}
this.pendingChangeLoading = true
this.pendingChangeLoadingUserId = userId
try {
await this.initPendingMemberChange(userId, readonly)
this.$refs.guava.public()
} catch (error) {
this.$message.error(error && error.message ? error.message : "人员信息加载失败，请稍后重试")
} finally {
this.pendingChangeLoading = false
this.pendingChangeLoadingUserId = ""
}
},
/** 打开待确认人员可编辑页面。 */
openChange(userId) {
this.$refs.guava.public(() => {
this.$refs.memberChangeRef.init(userId)
})
return this.openPendingMemberDetail(userId, false)
},
/** 打开已确认人员只读查看页面。 */
openView(userId) {
return this.openPendingMemberDetail(userId, true)
},
/** 关闭变更页面并刷新列表。 */
closeChange() {
this.$refs.guava.index()
this.pageData()
},
/** 复用人员变更提交接口，成功后刷新待确认状态。 */
doSubmit(data) {
/** Guava 返回列表时统一清理编辑状态并重新加载列表。 */
handleGuavaChange({newValue}) {
if (newValue === "index") {
this.resetPendingMemberChange()
this.pageData()
this.updatePendingTableHeight()
}
},
/** 调用待确认人员专用接口，直接更新人员及历史记录。 */
doSubmitPendingMemberChange(data) {
const loading = createLoading("正在提交中")
this.$axios.post("/platform/member/change/manage/doSubmitChange", data).then((resp) => {
this.$axios.post("/platform/sourcechange/pending/submitChange", data).then((resp) => {
loading.close()
if (resp.code === 0) {
this.$message.success(resp.msg)
@@ -169,7 +416,8 @@ layout("/layouts/platform.html"){
}),
this.$businessTool.listUnit().then((data) => {
this.units = data
})
}),
this.loadPendingPersonTypeOptions()
])
}
},
@@ -177,6 +425,23 @@ layout("/layouts/platform.html"){
this.initData().then(() => {
this.pageData()
})
},
mounted() {
const listCardBody = this.$el.querySelector(".pending-confirm-table-card > .el-card__body")
if (listCardBody && window.ResizeObserver) {
// 查询区换行或窗口尺寸变化时同步调整表格内部滚动区域。
this.pendingTableResizeObserver = new ResizeObserver(this.updatePendingTableHeight)
this.pendingTableResizeObserver.observe(listCardBody)
}
this.updatePendingTableHeight()
window.addEventListener("resize", this.updatePendingTableHeight)
},
beforeDestroy() {
if (this.pendingTableResizeObserver) {
this.pendingTableResizeObserver.disconnect()
this.pendingTableResizeObserver = null
}
window.removeEventListener("resize", this.updatePendingTableHeight)
}
})
</script>
src/main/resources/views/platform/zhgh/staffmanage/sourcechange/pending/memberChange.html
+232
View File
@@ -0,0 +1,232 @@
<el-card shadow="never">
<table-tool :label="pendingChangeReadonly ? '待确认人员查看' : '待确认人员变更'"></table-tool>
<el-form :model="pendingChangeForm" ref="pendingChangeFormRef" :rules="pendingChangeRules"
:disabled="pendingChangeReadonly"
label-width="0" label-suffix="：" class="flow-task-form pending-member-change-form">
<el-descriptions :column="3" border>
<el-descriptions-item label="工号">
<el-form-item prop="loginname">
<el-input v-model="pendingChangeForm.loginname" readonly size="small"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="姓名">
<el-form-item prop="username">
<el-input v-model="pendingChangeForm.username" readonly size="small"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="性别">
<el-form-item prop="sex">
<el-radio-group :disabled="pendingAllowFields('sex')" v-model="pendingChangeForm.sex" size="small">
<el-radio border label="男">男</el-radio>
<el-radio border label="女">女</el-radio>
</el-radio-group>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="民族">
<el-form-item prop="nation">
<dict-select v-model="pendingChangeForm.nation" code="USER_NATION"
:disabled="pendingAllowFields('nation')" placeholder="请选择民族"
style="width: 100%"></dict-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="出生日期">
<el-form-item prop="birthday">
<el-date-picker v-model="pendingChangeForm.birthday" type="date"
:disabled="pendingAllowFields('birthday')" placeholder="请选择出生日期"
format="yyyy-MM-dd" value-format="yyyy-MM-dd"
style="width: 100%"></el-date-picker>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="政治面貌">
<el-form-item prop="political">
<dict-select v-model="pendingChangeForm.political" code="USER_POLITICAL"
:disabled="pendingAllowFields('political')" placeholder="请选择政治面貌"
style="width: 100%"></dict-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="学历">
<el-form-item prop="education">
<dict-select v-model="pendingChangeForm.education" code="USER_EDUCATION"
:disabled="pendingAllowFields('education')" placeholder="请选择学历"
style="width: 100%"></dict-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="学位">
<el-form-item prop="academicDegree">
<dict-select v-model="pendingChangeForm.academicDegree" code="USER_ACADEMIC_DEGREE"
:disabled="pendingAllowFields('academicDegree')" placeholder="请选择学位"
style="width: 100%"></dict-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="工作单位">
<el-form-item prop="unitId">
<el-input v-model="pendingChangeForm.unitName" disabled placeholder="暂无工作单位"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="所属工会">
<el-form-item prop="unionName">
<el-input v-model="pendingChangeForm.unionName" disabled placeholder="暂无所属工会"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="三级单位">
<el-form-item prop="threeUnitId">
<el-select v-model="pendingChangeForm.threeUnitId" clearable filterable
:disabled="pendingAllowFields('threeUnitId')"
placeholder="请选择三级单位" style="width: 100%">
<el-option v-for="item in pendingThreeUnits" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="身份证号码">
<el-form-item prop="idCard">
<el-input v-model="pendingChangeForm.idCard" :disabled="pendingAllowFields('idCard')"
placeholder="请输入身份证号码" maxlength="18"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="联系电话">
<el-form-item prop="mobile">
<el-input v-model="pendingChangeForm.mobile" :disabled="pendingAllowFields('mobile')"
placeholder="请输入联系电话" maxlength="15"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="电子邮箱">
<el-form-item prop="email">
<el-input v-model="pendingChangeForm.email" :disabled="pendingAllowFields('email')"
placeholder="请输入电子邮箱" maxlength="50"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="在职状态">
<el-form-item prop="userState">
<dict-select v-model="pendingChangeForm.userState" code="USER_STATE"
:disabled="pendingAllowFields('userState')" style="width: 100%"></dict-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="人员类型">
<el-form-item prop="personType">
<el-input v-if="pendingChangeReadonly" v-model="pendingChangeForm.personType"
readonly></el-input>
<el-select v-else v-model="pendingChangeForm.personType" filterable
placeholder="请选择人员类型" style="width: 100%">
<el-option v-for="item in pendingPersonTypeOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="人员属性">
<el-form-item prop="userAttribute">
<dict-select v-model="pendingChangeForm.userAttribute" code="USER_ATTRIBUTE"
:disabled="pendingAllowFields('userAttribute')"
style="width: 100%"></dict-select>
</el-form-item>
</el-descriptions-item>
<template v-if="pendingChangeForm.userState === '退休'">
<el-descriptions-item label="退休日期">
<el-form-item prop="retireDate">
<el-date-picker v-model="pendingChangeForm.retireDate" type="date"
:disabled="pendingAllowFields('retireDate')"
placeholder="请选择退休日期" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="福利享受截止日期">
<el-form-item prop="welfareStopDate">
<el-date-picker v-model="pendingChangeForm.welfareStopDate" type="date"
:disabled="pendingAllowFields('welfareStopDate')"
placeholder="请选择福利享受截止日期" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
</el-form-item>
</el-descriptions-item>
</template>
<el-descriptions-item label="会员状态">
<el-form-item prop="member">
<el-radio-group v-model="pendingChangeForm.member" size="small"
:disabled="pendingAllowFields('member')">
<el-radio border :label="true">会员</el-radio>
<el-radio border :label="false">非会员</el-radio>
</el-radio-group>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="福利会员状态">
<el-form-item prop="welfareMember">
<el-radio-group v-model="pendingChangeForm.welfareMember" size="small"
:disabled="pendingAllowFields('welfareMember')"
class="welfare-member-radio-group">
<el-radio border :label="true">福利会员</el-radio>
<el-radio border :label="false">非福利会员</el-radio>
</el-radio-group>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="入校时间">
<el-form-item prop="arrivalAtSchoolDate">
<el-date-picker v-model="pendingChangeForm.arrivalAtSchoolDate" type="date"
:disabled="pendingAllowFields('arrivalAtSchoolDate')"
placeholder="请选择入校时间" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
</el-form-item>
</el-descriptions-item>
<template v-if="pendingChangeForm.loginname === $store.state.user.loginname">
<el-descriptions-item label="家庭主要成员" :span="3">
<el-form-item prop="families">
<el-table :data="pendingChangeForm.families" border size="small">
<el-table-column label="关系" prop="relation">
<template slot-scope="{row}">
<el-input v-model="row.relation" maxlength="50" :disabled="pendingAllowFields('families')"
placeholder="请输入与本人关系"></el-input>
</template>
</el-table-column>
<el-table-column label="姓名" prop="name">
<template slot-scope="{row}">
<el-input v-model="row.name" maxlength="50" :disabled="pendingAllowFields('families')"
placeholder="请输入姓名"></el-input>
</template>
</el-table-column>
<el-table-column label="工作单位" prop="unit">
<template slot-scope="{row}">
<el-input v-model="row.unit" maxlength="100" :disabled="pendingAllowFields('families')"
placeholder="请输入工作单位"></el-input>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark">
<template slot-scope="{row}">
<el-input v-model="row.remark" maxlength="100" :disabled="pendingAllowFields('families')"
placeholder="请输入备注"></el-input>
</template>
</el-table-column>
<el-table-column width="100">
<template slot="header">
<el-button type="primary" size="mini"
:disabled="pendingChangeReadonly || pendingAllowFields('families')"
@click="pendingChangeForm.families.push({})">添加</el-button>
</template>
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" size="mini"
:disabled="pendingChangeReadonly || pendingChangeForm.families.length === 0 || pendingAllowFields('families')"
@click="pendingChangeForm.families.splice(scope.$index, 1)"></el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="个人简历" :span="3">
<el-form-item prop="personalData">
<text-editor v-if="!pendingAllowFields('personalData')" v-model="pendingChangeForm.personalData"></text-editor>
<div v-else v-html="pendingChangeForm.personalData"></div>
</el-form-item>
</el-descriptions-item>
</template>
</el-descriptions>
</el-form>
<el-row type="flex" justify="end" class="mt20">
<el-button type="primary" plain @click="closeChange">返回</el-button>
<el-button type="primary" v-if="!pendingChangeReadonly"
@click="submitPendingMemberChange">提交变更</el-button>
</el-row>
</el-card>
src/main/resources/views/platform/zhgh/staffmanage/sourcechange/pending/memberChange.js
+141
View File
@@ -0,0 +1,141 @@
/**
* 待确认人员变更页面逻辑。
* 该对象作为页面 mixin 使用，不注册 Vue 子组件，也不包含审批流程相关处理。
*/
const PENDING_MEMBER_CHANGE = {
data() {
return {
pendingChangeUser: {},
pendingChangeForm: {
families: []
},
pendingChangeRules: {
username: [{required: false, message: "必填", trigger: ["change", "blur"]}],
sex: [{required: false, message: "必填", trigger: ["change", "blur"]}]
},
pendingPersonTypeOptions: [],
pendingThreeUnits: [],
pendingChangeReadonly: false,
pendingChangeLoading: false,
pendingChangeLoadingUserId: ""
}
},
methods: {
/** 编辑模式仅允许修改人员类型；查看模式下所有字段均为只读。 */
pendingAllowFields(prop) {
return this.pendingChangeReadonly || prop !== "personType"
},
/** 从人员类型字典中仅保留待确认业务允许变更的两种类型。 */
loadPendingPersonTypeOptions() {
return this.$businessTool.getDictOptions("USER_PERSON_TYPE").then((options) => {
const allowedNames = ["离退休人员", "其他"]
this.pendingPersonTypeOptions = (options || []).filter((item) => allowedNames.includes(item.name))
})
},
/** 初始化人员详情数据；已确认记录进入只读模式，不再提供编辑能力。 */
async initPendingMemberChange(userId, readonly) {
this.pendingChangeReadonly = readonly === true
const resp = await $.post("/platform/member/change/apply/getUserByIdForMemberChange", {userId: userId})
if (resp.code !== 0 || !resp.data) {
throw new Error(resp.msg || "未获取到人员基础信息")
}
this.pendingChangeUser = resp.data
this.fillPendingChangeForm(resp.data)
await this.loadPendingThreeUnits()
},
/** 清理待确认人员变更页面状态，避免返回后残留上一次请求数据。 */
resetPendingMemberChange() {
this.pendingChangeUser = {}
this.pendingChangeForm = {families: []}
this.pendingThreeUnits = []
this.pendingChangeReadonly = false
this.pendingChangeLoading = false
this.pendingChangeLoadingUserId = ""
if (this.$refs.pendingChangeFormRef) {
this.$refs.pendingChangeFormRef.clearValidate()
}
},
/** 将人员基础信息转换为待确认变更表单数据。 */
fillPendingChangeForm(user) {
const unit = user.unit || {}
const union = user.union || {}
const form = {
userId: user.id,
username: user.username,
loginname: user.loginname,
sex: user.sex,
member: user.member === 1 || user.member === true,
welfareMember: user.welfareMember === 1 || user.welfareMember === true,
nation: user.nation,
birthday: user.birthday,
political: user.political,
education: user.education,
academicDegree: user.academicDegree,
position: user.position,
unitId: unit.id ? String(unit.id) : null,
unitName: unit.name || null,
unionId: union.id || null,
unionName: union.name || null,
campus: user.campus,
threeUnitId: user.threeUnitId,
idCard: user.idCard,
mobile: user.mobile,
email: user.email,
userState: user.userState,
personType: user.personType,
preparedBy: user.preparedBy,
userAttribute: user.userAttribute,
aidFundMemberUserType: user.aidFundMemberUserType,
retireDate: user.retireDate,
welfareStopDate: user.welfareStopDate,
arrivalAtSchoolDate: user.arrivalAtSchoolDate,
families: user.families || [],
personalData: user.personalData
}
this.pendingChangeForm = form
},
/** 查询人员所属二级单位下的三级单位。 */
loadPendingThreeUnits() {
this.pendingThreeUnits = []
if (!this.pendingChangeForm.unitId) {
this.$message.warning("当前人员未配置所属单位，无法查询三级单位")
return Promise.resolve()
}
return this.$axios.post("/platform/sys/unit/child", {pid: this.pendingChangeForm.unitId})
.then((resp) => {
if (resp.code === 0) {
this.pendingThreeUnits = resp.data || []
} else {
this.$message.error(resp.msg || "三级单位查询失败")
}
})
.catch(() => {
this.$message.error("三级单位查询失败，请稍后重试")
})
},
/** 校验表单后调用待确认人员专用接口直接完成变更。 */
submitPendingMemberChange() {
this.$refs.pendingChangeFormRef.validate((valid) => {
if (!valid) {
return
}
this.$confirm("提交后将直接更新人员信息，确定提交本次变更吗？", "提示", {type: "warning"})
.then(() => {
const submitData = Object.assign({}, this.pendingChangeForm)
if (submitData.families) {
submitData.families = JSON.stringify(submitData.families)
}
this.doSubmitPendingMemberChange(submitData)
})
.catch(() => {})
})
}
}
}
src/main/resources/views/platform/zhghh5/dayofficework/meeting/mine/index.html
+18 -2
View File
@@ -58,9 +58,13 @@ layout("/layouts/platform_h5.html"){
</div>
</div>
<div class="sign_button">
<van-button v-if="item.joinStatus === true" :disabled="leaveLoading" :loading="leaveLoading" @click.stop="onLeave(item)" size="mini" type="info">请假</van-button>
<van-button v-if="item.joinStatus === true"
:disabled="leaveLoading || isMeetingHandled(item)" :loading="leaveLoading"
@click.stop="onLeave(item)" size="mini" type="info">请假</van-button>
<van-button v-if="item.joinStatus === false" size="mini" type="info" disabled>您已请假</van-button>
<van-button v-if="item.signStatus === false" :disabled="leaveLoading || isSignDisabled(item.startTime)" @click.stop="onSign(item)" size="mini" type="info">签到</van-button>
<van-button v-if="item.signStatus === false"
:disabled="leaveLoading || isMeetingHandled(item) || isSignDisabled(item.startTime)"
@click.stop="onSign(item)" size="mini" type="info">签到</van-button>
<van-button v-if="item.signStatus === true" size="mini" type="info" disabled>您已签到</van-button>
</div>
</div>
@@ -113,6 +117,10 @@ layout("/layouts/platform_h5.html"){
}
},
methods: {
// 已请假或已签到后同时禁用请假、签到按钮，保证移动端与PC端状态一致。
isMeetingHandled(timePeriod) {
return timePeriod.joinStatus === false || timePeriod.signStatus === true
},
// 场次开始前禁用签到，避免用户在会议开始前提交签到操作。
isSignDisabled(startTime) {
return this.$moment().isBefore(this.$moment(startTime))
@@ -163,6 +171,10 @@ layout("/layouts/platform_h5.html"){
}
},
onLeave(row) {
if (this.isMeetingHandled(row)) {
this.$toast(row.signStatus === true ? '您已签到，不能请假' : '您已请假，请勿重复操作')
return
}
if(!row.canLeave) {
this.$toast('该场次不能请假')
return
@@ -171,6 +183,10 @@ layout("/layouts/platform_h5.html"){
this.reasonVisible = true
},
onSign(row) {
if (this.isMeetingHandled(row)) {
this.$toast(row.signStatus === true ? '您已签到，请勿重复操作' : '您已请假，不能签到')
return
}
this.$dialog.confirm({
title: "提示",
message: "您确定要签到吗？"