266 lines
11 KiB
HTML
266 lines
11 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<div id="app" v-cloak>
|
|
<guava>
|
|
<el-card shadow="never">
|
|
<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>-->
|
|
|
|
<el-date-picker
|
|
v-model="pageForm.yearMonth"
|
|
type="monthrange"
|
|
align="right"
|
|
unlink-panels
|
|
value-format="yyyy-MM"
|
|
style="width: 100%"
|
|
range-separator="至"
|
|
start-placeholder="开始月份"
|
|
end-placeholder="结束月份"
|
|
@change="yearChange"
|
|
:picker-options="pickerOptions">
|
|
</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.reiItemId" filterable placeholder="请报销项目" clearable
|
|
@change="yearChange">
|
|
<el-option :value="item.code" :label="item.name"
|
|
v-for="item in reimbursementItem"></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-card>
|
|
<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-card shadow="never" class="mt10">
|
|
<el-table :data="tableData" 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="column.label"
|
|
:prop="column.prop"
|
|
:sortable="column.sortable"
|
|
align="center"
|
|
header-align="center"
|
|
v-for="column in tableColumns"
|
|
show-overflow-tooltip>
|
|
|
|
<template scope="{row}" v-if="column.prop=='stateId'">
|
|
<span :style="'color:'+row.stateColor">{{row.stateName}}</span>
|
|
</template>
|
|
<template scope="{row}" v-else-if="column.prop=='reimbursementItemSort'">
|
|
{{row.reimbursementItemSort==='fy'?'费用报销':'支付报销'}}
|
|
</template>
|
|
<template scope="{row}" v-else-if="column.prop=='description'">
|
|
<span>{{row.activity_name!=null?'活动名称：'+row.activity_name:'被慰问人：'+row.be_username}}</span>
|
|
</template>
|
|
<template scope="{row}" v-else-if="column.prop=='money'">
|
|
<span>{{row.money}}元</span>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
</el-card>
|
|
</guava>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const chart = {
|
|
condolencesTypeId: undefined
|
|
}
|
|
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: '本月',
|
|
onClick(picker) {
|
|
picker.$emit('pick', [moment().format('YYYY-MM'), moment().format('YYYY-MM')]);
|
|
}
|
|
}, {
|
|
text: '今年至今',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date(new Date().getFullYear(), 0);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近六个月',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setMonth(start.getMonth() - 6);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}]
|
|
},
|
|
tabLoading: false,
|
|
union: [],
|
|
typeOptions: [],
|
|
loading: {
|
|
condolencesType: false,
|
|
},
|
|
pageForm: {
|
|
yearMonth: [moment().startOf('year').format('YYYY-MM'), moment().format('YYYY-MM')]
|
|
},
|
|
tableColumns: [
|
|
{prop: 'loginName', label: '经办人工号', sortable: true},
|
|
{prop: 'userName', label: '姓名', sortable: true},
|
|
{prop: 'unionName', label: '所属工会', sortable: true},
|
|
{prop: 'unitName', label: '所属单位', sortable: true},
|
|
{prop: 'applyTime', label: '申请时间', sortable: true},
|
|
{prop: 'reimbursementItemSort', label: '报销类别', sortable: true},
|
|
{prop: 'reimbursementItemName', label: '报销项目', sortable: true},
|
|
{prop: 'description', label: '备注'},
|
|
{prop: 'money', label: '金额'},
|
|
{prop: 'stateId', label: '申请状态', sortable: true}
|
|
],
|
|
reimbursementItem: [
|
|
{code: "fyww", name: '报销慰问', type: "fy", value: 0},
|
|
{code: "fyhd", name: '活动', type: "fy", value: 0},
|
|
{code: "fyjj", name: '建家', type: "fy", value: 0},
|
|
{code: "fyrc", name: '日常', type: "fy", value: 0},
|
|
{code: "zfww", name: '支付慰问', type: "zf", value: 0},
|
|
{code: "zfzj", name: '专家', type: "zf", value: 0},
|
|
{code: "zflw", name: '劳务', type: "zf", value: 0},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
pageData() {
|
|
sublime.showLoadingbar();
|
|
this.tableLoading = true
|
|
const pageForm = clone(this.pageForm)
|
|
pageForm.yearMonth = JSON.stringify(pageForm.yearMonth)
|
|
$.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");
|
|
},
|
|
yearChange() {
|
|
this.pageData()
|
|
this.getCondolencesType()
|
|
},
|
|
async getCondolencesType() {
|
|
this.loading.condolencesType = true
|
|
const pageForm = clone(this.pageForm)
|
|
pageForm.yearMonth = JSON.stringify(pageForm.yearMonth)
|
|
const {data} = await $.get(loc() + '/condolencesType', pageForm)
|
|
this.reimbursementItem.forEach(v => {
|
|
v.value = data.filter(d => d.reimbursementitemid === v.code).length
|
|
})
|
|
let data2 = this.reimbursementItem
|
|
this.loading.condolencesType = false
|
|
if (chart.condolencesTypeId) {
|
|
chart.condolencesTypeId.changeData(data2)
|
|
return
|
|
}
|
|
chart.condolencesTypeId = new G2Plot.Column('condolencesTypeId', {
|
|
data: data2,
|
|
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() {
|
|
|
|
await this.pageData()
|
|
await this.getTypeOptions()
|
|
this.union = await getUnions()
|
|
await this.getCondolencesType()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#--> |