anpinjingyuan-ui/src/views/finance/invoicePaymentAccess/detailsPage.vue

<template>
  <div>
    <el-breadcrumb separator="/" style="display: flex; align-items: center; margin-bottom: 10px">
      <el-breadcrumb-item>
        <el-button icon="el-icon-arrow-left" plain size="mini" type="danger" @click="backToList">
          返回列表
        </el-button>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <h1 style="text-align: center; margin-top: -42px">付费管理</h1>
    <el-form ref="queryForm" :inline="true" :model="queryParams" :rules="rules" label-width="68px">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="供应商" label-width="120px" prop="fCorpid">
            <el-select v-model="queryParams.fCorpid" :disabled="searchCriteriaDisabled" clearable filterable
                       placeholder="请选择供应商" @change="fCorpidChange(queryParams.fCorpid)"
            >
              <el-option
                v-for="item in vendorList"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开票日期起" label-width="120px" prop="kpTimeStart">
            <el-date-picker
              v-model="queryParams.kpTimeStart"
              :disabled="searchCriteriaDisabled"
              format="yyyy-MM-dd"
              placeholder="选择销售日期起"
              type="date"
              value-format="yyyy-MM-dd 00:00:00"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开票日期止" label-width="120px" prop="kpTimeTerminate">
            <el-date-picker
              v-model="queryParams.kpTimeTerminate"
              :disabled="searchCriteriaDisabled"
              format="yyyy-MM-dd"
              placeholder="选择销售日期起"
              type="date"
              value-format="yyyy-MM-dd 23:59:59"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="开票公司" label-width="120px" prop="kpCoId">
            <el-select v-model="queryParams.kpCoId" :disabled="searchCriteriaDisabled" clearable filterable
                       placeholder="请选择项目" @change="kpCoIdChange(queryParams.kpCoId)"
            >
              <el-option
                v-for="item in fCorpBankList"
                :key="item.accountTitle"
                :label="item.accountTitle"
                :value="item.accountTitle"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收款银行名称" label-width="120px" prop="cdbName">
            <el-input v-model="queryParams.skCdbName" :disabled="dataDisabled" style="width: 217px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收款银行账号" label-width="120px" prop="cdbNo">
            <el-input v-model="queryParams.skCdbNo" :disabled="dataDisabled" style="width: 217px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="付款公司" label-width="120px" prop="ttCoId">
            <el-select v-model="queryParams.ttCoId" :disabled="dataDisabled" clearable filterable
                       placeholder="请选择收款公司" @change="ttCoIdChange(queryParams.ttCoId)"
            >
              <el-option
                v-for="item in ttCoList"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="开户名称" label-width="120px" prop="accountTitle">
            <el-select v-model="queryParams.accountTitle" :disabled="dataDisabled" clearable filterable
                       placeholder="请选择收款公司" @change="accountTitleChange(queryParams.accountTitle)">
              <el-option
                v-for="item in BankList"
                :key="item.accountTitle"
                :label="item.accountTitle"
                :value="item.accountTitle"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行名称" label-width="120px" prop="cdbName">
            <el-input v-model="queryParams.cdbName" :disabled="dataDisabled" style="width: 217px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行账号" label-width="120px" prop="cdbNo">
            <el-input v-model="queryParams.cdbNo" :disabled="dataDisabled" style="width: 217px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="付款类型" label-width="120px" prop="remark">
            <el-select v-model="queryParams.payTypes" :disabled="dataDisabled" placeholder="请选择"
                       @change="$set(queryParams, 'chequeNo', null)"
            >
              <el-option
                v-for="item in payTypeList"
                :key="item.dictSort"
                :label="item.dictLabel"
                :value="item.dictSort"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="支票号" label-width="120px" prop="remark">
            <el-input v-model="queryParams.chequeNo" :disabled="dataDisabled || queryParams.payTypes != 1"
                      placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" label-width="120px" prop="remark">
            <el-input v-model="queryParams.remark" :disabled="dataDisabled" style="width: 640px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item>
        <el-button :disabled="queryParams.kpType == 2 || queryParams.payType == 2" icon="el-icon-edit" size="mini"
                   type="success" @click="amend"
        >修改
        </el-button>
        <el-button :disabled="dataDisabled" icon="el-icon-plus" size="mini" type="primary" @click="handleQuery">筛选
        </el-button>
        <el-button :disabled="dataDisabled" icon="el-icon-check" plain size="mini" type="primary" @click="submit">保存
        </el-button>
        <el-button v-if="!queryParams.id || queryParams.auditType == 1 || queryParams.auditType == 4" icon="el-icon-lollipop"
                   size="mini" type="primary" @click="billings(1)"
        >付费
        </el-button>
        <el-button v-else :disabled="queryParams.auditType != 2" icon="el-icon-ice-cream-round" size="mini"
                   type="primary" @click="approvalRevocation"
        >撤销付费
        </el-button>
        <el-button type="info" @click="printFunction" size="mini">打印</el-button>
        <!--        <el-button v-else :disabled="queryParams.auditType != 2" size="mini" icon="el-icon-ice-cream-round" type="primary" @click="billings(2)">撤销付费</el-button>-->
        <!--        <el-button @click="check(queryParams, 1)">审批进度</el-button>-->
        <el-button size="mini" type="primary" @click="addOrUpdateHandle">查看审批流</el-button>
        <el-button v-hasPermi="['basicdata:area:export']" size="mini" type="danger" @click="approvalRevocation">
          撤销审批
        </el-button>
