Smart_platform_ui/src/views/iosBasicData/financialManagement/computationCenter/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none; background: none; color: red" icon="el-icon-arrow-left" @click="goBack()">返回列表 </el-button>
        <el-button v-if="form.id && pageIds.length" type="text" @click="lastPage">上一票</el-button>
        <el-button v-if="form.id && pageIds.length" type="text" @click="nextPage">下一票</el-button>
      </div>
      <div class="customer-title">{{ form.operatingType }}</div>
      <div class="add-customer-btn">
        <el-button size="small" :disabled="!form.id" @click="$refs.print.openDialog()">预 览 </el-button>
        <el-button v-if="roleName.includes('admin')" size="small" :disabled="!form.id" @click="$refs.report.openDialog()">报表设计 </el-button>
        <el-button size="small" type="danger" plain :disabled="editButton" v-if="form.isCleared == 1" @click="allClick('撤销结算')"
          >撤销结算
        </el-button>
        <el-button size="small" type="success" plain :disabled="editButton" v-if="form.id&&form.status ==0" @click="allClick('确认结算')">确认结算 </el-button>
        <el-button class="el-button--small-yh" type="primary" size="small" v-if="editButton" @click="inEdit">编 辑 </el-button>
        <el-button v-else class="el-button--small-yh" type="primary" size="small" :disabled="editButton || form.status == 3" @click="submit"
          >保 存
        </el-button>
      </div>
    </div>
    <div style="margin-top: 50px">
      <el-card class="box-card">
        <avue-form :option="optionForm" v-model="form" ref="avueForm">
          <tempalte slot="bankAccountNo">
            <dic-select
              v-model="form.bankAccountNo"
              :key="form.corpId"
              placeholder="开户帐号"
              label="accountNo"
              res="records"
              :url="'/blade-los/bcorpsbank/list?current=1&size=50&pid=' + form.corpId"
              :filterable="true"
              :remote="true"
              dataName="accountNo"
              @selectChange="dicChange('bankAccountNo', $event)"
              :disabled="editDisabled"
              :slotRight="true"
              rightLabel="accountBank"
            ></dic-select>
          </tempalte>
        </avue-form>
        <avue-form v-show="show" class="form2" :option="optionForm2" v-model="form" ref="form2">
          <tempalte slot="businessDate">
            <date-range
              :start-date.sync="form.businessDateStart"
              :end-date.sync="form.businessDateEnd"
              :defaultTime="['00:00:00', '00:00:00']"
              :disabled="true"
            ></date-range>
          </tempalte>
        </avue-form>
        <div style="display: flex; justify-content: center; font-size: 14px" @click="show = !show" @mouseenter="enter" @mouseleave="leave">
          <div v-show="show" style="height: 16px; cursor: pointer">
            <span class="el-button--text"><i class="el-icon-caret-top" /><span v-show="showSpan">隐藏</span></span>
          </div>
          <div v-show="!show" style="height: 16px; cursor: pointer">
            <span class="el-button--text"><i class="el-icon-caret-bottom" /><span v-show="showSpan">显示</span></span>
          </div>
        </div>
      </el-card>
      <el-tabs style="margin-top: 2px" class="box-tabs" type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="结算明细" name="1">
          <picked-data ref="pickedData" :form="form" :tableData="form.finStlBillsItemsList" @update="update" :disabled="editButton"></picked-data>
        </el-tab-pane>
        <el-tab-pane label="凭证数据" name="2" v-if="form.isCleared == 1">
          <div style="margin-bottom: 10px">
            <el-form :model="form" ref="form1" label-width="70px">
              <el-row>
                <el-col :span="4">
                  <el-form-item label="凭证字" prop="voucherType">
                    <search-query
                      :datalist="voucherTypeData"
                      :selectValue="form.voucherType"
                      :clearable="false"
                      :buttonIf="false"
                      :disabled="!canEditVoucher"
                      :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }"
                      placeholder="请选择凭证字"
                      @corpChange="corpChange($event, 'voucherType')"
                    >
                    </search-query>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="凭证日期" prop="voucherDate">
                    <el-date-picker
                      v-model="form.voucherDate"
                      clearable
                      style="width: 100%"
                      type="date"
                      size="small"
                      value-format="yyyy-MM-dd"
                      :disabled="!canEditVoucher"
                      placeholder="选择凭证日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="16" style="padding-left: 20px">
                  <el-button size="small" type="primary" style="margin-right: 8px" @click="addEntryfun" :disabled="!canEditVoucher"
                    >添加分录
                  </el-button>
                  <el-button size="small" type="danger" style="margin-right: 8px" @click="deleteEntryfun" :disabled="!canEditVoucher"
                    >删除分录
                  </el-button>

                  <el-button
                    size="small"
                    type="primary"
                    style="margin-right: 10px; margin-right: 8px"
                    @click="oneClickSave"
                    :disabled="!canEditVoucher"
                    >一键保存
                  </el-button>

                  <el-button
                    size="small"
                    type="primary"
                    style="margin-left: 8px; margin-right: 8px"
                    :disabled="!form.id || form.isCleared != 1"
                    v-if="!form.voucherNo"
                    @click="generateVoucherfun"
                    >生成凭证
                  </el-button>
                  <span v-if="form.voucherNo" style="font-size: 12px; margin-left: 16px; margin-right: 8px">{{
                    "凭证号：" + form.voucherNo + " 单据号：" + form.voucherBillNo
                  }}</span>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <fromtable-details
            :assemblyForm="form"
            :tableData="form.finStlBillsVoucherItemsList"
            :handleSelectionData="handleSelectionData2"
            :disabled="!canEditVoucher"
            @handleSelectionChange="handleSelectionChange2"
            @addRowsfun="addRowsfun"
            @deletefun="deletefun"
            @auxiliaryAccountingfun="auxiliaryAccountingfun"
            @showOffRecordsfun="showOffRecordsfun"
          >
          </fromtable-details>
        </el-tab-pane>
      </el-tabs>
      <fee-info ref="feeInfo"></fee-info>
      <business-reports :id="form.id" ref="print" businessValue="JSZX" :type="true"></business-reports>
      <reports :id="form.id" :assemblyForm="form" businessValue="JSZX" ref="report"></reports>
      <!--辅助核算-->
      <el-dialog title="核算项目维护" append-to-body :visible.sync="auxiliaryVisible" class="el-dialogDeep" width="40%" :before-close="handleClose">
        <div>科目名称: {{ subjectRow.accountFullName }}</div>
        <div style="margin-top: 10px">
          <el-form :model="subjectRow" ref="subjectRow" label-width="70px" class="demo-ruleForm">
            <!--#region-->
            <!--<div>外币核算:</div>-->
            <!--<el-row>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="币种:" prop="curCode">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.curCode"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入币种" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="汇率:" prop="exrate">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.exrate"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入汇率" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="借方金额:" prop="amountDrUsd">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.amountDrUsd"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入借方金额" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="贷方金额:" prop="amountCrUsd">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.amountCrUsd"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入贷方金额" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="本币借方:" prop="amountDr">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.amountDr"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入本币借方" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="本币贷方:" prop="amountCr">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.amountCr"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入本币贷方" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--</el-row>-->
            <!--#endregion-->
            <!--#region-->
            <!--<div>数量核算:</div>-->
            <!--<el-row>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="单位:" prop="unitNo">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.unitNo"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入单位" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="规格:" prop="voucherNo">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.voucherNo"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入规格" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="借方数量:" prop="quantityDr">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.quantityDr"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入借方数量" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="借方单价:" prop="voucherNo">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.voucherNo"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入借方单价" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="贷方数量:" prop="quantityCr">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.quantityCr"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入贷方数量" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--    <el-col :span="4">-->
            <!--        <el-form-item label="贷方单价:" prop="voucherNo">-->
            <!--            <el-input style="width: 100%;" v-model="subjectRow.voucherNo"-->
            <!--                      size="small" autocomplete="off"-->
            <!--                      clearable placeholder="请输入贷方单价" >-->
            <!--            </el-input>-->
            <!--        </el-form-item>-->
            <!--    </el-col>-->
            <!--</el-row>-->
            <!--#endregion-->
            <el-row :gutter="40">
              <el-col :span="12" v-if="subjectAccount.isCorp">
                <!--<div>客户核算：</div>-->
                <el-form-item label="客户名称:" prop="corpCnName">
                  <search-query
                    style="width: 100%"
                    ref="searchQueryRef"
                    :datalist="corpCnNameData"
                    :selectValue="subjectRow.corpCnName"
                    :filterable="true"
                    :clearable="true"
                    :remote="true"
                    :buttonIf="true"
                    placeholder="请选择客户名称"
                    :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }"
                    @corpFocus="getBcorpsListfun"
                    @remoteMethod="getBcorpsListfun"
                    @corpChange="corpChange2($event, 'corpCnName')"
                    @eldialogConfirm="eldialogConfirm('bcorps')"
                    @bottonSearchfun="bottonSearchfun('bcorps')"
                  >
                    <bcorps ref="bcorps" :eldialog="true" @selectionChange="eldialogMultipleChoice($event, 'bcorps')"></bcorps>
                  </search-query>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="subjectAccount.isDept">
                <!--<div>部门核算：</div>-->
                <el-form-item label="部门名称:" prop="deptName">
                  <tree-select
                    v-model="subjectRow.deptName"
                    filterable
                    :data="deptData"
                    :props="{ label: 'title', children: 'children' }"
                    nodeKey="title"
                    size="small"
                    :multiple="false"
                    placeholder="请选择部门名称"
                    @focus="getDeptTreefun"
                    @input="corpChange2($event, 'deptName')"
                  >
                  </tree-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="subjectAccount.isEmpl">
                <!--<div>职员核算：</div>-->
                <el-form-item label="职员名称:" prop="emplName">
                  <search-query
                    :datalist="emplData"
                    :selectValue="subjectRow.emplName"
                    :clearable="true"
                    :buttonIf="false"
                    :filterable="true"
                    :remote="true"
                    placeholder="请选择职员名称"
                    :forParameter="{ key: 'id', label: 'name', value: 'name' }"
                    @corpFocus="userGetListfun"
                    @corpChange="corpChange2($event, 'emplName')"
                    @remoteMethod="userGetListfun"
                  >
                  </search-query>
                </el-form-item>
              </el-col>
              <!--<el-col :span="12" v-if="subjectAccount.isItem">-->
              <!--    <div>项目核算：</div>-->
              <!--    <el-form-item label="项目名称:" prop="itemName">-->
              <!--        <el-input style="width: 100%;" v-model="subjectRow.itemName"-->
              <!--                  size="small" autocomplete="off"-->
              <!--                  clearable placeholder="请输入项目名称" >-->
              <!--        </el-input>-->
              <!--        <search-query :datalist="itemData"-->
              <!--                      :selectValue="subjectRow.itemName"-->
              <!--                      :clearable="true"-->
              <!--                      :buttonIf="false"-->
              <!--                      :filterable="true"-->
              <!--                      :remote="true"-->
              <!--                      placeholder="请选择项目名称"-->
              <!--                      :forParameter="{ key:'id', label:'cnName', value:'cnName'}"-->
              <!--                      @corpFocus="baccitemstypeListfun"-->
              <!--                      @corpChange="corpChange($event,'itemName')"-->
              <!--                      @remoteMethod="baccitemstypeListfun" >-->
              <!--        </search-query>-->
              <!--    </el-form-item>-->
              <!--</el-col>-->
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="auxiliaryVisible = false">取 消</el-button>
          <el-button type="primary" @click="auxiliaryDeterminefun">确 定</el-button>
        </span>
      </el-dialog>
      <!--预收预付核销-->
      <el-dialog
        title="预收预付核销管理"
        append-to-body
        :visible.sync="offRecordsVisible"
        class="el-dialogDeep"
        width="80%"
        :before-close="handleClose"
      >
        <div>
          科目名称:
          {{
            subjectRow.accountCode +
            " " +
            subjectRow.accountFullName +
            (subjectRow.isEmpl === 1 && subjectRow.emplName ? "/" + subjectRow.emplName : "") +
            (subjectRow.isDept === 1 && subjectRow.deptName ? "/" + subjectRow.deptName : "") +
            (subjectRow.isCorp === 1 && subjectRow.corpShortName ? "/" + subjectRow.corpShortName : "") +
            (subjectRow.isItem === 1 ? "/" + subjectRow.itemClassify + "-" + (subjectRow.itemName ? subjectRow.itemName : "") : "")
          }}
          方向：{{ subjectRow.dc === "D" ? "借" : "贷" }}
        </div>
        <div>
          借方金额: CNY {{ fixedAmt(subjectRow.amountDr, 16) }} {{ subjectRow.isForeign === 1 ? "USD " + fixedAmt(subjectRow.amountDrUsd, 16) : "" }}
        </div>
        <div>
          贷方金额: CNY {{ fixedAmt(subjectRow.amountCr, 16) }} {{ subjectRow.isForeign === 1 ? "USD " + fixedAmt(subjectRow.amountCrUsd, 16) : "" }}
        </div>
        <div style="margin-top: 10px; margin-bottom: 10px">
          <el-form :model="subjectRowOff" ref="subjectRowOff" label-width="70px" class="demo-ruleForm">
            <el-row :gutter="40">
              <el-col :span="12" v-if="subjectRowOff.isCorp">
                <!--<div>客户核算：</div>-->
                <el-form-item label="客户名称:" prop="corpCnName">
                  <search-query
                    style="width: 100%"
                    ref="searchQueryRef"
                    :datalist="corpCnNameData"
                    :selectValue="subjectRowOff.corpCnName"
                    :filterable="true"
                    :clearable="true"
                    :remote="true"
                    :buttonIf="true"
                    placeholder="请选择客户名称"
                    :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }"
                    @corpFocus="getBcorpsListfun"
                    @remoteMethod="getBcorpsListfun"
                    @corpChange="corpChangeOff($event, 'corpCnName')"
                    @eldialogConfirm="eldialogConfirmOff('bcorps')"
                    @bottonSearchfun="bottonSearchfun('bcorps')"
                  >
                    <bcorps ref="bcorps" :eldialog="true" @selectionChange="eldialogMultipleChoice($event, 'bcorps')"></bcorps>
                  </search-query>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="subjectRowOff.isCorp">
                <el-form-item label="" prop="">
                  <el-button type="primary" @click="regetOffVoucherItems">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="margin-top: 10px">
          <!--        show-summary-->
          <!--        :summary-method="summaryMethodOff"-->
          <el-table
            ref="tableOffRecords"
            :cell-style="{ padding: '0px', fontSize: '12px' }"
            :header-cell-style="tableHeaderCellStyle"
            :close-on-click-modal="false"
            :data="offRecordsData"
            :border="true"
            style="width: 100%"
            show-summary
            :summary-method="summaryMethodOff"
            @selection-change="handleOffRecordsSelectionChange"
            :row-class-name="rowClassName"
          >
            <el-table-column fixed="left" type="selection" width="50"> </el-table-column>
            <el-table-column type="index" width="40" style="text-align: center"> </el-table-column>
            <el-table-column prop="voucherDate" label="凭证日期" width="120" style="padding: 0">
              <template slot-scope="{ row }">
                <span>{{ row.voucherDate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="descr" label="摘要" width="200" style="padding: 0">
              <template slot-scope="{ row }">
                <span>{{ row.descr }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="accountCode" label="科目名称" width="240" style="padding: 0">
              <template slot-scope="{ row }">
                <span>
                  {{
                    row.accountCode +
                    " " +
                    row.accountFullName +
                    (row.isEmpl === 1 && row.emplName ? "/" + row.emplName : "") +
                    (row.isDept === 1 && row.deptName ? "/" + row.deptName : "") +
                    (row.isCorp === 1 && row.corpShortName ? "/" + row.corpShortName : "") +
                    (row.isItem === 1 ? "/" + row.itemClassify + "-" + (row.itemName ? row.itemName : "") : "")
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="dc" label="借贷" width="40px" style="padding: 0">
              <template slot-scope="{ row }">
                <span>{{ row.dc === "C" ? "借" : "贷" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="本币金额">
              <el-table-column label="借方">
                <el-table-column prop="amountDr" label="金额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountDr) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountDrOffCurrent" label="本次可核销" width="120px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <el-input-number
                      v-if="subjectRow.dc === 'C' && row.amountDrBlc !== '0.00'"
                      style="width: 100%"
                      v-model="row.amountDrOffCurrent"
                      size="small"
                      autocomplete="off"
                      :disabled="form.voucherStatus == 1"
                      placeholder="请输入借方"
                      :precision="2"
                      @change="offAmountBlur(row, 'D')"
                      :controls="false"
                    >
                    </el-input-number>
                    <span v-if="subjectRow.dc === 'D' || row.amountDr === '0.00'">{{ displayAmt(row.amountDrOff) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountDrBlc" label="核销余额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountDrBlc) }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="货方">
                <el-table-column prop="amountCr" label="金额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountCr) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountCrOffCurrent" label="本次可核销" width="120px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <el-input-number
                      v-if="subjectRow.dc !== 'C' && row.amountCrBlc !== '0.00'"
                      style="width: 100%"
                      v-model="row.amountCrOffCurrent"
                      size="small"
                      autocomplete="off"
                      :disabled="form.voucherStatus == 1"
                      placeholder="请输入货方"
                      :precision="2"
                      @change="offAmountBlur(row, 'C')"
                      :controls="false"
                    >
                    </el-input-number>
                    <span v-if="subjectRow.dc === 'C' || row.amountCrBlc === '0.00'">{{ displayAmt(row.amountCrOff) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountCrBlc" label="核销余额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountCrBlc) }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column label="外币金额">
              <el-table-column prop="curCode" label="币种" width="50px" align="center"> </el-table-column>
              <el-table-column prop="exrate" label="汇率" width="80px" style="text-align: right">
                <template slot-scope="{ row }">
                  <span>{{ row.exrate ? Number(row.exrate).toFixed(4) : "" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="借方">
                <el-table-column prop="amountDrUsd" label="金额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountDrUsd) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountDrUsdOffCurrent" label="本次可核销" width="120px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <el-input-number
                      v-if="subjectRow.dc === 'C' && row.amountDrUsdBlc !== '0.00'"
                      style="width: 100%; text-align: right"
                      v-model="row.amountDrUsdOffCurrent"
                      size="small"
                      autocomplete="off"
                      :disabled="form.voucherStatus == 1 || row.curCode == 'CNY'"
                      clearable
                      placeholder="请输入借方"
                      :precision="2"
                      @change="offAmountUSDBlur(row, 'Dusd')"
                      :controls="false"
                    >
                    </el-input-number>
                    <span v-if="subjectRow.dc === 'D' || row.amountDrUsdBlc === '0.00'">{{ displayAmt(row.amountDrUsdOff) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountDrUsdBlc" label="核销余额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountDrUsdBlc) }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="货方">
                <el-table-column prop="amountCrUsd" label="金额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountCrUsd) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountCrUsdOffCurrent" label="金额" width="120px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <el-input-number
                      v-if="subjectRow.dc !== 'C' && row.amountCrUsdBlc !== '0.00'"
                      style="width: 100%"
                      v-model="row.amountCrUsdOffCurrent"
                      size="small"
                      autocomplete="off"
                      :disabled="form.voucherStatus == 1 || row.curCode == 'CNY'"
                      clearable
                      placeholder="请输入货方"
                      :precision="2"
                      @change="offAmountUSDBlur(row, 'Cusd')"
                      :controls="false"
                    >
                    </el-input-number>
                    <span v-if="subjectRow.dc === 'C' || row.amountCrUsdBlc === '0.00'">{{ displayAmt(row.amountCrUsdOff) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amountCrUsdBlc" label="核销余额" width="100px" style="text-align: right">
                  <template slot-scope="{ row }">
                    <span>{{ displayAmt(row.amountCrUsdBlc) }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="offRecordsVisible = false">取 消</el-button>
          <el-button type="primary" @click="offRecordsDeterminefun">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dicSelect from "@/components/dicSelect/main";
import dateRange from "@/components/dateRange/main.vue";
import pickedData from "./components/pickedData.vue";
import fromtableDetails from "./components/fromtableDetails.vue";
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { dateFormat } from "@/util/date";
import {
  finstlbillsConfirmSettlement,
  finstlbillsDetail,
  finstlbillsRevokeSettlement,
  finstlbillsSubmit,
  revokeSettlementApprove,
  confirmOffset,
  revokeOffset,
  finInvoicesApprove,
  revokeFinInvoicesApprove,
  agreementListAll,
  finstlbillslistAccBillByCorp,
  voucherRemove,
  finstlbillsGenerateVoucher,
  finstlbillsSubmitVouchers,
} from "@/api/iosBasicData/finstlbills";
import { accountsDetail } from "@/api/iosBasicData/accounts";
import { getOffVoucherItems } from "@/api/iosBasicData/finvouchers";
import { generateFinStlBills } from "@/api/iosBasicData/fininvoices";
import { confirmWriteOff, revokeWriteOff } from "@/api/iosBasicData/writeOff.js";
import { getListAllDetail } from "@/api/iosBasicData/cashier.js";
import { getWorkDicts } from "@/api/system/dictbiz";
import { getDeptLazyTree } from "@/api/system/dept";
import { getBcorpsList } from "@/api/iosBasicData/bcorps";
import { selectEmpls } from "@/api/approval/processConfig";
import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
import businessReports from "@/components/iosbasic-data/businessReportsTS.vue";
import reports from "@/components/iosbasic-data/reportsTS.vue";
import _ from "lodash";
export default {
  name: "detailsPage",
  data() {
    return {
      show: true,
      showSpan: false,
      canEditVoucher: false, // 凭证是否可以编辑
      handleSelectionData2: [], // 分录多选的数据
      removedFinvouchersitems: [],
      voucherTypeData: [], // 凭证字数据
      auxiliaryVisible: false, // 辅助核算弹窗
      offRecordsVisible: false, // 预收预付核销弹窗
      offRecordsData: [], // 预收预付核销数据
      offRecordsSelectionData: [],
      subjectRowOff: {}, // 核销科目弹窗的显示数据
      subjectRow: {}, // 科目弹窗的显示数据
      subjectAccount: {}, // 当前选择科目的数据
      corpCnNameData: [], // 客户核算 下拉数据
      deptData: [], // 部门核算 下拉数据
      emplData: [], // 职员核算 下拉数据
      itemData: [], // 项目核算 下拉数据
      editButton: false,
      editDisabled: false,
      activeName: "1",
      form: {},
      optionForm: {
        menuBtn: false,
        span: 5,
        disabled: false,
        labelWidth: 70,
        column: [
          {
            label: "结算单号",
            prop: "billNo",
            placeholder:"系统生成结算单号",
            disabled: true,
          },
          {
            label: "结算单位",
            prop: "corpCnName",
            disabled: true,
          },
          {
            label: "结算日期",
            prop: "billDate",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            disabled: false,
          },
          {
            label: "开户帐号",
            prop: "bankAccountNo",
            disabled: false,
          },
          {
            label: "来源单号",
            prop: "requestNo",
            disabled: true,
            span: 4,
          },
        ],
      },
      optionForm2: {
        menuBtn: false,
        span: 5,
        disabled: false,
        labelWidth: 70,
        column: [
          {
            label: "收/付",
            prop: "dc",
            type: "select",
            dicData: [
              {
                label: "收",
                value: "D",
              },
              {
                label: "付",
                value: "C",
              },
            ],
            disabled: true,
            span: 3,
          },
          {
            label: "币别",
            labelWidth: 40,
            prop: "curCode",
            type: "select",
            dicUrl: "/api/blade-los/bcurrency/page?current=1&size=10&code={{key}}",
            props: {
              label: "code",
              value: "code",
              res: "data.records",
            },
            disabled: true,
            span: 2,
          },
          {
            label: "业务类型",
            prop: "businessTypes",
            type: "select",
            dicData: [
              {
                label: "海运出口",
                value: "SE",
              },
              {
                label: "海运进口",
                value: "SI",
              },
            ],
            filterable: true,
            multiple: true,
            dataType: "string",
            tags: true,
            disabled: true,
          },
          {
            label: "主单号",
            prop: "mblno",
            disabled: true,
          },
          {
            label: "分单号",
            prop: "hblno",
            disabled: true,
          },
          {
            label: "业务编号",
            prop: "businessNo",
            disabled: true,
            span: 4,
          },
          {
            label: "业务日期",
            prop: "businessDate", // businessDate只是插槽值 字段为 businessDateStart businessDateEnd
            disabled: true,
          },
          {
            label: "费用名称",
            prop: "feeCnName",
            type: "select",
            dicUrl: "/api/blade-los/bfees/listAll",
            props: {
              label: "cnName",
              value: "cnName",
            },
            filterable: true,
            multiple: true,
            dataType: "string",
            tags: true,
            disabled: true,
          },
          {
            label: "船名",
            prop: "vesselCnName",
            disabled: true,
          },
          {
            label: "航次",
            prop: "voyageNo",
            disabled: true,
          },
          {
            label: "ACCT NO",
            prop: "accountNo",
            disabled: true,
            span: 4,
          },
        ],
      },
      dcOptions: [
        {
          label: "收",
          value: "D",
        },
        {
          label: "付",
          value: "C",
        },
      ],
      retrievePopupsType: false, // 弹窗开启关闭
      retrievePopupsData: [], // 选择弹窗数据
      retrievePopupsOption: {
        border: true,
        calcHeight: 30,
        tip: false,
        height: 500,
        index: true,
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menuWidth: "60",
        column: [
          {
            label: "客户中文名",
            prop: "cnName",
            overHidden: true,
          },
          {
            label: "客户英文文名",
            prop: "cnEame",
            overHidden: true,
          },
        ],
      },
      roleName: localStorage.getItem("roleName").split(","),
      saberUserInfo: JSON.parse(localStorage.getItem("saber-userInfo")).content, // 当前登录人个人信息
    };
  },
  components: {
    dicSelect,
    pickedData,
    dateRange,
    fromtableDetails,
    SearchQuery,
    TreeSelect,
    businessReports,
    reports,
  },
  props: {
    detailData: Object,
    pageIds: {
      type: Array, // 指定 prop 的类型为 Array
      default: () => [], // 提供一个默认值，这里使用函数形式返回一个空数组
    },
  },
  async created() {
    if (this.detailData && this.detailData.settlementId) {
      this.getSettlement(this.detailData.settlementId, this.detailData.dc, this.detailData.type);
    }
    if (this.detailData && this.detailData.id) {
      this.editButton = true;
      this.editDisabled = true;
      this.optionForm.disabled = true;
      this.optionForm2.disabled = true;
      this.getDetail(this.detailData.id);
    }
    getWorkDicts("voucher_word_los").then((res) => {
      this.voucherTypeData = res.data.data;
    });
  },
  methods: {
    enter() {
      this.showSpan = true;
    },
    leave() {
      this.showSpan = false;
    },
    //凭证代码
    offRecordsDeterminefun() {
      if (!Array.isArray(this.offRecordsData)) {
        this.offRecordsVisible = false;
        return;
      }

      if (this.offRecordsSelectionData.length === 0) {
        return this.$message.warning("请选择至少一条数据");
      }

      let row = this.subjectRow;
      let amt = row.dc === "D" ? Number(row.amountCr) : Number(row.amountDr);
      let usd = row.dc === "D" ? Number(row.amountCrUsd) : Number(row.amountDrUsd);
      let amtOff = 0.0,
        usdOff = 0;
      let rows = [];
      this.offRecordsSelectionData.forEach((item) => {
        let currAmt = 0;
        if (row.dc === "D") {
          currAmt = Number(item.amountCrOffCurrent);
          amtOff = amtOff + currAmt;
          if (item.curCode === "USD") {
            usdOff = usdOff + Number(item.amountCrUsdOffCurrent);
          }
        } else {
          currAmt = Number(item.amountDrOffCurrent);
          amtOff = amtOff + currAmt;
          if (item.curCode === "USD") {
            usdOff = usdOff + Number(item.amountDrUsdOffCurrent);
          }
        }
        currAmt = currAmt > 0.0 ? currAmt.toFixed(2) : "0.00";
        if (currAmt !== "0.00") {
          rows.push(item);
        }
      });

      if (Number(amt.toFixed(2)) < Number(amtOff.toFixed(2))) {
        return this.$message({
          dangerouslyUseHTMLString: true,
          message: "<div>选定核销金额不应该大于应核销金额！</div>",
          type: "warning",
        });
      }

      rows.forEach((item) => {
        let obj = {
          dynUID: this.newGuid().replace(/-/g, ""),
        };
        let flds = "accountId,accountCode,accountCnName,accountEnName,accountFullName,accountLevel,accountProperty,dc,";
        flds += "isArAp,isCorp,isDc,isDept,isEmpl,isForeign,curCode,isQuantity,unitNo,isItem,itemClassify,itemClassifyId,itemId,itemName,";
        flds += "corpId,corpShortName,corpCnName,corpEnName,deptId,deptName,emplId,emplName,exrate";
        flds.split(",").forEach((name) => {
          obj[name] = item[name];
        });
        obj.descr = row.descr;
        if (row.dc === "D") {
          obj.amountDr = item.amountCrOffCurrent;
          obj.amountCr = 0.0;
          if (item.curCode === "USD") {
            obj.amountDrUsd = item.amountCrUsdOffCurrent;
            obj.amountCrUsd = 0.0;
          }
        } else {
          obj.amountCr = item.amountDrOffCurrent;
          obj.amountDr = 0.0;
          if (item.curCode === "USD") {
            obj.amountCrUsd = item.amountDrUsdOffCurrent;
            obj.amountDrUsd = 0.0;
          }
        }
        obj.isOff = 1;
        obj.offSrcItemId = item.id;
        obj.offVouItemId = row.id;
        if (!Array.isArray(row.offVouItems)) row.offVouItems = [];
        row.offVouItems.push(obj);

        this.form.finStlBillsVoucherItemsList.push(obj);
      });

      this.offRecordsVisible = false;
    },
    handleClose(done) {
      done();
    },
    corpChange2(value, name) {
      let found = false;
      // 客户名称客户名称
      if (name == "corpCnName") {
        for (let item of this.corpCnNameData) {
          if (item.cnName == value) {
            found = true;
            this.$set(this.subjectRow, "corpEnName", item.enName);
            this.$set(this.subjectRow, "corpCnName", item.cnName);
            this.$set(this.subjectRow, "corpShortName", item.shortName);
            this.$set(this.subjectRow, "corpId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRow, "corpEnName", "");
          this.$set(this.subjectRow, "corpCnName", "");
          this.$set(this.subjectRow, "corpShortName", "");
          this.$set(this.subjectRow, "corpId", 0);
        }
      }
      // 核算
      else if (name == "deptName") {
        for (let item of this.deptData) {
          if (item.title == value) {
            found = true;
            this.$set(this.subjectRow, "deptName", item.title);
            this.$set(this.subjectRow, "deptId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRow, "deptName", "");
          this.$set(this.subjectRow, "deptId", 0);
        }
      }
      // 职员
      else if (name == "emplName") {
        for (let item of this.emplData) {
          if (item.name == value) {
            found = true;
            this.$set(this.subjectRow, "emplName", item.name);
            this.$set(this.subjectRow, "emplId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRow, "emplName", "");
          this.$set(this.subjectRow, "emplId", 0);
        }
      }
      // 项目核算
      else if (name == "itemName") {
        for (let item of this.itemData) {
          if (item.cnName == value) {
            found = true;
            this.$set(this.subjectRow, "itemName", item.cnName);
            this.$set(this.subjectRow, "itemId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRow, "itemName", "");
          this.$set(this.subjectRow, "itemId", 0);
        }
      } else if (name == "voucherType") {
        this.$set(this.form, name, value);
        for (let item of this.voucherTypeData) {
          if (item.dictKey == value) {
            found = true;
            this.$set(this.form, "voucherTypeName", item.dictValue + "凭证");
          }
        }
        if (!found) {
          this.$set(this.subjectRow, "voucherTypeName", "");
        }
      } else if (name == "voucherSource") {
        this.$set(this.form, name, value);
      }
    },
    corpChangeOff(value, name) {
      let found = false;
      // 客户名称
      if (name == "corpCnName") {
        for (let item of this.corpCnNameData) {
          if (item.cnName == value) {
            found = true;
            this.$set(this.subjectRowOff, "corpEnName", item.enName);
            this.$set(this.subjectRowOff, "corpCnName", item.cnName);
            this.$set(this.subjectRowOff, "corpShortName", item.shortName);
            this.$set(this.subjectRowOff, "corpId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRowOff, "corpEnName", "");
          this.$set(this.subjectRowOff, "corpCnName", "");
          this.$set(this.subjectRowOff, "corpShortName", "");
          this.$set(this.subjectRowOff, "corpId", 0);
        }
      }
      // 核算
      else if (name == "deptName") {
        for (let item of this.deptData) {
          if (item.title == value) {
            found = true;
            this.$set(this.subjectRowOff, "deptName", item.title);
            this.$set(this.subjectRowOff, "deptId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRowOff, "deptName", "");
          this.$set(this.subjectRowOff, "deptId", 0);
        }
      }
      // 职员
      else if (name == "emplName") {
        for (let item of this.emplData) {
          if (item.name == value) {
            found = true;
            this.$set(this.subjectRowOff, "emplName", item.name);
            this.$set(this.subjectRowOff, "emplId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRowOff, "emplName", "");
          this.$set(this.subjectRowOff, "emplId", 0);
        }
      }
      // 项目核算
      else if (name == "itemName") {
        for (let item of this.itemData) {
          if (item.cnName == value) {
            found = true;
            this.$set(this.subjectRowOff, "itemName", item.cnName);
            this.$set(this.subjectRowOff, "itemId", item.id);
          }
        }
        if (!found) {
          this.$set(this.subjectRowOff, "itemName", "");
          this.$set(this.subjectRowOff, "itemId", 0);
        }
      } else if (name == "voucherType") {
        this.$set(this.form, name, value);
        for (let item of this.voucherTypeData) {
          if (item.dictKey == value) {
            found = true;
            this.$set(this.form, "voucherTypeName", item.dictValue + "凭证");
          }
        }
        if (!found) {
          this.$set(this.subjectRowOff, "voucherTypeName", "");
        }
      } else if (name == "voucherSource") {
        this.$set(this.form, name, value);
      }
    },
    bottonSearchfun(name) {
      this.$nextTick(() => {
        if (this.$refs.bcorps.selectionList.length == 0) return;
        this.$refs.bcorps.$refs.crud.toggleSelection(); // 先清空所以选择的数据
      });
    },
    // 下拉多选弹窗数据多选回调
    eldialogMultipleChoice(list, name) {
      if (name == "bcorps") {
        let arr = [];
        if (list.length > 1) {
          this.$refs.bcorps.$refs.crud.toggleSelection(); // 先清空所以选择的数据
          arr = [list[list.length - 1]]; // 获取最新点击的数组
          this.$refs.bcorps.$refs.crud.toggleSelection(arr, true); // 把刚点击的数组变成选择状态
        } else {
          arr = list;
        }
        this.$refs.bcorps.selectionList = arr;
      } else {
        console.log("其他的组件");
      }
    },
    // 下拉多选弹窗的确认
    eldialogConfirm(name) {
      if (name == "bcorps") {
        if (this.$refs.bcorps.isShow) {
          console.log("列表确认");
          this.$set(this.subjectRow, "corpCnName", this.$refs.bcorps.selectionList[0].cnName);
          this.$set(this.subjectRow, "corpEnName", this.$refs.bcorps.selectionList[0].enName);
          this.$set(this.subjectRow, "corpId", this.$refs.bcorps.selectionList[0].id);
        } else {
          console.log("详情确认");
          this.$refs.bcorps.$refs.detail.submitForm();
          this.$set(this.subjectRow, "corpCnName", this.$refs.bcorps.$refs.detail.formData.cnName);
          this.$set(this.subjectRow, "corpEnName", this.$refs.bcorps.$refs.detail.formData.enName);
          this.$set(this.subjectRow, "corpId", this.$refs.bcorps.$refs.detail.formData.id);
        }
      } else {
        console.log("其他的组件");
      }
      this.$refs.searchQueryRef.corpVisible = false;
    },
    // 下拉多选弹窗的确认
    eldialogConfirmOff(name) {
      if (name == "bcorps") {
        if (this.$refs.bcorps.isShow) {
          console.log("列表确认");
          this.$set(this.subjectRowOff, "corpCnName", this.$refs.bcorps.selectionList[0].cnName);
          this.$set(this.subjectRowOff, "corpEnName", this.$refs.bcorps.selectionList[0].enName);
          this.$set(this.subjectRowOff, "corpId", this.$refs.bcorps.selectionList[0].id);
        } else {
          console.log("详情确认");
          this.$refs.bcorps.$refs.detail.submitForm();
          this.$set(this.subjectRowOff, "corpCnName", this.$refs.bcorps.$refs.detail.formData.cnName);
          this.$set(this.subjectRowOff, "corpEnName", this.$refs.bcorps.$refs.detail.formData.enName);
          this.$set(this.subjectRowOff, "corpId", this.$refs.bcorps.$refs.detail.formData.id);
        }
      } else {
        console.log("其他的组件");
      }
      this.$refs.searchQueryRef.corpVisible = false;
    },
    fixedAmt(amt, len) {
      let N = Number(amt);
      let S = isNaN(N) ? "0.00" : N.toFixed(2);
      while (S.length < len) {
        S = "_" + S;
      }
      return S;
    },
    displayAmt(amt, len) {
      let N = Number(amt);
      let S = isNaN(N) ? "" : N.toFixed(len ? len : 2);
      let Z = 0;
      return S === Z.toFixed(len ? len : 2) ? "" : S;
    },
    // 表头样式
    tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
      return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff;text-align:center";
    },
    summaryMethodOff(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 2) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // 显示列的统计 金额
        let arr = ["amountDrOffCurrent", "amountCrOffCurrent", "amountDrUsdOffCurrent", "amountCrUsdOffCurrent"];
        // 判断是否有这个数据
        if (arr.indexOf(column.property) != -1) {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = this.displayAmt(sums[index]); // 把合计的参数保留两位小数
            // sums[index] += " 元";
          } else {
            sums[index] = " ";
          }
        }
      });
      return sums;
    },
    rowClassName({ row, rowIndex }) {
      let rowName = "",
        findRow = this.handleSelectionData.find((c) => c.rowIndex === row.rowIndex);
      if (findRow) {
        rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
      }
      return rowName; //也可以再加上其他类名 如果有需求的话
    },
    // 表格多选数据
    handleOffRecordsSelectionChange(list) {
      this.offRecordsSelectionData = list;
    },
    // 辅助核算弹窗确认按钮
    auxiliaryDeterminefun() {
      this.auxiliaryVisible = false;
    },
    // 生成凭证
    generateVoucherfun() {
      this.$confirm("确定要生成凭证?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.oneClickSave(() => {
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)",
          });
          finstlbillsGenerateVoucher({ id: this.form.id })
            .then((res) => {
              this.$message.success("操作成功");
              this.finstlbillsDetailfun(this.form.id);
            })
            .finally(() => {
              loading.close();
            });
        });
        /*
        this.pageLoading = true;
        this.form.businessDateStart = this.form.businessDateStart ? this.form.businessDateStart.slice(0, 10) + " 00:00:00" : null; // 财务开始日期
        this.form.businessDateEnd = this.form.businessDateEnd ? this.form.businessDateEnd.slice(0, 10) + " 00:00:00" : null; // 财务开始日期
        this.form.billDate = this.form.billDate ? this.form.billDate.slice(0, 10) + " 00:00:00" : null;
        this.form.auditDateTo = this.form.auditDateTo ? this.form.auditDateTo.slice(0, 10) + " 00:00:00" : null;
        this.form.voucherDate = this.form.voucherDate ? this.form.voucherDate.slice(0, 10) + " 00:00:00" : null;

        if(Array.isArray(this.form.finStlBillsItemsList)){
          this.form.finStlBillsItemsList.forEach((item, index) => {
            item.voucherDate = item.voucherDate ? item.voucherDate.slice(0, 10) + " 00:00:00" : null;
          })
        }

        if(Array.isArray(this.form.finStlBillsVoucherItemsList)){
          this.form.finStlBillsVoucherItemsList.forEach((item, index) => {
            item.voucherDate = item.voucherDate ? item.voucherDate.slice(0, 10) + " 00:00:00" : null;
          })
        }

        finstlbillsGenerateVoucher(this.form)
          .then((res) => {
            this.$message.success("操作成功");
            this.finstlbillsDetailfun(this.form.id);
          })
          .finally(() => {
            this.pageLoading = false;
          });
         */
      });
    },
    // 保存结算凭证模板
    finstlbillsSubmitVouchersfun(callback) {
      if (!this.form.id) {
        return this.$message({
          dangerouslyUseHTMLString: true,
          message: "请首选保存结算单！",
          type: "warning",
        });
      }

      if (this.form.estimatedTime) {
        this.form.estimatedTime = this.form.estimatedTime + " 00:00:00";
      }
      this.form.billNoFormat = "STL";
      this.form.businessTypeCode = "STL";
      this.form.businessType = "STL"; // 结算单
      this.form.businessDateStart = this.form.businessDateStart ? this.form.businessDateStart.slice(0, 10) + " 00:00:00" : null; // 财务开始日期
      this.form.businessDateEnd = this.form.businessDateEnd ? this.form.businessDateEnd.slice(0, 10) + " 00:00:00" : null; // 财务开始日期
      this.form.billDate = this.form.billDate ? this.form.billDate.slice(0, 10) + " 00:00:00" : null;
      this.form.auditDateTo = this.form.auditDateTo ? this.form.auditDateTo.slice(0, 10) + " 00:00:00" : null;
      this.form.voucherDate = this.form.voucherDate ? this.form.voucherDate.slice(0, 10) + " 00:00:00" : null;

      if (Array.isArray(this.form.finStlBillsItemsList)) {
        this.form.finStlBillsItemsList.forEach((item, index) => {
          item.voucherDate = item.voucherDate ? item.voucherDate.slice(0, 10) + " 00:00:00" : null;
        });
      }

      let msgs = [];
      let amountDrSum = 0;
      let amountCrSum = 0;
      let index = 0;
      if (this.form.finStlBillsVoucherItemsList && this.form.finStlBillsVoucherItemsList.length) {
        for (let item of this.form.finStlBillsVoucherItemsList) {
          index++;
          let amtDr = this.forceNumber(item.amountDr);
          let amtCr = this.forceNumber(item.amountCr);
          amountDrSum += amtDr;
          amountCrSum += amtCr;
          let descr = item.descr ? item.descr.trim() : "";
          if (!descr) {
            // 生成凭证时自动填写
            // msgs.push(`第 ${index} 行分录请填写摘要！`);
          } else {
            item.descr = descr;
          }
          if (!item.accountId) {
            msgs.push(`第 ${index} 行分录缺少科目代码！`);
          } else {
            if (item.isCorp === 1 && !item.corpId) {
              msgs.push(`第 ${index} 行分录科目 ${item.accountCode} ${item.accountFullName} 核算客户，请选择客户名称！`);
            }
            if (item.isDept === 1 && !item.deptId) {
              msgs.push(`第 ${index} 行分录科目 ${item.accountCode} ${item.accountFullName} 核算部门，请选择部门名称！`);
            }
            if (item.isEmpl === 1 && !item.emplId) {
              msgs.push(`第 ${index} 行分录科目 ${item.accountCode} ${item.accountFullName} 核算职员，请选择职员名称！`);
            }
            // if (item.isItem === 1 && !item.itemId) {
            //   msgs.push(`第 ${index} 行分录科目 ${item.accountCode} ${item.accountFullName} 核算项目，请选择项目名称！`);
            // }
            if (amtDr.toFixed(2) === "0.00" && amtCr.toFixed(2) === "0.00") {
              msgs.push(`第 ${index} 行分录科目 ${item.accountCode} ${item.accountFullName} 请填写金额！`);
            }
          }
        }
        if (amountDrSum !== amountCrSum) {
          msgs.push(`凭证借贷金额不平衡！`);
        }

        if (msgs.length > 0) {
          return this.$message({
            dangerouslyUseHTMLString: true,
            message: msgs.join("<br /><br />"),
            type: "warning",
          });
        }
      }

      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)",
      });
      finstlbillsSubmitVouchers(this.form)
        .then((res) => {
          this.$message.success("操作成功");
          this.$set(this.form, "version", res.data.data.version);
          this.$set(this.form, "finStlBillsVoucherItemsList", res.data.data.finStlBillsVoucherItemsList);

          if (typeof callback === "function") {
            callback();
          }
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },
    forceNumber(n) {
      try {
        let N = parseFloat(n);
        if (isNaN(N)) {
          N = 0.0;
        } else {
          let S = N.toFixed(2);
          N = Number(S);
        }

        return N;
      } catch (e) {
        return 0.0;
      }
    },
    oneClickSave(callback) {
      if (this.form.finStlBillsVoucherItemsList.length < 2) {
        return this.$message.warning("请填写至少凭证两笔分录后再保存！");
      }
      this.finstlbillsSubmitVouchersfun(callback);
    },
    newGuid() {
      let vd = "0123456789abcdefghijklmnopqrstuvwxyz".split("");
      var i = vd,
        o = [],
        s = Math.random,
        n;
      (o[8] = o[13] = o[18] = o[23] = "-"), (o[14] = "4");
      for (var r = 0; r < 36; r++) o[r] || ((n = 0 | (16 * s())), (o[r] = i[19 == r ? (3 & n) | 8 : 15 & n]));
      return o.join("");
    },
    // 添加分录
    addEntryfun() {
      let obj = {
        dynUID: this.newGuid().replace(/-/g, ""),
      };
      console.log(obj);
      if (this.handleSelectionData2.length > 0) {
        obj.descr = this.handleSelectionData2[this.handleSelectionData2.length - 1].descr;
      } else {
        if (this.form.finStlBillsVoucherItemsList.length > 0) {
          obj.descr = this.form.finStlBillsVoucherItemsList[this.form.finStlBillsVoucherItemsList.length - 1].descr;
        }
      }
      this.form.finStlBillsVoucherItemsList.push(obj);
    },
    isARAPRow(row) {
      let code = row && row.accountCode ? row.accountCode : "";
      return code.startsWith("1141") || code.startsWith("2121");
    },
    // 删除分录
    deleteEntryfun() {
      if (this.handleSelectionData2.length === 0) {
        return this.$message.warning("请选择至少一条数据");
      }

      let multiList = this.handleSelectionData2.filter((r) => !this.isARAPRow(r));
      if (multiList.length === 0) {
        return this.$message.warning("请选择至少一条数据");
      }
      let offVouItems = [];
      let arr = this.form.finStlBillsVoucherItemsList;
      // 获取有id 的数据
      const itemsWithId = multiList.filter((item) => item.id);
      let arrIds = itemsWithId.map((item) => item.id); // 获取id 数据
      console.log(arrIds);
      // 把选中的删除掉
      multiList.forEach((item) => {
        offVouItems = offVouItems.concat(Array.isArray(item.offVouItems) ? item.offVouItems : []);

        if (!item.hasOwnProperty("id")) {
          for (let index in arr) {
            if (JSON.stringify(item) == JSON.stringify(arr[index])) {
              arr.splice(Number(index), 1);
            }
          }
        }
      });
      // 有id 的处理
      if (itemsWithId.length != 0) {
        voucherRemove(arrIds.join(",")).then((res) => {
          arrIds.forEach((id) => {
            let i = this.form.finStlBillsVoucherItemsList.findIndex((item) => item.id === id);
            if (i >= 0) {
              let row = this.form.finStlBillsVoucherItemsList[i];
              this.$set(row, "changeMode", "d");
              this.removedFinvouchersitems.push();
              this.form.finStlBillsVoucherItemsList.splice(i, 1);
            }
          });
          this.$message.success("删除成功");
        });
      }
      offVouItems.forEach((item) => {
        let rowIdx = this.form.finStlBillsVoucherItemsList.indexOf(item);
        if (rowIdx >= 0) {
          if (item.id) {
            this.$set(item, "changeMode", item.changeMode === "d" ? "u" : "d");
            // this.finvouchersitemsRemovefun(row.id);
            this.removedFinvouchersitems.push(item);
            this.form.finStlBillsVoucherItemsList.splice(rowIdx, 1);
          } else this.form.finStlBillsVoucherItemsList.splice(rowIdx, 1);
        }
      });
    },
    // 下拉回调
    corpChange(value, name) {
      this.$set(this.form, name, value);
    },
    handleSelectionChange2(list) {
      this.handleSelectionData2 = list;
    },
    // 行添加
    addRowsfun(row, index) {
      //第二个参数为0的时候，是可以添加参数的，1的时候是删除
      let obj = {
        dynUID: this.newGuid().replace(/-/g, ""),
      };
      this.form.finStlBillsVoucherItemsList.splice(index, 0, obj);
    },
    // 行删除
    deletefun(row, index) {
      let offVouItems = Array.isArray(row.offVouItems) ? row.offVouItems : [];

      if (row.id) {
        this.$set(row, "changeMode", row.changeMode === "d" ? "u" : "d");
        // this.finvouchersitemsRemovefun(row.id);
        this.removedFinvouchersitems.push(row);
        voucherRemove(row.id).then((res) => {
          this.form.finStlBillsVoucherItemsList.splice(index, 1);
        });
      } else {
        this.form.finStlBillsVoucherItemsList.splice(index, 1);
      }

      offVouItems.forEach((item) => {
        let rowIdx = this.form.finStlBillsVoucherItemsList.indexOf(item);
        if (rowIdx >= 0) {
          if (item.id) {
            this.$set(item, "changeMode", item.changeMode === "d" ? "u" : "d");
            // this.finvouchersitemsRemovefun(row.id);
            this.removedFinvouchersitems.push(item);
            this.form.finStlBillsVoucherItemsList.splice(rowIdx, 1);
          } else this.form.finStlBillsVoucherItemsList.splice(rowIdx, 1);
        }
      });
    },
    // 科目编辑打开辅助核算弹窗
    auxiliaryAccountingfun(row) {
      // 获取状态
      accountsDetail(row.accountId).then((res) => {
        this.subjectAccount = res.data.data;
        this.subjectRow = row;
        // 如果三个都没有勾选 直接不自动打开弹窗
        if (res.data.data.isCorp || res.data.data.isDept || res.data.data.isEmpl || res.data.data.isItem) {
          this.auxiliaryVisible = true;
        }
      });
    },
    // 获取核销记录
    showOffRecordsfun(row) {
      // 获取状态
      this.subjectRowOff = JSON.parse(JSON.stringify(row));
      getOffVoucherItems(this.subjectRowOff).then((res) => {
        this.offRecordsSelectionData = [];
        this.offRecordsData = Array.isArray(res.data.data) ? res.data.data : [];
        this.subjectRow = row;
        this.offRecordsVisible = true;
      });
    },
    // 借方/贷方 本币的计算
    offAmountBlur(row, name) {
      if (name === "D") {
        this.$set(row, "amountCrOffCurrent", 0);
      }
      if (name === "C") {
        this.$set(row, "amountDrOffCurrent", 0);
      }

      let a = row.amountCrOffCurrent ? Number(row.amountCrOffCurrent) : 0;
      this.$set(row, "amountCrOffCurrent", a > Number(row.amountCrBlc) ? Number(row.amountCrBlc) : a);
      a = row.amountDrOff ? Number(row.amountDrOff) : 0;
      this.$set(row, "amountDrOffCurrent", a > Number(row.amountDrBlc) ? Number(row.amountDrBlc) : a);

      if (row.curCode === "USD") {
        this.$set(row, "exrate", row.exrate ? Number(row.exrate) : 1);
        this.$set(row, "amountCrUsdOffCurrent", (row.amountCrOffCurrent / row.exrate).toFixed(2));
        this.$set(row, "amountDrUsdOffCurrent", (row.amountDrOffCurrent / row.exrate).toFixed(2));
      }
    },
    // 外币的计算
    offAmountUSDBlur(row, name) {
      if (name === "Dusd") {
        this.$set(row, "amountCrUsdOffCurrent", 0);
      }
      if (name === "Cusd") {
        this.$set(row, "amountDrUsdOffCurrent", 0);
      }
      let a = row.amountCrUsdOffCurrent ? Number(row.amountCrUsdOffCurrent) : 0;
      this.$set(row, "amountCrUsdOffCurrent", a > Number(row.amountCrUsdBlc) ? Number(row.amountCrUsdBlc) : a);
      a = row.amountDrUsdOffCurrent ? Number(row.amountDrUsdOffCurrent) : 0;
      this.$set(row, "amountDrUsdOffCurrent", a > Number(row.amountDrUsdBlc) ? Number(row.amountDrUsdBlc) : a);

      this.$set(row, "exrate", row.exrate ? Number(row.exrate) : 1);
      this.$set(row, "amountCrOffCurrent", (row.amountCrUsdOffCurrent * row.exrate).toFixed(2));
      this.$set(row, "amountDrOffCurrent", (row.amountDrUsdOffCurrent * row.exrate).toFixed(2));
    },
    // 客户
    getBcorpsListfun(cnName) {
      getBcorpsList(1, 10, { cnName }).then((res) => {
        this.corpCnNameData = res.data.data.records;
      });
    },
    // 部门
    getDeptTreefun() {
      getDeptLazyTree(JSON.parse(localStorage.getItem("saber-userInfo")).content.dept_pid.split(",")[0]).then((res) => {
        this.deptData = res.data.data;
      });
    },
    // 职员
    userGetListfun(account = undefined, type = false) {
      // userGetList(1, 10, { account }, JSON.parse(localStorage.getItem('saber-userInfo')).content.dept_pid.split(',')[0]).then(res => {
      //     this.emplData = res.data.data.records
      // })
      selectEmpls(1, 10, { cname: account, whetherEmployedOrNot: 1 }).then((res) => {
        if (Array.isArray(res.data.data.records)) {
          res.data.data.records.forEach((item) => {
            item.name = item.cname;
          });
        }
        this.emplData = res.data.data.records;
      });
    },
    lastPage() {
      if (this.pageIds.length) {
        const index = this.pageIds.indexOf(this.form.id);
        if (index == 0) {
          return this.$message.error("没有上一票了");
        }
        const lastIndex = index - 1;
        this.getDetail(this.pageIds[lastIndex]);
      }
    },
    nextPage() {
      if (this.pageIds.length) {
        const index = this.pageIds.indexOf(this.form.id);
        if (this.pageIds[this.pageIds.length - 1] == this.form.id) {
          return this.$message.error("没有下一票了");
        }
        const nextIndex = index + 1;
        this.getDetail(this.pageIds[nextIndex]);
      }
    },
    inEdit() {
      this.editButton = false;
      //管理员 允许修改他人业务 本人单据可以编辑
      if (this.roleName.includes("admin") || this.roleName.includes("允许修改他人业务") || this.saberUserInfo.user_id == this.form.createUser) {
        if (this.form.finStlBillsItemsList.filter((item) => item.isChecked == 1).length == 0) {
          this.editDisabled = false;
          this.optionForm.disabled = false;
          this.optionForm2.disabled = false;
        }
      }
    },
    dicChange(name, row) {
      if (name == "bankAccountNo") {
        if (row) {
          this.form.bankId = row.id;
          this.form.bankAccountName = row.accountName;
          this.form.bankAccountBank = row.accountBank;
        } else {
          this.form.bankId = null;
          this.form.bankAccountName = null;
          this.form.bankAccountBank = null;
          this.form.bankAccountNo = null;
        }
      }
    },
    async allClick(name) {
      if (name == "确认结算") {
        if (this.form.finStlBillsItemsList.length == 0) {
          return this.$message.error("选定数据不能为空");
        }
        this.$confirm("是否确认结算?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let obj = {
            ...this.form,
            billNoFormat: "STL",
            businessTypeCode: "STL",
            businessType: "STL",
            url: "/iosBasicData/financialManagement/finstlbills/index",
            pageLabel: "结算中心(J)",
          };
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)",
          });
          finstlbillsConfirmSettlement(obj)
            .then((res) => {
              this.$message.success("操作成功");
              this.getDetail(this.form.id);
            })
            .finally(() => {
              loading.close();
            });
        });
      }
      if (name == "撤销结算") {
        this.$confirm("确定进行撤销对账操作?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let obj = {
            ...this.form,
            billNoFormat: "STL",
            businessTypeCode: "STL",
            businessType: "STL",
          };
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)",
          });
          finstlbillsRevokeSettlement(obj)
            .then((res) => {
              this.$message.success("操作成功");
              this.getDetail(this.form.id);
            })
            .finally(() => {
              loading.close();
            });
        });
      }
    },
    // application() {

    // },
    update(id, type) {
      this.getDetail(id, type);
    },
    apData(list) {
      this.form.advancePaymentRecordList = list;
      let obj = {
        ...this.form,
        billNoFormat: "HYDZ",
        businessTypeCode: "HYDZ",
        businessType: "CHK",
        url: "/iosBasicData/financialManagement/finstlbills/index",
        pageLabel: "对账中心(J)",
      };
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)",
      });
      confirmWriteOff(obj)
        .then((res) => {
          this.$message.success("操作成功");
          this.getDetail(this.form.id);
        })
        .finally(() => {
          loading.close();
        });
    },
    submit() {
      this.form.finStlBillsItemsList.forEach((item, index) => {
        if (item.currentStlCurCode == "CNY") {
          item.currentStlAmount = item.currentStlAmountRMB;
        } else {
          item.currentStlAmount = item.currentStlAmountUSD;
        }
      });
      let obj = {
        ...this.form,
        billNoFormat: "STL",
        businessTypeCode: "STL",
        businessType: "STL",
      };
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)",
      });
      finstlbillsSubmit(obj)
        .then((res) => {
          this.$message.success("操作成功");
          this.getDetail(res.data.data.id);
        })
        .finally(() => {
          loading.close();
        });
    },
    getSettlement(id, dc, type) {
      let obj = {
        billId: id,
        dc: dc,
        type: type,
      };
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)",
      });
      generateFinStlBills(obj)
        .then((res) => {
          res.data.data.finStlBillsItemsList.forEach((item) => {
            if (item.curCode == "CNY") {
              this.$set(item, "currentInvoiceAmountRMB", item.currentInvoiceAmount);
              this.$set(item, "amountRMB", item.amount);
              this.$set(item, "amountNetRMB", item.amountNet);
              this.$set(item, "stlTtlAmountRMB", item.stlTtlAmount);
              this.$set(item, "stlTtlAmountNetRMB", item.stlTtlAmountNet);
              this.$set(item, "currentStlAmountNetRMB", item.currentStlAmountNet);
              this.$set(item, "currentStlAmountRMB", Number(item.currentStlAmount ? item.currentStlAmount : 0));
              this.$set(item, "currentStlAmountUSD", Number(0));
            } else {
              this.$set(item, "currentInvoiceAmountUSD", item.currentInvoiceAmount);
              this.$set(item, "amountUSD", item.amount);
              this.$set(item, "amountNetUSD", item.amountNet);
              this.$set(item, "stlTtlAmountNetUSD", item.stlTtlAmountNet);
              this.$set(item, "stlTtlAmountUSD", item.stlTtlAmount);
              this.$set(item, "currentStlAmountNetUSD", item.currentStlAmountNet);
              this.$set(item, "currentStlAmountUSD", Number(item.currentStlAmount ? item.currentStlAmount : 0));
              this.$set(item, "currentStlAmountRMB", Number(0));
            }
          });
          this.form = res.data.data;
          setTimeout(() => {
            this.$refs.pickedData.refreshData();
          }, 100);
        })
        .finally(() => {
          loading.close();
        });
    },
    getDetail(id, type) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)",
      });
      finstlbillsDetail(id)
        .then((res) => {
          res.data.data.finStlBillsItemsList.forEach((item) => {
            if (item.curCode == "CNY") {
              this.$set(item, "currentInvoiceAmountRMB", item.currentInvoiceAmount);
              this.$set(item, "amountRMB", item.amount);
              this.$set(item, "amountNetRMB", item.amountNet);
              this.$set(item, "stlTtlAmountRMB", item.stlTtlAmount);
              this.$set(item, "stlTtlAmountNetRMB", item.stlTtlAmountNet);
              this.$set(item, "currentStlAmountNetRMB", item.currentStlAmountNet);
              this.$set(item, "currentStlAmountRMB", Number(item.currentStlAmount ? item.currentStlAmount : 0));
              this.$set(item, "currentStlAmountUSD", Number(0));
            } else {
              this.$set(item, "currentInvoiceAmountUSD", item.currentInvoiceAmount);
              this.$set(item, "amountUSD", item.amount);
              this.$set(item, "amountNetUSD", item.amountNet);
              this.$set(item, "stlTtlAmountNetUSD", item.stlTtlAmountNet);
              this.$set(item, "stlTtlAmountUSD", item.stlTtlAmount);
              this.$set(item, "currentStlAmountNetUSD", item.currentStlAmountNet);
              this.$set(item, "currentStlAmountUSD", Number(item.currentStlAmount ? item.currentStlAmount : 0));
              this.$set(item, "currentStlAmountRMB", Number(0));
            }
          });
          if (
            this.roleName.includes("admin") ||
            this.roleName.includes("允许修改他人业务") ||
            this.saberUserInfo.user_id == res.data.data.createUser
          ) {
            this.canEditVoucher = res.data.data.id && res.data.data.isCleared == 1 && !res.data.data.voucherNo;
          }

          this.form = res.data.data;
          setTimeout(() => {
            this.$refs.pickedData.refreshData();
          }, 100);
        })
        .finally(() => {
          loading.close();
        });
    },
    // 更改表格颜色
    headerClassName(tab) {
      //颜色间隔
      let back = "";
      if (tab.columnIndex >= 0 && tab.column.level === 1) {
        if (tab.columnIndex % 2 === 0) {
          back = "back-one";
        } else if (tab.columnIndex % 2 === 1) {
          back = "back-two";
        }
      }
      return back;
    },
    goBack(type) {
      this.$emit("goBack");
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__error {
  display: none !important;
}

::v-deep .el-form-item {
  margin-bottom: 2px !important;
}

::v-deep .el-table .cell {
  padding: 0 2px !important;

  .el-form-item {
    margin-bottom: 0px !important;
  }
}

::v-deep .avue-crud .el-table .el-form-item__label {
  left: -1px;
}

// ::v-deep#out-table .back-one {
//     background: #ecf5ff !important;
// }

// ::v-deep#out-table .back-two {
//     background: #ecf5ff !important;
// }

::v-deep #out-table .back-one {
  background: #ecf5ff !important;
  text-align: center;
  padding: 4px 0;
}

::v-deep #out-table .back-two {
  background: #ecf5ff !important;
  text-align: center;
  padding: 4px 0;
}

::v-deep .el-table--small td,
.el-table--small th {
  padding: 2px !important;
}

::v-deep .box-card .el-card__body {
  padding: 2px !important;
}
::v-deep .form2 .el-collapse-item__wrap {
  background-color: #ecf5ff !important;
}
::v-deep .box-tabs .el-tabs__item {
  height: 30px;
  line-height: 30px;
}
::v-deep .box-tabs .el-tabs__content {
  padding: 2px !important;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266;
}
.disabledBox {
  display: flex;
  align-items: center;
}

.meetSize {
  font-size: 16px;
  color: #54bcbd;
}
.customer-title {
  position: absolute;
  top: 12px;
  z-index: 1000;
  left: calc(50% - 175px);
  color: #67c23a;
}
</style>