费用编辑模块报销单据，编辑，删除，查看功能完成

fhKeeper/formulahousekeeper/timesheet/config/index.js

@@ -2,7 +2,7 @@ var path = require('path')
 
 
  var ip = '192.168.2.21'
- var ip = '47.100.37.243'
+//  var ip = '47.100.37.243'
 //  47.100.37.243
 // var os = require('os'), ip = '', ifaces = os.networkInterfaces() // 获取本机ip
 // for (var i in ifaces) {

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

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <div class="sidebars" style="width: 200px">
+    <div class="sidebars" ref="sidebars" style="width: 200px;display: block;background: #fff">
       <h2><i class="iconfont firerock-iconcaiwu" style="padding-right: 10px"></i>费用报销模块</h2>
       <el-col :span="12">
         <el-menu
@@ -16,9 +16,9 @@
               <i class="el-icon-location"></i>
               <span>员工费用报表</span>
             </template>
-              <el-menu-item index="1-1">一般费用填报</el-menu-item>
-              <el-menu-item index="1-2">差旅费用填报</el-menu-item>
-              <el-menu-item index="1-3">外包费用填报</el-menu-item>
+              <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>
@@ -40,278 +40,284 @@
           </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 class="staff" style="margin-left: 200px" 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" :value="addForm.type" placeholder="请选择费用类型" style="width: 150px" disabled>
-              <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">
-        <el-button type="primary" @click="addxz">新增</el-button>
-        <el-button type="warning" @click="submits">提交</el-button>
-      </div>
-
-      <!-- 新增页面 -->
-      <el-dialog
-        title="新增"
-        :visible.sync="dialogVisible"
-        width="550px"
-        :before-close="handleClose"
-        >
-        <div class="messages">
-          <el-form ref="form" :model="form" label-width="80px">
-            <el-form-item label="项目">
-              <el-select v-model="form.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>
+      <div class="staff" ref="staff" style="margin-left: 200px" 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>
-            <div class="sdat">费用日期<el-date-picker
-              v-model="form.happenDate"
-              type="date"
-              style="margin-left: 12px;"
-              value-format="yyyy-MM-dd"
-              placeholder="选择日期">
-            </el-date-picker></div>
-            <el-form-item label="发票种类">
-              <el-select v-model="form.invoiceType" default-value="yyyy-MM-dd" placeholder="请选择费用类型" style="width: 150px;">
-                <el-option label="增值税专用发票" value="0"></el-option>
-                <el-option label="增值税普通发票" value="1"></el-option>
-              </el-select>
+            <!-- 填报日期 -->
+            <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.number="form.amount"></el-input>
+            <!-- 发票张数 -->
+            <el-form-item label="发票张数">
+              <el-input v-model="addForm.ticketNum" style="width: 150px"></el-input>
             </el-form-item>