<!--        <el-button v-if="queryParams.auditType == 2" size="mini" @click="immediateApproval">审批</el-button>-->
        <el-button v-if="audit" size="mini" @click="immediateApproval">审批</el-button>

      </el-form-item>
    </el-form>
    <el-table :data="xsckXzDataList" show-summary :summary-method="getSummaries" style="width: 100%">

      <el-table-column align="center" label="发票号" prop="invoiceNo"/>
      <el-table-column align="center" label="开票公司" prop="fSbuName"/>
      <el-table-column align="center" label="项目名称" prop="fGoodsName"/>
      <el-table-column align="center" label="金额" prop="sumMoney"/>
      <el-table-column align="center" label="付款金额" prop="proceeds" width="140px">
        <template slot-scope="{ row }">
          <el-input-number v-model="row.proceeds" :disabled="datasDisabled" :max="row.proceeds" :min="0" :precision="2"
                           :step="1"
                           controls-position="right"
                           size="mini"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            :disabled="queryParams.auditType == 2 || queryParams.auditType == 3"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row, scope)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      title="导入明细"
      width="80%"
    >
      <el-table v-loading="loading" show-summary :data="tableData" show-summary style="width: 100%" @selection-change="selectL">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="系统单号" prop="sysNo"/>
        <el-table-column align="center" label="开票日期" prop="kpTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.kpTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="供应商" prop="fCorpidName"/>
        <el-table-column align="center" label="项目名称" prop="fGoodsName"/>
        <el-table-column align="center" label="金额合计" prop="sumMoney"/>
        <el-table-column align="center" label="发票号" prop="invoiceNo"/>
        <el-table-column align="center" label="开票公司" prop="fSbuName"/>
        <el-table-column align="center" label="发票类型" prop="invoiceType"/>
        <el-table-column align="center" label="制单人" prop="createBy"/>
        <el-table-column align="center" label="制单日期" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="remark"/>
        <el-table-column align="center" label="收款金额" prop="proceeds"/>
      </el-table>
      <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="xsckClick">确 定</el-button>
      </span>
    </el-dialog>

    <div slot="footer" class="dialog-footer">
      <add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update>
      <approval-comments
        v-if="addOrUpdateVisib"
        ref="ApprovalComments"
        @refreshDataList="returnData"
      ></approval-comments>
    </div>

    <!-- 打印 -->
    <el-dialog
      :title="`打印`"
      :visible.sync="printTheDialogBox"
      :fullscreen="true"
      style="padding: 0;margin:0"
      width="70%"
    >
      <div ref="print">
        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td colspan="6"></td>
            <td colspan="2">打印次数：{{ printData.printQuantity + 1 }}</td>
            <td colspan="3">打印日期：{{ printData.fPrintTime }}</td>
          </tr>
          <tr>
            <td style="font-size: 24px;font-weight:bold" class="column" colspan="12">付费</td>
          </tr>
          <tr>
            <td class="column" rowspan="4">收款方</td>
            <td class="column" colspan="2">供应商</td>
            <td class="column" colspan="2">{{ printData.fCorpid }}</td>
            <td class="column" rowspan="4">付款方</td>
            <td class="column" colspan="2">付款公司</td>
            <td class="column" colspan="3">{{ printData.ttCoId }}</td>
          </tr>
          <tr>
            <td class="column" colspan="2">开票公司</td>
            <td class="column" colspan="2">{{ printData.kpCoId }}</td>
            <td class="column" colspan="2">开户名称</td>
            <td class="column" colspan="3">{{ printData.accountTitle }}</td>
          </tr>
          <tr>
            <td class="column" colspan="2">银行名称</td>
            <td class="column" colspan="2">{{ printData.skCdbName }}</td>
            <td class="column" colspan="2">银行名称</td>
            <td class="column" colspan="3">{{ printData.cdbName }}</td>
          </tr>
          <tr>
            <td class="column" colspan="2">银行账号</td>
            <td class="column" colspan="2">{{ printData.skCdbNo }}</td>
            <td class="column" colspan="2">银行账号</td>
            <td class="column" colspan="3">{{ printData.cdbNo }}</td>
          </tr>



          <tr>
            <td class="column">付款类型</td>
            <td class="column" colspan="2">{{ printData.payTypes }}</td>
            <td class="column">支票号</td>
            <td class="column" >{{ printData.chequeNo }}</td>
            <td class="column">备注</td>
            <td class="column" colspan="4">{{ printData.remark }}</td>
          </tr>


          <tr>
            <td class="column">序号</td>
            <td class="column">发票号</td>
            <td class="column" colspan="3">开票公司</td>
