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>费用报销模块</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>员工费用填报</span>
                </template>
                  <el-menu-item index="1-1"><p @click="ssl(0)"> 一般费用填报</p></el-menu-item>
                  <el-menu-item index="1-2"><p @click="ssl(1)">差旅费用填报</p></el-menu-item>
                  <el-menu-item index="1-3"><p @click="ssl(2)">外包费用填报</p></el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="iconfont firerock-iconbaoxiaodan"></i>
                  <span>{{permissions.costAll?"报销凭证列表":"我的报销凭证"}}</span>
                </template>
                <el-menu-item index="2-1" ><p @click="bills(false)" >单据列表</p></el-menu-item>
                <el-menu-item index="2-2" v-if="permissions.costAudit"><p @click="bills(true)">单据审核</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>
      <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="submits" size="mini">提交</el-button></p>
      <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="submitUpload" size="mini">批量上传</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="80px" :rules="addFormRules">
            <!-- <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
            <!-- 报销人 -->
            <el-form-item label="报销人" prop="ownerId">
              <!--普通员工只能自己填报自己的 -->
              <el-select v-model="addForm.ownerId" placeholder="请选择报销人" 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>
            </el-form-item>
            <!-- 填报日期 -->
            <el-form-item label="填报日期" style="position: relative;top: 38px;" prop="createDate">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="addForm.createDate" value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
              </el-col>
            </el-form-item>
            <!-- 发票张数 -->
            <el-form-item label="发票张数">
              <el-input v-model="addForm.ticketNum" style="width: 150px"></el-input>
            </el-form-item>
            <!-- 费用类型 -->
            <el-form-item label="费用类型">
              <el-select v-model="addForm.type" disabled style="width: 150px" >
                <el-option label="一般" :value="0"></el-option>
                <el-option label="差旅" :value="1"></el-option>
                <el-option label="外包" :value="2"></el-option>
              </el-select>
            </el-form-item>
            
            <!-- 备注 -->
            <el-form-item label="备注" 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;">总费用 {{totalCost}} 元</span>
          <span v-else style="color:#606266;">总费用 ￥{{totalCost | numberToCurrency}} 元</span>
          <span class="pu_bu_x" style="margin-left:10px;" @click="addxz"> <i class="el-icon-circle-plus-outline"></i> 新增发票</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="所属项目" width="180">
              <template slot-scope="scope">
                <el-select size="small" v-model="scope.row.projectId" placeholder="项目" style="width: 150px" filterable>
                  <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>
              </template>
            </el-table-column>
            <el-table-column prop="happenDate" label="费用日期" 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="选择日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="发票种类" width="175px">
              <template slot-scope="scope">
                <el-select size="small" v-model="scope.row.invoiceType" placeholder="请选择费用类型" style="width: 150px;">
                  <el-option label="增值税专用发票" value="0"></el-option>
                  <el-option label="增值税普通发票" value="1"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="费用类型" width="155px">
              <template slot-scope="scope">
                <el-select size="small" v-model="scope.row.expenseType" placeholder="费用类型" 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="费用金额(含税)" 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="发票号" width="135px">
              <template slot-scope="scope">
                <el-input size="small" v-model.number="scope.row.invoiceNo"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="税率%" width="135px">
              <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="税额" width="135px">
              <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="备注" 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="报销凭证" 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">点击上传</el-button>
                  </el-upload>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button  type="default" size="mini" style="display: inline-block;margin-left:0;margin-top: 3px" @click="chanc(scope.$index)">删除</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: 85%;float:right;background: #fff;position: relative;">
      <div v-if="displayTable">
        <div style="padding-left:10px;padding-right:10px;">
          <div>
          <el-form label-width="70px" inline >
            <!-- 报销人 -->
            <el-form-item label="报销人">
              <el-select v-model="ownerId" size="small" clearable placeholder="选择报销人" 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>
            </el-form-item>
            <!-- 单据编号 -->
            <el-form-item label="单据编号" >
              <el-input v-model="code" size="small" placeholder="单据编号" clearable="true" style="width: 120px"></el-input>
            </el-form-item>
            <!-- 费用类型 -->
            <el-form-item label="费用类型">
              <el-select v-model="type" size="small" placeholder="请选择费用类型" clearable="true" style="width: 150px">
                <el-option label="一般费用" value="0"></el-option>
                <el-option label="差旅费用" value="1"></el-option>
                <el-option label="外包费用" value="2"></el-option>
              </el-select>
            </el-form-item>
            <!-- 填报日期 -->
            <el-form-item label="填报日期" >
              <el-date-picker
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                size="small"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 280px">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="getList" size="small">查找</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider ></el-divider>
        <!--列表-->
          <el-table ref="tab" :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;" :summary-method="getSummaries" show-summary>
              <el-table-column prop="code" label="票据编号"></el-table-column>
              <el-table-column prop="totalAmount" label="金额(元)" 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="报销人" ></el-table-column>
              <el-table-column prop="createDate" label="填报日期" ></el-table-column>
              <el-table-column prop="ticketNum" label="发票张数" ></el-table-column>
              <el-table-column prop="type" label="票据类型" >
                <template slot-scope="scope">
                  {{feeType[scope.row.type]}}
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="250">
                <template slot-scope="scope">
                  <span style="font-size:12px;">{{scope.row.remark}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <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 label="操作" :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)" >查看</el-button>
                      <el-button  size="mini" style="margin-left:5px;" @click.stop.native="approve(scope.row)" >通过</el-button>
                      <el-button  size="mini" style="margin-left:5px;" @click.stop.native="deny(scope.row)" >驳回</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="报销凭证详情" :visible.sync="dialog" width="1000px">
        <!-- 内容主体 -->
        <div class="informant"><!--  报销人 -->
          <el-form :model="ParticularsList" label-width="80px">
            <el-form-item label="报销人" style="width: 270px" :rules="{ required: true, message: '请选择报销人', trigger: 'blur' }">
              <!-- <el-input v-show="flg" v-model="ParticularsList.ownerName" disabled ></el-input> -->
              <el-select v-model="ParticularsList.ownerId" placeholder="请选择报销人" 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>
            </el-form-item>
            <el-form-item label="填报日期">
              <!-- <el-input v-model="ParticularsList.createDate" :disabled="flg"></el-input> -->
              <el-date-picker type="date" :disabled="flg" placeholder="选择日期" v-model="ParticularsList.createDate" value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
            </el-form-item>
            <el-form-item label="发票张数">
              <el-input v-enter-number v-model="ParticularsList.ticketNum" :disabled="flg"></el-input>
            </el-form-item>
            <el-form-item label="费用类型" style="width: 270px"> 
                <el-select v-model="ParticularsList.type" placeholder="请选择" :disabled="flg">
                  <el-option label="一般" :value="0"></el-option>
                  <el-option label="差旅" :value="1"></el-option>
                  <el-option label="外包" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" style="width: 280px">
              <el-input v-model="ParticularsList.remark" :disabled="flg"></el-input>
            </el-form-item>
            <el-form-item label="总费用">
              ￥{{ParticularsList.totalAmount | numberToCurrency}}&nbsp;&nbsp;元
            </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>
          <el-table :data="ParticularsList.invoiceList" border style="width: 100%">
            <el-table-column prop="projectId" label="项目" width="155">
                <template slot-scope="scope">
                  <el-select size="small" v-if="!flg" v-model="scope.row.projectId" placeholder="项目" 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="费用日期" 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="选择日期">
                </el-date-picker>
                <span v-else>{{scope.row.happenDate}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="invoiceType" label="发票种类" width="172">
              <template slot-scope="scope">
                <el-select size="small" v-if="!flg" v-model="scope.row.invoiceType" placeholder="请选择费用类型" style="width: 150px;">
                  <el-option label="增值税专用发票" :value="0"></el-option>
                  <el-option label="增值税普通发票" :value="1"></el-option>
                </el-select>
                <span v-else>{{typeInvoic[scope.row.invoiceType]}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="invoiceType" label="费用类型" width="172">
              <template slot-scope="scope">
                <el-select v-if="!flg" size="small" v-model="scope.row.expenseType" placeholder="请选择费用类型" 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="费用金额(含税:元)" 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="发票号" width="172">
              <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="税率%" width="172">
              <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="税额(元)" width="172">
              <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="备注" 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="报销凭证" 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">点击上传</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>暂无单据</span>    
                </div>
              </template>
            </el-table-column>
            <!-- 删除 -->
            <el-table-column fixed="right"
              label="操作" 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)">删除</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">取 消</el-button>
          <el-button v-if="!flg" type="primary" @click="present()">确 定</el-button>
          <el-button v-else type="primary" @click="dialog = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量上传 -->
      <el-dialog title="批量上传" v-if="importDialog" :visible.sync="importDialog" customClass="customWidth" width="500px">
            <p>1. 下载
            <el-link type="primary" style="margin-left:5px;" :underline="false" href="./upload/费用报销导入模板.xlsx" download="费用报销导入模板.xlsx">费用报销导入模板.xlsx</el-link>
            </p>
            <p>2. 填写excel模板,并上传。</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="">选取文件</el-button>
                <el-button type="primary" size="small" style="margin-left:30px" :underline="false" :loading="importingData" @click="submitUploadSure" :disabled="fileList.length == 0">开始上传</el-button>
                <el-button size="small" style="margin-left:30px" @click="fileListClear">清空</el-button>
              </el-upload>
              </div>
            </div>
        </el-dialog>
  </section>
</template>

<script>
export default {
  name: "expense",
  components: {},
  props: {},
  data() {
    return {
      fileList: [],
      muHeight: document.documentElement.clientHeight || document.body.clientHeight,
      imgs: [],
      addFormRules: {
        ownerId: [{ required: true, message: "请选择报销人", trigger: "blur" }],
        createDate: [{ required: true, message: "请选择日期", trigger: "blur" }],
      },      
      isAuditList: false,
      statusTxt:["审核通过","待审核", "已驳回", "已撤销"],
      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,},
      feeType:["一般费用","差旅费用","外包费用"],
      typeInvoic: ['增值税专用发票', '增值税普通发票'],
      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: ['一般费用填报', '差旅费用填报', '外包费用填报'],
      ins: 0,
      apl: '',
      diz: 'http://worktime.ttkuaiban.com',
      importDialog: false,
      importingData: false
    };
  },
  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.getExpList();
  },
  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: {
    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: "请选择.xls或.xlsx文件",
          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('确认上传？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          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: "上传成功",
                      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"
            });
        });
    },
    deny(item) {
      //审核驳回
      this.http.post('/expense-sheet/deny', {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"
            });
        });
    },
    getExpList() {
      this.http.post('/expense-type/getList', {
        },
        res => {
            if (res.code == "ok") {
                this.allExpList = res.data;
                this.expenseTypeList = this.allExpList.filter(a=>a.mainType == 0);
            } 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();
      }
    },
    bills(audit) { // 控制
      this.isAuditList = audit;
      this.getList();
      this.displayTable = true;
    },
    present(){
      this.dialog = false
      this.adds();
    },
    // 删除操作
    delec(ids) {
      // console.log('删除操作', ids);
      this.ParticularsList.invoiceList.splice(ids, 1)
      this.kan()
    },
     adds() {
      // happenDate
      // console.log(this.ParticularsList.invoiceList, '123')
      var spl = this.ParticularsList.invoiceList
      for(var i in spl) {
        if(spl[i].pic) {
          if(spl[i].pic[0].name) {
            spl[i].pic = spl[i].pic[0].name
          }
        } 
      }
      // console.log(spl)
      // return
      this.ParticularsList.items = JSON.stringify(this.ParticularsList.invoiceList)//这里要传发票列表的json转string
      
      delete this.ParticularsList.invoiceList
        this.http.post('/expense-sheet/add', this.ParticularsList,
        res => {
            if (res.code == "ok") {
                this.bills(this.isAuditList);
                this.$message({
                message: '编辑成功',
                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
        },
        res => {
            if (res.code == "ok") {
                this.users = res.data.records;
                if (!this.permissions.costAudit) {
                    this.addForm.ownerId = this.user.id;
                    this.addForm.status = 1;
                }
            } 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: '请添加发票',
                    type: "error"
                });
                return;
              }
              this.add();
                  this.addForm = {code:null,ownerId:null,createDate: null,type:this.z, ticketNum:1,remark:null,totalAmount:0,}
                  this.invoiceList = []
              
            }
      });
      
    },
    // 点击新增
    addxz() {
      this.form = {happenDate: null,invoiceType:null,amount:null,invoiceNo:null,taxPercent:null,taxValue:null,remark:null,pic: null},
      this.invoiceList.push(this.form)
    },
    //获取项目列表
    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.type,
                    };
      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: '删除成功',
                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: '填报成功',
                type: "success"
                });
            } 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 = '报销凭证',
                    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("确认要删除吗?", "提示", {
                    //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'
      } 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'
      }
    },
    // 费用金额失去焦点时触发
    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") {
            this.$message({
                message: "请选择图片",
                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: "上传成功",
                        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") {
            this.$message({
                message: "请选择图片",
                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: "上传成功",
                        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] = '合计';
            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 += ' 元';
            } else {
              sums[index] = 'N/A';
            }
          } else {
            sums[index] = 'N/A';
          }
          
        });

        // console.log(sums, 123)
        this.$nextTick(()=>{ this.$refs.tab.doLayout()})
        return sums;
      }
  },
};
</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;
}
</style>