storage/src/view/material-manege/pay/pay-detail.vue

<!-- 合同付款详情 -->
<template>
  <div class="container-wrap">
    <div class="top-title">
      <div>
        <span>本月{{ titleDay }}日付款统计</span>
        <RadioGroup v-model="params.payApprovalStatus" style="margin-left: 20px;" @on-change="stateChange">
          <Radio :label="0">
            全部
            (<span style="color: red;">{{ data.totalCount || 0 }}</span>)
          </Radio>
          <Radio :label="1">
            待审批
            (<span style="color: red;">{{ data.unApprovalCount || 0 }}</span>)
          </Radio>
          <Radio :label="2">
            已通过
            (<span style="color: red;">{{ data.approvalCount || 0 }}</span>)
          </Radio>
        </RadioGroup>
        <span style="font-size: 12px;margin-left: 20px;">*已付</span>
        <span style="font-size: 12px;color: #0077ff">{{ data.hadPayAmount || 0 }}</span>
        <span style="font-size: 12px">元，未付</span>
        <span style="font-size: 12px;color: red">{{ data.unPayAmount || 0 }}</span>
        <span style="font-size: 12px;">元</span>
      </div>
      <span style="font-size: 12px;font-weight: normal;cursor: pointer;" @click="$router.push('material_pay')">
        <Icon type="ios-arrow-dropleft" size="16"/>
        返回上一级
      </span>
    </div>
    <div class="container">
      <div class="tabs">
        <div
          class="tab-item"
          @click="tabClick(item.techType, index)"
          :class="tabsIndex === index ? 'active' : ''"
          v-for="(item, index) in data.techAmtItems"
          :key="index">
          {{ item.dispalyName + item.amount + '元' }}
        </div>
      </div>
      <div class="table-filter">
        <div class="filter-item">
          <Button
            v-if="data.accountDateItems"
            :style="{border: menuIndex === '' ? '1px solid #3F92F9' : ''}"
            style="width: 90px;" @click="menuClick()">
            全部
          </Button>
        </div>
        <div class="filter-item" v-for="(item, index) in data.accountDateItems" :key="index">
          <Button
            :style="{border: menuIndex === index ? '1px solid #3F92F9' : ''}"
            style="width: 90px;"
            @click="menuClick(item, index)">
            {{ item }}天
          </Button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-content">
        <div v-if="data.payBillItems && data.payBillItems.length === 0" style="height: 100%;display: flex;justify-content: center;align-items: center">
          暂无数据
        </div>
        <div v-else class="list">
          <div class="item" v-for="(item, index) in data.payBillItems" :key="index">
            <div class="content">
              <div class="item-left">
                <div class="row">
                  <div class="col">
                    <div class="label">合同编码：</div>
                    <div class="value">{{ item.purchaseBillNo }}</div>
                  </div>
                  <div class="col">
                    <div class="label">供应商：</div>
                    <div class="value">{{ item.supplierName }}</div>
                  </div>
                  <div class="col">
                    <div class="label">付款期限：</div>
                    <div class="value">{{ item.payTimeLimit }}</div>
                  </div>
                  <div class="col" style="flex: 1">
                    <div class="label">单价：</div>
                    <div class="value">{{ item.price }}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="label">物料名称：</div>
                    <div class="value">{{ item.materialName }}</div>
                  </div>
                  <div class="col">
                    <div class="label">规格：</div>
                    <div class="value">{{ item.spec }}</div>
                  </div>
                  <div class="col">
                    <div class="label">采购数量：</div>
                    <div class="value">{{ item.purchaseQty }}</div>
                  </div>
                  <div class="col" style="flex: 1"></div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="label">合同金额：</div>
                    <div class="value">{{ item.contractAmount }}元</div>
                  </div>
                  <div class="col">
                    <div class="label">质检金额：</div>
                    <div class="value">{{ item.qtyCheckAmount }}元</div>
                  </div>
                  <div class="col">
                    <div class="label">已付金额：</div>
                    <div class="value">{{ item.hadPayAmount }}元</div>
                  </div>
                  <div class="col" style="flex: 1">
                    <Tooltip
                      placement="bottom"
                      @on-popper-show="getData(item)"
                      max-width="600"
                    >
                      <div class="label">
                        <div class="label">本次应付：</div>
                        <div class="value">
                          <span style="color: red">{{ item.actAmount   }}</span>元
                        </div>
                      </div>
                      <div slot="content">
                        <div v-for="(itemPay, index) in paymentList" :key="index">
                          <span style="text-align: left; white-space: normal">
                            物料编码: {{ itemPay.materialcode }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            合同批次: {{ itemPay.batchno }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            退货日期: {{ itemPay.outDate }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            退货数量: {{ itemPay.quantity }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            单价: {{ itemPay.price }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            金额: {{ itemPay.amount }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            原因: {{ itemPay.applyreason }}
                          </span>
                        </div>
                      </div>
                    </Tooltip>
                    
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="label">付款说明：</div>
                    <div class="value">{{ item.payAccount }}</div>
                  </div>
                  
                </div>
                <!-- <div class="row">
                  <div class="col">
                    <div class="label">审批进度：</div>
                    <div class="value">{{ item.approvalNode }}</div>
                  </div>
                </div> -->
              </div>
              <div class="item-right">
                <div class="forms">
                  <div class="row">
                    <div class="col">
                      <span class="text" @click="showForm(0, item)">申购单</span>
                      <Icon type="md-checkmark" color="#07C909" size="20" />
                    </div>
                    <div class="col">
                      <span class="text" @click="showForm(1, item)">入库单</span>
                      <Icon v-if="item.hasInStock" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                    <div class="col">
                      <span class="text" @click="showForm(2, item)">质检单</span>
                      <Icon v-if="item.hasQtyCheck" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col">
                      <span class="text" @click="showForm(3, item)">合同</span>
                      <Icon v-if="item.hasContractFile" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                    <div class="col">
                      <span class="text" @click="showForm(4, item)">发票</span>
                      <Icon v-if="item.hasGreaterCheckAmt" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                    <div class="col"></div>
                  </div>
                  <div class="row">
                    <div class="col" style="justify-content: flex-start">
                      <span class="text" style="text-decoration: none;cursor: auto">质检金额&lt;=发票金额</span>
                      <Icon v-if="item.hasGreaterCheckAmt" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                  </div>
                </div>
                <div v-if="['supervisor','manager','finance'].includes(access)">
                  <div class="btn" v-if="item.flowCheckId">
                    <Button type="primary" size="small" style="margin-bottom: 10px;" @click="pass(0, item)">审批通过</Button>
                    <Button type="error" size="small" @click="pass(1, item)">拒绝</Button>
                  </div>
                  <div class="btn" v-if="!item.flowCheckId">
                    <Button size="small" @click="showPayApproval(item.payBillId)">{{ item.approvalNode || '未知状态' }}</Button>
                  </div>
                </div>
              </div>
            </div>
            <div class="other" style="margin-top: 2px" v-if="item.hasOtherPayBill">
              <Collapse :value="item.payObjList ? '1' : '0'" @on-change="open(item)">
                <Panel name="1">
                  合同付款记录
                  <div slot="content">
                    <div class="row" v-for="(payItem, payIndex) in item.payObjList" :key="payIndex">
                      <div class="col">
                        <div class="label">付款时间：</div>
                        <div class="value">{{ payItem.payTime }}</div>
                      </div>
                      <div class="col">
                        <div class="label">付款金额：</div>
                        <div class="value">
                          <span style="color: red">{{ payItem.payAmount }}</span>元
                        </div>
                      </div>
                      <div class="col">
                        <div class="label">审批状态：</div>
                        <div class="value" :style="{color: payItem.approvalStateStr === '待审批'? 'red' : '' }">
                          {{ payItem.approvalStateStr }}
                        </div>
                      </div>
                    </div>
                  </div>
                </Panel>
              </Collapse>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="table-page">
        <Page :current="params.pageIndex" :total="params.total" :show-total="true" :page-size="10" show-elevator @on-change="changePage" />
      </div>
    </div>
    <pass-modal v-model="passShow" :data="currentItem" @getlist="getList"></pass-modal>
    <my-form-pay v-model="payShow" type="form" :data="currentItem" :showSider="false"></my-form-pay>
    <store-in-form v-model="storeInShow" :data="currentItem"></store-in-form>
    <quality-form v-model="qualityShow" :data="qualityData"></quality-form>
    <invoice-form v-model="invoiceShow" :data="currentItem" @getlist="getList"></invoice-form>
    <contract-form v-model="contractShow" :data="currentItem" @getlist="getList"></contract-form>
    <apply-form v-model="applyShow" :data="currentItem" @getlist="getList"></apply-form>
    <pay-form v-model="show" :data="formData" @getlist="getList"></pay-form>
  </div>
</template>

<script>
import {
  GetContractPayBillTechSum,
  ApprovalBillFlow,
  GetApplyPurchasePageList,
  GetContractQtyCheckBill,
  GetApplyPayBill, GetApplyPurchasePay
} from '@/api/applyPurchase'
import MyTable from '_c/my-table/my-table'
import MyFormPay from '_c/my-modal-pay'
import PassModal from './modals/pass-modal'
import StoreInForm from './modals/store-in-form'
import QualityForm from './modals/quality-form'
import InvoiceForm from './modals/invoice-form'
import ContractForm from './modals/contract-form'
import ApplyForm from './modals/apply-pass-form'
import { GetInStockBill } from '@/api/stock'
import PayForm from '@/view/index/schedule/pay-form'
import axios from "axios";
export default {
  name: 'material_pay_detail',
  components: {
    MyTable,
    PassModal,
    MyFormPay,
    StoreInForm,
    QualityForm,
    InvoiceForm,
    ContractForm,
    ApplyForm,
    PayForm
  },
  data () {
    return {
      menuIndex: '',
      titleDay: 0,
      tabsIndex: 0,
      access: this.$store.state.user.access,
      show: false,
      contractShow: false,
      invoiceShow: false,
      qualityShow: false,
      storeInShow: false,
      payShow: false, // 申购单
      passShow: false, // 驳回
      applyShow: false,
      currentItem: {},
      formData: {},
      qualityData: [],
      tabs: ['总额', '直喷', '热转', '打纸'],
      data: {},
      params: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        payApprovalStatus: 0
      },
      paymentList: [],
    }
  },
  methods: {
    getData(item) {
      this.paymentList = [];
      axios
        .post("/cloudApi/stockWater/contractPaymentList", {
          balancePurBillNo: item.purchaseBillNo,
        })
        .then((res) => {
          this.paymentList = res.data.data;
        });
    },
    showPayApproval (linkId) {
      this.formData = { linkId }
      this.show = true
    },
    open (item) {
      if (!item.payObjList) {
        GetApplyPayBill({
          purchaseBillNo: item.purchaseBillNo,
          payBillId: item.payBillId
        }).then(res => {
          if (res.code === 0) {
            this.$set(item, 'payObjList', res.result)
          }
        })
      }
    },
    stateChange () {
      this.params.pageIndex = 1
      this.tabsIndex = 0
      this.menuIndex = ''
      this.params.technologyType = ''
      this.params.accountDate = ''
      this.getList()
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    menuClick (item = '', index = '') {
      this.menuIndex = index
      this.params.accountDate = item
      this.params.pageIndex = 1
      this.getList()
    },
    tabClick (value, index) {
      this.tabsIndex = index
      this.menuIndex = ''
      this.params.accountDate = ''
      this.params.pageIndex = 1
      this.params.technologyType = value
      this.getList()
    },
    showForm (type, item) {
      this.currentItem = { ...item }
      switch (type) {
        // 申购单
        case 0:
          this.currentItem.id = this.currentItem.payBillId
          GetApplyPurchasePageList({
            pageIndex: 1,
            pageSize: 1,
            purBillState: 1,
            keyWord: this.currentItem.applyBillNo
          }).then(res => {
            if (res.code === 0) {
              this.currentItem = { ...this.currentItem, ...res.result.list[0] }
              this.payShow = true
              console.log(this.currentItem)
            }
          })
          break
        case 1:
          GetInStockBill({
            inOutStorageNo: this.currentItem.inOutStorageNo,
            applyBillNo: this.currentItem.applyBillNo
          }).then(res => {
            if (res.code === 0) {
              this.currentItem = { ...this.currentItem, ...res.result }
              this.storeInShow = true
            }
          })
          break
        case 2:
          GetContractQtyCheckBill({
            purchaseBillNo: this.currentItem.purchaseBillNo
          }).then(res => {
            if (res.code === 0) {
              this.qualityData = res.result
              this.qualityShow = true
            }
          })
          break
        case 3:
          this.contractShow = true
          break
        case 4:
          this.invoiceShow = true
          break
      }
    },
    /* 审核 */
    pass (type, item) {
      if (type === 0) {
        GetApplyPurchasePay({
          id: item.payBillId
        }).then(res => {
          if (res.code === 0) {
            this.currentItem = { ...res.result, payBillId: item.payBillId, flowCheckId: item.flowCheckId,invoiceAmount:item.invoiceAmount,adjustAmount:item.qtyCheckAmount }
            console.log(res.result)
            this.applyShow = true
          }
        })
      } else {
        this.currentItem = { purchaseBillNo: item.purchaseBillNo, flowCheckId: item.flowCheckId }
        this.passShow = true
      }
    },
    /* 审批 */
    cfm (type) {
      ApprovalBillFlow({
        linkCheckId: [this.currentItem.flowCheckId],
        updateAction: type,
        suggestions: this.remark
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '操作成功！')
          this.currentItem = {}
          this.getList()
        }
      })
    },
    getList () {
      /* 获取供应商聚合列表 */
      GetContractPayBillTechSum({
        ...this.params
      }).then(res => {
        if (res.code === 0) {
          res.result.unPayAmount = res.result.unPayAmount.toFixed(2)
          res.result.payBillItems.map(item => {
            item.actAmount = item.actAmount.toFixed(2)
          })
          res.result.techAmtItems.map(item => {
            item.amount = item.amount.toFixed(2)
          })
          this.data = res.result
          this.params.total = res.result.pageCount
        }
      })
    }
  },
  mounted () {
    let date = new Date()
    if (date.getDate() > 15) {
      date.setDate(1) // 设置到当月第一天
      date.setMonth(date.getMonth() + 1) // 再设置成下个月
      date.setDate(date.getDate() - 1) // 最后减一天即为当月最后一天
      this.titleDay = date.getDate()
    } else {
      this.titleDay = 15
    }
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.container-wrap {
  height: 100%;
  overflow: hidden;
  .top-title {
    margin-bottom: 18px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }
  .container {
    height: ~"calc(100% - 34px)";
    display: flex;
    flex-direction: column;
    border: 1px solid #d7d7d7;
    .tabs {
      box-sizing: border-box;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tab-item {
        box-sizing: border-box;
        flex: 1;
        overflow: auto;
        border-right: 1px solid #dcdee2;
        border-bottom: 1px solid #dcdee2;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        &:last-child {
          border-right: none;
        }
        &.active {
          color: #3F92F9;
          border-bottom: 3px solid #3F92F9;
        }
      }
    }
    .table-filter {
      padding: 10px;
      padding-bottom: 0;
      .filter-item {
        margin-right: 10px;
        float: left;
        //&:last-child {
        //  margin-right: 0;
        //}
      }
    }
    .table-content {
      flex: 1;
      overflow: hidden;
      .row {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        &:last-child {
          margin-bottom: 0;
        }
        .col {
          padding: 0 5px;
          flex: 2;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .value {
            flex: 1;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }
      .list {
        padding: 10px;
        height: 100%;
        overflow: auto;
        .item {
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
          .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border: 1px solid #d7d7d7;
            border-radius: 5px;
            background: #FFFFFF;
            .item-left {
              padding: 0 10px;
              flex: 1;
              border-right: 1px solid #333333;
            }
            .item-right {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .forms {
                padding: 0 10px;
                .col {
                  align-items: center;
                  .text {
                    text-decoration: underline;
                    cursor: pointer;
                  }
                }
              }
              .btn {
                display: flex;
                flex-direction: column;
              }
            }
          }
        }
      }
    }
    .table-page {
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 43px;
      overflow: hidden;
    }
  }
}
</style>