Files
zhgh_hrbnu/src/main/resources/views/platform/fitnessWalk/stepStatistics.html
T
2025-02-28 17:01:09 +08:00

236 lines
10 KiB
HTML

<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
<guava ref="guava">
<template>
<el-card shadow="never">
<div class="search">
<div class="search-item">
<div class="search-item-label">年份:</div>
<div class="search-item-option">
<el-date-picker
:clearable="false"
placeholder="选择年"
style="width: 100%"
@change="getCascadersActivity"
type="year"
v-model="pageForm.year"
value-format="yyyy"
></el-date-picker>
</div>
</div>
<div class="search-item">
<div class="search-item-label">活动:</div>
<div class="search-item-option">
<el-cascader
style="width: 100%"
@change="doSearch();getActivityById()"
v-model="pageForm.activityId"
:options="activityOptions"
:props="{ checkStrictly: true,emitPath:false}"
:clearable="false"
></el-cascader>
</div>
</div>
<div class="search-item">
<div class="search-item-label">日期范围:</div>
<div class="search-item-option">
<el-date-picker
end-placeholder="结束日期"
range-separator="至"
start-placeholder="开始日期"
type="daterange"
style="width: 100%"
@change="activityDateChange"
value-format="yyyy-MM-dd"
v-model="pageForm.activityDate"
></el-date-picker>
</div>
</div>
<div class="search-item">
<div class="search-item-label">姓名工号:</div>
<div class="search-item-option">
<el-input v-model="pageForm.searchKeyword" max="20" placeholder="请输入工号或者姓名查询" clearable></el-input>
</div>
</div>
<template v-if="${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')}">
<div class="search-item">
<div class="search-item-label">所属工会:</div>
<div class="search-item-option">
<el-select
@change="unionChange"
clearable
filterable
style="width: 100%"
placeholder="请选择所属工会"
v-model="pageForm.unionId"
>
<el-option :key="item.id" :label="item.unionname" :value="item.id" v-for="item in unionOptions"></el-option>
</el-select>
</div>
</div>
<div class="search-item">
<div class="search-item-label">所属单位:</div>
<div class="search-item-option">
<el-select
@change="doSearch"
clearable
filterable
style="width: 100%"
placeholder="请选择所属单位"
v-model="pageForm.unitId"
>
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unitOptions"></el-option>
</el-select>
</div>
</div>
</template>
<div class="search-query">
<el-button @click="doSearch" icon="el-icon-search" type="primary"></el-button>
</div>
</div>
</el-card>
<el-card class="mt20" shadow="never">
<table-tool :app="this" label="步数列表">
<template #func>
<el-button @click="exportExcel" class="ml10" size="small" type="primary">导出</el-button>
</template>
</table-tool>
<el-table :data="tableData" :size="tableSize">
<el-table-column
:index="indexMethod"
align="center"
header-align="center"
label="序号"
type="index"
width="80px"
></el-table-column>
<el-table-column
:label="column.label"
:prop="column.prop"
:sortable="column.sortable"
align="center"
header-align="center"
show-overflow-tooltip
v-for="column in tableColumns"
>
<template scope="{row}" v-if="column.prop==='registerNum'">
<el-link @click="openView(row.id)" type="primary">{{row.registerNum}}</el-link>
</template>
</el-table-column>
</el-table>
<!--#include("/layouts/pagination.html"){}#-->
</el-card>
</template>
</guava>
</div>
<script>
let vue = new Vue({
el: "#app",
mixins: [initTableMixins],
data() {
return {
tableColumns: [
{ label: "姓名", prop: "username" },
{ label: "工号", prop: "loginname" },
{ label: "单位", prop: "unitname" },
{ label: "基层工会", prop: "unionname", sortable: true },
{ label: "当前步数", prop: "step", sortable: true },
{ label: "日期", prop: "prizeData", sortable: true }
],
unionOptions: [],
unitOptions: [],
pageForm: {
unionId: "",
unitId: "",
activityDate: [],
activityId: null,
year: new Date().getFullYear() + ""
},
activityOptions: [],
activityDatePickerOptions: {
disabledDate: (time) => {
return time <= moment(this.activityInfo.endTime) || time >= moment(this.activityInfo.startTime)
}
},
activityInfo: {}
}
},
methods: {
exportExcel() {
const { activityId, unionId, unitId, activityDate } = this.pageForm
let activityDate1 = []
if (activityDate && activityDate.length > 0) {
activityDate1 = JSON.stringify(activityDate)
}
window.open(
loc() + "/exportExcel?activityId=" + activityId + "&unionId=" + unionId + "&unitId=" + unitId + "&activityDate=" + activityDate1
)
},
activityDateChange() {
// this.$set(this.pageForm, "activityDate", [])
},
async unionChange(val) {
this.pageForm.unitId = null
this.unitOptions = await getUnits(val)
this.doSearch()
},
async getCascadersActivity() {
const { code, data } = await $.get(loc() + "/getCascadersActivity", { year: this.pageForm.year })
this.activityOptions = data
if (this.activityOptions && this.activityOptions.length > 0) {
this.pageForm.activityId = this.activityOptions[0].value
this.doSearch()
} else {
this.tableData = []
}
},
pageData() {
sublime.showLoadingbar()
this.tableLoading = true
let pageForm = clone(this.pageForm)
if (pageForm.activityDate && pageForm.activityDate.length > 0) {
pageForm.activityDate = JSON.stringify(pageForm.activityDate)
}
$.post(
loc() + "/pageData",
pageForm,
(data) => {
sublime.closeLoadingbar()
this.tableLoading = false
if (data.code === 0) {
this.tableData = data.data.list
this.pageForm.totalCount = data.data.totalCount
} else {
this.$message.error(data.msg)
}
},
"json"
)
},
async getActivityById() {
const resp = await $.get("/platform/fitnessWalk/activityManage/findOne", { id: this.pageForm.activityId })
if (resp.code === 0) {
this.activityInfo = resp.data
}
}
},
async created() {
this.unionOptions = await getUnions(null)
this.unitOptions = await getUnits(null)
await this.getCascadersActivity()
await this.getActivityById()
}
})
</script>
<!--#
}
#-->