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

<template>
  <section>
    <div class="sidebars" ref="sidebars" style="width: 200px;display: block;background: #fff">
      <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-menu-item index="2" @select="bills">
              <i class="el-icon-setting"></i>
              <span slot="title">我的报销单据</span>
            </el-menu-item> -->
          </el-menu>
           <el-menu
          default-active="1-1"
          class="el-menu-vertical-demo"
          @select="bills"
          background-color="#ffffff"
          text-color="#666666"
          active-text-color="#20A0FF"
          style="width:100%">
            <el-menu-item index="2" @select="bills">
              <i class="iconfont firerock-iconbaoxiaodan"></i>
              <span slot="title">报销单据列表</span>
            </el-menu-item>
          </el-menu>
      </el-col>
    </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>
    </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" label-width="80px">
            <!-- <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
            <!-- 填报人 -->
            <el-form-item label="填报人">
              <el-select v-model="addForm.ownerId" placeholder="请选择填报人" style="width: 150px">
                <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;">
              <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"></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="this.addForm.totalAmount <= 0" style="color:#606266;">总成本 {{this.addForm.totalAmount}} 元</span>
          <span v-else style="color:#606266;">总成本 ￥{{this.addForm.totalAmount | 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%"
            max-height="300px"
            @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" >
                  <el-option v-for="(item, index) in projectList" :key="index" :label="item.projectName" :value="item.id" @click="ok(item)"></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="135px">
              <template slot-scope="scope">
                <el-input size="small" v-enter-number v-model.number="scope.row.amount" @change="shiqu(scope.row.amount)"></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" v-enter-number v-model.number="scope.row.taxPercent"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="税额" width="135px">
              <template slot-scope="scope">
                <el-input size="small" v-enter-number v-model.number="scope.row.taxValue"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="135px">
              <template slot-scope="scope">
                <el-input size="small" v-model.number="scope.row.remark"></el-input>
              </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="80px" inline >
            <!-- 填报日期 -->
            <el-form-item label="单据编号" >
              <el-input v-model="code" size="small" placeholder="单据编号" clearable="true"></el-input>
            </el-form-item>
            <!-- 填报日期 -->
            <el-form-item label="填报日期" >
              <el-date-picker type="date" size="small" clearable="true" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="date" style="width: 200px;"></el-date-picker>
            </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>
              <el-button @click="getList" size="small">查找</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider ></el-divider>
        <!--列表-->
          <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
              <el-table-column prop="code" label="票据编号"></el-table-column>
              <el-table-column prop="totalAmount" label="金额(元)" ></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 label="操作" width="160">
                  <template slot-scope="scope">
                      <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)"></el-button>
                      <el-button icon="el-icon-delete"  circle size="mini" style="margin-left:10px;" @click.stop.native="deleteItem(scope.row)"></el-button>
                      
                  </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="填报人">
              <el-input v-model="ParticularsList.ownerName" :disabled="flg"></el-input>
              <!-- <el-select v-model="ParticularsList.ownerId" placeholder="请选择填报人" style="width: 150px" :disabled="flg">
                <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="费用类型">
                <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="备注">
              <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" :value="item.id" @click="ok(item)"></el-option>
                  </el-select>
                  <span v-else>{{projectIdName[scope.$index].projectName}}</span>
                </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="amount" label="费用金额(元)" width="172">
              <template slot-scope="scope">
                <el-input size="small" v-enter-number v-if="!flg" v-model.number="scope.row.amount" @change="kan"></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-enter-number v-if="!flg" v-model.number="scope.row.taxPercent"></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-enter-number v-if="!flg" v-model.number="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.number="scope.row.remark"></el-input>
                <span v-else>{{scope.row.remark}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 取消和确定 -->
        <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>
  </section>
</template>

<script>
export default {
  name: "expense",
  components: {},
  props: {},
  data() {
    return {
      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
    };
  },
  computed: {},
  watch: {},
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 195;
    const that = this;
    window.onresize = function temp() {
        that.tableHeight = window.innerHeight - 195;
    };
  },

  mounted() {
    this.getUsers() // 获取人员信息
    this.getList() // 获取单据列表
    this.getProjectList()
  },
  filters: {
      numberToCurrency(value) {
          if (!value) return '0.00'
          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: {
    // 单据查看
    downloadByA(val) {
      this.dialog = true
      this.flg = true;
      this.getParticulars(val.id)
    },
    // 单据编辑
    showEditName(val) {
      this.dialog = true,
      this.flg = false,
      delete val.invoiceList
      this.getParticulars(val.id)
      // this.getUsers() // 获取人员信息
      // console.log(this.ParticularsList.ownerName, '看看打印的');
      // console.log(this.users, '看看打印的');
      // var k = this.users.filter(p => p.id == this.ParticularsList.ownerName)
    },
    staffs() { // 控制员工费用报表
      this.displayTable = false;
    },
    bills() { // 控制
      this.displayTable = true
      this.getList()
    },
    present(){
      this.dialog = false
      this.adds();
    },

     adds() {
      // happenDate
      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.$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;
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    // 提交事件
    submits() {
      this.add()
      this.addForm = {code:null,ownerId:null,createDate: null,type:this.z, ticketNum:1,remark:null,totalAmount:0,}
      this.invoiceList = []
    },
    // 点击新增
    addxz() {
      this.getNextCode()
      this.form = {happenDate: null,invoiceType:null,amount:null,invoiceNo:null,taxPercent:null,taxValue:null,remark: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() {
      this.http.post('/expense-sheet/list', {pageIndex: this.page,
                    pageSize: this.size,
                    code: this.code,
                    createDate: this.date,
                    ownerId:this.ownerId,
                    type:this.type,
                    },
        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.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 = []
                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, '查看当前状态');
            } 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
    },
    
    // 点击侧边栏事件
    side() {
      if(this.$refs.side.style.left < '0px') {
        this.$refs.sidebars.style.display = 'none'
        this.$refs.sid.style.left = '230px'
        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.display = 'block'
        this.$refs.sid.style.left = '430px'
        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 + next.amount;
      }, 0)
    },
    kan(){
      this.ParticularsList.totalAmount = this.ParticularsList.invoiceList.reduce((prev, next) => {
        return prev + next.amount
      }, 0)
    }
  },
};
</script>
<style scoped>
/* 费用报销标题 */
.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: 230px;
  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%;

}

</style>