Skip to content

S
saas-manage
Commit a85c3efd by wusiyi
Options

faat: 收款账户支持线下收款 #1005780

parent 06e185ca
Showing with 851 additions and 414 deletions
src/common/api/user/user.js
...@@ -7,6 +7,30 @@ export function getSubjectListApi(params) { ...@@ -7,6 +7,30 @@ export function getSubjectListApi(params) {
return axios.get('/pay/businessPayRecord/subjectList', params) return axios.get('/pay/businessPayRecord/subjectList', params)
} }
// 线下充值 列表
export function getOfflineRechargeRecordListApi(params) {
return axios.post('/offline-recharge/list_page', params)
}
// 线下充值 收款账户列表
export function getOfflineBaseProceedsAccountListApi() {
return axios.get('/manage/rest/base-proceeds-account/list')
}
// 线下充值 充值方式列表
export function getRechargeTypeListApi() {
return axios.get('/manage/rest/base-proceeds-account/pay-type-list')
}
// 线下充值 账户类型列表
export function getOfflineAccountTypeListApi() {
return axios.get('/manage/rest/base-proceeds-account/business-type-list')
}
// 线下充值 日志
export function getOfflineRechargeLogListApi(params) {
return axios.get('/offline-recharge/log?id=' + params.id)
}
// 收款账户管理 获取账户类型 // 收款账户管理 获取账户类型
export function getAccountTypeListApi() { export function getAccountTypeListApi() {
return axios.get('/baseProceedsAccount/accountTypeList') return axios.get('/baseProceedsAccount/accountTypeList')
......
src/common/components/element-ui.js
...@@ -18,6 +18,7 @@ import { ...@@ -18,6 +18,7 @@ import {
Switch, Switch,
Select, Select,
Option, Option,
OptionGroup,
Cascader, Cascader,
Radio, Radio,
RadioGroup, RadioGroup,
...@@ -42,7 +43,8 @@ import { ...@@ -42,7 +43,8 @@ import {
Descriptions, Descriptions,
DescriptionsItem, DescriptionsItem,
InputNumber, InputNumber,
Link Link,
Image
} from 'element-ui' } from 'element-ui'
const components = [ const components = [
...@@ -58,6 +60,7 @@ const components = [ ...@@ -58,6 +60,7 @@ const components = [
Switch, Switch,
Select, Select,
Option, Option,
OptionGroup,
Cascader, Cascader,
Radio, Radio,
RadioGroup, RadioGroup,
...@@ -84,7 +87,8 @@ const components = [ ...@@ -84,7 +87,8 @@ const components = [
Descriptions, Descriptions,
DescriptionsItem, DescriptionsItem,
InputNumber, InputNumber,
Link Link,
Image
] ]
export default { export default {
......
src/components/wangeditor/index.vue
<template> <template>
<div style="border: 1px solid #ccc; z-index: 9999"> <div style="border: 1px solid #ccc; z-index: 9999">
<Toolbar <Toolbar
v-if="editable"
class="editor_toolbar" class="editor_toolbar"
style="border-bottom: 1px solid #ccc" style="border-bottom: 1px solid #ccc"
:editor="editor" :editor="editor"
...@@ -41,6 +42,10 @@ export default { ...@@ -41,6 +42,10 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
editable: {
type: Boolean,
default: true
},
isInsert: { isInsert: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -83,6 +88,7 @@ export default { ...@@ -83,6 +88,7 @@ export default {
const _this = this const _this = this
return { return {
placeholder: this.placeholder || '请输入内容...', placeholder: this.placeholder || '请输入内容...',
readOnly: !this.editable,
MENU_CONF: { MENU_CONF: {
uploadImage: { uploadImage: {
allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp'], allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
...@@ -108,12 +114,25 @@ export default { ...@@ -108,12 +114,25 @@ export default {
} }
} }
}, },
watch: {}, watch: {
editable(val) {
this.syncEditorEditable(val)
}
},
methods: { methods: {
onCreated(editor) { onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错 this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
console.log(editor.getConfig()) this.$nextTick(() => {
this.editor.getAllMenuKeys() this.syncEditorEditable(this.editable)
})
},
syncEditorEditable(editable) {
if (!this.editor) return
if (editable) {
this.editor.enable()
} else {
this.editor.disable()
}
} }
}, },
mounted() { mounted() {
......
src/views/user/baseProceedsAccount.vue
...@@ -47,11 +47,13 @@ ...@@ -47,11 +47,13 @@
ref="addForm" ref="addForm"
label-width="100px" label-width="100px"
:inline="true" :inline="true"
size="mini"> size="mini"
:disabled="isFormReadonly">
<el-form-item label="收款方式" prop="receiverType"> <el-form-item label="收款方式" prop="receiverType">
<el-select <el-select
v-model="addFormData.receiverType" v-model="addFormData.receiverType"
placeholder="请选择收款方式" placeholder="请选择收款方式"
@change="receiverTypeChange"
style="width: 100%"> style="width: 100%">
<el-option <el-option
v-for="item in receiverTypeList" v-for="item in receiverTypeList"
...@@ -93,7 +95,7 @@ ...@@ -93,7 +95,7 @@
@change="accountTypeChange" @change="accountTypeChange"
style="width: 100%"> style="width: 100%">
<el-option <el-option
v-for="item in accountTypeList" v-for="item in filteredAccountTypeList"
:key="item.code" :key="item.code"
:label="item.remark" :label="item.remark"
:value="item.code"></el-option> :value="item.code"></el-option>
...@@ -150,19 +152,16 @@ ...@@ -150,19 +152,16 @@
type="number" /> type="number" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="
addFormData.receiverType === 'belowLine' &&
addFormData.accountType === 'bank_transfer'
"
class="add-dialog-full-row-item" class="add-dialog-full-row-item"
label="账户信息" label="账户信息"
prop="accountInfo"> prop="accountInfo">
<el-input <div class="account-info-editor">
v-model="addFormData.accountInfo" <v-editor
placeholder="请输入账户信息" v-model="addFormData.accountInfo"
type="textarea" ref="wangeditor"
:rows="3" :editable="!isFormReadonly"
clearable /> placeholder="请输入账户信息" />
</div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
class="add-dialog-full-row-item" class="add-dialog-full-row-item"
...@@ -178,135 +177,17 @@ ...@@ -178,135 +177,17 @@
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="default" @click="addDialog = false" size="small"> <el-button type="default" @click="addDialog = false" size="small">
取消 {{ '取消' }}
</el-button> </el-button>
<el-button type="primary" @click="addVarify" size="small"> <el-button
v-if="!isFormReadonly"
type="primary"
@click="addVarify"
size="small">
下一步 下一步
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 详情弹窗 -->
<el-dialog title="详情" :visible.sync="detailVisible" width="50%">
<el-descriptions
class="margin-top"
:column="3"
:labelStyle="{ width: '130px' }"
:contentStyle="{ width: '200px', textAlign: 'center' }"
border>
<el-descriptions-item
label="账户类型"
:contentStyle="{ textAlign: 'center' }">
{{
accountTypeList.find(
(i) => i.code === detailFormData.accountType
) &&
accountTypeList.find((i) => i.code === detailFormData.accountType)
.remark
}}
</el-descriptions-item>
<!-- <el-descriptions-item label="银行卡开户行">
{{ detailFormData.openBank || '-' }}
</el-descriptions-item> -->
<el-descriptions-item label="账户名称">
{{ detailFormData.name }}
</el-descriptions-item>
<el-descriptions-item label="账号">
{{ detailFormData.accountNumber }}
</el-descriptions-item>
<el-descriptions-item label="收款方式">
{{
receiverTypeList.find(
(i) => i.code === detailFormData.receiverType
) &&
receiverTypeList.find((i) => i.code === detailFormData.receiverType)
.remark
}}
</el-descriptions-item>
<el-descriptions-item
label="币种"
:contentStyle="{ textAlign: 'center' }">
{{
(currencyTypeList.find(
(i) => i.currencyCode === detailFormData.currencyType
) &&
currencyTypeList.find(
(i) => i.currencyCode === detailFormData.currencyType
).currencyName) +
'(' +
detailFormData.currencyType +
')'
}}
</el-descriptions-item>
<el-descriptions-item label="主要业务">
{{
businessTypeList.find((i) => i.key === detailFormData.operation) &&
businessTypeList.find((i) => i.key === detailFormData.operation)
.value
}}
</el-descriptions-item>
<el-descriptions-item label="日限额">
{{ detailFormData.daySumLimited }}
</el-descriptions-item>
<el-descriptions-item label="月限额">
{{ detailFormData.monthlySumLimited }}
</el-descriptions-item>
<el-descriptions-item label="启用状态">
<el-tag type="success" size="small" v-if="detailFormData.isEnable">
启用
</el-tag>
<el-tag type="danger" size="small" v-else>禁用</el-tag>
</el-descriptions-item>
<el-descriptions-item label="排序">
{{ detailFormData.sort }}
</el-descriptions-item>
<el-descriptions-item
label="账户信息"
:span="3"
:labelStyle="{ width: '130px' }"
:contentStyle="{
textAlign: 'left',
verticalAlign: 'top',
wordBreak: 'break-word'
}">
<span class="proceeds-multiline">
{{ detailFormData.accountInfo || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item
label="备注"
:span="3"
:labelStyle="{ width: '130px' }"
:contentStyle="{
textAlign: 'left',
verticalAlign: 'top',
wordBreak: 'break-word'
}">
<span class="proceeds-multiline">
{{ detailFormData.remark || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item label="支付宝授权状态">
<span v-if="detailFormData.accountType === 'alipay'">
<el-tag
type="success"
size="small"
v-if="detailFormData.appAuthToken">
已授权
</el-tag>
<el-tag type="danger" size="small" v-else>未授权</el-tag>
</span>
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ detailFormData.createTime }}
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ detailFormData.updateTime }}
</el-descriptions-item>
</el-descriptions>
</el-dialog>
<!-- 日志弹窗 --> <!-- 日志弹窗 -->
<el-dialog title="操作日志" :visible.sync="logVisible" width="700px"> <el-dialog title="操作日志" :visible.sync="logVisible" width="700px">
<ul style="color: #333; font-size: 12px; height: 400px; overflow: auto"> <ul style="color: #333; font-size: 12px; height: 400px; overflow: auto">
...@@ -461,6 +342,7 @@ ...@@ -461,6 +342,7 @@
<script lang="jsx"> <script lang="jsx">
import CustomForm from '@/common/components/base/CustomForm.vue' import CustomForm from '@/common/components/base/CustomForm.vue'
import tableVue from '@/common/components/base/tableView.vue' import tableVue from '@/common/components/base/tableView.vue'
import Editor from '@/components/wangeditor/index.vue'
import { import {
getAccountTypeListApi, getAccountTypeListApi,
getReceiverTypeListApi, getReceiverTypeListApi,
...@@ -483,7 +365,8 @@ export default { ...@@ -483,7 +365,8 @@ export default {
name: 'baseProceedsAccount', name: 'baseProceedsAccount',
components: { components: {
tableVue, tableVue,
CustomForm CustomForm,
'v-editor': Editor
}, },
data() { data() {
const initialFormData = { const initialFormData = {
...@@ -587,12 +470,20 @@ export default { ...@@ -587,12 +470,20 @@ export default {
} }
], ],
accountInfo: [ accountInfo: [
{ required: true, message: '请输入账户信息', trigger: 'change' } {
required: true,
validator: (rule, value, callback) => {
if (!this.getPlainTextFromHtml(value)) {
callback(new Error('请输入账户信息'))
} else {
callback()
}
},
trigger: 'change'
}
], ],
remark: [{ required: true, message: '请输入备注', trigger: 'change' }] remark: [{ required: true, message: '请输入备注', trigger: 'change' }]
}, },
detailVisible: false,
detailFormData: {},
logVisible: false, logVisible: false,
logFormData: {}, logFormData: {},
formId: null, formId: null,
...@@ -634,12 +525,23 @@ export default { ...@@ -634,12 +525,23 @@ export default {
this.getBusinessTypeList() this.getBusinessTypeList()
}, },
computed: { computed: {
filteredAccountTypeList() {
if (this.addFormData.receiverType === 'belowLine') {
return this.accountTypeList.filter((item) => item.code !== 'alipay')
}
return this.accountTypeList
},
isFormReadonly() {
return this.type === 'detail'
},
operateType() { operateType() {
switch (this.type) { switch (this.type) {
case 'add': case 'add':
return '新增收款账户' return '新增收款账户'
case 'edit': case 'edit':
return '编辑收款账户' return '编辑收款账户'
case 'detail':
return '收款账户详情'
case 'changeStatus': case 'changeStatus':
return this.currentRow return this.currentRow
? `${this.currentRow.isEnable ? '禁用' : '启用'}付款账户` ? `${this.currentRow.isEnable ? '禁用' : '启用'}付款账户`
...@@ -741,7 +643,7 @@ export default { ...@@ -741,7 +643,7 @@ export default {
{ {
label: '主要业务', label: '主要业务',
key: 'operation', key: 'operation',
width: 200, width: 150,
render: (item) => { render: (item) => {
return ( return (
this.businessTypeList.find((i) => i.key === item.operation) this.businessTypeList.find((i) => i.key === item.operation)
...@@ -763,12 +665,12 @@ export default { ...@@ -763,12 +665,12 @@ export default {
{ {
label: '日限额', label: '日限额',
key: 'daySumLimited', key: 'daySumLimited',
width: '150' width: '100'
}, },
{ {
label: '月限额', label: '月限额',
key: 'monthlySumLimited', key: 'monthlySumLimited',
width: '150' width: '100'
}, },
{ {
label: '账户信息', label: '账户信息',
...@@ -778,7 +680,7 @@ export default { ...@@ -778,7 +680,7 @@ export default {
align: 'left', align: 'left',
showOverflow: false, showOverflow: false,
render: (item) => { render: (item) => {
const text = item.accountInfo const text = this.getPlainTextFromHtml(item.accountInfo)
if (!text) return '-' if (!text) return '-'
return ( return (
<span style="white-space: pre-line; word-break: break-word; display: inline-block; width: 100%; text-align: left;"> <span style="white-space: pre-line; word-break: break-word; display: inline-block; width: 100%; text-align: left;">
...@@ -976,13 +878,7 @@ export default { ...@@ -976,13 +878,7 @@ export default {
}, },
// 获取详情 // 获取详情
async getDetails(id) { async getDetails(id) {
try { await this.openAddDialog('detail', { id })
const res = await getBaseProceedsAccountDetailApi(id)
this.detailFormData = res.data
this.detailVisible = true
} catch (error) {
console.log(error)
}
}, },
// 获取日志 // 获取日志
async getLog(id) { async getLog(id) {
...@@ -1074,15 +970,38 @@ export default { ...@@ -1074,15 +970,38 @@ export default {
console.log(error) console.log(error)
} }
}, },
// 新增 打开弹窗 getPlainTextFromHtml(html) {
openAddDialog(method, row) { if (!html) return ''
if (this.setVerificationMethod()) { return html
this.addDialog = true .replace(/<[^>]*>/g, '')
this.type = method .replace(/&nbsp;/g, ' ')
this.currentRow = row .trim()
this.$nextTick(() => { },
method === 'add' ? this.resetForm() : (this.addFormData = { ...row }) // 新增/编辑/详情 打开弹窗
}) async openAddDialog(method, row) {
if (method !== 'detail' && !this.setVerificationMethod()) return
this.type = method
this.currentRow = row
this.resetForm()
if ((method === 'edit' || method === 'detail') && row?.id) {
try {
const res = await getBaseProceedsAccountDetailApi(row.id)
if (res.code === 200) {
Object.assign(this.addFormData, res.data)
} else if (row) {
Object.assign(this.addFormData, row)
}
} catch (error) {
console.log(error)
if (row) Object.assign(this.addFormData, row)
}
}
this.addDialog = true
},
// 线下收款不展示支付宝
receiverTypeChange(value) {
if (value === 'belowLine' && this.addFormData.accountType === 'alipay') {
this.addFormData.accountType = ''
} }
}, },
// 新增/编辑 账户类型变化 // 新增/编辑 账户类型变化
...@@ -1383,6 +1302,9 @@ export default { ...@@ -1383,6 +1302,9 @@ export default {
.el-form--inline .add-dialog-full-row-item .el-form-item__content { .el-form--inline .add-dialog-full-row-item .el-form-item__content {
width: calc(100% - 100px); width: calc(100% - 100px);
} }
.account-info-editor {
width: 100%;
}
} }
} }
...@@ -1422,4 +1344,20 @@ export default { ...@@ -1422,4 +1344,20 @@ export default {
white-space: pre-line; white-space: pre-line;
word-break: break-word; word-break: break-word;
} }
.proceeds-rich-text {
word-break: break-word;
line-height: 1.6;
::v-deep img {
max-width: 100%;
}
}
.account-info-readonly {
min-height: 120px;
padding: 8px 12px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #f5f7fa;
}
</style> </style>
src/views/user/rechargeRecord.vue
<template> <template>
<div class="recharge-record card"> <div class="recharge-record card">
<div class="search"> <el-tabs
<el-form :model="searchForm" size="small" :inline="true"> v-model="activeTab"
<el-form-item label="客户"> class="recharge-tabs"
<el-input @tab-click="handleTabClick">
v-model="searchForm.namespace" <el-tab-pane label="支付宝充值记录" name="alipay">
placeholder="请输入客户" <div class="tab-content">
clearable></el-input> <div class="search">
</el-form-item> <el-form :model="searchForm" size="small" :inline="true">
<el-form-item label="套餐版本"> <el-form-item label="客户">
<el-select <el-input
v-model="searchForm.subject" v-model="searchForm.namespace"
placeholder="请选择套餐版本" placeholder="请输入客户"
clearable> clearable></el-input>
<el-option </el-form-item>
v-for="(item, index) in subjectList" <el-form-item label="套餐版本">
:key="index" <el-select
:label="item.value" v-model="searchForm.subject"
:value="item.value"></el-option> placeholder="请选择套餐版本"
</el-select> clearable>
</el-form-item> <el-option
<el-form-item label="支付状态"> v-for="(item, index) in subjectList"
<el-select :key="index"
v-model="searchForm.payStatus" :label="item.value"
placeholder="请选择支付状态" :value="item.value"></el-option>
clearable> </el-select>
<el-option label="已支付" value="已支付"></el-option> </el-form-item>
<el-option label="待支付" value="待支付"></el-option> <el-form-item label="支付状态">
</el-select> <el-select
</el-form-item> v-model="searchForm.payStatus"
<el-form-item label="交易号"> placeholder="请选择支付状态"
<el-input clearable>
v-model="searchForm.tradeNo" <el-option label="已支付" value="已支付"></el-option>
placeholder="请输入交易号" <el-option label="待支付" value="待支付"></el-option>
clearable></el-input> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="订单号"> <el-form-item label="交易号">
<el-input <el-input
v-model="searchForm.outTradeNo" v-model="searchForm.tradeNo"
placeholder="请输入订单号" placeholder="请输入交易号"
clearable></el-input> clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="业务类型"> <el-form-item label="订单号">
<el-input <el-input
v-model="searchForm.businessType" v-model="searchForm.outTradeNo"
placeholder="请输入业务类型" placeholder="请输入订单号"
clearable></el-input> clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="付款时间"> <el-form-item label="业务类型">
<el-date-picker <el-input
:default-time="['00:00:00', '23:59:59']" v-model="searchForm.businessType"
v-model="searchForm.daterange" placeholder="请输入业务类型"
type="datetimerange" clearable></el-input>
value-format="yyyy-MM-dd HH:mm:ss" </el-form-item>
range-separator="至" <el-form-item label="付款时间">
:confirm="false" <el-date-picker
start-placeholder="初始创建时间" :default-time="['00:00:00', '23:59:59']"
end-placeholder="结束创建时间"></el-date-picker> v-model="searchForm.daterange"
</el-form-item> type="datetimerange"
<el-form-item> value-format="yyyy-MM-dd HH:mm:ss"
<el-button range-separator="至"
type="primary" :confirm="false"
size="small" start-placeholder="初始创建时间"
icon="el-icon-search" end-placeholder="结束创建时间"></el-date-picker>
@click="search"> </el-form-item>
查询 <el-form-item>
</el-button> <el-button
</el-form-item> type="primary"
</el-form> size="small"
</div> icon="el-icon-search"
<div class="table-wrap" v-loading="loading"> @click="searchAlipay">
<el-table 查询
ref="table" </el-button>
:data="rechargeRecordList" </el-form-item>
border </el-form>
width="100%" </div>
height="100%" <div class="table-wrap" v-loading="aliPayLoading">
:highlight-current-row="true" <el-table
@sort-change="sortChange" ref="table"
header-row-class-name="header-row-class-name"> :data="rechargeRecordList"
<el-table-column border
label="序号" width="100%"
type="index" height="100%"
width="50" :highlight-current-row="true"
align="center" @sort-change="sortChange"
fixed="left" header-row-class-name="header-row-class-name">
header-align="center"></el-table-column> <el-table-column
<el-table-column label="序号"
label="客户" type="index"
prop="namespace" width="50"
header-align="center" align="center"
align="center" fixed="left"
width="80" header-align="center"></el-table-column>
fixed="left" <el-table-column
:show-overflow-tooltip="true"></el-table-column> label="客户"
<el-table-column prop="namespace"
label="套餐版本" header-align="center"
prop="subject" align="center"
header-align="center" width="80"
align="center" fixed="left"
width="100" :show-overflow-tooltip="true"></el-table-column>
:show-overflow-tooltip="true"></el-table-column> <el-table-column
<el-table-column label="套餐版本"
label="交易号" prop="subject"
prop="tradeNo" header-align="center"
header-align="center" align="center"
align="center" width="100"
min-width="120" :show-overflow-tooltip="true"></el-table-column>
:show-overflow-tooltip="true"></el-table-column> <el-table-column
<el-table-column label="交易号"
label="购买数量" prop="tradeNo"
prop="month" header-align="center"
header-align="center" align="center"
align="center" min-width="120"
width="100" :show-overflow-tooltip="true"></el-table-column>
:show-overflow-tooltip="true"></el-table-column> <el-table-column
<el-table-column label="购买数量"
label="交易金额" prop="month"
prop="totalAmount" header-align="center"
header-align="center" align="center"
align="center" width="100"
width="100" :show-overflow-tooltip="true"></el-table-column>
:show-overflow-tooltip="true"></el-table-column> <el-table-column
label="交易金额"
prop="totalAmount"
header-align="center"
align="center"
width="100"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="支付方式"
prop="payType"
header-align="center"
align="center"
width="100"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="支付状态"
prop="payStatus"
header-align="center"
align="center"
width="100"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="业务类型"
prop="businessType"
header-align="center"
align="left"
min-width="120"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="订单号"
prop="outTradeNo"
min-width="180"
:show-overflow-tooltip="true"
align="center"
header-align="center"></el-table-column>
<el-table-column
label="商户原始订单号"
prop="merchantOrderNo"
header-align="center"
align="center"
width="130"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="订单标题"
prop="subject"
header-align="center"
align="center"
width="100"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="订单附加信息"
prop="body"
header-align="center"
align="center"
min-width="130"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="产品码"
prop="productCode"
header-align="center"
align="center"
min-width="220"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="付款时间"
sortable="custom"
prop="serverTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="下单时间"
prop="createTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="订单过期时间"
prop="expirationTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"></el-table-column>
</el-table>
</div>
<div class="pagination">
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@size-change="sizeChange"
@current-change="onCurrentChange"></el-pagination>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="线下充值记录" name="offline">
<div class="tab-content">
<div class="search">
<el-form :model="offlineSearchForm" size="small" :inline="true">
<el-form-item label="状态">
<el-select
v-model="offlineSearchForm.status"
placeholder="请选择状态"
clearable>
<el-option
v-for="item in statusMap"
:key="item.code"
:label="item.remark"
:value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="流水单号">
<el-input
v-model="offlineSearchForm.billNo"
placeholder="请输入流水单号"
clearable />
</el-form-item>
<el-form-item label="充值方式">
<el-select
v-model="offlineSearchForm.payType"
placeholder="请选择充值方式"
clearable
@change="onOfflineFilterChange">
<el-option
v-for="item in rechargeTypeList"
:key="item.code"
:label="item.remark"
:value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="账户类型">
<el-select
v-model="offlineSearchForm.accountType"
placeholder="请选择账户类型"
clearable
@change="onOfflineFilterChange">
<el-option
v-for="item in accountTypeList"
:key="item.code"
:label="item.remark"
:value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="充值账户">
<el-select
v-model="offlineSearchForm.account"
placeholder="请选择充值账户"
clearable
filterable
popper-class="recharge-account-select">
<el-option-group
v-for="group in accountOptionGroups"
:key="group.label"
:label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-option-group>
</el-select>
</el-form-item>
<el-form-item label="客户编码">
<el-input
v-model="offlineSearchForm.userMark"
placeholder="请输入客户编码"
clearable></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="searchOffline">
查询
</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-wrap" v-loading="offlineLoading">
<el-table
ref="offlineTable"
:data="offlineRecordList"
border
width="100%"
height="100%"
:highlight-current-row="true"
header-row-class-name="header-row-class-name">
<el-table-column
label="序号"
type="index"
width="50"
align="center"
fixed="left"
header-align="center" />
<el-table-column
label="状态"
prop="status"
header-align="center"
align="center"
min-width="80"
fixed="left"
:show-overflow-tooltip="true">
<template slot-scope="{ row }">
{{
statusMap.find((item) => item.code === row.status)?.remark
}}
</template>
</el-table-column>
<el-table-column
label="流水单号"
prop="billNo"
header-align="center"
align="center"
min-width="140"
fixed="left"
:show-overflow-tooltip="true" />
<el-table-column
label="客户编码"
prop="userMark"
header-align="center"
align="center"
width="100"
:show-overflow-tooltip="true" />
<el-table-column
label="充值方式"
prop="payTypeName"
header-align="center"
align="center"
width="100"
:show-overflow-tooltip="true" />
<el-table-column <el-table-column
label="支付方式" label="账户类型"
prop="payType" prop="accountTypeName"
header-align="center" header-align="center"
align="center" align="center"
width="100" width="130"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true" />
<el-table-column <el-table-column
label="支付状态" label="充值账户"
prop="payStatus" prop="account"
header-align="center" header-align="center"
align="center" align="center"
width="100" min-width="120"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true"></el-table-column>
<el-table-column <el-table-column
label="业务类型" label="充值币种"
prop="businessType" prop="currency"
header-align="center" header-align="center"
align="left" align="center"
min-width="120" width="90"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true" />
<el-table-column <el-table-column
label="订单号" label="充值金额"
prop="outTradeNo" prop="amount"
min-width="180" header-align="center"
:show-overflow-tooltip="true" align="right"
align="center" width="100"
header-align="center"></el-table-column> :show-overflow-tooltip="true" />
<el-table-column
<el-table-column label="手续费"
label="商户原始订单号" prop="serviceFee"
prop="merchantOrderNo" header-align="center"
header-align="center" align="right"
align="center" width="90"
width="130" :show-overflow-tooltip="true" />
:show-overflow-tooltip="true"></el-table-column> <el-table-column
<el-table-column label="入账金额"
label="订单标题" prop="actualAmount"
prop="subject" header-align="center"
header-align="center" align="right"
align="center" width="100"
width="100" :show-overflow-tooltip="true" />
:show-overflow-tooltip="true"></el-table-column> <el-table-column
<el-table-column label="备注"
label="订单附加信息" prop="remark"
prop="body" header-align="center"
header-align="center" align="left"
align="center" min-width="120"
min-width="130" :show-overflow-tooltip="true" />
:show-overflow-tooltip="true"></el-table-column> <el-table-column
<el-table-column label="水单"
label="产品码" prop="billUrl"
prop="productCode" header-align="center"
header-align="center" align="center"
align="center" width="120">
min-width="220" <template slot-scope="{ row }">
:show-overflow-tooltip="true"></el-table-column> <span
v-if="row.billUrl"
<el-table-column class="bill-img-wrap"
label="付款时间" @click.stop="openBillImageViewer(row.billUrl)">
sortable="custom" <el-image
prop="serverTime" class="bill-img"
header-align="center" :src="setimgUrl(row.billUrl, { w: 80 })"
align="center" fit="cover" />
width="160" </span>
:show-overflow-tooltip="true"></el-table-column> <span v-else>-</span>
<el-table-column </template>
label="下单时间" </el-table-column>
prop="createTime" <el-table-column
header-align="center" label="创建时间"
align="center" prop="createdTime"
width="160" header-align="center"
:show-overflow-tooltip="true"></el-table-column> align="center"
<el-table-column width="160"
label="订单过期时间" :show-overflow-tooltip="true" />
prop="expirationTime" <el-table-column
header-align="center" label="操作"
align="center" header-align="center"
width="160" align="center"
:show-overflow-tooltip="true"></el-table-column> width="80"
</el-table> fixed="right">
</div> <template slot-scope="{ row }">
<div class="pagination"> <i
<el-pagination title="查看日志"
layout="sizes, total, prev, pager, next, jumper" class="el-icon-document"
background @click="getLog(row.id)"
:total="total" style="cursor: pointer; color: orange" />
:page-size="pageSize" </template>
:current-page="currentPage" </el-table-column>
@size-change="sizeChange" </el-table>
@current-change="onCurrentChange"></el-pagination> </div>
</div> <div class="pagination">
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
:total="offlineTotal"
:page-size="offlinePageSize"
:current-page="offlineCurrentPage"
@size-change="offlineSizeChange"
@current-change="offlineOnCurrentChange" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<el-dialog
title="操作日志"
:close-on-click-modal="false"
:visible.sync="logVisible"
width="700px">
<ul style="color: #333; font-size: 14px; height: 600px; overflow: auto">
<li v-for="(item, index) in logList" :key="index" style="height: 30px">
({{ index + 1 }})、{{
item.createdTime +
'：' +
(item.employeeName || '') +
item.description
}}
</li>
</ul>
</el-dialog>
<el-image-viewer
v-if="billImageViewerVisible"
class="bill-image-viewer"
:initial-index="billImageViewerIndex"
:z-index="9999"
:url-list="billImageViewerUrls"
:on-close="closeBillImageViewer" />
</div> </div>
</template> </template>
<script> <script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { import {
getUserRechargeRecordListApi, getUserRechargeRecordListApi,
getSubjectListApi getSubjectListApi,
getOfflineRechargeRecordListApi,
getOfflineBaseProceedsAccountListApi,
getRechargeTypeListApi,
getOfflineAccountTypeListApi,
getOfflineRechargeLogListApi
} from '@/common/api/user/user' } from '@/common/api/user/user'
export default { export default {
name: 'rechargeRecord', name: 'rechargeRecord',
components: {
ElImageViewer
},
data() { data() {
return { return {
logVisible: false,
logList: [],
billImageViewerVisible: false,
billImageViewerUrls: [],
billImageViewerIndex: 0,
activeTab: 'alipay',
period: [], period: [],
subjectList: [], subjectList: [],
sortParmas: {}, sortParmas: {},
...@@ -236,16 +520,79 @@ export default { ...@@ -236,16 +520,79 @@ export default {
total: 0, total: 0,
pageSize: 50, pageSize: 50,
currentPage: 1, currentPage: 1,
loading: false, aliPayLoading: false,
rechargeRecordList: [] rechargeRecordList: [],
offlineSearchForm: {},
offlineTotal: 0,
offlinePageSize: 50,
offlineCurrentPage: 1,
offlineLoading: false,
offlineRecordList: [],
accountTypeList: [],
rechargeTypeList: [],
accountList: [],
statusMap: [
{
code: 'OPER_APPROVED',
remark: '初审'
},
{
code: 'FIN_APPROVED',
remark: '复审'
},
{
code: 'WAIT_UPDATE',
remark: '待修改'
},
{
code: 'SETTLED_AMOUNT',
remark: '已入账'
},
{
code: 'INVALID',
remark: '作废'
}
]
} }
}, },
computed: {},
async created() { async created() {
this.loadData() await Promise.all([
this.getSubjectList() this.getRechargeAccountList(),
this.getRechargeTypeList(),
this.getAccountTypeList(),
this.getSubjectList()
])
this.accountOptionGroups = this.accountTypeList.map((type) => ({
label: type.remark,
options: this.accountList
.filter((item) => item.operation === type.code)
.map((item) => ({ label: item.accountNumber, value: item.id }))
}))
this.loadAlipayData()
}, },
methods: { methods: {
async loadData(obj) { openBillImageViewer(billUrl) {
if (!billUrl) return
this.billImageViewerUrls = [this.setimgUrl(billUrl)]
this.billImageViewerIndex = 0
this.billImageViewerVisible = true
},
closeBillImageViewer() {
this.billImageViewerVisible = false
this.billImageViewerUrls = []
},
// 切换tab
handleTabClick(tab) {
if (tab.name === 'alipay') {
this.loadAlipayData()
} else if (tab.name === 'offline') {
this.loadOfflineData()
}
},
// 支付宝充值记录
async loadAlipayData(obj) {
let data = { let data = {
...this.searchForm, ...this.searchForm,
currentPage: this.currentPage, currentPage: this.currentPage,
...@@ -258,7 +605,8 @@ export default { ...@@ -258,7 +605,8 @@ export default {
if (obj) { if (obj) {
data = { ...data, ...obj } data = { ...data, ...obj }
} }
this.loading = true
this.aliPayLoading = true
try { try {
const res = await getUserRechargeRecordListApi(data) const res = await getUserRechargeRecordListApi(data)
if (res.code !== 200) return if (res.code !== 200) return
...@@ -267,28 +615,84 @@ export default { ...@@ -267,28 +615,84 @@ export default {
} catch (e) { } catch (e) {
console.log(e) console.log(e)
} finally { } finally {
this.loading = false this.aliPayLoading = false
}
},
// 线下充值记录
async loadOfflineData() {
const data = {
...this.offlineSearchForm,
currentPage: this.offlineCurrentPage,
pageSize: this.offlinePageSize
}
data.accountId = this.offlineSearchForm.account
delete data.account
this.offlineLoading = true
try {
const res = await getOfflineRechargeRecordListApi(data)
if (res.code !== 200) return
this.offlineRecordList = res.data.records
this.offlineTotal = res.data.total
} catch (e) {
console.log(e)
} finally {
this.offlineLoading = false
} }
}, },
search() { searchAlipay() {
this.currentPage = 1 this.currentPage = 1
this.loadData(this.sortParmas) this.loadAlipayData(this.sortParmas)
},
searchOffline() {
this.offlineCurrentPage = 1
this.loadOfflineData()
}, },
onCurrentChange(currentPage) { onCurrentChange(currentPage) {
this.currentPage = currentPage this.currentPage = currentPage
this.loadData(this.sortParmas) this.loadAlipayData(this.sortParmas)
},
offlineOnCurrentChange(currentPage) {
this.offlineCurrentPage = currentPage
this.loadOfflineData()
}, },
sizeChange(pageSize) { sizeChange(pageSize) {
this.pageSize = pageSize this.pageSize = pageSize
this.loadData(this.sortParmas) this.loadAlipayData(this.sortParmas)
},
offlineSizeChange(pageSize) {
this.offlinePageSize = pageSize
this.loadOfflineData()
}, },
sortChange({ column, prop, order }) { sortChange({ column, prop, order }) {
this.sortParmas = { this.sortParmas = {
field: prop, field: prop,
asc: order === 'ascending' asc: order === 'ascending'
} }
this.loadData(this.sortParmas) this.loadAlipayData(this.sortParmas)
},
onOfflineFilterChange() {
if (
this.offlineSearchForm.account &&
!this.filteredRechargeAccountList.some(
(item) => item.id === this.offlineSearchForm.account
)
) {
this.$set(this.offlineSearchForm, 'account', '')
}
},
async getLog(id) {
try {
const res = await getOfflineRechargeLogListApi({ id })
if (res.code !== 200) return
this.logList = res.data || []
this.logVisible = true
} catch (error) {
console.log(error)
}
}, },
async getSubjectList() { async getSubjectList() {
try { try {
const { data } = await getSubjectListApi() const { data } = await getSubjectListApi()
...@@ -296,6 +700,36 @@ export default { ...@@ -296,6 +700,36 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
},
// 获取收款账户列表
async getRechargeAccountList() {
try {
const res = await getOfflineBaseProceedsAccountListApi()
if (res.code !== 200) return
this.accountList = res.data || []
} catch (error) {
console.log(error)
}
},
// 获取充值方式列表
async getRechargeTypeList() {
try {
const res = await getRechargeTypeListApi()
if (res.code !== 200) return
this.rechargeTypeList = res.data || []
} catch (error) {
console.log(error)
}
},
// 获取账户类型列表
async getAccountTypeList() {
try {
const res = await getOfflineAccountTypeListApi()
if (res.code !== 200) return
this.accountTypeList = res.data || []
} catch (error) {
console.log(error)
}
} }
} }
} }
...@@ -325,18 +759,6 @@ export default { ...@@ -325,18 +759,6 @@ export default {
content: ''; content: '';
} }
.el-dialog__footer {
text-align: center;
.el-button--small {
padding: 9px 50px;
}
}
.el-dialog__body {
padding: 10px 20px;
}
.el-icon-edit:before { .el-icon-edit:before {
color: #ff9800; color: #ff9800;
font-weight: bold; font-weight: bold;
...@@ -350,19 +772,49 @@ export default { ...@@ -350,19 +772,49 @@ export default {
background-color: #f8f8f9; background-color: #f8f8f9;
} }
.el-input-group__append { .el-tabs {
padding-left: 0; &__header {
margin-bottom: 10px;
}
&__content {
flex: 1;
overflow: hidden;
}
}
.el-tab-pane {
height: 100%;
} }
} }
}
.search { .recharge-tabs {
background: #fff; &,
} .tab-content {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.table-wrap { .tab-content {
background: #fff; .table-wrap {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
}
.bill-img-wrap {
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.bill-img {
width: 40px;
height: 40px;
vertical-align: middle;
}
}
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment