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) {
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() {
return axios.get('/baseProceedsAccount/accountTypeList')
......
src/common/components/element-ui.js
......@@ -18,6 +18,7 @@ import {
Switch,
Select,
Option,
OptionGroup,
Cascader,
Radio,
RadioGroup,
......@@ -42,7 +43,8 @@ import {
Descriptions,
DescriptionsItem,
InputNumber,
Link
Link,
Image
} from 'element-ui'
const components = [
......@@ -58,6 +60,7 @@ const components = [
Switch,
Select,
Option,
OptionGroup,
Cascader,
Radio,
RadioGroup,
......@@ -84,7 +87,8 @@ const components = [
Descriptions,
DescriptionsItem,
InputNumber,
Link
Link,
Image
]
export default {
......
src/components/wangeditor/index.vue
<template>
<div style="border: 1px solid #ccc; z-index: 9999">
<Toolbar
v-if="editable"
class="editor_toolbar"
style="border-bottom: 1px solid #ccc"
:editor="editor"
......@@ -41,6 +42,10 @@ export default {
type: String,
default: ''
},
editable: {
type: Boolean,
default: true
},
isInsert: {
type: Boolean,
default: false
......@@ -83,6 +88,7 @@ export default {
const _this = this
return {
placeholder: this.placeholder || '请输入内容...',
readOnly: !this.editable,
MENU_CONF: {
uploadImage: {
allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
......@@ -108,12 +114,25 @@ export default {
}
}
},
watch: {},
watch: {
editable(val) {
this.syncEditorEditable(val)
}
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
console.log(editor.getConfig())
this.editor.getAllMenuKeys()
this.$nextTick(() => {
this.syncEditorEditable(this.editable)
})
},
syncEditorEditable(editable) {
if (!this.editor) return
if (editable) {
this.editor.enable()
} else {
this.editor.disable()
}
}
},
mounted() {
......
src/views/user/baseProceedsAccount.vue
......@@ -47,11 +47,13 @@
ref="addForm"
label-width="100px"
:inline="true"
size="mini">
size="mini"
:disabled="isFormReadonly">
<el-form-item label="收款方式" prop="receiverType">
<el-select
v-model="addFormData.receiverType"
placeholder="请选择收款方式"
@change="receiverTypeChange"
style="width: 100%">
<el-option
v-for="item in receiverTypeList"
......@@ -93,7 +95,7 @@
@change="accountTypeChange"
style="width: 100%">
<el-option
v-for="item in accountTypeList"
v-for="item in filteredAccountTypeList"
:key="item.code"
:label="item.remark"
:value="item.code"></el-option>
......@@ -150,19 +152,16 @@
type="number" />
</el-form-item>
<el-form-item
v-if="
addFormData.receiverType === 'belowLine' &&
addFormData.accountType === 'bank_transfer'
"
class="add-dialog-full-row-item"
label="账户信息"
prop="accountInfo">
<el-input
v-model="addFormData.accountInfo"
placeholder="请输入账户信息"
type="textarea"
:rows="3"
clearable />
<div class="account-info-editor">
<v-editor
v-model="addFormData.accountInfo"
ref="wangeditor"
:editable="!isFormReadonly"
placeholder="请输入账户信息" />
</div>
</el-form-item>
<el-form-item
class="add-dialog-full-row-item"
......@@ -178,135 +177,17 @@
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="default" @click="addDialog = false" size="small">
取消
{{ '取消' }}
</el-button>
<el-button type="primary" @click="addVarify" size="small">
<el-button
v-if="!isFormReadonly"
type="primary"
@click="addVarify"
size="small">
下一步
</el-button>
</div>
</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">
<ul style="color: #333; font-size: 12px; height: 400px; overflow: auto">
......@@ -461,6 +342,7 @@
<script lang="jsx">
import CustomForm from '@/common/components/base/CustomForm.vue'
import tableVue from '@/common/components/base/tableView.vue'
import Editor from '@/components/wangeditor/index.vue'
import {
getAccountTypeListApi,
getReceiverTypeListApi,
......@@ -483,7 +365,8 @@ export default {
name: 'baseProceedsAccount',
components: {
tableVue,
CustomForm
CustomForm,
'v-editor': Editor
},
data() {
const initialFormData = {
......@@ -587,12 +470,20 @@ export default {
}
],
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' }]
},
detailVisible: false,
detailFormData: {},
logVisible: false,
logFormData: {},
formId: null,
......@@ -634,12 +525,23 @@ export default {
this.getBusinessTypeList()
},
computed: {
filteredAccountTypeList() {
if (this.addFormData.receiverType === 'belowLine') {
return this.accountTypeList.filter((item) => item.code !== 'alipay')
}
return this.accountTypeList
},
isFormReadonly() {
return this.type === 'detail'
},
operateType() {
switch (this.type) {
case 'add':
return '新增收款账户'
case 'edit':
return '编辑收款账户'
case 'detail':
return '收款账户详情'
case 'changeStatus':
return this.currentRow
? `${this.currentRow.isEnable ? '禁用' : '启用'}付款账户`
......@@ -741,7 +643,7 @@ export default {
{
label: '主要业务',
key: 'operation',
width: 200,
width: 150,
render: (item) => {
return (
this.businessTypeList.find((i) => i.key === item.operation)
......@@ -763,12 +665,12 @@ export default {
{
label: '日限额',
key: 'daySumLimited',
width: '150'
width: '100'
},
{
label: '月限额',
key: 'monthlySumLimited',
width: '150'
width: '100'
},
{
label: '账户信息',
......@@ -778,7 +680,7 @@ export default {
align: 'left',
showOverflow: false,
render: (item) => {
const text = item.accountInfo
const text = this.getPlainTextFromHtml(item.accountInfo)
if (!text) return '-'
return (
<span style="white-space: pre-line; word-break: break-word; display: inline-block; width: 100%; text-align: left;">
......@@ -976,13 +878,7 @@ export default {
},
// 获取详情
async getDetails(id) {
try {
const res = await getBaseProceedsAccountDetailApi(id)
this.detailFormData = res.data
this.detailVisible = true
} catch (error) {
console.log(error)
}
await this.openAddDialog('detail', { id })
},
// 获取日志
async getLog(id) {
......@@ -1074,15 +970,38 @@ export default {
console.log(error)
}
},
// 新增 打开弹窗
openAddDialog(method, row) {
if (this.setVerificationMethod()) {
this.addDialog = true
this.type = method
this.currentRow = row
this.$nextTick(() => {
method === 'add' ? this.resetForm() : (this.addFormData = { ...row })
})
getPlainTextFromHtml(html) {
if (!html) return ''
return html
.replace(/<[^>]*>/g, '')
.replace(/&nbsp;/g, ' ')
.trim()
},
// 新增/编辑/详情 打开弹窗
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 {
.el-form--inline .add-dialog-full-row-item .el-form-item__content {
width: calc(100% - 100px);
}
.account-info-editor {
width: 100%;
}
}
}
......@@ -1422,4 +1344,20 @@ export default {
white-space: pre-line;
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>
src/views/user/rechargeRecord.vue
<template>
<div class="recharge-record card">
<div class="search">
<el-form :model="searchForm" size="small" :inline="true">
<el-form-item label="客户">
<el-input
v-model="searchForm.namespace"
placeholder="请输入客户"
clearable></el-input>
</el-form-item>
<el-form-item label="套餐版本">
<el-select
v-model="searchForm.subject"
placeholder="请选择套餐版本"
clearable>
<el-option
v-for="(item, index) in subjectList"
:key="index"
:label="item.value"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="支付状态">
<el-select
v-model="searchForm.payStatus"
placeholder="请选择支付状态"
clearable>
<el-option label="已支付" value="已支付"></el-option>
<el-option label="待支付" value="待支付"></el-option>
</el-select>
</el-form-item>
<el-form-item label="交易号">
<el-input
v-model="searchForm.tradeNo"
placeholder="请输入交易号"
clearable></el-input>
</el-form-item>
<el-form-item label="订单号">
<el-input
v-model="searchForm.outTradeNo"
placeholder="请输入订单号"
clearable></el-input>
</el-form-item>
<el-form-item label="业务类型">
<el-input
v-model="searchForm.businessType"
placeholder="请输入业务类型"
clearable></el-input>
</el-form-item>
<el-form-item label="付款时间">
<el-date-picker
:default-time="['00:00:00', '23:59:59']"
v-model="searchForm.daterange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
:confirm="false"
start-placeholder="初始创建时间"
end-placeholder="结束创建时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="search">
查询
</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-wrap" v-loading="loading">
<el-table
ref="table"
:data="rechargeRecordList"
border
width="100%"
height="100%"
:highlight-current-row="true"
@sort-change="sortChange"
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>
<el-table-column
label="客户"
prop="namespace"
header-align="center"
align="center"
width="80"
fixed="left"
: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="tradeNo"
header-align="center"
align="center"
min-width="120"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="购买数量"
prop="month"
header-align="center"
align="center"
width="100"
: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-tabs
v-model="activeTab"
class="recharge-tabs"
@tab-click="handleTabClick">
<el-tab-pane label="支付宝充值记录" name="alipay">
<div class="tab-content">
<div class="search">
<el-form :model="searchForm" size="small" :inline="true">
<el-form-item label="客户">
<el-input
v-model="searchForm.namespace"
placeholder="请输入客户"
clearable></el-input>
</el-form-item>
<el-form-item label="套餐版本">
<el-select
v-model="searchForm.subject"
placeholder="请选择套餐版本"
clearable>
<el-option
v-for="(item, index) in subjectList"
:key="index"
:label="item.value"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="支付状态">
<el-select
v-model="searchForm.payStatus"
placeholder="请选择支付状态"
clearable>
<el-option label="已支付" value="已支付"></el-option>
<el-option label="待支付" value="待支付"></el-option>
</el-select>
</el-form-item>
<el-form-item label="交易号">
<el-input
v-model="searchForm.tradeNo"
placeholder="请输入交易号"
clearable></el-input>
</el-form-item>
<el-form-item label="订单号">
<el-input
v-model="searchForm.outTradeNo"
placeholder="请输入订单号"
clearable></el-input>
</el-form-item>
<el-form-item label="业务类型">
<el-input
v-model="searchForm.businessType"
placeholder="请输入业务类型"
clearable></el-input>
</el-form-item>
<el-form-item label="付款时间">
<el-date-picker
:default-time="['00:00:00', '23:59:59']"
v-model="searchForm.daterange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
:confirm="false"
start-placeholder="初始创建时间"
end-placeholder="结束创建时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="searchAlipay">
查询
</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-wrap" v-loading="aliPayLoading">
<el-table
ref="table"
:data="rechargeRecordList"
border
width="100%"
height="100%"
:highlight-current-row="true"
@sort-change="sortChange"
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>
<el-table-column
label="客户"
prop="namespace"
header-align="center"
align="center"
width="80"
fixed="left"
: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="tradeNo"
header-align="center"
align="center"
min-width="120"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="购买数量"
prop="month"
header-align="center"
align="center"
width="100"
: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
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>
<el-table-column
label="账户类型"
prop="accountTypeName"
header-align="center"
align="center"
width="130"
:show-overflow-tooltip="true" />
<el-table-column
label="充值账户"
prop="account"
header-align="center"
align="center"
min-width="120"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column
label="充值币种"
prop="currency"
header-align="center"
align="center"
width="90"
:show-overflow-tooltip="true" />
<el-table-column
label="充值金额"
prop="amount"
header-align="center"
align="right"
width="100"
:show-overflow-tooltip="true" />
<el-table-column
label="手续费"
prop="serviceFee"
header-align="center"
align="right"
width="90"
:show-overflow-tooltip="true" />
<el-table-column
label="入账金额"
prop="actualAmount"
header-align="center"
align="right"
width="100"
:show-overflow-tooltip="true" />
<el-table-column
label="备注"
prop="remark"
header-align="center"
align="left"
min-width="120"
:show-overflow-tooltip="true" />
<el-table-column
label="水单"
prop="billUrl"
header-align="center"
align="center"
width="120">
<template slot-scope="{ row }">
<span
v-if="row.billUrl"
class="bill-img-wrap"
@click.stop="openBillImageViewer(row.billUrl)">
<el-image
class="bill-img"
:src="setimgUrl(row.billUrl, { w: 80 })"
fit="cover" />
</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column
label="创建时间"
prop="createdTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true" />
<el-table-column
label="操作"
header-align="center"
align="center"
width="80"
fixed="right">
<template slot-scope="{ row }">
<i
title="查看日志"
class="el-icon-document"
@click="getLog(row.id)"
style="cursor: pointer; color: orange" />
</template>
</el-table-column>
</el-table>
</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>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import {
getUserRechargeRecordListApi,
getSubjectListApi
getSubjectListApi,
getOfflineRechargeRecordListApi,
getOfflineBaseProceedsAccountListApi,
getRechargeTypeListApi,
getOfflineAccountTypeListApi,
getOfflineRechargeLogListApi
} from '@/common/api/user/user'
export default {
name: 'rechargeRecord',
components: {
ElImageViewer
},
data() {
return {
logVisible: false,
logList: [],
billImageViewerVisible: false,
billImageViewerUrls: [],
billImageViewerIndex: 0,
activeTab: 'alipay',
period: [],
subjectList: [],
sortParmas: {},
......@@ -236,16 +520,79 @@ export default {
total: 0,
pageSize: 50,
currentPage: 1,
loading: false,
rechargeRecordList: []
aliPayLoading: false,
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() {
this.loadData()
this.getSubjectList()
await Promise.all([
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: {
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 = {
...this.searchForm,
currentPage: this.currentPage,
......@@ -258,7 +605,8 @@ export default {
if (obj) {
data = { ...data, ...obj }
}
this.loading = true
this.aliPayLoading = true
try {
const res = await getUserRechargeRecordListApi(data)
if (res.code !== 200) return
......@@ -267,28 +615,84 @@ export default {
} catch (e) {
console.log(e)
} 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.loadData(this.sortParmas)
this.loadAlipayData(this.sortParmas)
},
searchOffline() {
this.offlineCurrentPage = 1
this.loadOfflineData()
},
onCurrentChange(currentPage) {
this.currentPage = currentPage
this.loadData(this.sortParmas)
this.loadAlipayData(this.sortParmas)
},
offlineOnCurrentChange(currentPage) {
this.offlineCurrentPage = currentPage
this.loadOfflineData()
},
sizeChange(pageSize) {
this.pageSize = pageSize
this.loadData(this.sortParmas)
this.loadAlipayData(this.sortParmas)
},
offlineSizeChange(pageSize) {
this.offlinePageSize = pageSize
this.loadOfflineData()
},
sortChange({ column, prop, order }) {
this.sortParmas = {
field: prop,
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() {
try {
const { data } = await getSubjectListApi()
......@@ -296,6 +700,36 @@ export default {
} catch (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 {
content: '';
}
.el-dialog__footer {
text-align: center;
.el-button--small {
padding: 9px 50px;
}
}
.el-dialog__body {
padding: 10px 20px;
}
.el-icon-edit:before {
color: #ff9800;
font-weight: bold;
......@@ -350,19 +772,49 @@ export default {
background-color: #f8f8f9;
}
.el-input-group__append {
padding-left: 0;
.el-tabs {
&__header {
margin-bottom: 10px;
}
&__content {
flex: 1;
overflow: hidden;
}
}
.el-tab-pane {
height: 100%;
}
}
}
.search {
background: #fff;
}
.recharge-tabs {
&,
.tab-content {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.table-wrap {
background: #fff;
flex: 1;
overflow: hidden;
.tab-content {
.table-wrap {
flex: 1;
overflow: hidden;
}
.bill-img-wrap {
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.bill-img {
width: 40px;
height: 40px;
vertical-align: middle;
}
}
}
}
</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