<!--            <td class="column" colspan="3">项目名称</td>-->
<!--            <td class="column">金额</td>-->
            <td class="column">付款金额</td>
            <td class="column" colspan="6">备注</td>
          </tr>
          <!-- feeDoList -->
          <tr v-for="(item,index) in xsckXzprintDataList" :key="index">
            <td class="column">{{ Number(index) + 1 }}</td>
            <td class="column">{{ item.invoiceNo }}</td>
            <td class="column" colspan="3">{{ item.fSbuName }}</td>
<!--            <td class="column" colspan="3">{{ item.fGoodsName }}</td>-->
<!--            <td class="column">{{ item.sumMoney }}</td>-->
            <td class="column">{{ item.proceeds }}</td>
            <td class="column" colspan="6">{{ item.remark }}</td>
          </tr>

          <tr>
            <td class="column">付费日期</td>
            <td class="column" colspan="3">{{ printData.createTime }}</td>
            <td class="column">合计金额(小写)</td>
            <td class="column" colspan="2">{{ printData.sumMoney }}</td>
            <td class="column">合计金额(大写)</td>
            <td class="column" colspan="3">{{ printData.sumMoneyZh }}</td>
          </tr>
        </table>

        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td class="column" style="width: 15%;border: none">提交人：{{ printData.createBy }}</td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 10%"></td>
            <td class="column" style="width: 15%;border: none">财务主管：{{ printData.firstLevelReviewerName }}</td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 10%"></td>
            <td class="column" style="width: 15%;border: none">财务经理：{{ printData.secondaryReviewerName }}</td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 10%"></td>
            <td class="column" style="text-align: left;border: none;width: 15%">总经理：</td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 10%"></td>
          </tr>
          <tr>
            <td class="column" style="width: 15%;border: none"></td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 10%"></td>
            <td class="column" style="width: 15%;border: none"></td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 10%"></td>
            <td class="column" style="width: 15%;border: none"></td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 10%"></td>
            <td class="column" style="text-align: left;border: none;width: 10%"></td>
            <td class="column" style="text-align: left;border: none;width: 15%">领款人：</td>
            <td class="column" style="text-align: left;border: none;width: 10%"></td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="printTheDialogBox = false">取 消</el-button>
        <el-button type="primary" @click="confirmPrinting">打印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { company, queryItem } from '@/api/purchaseIssue/index'
