Skip to content

S
saas-manage
Commit a85c3efd by wusiyi
Options

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

parent 06e185ca
Showing with 636 additions and 199 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-editor
v-model="addFormData.accountInfo" v-model="addFormData.accountInfo"
placeholder="请输入账户信息" ref="wangeditor"
type="textarea" :editable="!isFormReadonly"
:rows="3" placeholder="请输入账户信息" />
clearable /> </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, '')
.replace(/&nbsp;/g, ' ')
.trim()
},
// 新增/编辑/详情 打开弹窗
async openAddDialog(method, row) {
if (method !== 'detail' && !this.setVerificationMethod()) return
this.type = method this.type = method
this.currentRow = row this.currentRow = row
this.$nextTick(() => { this.resetForm()
method === 'add' ? this.resetForm() : (this.addFormData = { ...row }) 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">
<el-tabs
v-model="activeTab"
class="recharge-tabs"
@tab-click="handleTabClick">
<el-tab-pane label="支付宝充值记录" name="alipay">
<div class="tab-content">
<div class="search"> <div class="search">
<el-form :model="searchForm" size="small" :inline="true"> <el-form :model="searchForm" size="small" :inline="true">
<el-form-item label="客户"> <el-form-item label="客户">
...@@ -63,13 +69,13 @@ ...@@ -63,13 +69,13 @@
type="primary" type="primary"
size="small" size="small"
icon="el-icon-search" icon="el-icon-search"
@click="search"> @click="searchAlipay">
查询 查询
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="table-wrap" v-loading="loading"> <div class="table-wrap" v-loading="aliPayLoading">
<el-table <el-table
ref="table" ref="table"
:data="rechargeRecordList" :data="rechargeRecordList"
...@@ -122,7 +128,6 @@ ...@@ -122,7 +128,6 @@
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 <el-table-column
label="支付方式" label="支付方式"
prop="payType" prop="payType"
...@@ -151,7 +156,6 @@ ...@@ -151,7 +156,6 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
align="center" align="center"
header-align="center"></el-table-column> header-align="center"></el-table-column>
<el-table-column <el-table-column
label="商户原始订单号" label="商户原始订单号"
prop="merchantOrderNo" prop="merchantOrderNo"
...@@ -180,7 +184,6 @@ ...@@ -180,7 +184,6 @@
align="center" align="center"
min-width="220" min-width="220"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true"></el-table-column>
<el-table-column <el-table-column
label="付款时间" label="付款时间"
sortable="custom" sortable="custom"
...@@ -216,17 +219,298 @@ ...@@ -216,17 +219,298 @@
@current-change="onCurrentChange"></el-pagination> @current-change="onCurrentChange"></el-pagination>
</div> </div>
</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="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> </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.getRechargeAccountList(),
this.getRechargeTypeList(),
this.getAccountTypeList(),
this.getSubjectList() 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;
} }
} }
}
.search { .el-tab-pane {
background: #fff; height: 100%;
} }
}
.table-wrap { .recharge-tabs {
background: #fff; &,
.tab-content {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tab-content {
.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