-            <el-form-item label="发票号">
-              <el-input disabled v-model="form.invoiceNo"></el-input>
+            <!-- 费用类型 -->
+            <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="税率">
-              <el-input v-model.number="form.taxPercent"></el-input>
-            </el-form-item>&nbsp;&nbsp;&nbsp;%
-            <el-form-item label="税额">
-              <el-input v-model.number="form.taxValue"></el-input>
-            </el-form-item>&nbsp;&nbsp;&nbsp;元
-            <el-form-item label="备注">
-              <el-input v-model="form.remark"></el-input>
+            
+            <!-- 备注 -->
+            <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>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="ensure">确 定</el-button>
-        </span>
-      </el-dialog>
-
-      <!-- 表格 -->
-      <div class="pu_table">
-        <el-table
-          :data="invoiceList"
-          border
-          style="width: 100%"
-          @row-dblclick="dbclick">
-          <el-table-column
-            prop="projectName"
-            label="项目"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="happenDate"
-            label="费用日期"
-            width="130px">
-          </el-table-column>
-          <el-table-column
-            label="发票种类">
-            <template slot-scope="scope">  
-                <p v-if="scope.row.invoiceType == 0" style="font-size: 10px;">增值税专用发票</p>
-                <p v-else style="font-size: 10px;">增值税普通发票</p>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="费用金额">
-            <template slot-scope="scope">
-              <el-input v-if="isOK == true" v-model="scope.row.amount" style="width:100%;hight:100%" @blur="oosk(isOK)"></el-input>
-              <span v-else>{{scope.row.amount}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="invoiceNo"
-            label="发票号">
-          </el-table-column>
-          <el-table-column
-            label="税率%">
-            <template slot-scope="scope">
-              <el-input v-if="isOK == true" v-model="scope.row.taxPercent" style="width:100%;hight:100%" @blur="oosk"></el-input>
-              <span v-else>{{scope.row.taxPercent}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="税额">
-            <template slot-scope="scope">
-              <el-input v-if="isOK == true" v-model="scope.row.taxValue" style="width:100%;hight:100%" @blur="oosk"></el-input>
-              <span v-else>{{scope.row.taxValue}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="备注">
-            <template slot-scope="scope">
-              <el-input v-if="isOK == true" v-model="scope.row.remark" style="width:100%;hight:100%" @blur="oosk"></el-input>
-              <span v-else>{{scope.row.remark}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作">
-            <template slot-scope="scope">
-              <el-button type="danger" 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>
-    </div>
+        <!-- 按钮 -->
+        <div class="pu_button">
+          <el-button type="primary" @click="addxz">新增</el-button>
+        </div>
 
-    <!-- 下面部分 -->
-    <div class="staff" style="margin-left: 250px" v-if="displayTable">
-      <div style="padding:10px;">
-        <div>
-        <el-form label-width="80px" inline>
-          <!-- 填报日期 -->
-          <el-form-item label="单据编号" >
-            <el-input v-model="code" placeholder="单据编号" clearable="true"></el-input>
-          </el-form-item>
-          <!-- 填报日期 -->
-          <el-form-item label="填报日期" >
-            <el-date-picker type="date" 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" 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">查找</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="票据类型" >
+        <!-- 表格 -->
+        <div class="pu_table">
+          <el-table
+            :data="invoiceList"
+            border
+            style="width: 100%;height: 100%"
+            @row-dblclick="dbclick">
+            <el-table-column prop="projectName" label="项目" width="180">
               <template slot-scope="scope">
-                {{feeType[scope.row.type]}}
+                <el-select 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="remark" label="备注" width="250">
+            <el-table-column prop="happenDate" label="费用日期" width="170px">
               <template slot-scope="scope">
-                <span style="font-size:12px;">{{scope.row.remark}}</span>
+                <el-date-picker 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="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 label="发票种类" width="170px">
+              <template slot-scope="scope">
+                <el-select 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 v-model.number="scope.row.amount"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="invoiceNo" label="发票号" width="135px">
+              <template slot-scope="scope">
+                <el-input v-model.number="scope.row.invoiceNo"></el-input>
+              </template>
             </el-table-column>
-        </el-table>
+            <el-table-column label="税率%" width="135px">
+              <template slot-scope="scope">
+                <el-input v-model.number="scope.row.taxPercent"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="税额" width="135px">
+              <template slot-scope="scope">
+                <el-input v-model.number="scope.row.taxValue"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" width="135px">
+              <template slot-scope="scope">
+                <el-input v-model.number="scope.row.remark"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="操作">
+              <template slot-scope="scope">
+                <el-button type="danger" 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-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>
+        <el-button class="submits" type="warning" @click="submits">提交</el-button>
       </div>
 
-      <div class="tables">
-        <el-table
-          :data="getLists.records"
-          border
-          style="width: 100%">
-          <el-table-column prop="code" label="单据编号">
-          </el-table-column>
-          <el-table-column label="单据类型">
-            <template slot-scope="scope">
-              <p v-if="scope.row.type == 0">一般费用填报</p>
-              <p v-if="scope.row.type == 1">差旅费用填报</p>
-              <p v-if="scope.row.type == 2">外包费用填报</p>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="ownerId"
-            label="填报人">
-          </el-table-column>
-          <el-table-column
-            prop="status"
-            label="核审状态">
-          </el-table-column>
-          <el-table-column
-            prop="createDate"
-            label="填报时间">
-          </el-table-column>
-          <el-table-column
-            prop="remark"
-            label="备注">
-          </el-table-column>
-          <el-table-column
-            label="操作">
-            <template slot-scope="scope">
-              <el-button type="danger" size="mini" @click="deletes(scope.row.id)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+      <!-- 下面部分 -->
+      <div class="staff" ref="sta" style="margin-left: 200px" v-if="displayTable">
+        <div style="padding:10px;">
+          <div>
+          <el-form label-width="80px" inline>
+            <!-- 填报日期 -->
+            <el-form-item label="单据编号" >
+              <el-input v-model="code" placeholder="单据编号" clearable="true"></el-input>
+            </el-form-item>
+            <!-- 填报日期 -->
+            <el-form-item label="填报日期" >
+              <el-date-picker type="date" 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" 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">查找</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>
+  </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-form-item>
+            <el-form-item label="填报日期">
+              <el-input v-model="ParticularsList.createDate" :disabled="flg"></el-input>
+            </el-form-item>
+            <el-form-item label="发票张数">
+              <el-input 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="总成本">
+              <el-input v-model="ParticularsList.totalAmount" :disabled="flg"></el-input>
+            </el-form-item>
+          </el-form>
+          <el-table :data="ParticularsList.invoiceList" border style="width: 100%">
+            <el-table-column prop="projectId" label="项目" width="130">
+                <template slot-scope="scope">
+                  <el-select v-if="!flg" 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>
+                  <span v-else>{{projectIdName}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="happenDate" label="费用日期" width="172">
+              <template slot-scope="scope">
+                <el-date-picker 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 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="费用金额">
+              <template slot-scope="scope">
+                <el-input v-if="!flg" v-model.number="scope.row.amount"></el-input>
+                <span v-else>{{scope.row.amount}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="invoiceNo" label="发票号">
+              <template slot-scope="scope">
+                <el-input v-if="!flg" v-model.number="scope.row.invoiceNo"></el-input>
+                <span v-else>{{scope.row.amount}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="taxPercent" label="税率%">
+              <template slot-scope="scope">
+                <el-input v-if="!flg" v-model.number="scope.row.taxPercent"></el-input>
+                <span v-else>{{scope.row.amount}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="taxValue" label="税额">
+              <template slot-scope="scope">
+                <el-input v-if="!flg" v-model.number="scope.row.taxValue"></el-input>
+                <span v-else>{{scope.row.amount}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注">
+              <template slot-scope="scope">
+                <el-input v-if="!flg" v-model.number="scope.row.remark"></el-input>
+                <span v-else>{{scope.row.amount}}</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>
 
@@ -322,7 +328,9 @@ export default {
   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:[],
@@ -338,7 +346,7 @@ export default {
       companyId: [], // 人员的id
       dialogVisible: false,
       code: null,
-      addForm:{code:null,ownerId:null,createDate: null, ticketNum:0,type:0,remark:null,totalAmount:0,},
+      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},
@@ -347,7 +355,12 @@ export default {
       ddId: null,
       dldl: [],
       isOK: false,
-      value: null
+      z   : null,
+      value: null,
+      dialog: false, // 单据查看展示
+      ParticularsList: [],
+      projectIdName: [], // 点击查看的项目名
+      flg: false, // 是否禁用
     };
   },
   computed: {},
@@ -367,6 +380,20 @@ export default {
     this.getProjectList()
   },
   methods: {
+    // 单据查看
+    downloadByA(val) {
+      this.dialog = true
+      this.flg = true
+      this.getParticulars(val.id)
+    },
+    // 单据编辑
+    showEditName(val) {
+      this.dialog = true,
+      this.flg = false,
+      delete val.invoiceList
+      console.log(val, '将要传过去的数据');
+      this.getParticulars(val.id)
+    },
     staffs() { // 控制员工费用报表
       this.displayTable = false;
     },
@@ -374,6 +401,41 @@ export default {
       this.displayTable = true
       this.getList()
     },
+    present(){
+      this.dialog = false
+      // delete this.ParticularsList.invoiceList
+      console.log(this.ParticularsList, '传过去的数据');
+      this.adds();
+    },
+
+     adds() {
+      // happenDate
+      this.ParticularsList.items = JSON.stringify(this.ParticularsList.invoiceList)//这里要传发票列表的json转string
+      delete this.ParticularsList.invoiceList
+      console.log(this.ParticularsList, '998');
+        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, {
@@ -401,20 +463,15 @@ export default {
     },
     // 提交事件
     submits() {
-      this.add() // 获取单据编码
+      this.add()
+      this.addForm = {code:null,ownerId:null,createDate: null,type:this.z, ticketNum:1,remark:null,totalAmount:0,}
+      this.invoiceList = []
     },
     // 点击新增
     addxz() {
-      this.dialogVisible = true
-      this.getNextCode() // 获取到单据编码
-    },
-    // 点击确定
-    ensure() {
-      this.dialogVisible = false
-      this.form.projectName = this.projectList.filter(p=>p.id == this.form.projectId)[0].projectName;
+      this.getNextCode()
+      this.form = {happenDate: null,invoiceType:null,amount:null,invoiceNo:null,taxPercent:null,taxValue:null,remark:null},
       this.invoiceList.push(this.form)
-      // this.ok()
-      this.form = {happenDate: null,invoiceType:null,amount:null,invoiceNo:null,taxPercent:null,taxValue:null,remark:null}
     },
     //获取项目列表
     getProjectList() {
@@ -492,7 +549,6 @@ export default {
     //创建单据
     add() {
       // happenDate
-      // this.addForm.items = JSON.stringify(this.form);//这里要传发票列表的json转string
       this.addForm.items = JSON.stringify(this.invoiceList)//这里要传发票列表的json转string
       console.log(this.addForm, '传过去的数据');
         this.http.post('/expense-sheet/add', this.addForm,
@@ -524,7 +580,6 @@ export default {
         res => {
             if (res.code == "ok") {
                 this.addForm.code = res.data;
-                this.form.invoiceNo = res.data
                 console.log(this.addForm.code, '获取到的单据编码');
             } else {
                 this.$message({
@@ -541,6 +596,28 @@ export default {
         });
     },
 
+    // 获取查看单据的数据
+    getParticulars(id) {
+      this.http.post('/expense-sheet/getDetail', {id: id},
+      res => {
+            if (res.code == "ok") {
+                this.ParticularsList = res.data
+                this.projectIdName = this.projectList.filter(p => p.id == this.ParticularsList.invoiceList[0].projectId)[0].projectName
+            } else {
+                this.$message({
+                message: res.msg,
+                type: "error"
+                });
+            }
+        },
+        error => {
+            this.$message({
+                message: error,
+                type: "error"
+            });
+        })
+    },
+
     //分页
     handleCurrentChange(val) {
         this.page = val;
@@ -585,6 +662,30 @@ export default {
     },
     oosk(s){
       this.isOK = false
+    },
+    ssl(index) {
+      console.log(index);
+      this.z = index
+      this.addForm.type = 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.marginLeft = '0px'
+        this.$refs.sta.style.marginLeft = '0px'
+      } 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.marginLeft = '200px'
+        this.$refs.sta.style.marginLeft = '200px'
+      }
     }
   },
 };
@@ -594,6 +695,7 @@ export default {
   height: 100%;
   position: absolute;
   border-right: 1px solid #E6E6E6;
+  z-index: 2;
 }
 .sidebars h2 {
   margin: 0;
@@ -628,7 +730,12 @@ export default {
 }
 
 /* 我的单据报销凭证 */
-
+.staff{
+  border-left: 1px solid #fff;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #fff;
+  background: #fff;
+}
 
 /*  */
 .sdat{
@@ -654,4 +761,54 @@ export default {
   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;
+}
+
+.submits {
+  margin-left: 50%;
+}
+
 </style>