This commit is contained in:
2025-03-11 19:09:45 +08:00
parent 163731588c
commit ec49bcfa8b
6 changed files with 887 additions and 14 deletions
@@ -0,0 +1,382 @@
<!--#
layout("/layouts/platform.html"){
#-->
<style>
.top_block {
width: 100%;
padding: 20px 80px;
border-bottom: 10px solid rgb(240, 240, 240);
}
.top_title {
font-size: 14px;
color: #808492;
height: 30px;
line-height: 30px;
margin-bottom: 5px;
}
.top_num {
font-size: 26px;
}
.cut-off-line {
width: 1px;
height: 70%;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: rgb(230, 230, 230);
}
.chartTitle {
font-size: 14px;
color: #808492;
margin-bottom: 20px;
}
</style>
<div id="app" v-cloak>
<div class="p10">
<el-card shadow="never">
<div class="top_block" v-loading="top_block_loading">
<el-row gutter="60">
<div style="position: absolute; top: -35px; right: -8px">
<el-date-picker
class="year"
style="width: 120px"
size="mini"
v-model="numForm.startYear"
type="year"
:clearable="false"
value-format="yyyy"
@change="if(numForm.endYear){getNumData();}"
placeholder="选择年"
></el-date-picker>
-
<el-date-picker
class="year"
style="width: 120px"
size="mini"
v-model="numForm.endYear"
type="year"
:clearable="false"
value-format="yyyy"
@change="if(numForm.startYear){getNumData();}"
placeholder="选择年"
></el-date-picker>
</div>
<el-col :span="6" style="position: relative">
<div class="top_title">总缴费金额</div>
<div class="top_num">{{numData.payMoney?numData.payMoney:'0'}}</div>
<div class="cut-off-line"></div>
</el-col>
<el-col :span="6" style="position: relative">
<div class="top_title">退款金额</div>
<div class="top_num">{{numData.refundMoney?numData.refundMoney:'0'}}</div>
<div class="cut-off-line"></div>
</el-col>
<el-col :span="6" style="position: relative">
<div class="top_title">退款订单数</div>
<div class="top_num">{{numData.refundSize?numData.refundSize:'0'}}</div>
<div class="cut-off-line"></div>
</el-col>
<el-col :span="6" style="position: relative">
<div class="top_title">总缴费人数</div>
<div class="top_num">{{numData.paySize?numData.paySize:'0'}}</div>
</el-col>
</el-row>
</div>
<el-row style="padding: 30px 0; border-bottom: 10px solid rgb(240, 240, 240)">
<div style="position: absolute; top: 25px; right: 40px; z-index: 200">
<el-date-picker
class="year"
style="width: 120px"
size="mini"
v-model="oneForm.startYear"
type="year"
:clearable="false"
value-format="yyyy"
@change="if(oneForm.endYear){getPayProjectChart();getPayMoneyChart();}"
placeholder="选择年"
></el-date-picker>
-
<el-date-picker
class="year"
style="width: 120px"
size="mini"
v-model="oneForm.endYear"
type="year"
:clearable="false"
value-format="yyyy"
@change="if(oneForm.startYear){getPayProjectChart();getPayMoneyChart();}"
placeholder="选择年"
></el-date-picker>
</div>
<el-col :span="12" style="padding: 0 20px" v-loading="payProjectLoading">
<div class="chartTitle">已缴人数</div>
<div id="payProjectChart" style="width: 100%; height: 330px"></div>
</el-col>
<el-col :span="12" style="padding: 0 20px" v-loading="payMoneyLoading">
<div class="chartTitle">已缴金额</div>
<div id="payMoneyChart" style="width: 100%; height: 330px"></div>
</el-col>
</el-row>
<el-row style="padding: 30px 0; border-bottom: 10px solid rgb(240, 240, 240)">
<div style="position: absolute; top: 25px; right: 250px; z-index: 999">
<el-date-picker
class="year"
style="width: 120px"
size="mini"
v-model="unionForm.year"
type="year"
:clearable="false"
value-format="yyyy"
@change="getProjectList"
placeholder="选择年"
></el-date-picker>
</div>
<div style="position: absolute; top: 25px; right: 40px; z-index: 999">
<el-select
placeholder="请选择项目"
v-model="unionForm.paymentProjectId"
style="width: 100%"
size="mini"
:clearable="false"
@change="doSearch"
@clear="doSearch"
filterable="true"
>
<el-option v-for="item in paymentProjectList"
:label="item.projectName" :value="item.id"></el-option>
</el-select>
</div>
<el-col :span="24" style="padding: 0 20px" v-loading="all_union_loading">
<div class="chartTitle" style="margin-bottom: 50px">
</div>
<div id="allUnionChart" style="width: 100%; height: 300px"></div>
</el-col>
</el-row>
</el-card>
</div>
</div>
<script>
new Vue({
el: "#app",
mixins: [initTableMixins],
data() {
return {
oneForm: {
startYear: new Date().getFullYear() - 2 + "",
endYear: new Date().getFullYear() + ""
},
twoForm: {
startYear: new Date().getFullYear() - 2 + "",
endYear: new Date().getFullYear() + ""
},
numForm: {
startYear: new Date().getFullYear() - 2 + "",
endYear: new Date().getFullYear() + ""
},
payProjectLoading: false,
refundProjectLoading: false,
payMoneyLoading: false,
top_block_loading: false,
numData: {},
all_union_loading: false,
unionForm: {
year: new Date().getFullYear() + ""
},
paymentProjectList:[],
}
},
methods: {
async getNumData() {
this.top_block_loading = true
const resp = await $.post("/platform/member/payment/chartSummary/getNumData", this.numForm)
if (resp.code === 0) {
this.numData = resp.data
}
this.top_block_loading = false
},
async getPayProjectChart() {
this.payProjectLoading = true
const resp = await $.post("/platform/member/payment/chartSummary/getPayProjectChart", this.oneForm)
if (resp.code === 0) {
let { data } = resp
document.getElementById("payProjectChart").innerHTML = ""
const config = {
xField: "projectName",
yField: "num",
label: {
position: "middle", // 'top', 'bottom', 'middle',
style: {
fill: "#FFFFFF",
opacity: 0.6
}
},
xAxis: {
label: {
autoHide: true,
autoRotate: false
}
},
color: ({ type }) => {
return "#63DAAB"
},
meta: {
projectName: {
alias: "项目"
},
num: {
alias: "缴费人数"
}
}
}
const plot = new G2Plot.Column(document.getElementById("payProjectChart"), {
data,
...config
})
plot.render()
}
this.payProjectLoading = false
},
async getPayMoneyChart() {
this.payMoneyLoading = true
const resp = await $.post("/platform/member/payment/chartSummary/getPayMoneyChart", this.oneForm)
if (resp.code === 0) {
let { data } = resp
document.getElementById("payMoneyChart").innerHTML = ""
const config = {
xField: "projectName",
yField: "money",
label: {
position: "middle", // 'top', 'bottom', 'middle',
style: {
fill: "#FFFFFF",
opacity: 0.6
}
},
xAxis: {
label: {
autoHide: true,
autoRotate: false
}
},
color: ({ type }) => {
return "#63DAAB"
},
meta: {
projectName: {
alias: "项目"
},
money: {
alias: "金额(元)"
}
}
}
const plot = new G2Plot.Column(document.getElementById("payMoneyChart"), {
data,
...config
})
plot.render()
}
this.payMoneyLoading = false
},
async allUnionMoney() {
this.all_union_loading = true
const resp = await $.get("/platform/member/payment/chartSummary/allUnionMoney", {
paymentProjectId: this.unionForm.paymentProjectId
})
if (resp.code === 0) {
let { data } = resp
document.getElementById("allUnionChart").innerHTML = ""
const config = {
isStack: true,
legend: {
position: "top-right",
flipPage: false
},
autoFit: true,
title: {
visible: true,
text: "年工会经费及活动详情"
},
description: {
visible: true,
text: "单位(元)"
},
xField: "unionname",
yField: "money",
stackField: "type",
color: ["#5B8FF9", "#5AD8A6"],
xAxis: {
label: {
formatter: (v) => {
if (data.length > 30 && v.length > 3) {
return v.substr(0, 2) + "..."
} else if (data.length > 20 && v.length > 4) {
return v.substr(0, 3) + "..."
} else if (data.length > 10 && v.length > 6) {
return v.substr(0, 5) + "..."
}
return v
}
}
},
yAxis: {},
meta: {
unionname: {
alias: "工会"
},
money: {
alias: "金额"
}
},
connectedArea: {
visible: true,
triggerOn: false
}
}
const plot = new G2Plot.Column(document.getElementById("allUnionChart"), {
data,
...config
})
plot.render()
}
this.all_union_loading = false
},
async getProjectList() {
const resp = await $.get("/platform/member/payment/project/getAllProject", { year: this.unionForm.year })
if (resp.code === 0) {
this.paymentProjectList = resp.data
this.$set(this.unionForm, "paymentProjectId", this.paymentProjectList ? this.paymentProjectList[0].id : null)
await this.allUnionMoney()
}
}
},
async created() {
await this.getPayProjectChart()
await this.getPayMoneyChart()
await this.getNumData()
await this.getProjectList()
}
})
</script>
<!--#
}
#-->
@@ -16,7 +16,7 @@ layout("/layouts/platform.html"){
<div class="search-item-option">
<el-date-picker
:clearable="false"
@change="doSearch();getProjectList()"
@change="doSearch"
placeholder="选择年度"
type="year"
style="width: 100%"
@@ -27,7 +27,7 @@ layout("/layouts/platform.html"){
</div>
</div>
</el-card>
<el-card shadow="never">
<el-card shadow="never" class="mt10">
<table-tool label="缴费列表" :app="this">
<template #func>
<el-radio-group @change="doSearch" class="mr10" size="small"
@@ -132,7 +132,7 @@ layout("/layouts/platform.html"){
<div v-if="payActive===1" class="mt25">
<el-form-item label="商品订单">
{{formData.tradingOrderNo}}
{{formData.transactionId}}
</el-form-item>
<el-form-item label="支付金额">
<div style="color: #2cd000;font-size: 25px">¥ {{formData.paymentMoney}}</div>
@@ -178,7 +178,7 @@ layout("/layouts/platform.html"){
</div>
</div>
<el-form-item label="商品订单">
{{formData.tradingOrderNo}}
{{formData.transactionId}}
</el-form-item>
<el-form-item label="支付金额">
<div style="color: #2cd000;font-size: 25px">¥ {{formData.paymentMoney}}
@@ -198,7 +198,7 @@ layout("/layouts/platform.html"){
</div>
<script>
const vue = new Vue({
new Vue({
el: "#app",
mixins: [initTableMixins],
data() {
@@ -246,7 +246,10 @@ layout("/layouts/platform.html"){
this.qrcodeLoading = true
const paymentMoney = Math.floor(this.formData.paymentMoney * 100)
this.payActive = this.payActive + 1
const resp = await $.post("/platform/member/payment/mine/pcOrderPay", { paymentMoney })
const resp = await $.post("/platform/member/payment/mine/pcOrderPay", {
paymentMoney: paymentMoney,
paymentInfoId: this.formData.paymentInfoId
})
if (resp.code === 0) {
const data = JSON.parse(resp.data)
this.$nextTick(() => {
@@ -259,7 +262,7 @@ layout("/layouts/platform.html"){
correctLevel: 3
})
})
this.formData.tradingOrderNo = data.tradingOrderNo
this.formData.transactionId = data.transactionId
await this.getIsPay()
}
this.qrcodeLoading = false
@@ -301,12 +304,8 @@ layout("/layouts/platform.html"){
this.$set(this.formData, "payModeValueList", payStandard.payModeValueList)
this.$set(this.formData, "paymentMoney", 0)
}
this.payVisible = true
},
doSubmit() {
}
},
created() {
this.pageData()
@@ -0,0 +1,210 @@
<!--#
layout("/layouts/platform.html"){
#-->
<style>
</style>
<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"
@change="doSearch();getProjectList()"
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-select
placeholder="请选择项目"
v-model="pageForm.paymentProjectId"
style="width: 100%"
:clearable="false"
@change="doSearch"
@clear="doSearch"
filterable="true"
>
<el-option v-for="item in paymentProjectList"
:label="item.projectName" :value="item.id"></el-option>
</el-select>
</div>
</div>
<div class="search-item">
<div class="search-item-label">工号/姓名:</div>
<div class="search-item-option">
<el-input placeholder="请输入工号/姓名"
v-model="pageForm.searchKeyword" clearable>
<template slot="prepend">姓名/工号</template>
</el-input>
</div>
</div>
<div class="search-item">
<div class="search-item-label">交易单号:</div>
<div class="search-item-option">
<el-input placeholder="请输入交易单号"
v-model="pageForm.transactionId" clearable>
</el-input>
</div>
</div>
<div class="search-item">
<div class="search-item-label">
<el-button @click="doSearch" type="primary">查询</el-button>
</div>
</div>
</div>
</el-card>
<el-card shadow="never" class="mt10">
<table-tool label="缴费列表" :app="this">
<template #func>
<el-radio-group @change="doSearch" class="mr10" size="small"
v-model="pageForm.isRefund">
<el-radio-button :label="3">全部</el-radio-button>
<el-radio-button :label="0">未退款</el-radio-button>
<el-radio-button :label="1">已退款</el-radio-button>
</el-radio-group>
</template>
</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==='isRefund'">
<span v-if="row.isRefund" style="color: red">已全额退款</span>
<span v-else style="color: #2cd000">支付成功</span>
</template>
<template scope="{row}" v-else-if="column.prop==='tradingAmount'">
{{row.tradingAmount*0.01}}
</template>
<template scope="{row}" v-else-if="column.prop==='refundTime'">
<span v-if="!row.refundTime"></span>
<span
v-else>{{moment(row.refundTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
</template>
</el-table-column>
<el-table-column align="center" header-align="center" label="操作"
prop="userOnline" width="200px">
<template scope="{row}">
<el-button :disabled="row.isRefund" @click="doRefund(row)"
size="mini" type="danger" :loading="submitLoading">退款
</el-button>
</template>
</el-table-column>
</el-table>
<!--#include("/layouts/pagination.html"){}#-->
</el-card>
</template>
</guava>
</div>
<script>
new Vue({
el: "#app",
mixins: [initTableMixins],
data() {
return {
paymentProjectList: [],
pageForm: {
isRefund: 3,
year: moment().format("YYYY")
},
tableColumns: [
{ prop: "loginName", label: "工号", sortable: true },
{ prop: "userName", label: "姓名", sortable: true },
{ prop: "unitName", label: "单位", sortable: true },
{ prop: "unionName", label: "工会", sortable: true },
{ prop: "projectName", label: "项目名称", sortable: true },
{ prop: "tradingAmount", label: "缴费金额(元)", sortable: true },
{ prop: "paymentTime", label: "支付时间", sortable: true },
{ prop: "transactionId", label: "交易单号", sortable: true },
{ prop: "isRefund", label: "是否退款", sortable: true },
{ prop: "refundTime", label: "退款到账时间", sortable: true }
]
}
},
methods: {
doRefund(row) {
this.$confirm("您确定要退款吗?退款金额将原路退还,退款后将不能撤回!", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(async () => {
this.submitLoading = true
const resp = await $.post("/platform/member/payment/refund/doRefund", {
id: row.id
})
this.submitLoading = false
if (resp.code === 0) {
this.doSearch()
this.$message({
type: "success",
message: resp.data
})
} else {
this.$message({
type: "error",
message: resp.data
})
}
})
},
async getProjectList() {
const resp = await $.get("/platform/member/payment/project/getAllProject", { year: this.pageForm.year })
if (resp.code === 0) {
this.paymentProjectList = resp.data
this.$set(this.pageForm, "paymentProjectId", this.paymentProjectList ? this.paymentProjectList[0].id : null)
}
}
},
async created() {
await this.getProjectList()
this.pageData()
}
})
</script>
<!--#
}
#-->