caimei-mall-admin-ui/src/views/finance/payapply-edit.vue

<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 0 auto;">
      <el-form ref="payFrom" :model="payRepacts" :rules="rules" label-width="120px">
        <h1 class="app-title">付款单</h1>
        <div class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="24">
              <el-form-item label="付款单名称：" prop="name">
                <el-input v-model="payRepacts.name" placeholder="请输入付款单名称" style="width: 250px" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="24"><b>供应商名称：</b> {{ payRepacts.shopName }}</el-col>
          </el-row>
          <h1 style="font-size: 14px;">采美账号：</h1>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5">
              <el-form-item label="户名：" prop="cmBankAccountName">
                <el-input v-model="payRepacts.cmBankAccountName" placeholder="请输入银行户名" style="width: 150px" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="账号：" prop="cmBankAccount">
                <el-input v-model="payRepacts.cmBankAccount" placeholder="请输入银行账户" style="width: 250px" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开户行：" prop="cmBankName">
                <el-input v-model="payRepacts.cmBankName" placeholder="输入开户行" style="width: 200px" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="账户类型：" prop="cmType">
                <el-select v-model="payRepacts.cmType" placeholder="请选择">
                  <el-option label="公账" :value="0" />
                  <el-option label="私账" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <h1 style="font-size: 14px;">供应商账号：</h1>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5">
              <el-form-item label="户名：" prop="bankAccountName">
                <el-input v-model="payRepacts.bankAccountName" placeholder="请输入银行户名" style="width: 150px" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="账号：" prop="bankAccount">
                <el-input v-model="payRepacts.bankAccount" placeholder="请输入银行账户" style="width: 250px" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开户行：" prop="bankName">
                <el-input v-model="payRepacts.bankName" placeholder="输入开户行" style="width: 200px" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="账户类型：" prop="type">
                <el-select v-model="payRepacts.type" placeholder="请选择">
                  <el-option label="公账" :value="0" />
                  <el-option label="私账" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-for="(shopOrder,index) in payRepacts.shopOrders" :key="index" class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>订单编号(ID)：</b> {{ shopOrder.orderNo }}({{ shopOrder.orderId }})</el-col>
            <el-col :span="5"><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="10">
              <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="5"><b>机构名称：</b> {{ shopOrder.clubName }}</el-col>
            <el-col :span="5"><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="10">
              <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="5"><b>子订单编号(ID)：</b> {{ shopOrder.shopOrderNo }}({{ shopOrder.shopOrderId }})</el-col>
            <el-col :span="5"><b>子订单佣金：</b>
              <span class="el-span-danger"> ¥{{ shopOrder.brokerage | amountfilters }}  </span>
            </el-col>
            <el-col :span="4"><b>商品费：</b> ¥{{ shopOrder.productAmount | amountfilters }}</el-col>
            <el-col :span="10">
              <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="5"><b>供应商名称：</b> {{ shopOrder.shopName }}</el-col>
            <el-col :span="18"><b>供应商运费：</b>
              <el-input v-model="shopOrder.shopPostFee" style="width: 100px;" size="mini" />
            </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>
              <el-input v-model="shopOrder.waitPayCmAmount" style="width: 100px;" size="mini" />
              <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>
              <el-input v-model="shopOrder.waitPayShop" style="width: 100px;" size="mini" />
            </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}">
                  {{ row.price | amountfilters }}
                </template>
              </el-table-column>
              <el-table-column label="总价" align="center" prop="totalFee">
                <template slot-scope="{row}">
                  {{ row.totalFee | amountfilters }}
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
        <div class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>付供应商总金额：</b>
              <span class="el-span-danger"> ¥{{ totalShopTotalAmount | amountfilters }} </span>
            </el-col>
            <el-col :span="6"><b>付采美总金额：</b>
              <span class="el-span-danger"> ¥{{ totalCmTotalAmount | amountfilters }}  </span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>申请人：</b> {{ payRepacts.applicantName }}  </el-col>
          </el-row>
        </div>
      </el-form>
    </el-card>
    <div class="filter-container" style="text-align: center;margin-top: 20px;">
      <el-button type="primary" @click="hanldeSubmit('payFrom')">提交付款单</el-button>
      <el-button plain @click="backToList">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getApplyPays, getPayDetails, subPayApply } from '@/api/finance'
export default {
  name: 'PayapplyEdit',
  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 {
      payRepacts: {},
      rules: {
        name: [{ required: true, message: '请填写付款单名称', trigger: 'blur' }],
        cmBankAccountName: [{ required: true, message: '付采美户名不能为空', trigger: 'blur' }],
        cmBankAccount: [{ required: true, message: '付采美账号不能为空', trigger: 'blur' }],
        cmBankName: [{ required: true, message: '付采美开户行不能为空', trigger: 'blur' }],
        bankAccountName: [{ required: true, message: '付供应商开户行不能为空', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '付供应商开户行不能为空', trigger: 'blur' }],
        bankName: [{ required: true, message: '付供应商开户行不能为空', trigger: 'blur' }],
        cmType: [{ required: true, message: '请选择付采美账户类型', trigger: 'change' }],
        type: [{ required: true, message: '请选择付供应商账户类型', trigger: 'blur' }]
      },
      applyType: ''
    }
  },
  computed: {
    shopOrderIds() {
      return JSON.parse(this.$route.query.shopOrderIds)
    },
    totalCmTotalAmount() {
      let payCmTotalAmount = 0
      const shopOrders = this.payRepacts.shopOrders
      shopOrders.forEach(item => {
        payCmTotalAmount += item.waitPayCmAmount
      })
      return payCmTotalAmount
    },
    totalShopTotalAmount() {
      let waitPayShop = 0
      const shopOrders = this.payRepacts.shopOrders
      shopOrders.forEach(item => {
        waitPayShop += item.waitPayShop
      })
      return waitPayShop
    }
  },
  created() {
    if (this.$route.query.type === 'edit') {
      this.applyType = this.$route.query.type
      this.getPayDetails(this.$route.query.payShopId)
    } else {
      this.getApplyPays()
    }
  },
  methods: {
    // 付款单详情
    async getApplyPays() {
      try {
        const res = await getApplyPays(this.shopOrderIds)
        this.payRepacts = res.data
        this.payRepacts.applicantName = this.$store.getters.name
      } catch (error) {
        console.log('error', error)
      }
    },
    // 付款单详情
    async getPayDetails(payShopId) {
      try {
        const res = await getPayDetails(payShopId)
        this.payRepacts = res.data
      } catch (error) {
        console.log('error', error)
      }
    },
    // 提交付款申请
    hanldeSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm('确定要提交申请吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log('payRepacts', this.payRepacts)
            this.payRepacts.totalAmount = this.totalShopTotalAmount
            this.payRepacts.payCmTotalAmount = this.totalCmTotalAmount
            this.subPayApply(this.payRepacts)
          })
        } else {
          return false
        }
      })
    },
    async subPayApply(params) {
      try {
        const res = await subPayApply(params)
        this.$message.success('提交成功')
        setTimeout(() => {
          this.$store.dispatch('tagsView/delView', this.$route).then(() => {
            this.$nextTick(() => {
              this.$router.push({ path: '/finance/payment-details', query: { payShopId: res.data }})
            })
          })
        }, 1000)
      } catch (error) {
        console.log('error', error)
      }
    },
    backToList() {
      let path = ''
      if (this.applyType === 'edit') {
        path = '/finance/payment-list'
      } else {
        path = '/finance/payapply-list'
      }
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: path
          })
        })
      })
    }
  }
}
</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>