caimei-mall-admin-ui/src/views/finance/payment-details.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="text-align: right;">
      <el-button v-if="detailsType === 'verify' && payRepacts.status === 0" type="primary" @click="handlePayCheck(1)">审核通过</el-button>
      <el-button v-if="detailsType === 'verify' && payRepacts.status === 0" type="danger" @click="dialogVisible = true">审核不通过</el-button>
      <el-button v-if="payRepacts.status === 1 && detailsType === 'print'" v-print="printObj" type="primary">打印</el-button>
    </div>
    <div id="printBox">
      <el-card ref="print" 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"><span style="color: red;">*</span><b>付款单名称：</b> {{ payRepacts.name }} </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="24"><b>供应商名称：</b> {{ payRepacts.shopName }}</el-col>
          </el-row>
          <template v-if="payRepacts.payType !==6">
            <h1 style="font-size: 14px;"><span style="color: red;">*</span>采美账号：</h1>
            <el-row :gutter="24" class="box-row">
              <el-col :span="4"><b>户名：</b>
                <el-input
                  v-model="payRepacts.cmBankAccountName"
                  :disabled="true"
                  clearable
                  size="mini"
                  style="width: 150px;"
                />
              </el-col>
              <el-col :span="6"><b>账号：</b>
                <el-input
                  v-model="payRepacts.cmBankAccount"
                  clearable
                  size="mini"
                  :disabled="true"
                  style="width: 200px;"
                />
              </el-col>
              <el-col :span="6"><b>开户行：</b>
                <el-input
                  v-model="payRepacts.cmBankName"
                  :disabled="true"
                  size="mini"
                  style="width: 150px;"
                />
              </el-col>
              <el-col :span="4"><b>账户类型：</b>
                <span>{{ payRepacts.type === 0 ?'公账':'私账' }}</span>
              </el-col>
            </el-row>
            <h1 style="font-size: 14px;"><span style="color: red;">*</span>供应商账号：</h1>
            <el-row :gutter="24" class="box-row">
              <el-col :span="4"><b>户名：</b>
                <el-input
                  v-model="payRepacts.bankAccountName"
                  :disabled="true"
                  clearable
                  size="mini"
                  style="width: 150px;"
                />
              </el-col>
              <el-col :span="6"><b>账号：</b>
                <el-input
                  v-model="payRepacts.bankAccount"
                  clearable
                  size="mini"
                  :disabled="true"
                  style="width: 200px;"
                />
              </el-col>
              <el-col :span="6"><b>开户行：</b>
                <el-input
                  v-model="payRepacts.bankName"
                  :disabled="true"
                  size="mini"
                  style="width: 150px;"
                />
              </el-col>
              <el-col :span="4"><b>账户类型：</b>
                <span>{{ payRepacts.type === 0 ?'公账':'私账' }}</span>
              </el-col>
            </el-row>
          </template>
        </div>
        <div v-for="(shopOrder,index) in payRepacts.shopOrders" :key="index" class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>订单编号(ID)：</b> {{ shopOrder.orderNo }}({{ shopOrder.orderId }})</el-col>
            <el-col :span="6"><b>下单时间：</b> {{ shopOrder.orderTime }}</el-col>
            <el-col :span="4"><b>订单金额：</b> <span class="el-span-danger">¥{{ shopOrder.payTotalFee }}</span></el-col>
            <el-col :span="8">
              <b>所有子订单：</b>
              <span v-for="child in shopOrder.shopOrderNos" :key="child">
                【{{ child }}】
              </span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6">
              <b>机构名称：</b>
              {{ shopOrder.clubName }}
            </el-col>
            <el-col :span="6">
              <b>机构运费：</b>
              <span class="el-span-danger">{{ payRepacts.postageInfo }}</span>
            </el-col>
            <el-col :span="4">
              <b>收款状态：</b>
              <el-tag v-if="shopOrder.orderReceiptStatus===1" type="danger" size="small">待收款</el-tag>
              <el-tag v-if="shopOrder.orderReceiptStatus===2" type="warning" size="small">部分收款</el-tag>
              <el-tag v-if="shopOrder.orderReceiptStatus===3" type="success" size="small">已收款</el-tag>
            </el-col>
            <el-col :span="8">
              <b>收款金额：</b>
              <span class="el-span-danger">¥{{ shopOrder.receiptTotalFee | amountfilters }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>子订单编号(ID)：</b> {{ shopOrder.shopOrderNo }}({{ shopOrder.shopOrderId }})</el-col>
            <el-col v-if="!detailsType === 'print'" :span="6"><b>子订单佣金：</b>
              <span> {{ shopOrder.brokerage | amountfilters }}  </span>
            </el-col>
            <el-col :span="4"><b>商品费：</b> ¥{{ shopOrder.shopProductAmount | amountfilters }}</el-col>
            <el-col :span="8"><b>付款状态：</b>
              <el-tag v-if="shopOrder.payStatus===1" type="danger" size="small">待付款</el-tag>
              <el-tag v-if="shopOrder.payStatus===2" type="warning" size="small">部分付款</el-tag>
              <el-tag v-if="shopOrder.payStatus===3" type="success" size="small">已付款</el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>供应商名称：</b> {{ shopOrder.shopName }}</el-col>
            <el-col :span="6"><b>供应商运费：</b>
              <span>¥{{ shopOrder.shopPostFee | amountfilters }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="24">
              <b>付供应商：</b>
              <b style="margin-left: 10px;">应付采美：</b>
              <span class="el-span-danger"> ¥{{ shopOrder.shouldPayCmAmount | amountfilters }}  </span>
              <b style="margin-left: 10px;">已付采美：</b>
              <span class="el-span-danger"> ¥{{ shopOrder.payCmAmount | amountfilters }}  </span>
              <b style="margin-left: 10px;">待付采美：</b>
              <span class="el-span-danger"> ¥{{ shopOrder.waitPayCmAmount | amountfilters }}  </span>
              <b style="margin-left: 10px;">应付供应商：</b>
              <span class="el-span-danger"> ¥{{ shopOrder.shouldPayShopAmount | amountfilters }}  </span>
              <b style="margin-left: 10px;">已付供应商：</b>
              <span class="el-span-danger"> ¥{{ shopOrder.payedShopAmount | amountfilters }}  </span>
              <b style="margin-left: 10px;">待付供应商：</b>
              <span class="el-span-danger"> ¥{{ shopOrder.waitPayShop | amountfilters }}  </span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-table :data="shopOrder.newOrderProducts" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column label="商品名" align="center" prop="name" />
              <el-table-column label="规格" align="center" prop="unit" />
              <el-table-column label="数量" align="center" prop="num" />
              <el-table-column label="退货" align="center" prop="returnedPurchaseProductNum">
                <template slot-scope="{row}">
                  <span>{{ row.returnedPurchaseProductNum ? row.returnedPurchaseProductNum : 0 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="单价" align="center" prop="price">
                <template slot-scope="{row}">
                  <span>{{ row.price | amountfilters }}</span>
                </template>
              </el-table-column>
              <el-table-column label="总价" align="center" prop="totalFee">
                <template slot-scope="{row}">
                  <span>{{ row.totalFee | amountfilters }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
        <div class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>付供应商总金额：</b>
              <span class="el-span-danger"> ¥{{ payRepacts.totalAmount | amountfilters }} </span>
            </el-col>
            <el-col :span="6"><b>付采美总金额：</b>
              <span class="el-span-danger"> ¥{{ payRepacts.payCmTotalAmount | amountfilters }}  </span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <template v-if="detailsType === 'verify' || detailsType === 'edit'">
              <el-col :span="6"><b>付款银行：</b>
                <el-select v-model="checkParams.payType" style="width:150px;" clearable size="mini">
                  <el-option v-for="item in receiptTypeList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-col>
            </template>
            <template v-else>
              <el-col :span="6"><b>付款银行：</b>{{ payTypeFilters(payRepacts.payType) }} </el-col>
            </template>
            <template v-if="detailsType === 'edit'">
              <el-col :span="6"><b>付款时间：</b>
                <el-date-picker
                  v-model="payRepacts.payTime"
                  type="datetime"
                  placeholder="选择日期时间"
                />
              </el-col>
            </template>
            <template v-else>
              <el-col v-if="payRepacts.payTime" :span="6"><b>付款时间：</b> {{ payRepacts.payTime }} </el-col>
            </template>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>申请人：</b> {{ payRepacts.applicantName }}  </el-col>
            <el-col :span="6"><b>申请时间：</b> {{ payRepacts.applyTime }}  </el-col>
          </el-row>
          <el-row v-if="payRepacts.reviewerName" :gutter="24" class="box-row">
            <el-col :span="6"><b>审核人：</b> {{ payRepacts.reviewerName }}  </el-col>
            <el-col :span="6"><b>审核时间：</b> {{ payRepacts.reviewTime }} </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="24"><b>审核状态：</b>
              <span
                :class="{
                  'el-span-warning': payRepacts.status == 0,
                  'el-span-success': payRepacts.status == 1,
                  'el-span-danger': payRepacts.status == 2
                }"
              >
                {{ payRepacts.status | statusFilter }}
              </span>
            </el-col>
            <el-col v-if="payRepacts.status === 2" :span="20"><b>原因：</b> <span class="el-span-danger">{{ payRepacts.reason }}</span> </el-col>
          </el-row>
          <el-row v-if="detailsType ==='print'" :gutter="24" class="box-row">
            <el-col :span="6"><b>财务签名：</b> </el-col>
            <el-col :span="6"><b>审批人签名：</b> </el-col>
          </el-row>
        </div>
      </el-card>
      <div v-if="detailsType === 'edit'" class="filter-container" style="text-align: center;margin-top: 20px;">
        <el-button type="primary" @click="hanldeConfirm">保存编辑</el-button>
        <el-button plain @click="backToList">返回</el-button>
      </div>
    </div>
    <!-- 不通过审核弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="22%"
    >
      <el-input
        v-model="checkParams.reason"
        type="textarea"
        :rows="4"
        placeholder="请输入不通过原因"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="handlePayCheck(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPayDetails, getReceiptTypeList, subPayApply, subPayCheck } from '@/api/finance'
export default {
  name: 'PaymentDetails',
  filters: {
    statusFilter(status) {
      const map = {
        0: '待审核',
        1: '审核通过',
        2: '审核不通过'
      }
      return map[status]
    },
    receiptStatusFilter(status) {
      const map = {
        1: '待收款',
        2: '部分收款',
        3: '已收款'
      }
      return map[status]
    },
    payStatusFilter(status) {
      const map = {
        1: '待付款',
        2: '部分付款',
        3: '已付款'
      }
      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: {},
      receiptTypeList: [],
      detailsType: '',
      dialogVisible: false,
      checkParams: {
        id: 0,
        passCode: 1,
        payType: ''

      },
      rules: {
        reason: [{ required: true, message: '请填写不通过原因', trigger: 'blur' }]
      }
    }
  },
  computed: {
    payShopId: function() {
      return this.$route.query.payShopId * 1
    },
    disabled() {
      return !this.checkParams.reason
    }
  },
  created() {
    if (this.$route.query.type) {
      this.detailsType = this.$route.query.type
    }
    this.getPayDetails()
    this.getReceiptTypeList()
  },
  methods: {
    // 付款单详情
    async getPayDetails() {
      try {
        const res = await getPayDetails(this.payShopId)
        console.log('res', res)
        this.payRepacts = res.data
      } catch (error) {
        console.log('error', error)
      }
    },
    // 获取收款账号列表
    async getReceiptTypeList() {
      const res = await getReceiptTypeList()
      this.receiptTypeList = res.data
      this.checkParams.payType = res.data[0].id
    },
    payTypeFilters(value) {
      // 收款账号
      let valueText = ''
      this.receiptTypeList.forEach(type => {
        if (value === type.id) { valueText = type.name } else { valueText = '---' }
      })
      console.log('valueText', valueText)
      return valueText
    },
    hanldeConfirm() {
      // 保存编辑
      this.payRepacts.operateMode = 1
      this.subPayApply(this.payRepacts)
    },
    async subPayApply(params) {
      // 执行保存
      try {
        await subPayApply(params)
        this.$message.success('提交成功')
        this.backToList()
      } catch (error) {
        console.log('error', error)
      }
    },
    handlePayCheck(type) {
      // 审核
      if (type === 1) {
        this.checkParams.reason = ''
      }
      this.checkParams.id = this.payRepacts.payShopId
      this.checkParams.passCode = type
      this.subPayCheck(this.checkParams)
    },
    async subPayCheck(params) {
      // 执行审核
      try {
        await subPayCheck(params)
        this.$message.success('审核成功')
        this.checkParams.reason = ''
        this.backToList()
      } catch (error) {
        console.log('error', error)
      }
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/finance/payment-list'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
  .app-title{
    line-height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
    margin: 0;
  }
  .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>