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" v-if="permissions.costAudit"><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-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="$t('bei-zhu')" style="display: block; width: 70%; float: left;">
              <el-input type="textarea" v-model="addForm.remark" :autosize="{minRows: 2, maxRows: 2}"></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="expenseMainTypeValue"  style="width: 150px">
                <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>
            <!-- 填报日期 -->
            <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>
            </div>
          </el-form>
        </div>
        <el-divider ></el-divider>
        <!--列表-->
          <el-table ref="tab" :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight - currentClickNum" style="width: 100%;" :summary-method="getSummaries" show-summary>
              <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 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">
                        <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>
                  </template>
              </el-table-column>
          </el-table>

          <!--工具条-->
          <el-col :span="24" class="toolbar">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[20 , 50 , 80 , 100]"
                  :page-size="20"
                  layout="total, sizes, prev, pager, next"
                  :total="total"
                  style="float:right;"
              ></el-pagination>
          </el-col>
        </div>
      </div>
  </div>
    <!-- 我的单据报销展示 -->
      <el-dialog :title="$t('detailsofReimbursementvoucher')" :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-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="$t('bei-zhu')" style="width: 280px">
              <el-input v-model="ParticularsList.remark" :disabled="flg"></el-input>
            </el-form-item>
            <el-form-item :label="$t('totalcostos')">
              ￥{{ParticularsList.totalAmount | numberToCurrency}}&nbsp;&nbsp;{{$t('yuan')}}
            </el-form-item>

            <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.totalAmount" v-if="!flg"></el-input> 元
                <span v-else>{{scope.row.totalAmount}} 元</span>
              </template> -->
          </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="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>
                  <!-- <span v-else>{{projectIdName[scope.$index].projectName}}</span> -->
                  <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"></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>
        <!-- <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="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>
  </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 {
      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" }],
      },
    };
  },
  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();
  },
  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);
        }
    },
    approve(item) {
      //审核通过
      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"
            });
        });
    },
    denyReason(item){
      this.denyForm.id = item.id
      this.denyForm.reason = ''
      // this.denyReasonDialog = true
      this.deny()
    },
    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) {
      this.dialog = true
      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.getList();
      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"
            });
        });
    },
    //获取单据列表
    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.expenseMainTypeValue,
                    };
      if (this.isAuditList) {
        param.status = 1;
      }
      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; 
            } 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;
        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 === 0) {
            sums[index] = this.$t('other.totals');
            return;
          }
          if(index === 1) {
            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');
            } 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"
            });
        });
      }
  },
};
</script>
<style scoped>
.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;
}
</style>