Skip to content

C
center-finance
提交 b10f132c authored 作者: matian's avatar matian
浏览文件
操作

update：代码提交

上级 71852390
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1256 行增加 和 18 行删除
package-lock.json
浏览文件 @ b10f132c
差异被折叠。
package.json
浏览文件 @ b10f132c
......@@ -17,7 +17,8 @@
"query-string": "^7.0.1",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuex": "^3.6.2"
"vuex": "^3.6.2",
"xlsx": "^0.17.1"
},
"devDependencies": {
"@rollup/plugin-eslint": "^8.0.1",
......
src/components/base/AppList.vue
浏览文件 @ b10f132c
......@@ -205,9 +205,9 @@ export default {
this.loading = true
httpRequest(params)
.then(res => {
const { data = [], page_info: pageInfo = {} } = res || {}
this.page.total = parseInt(pageInfo.total_number || '')
this.dataList = callback ? callback(data) : data
const { list = [], total = 0 } = res.data || {}
this.page.total = parseInt(total)
this.dataList = callback ? callback(list) : list
})
.catch(() => {
this.page.total = 0
......
src/modules/payment/api.js
浏览文件 @ b10f132c
import httpRequest from '@/utils/axios'
// 获取项目列表
export function getProjectList(data) {
return httpRequest.get('/api/finance/v1/projects/list', data)
}
// 获取支付过滤条件
export function getCondition(data) {
return httpRequest.get('/api/finance/v1/payments/condition', data)
}
// 获取支付列表
export function getPayList(data) {
return httpRequest.get('/api/finance/v1/payments/list', data)
}
// 支付列表下载
export function download(data) {
return httpRequest.get('/api/finance//v1/payments/download', data)
}
/**
* 获取商品列表
*/
export function getGoodsList(data) {
return httpRequest.post('/api/shop/commodity/spu/search', data).then({})
// 是否允许开具发票
export function allowCreate(data) {
return httpRequest.post('/api/finance/v1/payments/update-can-invoice', data)
}
// 退费
export function drawBack(data) {
return httpRequest.post('/api/finance/v1/payments/drawback', data)
}
// 获取表头
export function getTableTitle(data) {
return httpRequest.get('/api/finance/v1/payments/title-list', data)
}
// 设置表头
export function updateTableTitle(data) {
return httpRequest.get('/api/finance/v1/payments/update-title', data)
}
// 查看支付详情
export function payDetail(data) {
return httpRequest.get('/api/finance/v1/payments/details', data)
}
// 开具发票
export function createNewTicket(data) {
return httpRequest.get('/api/finance/v1/invoices/create', data)
}
// 作废发票
export function cancelTicket(data) {
return httpRequest.post('/api/finance/v1/invoices/cancel', data)
}
// 确认（取消）单条缴费到账
export function payConfirm(data) {
return httpRequest.get('/api/finance/v1/payments/details-confirm', data)
}
// 渠道列表
export function getChannelList(data) {
return httpRequest.get('/api/finance/v1/channels/list', data)
}
// // 申请状态
// export function getApplyStatusList(data) { // 待修改
// return httpRequest.get('/api/finance/v1/channels/list', data)
// }
// 费用类型
export function getExpenseList(data) { // 待修改
return httpRequest.get('/api/finance/v1/channels/list', data)
}
src/modules/payment/components/Channel.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 支付详情-渠道信息 -->
<template>
<table border="1" width="1200px" cellspacing="0">
<tr>
<th>不含税销售金额</th>
<td>dfsvasdfc</td>
<th>渠道代理费提基数</th>
<td>vfdvdav</td>
<th>服务费规则</th>
<td>dfvdvdfav</td>
</tr>
<tr>
<th>服务费比例</th>
<td>dfdsfsef</td>
<th>代理服务费</th>
<td>fvfdvdfv</td>
<th>代理服务费（不含税金额）</th>
<td>vfadvdeafv</td>
</tr>
<tr>
<th>户名</th>
<td>dfdsfsef</td>
<th>账号</th>
<td>fvfdvdfv</td>
<th>开户行</th>
<td>vfadvdeafv</td>
</tr>
<tr>
<th>渠道税率</th>
<td colspan="5">dfdsfsef</td>
</tr>
</table>
</template>
<script>
export default {
prop: {
payDetailList: {
type: Array,
default: []
}
}
}
</script>
<style></style>
src/modules/payment/components/Collection.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 支付详情-收款信息 -->
<template>
<table border="1" width="1200px" cellspacing="0">
<tr>
<th>应缴金额</th>
<td>dfsvasdfc</td>
<th>实缴金额</th>
<td>vfdvdav</td>
<th>代缴金额</th>
<td>dfvdvdfav</td>
</tr>
<tr>
<th>手续费</th>
<td>dfdsfsef</td>
<th>到账金额</th>
<td>fvfdvdfv</td>
<th>待确认金额</th>
<td>vfadvdeafv</td>
</tr>
<tr>
<th>首次缴费金额</th>
<td></td>
<th>末次缴费金额</th>
<td colspan="3"></td>
</tr>
</table>
</template>
<script>
export default {
prop: {
payDetailList: {
type: Array,
default: []
}
}
}
</script>
<style>
</style>
\ No newline at end of file
src/modules/payment/components/Commodity.vue 0 → 100644
浏览文件 @ b10f132c
<!--支付详情-商品信息 -->
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
</app-list>
</app-card>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
// 接口
// import { getOrderList } from '../api'
export default {
components: { AppCard, AppList },
prop: {
payDetailList: {
type: Array,
default: []
}
},
data() {
return {
}
},
computed: {
// 列表配置
tableOptions() {
return {
remote: {
// httpRequest: getOrderList, // 获取订单列表
params: {},
beforeRequest: this.beforeRequest
},
columns: [
{ label: '商品号', prop: 'id', minWidth: 100 },
{ label: '商品图片', prop: 'img', align: 'center', minWidth: 100 },
{ label: '商品名称', prop: 'name', align: 'center', minWidth: 100 },
{ label: '标准价格', prop: 'standardPrice', align: 'center', minWidth: 100 },
{ label: '数量', prop: 'num', align: 'center', minWidth: 100 },
{ label: '实付单价', prop: 'payPrice', align: 'center', minWidth: 100 }
],
data: [
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
}
]
}
}
},
methods: {
}
}
</script>
src/modules/payment/components/Confirmed.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 支付详情-已确认列表 -->
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
<template v-slot:table-x>
<el-button @click="toDetail">查看</el-button>
<el-button>取消到账</el-button>
</template>
</app-list>
</app-card>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
// 接口
// import { getOrderList } from '../api'
export default {
prop: {
payDetailList: {
type: Array,
default: []
}
},
components: { AppCard, AppList },
data() {
return {
}
},
computed: {
// 列表配置
tableOptions() {
return {
remote: {
// httpRequest: getOrderList, // 获取订单列表
params: {},
beforeRequest: this.beforeRequest
},
columns: [
{ label: '#', type: 'index', minWidth: '50px', fixed: 'left' },
{ label: '支付凭证', prop: 'id', minWidth: 100 },
{ label: '支付人姓名', prop: 'img', align: 'center', minWidth: 100 },
{ label: '支付金额', prop: 'name', align: 'center', minWidth: 100 },
{ label: '支付时间', prop: 'standardPrice', align: 'center', minWidth: 100 },
{ label: '支付方式', prop: 'num', align: 'center', minWidth: 100 },
{ label: '支付状态', prop: 'payPrice', align: 'center', minWidth: 100 },
{ label: '创建日期', prop: 'payPrice', align: 'center', minWidth: 100 },
{ slots: 'table-x', align: 'center', minWidth: 100 }
],
data: [
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
}
]
}
}
},
methods: {
beforeRequest(params, isReset) {
// 重置
if (isReset) {
params.price_min = ''
params.price_max = ''
}
params.status = this.activeName === '0' ? '' : this.activeName
params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
return params
},
// 选择
handleSelectionChange(value) {
this.multipleSelection = value
},
toDetail() {
this.$router.push({
name: 'paydetail'
})
}
}
}
</script>
src/modules/payment/components/MoreSelect.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 更多筛选 -->
<template>
<el-form ref="ruleForm" :model="form" :rules="rules">
<el-form-item label="跟进人" prop="follow">
<el-select v-model="form.follow">
<el-option v-for="(item,index) in followList" :key="index" :label="item.label" :value="item.value">
{{item.label}}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发票类型" prop="ticketType">
<el-select v-model="form.ticketType">
<el-option v-for="(item,index) in TicketTypeList" :key="index" :label="item.label" :value="item.value">
{{item.label}}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="允许开具发票" prop="status">
<el-radio-group v-model="form.status">
<el-radio>开启</el-radio>
<el-radio>关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="首次缴费时间" prop="firstDate">
<el-date-picker
v-model="form.firstDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="末次缴费时间" prop="lastDate">
<el-date-picker
v-model="form.lastDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
size='small'
style="width:360px;">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="$emit('moreSelectVisible')">取消</el-button>
<el-button type="primary" @click="onSubmit">确认</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
follow: '',
ticketType: '',
status: '',
firstDate: '',
lastDate: ''
},
rules: [
{},
{}
]
}
},
methods: {
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.$emit('createTicket', this.form)
}
})
}
}
}
</script>
<style></style>
src/modules/payment/components/Order.vue
浏览文件 @ b10f132c
<!-- 支付详情-订单信息 -->
<template>
<div>
<table border="1" width="1200px" cellspacing="0">
......@@ -20,7 +21,14 @@
</template>
<script>
export default {}
export default {
prop: {
payDetailList: {
type: Array,
default: []
}
}
}
</script>
<style></style>
src/modules/payment/components/ShareQrcode.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 发票二维码 -->
<template>
<el-dialog
:title="title"
width="700px"
:close-on-click-modal="false"
@opened="handleOpened"
v-bind="$attrs"
v-on="$listeners"
>
<div class="qrcode">
<div class="qrcode-left">
<qrcode-vue :value="value" size="180" ref="qrcode" />
</div>
<div class="qrcode-right">
<h4>分享链接</h4>
<el-input readonly :value="value" id="qrcodeValue">
<el-button slot="append" data-clipboard-target="#qrcodeValue" ref="copy">复制</el-button>
</el-input>
<p>可推广至微信、支付宝、QQ等任意渠道</p>
<a :href="qrcodeUrl" download="下载二维码">
<el-button type="text">下载二维码</el-button>
</a>
</div>
</div>
</el-dialog>
</template>
<script>
// import QrcodeVue from 'qrcode.vue'
// import Clipboard from 'clipboard'
export default {
// components: { QrcodeVue },
props: {
title: { type: String, default: '推广' },
value: { type: String, default: '' }
},
data() {
return {
qrcodeUrl: '',
clipboard: null
}
},
methods: {
getQrcodeUrl() {
this.qrcodeUrl = this.$refs.qrcode.$el
.querySelector('canvas')
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream')
},
// initClipboard() {
// if (this.clipboard) {
// return
// }
// this.clipboard = new Clipboard(this.$refs.copy.$el)
// this.clipboard.on('success', () => {
// this.$message({ message: '复制成功！', type: 'success' })
// })
// this.clipboard.on('error', () => {
// this.$message({ message: '复制失败，请手动选择复制！', type: 'error' })
// })
// },
handleOpened() {
this.$nextTick(function () {
this.initClipboard()
this.getQrcodeUrl()
})
}
},
destroyed() {
this.clipboard && this.clipboard.destroy()
}
}
</script>
<style lang="scss" scoped>
.qrcode {
margin: 0 10px 20px;
display: flex;
}
.qrcode-left {
background-color: #f7f8fa;
box-sizing: border-box;
width: 292px;
height: 292px;
padding: 56px;
}
.qrcode-right {
flex: 1;
margin-left: 20px;
h4 {
font-weight: normal;
margin-bottom: 12px;
}
p {
font-size: 14px;
color: #969799;
line-height: 20px;
height: 16px;
margin: 8px 0;
}
}
</style>
src/modules/payment/components/Student.vue
浏览文件 @ b10f132c
<!-- 支付详情-学员信息 -->
<template>
<div>
<table border="1" width="1200px" cellspacing="0">
......@@ -22,7 +23,14 @@
</template>
<script>
export default {}
export default {
prop: {
payDetailList: {
type: Array,
default: []
}
}
}
</script>
<style></style>
src/modules/payment/components/TableHeaderSelect.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 表头筛选 -->
<template>
<el-dialog title="表头设置" width="40%" v-bind="$attrs"
v-on="$listeners">
<el-form>
<el-form-item label="表头名称">
<span>隐藏/显示</span>
</el-form-item>
<div v-for="(item,index) in TableTitleList" :key="index">
<el-form-item :label="item.label">
<el-switch active-color="#13ce66" v-model="item.status" inactive-color="#ff4949" @change="changeStatus()"></el-switch>
</el-form-item>
</div>
</el-form>
</el-dialog>
</template>
<script>
import { getTableTitle } from '../api'
export default {
data() {
return {
TableTitleList: [
{ label: 'fjdvhsjid09p90nfv', status: false },
{ label: 'fjdvhsjop09p9idnfv', status: false },
{ label: 'fjdvhsjijkjhkuidnfv', status: false },
{ label: 'fjdvhsjihbggdnfv', status: false },
{ label: 'fjdvhsjidsfsdfsdnfv', status: false }
]
}
},
mounted() {
this.fetchTableList() // 获取表头
},
methods: {
fetchTableList() {
getTableTitle().then(res => {
if (res.code === 0) {
this.tableList = res.data
}
})
},
// 改变表头状态
changeStatus() {
this.status = !this.status
this.$emit('changeStatus', status)
}
}
}
</script>
<style></style>
src/modules/payment/components/Ticket.vue
浏览文件 @ b10f132c
<!-- 支付详情-发票表格 -->
<template>
<div class="ticketInfo">
<table border="1" width="1200px" cellspacing="0" v-for="(item, index) in TicketInfoList" :key="index" class="table">
......@@ -60,6 +62,12 @@
<script>
export default {
prop: {
payDetailList: {
type: Array,
default: []
}
},
data() {
return {
TicketInfoList: [
......
src/modules/payment/components/TicketForm.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 开具发票-->
<template>
<div>
<h3>支付信息</h3>
<table border="1" width="720px" cellspacing="0" class="table">
<tr>
<th>客户姓名</th>
<td>lisi</td>
<th>k客户编号</th>
<td>lisi</td>
<th>订单编号</th>
<td>lisi</td>
</tr>
<tr>
<th>支付状态</th>
<td>lisi</td>
<th>报名项目</th>
<td>lisi</td>
<th>应缴金额</th>
<td>lisi</td>
</tr>
<tr>
<th>实缴金额</th>
<td>lisi</td>
<th>交易流水号</th>
<td>lisi</td>
<th>缴费时间</th>
<td>lisi</td>
</tr>
</table>
<el-form label-width="120px" ref="ruleForm" :model="form" :rules="rules">
<div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
<el-form-item label="开票类型" prop="toticket_type">
<el-radio-group v-model="form.toticket_type">
<el-radio :label="1">红字发票</el-radio>
<el-radio :label="2" checked>蓝字发票</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
<el-form-item label="抬头类型" prop="people_type">
<!-- change事件 -->
<el-radio-group v-model="form.people_type">
<el-radio :label="1">企业</el-radio>
<el-radio :label="2">非营利单位</el-radio>
<el-radio :label="3">个人</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
<el-form-item label="发票信息" label-width="100px" class="title">
<el-button type="text" style="float: right">历史开票信息</el-button>
</el-form-item>
<el-form-item label="发票类型" prop="invoice_type">
<!-- change事件 -->
<el-select v-model="form.invioce_type" placeholder="请选择发票类型" size="small">
<el-option label="普通纸质发票" :value="1"></el-option>
<el-option label="普通电子发票" :value="2"></el-option>
<!-- 纸质专票企业可以开 -->
<el-option label="专用纸质发票" :value="3" v-show="form.people_type === '1'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="纳税人名称" prop="taxpayer_name">
<el-input v-model="form.taxpayer_name"></el-input>
</el-form-item>
<!-- 企业发票显示税号 -->
<el-form-item label="纳税人识别号" prop="taxpayer_identifier" v-show="form.people_type === '1'">
<el-input v-model="taxpayer_identifier"></el-input>
</el-form-item>
<div v-show="form.people_type === '1' && form.invioce_type === '3' " >
<el-form-item label="地址" prop="taxpayer_address">
<el-input v-model="form.taxpayer_address"></el-input>
</el-form-item>
<el-form-item label="电话" prop="taxpayer_mobile">
<el-input v-model="form.taxpayer_mobile"></el-input>
</el-form-item>
<el-form-item label="开户行" prop="taxpayer_bank_name">
<el-input v-model="form.taxpayer_bank_name"></el-input>
</el-form-item>
<el-form-item label="银行账号" prop="taxpayer_bank_account">
<el-input v-model="form.taxpayer_bank_account"></el-input>
</el-form-item>
</div>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark"></el-input>
</el-form-item>
<el-form-item label="收票信息">
<span>请填写邮箱地址，方便接收电子发票</span>
</el-form-item>
<!-- 电子发票显示邮箱 -->
<el-form-item label="邮寄地址" prop="recipient_address" v-show="form.people_type === '2'">
<el-input v-model="form.recipient_address"></el-input>
</el-form-item>
<el-form-item label="收件人名称" prop="recipient_name">
<el-input v-model="form.recipient_name"></el-input>
</el-form-item>
<el-form-item label="收件人手机号" prop="recipient_mobile">
<el-input v-model="form.recipient_mobile"></el-input>
</el-form-item>
<el-form-item label="票据跟进人" prop="follow">
<el-input v-model="form.follow"></el-input>
</el-form-item>
</div>
<el-form-item>
<el-button size="mini" @click="$emit('ticketVisible')">取消</el-button>
<el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
ticketVisible: {
type: Boolean,
default: false
}
},
data() {
return {
form: {
toticket_type: '',
people_type: '',
ticket_type: '',
taxpayer_name: '',
taxpayer_num: '',
address: '',
phone: '',
bank: '',
account: '',
mail_address: '',
recipient_name: '',
recipient_phone: '',
follow: ''
},
rules: {
toticket_type: [{ required: true, message: '请选择开票类型', trigger: 'change' }],
people_type: [{ required: true, message: '请选择抬头类型', trigger: 'change' }],
ticket_type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
taxpayer_name: [
{ required: true, message: '请输入纳税人名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
taxpayer_num: [
{ required: true, message: '请输入纳税人识别号', trigger: 'blur' },
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' },
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' },
{ min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
],
bank: [
{ required: true, message: '请输入开户行', trigger: 'blur' },
{ min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
],
account: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 19, max: 19, message: '长度在 19 个字符', trigger: 'blur' }
],
mail_address: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
],
recipient_name: [
{ required: true, message: '请输入收件人名称', trigger: 'blur' },
{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
],
recipient_phone: [
{ required: true, message: '请输入收件人手机号', trigger: 'blur' },
{ min: 11, max: 11, message: '长度 11 个字符', trigger: 'blur' }
],
follow: [
{ required: true, message: '请输入跟进人', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
},
methods: {
// 提交开票信息
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.$emit('createTicket', this.form)
}
})
}
}
}
</script>
<style>
.table {
margin-bottom: 20px;
}
</style>
src/modules/payment/components/Toconfirm.vue 0 → 100644
浏览文件 @ b10f132c
<!-- 待确认列表 -->
<template>
<app-card><app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange"><template v-slot:table-x><el-button @click="toDeal">处理</el-button></template></app-list></app-card>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
// 接口
// import { getOrderList } from '../api'
export default {
prop: {
payDetailList: {
type: Array,
default: []
}
},
components: { AppCard, AppList },
data() {
return {
}
},
computed: {
// 列表配置
tableOptions() {
return {
remote: {
// httpRequest: getOrderList, // 获取订单列表
params: {},
beforeRequest: this.beforeRequest
},
columns: [
{ label: '#', type: 'index', minWidth: '50px', fixed: 'left' },
{ label: '支付凭证', prop: 'id', minWidth: 100 },
{ label: '支付人姓名', prop: 'img', align: 'center', minWidth: 100 },
{ label: '支付金额', prop: 'name', align: 'center', minWidth: 100 },
{ label: '支付时间', prop: 'standardPrice', align: 'center', minWidth: 100 },
{ label: '支付方式', prop: 'num', align: 'center', minWidth: 100 },
{ label: '其他支付方式', prop: 'num', align: 'center', minWidth: 100 },
{ label: '交易流水号', prop: 'num', align: 'center', minWidth: 100 },
{ label: '支付状态', prop: 'payPrice', align: 'center', minWidth: 100 },
{ label: '创建日期', prop: 'payPrice', align: 'center', minWidth: 100 },
{ slots: 'table-x', align: 'center', minWidth: 100 }
],
data: [
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
},
{
id: 'dfSDfsdf',
img: 'FDZF',
name: 'DSZF',
standardPrice: 'FDSZF',
num: 'dsff',
payPrice: 'aefes'
}
]
}
}
},
methods: {
// beforeRequest(params, isReset) {
// // 重置
// if (isReset) {
// params.price_min = ''
// params.price_max = ''
// }
// params.status = this.activeName === '0' ? '' : this.activeName
// params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
// return params
// },
// // 选择
// handleSelectionChange(value) {
// this.multipleSelection = value
// },
// 处理
toDeal() {
console.log('111')
this.$router.push({
name: 'deal'
})
}
}
}
</script>
src/modules/payment/index.js
浏览文件 @ b10f132c
......@@ -14,6 +14,18 @@ const routes = [
path: 'payment/:id',
component: () => import('./views/Detail.vue'),
meta: { title: '支付详情' }
},
{
name: 'deal',
path: 'deal',
component: () => import('./views/Deal.vue'),
meta: { title: '支付详情' }
},
{
name: 'paydetail',
path: 'paydetail',
component: () => import('./views/PayDetail.vue'),
meta: { title: '支付详情' }
}
]
}
......
src/modules/payment/views/Deal.vue 0 → 100644
浏览文件 @ b10f132c
<template>
<div>
<app-card title="支付明细信息">
<table border="1" width="1200px" cellspacing="0">
<tr>
<th>支付人姓名</th>
<td>dsfrsfc</td>
<th>费用类型</th>
<td>是的v方式地方vc</td>
<th>支付金额</th>
<td>21313</td>
<th>支付状态</th>
<td>个大哥大哥v那边</td>
</tr>
<tr>
<th>支付方式</th>
<td></td>
<th>其他支付方式</th>
<td></td>
<th>支付时间</th>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="7">是的方式为非阿法尔</td>
</tr>
<tr>
<th>项目</th>
<td></td>
<th>销售</th>
<td></td>
<th>渠道</th>
<td colspan="3"></td>
</tr>
<tr>
<th>备注</th>
<td colspan="7">dfsdfs</td>
</tr>
<tr>
<th>创建时间</th>
<td colspan="3">5</td>
<th>到账时间</th>
<td colspan="3"></td>
</tr>
</table>
</app-card>
<app-card>
<el-form ref="formRef" :model="form" :rules="formRules">
<el-form-item label="支付状态" label-width="80px" prop="payStatus">
<el-select v-model="form.payStatus">
<el-option label="已支付" :value="1"></el-option>
<el-option label="未支付" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="手续费" label-width="80px" prop="commission">
<el-input size="mini" v-model="form.commission"></el-input>
</el-form-item>
<el-form-item label="到账时间" label-width="80px" prop="date">
<el-date-picker
v-model="form.date"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期时间"
end-placeholder="结束日期时间"
value-format="yyyy-MM-dd HH:mm:ss"
size="small"
style="width: 360px"
></el-date-picker>
</el-form-item>
<el-form-item label="备注" label-width="80px" prop="remark">
<el-input size="mini" v-model="form.remark"> </el-input>
</el-form-item>
<el-form-item label="到账凭证" label-width="80px" prop="document">
<el-upload class="upload-demo"
drag action="https://jsonplaceholder.typicode.com/posts/"
multiple
:file-list="fileList"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
:http-request="fetchFileUpload" >
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传excel文件</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" style="margin-left: 200px" @click="dealPay">提交</el-button>
</el-form-item>
</el-form>
</app-card>
</div>
</template>
<script>
import AppCard from '@/components/base/AppCard.vue'
import { payConfirm } from '../api'
import { splitStrLast } from '@/utils/util'
export default {
components: { AppCard },
data() {
return {
form: {
commission: '',
payStatus: '',
date: '',
remark: '',
document: ''
},
rules: {
payStatus: [
{ required: true, message: '请选择支付状态', trigger: 'change' }
],
commission: [
{ required: true, message: '请输入手续费', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
document: [
{ required: true, message: '请上传到账凭证', trigger: 'change' }
]
},
importDisabled: false
}
},
computed: {
// 列表配置
tableOptions() {
return {
remote: {
// httpRequest: getOrderList, // 获取订单列表
params: {},
beforeRequest: this.beforeRequest
},
filters: [
{
type: 'select',
prop: 'project',
options: this.payState,
labelKey: 'project_name',
valueKey: 'project_id',
placeholder: '支付状态'
},
{
type: 'input',
prop: 'spu_name',
placeholder: '手续费'
},
{ prop: 'date', slots: 'filter-date' },
{
type: 'input',
prop: 'spu_name',
placeholder: '备注'
}
]
}
}
},
mounted() {
this.dealPay()
},
methods: {
beforeUpload(file) {
const suffix = splitStrLast(file.name, '.')
if (!['xlsx', 'xls'].includes(suffix)) {
this.$message.error('只能上传excel文件')
return false
} else {
return true
}
},
fetchFileUpload(data) {
const formData = new window.FormData()
formData.append('file', data.file)
this.importDisabled = true
},
dealPay() {
this.$refs.formRef.validate(valid => {
if (valid) {
payConfirm().then(res => {})
}
})
}
}
}
</script>
<style></style>
src/modules/payment/views/Detail.vue
浏览文件 @ b10f132c
<template>
<div>
<app-card title="订单信息">
<Order :detailList="detailList" />
<Order :dealList= "dealList" />
</app-card>
<app-card title="学员信息">
<Student :detailList="detailList" />
<Student :dealList= "dealList" />
</app-card>
<app-card title="收款信息">
<Collection :dealList= "dealList" />
</app-card>
<app-card title="发票信息">
<Ticket :detailList="detailList" />
<Ticket :dealList= "dealList" />
</app-card>
<app-card title="渠道信息">
<Channel :dealList= "dealList" />
</app-card>
<app-card title="商品信息">
<Commodity :dealList= "dealList" />
</app-card>
<app-card title="支付待确认记录">
<Toconfirm :dealList= "dealList" />
</app-card>
<app-card title="支付确认记录">
<Confirmed :dealList= "dealList" />
</app-card>
</div>
</template>
......@@ -17,23 +32,30 @@
import AppCard from '@/components/base/AppCard.vue'
import Order from '../components/Order.vue'
import Student from '../components/Student.vue'
import Collection from '../components/Collection.vue'
import Ticket from '../components/Ticket.vue'
import Channel from '../components/Channel.vue'
import Commodity from '../components/Commodity.vue'
import Toconfirm from '../components/Toconfirm.vue'
import Confirmed from '../components/Confirmed.vue'
import { payDetail } from '../api'
export default {
components: { AppCard, Order, Student, Ticket },
components: { AppCard, Order, Student, Collection, Ticket, Channel, Commodity, Toconfirm, Confirmed },
data() {
return {
id: '',
detailList: {}
}
},
created() {
this.id = this.$route.params.id // 详情列表
// 获取发票详情信息
this.fetchTicketDetail()
},
methods: {
fetchTicketDetail() {
getTicketDetail().then(res => {
if (res.code === 0) {
payDetail().then((res) => {
if (res.data === 0) {
this.detailList = res.data
}
})
......
src/modules/payment/views/PayDetail.vue 0 → 100644
浏览文件 @ b10f132c
<template>
<el-card>
<table border="1" width="1200px" cellspacing="0">
<tr>
<th>支付人姓名</th>
<td>额度无绯闻绯闻</td>
<th>费用类型</th>
<td>发呆发呆舒服</td>
<th>支付金额</th>
<td>发v郭德纲vb</td>
<th>支付状态</th>
<td>发啊发恶风</td>
</tr>
<tr>
<th>项目</th>
<td>书法色法俄吧v</td>
<th>销售</th>
<td>反对党撒发色吧</td>
<th>渠道</th>
<td colspan="3">都是十分热啊</td>
</tr>
<tr>
<th>支付方式</th>
<td>吧官方办法但是不管v</td>
<th>其他支付方式</th>
<td>v地方v地方v </td>
<th>支付时间</th>
<td colspan="3">电饭煲v地方吧</td>
</tr>
<tr>
<th>到账金额</th>
<td>发电站v博格达峰准备v</td>
<th>手续费</th>
<td>吧成功v不分手吧</td>
<th>到账时间</th>
<td colspan="3">从v小板凳上早班v</td>
</tr>
<tr>
<th>支付凭证</th>
<td colspan="7">吧非常v表达方式吧 </td>
</tr>
<tr>
<th>到账凭证</th>
<td colspan="7">v的风格vx</td>
</tr>
<tr>
<th>备注</th>
<td colspan="7">饭店隔壁v额的烦不烦</td>
</tr>
<tr>
<th>创建时间</th>
<td colspan="3">奋斗让vv个多v</td>
<th>更新时间</th>
<td colspan="3">百分之百政府公布 </td>
</tr>
</table>
</el-card>
</template>
<script>
import { payDetail } from '../api'
export default {
data() {
return {
}
},
mounted() {
this.getPayDetail()
},
methods: {
getPayDetail() {
payDetail().then(res => {
})
}
}
}
</script>
<style>
</style>
\ No newline at end of file
src/utils/util.js 0 → 100644
浏览文件 @ b10f132c
/**
* 文件下载
* @param {string} fileUrl 文件下载地址
* @param {string} fileName 文件名
* @returns {null}
*/
export function funDownload(fileUrl, fileName) {
// console.log(fileUrl)
const elink = document.createElement('a')// 创建一个a标签
elink.download = fileName// 设置a标签的下载属性
elink.style.display = 'none'// 将a标签设置为隐藏
elink.href = fileUrl// 把之前处理好的地址赋给a标签的href
document.body.appendChild(elink)// 将a标签添加到body中
elink.click()// 执行a标签的点击方法
// URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
document.body.removeChild(elink)// 移除a标签
}
/**
* 分割字符串，取得尾部
* @param {string} str 字符串
* @param {string} split 分割符
* @returns {string}
*/
export function splitStrLast(str, split) {
const fileNameArr = str.split(split)
const last = fileNameArr[fileNameArr.length - 1]
return last
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论