Skip to content

S
saas-manage
Commit 5a05dd17 by wusiyi
Options

Merge branch 'offline_recharge' into dev

parents 65e1e272 d5fe3d65
Showing with 786 additions and 233 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"
:defaultConfig="toolbarConfig" :defaultConfig="toolbarConfig"
:mode="mode" /> :mode="mode" />
<Editor <Editor
style="height: 300px; overflow-y: hidden" :style="{ height: height, overflowY: 'hidden' }"
v-model="html" v-model="html"
:defaultConfig="editorConfig" :defaultConfig="editorConfig"
:mode="mode" :mode="mode"
...@@ -41,6 +42,15 @@ export default { ...@@ -41,6 +42,15 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
editable: {
type: Boolean,
default: true
},
/** 编辑区高度（px） */
height: {
type: String,
default: '300px'
},
isInsert: { isInsert: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -83,6 +93,7 @@ export default { ...@@ -83,6 +93,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 +119,25 @@ export default { ...@@ -108,12 +119,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
...@@ -37,9 +37,11 @@ ...@@ -37,9 +37,11 @@
</div> </div>
<!-- 新增弹窗 --> <!-- 新增弹窗 -->
<el-dialog <el-dialog
v-if="addDialog"
:title="operateType" :title="operateType"
:visible.sync="addDialog" :visible.sync="addDialog"
width="45%" width="45%"
top="2vh"
:close-on-click-modal="false"> :close-on-click-modal="false">
<el-form <el-form
:model="addFormData" :model="addFormData"
...@@ -47,48 +49,13 @@ ...@@ -47,48 +49,13 @@
ref="addForm" ref="addForm"
label-width="100px" label-width="100px"
:inline="true" :inline="true"
size="mini"> size="mini"
<el-form-item label="账户类型" prop="accountType"> :disabled="isFormReadonly">
<el-select
v-model="addFormData.accountType"
placeholder="请选择账户类型"
@change="accountTypeChange"
style="width: 100%">
<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="银行卡开户行"
prop="openBank"
v-if="
addFormData.accountType === 'bank_transfer' ||
addFormData.accountType === 'xyk'
">
<el-input
v-model="addFormData.openBank"
placeholder="请输入开户行"
clearable />
</el-form-item>
<el-form-item label="账户名称" prop="name">
<el-input
v-model="addFormData.name"
placeholder="请输入账户名称"
clearable />
</el-form-item>
<el-form-item label="账号" prop="accountNumber">
<el-input
v-model="addFormData.accountNumber"
placeholder="请输入账号"
clearable />
</el-form-item>
<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"
...@@ -101,6 +68,7 @@ ...@@ -101,6 +68,7 @@
<el-select <el-select
v-model="addFormData.operation" v-model="addFormData.operation"
placeholder="请选择主要业务" placeholder="请选择主要业务"
@change="operationChange"
style="width: 100%"> style="width: 100%">
<el-option <el-option
v-for="item in businessTypeList" v-for="item in businessTypeList"
...@@ -122,6 +90,43 @@ ...@@ -122,6 +90,43 @@
:value="item.currencyCode"></el-option> :value="item.currencyCode"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="账户类型" prop="accountType">
<el-select
v-model="addFormData.accountType"
placeholder="请选择账户类型"
@change="accountTypeChange"
style="width: 100%">
<el-option
v-for="item in filteredAccountTypeList"
:key="item.code"
:label="item.remark"
:value="item.code"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item
label="银行卡开户行"
prop="openBank"
v-if="
addFormData.accountType === 'bank_transfer' ||
addFormData.accountType === 'xyk'
">
<el-input
v-model="addFormData.openBank"
placeholder="请输入开户行"
clearable />
</el-form-item> -->
<el-form-item label="账户名称" prop="name">
<el-input
v-model="addFormData.name"
placeholder="请输入账户名称"
clearable />
</el-form-item>
<el-form-item label="账号" prop="accountNumber">
<el-input
v-model="addFormData.accountNumber"
placeholder="请输入账号"
clearable />
</el-form-item>
<el-form-item label="日限额" prop="daySumLimited"> <el-form-item label="日限额" prop="daySumLimited">
<el-input-number <el-input-number
...@@ -148,124 +153,44 @@ ...@@ -148,124 +153,44 @@
:min="1" :min="1"
type="number" /> type="number" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="启用状态" prop="isEnable"> <el-form-item
<el-switch class="add-dialog-full-row-item"
class="switchStyle" label="账户信息"
:width="100" prop="accountInfo">
v-model="addFormData.isEnable" <div class="account-info-editor">
active-color="#67C23A" <v-editor
inactive-color="#F56C6C" v-model="addFormData.accountInfo"
@change="dialogEnableChange" ref="wangeditor"
active-text="启用" :editable="!isFormReadonly"
inactive-text="禁用"></el-switch> height="200px"
</el-form-item> --> placeholder="请输入账户信息" />
</div>
</el-form-item>
<el-form-item
class="add-dialog-full-row-item"
label="备注"
prop="remark">
<v-editor
v-model="addFormData.remark"
ref="wangeditor2"
:editable="!isFormReadonly"
height="200px"
placeholder="请输入备注，如给客户的账户充值说明" />
</el-form-item>
</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 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-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">
...@@ -420,6 +345,7 @@ ...@@ -420,6 +345,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,
...@@ -442,21 +368,24 @@ export default { ...@@ -442,21 +368,24 @@ export default {
name: 'baseProceedsAccount', name: 'baseProceedsAccount',
components: { components: {
tableVue, tableVue,
CustomForm CustomForm,
'v-editor': Editor
}, },
data() { data() {
const initialFormData = { const initialFormData = {
name: '', name: '',
accountNumber: '', accountNumber: '',
accountType: '', accountType: '',
openBank: '', // openBank: '',
receiverType: '', receiverType: '',
currencyType: '', currencyType: '',
daySumLimited: '', daySumLimited: '',
monthlySumLimited: '', monthlySumLimited: '',
operation: '', operation: '',
isEnable: false, isEnable: false,
sort: null sort: null,
accountInfo: '',
remark: ''
} }
return { return {
select: '', select: '',
...@@ -483,9 +412,9 @@ export default { ...@@ -483,9 +412,9 @@ export default {
accountType: [ accountType: [
{ required: true, message: '请选择账户类型', trigger: 'change' } { required: true, message: '请选择账户类型', trigger: 'change' }
], ],
openBank: [ // openBank: [
{ required: true, message: '请输入开户行', trigger: 'blur' } // { required: true, message: '请输入开户行', trigger: 'blur' }
], // ],
receiverType: [ receiverType: [
{ required: true, message: '请选择收款方式', trigger: 'change' } { required: true, message: '请选择收款方式', trigger: 'change' }
], ],
...@@ -542,10 +471,22 @@ export default { ...@@ -542,10 +471,22 @@ export default {
message: '请输入大于0的整数', message: '请输入大于0的整数',
trigger: 'blur' trigger: 'blur'
} }
] ],
accountInfo: [
{
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, logVisible: false,
logFormData: {}, logFormData: {},
formId: null, formId: null,
...@@ -587,12 +528,23 @@ export default { ...@@ -587,12 +528,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 ? '禁用' : '启用'}付款账户`
...@@ -627,7 +579,9 @@ export default { ...@@ -627,7 +579,9 @@ export default {
key: 'accountType', key: 'accountType',
width: '100', width: '100',
render: (item) => { render: (item) => {
const accountType = this.accountTypeList.find((i) => i.code === item.accountType) const accountType = this.accountTypeList.find(
(i) => i.code === item.accountType
)
return accountType && accountType.remark return accountType && accountType.remark
} }
}, },
...@@ -663,25 +617,25 @@ export default { ...@@ -663,25 +617,25 @@ export default {
} }
} }
}, },
{ // {
label: '银行卡开户行', // label: '银行卡开户行',
key: 'openBank', // key: 'openBank',
width: '200' // width: '200'
}, // },
{ {
label: '账户名称', label: '账户名称',
key: 'name', key: 'name',
width: '150' width: '180'
}, },
{ {
label: '账号', label: '账号',
key: 'accountNumber', key: 'accountNumber',
width: '' width: '150'
}, },
{ {
label: '收款方式', label: '收款方式',
key: 'receiverType', key: 'receiverType',
width: '150', width: '80',
render: (item) => { render: (item) => {
const receiverType = this.receiverTypeList.find( const receiverType = this.receiverTypeList.find(
(i) => i.code === item.receiverType (i) => i.code === item.receiverType
...@@ -692,16 +646,18 @@ export default { ...@@ -692,16 +646,18 @@ export default {
{ {
label: '主要业务', label: '主要业务',
key: 'operation', key: 'operation',
width: 200, width: 150,
render: (item) => { render: (item) => {
return this.businessTypeList.find((i) => i.key === item.operation) return (
this.businessTypeList.find((i) => i.key === item.operation)
.value || '' .value || ''
)
} }
}, },
{ {
label: '币种', label: '币种',
key: 'currencyType', key: 'currencyType',
width: '200', width: '150',
render: (item) => { render: (item) => {
const i = this.currencyTypeList.find( const i = this.currencyTypeList.find(
(i) => i.currencyCode === item.currencyType (i) => i.currencyCode === item.currencyType
...@@ -712,12 +668,46 @@ export default { ...@@ -712,12 +668,46 @@ export default {
{ {
label: '日限额', label: '日限额',
key: 'daySumLimited', key: 'daySumLimited',
width: '150' width: '100'
}, },
{ {
label: '月限额', label: '月限额',
key: 'monthlySumLimited', key: 'monthlySumLimited',
width: '150' width: '100'
},
{
label: '账户信息',
key: 'accountInfo',
width: '200',
minWidth: '160',
align: 'left',
showOverflow: false,
render: (item) => {
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;">
{text}
</span>
)
}
},
{
label: '备注',
key: 'remark',
width: '200',
minWidth: '160',
align: 'left',
showOverflow: false,
render: (item) => {
const text = this.getPlainTextFromHtml(item.remark)
if (!text) return '-'
return (
<span style="white-space: pre-line; word-break: break-word; display: inline-block; width: 100%; text-align: left;">
{text}
</span>
)
}
}, },
{ {
...@@ -809,6 +799,13 @@ export default { ...@@ -809,6 +799,13 @@ export default {
} }
}, },
methods: { methods: {
operationChange(value) {
if (value === 'ORDERS' || value === 'BALANCE') {
this.addFormData.currencyType = 'CNY'
} else {
this.addFormData.currencyType = 'USD'
}
},
sizeChange(value) { sizeChange(value) {
this.paginationOptions.pageSize = value this.paginationOptions.pageSize = value
this.getList() this.getList()
...@@ -861,8 +858,8 @@ export default { ...@@ -861,8 +858,8 @@ export default {
async getSecuritySetting() { async getSecuritySetting() {
const res = await getSecuritySettingApi() const res = await getSecuritySettingApi()
this.securitySetting = res.data this.securitySetting = res.data
this.securityFormData.phone = res.data.phone || '' this.securityFormData.phone = res?.data?.phone || ''
this.securityFormData.mailbox = res.data.mailbox || '' this.securityFormData.mailbox = res?.data?.mailbox || ''
}, },
// 查询 // 查询
async getList() { async getList() {
...@@ -876,20 +873,15 @@ export default { ...@@ -876,20 +873,15 @@ export default {
}) })
this.sourceData = res.data.records this.sourceData = res.data.records
this.paginationOptions.total = res.data.total this.paginationOptions.total = res.data.total
this.loading = false
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} finally {
this.loading = false
} }
}, },
// 获取详情 // 获取详情
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) {
...@@ -981,15 +973,38 @@ export default { ...@@ -981,15 +973,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 = ''
} }
}, },
// 新增/编辑 账户类型变化 // 新增/编辑 账户类型变化
...@@ -1075,14 +1090,16 @@ export default { ...@@ -1075,14 +1090,16 @@ export default {
name: '', name: '',
accountNumber: '', accountNumber: '',
accountType: '', accountType: '',
openBank: '', // openBank: '',
receiverType: '', receiverType: '',
currencyType: '', currencyType: '',
daySumLimited: '', daySumLimited: '',
monthlySumLimited: '', monthlySumLimited: '',
operation: '', operation: '',
sort: '', sort: '',
isEnable: false isEnable: false,
accountInfo: '',
remark: ''
}) })
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addForm.clearValidate() this.$refs.addForm.clearValidate()
...@@ -1280,6 +1297,17 @@ export default { ...@@ -1280,6 +1297,17 @@ export default {
.el-input-number--mini { .el-input-number--mini {
width: 100%; width: 100%;
} }
.el-form--inline .add-dialog-full-row-item {
display: block !important;
width: 100%;
margin-right: 0;
}
.el-form--inline .add-dialog-full-row-item .el-form-item__content {
width: calc(100% - 100px);
}
.account-info-editor {
width: 100%;
}
} }
} }
...@@ -1314,4 +1342,25 @@ export default { ...@@ -1314,4 +1342,25 @@ export default {
opacity: 0; opacity: 0;
margin-right: 10px; margin-right: 10px;
} }
.proceeds-multiline {
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> </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