manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/expense/expense.vue

<template>
  <section>
    <div class="sidebars" ref="sidebars" style="width: 200px;display: block;background: #fff;">
      <div ref="abbisd" style="width: 100%;overflow: hidden;">
        <h3><i class="iconfont firerock-iconbaoxiao" style="padding-right: 10px"></i>{{ $t('expensereimbursementmodule')
        }}</h3>
        <el-divider></el-divider>
        <el-col :span="12">
          <el-menu default-active="1-1" class="el-menu-vertical-demo" @select="staffs" background-color="#ffffff"
            text-color="#666666" active-text-color="#20A0FF" style="width:100%">
            <el-submenu index="1">
              <template slot="title">
                <i class="iconfont firerock-icontianbao"></i>
                <span>{{ $t('fillinthestaffexpenses') }}</span>
              </template>
              <el-menu-item index="1-1">
                <p> {{ $t('expenses') }}</p>
              </el-menu-item>
              <!-- <el-menu-item index="1-2"><p @click="ssl(1)">{{ $t('travelexpensess') }}</p></el-menu-item>
                  <el-menu-item index="1-3"><p @click="ssl(2)">{{ $t('outsourcingcostshouldbereported') }}</p></el-menu-item> -->
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="iconfont firerock-iconbaoxiaodan"></i>
                <span>{{ permissions.costAll ? $t('listofreimbursementvouchers') : $t('myexpensevoucher') }}</span>
              </template>
              <el-menu-item index="2-1">
                <p @click="bills(false)">{{ $t('documentlist') }}</p>
              </el-menu-item>
              <el-menu-item index="2-2">
                <p @click="bills(true)">{{ $t('documentreview') }}</p>
              </el-menu-item>
            </el-submenu>
            <!-- <el-menu-item index="3" @select="bills" @click="bills(false)" v-if="user.role == 0">
                  <i class="iconfont firerock-iconbaoxiaodan"></i>
                  <span slot="title">{{user.role == 0?"我的报销凭证":"报销凭证列表"}}</span>
                </el-menu-item> -->
          </el-menu>
        </el-col>
      </div>
      <div class="side" @click="side" ref="sid" style="left: 200px">
        <div class="spans" ref="side" style="left: -19px;"><i ref="sideI" class="el-icon-arrow-left"></i></div>
      </div>
    </div>
    <!-- 侧边栏点击事件 -->
    <!-- <div class="side" @click="side" ref="sid" style="left: 430px">
        <div class="spans" ref="side" style="left: -19px;"><i  ref="sideI" class="el-icon-arrow-left"></i></div>
      </div> -->
    <!-- 内容主体区域 -->
    <div class="contents">
      <div v-if="!displayTable" class="headine" ref="headine">
        <!-- <h3 ref="headHe" style="padding-left: 220px">{{shuz[ins]}}</h3> -->
        <h3 ref="headHe" style="padding-left: 220px">费用填报</h3>
        <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="submits" size="mini">{{
          $t('btn.submit') }}</el-button></p>
        <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="submitUpload" size="mini">{{
          $t('batchupload') }}</el-button></p>
        <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="customTypeOp" size="mini"
            v-if="permissions.costAll">{{ $t('expensetypemanagement') }}</el-button></p>
        <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="expenseTypeOp" size="mini"
            v-if="permissions.costAll">费用主类型管理</el-button></p>
      </div>
      <!-- 上面部分 -->
      <div ref="staff" style="margin: 20px 20px 0 220px; width: 81.5%">
        <div class="staff" v-if="!displayTable">
          <!-- 公共 -->
          <div class="public">
            <el-form :model="addForm" ref="mainAddForm" label-width="100px" :rules="addFormRules">
              <!-- <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
              <!-- 报销人 -->
              <el-form-item :label="$t('peopleconcerned')" prop="ownerId">
                <!--普通员工只能自己填报自己的 -->
                <el-select v-if="user.userNameNeedTranslate != '1'" v-model="addForm.ownerId"
                  :placeholder="$t('pleaseselecttheapplicant')" style="width: 150px" :disabled="!permissions.costAudit"
                  filterable="true">
                  <span v-for="(item, index) in users" :key="index">
                    <el-option :label="item.name" :value="item.id"></el-option>
                  </span>
                </el-select>

                <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'150'" :distinction="'1'"
                  :subject="users" :disabled="!permissions.costAudit" :subjectId="addForm.ownerId" ref="selectCat"
                  @selectCal="selectCal"></selectCat>

              </el-form-item>
              <!-- 填报日期 -->
              <el-form-item :label="$t('fillinthedate')" style="position: relative;top: 38px;">
                <el-col :span="11">
                  <el-date-picker type="date" :placeholder="$t('optiondate')" v-model="addForm.createDate"
                    value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
                </el-col>
              </el-form-item>
              <!-- 发票张数 -->
              <el-form-item :label="$t('invoicenumber')" v-if="this.user.timeType.easyExpense == 0">
                <el-input v-model="addForm.ticketNum" style="width: 150px"></el-input>
              </el-form-item>
              <!-- 费用主类型 -->
              <el-form-item :label="'费用主类型'">
                <el-select v-model="expenseMainTypeValue" style="width: 150px" @change="this.getExpList">
                  <el-option v-for="item in expenseMainTypes" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>

              <!-- 备注 -->
              <el-form-item :label="$t('bei-zhu')" style="display: block; width: 70%; float: left;">
                <el-input type="textarea" v-model="addForm.remark" :autosize="{ minRows: 2, maxRows: 2 }"
                  maxlength="100"></el-input>
              </el-form-item>
              <!-- 总费用 -->
              <!-- <div style="float: left; line-height: 55px;margin-left:20px">总费用 <el-link disabled v-model="addForm.totalAmount">{{addForm.totalAmount}}</el-link> 元</div> -->
            </el-form>
          </div>
          <!-- 按钮 -->

          <div class="pu_button">
            <span v-if="totalCost <= 0" style="color:#606266;">{{ $t('totalcostos') }} {{ totalCost }} {{ $t('yuan')
            }}</span>
            <span v-else style="color:#606266;">{{ $t('totalcostos') }} ￥{{ totalCost | numberToCurrency }} {{ $t('yuan')
            }}</span>
            <span class="pu_bu_x" style="margin-left:10px;" @click="addxz"> <i class="el-icon-circle-plus-outline"></i> {{
              $t('newinvoice') }}</span>
          </div>

          <!-- 表格 -->
          <div class="pu_table">
            <el-table :data="invoiceList" border style="width: 100%;height:100%" height="386px" @row-dblclick="dbclick">
              <el-table-column prop="projectName" :label="$t('subordinatetotheproject')" width="180">
                <template slot-scope="scope">
                  <el-select size="small" v-model="scope.row.projectId" :placeholder="$t('other.project')"
                    style="width: 150px" filterable popper-class="projectSelectPopperClass">
                    <el-option v-for="(item, index) in projectList" :key="index"
                      :label="item.projectName + item.projectCode" :value="item.id" @click="ok(item)">
                      <span style="float: left;color: #8492a6; font-size: 13px">{{ item.projectCode }}</span>
                      <span style="float: right;">{{ item.projectName }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="happenDate" :label="$t('forthedate')" width="170px">
                <template slot-scope="scope">
                  <el-date-picker size="small" v-model="scope.row.happenDate" type="date" style=" width: 145px"
                    value-format="yyyy-MM-dd" :placeholder="$t('optiondate')">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column :label="$t('invoices')" width="175px" v-if="this.user.timeType.easyExpense == 0">
                <template slot-scope="scope">
                  <el-select size="small" v-model="scope.row.invoiceType" :placeholder="$t('pleaseselectthetypeoffee')"
                    style="width: 150px;">
                    <el-option :label="$t('vATspecialinvoice')" value="0"></el-option>
                    <el-option :label="$t('vATgeneralinvoice')" value="1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column :label="$t('costtype')" width="175px">
                <template slot-scope="scope">
                  <el-select size="small" v-model="scope.row.expenseType" :placeholder="$t('costtype')"
                    style="width: 150px">
                    <el-option v-for="(item, index) in expenseTypeList" :key="index" :label="item.typeName"
                      :value="item.typeName"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column :label="this.user.timeType.easyExpense == 0 ? $t('amountoffees') : '费用金额'" width="135px">
                <template slot-scope="scope">
                  <el-input size="small" :id="'upam' + scope.$index" v-model="scope.row.amount" @input="zhi(scope.$index)"
                    @change="shiqu(scope.row.amount)" @keyup.native="restrictNumber('upam' + scope.$index)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="invoiceNo" :label="$t('invoiceno')" width="135px"
                v-if="this.user.timeType.easyExpense == 0">
                <template slot-scope="scope">
                  <el-input size="small" v-model.number="scope.row.invoiceNo"></el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('shui-shuai')" width="135px" v-if="this.user.timeType.easyExpense == 0">
                <template slot-scope="scope">
                  <el-input size="small" type="number" v-model="scope.row.taxPercent"
                    @input="zhi(scope.$index)"></el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('taxs')" width="135px" v-if="this.user.timeType.easyExpense == 0">
                <template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.taxValue" @input="zhis(scope.$index)"></el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('bei-zhu')" width="135px">
                <template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.remark"></el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('expensereimbursementvoucher')" width="135px">
                <template slot-scope="scope">
                  <div @click="abl(scope.$index)">
                    <el-upload :class="!scope.row.pic ? 'upload-demo' : 'upload-demo icl'" :before-remove="beforeRemove"
                      :http-request="fileonLoad" limit="1" name="multipartFile">
                      <el-button size="small" type="primary" v-if="!scope.row.pic">{{ $t('clickupload') }}</el-button>
                    </el-upload>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" :label="$t('operation')">
                <template slot-scope="scope">
                  <el-button type="default" size="mini" style="display: inline-block;margin-left:0;margin-top: 3px"
                    @click="chanc(scope.$index)">{{ $t('btn.delete') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- <el-button class="submits" type="warning" @click="submits">提交</el-button> -->
        </div>
      </div>
    </div>
    <!-- 下面部分 -->
    <div class="xiamian" ref="xiaomian"
      :style="'width: ' + (xiamianWidth - 400) + 'px;float:right;background: #fff;position: relative;'">
      <div v-if="displayTable">
        <div style="padding-left:10px;padding-right:10px;">
          <div>
            <el-form label-width="100px" inline>
              <!-- 报销人 -->
              <el-form-item :label="$t('peopleconcerned')">
                <el-select v-if="user.userNameNeedTranslate != '1'" v-model="ownerId" size="small" clearable
                  :placeholder="$t('selecttheapplicant')" style="width: 120px" :disabled="!permissions.costAudit"
                  filterable="true">
                  <span v-for="(item, index) in users" :key="index">
                    <el-option :label="item.name" :value="item.id"></el-option>
                  </span>
                </el-select>

                <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'small'" :widthStr="'120'" :distinction="'2'"
                  :clearable="true" :subject="users" :disabled="!permissions.costAudit" :subjectId="ownerId"
                  ref="selectCat" @selectCal="selectCal"></selectCat>
              </el-form-item>
              <!-- 单据编号 -->
              <el-form-item :label="$t('receiptnumber')">
                <el-input v-model="code" size="small" :placeholder="$t('receiptnumber')" clearable="true"
                  style="width: 120px"></el-input>
              </el-form-item>
              <!-- 费用主类型 -->
              <el-form-item :label="'费用主类型'">
                <el-select size="small" v-model="queryExpenseMainType" style="width: 150px" clearable placeholder="全部类型">
                  <el-option v-for="item in expenseMainTypes" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                  <!-- <el-option :label="$t('yi-ban')" :value="0"></el-option>
                <el-option :label="$t('cha-lv')" :value="1"></el-option>
                <el-option :label="$t('wai-bao')" :value="2"></el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item :label="'发放状态'" v-if="permissions.costExpenseRelease">
                <el-select v-model="sendState" size="small" style="width: 150px"
                  clearable>
                  <el-option :label="'未发放'" :value="0"></el-option>
                  <el-option :label="'已发放'" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <!-- 填报日期 -->
              <div style="display: inline-block;padding-left: 15px">
                <el-form-item :label="$t('fillinthedate')">
                  <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small"
                    :range-separator="$t('other.to')" :start-placeholder="$t('time.startDate')"
                    :end-placeholder="$t('time.endDate')" style="width: 280px">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button @click="getList" size="small">{{ $t('find') }}</el-button>
                </el-form-item>
                <el-form-item v-if="currentClick == '2-1'">
                  <el-button @click="exportDocument()" size="small">单据导出</el-button>
                </el-form-item>
                <el-form-item v-if="currentClick == '2-1' && permissions.costExpenseRelease">
                  <el-button @click="documentIssuance(1)" size="small">发放</el-button>
                </el-form-item>
                <el-form-item v-if="currentClick == '2-1' && permissions.costExpenseRelease">
                  <el-button @click="documentIssuance(0)" size="small">取消发放</el-button>
                </el-form-item>
                <!-- <span>审核模式：{{ auditTypeItem.auditType }}</span> -->
              </div>
            </el-form>
          </div>
          <el-divider></el-divider>
          <!--列表-->
          <el-table ref="tab" :data="list" @selection-change="handleSelectionChange" highlight-current-row
            v-loading="listLoading" :height="tableHeight - currentClickNum" style="width: 100%;"
            :summary-method="getSummaries" show-summary>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="code" :label="$t('ticketnumber')"></el-table-column>
            <el-table-column prop="totalAmount" :label="$t('amountof') + '(' + $t('yuan') + ')'" align="center">
              <template slot-scope="scope">
                <span style="float:right;margin-right:20px">{{ scope.row.totalAmount ? scope.row.totalAmount.toFixed(2) :
                  '0' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ownerName" :label="$t('peopleconcerned')">
              <template slot-scope="scope">
                <div>
                  <span v-if="user.userNameNeedTranslate != 1">
                    {{ scope.row.ownerName }}
                  </span>
                  <span v-if="user.userNameNeedTranslate == 1">
                    <ww-open-data type='userName' :openid='scope.row.ownerName'></ww-open-data>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" :label="$t('fillinthedate')"></el-table-column>
            <el-table-column prop="ticketNum" :label="$t('invoicenumber')"
              v-if="this.user.timeType.easyExpense == 0"></el-table-column>
            <el-table-column prop="type" :label="$t('ppertype')" v-if="this.user.timeType.easyExpense == 0">
              <template slot-scope="scope">
                {{ scope.row.expenseMainTypeName }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('bei-zhu')" width="180">
              <template slot-scope="scope">
                <span style="font-size:12px;">{{ scope.row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" :label="$t('state.states')" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1" class="waiting">{{ statusTxt[scope.row.status] }}</span>
                <span v-if="scope.row.status == 2" class="rejected">{{ statusTxt[scope.row.status] }}</span>
                <span v-if="scope.row.status == 0 || scope.row.status == 3">{{ statusTxt[scope.row.status] }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="denyReason" :label="$t('dismissreason')" width="180">
                <template slot-scope="scope">
                  <span style="font-size:12px;">{{scope.row.denyReason}}</span>
                </template>
              </el-table-column> -->
            <el-table-column prop="sendState" label="发放状态" width="80" v-if="permissions.costExpenseRelease">
              <template slot-scope="scope">
                <span :style="`color: ${scope.row.sendState == 0 ? '#FFA500' : ''}`">{{ scope.row.sendState == 1 ? '已发放' :
                  '未发放' }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" :label="$t('operation')" :width="isAuditList ? 220 : 160">
              <template slot-scope="scope">
                <div v-if="!isAuditList">
                  <el-button icon="el-icon-view" circle size="mini"
                    @click.stop.native="downloadByA(scope.row)"></el-button>
                  <el-button icon="el-icon-edit" circle size="mini" style="margin-left:10px;"
                    @click.stop.native="showEditName(scope.row)"
                    v-show="permissions.costAudit || scope.row.status == 1 || scope.row.status == 2"></el-button>
                  <el-button icon="el-icon-delete" circle size="mini" style="margin-left:10px;"
                    @click.stop.native="deleteItem(scope.row)"
                    v-show="permissions.costAudit || scope.row.status == 1 || scope.row.status == 2"></el-button>
                </div>
                <div v-if="isAuditList">
                  <div v-if="auditTypeItem.auditType == 0">
                    <el-button size="mini" @click.stop.native="downloadByA(scope.row)">{{ $t('cha-kan') }}</el-button>
                    <el-button size="mini" style="margin-left:5px;" @click.stop.native="approve(scope.row)">{{
                      $t('btn.through') }}</el-button>
                    <el-button size="mini" style="margin-left:5px;" @click.stop.native="denyReason(scope.row)">{{
                      $t('btn.rejected') }}</el-button>
                  </div>
                  <div v-if="auditTypeItem.auditType == 1">
                    <el-button size="mini" @click.stop.native="approve(scope.row)">审核</el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!--工具条-->
          <el-col :span="24" class="toolbar">
            <el-pagination key="expenseListTblPager" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :page-sizes="[20, 50, 80, 100]" :page-size="20" :current-page.sync="page"
              layout="total, sizes, prev, pager, next" :total="total" style="float:right;"></el-pagination>
          </el-col>
        </div>
      </div>
    </div>
    <!-- 我的单据报销展示 -->
    <el-dialog title="报销凭证详情" :visible.sync="dialog" width="1000px">
      <!-- 内容主体 -->
      <div class="informant"><!--  报销人 -->
        <el-form :model="ParticularsList" label-width="80px">
          <el-form-item :label="$t('peopleconcerned')" style="width: 270px"
            :rules="{ required: true, message: $t('pleaseselecttheapplicant'), trigger: 'blur' }">

            <el-input v-model="ParticularsList.ownerName"
              :disabled="flg || ParticularsList.ownerId == ParticularsList.operatorId"
              v-if="user.userNameNeedTranslate != '1'"></el-input>
            <!-- <el-select v-model="ParticularsList.ownerId" :placeholder="$t('pleaseselecttheapplicant')" style="width: 150px" :disabled="flg || ParticularsList.ownerId == ParticularsList.operatorId">
                <span v-for="(item, index) in users" :key="index">
                  <el-option :label="item.name" :value="item.id"></el-option>
                </span>
              </el-select> -->

            <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'150'" :distinction="'3'"
              :subject="users" :disabled="flg || ParticularsList.ownerId == ParticularsList.operatorId"
              :subjectId="ParticularsList.ownerId" ref="selectCat" @selectCal="selectCal"></selectCat>

          </el-form-item>
          <el-form-item :label="$t('fillinthedate')">
            <!-- <el-input v-model="ParticularsList.createDate" :disabled="flg"></el-input> -->
            <el-date-picker type="date" :disabled="flg" :placeholder="$t('optiondate')"
              v-model="ParticularsList.createDate" value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('invoicenumber')">
            <el-input v-enter-number v-model="ParticularsList.ticketNum" :disabled="flg"></el-input>
          </el-form-item>
          <el-form-item :label="$t('costtype')" style="width: 270px">
            <el-select size="small" v-model="expenseMainTypeValue" style="width: 150px" :disabled="flg">
              <el-option v-for="item in expenseMainTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('bei-zhu')" style="width: 280px">
            <el-input v-model="ParticularsList.remark" :disabled="flg" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item :label="$t('totalcostos')">
            ￥{{ ParticularsList.totalAmount | numberToCurrency }}&nbsp;&nbsp;{{ $t('yuan') }}
          </el-form-item>
        </el-form>
        <div style="height:0;position:relative;" v-if="!flg">
          <span class="newInvoice" @click="addNewInvoice"> <i class="el-icon-circle-plus-outline"></i> {{ $t('newinvoice')
          }}</span>
        </div>
        <el-table :data="ParticularsList.invoiceList" border style="width: 100%">
          <el-table-column prop="status" label="审核状态" width="172" v-if="auditTypeItem.auditType == 1">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1" class="waiting">{{ statusTxt[scope.row.status] }}</span>
              <span v-if="scope.row.status == 2" class="rejected">{{ statusTxt[scope.row.status] }}</span>
              <span v-if="scope.row.status == 0 || scope.row.status == 3">{{ statusTxt[scope.row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="auditTypeItem.auditType == 1" width="172" label="审核人">
            <template slot-scope="scope">
              <span v-if="user.userNameNeedTranslate == 1">
                <ww-open-data type='userName' :openid='scope.row.projectManagerName'></ww-open-data>
              </span>
              <span v-else>{{ scope.row.projectManagerName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="projectId" :label="$t('other.project')" width="155">
            <template slot-scope="scope">
              <el-select size="small" v-if="!flg" v-model="scope.row.projectId" :placeholder="$t('other.project')"
                style="width: 130px">
                <el-option v-for="(item, index) in projectList" :key="index" :label="item.projectName + item.projectCode"
                  :value="item.id" @click="ok(item)">
                  <span style="float: left;color: #8492a6; font-size: 13px">{{ item.projectCode }}</span>
                  <span style="float: right;margin-left: 20px">{{ item.projectName }}</span>
                </el-option>
              </el-select>
              <div v-else>
                <span>{{ scope.row.projectName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="happenDate" :label="$t('forthedate')" width="172">
            <template slot-scope="scope">
              <el-date-picker size="small" v-if="!flg" v-model="scope.row.happenDate" type="date" style=" width: 145px"
                value-format="yyyy-MM-dd" :placeholder="$t('optiondate')">
              </el-date-picker>
              <span v-else>{{ scope.row.happenDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceType" :label="$t('invoices')" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-select size="small" v-if="!flg" v-model="scope.row.invoiceType"
                :placeholder="$t('pleaseselectthetypeoffee')" style="width: 150px;">
                <el-option :label="$t('vATspecialinvoice')" :value="0"></el-option>
                <el-option :label="$t('vATgeneralinvoice')" :value="1"></el-option>
              </el-select>
              <span v-else>{{ typeInvoic[scope.row.invoiceType] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceType" :label="$t('costtype')" width="172">
            <template slot-scope="scope">
              <el-select v-if="!flg" size="small" v-model="scope.row.expenseType"
                :placeholder="$t('pleaseselectthetypeoffee')" style="width: 150px">
                <el-option v-for="(item, index) in expenseTypeList" :key="index" :label="item.typeName"
                  :value="item.typeName"></el-option>
              </el-select>
              <span v-else>{{ scope.row.expenseType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" :label="this.user.timeType.easyExpense == 0 ? $t('amountoffees') : '费用金额'"
            width="172">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" :id="'am' + scope.$index" v-model="scope.row.amount"
                @input="zhiNum(scope.$index, scope)" @change="kan"
                @keyup.native="restrictNumber('am' + scope.$index)"></el-input>
              <span v-else>￥{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceNo" :label="$t('invoiceno')" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model.number="scope.row.invoiceNo"></el-input>
              <span v-else>{{ scope.row.invoiceNo }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taxPercent" :label="$t('shui-shuai')" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model="scope.row.taxPercent"
                @input="zhiNum(scope.$index, scope)"></el-input>
              <span v-else>{{ scope.row.taxPercent }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taxValue" :label="$t('taxs') + '(' + $t('yuan') + ')'" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model="scope.row.taxValue"></el-input>
              <span v-else>￥{{ scope.row.taxValue }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" :label="$t('bei-zhu')" width="300">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model="scope.row.remark" maxlength="100"></el-input>
              <span v-else>{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pic" :label="$t('expensereimbursementvoucher')" width="300">
            <template slot-scope="scope">
              <div v-if="!flg">
                <div @click="abl(scope.$index)" style="height: 35px;overflow: hidden;">
                  <el-upload :class="!scope.row.pic ? 'upload-demo' : 'upload-demo icl'" :file-list="scope.row.pic"
                    :before-remove="beforeRemoves" :http-request="fileonLoads" limit="1" name="multipartFile">
                    <el-button size="small" type="primary" v-if="!scope.row.pic">{{ $t('clickupload') }}</el-button>
                  </el-upload>
                </div>
              </div>
              <div v-else>
                <span v-if="scope.row.pic">
                  <div class="tups">
                    <viewer :images="scope.row.pic">
                      <img ref="imgsa" v-for="src in scope.row.pic" :src="src.url" :key="src.title">
                    </viewer>
                  </div>
                </span>
                <span v-else>{{ $t('nodocuments') }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 删除 -->
          <el-table-column fixed="right" :label="$t('operation')" v-if="!flg">
            <template slot-scope="scope">
              <el-button type="default" size="mini" style="display: inline-block;margin-left:0;margin-top: 3px"
                @click="delec(scope.$index)">{{ $t('btn.delete') }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="审核" width="172" v-if="auditTypeItem.auditType == 1 && showSingleAudit"
            fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isIncharger && scope.row.status == 1"
                @click="approveSingle(scope.row)">通过</el-button><el-button
                v-if="scope.row.isIncharger && scope.row.status == 1" @click="denySingle(scope.row)">驳回</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <viewer :images="imgs">
            <img ref="imgsa" v-for="src in imgs" :src="src.url" :key="src.title">
        </viewer> -->
      <!-- 取消和确定 -->
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="print()">打印</el-button> -->
        <el-button @click="dialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button v-if="!flg" type="primary" @click="present()">{{ $t('btn.determine') }}</el-button>
        <el-button v-else type="primary" @click="dialog = false">{{ $t('btn.determine') }}</el-button>
      </span>
    </el-dialog>

    <!-- 批量上传 -->
    <el-dialog :title="$t('batchupload')" v-if="importDialog" :visible.sync="importDialog" customClass="customWidth"
      width="500px">
      <p>1. {{ $t('other.download') }}
        <span>{{ $t('expensereimbursementimporttemplate') }}</span>
        <el-link type="primary" style="margin-left:5px;" :underline="false"
          :href="'./upload/' + $t('expensereimbursementimporttemplate') + '.xlsx'"
          :download="$t('expensereimbursementimporttemplate') + '.xlsx'">{{ $t('expensereimbursementimporttemplate')
          }}.xlsx</el-link>
      </p>
      <p>2. {{ $t('exceltemplateanduploadit') }}。</p>
      <div style="padding-bottom:1em;">
        <div style="width:300px;margin:0 auto">
          <el-upload ref="upload" action="#" :auto-upload="false" multiple :on-change="fileListAdd"
            :on-remove="fileListDel">
            <el-button slot="trigger" size="small" type="primary" style="">{{ $t('selecthefile') }}</el-button>
            <el-button type="primary" size="small" style="margin-left:30px" :underline="false" :loading="importingData"
              @click="submitUploadSure" :disabled="fileList.length == 0">{{ $t('toupload') }}</el-button>
            <el-button size="small" style="margin-left:30px" @click="fileListClear">{{ $t('clears') }}</el-button>
          </el-upload>
        </div>
      </div>
    </el-dialog>


    <!-- 主费用类型自定义 -->
    <el-dialog title="费用类型大类管理" v-if="expenseTypeDialog" :visible.sync="expenseTypeDialog" customClass="customWidth"
      width="600px">
      <el-table :data="expenseMainTypes" style="width:100%" height="400" :loading="expenseTypeListLoading">
        <el-table-column :label="'类型名称'" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="'对应成本项'" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.basecostSettingName }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operation')" width="150">
          <template slot-scope="scope">
            <el-button @click="expenseTypeEditOp(scope.row)" size="small" type="primary">{{ $t('bian-ji') }}</el-button>
            <el-button @click="expenseTypeEditDelete(scope.row)" size="small" type="danger">{{ $t('btn.delete')
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="expenseTypeDialog = false" size="medium">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="expenseTypeEditOp()" size="medium">{{ $t('newtype') }}</el-button>
      </span>

      <!-- 新增/编辑费用类型 -->
      <el-dialog :title="$t('addeditfeetypes')" v-if="expenseTypeEditDialog" :visible.sync="expenseTypeEditDialog"
        customClass="customWidth" width="400px" append-to-body>
        <el-form label-width="100px" :rules="editExpenseTypeDataRules" ref="editExpenseTypeDataForm"
          :model="editExpenseTypeData">
          <el-form-item :label="$t('typename ')" style="margin:30px 0" prop="typeName">
            <el-input id="editExpenseTypeDataInput" size="medium" v-model="editExpenseTypeData.name"
              :placeholder="$t('customizethfeetypename')" style="width:90%"
              @keyup.native="editExpenseTypeDataInput('editExpenseTypeDataInput')"></el-input>
          </el-form-item>
          <el-form-item label="对应成本项" style="margin:30px 0" prop="basecostSettingId">
            <el-select v-model="editExpenseTypeData.basecostSettingId" size="medium" style="width:90%" clearable>
              <el-option v-for="item in basecostSettingList" :key="item.id" :label="item.name" :value="item.id"
                :disabled="item.alarmType == 1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="expenseTypeEditDialog = false" size="medium">{{ $t('btn.cancel') }}</el-button>
          <el-button type="primary" @click="expenseTypeEditSure" size="medium">{{ $t('btn.determine') }}</el-button>
        </span>
      </el-dialog>
    </el-dialog>

    <!-- 费用类型自定义 -->
    <el-dialog :title="$t('expensetypemanagement')" v-if="customTypeDialog" :visible.sync="customTypeDialog"
      customClass="customWidth" width="600px">
      <el-table :data="customTypeList" style="width:100%" height="400" :loading="customTypeListLoading">
        <el-table-column prop="typeName" :label="$t('costofname')" min-width="150"></el-table-column>
        <el-table-column :label="$t('costtype')" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.expenseMainTypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operation')" width="150">
          <template slot-scope="scope">
            <el-button @click="customTypeEditOp(scope.row)" size="small" type="primary">{{ $t('bian-ji') }}</el-button>
            <el-button @click="customTypeEditDelete(scope.row)" size="small" type="danger">{{ $t('btn.delete')
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="customTypeDialog = false" size="medium">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="customTypeEditOp()" size="medium">{{ $t('newtype') }}</el-button>
      </span>

      <!-- 新增/编辑费用类型 -->
      <el-dialog :title="$t('addeditfeetypes')" v-if="customTypeEditDialog" :visible.sync="customTypeEditDialog"
        customClass="customWidth" width="400px" append-to-body>
        <el-form label-width="80px" :rules="editTypeDataRules" ref="editTypeDataForm" :model="editTypeData">
          <el-form-item :label="$t('belongstype')" style="margin:30px 0">
            <el-select v-model="editTypeData.mainType" size="medium" style="width:90%">
              <el-option v-for="item in expenseMainTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('typename ')" style="margin:30px 0" prop="typeName">
            <el-input id="editTypeDataInput" size="medium" v-model="editTypeData.typeName"
              :placeholder="$t('customizethfeetypename')" style="width:90%"
              @keyup.native="editTypeDataInput('editTypeDataInput')"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="customTypeEditDialog = false" size="medium">{{ $t('btn.cancel') }}</el-button>
          <el-button type="primary" @click="customTypeEditSure" size="medium">{{ $t('btn.determine') }}</el-button>
        </span>
      </el-dialog>
    </el-dialog>

    <!-- 驳回弹出框 -->
    <el-dialog :title="$t('defaultText.pleaseEnterTheReason')" v-if="denyReasonDialog" :visible.sync="denyReasonDialog"
      :close-on-click-modal="false" customClass="customWidth" width="500px">
      <div>
        <el-input type="textarea" v-model="denyForm.reason" rows="2" :placeholder="$t('reasonforyourdecisiontoreject')" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="denyReasonDialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="deny()">{{ $t('btn.determine') }}</el-button>
      </div>
    </el-dialog>

    <!-- 详情查看弹出框 -->
    <el-dialog title="报销凭证详情" :visible.sync="detailDialog" width="1000px" :before-close="handleClose">
      <div ref="printContent" class="printContent">
        <div class="printContent-detail">
          <div class="detail-item">
            <span class="detail-item-title"> <span class="printBox">报销人</span> </span>
            <span class="detail-item-content">
              <span v-if="user.userNameNeedTranslate == 1">
                <ww-open-data type='userName' :openid='ParticularsList.ownerName'></ww-open-data>
              </span>
              <span v-else>{{ ParticularsList.ownerName }}</span>
            </span>
          </div>
          <div class="detail-item">
            <span class="detail-item-title"><span class="printBox">填报时间</span></span>
            <span class="detail-item-content">{{ ParticularsList.createDate }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-item-title"><span class="printBox">发票张数</span></span>
            <span class="detail-item-content">{{ ParticularsList.ticketNum }} 张</span>
          </div>
          <div class="detail-item">
            <span class="detail-item-title"><span class="printBox">费用类型：</span></span>
            <span class="detail-item-content">{{ detaExpenseMainTypeName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-item-title"><span class="printBox">总费用</span></span>
            <span class="detail-item-content">￥ {{ ParticularsList.totalAmount | numberToCurrency }}</span>
          </div>
          <div class="detail-item" style="width: 100%">
            <span class="detail-item-title"><span class="printBox">备注</span></span>
            <span class="detail-item-content">{{ ParticularsList.remark }}</span>
          </div>
        </div>
        <!-- <el-table :data="ParticularsList.invoiceList" border style="width: 100%">

          <el-table-column prop="projectId" :label="$t('other.project')" width="155">
            <el-table-column prop="status" label="审核状态" width="172" v-if="auditTypeItem.auditType == 1">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1" class="waiting">{{ statusTxt[scope.row.status] }}</span>
                <span v-if="scope.row.status == 2" class="rejected">{{ statusTxt[scope.row.status] }}</span>
                <span v-if="scope.row.status == 0 || scope.row.status == 3">{{ statusTxt[scope.row.status] }}</span>
              </template>
            </el-table-column>
            <template slot-scope="scope">
              <el-select size="small" v-if="!flg" v-model="scope.row.projectId" :placeholder="$t('other.project')"
                style="width: 130px">
                <el-option v-for="(item, index) in projectList" :key="index" :label="item.projectName + item.projectCode"
                  :value="item.id" @click="ok(item)">
                  <span style="float: left;color: #8492a6; font-size: 13px">{{ item.projectCode }}</span>
                  <span style="float: right;margin-left: 20px">{{ item.projectName }}</span>
                </el-option>
              </el-select>
              <div v-else>
                <div v-for="(item, index) in projectIdName" :key="index">
                  <span v-if="item.id == scope.row.projectId">{{ item.projectName }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="happenDate" :label="$t('forthedate')" width="172">
            <template slot-scope="scope">
              <el-date-picker size="small" v-if="!flg" v-model="scope.row.happenDate" type="date" style=" width: 145px"
                value-format="yyyy-MM-dd" :placeholder="$t('optiondate')">
              </el-date-picker>
              <span v-else>{{ scope.row.happenDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceType" :label="$t('invoices')" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-select size="small" v-if="!flg" v-model="scope.row.invoiceType"
                :placeholder="$t('pleaseselectthetypeoffee')" style="width: 150px;">
                <el-option :label="$t('vATspecialinvoice')" :value="0"></el-option>
                <el-option :label="$t('vATgeneralinvoice')" :value="1"></el-option>
              </el-select>
              <span v-else>{{ typeInvoic[scope.row.invoiceType] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceType" :label="$t('costtype')" width="172">
            <template slot-scope="scope">
              <el-select v-if="!flg" size="small" v-model="scope.row.expenseType"
                :placeholder="$t('pleaseselectthetypeoffee')" style="width: 150px">
                <el-option v-for="(item, index) in expenseTypeList" :key="index" :label="item.typeName"
                  :value="item.typeName"></el-option>
              </el-select>
              <span v-else>{{ scope.row.expenseType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" :label="this.user.timeType.easyExpense == 0 ? $t('amountoffees') : '费用金额'"
            width="172">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" :id="'am' + scope.$index" v-model="scope.row.amount"
                @input="zhiNum(scope.$index, scope)" @change="kan"
                @keyup.native="restrictNumber('am' + scope.$index)"></el-input>
              <span v-else>￥{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceNo" :label="$t('invoiceno')" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model.number="scope.row.invoiceNo"></el-input>
              <span v-else>{{ scope.row.invoiceNo }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taxPercent" :label="$t('shui-shuai')" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model="scope.row.taxPercent"
                @input="zhiNum(scope.$index, scope)"></el-input>
              <span v-else>{{ scope.row.taxPercent }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taxValue" :label="$t('taxs') + '(' + $t('yuan') + ')'" width="172"
            v-if="this.user.timeType.easyExpense == 0">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model="scope.row.taxValue"></el-input>
              <span v-else>￥{{ scope.row.taxValue }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" :label="$t('bei-zhu')" width="300">
            <template slot-scope="scope">
              <el-input size="small" v-if="!flg" v-model="scope.row.remark" maxlength="100"></el-input>
              <span v-else>{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pic" :label="$t('expensereimbursementvoucher')" width="300">
            <template slot-scope="scope">
              <div v-if="!flg">
                <div @click="abl(scope.$index)" style="height: 35px;overflow: hidden;">
                  <el-upload :class="!scope.row.pic ? 'upload-demo' : 'upload-demo icl'" :file-list="scope.row.pic"
                    :before-remove="beforeRemoves" :http-request="fileonLoads" limit="1" name="multipartFile">
                    <el-button size="small" type="primary" v-if="!scope.row.pic">{{ $t('clickupload') }}</el-button>
                  </el-upload>
                </div>
              </div>
              <div v-else>
                <span v-if="scope.row.pic">
                  <div class="tups">
                    <viewer :images="scope.row.pic">
                      <img ref="imgsa" v-for="src in scope.row.pic" :src="src.url" :key="src.title">
                    </viewer>
                  </div>
                </span>
                <span v-else>{{ $t('nodocuments') }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" :label="$t('operation')" v-if="!flg">
            <template slot-scope="scope">
              <el-button type="default" size="mini" style="display: inline-block;margin-left:0;margin-top: 3px"
                @click="delec(scope.$index)">{{ $t('btn.delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table> -->

        <!-- 卡片列表 -->
        <div class="conter-box">
          <div class="conter-border" v-for="item, index in ParticularsList.invoiceList" :key="index">
            <div class="detail-item" v-if="auditTypeItem.auditType != 1">
              <span class="detail-item-title"> <span class="printBox">项目</span> </span>
              <span class="detail-item-content">
                <el-select size="small" v-if="!flg" v-model="item.projectId" :placeholder="$t('other.project')"
                  style="width: 130px">
                  <el-option v-for="(item, index) in projectList" :key="index"
                    :label="item.projectName + item.projectCode" :value="item.id" @click="ok(item)">
                    <span style="float: left;color: #8492a6; font-size: 13px">{{ item.projectCode }}</span>
                    <span style="float: right;margin-left: 20px">{{ item.projectName }}</span>
                  </el-option>
                </el-select>
                <div v-else>
                  <div v-for="(item, index) in projectIdName" :key="index">
                    <span v-if="item.id == item.projectId">{{ item.projectName }}</span>
                  </div>
                </div>
              </span>
            </div>
            <div class="detail-item" v-if="auditTypeItem.auditType == 1">
              <span class="detail-item-title"> <span class="printBox">项目(审核状态)</span> </span>
              <span class="detail-item-content">
                <span v-if="item.status == 1" class="waiting">{{ statusTxt[item.status] }}</span>
                <span v-if="item.status == 2" class="rejected">{{ statusTxt[item.status] }}</span>
                <span v-if="item.status == 0 || item.status == 3">{{ statusTxt[item.status] }}</span>
              </span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">费用日期</span> </span>
              <span class="detail-item-content">{{ item.happenDate }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">发票种类</span> </span>
              <span class="detail-item-content">{{ typeInvoic[item.invoiceType] }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">费用类型</span> </span>
              <span class="detail-item-content">{{ item.expenseType }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title single"> <span class="printBox">费用金额（含税）</span> </span>
              <span class="detail-item-content">{{ item.amount }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">发票号</span> </span>
              <span class="detail-item-content">{{ item.invoiceNo }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">税率%</span> </span>
              <span class="detail-item-content">{{ item.taxValue }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">税额</span> </span>
              <span class="detail-item-content">{{ item.taxValue ? `￥${item.taxValue}` : '' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">备注</span> </span>
              <span class="detail-item-content">{{ item.remark }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-item-title"> <span class="printBox">报销凭证</span> </span>
              <span class="detail-item-content">
                <span v-if="item.pic" style="width: 100px;display: inline-block;">
                  <div class="tups">
                    <viewer :images="item.pic">
                      <img ref="imgsa" v-for="src in item.pic" :src="src.url" :key="src.title">
                    </viewer>
                  </div>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="print()">打 印</el-button>
        <el-button @click="detailDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
// 自定义select组件
import selectCat from "@/components/select.vue"

// 引入自定义级联组件
import vueCascader from "@/components/cascader.vue"

export default {
  name: "expense",
  components: {
    selectCat,
    vueCascader
  },
  props: {},
  data() {
    return {
      showSingleAudit: false,
      auditTypeItem: { auditType: 0 },
      queryExpenseMainType: null,
      denyReasonDialog: false,
      denyForm: {
        reason: '',
        id: null
      },
      basecostSettingList: [],

      fileList: [],
      muHeight: document.documentElement.clientHeight || document.body.clientHeight,
      xiamianWidth: document.documentElement.clientWidth || document.body.clientWidth,
      imgs: [],
      addFormRules: {
        ownerId: [{ required: true, message: this.$t('pleaseselecttheapplicant'), trigger: "blur" }],
        createDate: [{ required: true, message: this.$t('pleaseselectadate'), trigger: "blur" }],
      },
      isAuditList: false,
      statusTxt: [this.$t('state.approved'), this.$t('state.WaitingAudit'), this.$t('state.rejected'), this.$t('state.undone')],
      user: JSON.parse(sessionStorage.getItem("user")),
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
      allExpList: [],
      expenseTypeList: [],
      tian: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null, },
      typeInvoic: [this.$t('vATspecialinvoice'), this.$t('vATgeneralinvoice')],
      listLoading: false,
      tableHeight: 0,
      list: [],
      total: 0,
      code: null,
      date: null,
      type: null,
      ownerId: null,
      users: [], // 人员信息
      displayTable: false,
      getLists: [],
      ProjectList: [], // 项目列表
      companyId: [], // 人员的id
      dialogVisible: false,
      code: null,
      addForm: { code: null, ownerId: null, createDate: null, ticketNum: 1, type: 0, remark: null, totalAmount: 0, },
      page: 1,
      size: 20,
      form: { happenDate: null, invoiceType: null, amount: null, invoiceNo: null, taxPercent: null, taxValue: null, remark: null },
      invoiceList: [],
      kkk: null, // 
      ddId: null,
      dldl: [],
      isOK: false,
      z: null,
      value: null,
      dialog: false, // 单据查看展示
      ParticularsList: [],
      projectIdName: [], // 点击查看的项目名
      flg: false, // 是否禁用
      shuz: [this.$t('generalexpenses'), this.$t('travelexpensess'), this.$t('outsourcingcostshouldbereported')],
      ins: 0,
      apl: '',
      diz: 'http://worktime.ttkuaiban.com',
      importDialog: false,
      importingData: false,
      currentClick: '',
      currentClickNum: 0,

      // 费用类型自定义
      customTypeDialog: false,
      customTypeList: [],
      customTypeListLoading: false,
      customTypeEditDialog: false,
      editTypeData: {},
      editTypeDataRules: {
        typeName: [{ required: true, message: this.$t('pleaseentercustomfeetypename'), trigger: "blur" }],
      },
      expenseMainTypes: [],
      expenseMainTypeValue: '',
      expenseTypeDialog: false,
      expenseTypeListLoading: false,
      expenseTypeEditDialog: false,
      editExpenseTypeData: {},
      editExpenseTypeDataRules: {
        name: [{ required: true, message: this.$t('pleaseentercustomfeetypename'), trigger: "blur" }],
      },
      // 详情弹出框
      detailDialog: false,
      detaExpenseMainTypeName: '',
      multipleSelection: [],
      sendState: '',
    };
  },
  computed: {
    totalCost: function () {
      let num = 0
      for (let i in this.invoiceList) {
        if (this.invoiceList[i].amount) {
          num += this.invoiceList[i].amount * 1
        }
      }
      return num
    }
  },
  watch: {},
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 195;
    const that = this;
    window.onresize = function temp() {
      that.tableHeight = window.innerHeight - 195;
    };
  },

  mounted() {
    this.getNextCode();
    this.getUsers() // 获取人员信息
    this.getList() // 获取单据列表
    this.getProjectList();
    this.getExpensMainTypes();
    this.getExpList();
    this.getBasecostItemList();
    this.getAuditType();
  },
  filters: {
    numberToCurrency(value) {
      if (!value) return '0.00'
      // console.log('v=='+value);
      value = value.toFixed(2)
      const intPart = Math.trunc(value)
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      let floatPart = '.00'
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) { // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    }
  },
  methods: {
    getBasecostItemList() {
      this.http.post('/project-basecost-setting/list', {},
        res => {
          if (res.code == 'ok') {
            this.basecostSettingList = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        }, err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
    },
    // 费用类型自定义
    customTypeOp() {
      this.customTypeDialog = true
      this.customTypeListLoading = true
    },
    customTypeEditOp(row) {
      this.customTypeEditDialog = true
      if (row) {
        this.editTypeData = row
      } else {
        this.editTypeData = {
          mainType: '',
          typeName: '',
          companyId: this.user.companyId
        }
      }
    },
    customTypeEditSure() {
      this.$refs.editTypeDataForm.validate(valid => {
        if (valid) {
          this.http.post('/expense-type/addOrMod', this.editTypeData,
            res => {
              if (res.code == 'ok') {
                this.customTypeEditDialog = false
                this.customTypeOp()
                this.getExpList()
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            }, err => {
              this.$message({
                message: err,
                type: 'error'
              })
            })
        }
      })
    },
    customTypeEditDelete(row) {
      this.$confirm(this.$t('operationmaycausedatalossAreyousuredeletethedata'), this.$t('other.prompts'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {
        this.http.post('/expense-type/delete', {
          id: row.id
        },
          res => {
            if (res.code == 'ok') {
              this.customTypeEditDialog = false
              this.customTypeOp()
              this.getExpList()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          }, err => {
            this.$message({
              message: err,
              type: 'error'
            })
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('thedeletionhasbeencancelled')
        })
      })
    },
    editTypeDataInput(typeName) {
      let inpu = document.getElementById(typeName);
      inpu.value = inpu.value.replace(/^\s*|\s*$/g, '')
    },
    // 费用主类型自定义
    expenseTypeOp() {
      this.expenseTypeDialog = true
      this.customTypeListLoading = true
    },
    expenseTypeEditOp(row) {
      this.expenseTypeEditDialog = true
      if (row) {
        this.editExpenseTypeData = row
      } else {
        this.editExpenseTypeData = {
          isSystem: 0,
          name: '',
          companyId: this.user.companyId
        }
      }
    },
    expenseTypeEditSure() {
      this.$refs.editExpenseTypeDataForm.validate(valid => {
        if (valid) {
          this.http.post('/expense-main-type/addOrMod', this.editExpenseTypeData,
            res => {
              if (res.code == 'ok') {
                this.expenseTypeEditDialog = false
                this.expenseTypeOp()
                this.getExpensMainTypes()
                this.getExpList()
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            }, err => {
              this.$message({
                message: err,
                type: 'error'
              })
            })
        }
      })
    },
    expenseTypeEditDelete(row) {
      this.$confirm(this.$t('operationmaycausedatalossAreyousuredeletethedata'), this.$t('other.prompts'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {
        this.http.post('/expense-main-type/delete', {
          id: row.id
        },
          res => {
            if (res.code == 'ok') {
              this.expenseTypeEditDialog = false
              this.expenseTypeOp()
              this.getExpensMainTypes()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          }, err => {
            this.$message({
              message: err,
              type: 'error'
            })
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('thedeletionhasbeencancelled')
        })
      })
    },
    expenseTypeDataInput(typeName) {
      let inpu = document.getElementById(typeName);
      inpu.value = inpu.value.replace(/^\s*|\s*$/g, '')
    },
    editExpenseTypeDataInput(name) {
      let inpu = document.getElementById(name);
      inpu.value = inpu.value.replace(/^\s*|\s*$/g, '')
    },



    submitUpload() {
      this.importDialog = true
    },
    fileListAdd(file, fileList) {
      let str = file.name.split(".");
      let format = str[str.length - 1];
      if (format != "xls" && format != "xlsx") {
        this.$message({
          message: this.$t('other.PleaseselecttheXLSorXLSXfile'),
          type: "error"
        });
        fileList.splice(fileList.length - 1)
      }
      this.fileList = fileList
    },
    fileListDel(file, fileList) {
      this.fileList = fileList
    },
    fileListClear() {
      this.$refs.upload.clearFiles();
      this.fileList = []
    },
    submitUploadSure() {
      this.$confirm(this.$t('confirmtoupload'), this.$t('other.prompts'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'success'
      }).then(() => {
        let formData = new FormData();
        for (let i in this.fileList) {
          formData.append("files", this.fileList[i].raw);
        }
        this.importingData = true
        // console.log(formData,this.fileList);
        // return
        this.http.uploadFile('/expense-sheet/importData', formData,
          res => {
            if (res.code == "ok") {
              this.importingData = false
              this.$refs.upload.clearFiles();
              this.fileList = []
              this.$message({
                message: this.$t('uploadedsuccessfully'),
                type: "success"
              });
            } else {
              this.importingData = false
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          }, error => {
            this.importingData = false
            this.$message({
              message: error,
              type: "error"
            });
          });
      }).catch(() => { })


    },
    restrictNumber(targetId) {
      let inpu = document.getElementById(targetId);
      inpu.value = inpu.value.replace(/[^\d.]/g, "");  //仅保留数字和"."
      inpu.value = inpu.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
      inpu.value = inpu.value.replace(".", "$#*").replace(/\./g, '').replace('$#*', '.');//去除其他"."
      inpu.value = inpu.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
      if (inpu.value.indexOf(".") < 0 && inpu.value != "") { //首位是0的话去掉
        inpu.value = parseFloat(inpu.value);
      }
    },
    approveSingle(item) {
      this.http.post('/expense-sheet/approveSingleProject', {
        id: item.id
      },
        res => {
          if (res.code == "ok") {
            this.getList();
            // this.dialog = false;
            this.getParticulars(item.expenseId);
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    approve(item) {
      if (this.auditTypeItem.auditType == 0) {
        //默认模式，按有审核权限的人直接审核
        this.showSingleAudit = false;
        //审核通过
        this.http.post('/expense-sheet/approve', {
          id: item.id
        },
          res => {
            if (res.code == "ok") {
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          },
          error => {
            this.$message({
              message: error,
              type: "error"
            });
          });
      } else {
        //项目经理按项目逐条审核
        this.showSingleAudit = true;
        this.downloadByA(item);
      }

    },

    denySingle(item) {
      //项目经理审核模式
      this.http.post('/expense-sheet/denySingleProject', {
        id: item.id
      },
        res => {
          if (res.code == "ok") {
            this.dialog = false;
            this.showSingleAudit = false;
            this.getList();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },

    denyReason(item) {
      if (this.auditTypeItem.auditType == 0) {
        this.denyForm.id = item.id
        this.denyForm.reason = ''
        // this.denyReasonDialog = true
        this.deny()
      } else {
        this.downloadByA(item);
        this.showSingleAudit = true;
      }
    },
    deny() {
      //审核驳回
      this.http.post('/expense-sheet/deny', {
        id: this.denyForm.id,
        denyReason: this.denyForm.reason
      },
        res => {
          if (res.code == "ok") {
            this.denyReasonDialog = false
            this.getList();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    getExpList() {
      this.http.post('/expense-type/getList', {
      },
        res => {
          this.customTypeListLoading = false
          if (res.code == "ok") {
            this.allExpList = res.data;
            this.customTypeList = res.data
            this.addForm.type = this.expenseMainTypeValue
            this.expenseTypeList = this.allExpList.filter(a => a.mainType == this.expenseMainTypeValue);
            this.invoiceList = []
            if (!res.data != res.data.length == 0) {
              this.http.post('/company/settingExpenseType', {}, res => {
                if (res.code == 'ok') { } else { this.$message({ message: res.msg, type: 'error' }) }
              }, err => { this.$message({ message: err, type: 'error' }) })
            }
            for (let i in this.invoiceList) {
              this.invoiceList[i].expenseType = ''
            }
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.customTypeListLoading = false
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    getExpensMainTypes() {
      this.http.post('/expense-main-type/list', {
      },
        res => {
          if (res.code == "ok") {
            this.expenseMainTypes = res.data
            this.expenseMainTypeValue = this.expenseMainTypes[0].id
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    // 单据查看
    downloadByA(val) {
      if (val.status == 0) {
        this.detailDialog = true
      } else {
        this.dialog = true
      }
      console.log(val, '看看数据来源')
      this.detaExpenseMainTypeName = val.expenseMainTypeName
      this.flg = true;
      this.getParticulars(val.id);
      this.expenseTypeList = this.allExpList.filter(a => a.mainType == val.type);
    },
    // 单据编辑
    showEditName(val) {
      this.dialog = true,
        this.flg = false,
        delete val.invoiceList
      this.getParticulars(val.id)
      this.expenseTypeList = this.allExpList.filter(a => a.mainType == val.type);
    },
    staffs(key, keyPath) { // 控制员工费用报表
      if (keyPath[0] == '1') {
        this.displayTable = false;
      } else {
        this.displayTable = true;
        this.getList();
      }
      // currentClick
      // console.log(key, keyPath)
      this.currentClick = key
      key == '2-1' ? this.currentClickNum = 70 : this.currentClickNum = 0
    },
    bills(audit) { // 控制
      this.isAuditList = audit;
      this.displayTable = true;
    },
    present() {
      this.adds();
    },
    // 删除操作
    delec(ids) {
      // console.log('删除操作', ids);
      this.ParticularsList.invoiceList.splice(ids, 1)
      this.ParticularsList.ticketNum = this.ParticularsList.invoiceList.length
      this.kan()
    },
    adds() {
      var paramData = JSON.parse(JSON.stringify(this.ParticularsList));
      var spl = paramData.invoiceList
      for (var i in spl) {
        if (spl[i].pic) {
          if (spl[i].pic[0].name) {
            spl[i].pic = spl[i].pic[0].name
          }
        }
      }
      paramData.items = JSON.stringify(paramData.invoiceList)//这里要传发票列表的json转string

      delete paramData.invoiceList

      this.http.post('/expense-sheet/add', paramData,
        res => {
          if (res.code == "ok") {
            this.dialog = false;
            this.bills(this.isAuditList);
            this.$message({
              message: this.$t('editsuccess'),
              type: "success"
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },

    //  获取人员信息
    getUsers() {
      // this.http.post(this.port.manage.list, {
      //     departmentId: -1,
      //     pageIndex: 1,
      //     // pageSize: 99999
      //     pageSize: -1
      // },
      this.http.post('/user/getSimpleActiveUserList', {},
        res => {
          if (res.code == "ok") {
            // this.users = res.data.records;
            this.users = res.data;
            if (!this.permissions.costAudit) {
              this.addForm.ownerId = this.user.id;
              this.addForm.status = 1;
              this.$forceUpdate()
            }
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    // 提交事件
    submits() {
      this.$refs.mainAddForm.validate(valid => {
        if (valid) {
          if (this.invoiceList.length == 0) {
            this.$message({
              message: this.$t('pleaseaddtheinvoice'),
              type: "error"
            });
            return;
          }
          let strObj = {
            project: '',
            datas: '',
            fptype: '',
            fyType: '',
            rmb: '',
            flg: false
          }
          for (var i in this.invoiceList) {
            if (!this.invoiceList[i].projectId) {
              strObj.project = '所属项目'
              strObj.flg = true
            }
            // if(!this.invoiceList[i].invoiceType || this.invoiceList[i].invoiceType == '') {
            //   strObj.fptype = '发票种类'
            //   strObj.flg = true
            // }
            if (!this.invoiceList[i].expenseType || this.invoiceList[i].expenseType == '') {
              strObj.fyType = '费用类型'
              strObj.flg = true
            }
            if (!this.invoiceList[i].happenDate || this.invoiceList[i].happenDate == '') {
              strObj.datas = '费用日期'
              strObj.flg = true
            }
            if (!this.invoiceList[i].amount || this.invoiceList[i].amount == '') {
              strObj.rmb = '费用金额'
              strObj.flg = true
            }
          }
          if (strObj.flg) {
            this.$message({
              message: `${strObj.project} ${strObj.fptype} ${strObj.fyType} ${strObj.datas} ${strObj.rmb} 请填写完整`,
              type: "error"
            });
            return;
          }
          // return
          this.add();
        }
      });

    },
    // 点击新增
    addxz() {
      this.form = { happenDate: null, invoiceType: null, amount: null, invoiceNo: null, taxPercent: null, taxValue: null, remark: null, pic: null },
        this.invoiceList.push(this.form)
    },
    addNewInvoice() {
      this.form = { happenDate: null, invoiceType: null, amount: null, invoiceNo: null, taxPercent: null, taxValue: null, remark: null, pic: null },
        this.ParticularsList.invoiceList.push(this.form)
      this.ParticularsList.ticketNum = this.ParticularsList.invoiceList.length
    },
    //获取项目列表
    getProjectList() {
      this.http.post(this.port.project.list, {},
        res => {
          if (res.code == "ok") {
            this.projectList = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    //获取审核模式
    getAuditType() {
      this.http.post('/expense-audit-setting/get', {},
        res => {
          if (res.code == "ok") {
            this.auditTypeItem = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    //获取单据列表
    getList() {
      // console.log(this.date)
      var stat = ''
      var end = ''
      if (this.date) {
        stat = this.date[0]
        end = this.date[1]
      }
      var param = {
        pageIndex: this.page,
        pageSize: this.size,
        code: this.code,
        // createDate: this.date,
        startDate: stat,
        endDate: end,
        ownerId: this.ownerId,
        type: this.queryExpenseMainType,
      };
      if (this.isAuditList) {
        param.status = 1;
      }
      if (this.permissions.costExpenseRelease) {
        param.sendState = this.sendState
      }
      this.list = [];
      // this.total = 0;
      this.http.post('/expense-sheet/list', param,
        res => {
          if (res.code == "ok") {
            this.list = res.data.records;
            this.total = res.data.total || 0;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    //删除单据
    deletes(id) {
      this.http.post('/expense-sheet/delete', { id: id },
        res => {
          if (res.code == "ok") {
            this.getList()
            this.$message({
              message: this.$t('message.successfullyDeleted'),
              type: "success"
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    //创建单据
    add() {
      // happenDate
      this.addForm.items = JSON.stringify(this.invoiceList)//这里要传发票列表的json转string
      this.addForm.totalAmount = this.totalCost
      this.http.post('/expense-sheet/add', this.addForm,
        res => {
          if (res.code == "ok") {
            this.$message({
              message: this.$t('message.fillinsuccessfully'),
              type: "success"
            });
            this.addForm = {
              code: null,
              ownerId: this.user.id,
              createDate: null,
              type: this.expenseMainTypeValue,
              ticketNum: 1, remark: null, totalAmount: 0,
            }
            this.invoiceList = []
            this.getNextCode()
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },

    //获取单据编码
    getNextCode() {
      this.http.post('/expense-sheet/getNextCode', {
      },
        res => {
          if (res.code == "ok") {
            this.addForm.code = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },

    // 获取查看单据的数据
    getParticulars(id) {
      this.http.post('/expense-sheet/getDetail', { id: id },
        res => {
          if (res.code == "ok") {
            this
            // this.ParticularsList = res.data
            var s = []
            // var b = []
            for (var i in res.data.invoiceList) {
              if (res.data.invoiceList[i].pic) {
                var b = []
                var j = {}
                var img = this.diz + '/upload/' + res.data.invoiceList[i].pic
                j.url = img
                j.title = this.$t('expensereimbursementvoucher'),
                  j.name = res.data.invoiceList[i].pic
                b.push(j)
                res.data.invoiceList[i].pic = b
                // console.log(res.data.invoiceList[i].pic)
              }
            }
            this.ParticularsList = res.data
            for (var i = 0; i <= this.ParticularsList.invoiceList.length - 1; i++) {
              s.push(this.ParticularsList.invoiceList[i].projectId)
            }
            this.projectIdName = this.projectList.filter(item => { return s.indexOf(item.id) !== -1 })
            // this.projectIdName = this.projectList.filter(p => p.id == this.ParticularsList.invoiceList[0].projectId)[0].projectName
            // console.log(res.data, '查看当前状态');
            // console.log(this.ParticularsList)
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        })
    },

    //分页
    handleCurrentChange(val) {
      this.page = val;
      console.log('page=======', this.page);
      this.getList();
    },

    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    deleteItem(item) {
      this.$confirm(this.$t('yousureyouwanttodelete'), this.$t('other.prompts'), {
        //type: 'warning'
      }).then(() => {
        this.http.post('/expense-sheet/delete', { id: item.id },
          res => {
            if (res.code == "ok") {
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          },
          error => {
            this.$message({
              message: error,
              type: "error"
            });
          });
      });
    },

    // 点击删除
    chanc(k) {
      this.invoiceList.splice(k, 1)
    },
    // 双击
    dbclick(row, event, column) {
      this.isOK = true
    },
    oosk(s) {
      this.isOK = false
    },
    ssl(index) {
      this.z = index
      this.addForm.type = index
      this.ins = index;
      this.expenseTypeList = this.allExpList.filter(a => a.mainType == this.ins);
      this.addForm.ownerId = this.user.id;

      this.getNextCode();
    },

    // 点击侧边栏事件
    side() {
      if (this.$refs.side.style.left < '0px') {
        this.$refs.sidebars.style.width = '1px'
        this.$refs.sid.style.left = '1px'
        this.$refs.side.style.left = '1px'
        this.$refs.sideI.className = 'el-icon-arrow-right'
        this.$refs.staff.style.margin = '20px 20px 0 20px'
        this.$refs.staff.style.width = '95%'
        this.$refs.xiaomian.style.width = '100%'
        this.$refs.headHe.style.paddingLeft = '20px'
        this.currentClickNum = 0
      } else {
        this.$refs.sidebars.style.width = '200px'
        this.$refs.sid.style.left = '200px'
        this.$refs.side.style.left = '-19px'
        this.$refs.sideI.className = 'el-icon-arrow-left'
        this.$refs.staff.style.margin = '20px 20px 0 220px'
        this.$refs.staff.style.width = '81%'
        this.$refs.xiaomian.style.width = '85%'
        this.$refs.headHe.style.paddingLeft = '220px'
        this.currentClickNum = 70
      }
    },
    // 费用金额失去焦点时触发
    shiqu() {
      this.addForm.totalAmount = this.invoiceList.reduce((prev, next) => {
        return prev + parseFloat(next.amount);
      }, 0)
    },
    kan() {
      this.ParticularsList.totalAmount = this.ParticularsList.invoiceList.reduce((prev, next) => {
        return prev + parseFloat(next.amount)
      }, 0)
    },
    zhi(e) {
      // console.log('看看值', e)
      var i = e
      if (this.invoiceList[i].amount == null || this.invoiceList[i].amount == 'null' || this.invoiceList[i].taxPercent == null || this.invoiceList[i].taxPercent == 'null') {
        return
      }
      this.invoiceList[i].taxValue = this.invoiceList[i].amount * this.invoiceList[i].taxPercent / 100
      // console.log(this.invoiceList[i].amount, this.invoiceList[i].taxPercent)
      var shui = this.invoiceList[i].taxPercent / 100 // 税率
      var zhi = this.invoiceList[i].amount / (1 + shui) * shui
      this.invoiceList[i].taxValue = zhi.toFixed(2)
    },
    zhiNum(i, val) {
      // console.log('看看值', i, val)
      // console.log(this.ParticularsList.invoiceList)
      if (this.ParticularsList.invoiceList[i].amount == null || this.ParticularsList.invoiceList[i].amount == 'null' || this.ParticularsList.invoiceList[i].taxPercent == null || this.ParticularsList.invoiceList[i].taxPercent == 'null') {
        return
      }
      var shui = this.ParticularsList.invoiceList[i].taxPercent / 100
      var zhi = this.ParticularsList.invoiceList[i].amount / (1 + shui) * shui
      this.ParticularsList.invoiceList[i].taxValue = zhi.toFixed(2)
    },
    zhis(e) {
      var i = e
      this.invoiceList[i].taxValue = this.invoiceList[i].taxValue.toFixed(2)
    },
    fileonLoad(item) {
      //首先判断文件类型
      let str = item.file.name.split(".");
      let format = str[str.length - 1];
      if (format != "jpg" && format != "png" && format != "pdf") {
        this.$message({
          message: this.$t('pleaseselectpictures'),
          type: "error"
        });
      } else {
        this.listLoading = true;
        let formData = new FormData();
        formData.append("multipartFile", item.file);
        this.http.uploadFile('/common/uploadFile', formData,
          res => {
            this.listLoading = false;
            if (res.code == "ok") {
              this.$message({
                message: this.$t('uploadedsuccessfully'),
                type: "success"
              });
              // this.getList();
              this.invoiceList[this.apl].pic = res.data
              // console.log(this.invoiceList)
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          },
          error => {
            this.listLoading = false;
            this.$message({
              message: error,
              type: "error"
            });
          });
      }
    },
    abl(e) {
      this.apl = e
    },
    beforeRemove(file, fileList) {
      var that = this
      setTimeout(function () {
        that.invoiceList[that.apl].pic = null
      }, 200)
    },
    fileonLoads(item) {
      //首先判断文件类型
      let str = item.file.name.split(".");
      let format = str[str.length - 1];
      if (format != "jpg" && format != "png" && format != "pdf") {
        this.$message({
          message: this.$t('pleaseselectpictures'),
          type: "error"
        });
      } else {
        this.listLoading = true;
        let formData = new FormData();
        formData.append("multipartFile", item.file);
        this.http.uploadFile('/common/uploadFile', formData,
          res => {
            this.listLoading = false;
            if (res.code == "ok") {
              this.$message({
                message: this.$t('uploadedsuccessfully'),
                type: "success"
              });
              // this.getList();
              this.ParticularsList.invoiceList[this.apl].pic = res.data
              // console.log(this.invoiceList)
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          },
          error => {
            this.listLoading = false;
            this.$message({
              message: error,
              type: "error"
            });
          });
      }
    },
    beforeRemoves(file, fileList) {
      var that = this
      setTimeout(function () {
        // this.ParticularsList.invoiceList
        that.ParticularsList.invoiceList[that.apl].pic = null
      }, 200)
    },
    imgUrl(img) {
      // var imgss = this.diz + '/upload/' + img
      // var sp = []
      // var is = {}
      // is.url = imgss
      // is.title = 1
      // sp.push(is)
      // this.imgs = sp
      // console.log(imgss)
      // console.log(this.$refs.imgsa)
      // this.$refs.imgsa.click()
      // console.log(location.protocol, location.host)
      // console.log(location.protocol + '//' + location.host + imgs)
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '本页金额合计';//this.$t('other.totals');
          return;
        }
        if (index === 2) {
          const values = data.map(item => Number(item[column.property]));
          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);
            var zhi = +sums[index] + 0
            var sl = zhi.toFixed(2)
            sl += this.$t('yuan');
            sums[index] = sl;
          } else {
            sums[index] = '';
          }
        } else {
          sums[index] = '';
        }

      });

      // console.log(sums, 123)
      this.$nextTick(() => { this.$refs.tab.doLayout() })
      return sums;
    },
    // 自定义组件事件
    selectCal(obj) {
      if (obj.distinction == '1') {
        this.addForm.ownerId = obj.id
      } else if (obj.distinction == '2') {
        this.ownerId = obj.id
      } else if (obj.distinction == '3') {
        this.ParticularsList.ownerId = obj.id
      }
    },
    // 单据导出
    exportDocument() {
      var stat = ''
      var end = ''
      if (this.date) {
        stat = this.date[0]
        end = this.date[1]
      }
      this.http.post('/expense-sheet/exportList', {
        code: this.code,
        startDate: stat,
        endDate: end,
        ownerId: this.ownerId,
        type: this.type,
      },
        res => {
          if (res.code == "ok") {
            var filePath = res.data;
            const a = document.createElement('a'); // 创建a标签
            a.setAttribute('download', '费用报销单据列表');// download属性
            a.setAttribute('href', filePath);// href链接
            a.click(); //自执行点击事件
            a.remove();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    // 单据发放
    documentIssuance(type) {
      const newList = this.multipleSelection.filter(item => item.status == 1 || item.status == 2);
      const unissueds = this.multipleSelection.filter(item => item.status != 1 && item.status != 2 && item.sendState == 0).map(item => item.id);
      const Issueds = this.multipleSelection.filter(item => item.status != 1 && item.status != 2 && item.sendState == 1).map(item => item.id);

      const showMessage = (msg, messageType) => {
        this.$message({
          message: msg,
          type: messageType
        });
      };

      if (newList.length > 0) {
        showMessage('存在待审核或已驳回的单据', 'warning');
        return;
      }

      if (type == 1 && unissueds.length == 0) {
        showMessage('请选择未发放的单据', 'warning');
        return;
      }

      if (type == 0 && Issueds.length == 0) {
        showMessage('请选择已发放的单据', 'warning');
        return;
      }

      this.callingInterface(type, type == 1 ? unissueds : Issueds);
    },
    callingInterface(type, ids) {
      this.http.post('/expense-sheet/editSendExpense', {
        expenseIds: ids.join(','),
        sendState: type
      },
        res => {
          if (res.code == "ok") {
            this.$message({
              message: '操作成功',
              type: "success"
            });
            this.getList()
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 打印
    print() {
      // let printContent = this.$refs.printContent;
      // let newWindow = window.open('', '_blank');
      // newWindow.document.write(printContent.innerHTML);
      // newWindow.document.close();
      // newWindow.focus();
      // newWindow.print();
      // newWindow.close();
      this.$print(this.$refs.printContent)
    }
  },
  beforeDestroy() {

  }
};
</script>
<style scoped lang="scss">
.tups {
  width: 100%;
  height: 25px;
  position: relative;
  z-index: 99;
  overflow: hidden;
}

.tups img {
  height: 25px !important;
  position: relative;
  z-index: 99;
}

.viewer-canvas {
  position: absolute;
  z-index: 9 !important;
}

.icl {
  margin-top: -25px !important;
}

/* 费用报销标题 */
.headine {
  width: 100%;
  height: 46.4px;
  line-height: 46.4px;
  background: #fff;
  box-sizing: border-box;
}

.headine h3 {
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
  color: #999;
}

.headine p {
  display: inline-block;
  margin: 0;
}

/* /费用报销标题 */
.sidebars {
  height: 100%;
  position: absolute;
  border-right: 1px solid #E6E6E6;
  z-index: 2;
  top: 0;
}

.sidebars h3 {
  margin: 0;
  line-height: 45px;
  background: #ffffff;
  font-weight: normal;
  color: #666;
  padding-left: 20px;
}

.sidebars .el-col-12 {
  width: 100%
}

.public {
  height: 180px;
  border-bottom: 1px solid #ddd;
}

.public .el-form-item {
  display: inline-block;
}

.pu_button {
  text-align: right;
  width: 100%;
  padding: 24px 30px;
  box-sizing: border-box;
}

.pu_bu_x .pu_bu_t {
  display: inline-block;
}

.pu_bu_x {
  margin-right: 20px;
  color: #20A0F7;
  cursor: pointer;
}

.pu_bu_t {
  color: #20A0F7;
  cursor: pointer;
  display: block;
  float: right;
  position:
    relative;
  top: -20px;
  right: 63px;
}

.pu_table {
  margin-left: 10px;
}

.pu_bu_t:hover {
  color: #7bbcff;
}

.pu_bu_x:hover {
  color: #7bbcff;
}

/* 我的单据报销凭证 */
.staff {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  background: #fff;
}

/*  */
.sdat {
  display: inline-block;
  width: 260px;
  margin-left: 13px;
}

.messages .el-form-item {
  display: inline-block;
}

.messages .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 190px;
}

/* 我的报销凭证 */
.search {
  position: relative;
  top: 20px;
  left: 20px;
}

.tables {
  margin-top: 50px;
  box-sizing: border-box;
  padding: 10px;
}

.informant .el-form-item {
  display: inline-block;
}

/* 侧边栏收索 */
.side {
  position: absolute;
  z-index: 2;
  border-right: 2px solid #DDDDDD;
  height: 100%;
  top: 0;
  width: 0;
}

.side .spans {
  width: 20px;
  height: 30px;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  margin-top: -50%;
  text-align: center;
  z-index: 1;
  background: #fff;
}

.side .spans i {
  margin-top: 7px;
  color: #C0BFBF
}

.side:hover {
  border-right: 2px solid #20A0FF;
}

.side:hover .spans {
  border: 1px solid #20A0FF;
  background: #20A0FF;
}

.side:hover .spans i {
  color: #fff;
}

/* 右边整体页面 */
.contents {
  height: 100%;
  /* padding: 30px; */
  background: #F7F7F7;
  /* position: absolute; */
}

.submits {
  margin-left: 50%;

}

.waiting {
  color: orange;
}

.rejected {
  color: red;
}

.newInvoice {
  position: absolute;
  right: 10px;
  top: -20px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  color: #20a0f7;
  font-size: 14px;
}

.newInvoice:hover {
  color: #7bbcff;
}

/* 新增打印的费用报销类型 */
.printContent {
  .printContent-detail {
    display: flex;
    flex-wrap: wrap;
  }

  .detail-item {
    width: 33%;
    font-size: 16px;
    margin-bottom: 10px;
    color: #000;

    .detail-item-title {
      color: #999;
    }

    .single {
      font-size: 14px;
    }

    .printBox {
      display: inline-block;
      width: 125px;
      text-align-last: justify;
      box-sizing: border-box;
      padding-right: 10px;
    }
  }

  .conter-box {
    .conter-border {
      width: 100%;
      box-sizing: border-box;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;

      .detail-item {
        width: 50%;
        margin-top: 10px;
      }
    }
  }
}
</style>