172 lines
6.2 KiB
HTML
172 lines
6.2 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<div id="app" v-cloak>
|
|
<el-row class="header navbar bg-white shadow">
|
|
<div class="btn-group tool-button mt5">
|
|
<el-date-picker
|
|
v-model="pageForm.year"
|
|
type="year"
|
|
style="width: 100%"
|
|
value-format="yyyy"
|
|
:clearable="false"
|
|
placeholder="选择年"
|
|
clearable
|
|
@change="yearChange">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="btn-group tool-button mt5">
|
|
<el-select v-model="pageForm.unionid" filterable placeholder="请选择工会" clearable @change="yearChange">
|
|
<el-option
|
|
v-for="item in union"
|
|
:key="item.id"
|
|
:label="item.unionname"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="btn-group tool-button mt5">
|
|
<el-select v-model="pageForm.type" placeholder="请选择慰问类型" clearable @change="yearChange">
|
|
<el-option v-for="item in typeOptions" :value="item.id"
|
|
:label="item.name+' ('+item.code+')'"></el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="btn-group tool-button mt5">
|
|
<el-select v-model="pageForm.way" placeholder="请选择慰问方式" clearable @change="yearChange">
|
|
<el-option
|
|
v-for="(v,k) in condolence.way"
|
|
:key="k"
|
|
:label="v"
|
|
:value="v">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</el-row>
|
|
<el-col class="center-col">
|
|
<div style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
|
|
v-loading="loading.condolencesType"
|
|
id="condolencesTypeId"></div>
|
|
</el-col>
|
|
|
|
|
|
<el-table :data="tableData" style="width: 100%" row-key="id" @sort-change="pageOrder"
|
|
v-loading="tabLoading">
|
|
<el-table-column align="center" header-align="center" label="序号" width="120px">
|
|
<template scope="scope">
|
|
<span>{{scope.$index+(pageForm.pageNumber - 1) * pageForm.pageSize + 1}} </span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column label="被慰问人" prop="be_username" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column label="所属工会" prop="unionname" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column label="申请时间" prop="apply_time" header-align="center" sortable
|
|
align="center"></el-table-column>
|
|
<el-table-column label="慰问类型" prop="type_name" header-align="center" sortable
|
|
align="center">
|
|
</el-table-column>
|
|
<el-table-column label="慰问方式" prop="way" header-align="center"
|
|
align="center">
|
|
</el-table-column>
|
|
|
|
<el-table-column align="center" prop="state_id" header-align="center" label="申请状态" sortable>
|
|
<template scope="scope">
|
|
<span :style="'color:'+scope.row.state_color">{{scope.row.state_name}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const chart = {
|
|
condolencesTypeId: undefined
|
|
}
|
|
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
tabLoading: false,
|
|
union: [],
|
|
typeOptions: [],
|
|
loading: {
|
|
condolencesType: false,
|
|
},
|
|
pageForm: {
|
|
year: new Date().getFullYear() + ""
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
yearChange() {
|
|
this.pageData()
|
|
this.getCondolencesType()
|
|
},
|
|
async getCondolencesType() {
|
|
this.loading.condolencesType = true
|
|
const resp = await $.get(loc() + '/condolencesType', this.pageForm)
|
|
requestLaterFun(resp, (data) => {
|
|
this.loading.condolencesType = false
|
|
|
|
if (chart.condolencesTypeId) {
|
|
chart.condolencesTypeId.changeData(data)
|
|
return
|
|
}
|
|
|
|
chart.condolencesTypeId = new G2Plot.Column('condolencesTypeId', {
|
|
data,
|
|
autoFit: true,
|
|
xField: 'name',
|
|
yField: 'value',
|
|
label: {
|
|
// 可手动配置 label 数据标签位置
|
|
position: 'middle', // 'top', 'bottom', 'middle',
|
|
// 配置样式
|
|
style: {
|
|
fill: '#FFFFFF',
|
|
opacity: 0.6,
|
|
},
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoHide: true,
|
|
autoRotate: false,
|
|
},
|
|
},
|
|
meta: {
|
|
label: {
|
|
alias: '类型',
|
|
},
|
|
value: {
|
|
alias: '慰问数',
|
|
},
|
|
},
|
|
});
|
|
chart.condolencesTypeId.render();
|
|
})
|
|
},
|
|
async getTypeOptions() {
|
|
const {code, data} = await $.get("/platform/condolence/type/getAll")
|
|
if (code == 0) {
|
|
this.typeOptions = data
|
|
}
|
|
},
|
|
},
|
|
async created() {
|
|
this.pageData()
|
|
this.getCondolencesType()
|
|
this.getTypeOptions()
|
|
this.union = await getUnions()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#--> |