first commit
This commit is contained in:
@@ -0,0 +1,266 @@
|
||||
<!--#
|
||||
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>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user