Merge branch 'test' of https://e.coding.net/g-cphe0354/yinshoukeguanliduan/management into dwb
This commit is contained in:
duan
commit
79abd9c10d
|
|
@ -0,0 +1,110 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取挂账列表
|
||||
* @returns
|
||||
*/
|
||||
export function getCreditBuyerList(params) {
|
||||
return request({
|
||||
url: '/api/credit/buyer/page',
|
||||
method: 'get',
|
||||
params: {
|
||||
...params
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取挂账详情
|
||||
* @returns
|
||||
*/
|
||||
export function getCreditBuyerInfo(id) {
|
||||
return request({
|
||||
url: '/api/credit/buyer/' + id,
|
||||
method: 'get',
|
||||
params: {}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 增加挂账人
|
||||
* @returns
|
||||
*/
|
||||
export function addCreditBuyer(data) {
|
||||
return request({
|
||||
url: '/api/credit/buyer',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 还款
|
||||
* @returns
|
||||
*/
|
||||
export function creditRePayment(data) {
|
||||
return request({
|
||||
url: '/api/credit/buyer/repayment',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取还款记录
|
||||
* @returns
|
||||
*/
|
||||
export function creditRePaymentRecord(params) {
|
||||
return request({
|
||||
url: '/api/credit/payment-record/page',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除挂账人
|
||||
* @returns
|
||||
*/
|
||||
export function delCreditBuyer(id) {
|
||||
return request({
|
||||
url: `/api/credit/buyer/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 挂账人-查看明细
|
||||
* @returns
|
||||
*/
|
||||
export function creditBuyerOrderList(params) {
|
||||
return request({
|
||||
url: '/api/credit/buyer-order/page',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 挂账人-查看明细-统计
|
||||
* @returns
|
||||
*/
|
||||
export function creditBuyerOrderSummary(params) {
|
||||
return request({
|
||||
url: '/api/credit/buyer-order/summary',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 挂账人-查看明细-付款
|
||||
* @returns
|
||||
*/
|
||||
export function creditPayment(data) {
|
||||
return request({
|
||||
url: '/api/credit/buyer-order/pay',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -59,6 +59,19 @@ export const constantRouterMap = [
|
|||
name: 'data_tables',
|
||||
meta: { title: '桌台统计' }
|
||||
},
|
||||
{
|
||||
path: 'data_credit',
|
||||
component: (resolve) => require(['@/views/home/data_credit'], resolve),
|
||||
name: 'data_credit',
|
||||
meta: { title: '挂账管理' }
|
||||
},
|
||||
{
|
||||
path: 'data_creditDetail',
|
||||
component: (resolve) => require(['@/views/home/data_creditDetail'], resolve),
|
||||
name: 'data_creditDetail',
|
||||
hidden: true,
|
||||
meta: { title: '挂账明细' }
|
||||
},
|
||||
{
|
||||
path: 'data_record',
|
||||
component: (resolve) => require(['@/views/home/data_record'], resolve),
|
||||
|
|
|
|||
|
|
@ -320,7 +320,6 @@ export default {
|
|||
* @param item
|
||||
*/
|
||||
tabClick(item) {
|
||||
console.log(this.form)
|
||||
this.form = this.resetForm
|
||||
this.form.number = ''
|
||||
this.form.type = item.type
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog title="账单还款记录" :visible.sync="dialogVisible" :close-on-click-modal="false" width="70%" @close="reset">
|
||||
<div class="search">
|
||||
<el-form :model="query" inline label-position="left">
|
||||
<el-form-item>
|
||||
<el-input v-model="query.paymentMethod" placeholder="支付方式" style="" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table v-loading="tableData.loading" :data="tableData.data">
|
||||
<el-table-column label="支付方式" prpo="paymentMethod">
|
||||
<template v-slot="scope"> <div>{{ scope.row.paymentMethod ? scope.row.paymentMethod : '-' }}</div> </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="支付金额" prpo="repaymentAmount">
|
||||
<template v-slot="scope"> <div>{{ scope.row.repaymentAmount ? scope.row.repaymentAmount : '-' }}</div> </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prpo="remark">
|
||||
<template v-slot="scope"> <div>{{ scope.row.remark ? scope.row.remark : '-' }}</div> </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作时间" prop="createTime" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="query.page"
|
||||
:page-size="query.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { creditRePaymentRecord } from '@/api/credit'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
query: {
|
||||
creditBuyerId: '',
|
||||
paymentMethod: '',
|
||||
orderId: '',
|
||||
page: 1,
|
||||
size: 10
|
||||
},
|
||||
resetQuery: null,
|
||||
tableData: {
|
||||
data: [],
|
||||
loading: false,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetQuery = { ...this.query }
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
async getTableData() {
|
||||
// eslint-disable-next-line no-unused-vars, prefer-const
|
||||
let params = {
|
||||
creditBuyerId: this.query.creditBuyerId,
|
||||
value: this.query.value,
|
||||
page: this.query.page,
|
||||
size: this.query.size,
|
||||
paymentMethod: this.query.paymentMethod
|
||||
}
|
||||
if (this.query.orderId) { params.orderId = this.query.orderId }
|
||||
// eslint-disable-next-line prefer-const
|
||||
let res = await creditRePaymentRecord(params)
|
||||
this.tableData.loading = false
|
||||
this.tableData.data = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开
|
||||
* @param row
|
||||
*/
|
||||
show(row, orderId) {
|
||||
this.query = { ...this.resetQuery }
|
||||
this.dialogVisible = true
|
||||
this.query.creditBuyerId = row.id
|
||||
this.query.orderId = orderId
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页大小改变
|
||||
* @param e
|
||||
*/
|
||||
sizeChange(e) {
|
||||
this.query.size = e
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页回调
|
||||
* @param e
|
||||
*/
|
||||
paginationChange(e) {
|
||||
this.query.page = e
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
reset() {
|
||||
this.query = { ...this.resetQuery }
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item_wrap {
|
||||
$size: 80px;
|
||||
|
||||
.item {
|
||||
$radius: 4px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(data-index);
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
border-radius: 0 0 $radius 0;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '删除';
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: $size;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:show-close="false"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
center
|
||||
>
|
||||
<div slot="title" class="dialog-title">{{ form.id?'编辑':'创建' }}挂账人</div>
|
||||
<div class="content">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="状态" prop="status" style="width: 100%;">
|
||||
<el-switch
|
||||
v-model="form.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="挂账人" prop="debtor" style="width: 100%;">
|
||||
<el-input v-model="form.debtor" placeholder="请输入挂账人名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile" style="width: 100%;">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号" oninput="value= value.replace(/[^1-9]/g, '')" maxlength="11" />
|
||||
</el-form-item>
|
||||
<el-form-item label="职位" prop="position" style="width: 100%;">
|
||||
<el-input v-model="form.position" placeholder="请输入职位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="挂账额度" prop="creditAmount" style="width: 100%;">
|
||||
<el-input v-model="form.creditAmount" placeholder="" oninput="value= value.replace(/[^\d|\.]/g, '')">
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="还款方式" style="width: 100%;">
|
||||
<el-radio-group v-model="form.repaymentMethod" :disabled="isExist(form.id)">
|
||||
<el-radio v-for="item in repaymentMethodList" :key="item.value" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<div style="font-size: 12px;color: #999;">一经创建无法更改还款方式</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addCreditBuyer } from '@/api/credit'
|
||||
|
||||
export default {
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['couponId'],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
repaymentMethodList: [
|
||||
{ label: '按总金额还款', value: 'total' },
|
||||
{ label: '按订单还款', value: 'order' }
|
||||
],
|
||||
form: {
|
||||
id: '',
|
||||
shopId: '',
|
||||
status: 0,
|
||||
debtor: '',
|
||||
mobile: '',
|
||||
position: '',
|
||||
creditAmount: '',
|
||||
repaymentMethod: 'total'
|
||||
},
|
||||
rules: {
|
||||
debtor: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入挂账人名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
position: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入职位',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
creditAmount: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入挂账额度',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
resetForm: null
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 校验是否存在
|
||||
*/
|
||||
isExist(val) {
|
||||
if (val) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 确定
|
||||
*/
|
||||
async onSubmitHandle() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.loading = true
|
||||
if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
|
||||
// eslint-disable-next-line no-unused-vars, prefer-const
|
||||
let res = await addCreditBuyer(this.form)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
})
|
||||
this.dialogVisible = false
|
||||
this.loading = false
|
||||
this.$emit('success', res)
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开详情
|
||||
* @param row
|
||||
*/
|
||||
show(row) {
|
||||
if (row && row.id) {
|
||||
this.form = row
|
||||
} else {
|
||||
this.form = this.resetForm
|
||||
}
|
||||
this.form.status = Number(this.form.status)
|
||||
this.dialogVisible = true
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dialog-title{
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:show-close="false"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="30%"
|
||||
center
|
||||
>
|
||||
<div slot="title" class="dialog-title">挂账还款</div>
|
||||
<div class="content">
|
||||
<div v-if="form.repaymentMethod == 'total' && !form.creditBuyerId" class="credit_info">
|
||||
<div>挂账人：{{ form.debtor }}</div>
|
||||
<div>挂账金额：￥{{ form.owedAmount || 0 }}</div>
|
||||
<div>账户余额: ￥{{ form.accountBalance || 0 }}</div>
|
||||
</div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item v-if="form.repaymentMethod == 'total' && !form.creditBuyerId" label="还款方式" style="width: 100%;">
|
||||
<el-radio-group v-model="form.repaymentMethod">
|
||||
<el-radio v-for="item in repaymentMethodList" v-if="form.repaymentMethod == item.value" :key="item.value" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="还款金额" prop="repaymentAmount" style="width: 100%;">
|
||||
<el-input v-model="form.repaymentAmount" placeholder="" oninput="value= value.replace(/[^\d|\.]/g, '')">
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式" prop="paymentMethod" style="width: 100%;">
|
||||
<el-input v-model="form.paymentMethod" placeholder="请输入支付方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark" style="width: 100%;">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { creditRePayment, creditPayment } from '@/api/credit'
|
||||
|
||||
export default {
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['couponId'],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
repaymentMethodList: [
|
||||
{ label: '按总金额还款', value: 'total' },
|
||||
{ label: '按订单还款', value: 'order' }
|
||||
],
|
||||
form: {
|
||||
id: '',
|
||||
creditBuyerId: '',
|
||||
orderId: '',
|
||||
repaymentMethod: '',
|
||||
repaymentAmount: '',
|
||||
paymentMethod: '',
|
||||
remark: ''
|
||||
},
|
||||
rules: {
|
||||
repaymentAmount: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入还款金额',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
paymentMethod: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入支付方式',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
resetForm: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 确定
|
||||
*/
|
||||
async onSubmitHandle() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.loading = true
|
||||
// if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
|
||||
let res
|
||||
if (this.form.repaymentMethod === 'total') {
|
||||
res = await creditRePayment(this.form)
|
||||
} else {
|
||||
res = await creditPayment(this.form)
|
||||
}
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: res.repaymentMsg,
|
||||
type: 'success'
|
||||
})
|
||||
this.dialogVisible = false
|
||||
this.loading = false
|
||||
this.$emit('success', res)
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开
|
||||
* @param row
|
||||
*/
|
||||
show(row, order) {
|
||||
this.form = { ...this.resetForm }
|
||||
if (row.creditBuyerId) {
|
||||
this.form.creditBuyerId = row.creditBuyerId
|
||||
this.form.orderId = order.id
|
||||
} else {
|
||||
this.form.id = row.id
|
||||
}
|
||||
this.form.repaymentMethod = row.repaymentMethod
|
||||
this.dialogVisible = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.query = { ...this.resetQuery }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.credit_info{
|
||||
width: 100%;
|
||||
background: #F7F7FA;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 25px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 30px;
|
||||
view{
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.dialog-title{
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container filtration">
|
||||
<div class="l">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="openDialog(null,'add')">
|
||||
创建挂账人
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="r">
|
||||
<el-input v-model="tableData.keywords" placeholder="按挂账人或手机号" style="width: 138px;" />
|
||||
<el-select v-model="tableData.status" placeholder="全部状态" clearable style="width: 123px;">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="getTableData()">
|
||||
查询
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container content">
|
||||
<el-table v-loading="tableData.loading" :data="tableData.data">
|
||||
<el-table-column label="挂账编码" prop="id" />
|
||||
<el-table-column label="状态">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.status == '1' ? '启用' : '停用' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="挂账人" prop="debtor" />
|
||||
<el-table-column label="手机号" prop="mobile" />
|
||||
<el-table-column label="挂账额度(元)" prop="creditAmount" />
|
||||
<el-table-column label="已挂账金额(元)" prop="owedAmount" />
|
||||
<el-table-column label="剩余挂账额度(元)" prop="remainingAmount" />
|
||||
<el-table-column label="账户余额" prop="accountBalance" />
|
||||
<el-table-column label="适用门店" prop="shopName" />
|
||||
<el-table-column label="操作" width="250">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="$router.push({name: 'data_creditDetail', query: {id: scope.row.id, repaymentMethod: scope.row.repaymentMethod}} )">查看明细</el-button>
|
||||
<el-button type="text" @click="openDialog(scope.row,'edit')">编辑</el-button>
|
||||
<el-button :style="{ color: scope.row.repaymentMethod == 'order' ? '#999' :''}" type="text" @click="openDialog(scope.row,'repayment')">还款</el-button>
|
||||
<el-button type="text" @click="openDialog(scope.row,'rePaymentRecord')">还款记录</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
|
||||
<el-button
|
||||
slot="reference"
|
||||
type="text"
|
||||
>删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="tableData.page"
|
||||
:page-size="tableData.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 创建挂账人 -->
|
||||
<creditAdd ref="creditAdd" @success="resetHandle" />
|
||||
|
||||
<!-- 还款 -->
|
||||
<creditRepayment ref="creditRepayment" @success="resetHandle" />
|
||||
|
||||
<!-- 还款记录 -->
|
||||
<creditRepaymentRecord ref="creditRepaymentRecord" @success="resetHandle" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import creditAdd from './components/credit_add.vue'
|
||||
import creditRepayment from './components/credit_repayment.vue'
|
||||
import creditRepaymentRecord from './components/credit_RePaymentRecord.vue'
|
||||
import { getCreditBuyerList, delCreditBuyer } from '@/api/credit'
|
||||
export default {
|
||||
// eslint-disable-next-line vue/no-unused-components
|
||||
components: { creditAdd, creditRepayment, creditRepaymentRecord },
|
||||
filters: {
|
||||
|
||||
typeFilter(value) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
},
|
||||
effectTypeFilter(value) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
value: '1',
|
||||
label: '启用'
|
||||
},
|
||||
{
|
||||
value: '0',
|
||||
label: '停用'
|
||||
}
|
||||
],
|
||||
tableData: {
|
||||
keywords: '',
|
||||
status: '',
|
||||
data: [],
|
||||
page: 1,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 获取挂账人列表
|
||||
*/
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await getCreditBuyerList({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
keywords: this.tableData.keywords,
|
||||
status: this.tableData.status,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.data = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除挂账人
|
||||
* @param id
|
||||
*/
|
||||
async delTableHandle(id) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const res = await delCreditBuyer(id)
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 操作
|
||||
*/
|
||||
openDialog(row, type) {
|
||||
if (type === 'add') {
|
||||
this.$refs.creditAdd.show()
|
||||
} else if (type === 'edit') {
|
||||
this.$refs.creditAdd.show(row)
|
||||
} else if (type === 'repayment' && row.repaymentMethod === 'total') {
|
||||
this.$refs.creditRepayment.show(row)
|
||||
} else if (type === 'rePaymentRecord') {
|
||||
this.$refs.creditRepaymentRecord.show(row)
|
||||
}
|
||||
},
|
||||
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.page = 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页大小改变
|
||||
sizeChange(e) {
|
||||
this.tableData.size = e
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
}
|
||||
.filtration{
|
||||
overflow: hidden;
|
||||
.l{
|
||||
float: left;
|
||||
}
|
||||
.r{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,464 @@
|
|||
<!-- eslint-disable vue/valid-v-bind -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form :model="query" inline label-position="left">
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="timeValue" @change="timeChange">
|
||||
<el-radio-button label="">全部</el-radio-button>
|
||||
<el-radio-button label="0">今天</el-radio-button>
|
||||
<el-radio-button label="-1">昨天</el-radio-button>
|
||||
<el-radio-button label="-7">最近7天</el-radio-button>
|
||||
<el-radio-button label="-30">最近30天</el-radio-button>
|
||||
<el-radio-button label="week">本周</el-radio-button>
|
||||
<el-radio-button label="month">本月</el-radio-button>
|
||||
<el-radio-button label="custom">自定义</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-if="timeValue == 'custom'"
|
||||
v-model="query.createdAt"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<template>
|
||||
<el-form-item>
|
||||
<el-select v-model="query.status" placeholder="全部状态" style="width: 140px;">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="collect_wrap">
|
||||
<div v-for="(item,index) in payCountList" :key="index" class="item">
|
||||
<div class="icon_wrap" :style="{ backgroundColor: `rgba(${item.color},0.5)` }">
|
||||
<div />
|
||||
<i class="icon" :class="item.icon" :style="{ color: `rgba(${item.color},1)` }" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="m">
|
||||
￥{{ item.amount }}
|
||||
</div>
|
||||
<div class="t">{{ item.label }}{{ index == 0 ? item.count+'笔' : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table v-loading="tableData.loading" :data="tableData.data">
|
||||
<el-table-column label="创建日期" prop="createTime" />
|
||||
<el-table-column label="订单号" prop="orderId" />
|
||||
<el-table-column label="应付金额" prop="payAmount">
|
||||
<template v-slot="scope"> {{ '￥'+scope.row.payAmount || '-' }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已付款金额" prop="paidAmount">
|
||||
<template v-slot="scope"> {{ '￥'+scope.row.paidAmount || '-' }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="待付款金额" prop="unpaidAmount">
|
||||
<template v-slot="scope"> {{ '￥'+scope.row.unpaidAmount || '-' }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="salesAmount">
|
||||
<template v-slot="scope">
|
||||
{{
|
||||
scope.row.status == 'unpaid' ? '未付款' :
|
||||
scope.row.status == 'partial' ? '部分支付' :
|
||||
scope.row.status == 'paid' ? '已付款' : ''
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="付款方式" prop="lastPaymentMethod">
|
||||
<template v-slot="scope"> {{ scope.row.lastPaymentMethod }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="remark">
|
||||
<template v-slot="scope"> {{ scope.row.remark }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="付款时间" prop="lastPaymentTime" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" :style="{ color: repaymentMethod == 'total' ? '#999' :''}" @click="openDialog(scope.row,'payment')">付款</el-button>
|
||||
<el-button type="text" @click="openDialog(scope.row,'paymentRecord')">账单付款记录</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="query.page"
|
||||
:page-size="query.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 还款 -->
|
||||
<creditRepayment ref="creditRepayment" @success="resetHandle" />
|
||||
|
||||
<!-- 还款记录 -->
|
||||
<creditRepaymentRecord ref="creditRepaymentRecord" @success="resetHandle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import creditRepayment from './components/credit_repayment.vue'
|
||||
import creditRepaymentRecord from './components/credit_RePaymentRecord.vue'
|
||||
import { creditBuyerOrderList, creditBuyerOrderSummary } from '@/api/credit'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
components: { creditRepayment, creditRepaymentRecord },
|
||||
filters: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeValue: '',
|
||||
resetQuery: null,
|
||||
repaymentMethod: '',
|
||||
statusList: [
|
||||
{ label: '未付款', value: 'unpaid' },
|
||||
{ label: '部分支付', value: 'partial' },
|
||||
{ label: '已付款', value: 'paid' }
|
||||
],
|
||||
query: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
creditBuyerId: '',
|
||||
createdAt: [],
|
||||
status: ''
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
loading: false,
|
||||
total: 0
|
||||
},
|
||||
downloadLoading: false,
|
||||
payCountList: [
|
||||
{ label: '总交易', icon: 'el-icon-info', color: '201, 120, 236', amount: 0, count: 0 },
|
||||
{ label: '已支付金额', icon: 'el-icon-success', color: '70, 181, 24', amount: 0 },
|
||||
{ label: '待支付金额', icon: 'el-icon-circle-plus', color: '248, 110, 16', amount: 0 },
|
||||
{ label: '待支付笔数', icon: 'el-icon-warning', color: '254, 180, 38', amount: 0 }
|
||||
],
|
||||
payCountTotal: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query.creditBuyerId = this.$route.query.id
|
||||
this.repaymentMethod = this.$route.query.repaymentMethod
|
||||
this.resetQuery = { ...this.query }
|
||||
// repaymentMethod
|
||||
this.getTableData()
|
||||
// this.tbShopCategoryGet()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取明细数据
|
||||
*/
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
this.creditDetailSummary()
|
||||
// eslint-disable-next-line prefer-const
|
||||
let params = {
|
||||
page: this.query.page,
|
||||
size: this.query.size,
|
||||
creditBuyerId: this.query.creditBuyerId
|
||||
}
|
||||
if (this.query.createdAt.length > 0) {
|
||||
params.beginDate = this.query.createdAt[0].substring(0, 10)
|
||||
params.endDate = this.query.createdAt[1].substring(0, 10)
|
||||
}
|
||||
// eslint-disable-next-line prefer-const
|
||||
let res = await creditBuyerOrderList(params)
|
||||
this.tableData.loading = false
|
||||
this.tableData.data = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取明细统计
|
||||
*/
|
||||
async creditDetailSummary() {
|
||||
try {
|
||||
// eslint-disable-next-line prefer-const
|
||||
let params = {
|
||||
page: this.query.page,
|
||||
size: this.query.size,
|
||||
creditBuyerId: this.query.creditBuyerId
|
||||
}
|
||||
if (this.query.createdAt.length > 0) {
|
||||
params.beginDate = this.query.createdAt[0].substring(0, 10)
|
||||
params.endDate = this.query.createdAt[1].substring(0, 10)
|
||||
}
|
||||
// eslint-disable-next-line prefer-const
|
||||
let res = await creditBuyerOrderSummary(params)
|
||||
this.payCountList[0].amount = res.payAmountTotal
|
||||
this.payCountList[0].count = res.count
|
||||
this.payCountList[1].amount = res.paidAmountTotal
|
||||
this.payCountList[2].amount = res.unpaidAmountTotal
|
||||
this.payCountList[3].amount = res.unpaidCount
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 操作
|
||||
*/
|
||||
openDialog(row, type) {
|
||||
if (type === 'payment' && this.repaymentMethod === 'order') {
|
||||
this.$refs.creditRepayment.show({ creditBuyerId: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod }, row)
|
||||
} else if (type === 'paymentRecord') {
|
||||
this.$refs.creditRepaymentRecord.show({ creditBuyerId: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod }, row.id)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换时间
|
||||
* @param e
|
||||
*/
|
||||
timeChange(e) {
|
||||
const format = ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59']
|
||||
switch (e) {
|
||||
case '':
|
||||
// 全部
|
||||
this.query.createdAt = []
|
||||
break
|
||||
case '0':
|
||||
// 今天
|
||||
this.query.createdAt = [
|
||||
dayjs().format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
]
|
||||
break
|
||||
case '-1':
|
||||
// 昨天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-1, 'd')
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.add(-1, 'd')
|
||||
.format(format[1])
|
||||
]
|
||||
break
|
||||
case '-7':
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-7, 'd')
|
||||
.format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
]
|
||||
break
|
||||
case '-30':
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-30, 'd')
|
||||
.format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
]
|
||||
break
|
||||
case 'week':
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.startOf('week')
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.endOf('week')
|
||||
.format(format[1])
|
||||
]
|
||||
break
|
||||
case 'month':
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.startOf('month')
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.endOf('month')
|
||||
.format(format[1])
|
||||
]
|
||||
break
|
||||
case 'custom':
|
||||
// 自定义
|
||||
this.query.createdAt = []
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置查询
|
||||
*/
|
||||
resetHandle() {
|
||||
this.timeValue = ''
|
||||
this.query = { ...this.resetQuery }
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页大小改变
|
||||
* @param e
|
||||
*/
|
||||
sizeChange(e) {
|
||||
this.tableData.size = e
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页回调
|
||||
* @param e
|
||||
*/
|
||||
paginationChange(e) {
|
||||
this.query.page = e
|
||||
this.getTableData()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.collect_wrap {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
background-size: 100% 100%;
|
||||
width: 255px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F7F7FA;
|
||||
padding: 20px;
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
|
||||
.icon_wrap {
|
||||
$size: 34px;
|
||||
$border: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
>div{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
width: $size + $border;
|
||||
height: $size + $border;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--bg-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
right: 0;
|
||||
top: 1px;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.m {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refund {
|
||||
color: #ff9731;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table_order_info {
|
||||
.order_no {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
.goods_info {
|
||||
.row {
|
||||
display: flex;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.sku {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<div class="t">总金额</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="item" v-for="item in payCountList" :key="item.payType">
|
||||
<!-- <div class="item" v-for="item in payCountList" :key="item.payType">
|
||||
<div class="icon_wrap" style="--bg-color:#fff">
|
||||
<el-image class="img" :src="item.icon"></el-image>
|
||||
</div>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
<div class="m">￥{{ item.payAmount || 0 }}</div>
|
||||
<div class="t">{{ item.payType }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
|
|
@ -396,7 +396,7 @@ export default {
|
|||
async getTableData(switchs = false) {
|
||||
this.tableData.loading = true;
|
||||
try {
|
||||
this.payCount();
|
||||
// this.payCount();
|
||||
const productName = this.query.productName.replace(/\s+/g, '')
|
||||
const res = await tbOrderInfoData({
|
||||
page: this.tableData.page,
|
||||
|
|
|
|||
Loading…
Reference in New Issue