353 lines
16 KiB
HTML
353 lines
16 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"
|
|
clearable
|
|
@change="doSearch"
|
|
placeholder="选择年度"
|
|
type="year" style="width: 100%"
|
|
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-input @keyup.enter.native="doSearch" clearable placeholder="请输入内容"
|
|
style="width: 100%"
|
|
v-model="pageForm.projectName">
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-query">
|
|
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="mt10" shadow="never">
|
|
<table-tool :app="this" label="个人缴费列表">
|
|
</table-tool>
|
|
|
|
<el-table :data="tableData" :size="tableSize"
|
|
@sort-change="pageOrder"
|
|
class="vi-table"
|
|
ref="table" row-key="id" style="width: 100%"
|
|
v-loading="tableLoading">
|
|
<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==='isPayment'">
|
|
<span style="color: #00aa3a" v-if="row.isPayment">已缴</span>
|
|
<span style="color: red" v-else>未缴</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" label="是否确认金额">
|
|
<template scope="{row}">
|
|
<span style="color: #00aa3a" v-if="row.paymentMoney!=null">已确定</span>
|
|
<span style="color: red" v-else>未确定</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userOnline" align="center" header-align="center"
|
|
label="操作"
|
|
width="100px">
|
|
<template scope="scope">
|
|
<el-dropdown @command="dropdownCommand">
|
|
<el-button :loading="submitLoading" plain size="mini">
|
|
<i class="ti-settings"></i>
|
|
<span class="ti-angle-down"></span>
|
|
</el-button>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item :command="{type:'view',data:scope.row}">
|
|
查看
|
|
</el-dropdown-item>
|
|
<el-dropdown-item v-if="!scope.row.isPayment" :command="{type:'edit',data:scope.row}">
|
|
设为已缴
|
|
</el-dropdown-item>
|
|
<el-dropdown-item v-if="scope.row.paymentMoney==null" :command="{type:'pay',data:scope.row}">
|
|
确定缴费金额
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
</el-card>
|
|
</template>
|
|
|
|
<template #pay>
|
|
<el-form :model="formData" :rules="formRules" label-width="100px" ref="form">
|
|
<vi-title title="缴费信息"></vi-title>
|
|
<el-form-item label="缴费项目" prop="projectName">
|
|
<span>{{formData.projectName}}</span>
|
|
</el-form-item>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="人员类型" size="medium">
|
|
<span>{{formData.personType}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="会员类型" size="medium">
|
|
<span>{{formData.payPersonnel}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="需缴费用" size="medium">
|
|
<div v-for="item in payStandard" style="display:flex;justify-content: space-between;margin-left: 30px">
|
|
<template v-if="item.payModeValueList.length>0" >
|
|
(
|
|
<template v-for="(o,i) in item.payModeValueList">
|
|
<el-input @change="getMoney(item)" placeholder="" style="width: 200px;" v-model="o.value">
|
|
<template slot="prepend">{{o.name}}</template>
|
|
</el-input>
|
|
<span v-if="(i+1)!=item.payModeValueList.length">+</span>
|
|
</template>
|
|
) * 0.5% *{{formData.paymentMonth}}个月
|
|
</template>
|
|
<template v-else>
|
|
<span>{{item.payModeValue}}</span>*{{formData.paymentMonth}}个月
|
|
</template>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="缴费金额" prop="paymentMoney" size="medium">
|
|
<el-input disabled="true" placeholder="" style="width: 200px;" v-model="formData.paymentMoney">
|
|
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-form>
|
|
<div>
|
|
<el-button @click="doSave" v-loading="submitLoading" style="float: right"
|
|
type="primary">
|
|
提交
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template #view>
|
|
<el-form :model="formData" label-width="100px" ref="form">
|
|
<vi-title title="缴费信息"></vi-title>
|
|
<el-form-item label="缴费项目" prop="projectName">
|
|
<span>{{formData.projectName}}</span>
|
|
</el-form-item>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="人员类型" size="medium">
|
|
<span>{{formData.personType}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="会员类型" size="medium">
|
|
<span>{{formData.payPersonnel}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="缴纳标准" size="medium">
|
|
<div v-for="item in payStandard" style="display:flex;justify-content: space-between;margin-left: 30px">
|
|
<span v-if="item.payModeValueList.length>0" >
|
|
(
|
|
<span v-for="(o,i) in item.payModeValueList">
|
|
<span>{{o.name}}</span>
|
|
<span v-if="(i+1)!=item.payModeValueList.length">+</span>
|
|
</span>
|
|
) * 0.5% *{{formData.paymentMonth}}个月
|
|
</span>
|
|
<template v-else>
|
|
<span>{{item.payModeValue}}</span>*{{formData.paymentMonth}}个月
|
|
</template>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="缴费金额" size="medium">
|
|
<span>{{formData.paymentMoney}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="缴费月份" size="medium">
|
|
<span>{{formData.paymentStartMonth}} - {{formData.paymentEndMonth}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="缴费开始时间" size="medium">
|
|
<span>{{formData.startTime}} - {{formData.endTime}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-form>
|
|
</template>
|
|
</guava>
|
|
</div>
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
pageForm: {
|
|
year: moment().format('YYYY'),
|
|
},
|
|
tableColumns: [
|
|
{prop: 'year', label: '年度'},
|
|
{prop: 'projectName', label: '缴费项目名称'},
|
|
{prop: 'paymentStartMonth', label: '缴费开始月份'},
|
|
{prop: 'paymentEndMonth', label: '缴费截止月份'},
|
|
{prop: 'paymentMonth', label: '需要缴费月数'},
|
|
{prop: 'startTime', label: '缴费开始时间'},
|
|
{prop: 'endTime', label: '缴费截止时间'},
|
|
{prop: 'paymentMoney', label: '缴费金额'},
|
|
{prop: "isPayment", label: "是否缴费", sortable: true},
|
|
],
|
|
payStandard:{},
|
|
formRules: {
|
|
paymentMoney: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
|
},
|
|
}
|
|
},
|
|
components: {
|
|
'guava': httpVueLoader('/components/plugins/Guava.vue'),
|
|
},
|
|
methods: {
|
|
dropdownCommand(command) {
|
|
const {type, data} = command
|
|
if (type === 'edit') {
|
|
this.doPay(data)
|
|
}
|
|
if (type === 'pay'){
|
|
this.openPay(data)
|
|
}
|
|
if (type === 'view'){
|
|
this.openView(data)
|
|
}
|
|
},
|
|
openPay(data){
|
|
const payStandards=JSON.parse(data.payStandards)
|
|
|
|
this.payStandard=payStandards.filter(item => item.personType===data.personType&&item.payPersonnel===data.payPersonnel)
|
|
if (this.payStandard.length>0&&this.payStandard[0].payModeValueList===null){
|
|
this.formData.paymentMoney=+this.payStandard[0].payModeValue*+this.formData.paymentMonth
|
|
}
|
|
this.formData=data
|
|
this.$refs.guava.pay()
|
|
},
|
|
async doPay(data) {
|
|
const confirm = await this.$confirm("您确定要更改缴费信息吗?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
})
|
|
if (confirm === "confirm") {
|
|
const formData={
|
|
ids:JSON.stringify([data.id]),
|
|
paymentMoney:data.paymentMoney,
|
|
isPay:data.isPay,
|
|
remark:"缴费"
|
|
}
|
|
const resp = await $.post("/platform/member/payment/summary/modify", formData)
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.pageData()
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
}
|
|
},
|
|
openView(data) {
|
|
const payStandards=JSON.parse(data.payStandards)
|
|
|
|
this.payStandard=payStandards.filter(item => item.personType===data.personType&&item.payPersonnel===data.payPersonnel)
|
|
if (this.payStandard.length>0&&this.payStandard[0].payModeValueList===null){
|
|
this.formData.paymentMoney=+this.payStandard[0].payModeValue*+this.formData.paymentMonth
|
|
}
|
|
this.formData=data
|
|
this.$refs.guava.view()
|
|
},
|
|
async doSave() {
|
|
const formValid = await this.$refs["form"].validate()
|
|
if (formValid) {
|
|
this.submitLoading = true
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '数据保存中请稍后',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
const formData = clone(this.formData)
|
|
const resp = await $.post(loc() + '/doSave', formData)
|
|
loading.close()
|
|
this.submitLoading = false
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.$refs.guava.index()
|
|
this.pageData()
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
}
|
|
},
|
|
getMoney(item){
|
|
this.formData.paymentMoney=0
|
|
let money=0
|
|
item.payModeValueList.forEach(o=>{
|
|
money=+o.value+money
|
|
})
|
|
this.formData.paymentMoney=money*0.005*+this.formData.paymentMonth
|
|
}
|
|
},
|
|
async created() {
|
|
this.pageData()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|