import { addPayment, getPayment, payForIt, quashBilling, updatePayment } from '@/api/invoice/payment'
import { listInvoice } from '@/api/invoice/invoice'
import { getCorps } from '@/api/basicdata/corps'
import { getListBankByUserId } from '@/api/system/bank'
import { delPaymentDetails, paymentConfirmPrinting } from '../../../api/invoice/payment'

import ApprovalComments from '@/views/startApproval'
import AddOrUpdate from '@/views/viewApproval'
import { parseTime } from '../../../utils/ruoyi'

import { revocation } from '@/api/finance/payment'
import Cookies from 'js-cookie'
import { getApproved } from '../../../api/finance/applyForInvoice/chargeInvoice'

import Global from "@/layout/components/global.js";

export default {
  name: 'Fees',
  components: {
    ApprovalComments,
    AddOrUpdate
  },
  props: {
    detailData: {
      type: Object
    }
  },
  data() {
    return {
      printData: {},
      xsckXzprintDataList: [],
      printTheDialogBox: false,
      addOrUpdateVisible: false,
      addOrUpdateVisib: false,
      queryParams: {
        type: 2
      },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      loading: true,
      searchCriteriaDisabled: true,
      dataDisabled: true,
      datasDisabled: true,
      dialogVisible: false,
      audit: false,
      tableData: [],
      xsckXzDataList: [],
      listSelect: [],
      listSelectId: [],
      fCorpList: [],
      fSbuList: [],
      ttCoList: [],
      fGoodsList: [],
      vendorList: [],
      fCorpMap: {},
      fSbuMap: {},
      ttCoMap: {},
      fGoodsMap: {},
      vendorMap: {},
      payTypeList: [],
      invoiceTypeList: [],
      BankList: [],
      fCorpBankList: [],
      rules: {
        fCorpid: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        kpTimeStart: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        kpTimeTerminate: [
          { required: true, message: ' ', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if (this.detailData.audit) {
      this.audit = true
    }
    this.getDicts('invoice_type').then(response => {
      this.invoiceTypeList = response.data
    })
    this.getDicts('pay_type').then(response => {
      this.payTypeList = response.data
    })
    company(3).then(res => {
      this.fCorpList = res.data
      for (var index in res.data) {
        this.fCorpMap[res.data[index].fId] = res.data[index].fName
      }
    })
    // 开票公司
    company(2).then(res => {
      this.fSbuList = res.data
      for (var index in res.data) {
        this.fSbuMap[res.data[index].fId] = res.data[index].fName
      }
    })
    // 供应商
    company(1).then(res => {
      this.vendorList = res.data
      for (var index in res.data) {
        this.vendorMap[res.data[index].fId] = res.data[index].fName
      }
    })
    // 收款公司
    company(6).then(res => {
      this.ttCoList = res.data
      for (var index in res.data) {
        this.ttCoMap[res.data[index].fId] = res.data[index].fName
      }
    })
    // 项目名称
    queryItem().then(res => {
      this.fGoodsList = res.data
      for (var index in res.data) {
        this.fGoodsMap[res.data[index].fId] = res.data[index].projectName
      }
    })

    if (this.detailData.id != null) {
      getPayment(this.detailData.id).then(res => {
        this.queryParams = res.data
        this.xsckXzDataList = res.data.invoicePaymentDetailList

        this.xsckXzDataList.forEach(data => {
          data.fSbuName = this.fSbuMap[data.fSbu]
          data.fGoodsName = this.fGoodsMap[data.fGoodsid]
        })
      })
    } else {
      this.searchCriteriaDisabled = false
      this.dataDisabled = false
      this.datasDisabled = false
    }

  },
  methods: {
    parseTime,
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === 'sumMoney' || column.property === 'proceeds') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(2);
            } else {
              return Number(prev).toFixed(2);
            }
          }, 0);
          sums[index];

        }
      });
      return sums
    },
    // 撤销审批
    approvalRevocation() {
      let data = {
        id: this.queryParams.id,
        actId: 580,
        billId: this.queryParams.id
      }
      revocation(data).then((data) => {
        if (data.code === 200) {
          this.$message.success('撤销成功')
          this.mainTable = false
          this.open = false
          this.queryParams.auditType = 4
          this.queryParams.payType = 1
          // this.getList();
        }
      })
    },
    // 查看审批流
    addOrUpdateHandle() {
      // if (this.queryParams.fId == null || this.queryParams.fId == '') {
      //   this.$message({
      //     message: '当前数据没有审批',
      //     type: 'warning'
      //   });
      //   return;
      // }
      this.addOrUpdateVisible = true
      this.addOrUpdateVisib = false
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.queryParams.id, 580)
      })
    },
    getDataList() {
      this.addOrUpdateVisible = false
    },
    returnData() {
      this.addOrUpdateVisib = false
      this.open = false
      // this.homepaGe()
      this.backToList()

    },
    homepaGe() {
      let view = {
        fullPath: '/finance/charge',
        hash: '',
        matched: Array(2),
        meta: Object,
        name: 'Charge',
        params: Object,
        path: '/finance/charge',
        query: Object,
        title: '付费'
      }
      this.$router.push({ path: '/index' })
      this.$store
        .dispatch('tagsView/delView', view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
      Global.$emit('removeCache', 'closeSelectedTag', view)
    },
    // 查看按钮
    check(row, res) {
      this.notChange = true
      this.doNot = true
      getPayment(row.id).then((response) => {
        this.dataId = response.data.tFee.fId
        // 审批通过，撤销审批通过付费允许点击
        if (response.data.tFee.fAuditType == 2) {
          console.log('审批通过，撤销审批通过付费允许点击')
          console.log(response.data.tFee.fAuditType)
          this.isApproved = false
        }
        this.Operator = response.data.tFee.createBy
        this.approve = false
        if (response.data.tFee.fAuditType == 1) {
          console.log('fAuditType')
          this.isCancelAPayment = true
        } else {
          this.isCancelAPayment = false
        }
        this.increase_s = response.data.feeDoList
        this.fWbuOptions = response.data.feesList
        this.queryParams = response.data.tFee
        this.fWbuOptions = response.data.feesList
        this.fMblnoOptions = response.data.corps
        this.mainTable = true
        this.mainTable = true
        this.title = '付费列表'
        this.tablefilter = true
        if (res == 1) {
          this.notChange = true
          if (this.Operator == this.Lander) {
            this.tablefilter = false
            this.reset()
            this.pass = {
              fAmtdr: 0, //应收合计
              fAmtcr: 0, //应付合计
              fMblno: '', //提单号
              fName: '', //货权方
              fFeesName: '', //结算单位
              fCorpid: '' //结算单位ID
            }
            getPayment(row.id).then((response) => {

              this.increase_s = response.data.feeDoList
              this.fWbuOptions = response.data.feesList
              this.queryParams = response.data.tFee
              this.fWbuOptions = response.data.feesList
              this.fMblnoOptions = response.data.corps
              this.mainTable = true
            })
          } else {
            this.notChange = true
            // this.$message.error('未知异常，请联系管理员')
          }
        }
      })
    },
    immediateApproval() {
      this.addOrUpdateVisib = true
      this.$nextTick(() => {
        // this.approval.billId,
        this.$refs.ApprovalComments.init(
          this.queryParams.id,
          580
        )
        // this.approval.actId
      })
    },
    billings(kpType) {
      if (this.queryParams.id == null) {
        this.$message({
          message: '请先保存数据',
          type: 'warning'
        })
      } else if (this.xsckXzDataList.length == 0) {
        this.$message({
          message: '请添加单据',
          type: 'warning'
        })
      } else {
        if (kpType == 1) {
          payForIt(this.queryParams).then(res => {
            this.queryParams.payType = 2
            this.queryParams.auditType = 2
            this.$message({
              message: '收费成功',
              type: 'success'
            })
            this.dataDisabled = true
          })
        } else {
          quashBilling(this.queryParams).then(res => {
            this.queryParams.payType = 1
            this.$message({
              message: '撤销收费成功',
              type: 'success'
            })
            this.dataDisabled = true
          })
        }
      }
    },
    handleDelete(row, scope) {
      const fIds = row.fId || this.ids
      this.$confirm('是否确认删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        console.log(row.id,123)
        if (row.id) {
          delPaymentDetails(row.id).then((res) => {
            if (res.code == 200) {
              this.msgSuccess('删除成功')
              this.$message({
                message: '删除成功',
                type: 'success'
              })

              this.xsckXzDataList.splice(scope.$index, 1)
              // getPayment(this.detailData.id).then(res => {
              //   this.queryParams = res.data
              //   this.xsckXzDataList = res.data.invoicePaymentDetailList
              // })
            } else {
              this.$message.error(res.msg)
            }
            // this.getList()
          })
        } else {
          this.xsckXzDataList.splice(scope.$index, 1)
        }
      })
    },
    ttCoIdChange(id) {
      if (id) {
        getListBankByUserId(id).then(res => {
          this.BankList = res.data
        })
      } else {
        this.BankList = [];
        this.$set(this.queryParams, 'cdbName', null)
        this.$set(this.queryParams, 'cdbNo', null)
        this.$set(this.queryParams, 'accountTitle', null)
      }
    },
    accountTitleChange(accountTitle) {
      this.BankList.forEach(data => {
        if (data.accountTitle == accountTitle) {
          this.$set(this.queryParams, 'cdbName', data.cdbName)
          this.$set(this.queryParams, 'cdbNo', data.cdbNo)
          // this.$set(this.queryParams, 'accountTitle', data.accountTitle)
        }
      })
    },
    fCorpidChange(fCorpid) {
      if (fCorpid) {
        getListBankByUserId(fCorpid).then(res => {
          this.fCorpBankList = res.data
        })
      } else {
        this.fCorpBankList = [];
        this.$set(this.queryParams, 'skCdbName', null)
        this.$set(this.queryParams, 'skCdbNo', null)
        this.$set(this.queryParams, 'kpCoId', null)
      }
    },
    kpCoIdChange(kpCoId) {
      this.fCorpBankList.forEach(data => {
        if (data.accountTitle == kpCoId) {
          console.log(data.kpCoId)
          console.log(data.cdbName)
          this.$set(this.queryParams, 'skCdbName', data.cdbName)
          this.$set(this.queryParams, 'skCdbNo', data.cdbNo)
          // this.$set(this.queryParams, 'accountTitle', data.accountTitle)
        }
      })
    },
    submit() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          if (this.queryParams.id == null) {
            this.xsckXzDataList.forEach(data => {
              console.log(data, 1)
              console.log(data.payType, 2)
              console.log(data.chequeNo, 3)
            })
            this.queryParams.invoicePaymentDetailList = this.xsckXzDataList
            addPayment(this.queryParams).then(res => {
              this.queryParams = res.data
              this.dataDisabled = true
              this.searchCriteriaDisabled = true
              this.datasDisabled = true
              this.queryParams.auditType = 1
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            })
          } else {
            this.xsckXzDataList.forEach(data => {
              console.log(data, 1)
              console.log(data.payType, 2)
              console.log(data.chequeNo, 3)
            })
            updatePayment(this.queryParams).then(res => {
              this.queryParams = res.data
              this.dataDisabled = true
              this.searchCriteriaDisabled = true
              this.datasDisabled = true
              this.queryParams.auditType = 1
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            })
          }
        }
      })

    },
    handleSizeChange(val) {
      this.pageSize = val
      this.handleQuery()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.handleQuery()
    },
    handleQuery() {

      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          var rest = {}
          if (this.queryParams.kpTimeStart != null && this.queryParams.kpTimeTerminate != null) {
            var timeInterval = []
            timeInterval[0] = this.queryParams.kpTimeStart
            timeInterval[1] = this.queryParams.kpTimeTerminate
            rest.timeInterval = timeInterval

          }
          rest.pageSize = this.pageSize
          rest.pageNum = this.pageNum
          rest.fCorpid = this.queryParams.fCorpid
          rest.fSbu = this.queryParams.fSbu
          rest.type = 2
          rest.kpType = 2
          listInvoice(rest).then((res) => {
            this.tableData = res.rows

            this.tableData.forEach(data => {
              // 客户
              data.fCorpidName = this.vendorMap[data.fCorpid]
              // 项目
              data.fGoodsName = this.fGoodsMap[data.fGoodsid]
              // 开票
              data.fSbuName = this.fSbuMap[data.fSbu]

              // 发票类型
              this.invoiceTypeList.forEach(datas => {
                if (datas.dictSort == data.invoiceType) {
                  data.invoiceType = datas.dictLabel
                }
              })
            })

            this.total = res.total
            this.dialogVisible = true
            this.loading = false
          })
        }
      })

    },
    amend() {
      this.dataDisabled = false
      if (this.xsckXzDataList.length != 0 && (this.queryParams.fCorpid || this.queryParams.fGoodsid || this.queryParams.fSbu || this.queryParams.timeIntervalStart || this.queryParams.timeIntervalTerminate)) {
        this.searchCriteriaDisabled = true
      } else {
        this.searchCriteriaDisabled = false
      }
      this.datasDisabled = false
    },
    xsckClick() {
      for (let i = 0; i < this.xsckXzDataList.length; i++) {
        for (let j = 0; j < this.listSelect.length; j++) {
          if (this.xsckXzDataList[i].invoiceId == this.listSelect[j].id) {
            var a = j + 1
            this.$message({
              message: `选中的第${a}条数据重复`,
              type: 'warning'
            })
            return
          }
        }
      }
      for (var select of this.listSelect) {
        select.invoiceId = select.id
        select.proceeds = select.sumMoney - select.proceeds
        select.id = null
        this.xsckXzDataList.push(select)
      }

      this.listSelect = []
      this.dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    backToList() {
      this.tableData = []
      this.xsckXzDataList = []
      this.listSelect = []
      this.listSelectId = []
      this.fCorpList = []
      this.fSbuList = []
      this.fGoodsList = []
      this.$emit('goBack')
    },
    // 选中添加/不选中删除
    selectL(selection, row) {
      this.listSelect = selection
      this.listSelectId = selection.map(item => item.id)
    },
    // 打印
    printFunction() {

      let data = {
        id: this.queryParams.id,
        actId: 580
      }
      data.actId = 580

      getApproved(data).then(res => {
        var approval = res.data.pop()
        if (approval == null) {
          this.$message.warning('未审核或未通过审核')
          return
        }
        if (approval.auditStatus != 'A') {
          this.$message.warning('未审核或未通过审核')
          return
        }

        getPayment(this.detailData.id).then(res => {
          this.printData = res.data
          this.xsckXzprintDataList = res.data.invoicePaymentDetailList

          this.printData.fCorpid = this.vendorMap[this.printData.fCorpid]
          // 收款公司
          this.printData.ttCoId = this.ttCoMap[this.printData.ttCoId]

          for (let payType of this.payTypeList) {
            if (this.printData.payTypes == payType.dictSort) {
              this.printData.payTypes = payType.dictLabel
            }
          }

          this.printData.createTime = this.printData.createTime.slice(0, 10)


          let printDate = new Date();
          this.printData.fPrintTime = printDate.toLocaleString();

          this.xsckXzprintDataList.forEach(data => {
            data.fSbuName = this.fSbuMap[data.fSbu]
            data.fGoodsName = this.fGoodsMap[data.fGoodsid]
          })

          this.printTheDialogBox = true;
        })
      })
    },
    // 确认打印
    confirmPrinting() {
      // 添加打印次数
      let data = {
        id : this.printData.id + '',
        printTime : this.printData.fPrintTime
      };

      paymentConfirmPrinting(data).then(res => {
        if (res.code === 200) {
          this.$print(this.$refs.print)
        } else {
          this.$message.error('修改打印此处出错');
        }
      })
    }
  }
}
</script>

<style scoped>
::v-deep.el-form-item {
  margin-bottom: 6px;
}
.tabSetting {
  display: flex;
  justify-content: flex-end;
}
.listStyle {
  display: flex;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}
.listStyle:last-child {
  border-bottom: 1px solid #dcdfe6;
}
.progress {
  display: flex;
  align-items: center;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 100%;
}
.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-dialog__title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 20px;
  float: left;
}
.avue-crud__dialog__menu i {
  color: #909399;
  font-size: 15px;
}
.el-icon-full-screen {
  cursor: pointer;
}
.el-icon-full-screen:before {
  content: "\e719";
}
</style>
<style lang="scss">
.el-dialog__body{
  padding: 0 20px 30px 20px;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.table td {
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  color: #000000;
  padding: 8px 12px;
}

.column {
  border: 1px solid #000;
}

.app-container >>> .el-form-item {
  margin-bottom: 0;
}
</style>