|
@@ -1,381 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container">
|
|
|
- <el-card class="box-card" style="margin: 0 auto;">
|
|
|
- <h1 class="app-title">付款单</h1>
|
|
|
- <div class="refund-item">
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="24"><b>付款单名称:</b>
|
|
|
- <el-input
|
|
|
- v-model="payRepacts.name"
|
|
|
- placeholder="请输入付款单名称"
|
|
|
- clearable
|
|
|
- style="width: 250px;"
|
|
|
- /> </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="24"><b>供应商名称:</b> 浙江瑞崎科技有限公司</el-col>
|
|
|
- </el-row>
|
|
|
- <h1 style="font-size: 14px;">付款账号:</h1>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="4"><b>户名:</b>
|
|
|
- <el-input
|
|
|
- v-model="payRepacts.name"
|
|
|
- placeholder="请输入银行户名:"
|
|
|
- clearable
|
|
|
- style="width: 150px;"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="6"><b>账号:</b>
|
|
|
- <el-input
|
|
|
- v-model="payRepacts.account"
|
|
|
- clearable
|
|
|
- placeholder="请输入银行账户:"
|
|
|
- style="width: 250px;"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="6"><b>开户行:</b>
|
|
|
- <el-input
|
|
|
- v-model="payRepacts.accountBank"
|
|
|
- placeholder="请输入开户行:"
|
|
|
- style="width: 200px;"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="6"><b>账户类型:</b>
|
|
|
- <el-select v-model="payRepacts.enabledStatus" placeholder="请选择">
|
|
|
- <el-option label="公账" :value="1" />
|
|
|
- <el-option label="私账" :value="2" />
|
|
|
- </el-select>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div v-for="(repact,index) in repacts" :key="index" class="refund-item">
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="6"><b>订单编号(ID):</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
|
|
|
- <el-col :span="4"><b>下单时间:</b> {{ repact.applyTime }}</el-col>
|
|
|
- <el-col :span="4"><b>订单金额:</b> {{ repact.payableAmount }}</el-col>
|
|
|
- <el-col :span="10">
|
|
|
- <b>所有子订单:</b>
|
|
|
- <span v-for="child in repact.childOrderId" :key="child">
|
|
|
- 【{{ child }}】
|
|
|
- </span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="6"><b>机构名称:</b> {{ repact.clubName }}</el-col>
|
|
|
- <el-col :span="4"><b>机构运费:</b> 包邮</el-col>
|
|
|
- <el-col :span="4"><b>收款状态:</b> {{ repact.status | statusFilter }}</el-col>
|
|
|
- <el-col :span="10"><b>收款金额:</b> {{ repact.payableAmount }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="6"><b>子订单编号(ID)</b> {{ repact.orderNo }}({{ repact.orderId }})</el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <b>子订单佣金:</b>5000.00(17%)
|
|
|
- </el-col>
|
|
|
- <el-col :span="4"><b>商品费:</b> {{ repact.payableAmount }}</el-col>
|
|
|
- <el-col :span="10"><b>付款状态:</b> {{ repact.status | statusFilter }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="6"><b>供应商名称:</b> {{ repact.shopName }}</el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <b>供应商运费:</b>
|
|
|
- <el-input v-model="payRepacts.name" placeholder="" size="mini" clearable style="width: 80px;" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="24"><b>付供应商:</b>
|
|
|
- <b style="margin-left: 10px;">应付采美:</b>10000.00
|
|
|
- <b style="margin-left: 10px;">已付采美:</b>10000.00
|
|
|
- <b style="margin-left: 10px;">待付采美:</b>
|
|
|
- <el-input v-model="payRepacts.name" placeholder="" size="mini" clearable style="width: 150px;" />
|
|
|
- <b style="margin-left: 10px;">应付供应商:</b>10000.00
|
|
|
- <b style="margin-left: 10px;">已付供应商:</b>10000.00
|
|
|
- <b style="margin-left: 10px;">待付供应商:</b>
|
|
|
- <el-input v-model="payRepacts.name" placeholder="" size="mini" clearable style="width: 150px;" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-table :data="repact.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
|
|
|
- <el-table-column label="商品名" align="center" prop="productName" />
|
|
|
- <el-table-column label="规格" align="center" prop="unit" />
|
|
|
- <el-table-column label="数量" align="center" prop="num" />
|
|
|
- <el-table-column label="退货" align="center" prop="returnNum" />
|
|
|
- <el-table-column label="单价" align="center" prop="price" />
|
|
|
- <el-table-column label="总价" align="center" prop="totalPrice" />
|
|
|
- </el-table>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div class="refund-item">
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="5"><b>付供应商总金额:</b> 480.00 </el-col>
|
|
|
- <el-col :span="6"><b>付采美总金额:</b> 480.00 </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="5"><b>转账支付:</b> 480.00 </el-col>
|
|
|
- <el-col :span="6"><b>付款银行:</b> 中信银行0897 </el-col>
|
|
|
- <el-col :span="6"><b>付款时间:</b> 2023-05-05 11:23:05 </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="5"><b>申请人:</b> 卢海珠 </el-col>
|
|
|
- <el-col :span="8"><b>申请时间:</b> 2023-05-05 10:55:33 </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="5"><b>审核人:</b> 李昕 </el-col>
|
|
|
- <el-col :span="8"><b>审核时间:</b> 2023-05-05 11:23:05 </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="24" class="box-row">
|
|
|
- <el-col :span="24"><b>审核状态:</b> 审核通过 </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <div class="filter-container" style="text-align: center;margin-top: 20px;">
|
|
|
- <el-button type="primary">提交付款单</el-button>
|
|
|
- <el-button plain @click="backToList">返回</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getDetail, getRemarks } from '@/api/order'
|
|
|
-export default {
|
|
|
- name: 'PaymentDetails',
|
|
|
- filters: {
|
|
|
- statusFilter(status) {
|
|
|
- const map = {
|
|
|
- 0: '待付款',
|
|
|
- 1: '已付款',
|
|
|
- 2: '审核不通过'
|
|
|
- }
|
|
|
- return map[status]
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- printObj: {
|
|
|
- id: 'printBox', // 局部打印的<div> Id
|
|
|
- popTitle: '', // 打印配置页上方标题
|
|
|
- extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
|
|
|
- preview: '', // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
|
|
|
- previewTitle: '', // 打印预览的标题(开启预览模式后出现),
|
|
|
- previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
|
|
|
- zIndex: '', // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)
|
|
|
- previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback(开启预览模式调用)
|
|
|
- previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
|
|
|
- beforeEntryIframe() {
|
|
|
- const cells = document.querySelectorAll('.cell')
|
|
|
- const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
|
|
|
- // el-table 打印不全的问题
|
|
|
- for (let j = 0; j < tableNode.length; j++) {
|
|
|
- const tableItem = tableNode[j]
|
|
|
- tableItem.style.width = '100%'
|
|
|
- const child = tableItem.childNodes
|
|
|
- for (let i = 0; i < child.length; i++) {
|
|
|
- const element = child[i]
|
|
|
- if (element.localName === 'colgroup') {
|
|
|
- element.innerHTML = ''
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // el-table 格子里面打印超过格子的问题
|
|
|
- for (let i = 0; i < cells.length; i++) {
|
|
|
- const cell = cells[i]
|
|
|
- cell.style.width = '100%'
|
|
|
- cell.removeAttribute('style')
|
|
|
- }
|
|
|
- },
|
|
|
- openCallback() {
|
|
|
-
|
|
|
- }, // 调用打印之后的回调事件
|
|
|
- closeCallback() {}, // 关闭打印的回调事件(无法确定点击的是确认还是取消)
|
|
|
- url: '',
|
|
|
- standard: '',
|
|
|
- extraCss: '',
|
|
|
- loading: false
|
|
|
- },
|
|
|
- payRepacts: {
|
|
|
- name: '卢海珠',
|
|
|
- account: '6214 8328 2826 4957 ',
|
|
|
- accountBank: '中国建设银行',
|
|
|
- accountType: '公账'
|
|
|
- },
|
|
|
- repacts: [
|
|
|
- {
|
|
|
- id: 7580,
|
|
|
- name: '卢海珠',
|
|
|
- account: '6214 8328 2826 4957 ',
|
|
|
- accountBank: '中国建设银行',
|
|
|
- accountType: '公账',
|
|
|
- type: '子订单付款',
|
|
|
- shopName: '采美信息技术有限公司',
|
|
|
- payableAmount: '20000.00',
|
|
|
- shopOrderNo: 'P1682650952091471001',
|
|
|
- shopOrderId: '19747',
|
|
|
- orderNo: 'P16265095220221471',
|
|
|
- orderId: '18179',
|
|
|
- clubName: '广州白云区松洲蒂亚美容院',
|
|
|
- applyMan: '路海珠',
|
|
|
- applyTime: '2020-01-01:20:30:56',
|
|
|
- verifyMan: '李昕',
|
|
|
- verifyTime: '2020-01-01:20:30:56',
|
|
|
- status: 0,
|
|
|
- totalProduct: '3000.00',
|
|
|
- payShopTotal: '3000.00',
|
|
|
- childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
|
|
|
- products: [
|
|
|
- {
|
|
|
- productName: '阶雪山之恋保滋润面霜吖',
|
|
|
- unit: '50ml',
|
|
|
- num: 3,
|
|
|
- returnNum: 0,
|
|
|
- price: '2000.00',
|
|
|
- totalPrice: '6000.00',
|
|
|
- costPrice: '1000.00',
|
|
|
- totalCostPrice: '3000.00'
|
|
|
- },
|
|
|
- {
|
|
|
- productName: '阶雪山之恋保滋润面霜吖',
|
|
|
- unit: '50ml',
|
|
|
- num: 3,
|
|
|
- returnNum: 0,
|
|
|
- price: '2000.00',
|
|
|
- totalPrice: '6000.00',
|
|
|
- costPrice: '1000.00',
|
|
|
- totalCostPrice: '3000.00'
|
|
|
- },
|
|
|
- {
|
|
|
- productName: '阶雪山之恋保滋润面霜吖',
|
|
|
- unit: '50ml',
|
|
|
- num: 3,
|
|
|
- returnNum: 0,
|
|
|
- price: '2000.00',
|
|
|
- totalPrice: '6000.00',
|
|
|
- costPrice: '1000.00',
|
|
|
- totalCostPrice: '3000.00'
|
|
|
- },
|
|
|
- {
|
|
|
- productName: '阶雪山之恋保滋润面霜吖',
|
|
|
- unit: '50ml',
|
|
|
- num: 3,
|
|
|
- returnNum: 0,
|
|
|
- price: '2000.00',
|
|
|
- totalPrice: '6000.00',
|
|
|
- costPrice: '1000.00',
|
|
|
- totalCostPrice: '3000.00'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
- activeIndex: '2',
|
|
|
- order: null,
|
|
|
- receiptAmount: 0,
|
|
|
- returnValue: 0,
|
|
|
- returnedPurchaseFee: 0,
|
|
|
- bpClauses: null,
|
|
|
- dialogRemarkList: [],
|
|
|
- dialogRemarksVisible: false,
|
|
|
- dialogRemarksOrderId: 0,
|
|
|
- statusObj: {
|
|
|
- '0': '待确认',
|
|
|
- '4': '交易完成',
|
|
|
- '5': '订单完成',
|
|
|
- '6': '已关闭',
|
|
|
- '7': '交易全退',
|
|
|
- '11': '待收款、待发货',
|
|
|
- '12': '待收款、部分发货',
|
|
|
- '13': '待收款、全部发货',
|
|
|
- '21': '部分收款、待发货',
|
|
|
- '22': '部分收款、部分发货',
|
|
|
- '23': '部分收款、全部发货',
|
|
|
- '31': '全部收款、待发货',
|
|
|
- '32': '全部收款、部分发货',
|
|
|
- '33': '全部收款、全部发货'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- orderID: function() {
|
|
|
- return this.$route.query.orderID * 1
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.fetchData()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- fetchData() {
|
|
|
- this.listLoading = true
|
|
|
- getDetail({ id: this.orderID }).then(response => {
|
|
|
- this.order = response.data.order
|
|
|
- this.bpClauses = response.data.bpClauses
|
|
|
- this.receiptAmount = response.data.receiptAmount
|
|
|
- this.returnValue = response.data.returnValue
|
|
|
- this.returnedPurchaseFee = response.data.returnedPurchaseFee
|
|
|
- this.listLoading = false
|
|
|
- }).catch(() => {
|
|
|
- this.listLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
- RemarksOrder: function(id) {
|
|
|
- getRemarks({ orderID: id }).then(response => {
|
|
|
- this.dialogRemarkList = response.data
|
|
|
- })
|
|
|
- this.dialogRemarksOrderId = id
|
|
|
- this.dialogRemarksVisible = true
|
|
|
- },
|
|
|
- backToList() {
|
|
|
- this.$store.dispatch('tagsView/delView', this.$route).then(() => {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$router.replace({
|
|
|
- path: '/finance/payapply-list'
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- .app-title{
|
|
|
- line-height: 36px;
|
|
|
- font-size: 26px;
|
|
|
- font-weight: bold;
|
|
|
- color: #409EFF;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .box-card{
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .box-row{
|
|
|
- padding: 10px 0;
|
|
|
- }
|
|
|
- .box-row .dropdown{
|
|
|
- margin-top: -10px;
|
|
|
- }
|
|
|
- .refund-item{
|
|
|
- padding: 10px 0;
|
|
|
- }
|
|
|
- .order-item{
|
|
|
- background:#f7f7f7;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 10px 15px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- .product-row{
|
|
|
- padding: 10px 0;
|
|
|
- background: #EBEEF5;
|
|
|
- border-top: 1px dashed #DCDFE6;
|
|
|
- }
|
|
|
- .op-item{
|
|
|
- padding: 5px 0;
|
|
|
- }
|
|
|
- .el-span-warning{
|
|
|
- color: #E6A23C;
|
|
|
-}
|
|
|
-.el-span-success{
|
|
|
- color: #67C23A;
|
|
|
-}
|
|
|
-.el-span-danger{
|
|
|
- color: #F56C6C;
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|