From 58b8aa50969b1fbf453c7545a7cad1c61fdea082 Mon Sep 17 00:00:00 2001
From: JiilingLee <462362@qq.com>
Date: Mon, 16 Oct 2023 13:26:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B6=E4=BB=96=E8=B5=84=E6=96=99=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/accounting/other/index.vue          |   10 +-
 src/views/accounting/voucherDetails/index.vue | 1599 ++++-------------
 2 files changed, 314 insertions(+), 1295 deletions(-)

diff --git a/src/views/accounting/other/index.vue b/src/views/accounting/other/index.vue
index 6519d207..4ab97524 100644
--- a/src/views/accounting/other/index.vue
+++ b/src/views/accounting/other/index.vue
@@ -9,10 +9,10 @@
       v-show="showSearch"
       label-width="88px"
     >
-      <el-form-item label="表名" prop="name">
+      <el-form-item label="文件名" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入表名"
+          placeholder="请输入文件名"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -74,7 +74,7 @@
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
       <!-- <el-table-column label="主键" align="center" prop="id" /> -->
-      <el-table-column label="表名" align="center" prop="name" />
+      <el-table-column label="文件名" align="center" prop="name" />
       <el-table-column label="OA/ERP流程编号" align="center" prop="flowCode" />
       <el-table-column label="文件来源" align="center" prop="source" />
       <el-table-column label="年度" align="center" prop="year" />
@@ -177,8 +177,8 @@
       >
         <el-row>
           <el-col :span="8">
-            <el-form-item label="表名" prop="name">
-              <el-input v-model="form.name" placeholder="请输入表名" />
+            <el-form-item label="文件名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入文件名" />
             </el-form-item>
           </el-col>
           <el-col :span="8">
diff --git a/src/views/accounting/voucherDetails/index.vue b/src/views/accounting/voucherDetails/index.vue
index df03370a..8a972e3a 100644
--- a/src/views/accounting/voucherDetails/index.vue
+++ b/src/views/accounting/voucherDetails/index.vue
@@ -1,1322 +1,341 @@
 <template>
-  <div class="charge-container" id="chargeContainer">
-    <div class="charge">
-      <!--<h1 class="charge-title">记账凭证</h1>-->
-      <div class="charge-header">
-
-
-        <div>
-          凭证号
-          <el-input type="number" style="width: 80px;" min="1" v-model="voucher.no"></el-input>
-        </div>
-
-        <div>
-          日期
-          <el-date-picker type="date" style="width: 145px;" v-model="voucher.date"></el-date-picker>
-        </div>
-
-        <div style="font-size: 24px;">记账凭证</div>
-
-        <div style="float: right;position: relative;">
-          附单据
-          <el-input type="number" style="width: 80px;" min="0" v-model="voucher.bill"></el-input>
-          张
-          <i class="el-icon-info"></i>
-          <div class="tip-box">
-            <table class="tip-box-table" border="1">
-              <tr style="background-color: #f5f4f4;">
-                <td>操作</td>
-                <td>快捷键</td>
-              </tr>
-              <tr>
-                <td>选择列表</td>
-                <td>F7</td>
-              </tr>
-              <tr>
-                <td>自动平衡</td>
-                <td>=</td>
-              </tr>
-              <tr>
-                <td>新增</td>
-                <td>F4</td>
-              </tr>
-              <tr>
-                <td>保存</td>
-                <td>Ctrl+S</td>
-              </tr>
-              <tr>
-                <td>保存并审核</td>
-                <td>F10</td>
-              </tr>
-              <tr>
-                <td>保存并新增</td>
-                <td>F11</td>
-              </tr>
-              <tr>
-                <td>复制上一行</td>
-                <td>//</td>
-              </tr>
-              <tr>
-                <td>复制上一行摘要</td>
-                <td>..</td>
-              </tr>
-              <tr>
-                <td>金额自动切换借贷方</td>
-                <td>空格键</td>
-              </tr>
-              <tr>
-                <td>单据头与分录快速切换</td>
-                <td>Tab</td>
-              </tr>
-            </table>
-          </div>
-        </div>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="条目顺序号" prop="lineNum">
+        <el-input v-model="queryParams.lineNum" placeholder="请输入条目顺序号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="制单人" prop="createBy">
+        <el-input v-model="queryParams.createBy" placeholder="请输入制单人" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建日期" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="摘要" prop="digest">
+        <el-input v-model="queryParams.digest" placeholder="请输入摘要" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="凭证类型" prop="voucherType">
+        <el-select v-model="queryParams.voucherType" placeholder="请选择凭证类型" clearable size="small">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="科目编码" prop="subjectCode">
+        <el-input v-model="queryParams.subjectCode" placeholder="请输入科目编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="科目名称" prop="subjectName">
+        <el-input v-model="queryParams.subjectName" placeholder="请输入科目名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="辅助核算" prop="assistCheck">
+        <el-input v-model="queryParams.assistCheck" placeholder="请输入辅助核算" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="借方金额" prop="debitMoney">
+        <el-input v-model="queryParams.debitMoney" placeholder="请输入借方金额" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="贷方金额" prop="creditorMoney">
+        <el-input v-model="queryParams.creditorMoney" placeholder="请输入贷方金额" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="相关单据关联号" prop="flowId">
+        <el-input v-model="queryParams.flowId" placeholder="请输入相关单据关联号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="凭证id，一个凭证对应多个凭证详情" prop="voucherId">
+        <el-input v-model="queryParams.voucherId" placeholder="请输入凭证id，一个凭证对应多个凭证详情" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="凭证号" prop="voucherNum">
+        <el-input v-model="queryParams.voucherNum" placeholder="请输入凭证号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="用户id" prop="userId">
+        <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="归档状态" prop="fileStatus">
+        <el-select v-model="queryParams.fileStatus" placeholder="请选择归档状态" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.ARCHIVES_FILE_STATUS)"
+                       :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['accounting:voucher-details:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['accounting:voucher-details:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="条目顺序号" align="center" prop="lineNum" />
+      <el-table-column label="制单人" align="center" prop="createBy" />
+      <el-table-column label="创建日期" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="摘要" align="center" prop="digest" />
+      <el-table-column label="凭证类型" align="center" prop="voucherType" />
+      <el-table-column label="科目编码" align="center" prop="subjectCode" />
+      <el-table-column label="科目名称" align="center" prop="subjectName" />
+      <el-table-column label="辅助核算" align="center" prop="assistCheck" />
+      <el-table-column label="借方金额" align="center" prop="debitMoney" />
+      <el-table-column label="贷方金额" align="center" prop="creditorMoney" />
+      <el-table-column label="相关单据关联号" align="center" prop="flowId" />
+      <el-table-column label="凭证id，一个凭证对应多个凭证详情" align="center" prop="voucherId" />
+      <el-table-column label="凭证号" align="center" prop="voucherNum" />
+      <el-table-column label="用户id" align="center" prop="userId" />
+      <el-table-column label="归档状态" align="center" prop="fileStatus">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.ARCHIVES_FILE_STATUS" :value="scope.row.fileStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['accounting:voucher-details:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['accounting:voucher-details:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="条目顺序号" prop="lineNum">
+          <el-input v-model="form.lineNum" placeholder="请输入条目顺序号" />
+        </el-form-item>
+        <el-form-item label="制单人" prop="createBy">
+          <el-input v-model="form.createBy" placeholder="请输入制单人" />
+        </el-form-item>
+        <el-form-item label="摘要" prop="digest">
+          <el-input v-model="form.digest" placeholder="请输入摘要" />
+        </el-form-item>
+        <el-form-item label="凭证类型" prop="voucherType">
+          <el-select v-model="form.voucherType" placeholder="请选择凭证类型">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="科目编码" prop="subjectCode">
+          <el-input v-model="form.subjectCode" placeholder="请输入科目编码" />
+        </el-form-item>
+        <el-form-item label="科目名称" prop="subjectName">
+          <el-input v-model="form.subjectName" placeholder="请输入科目名称" />
+        </el-form-item>
+        <el-form-item label="辅助核算" prop="assistCheck">
+          <el-input v-model="form.assistCheck" placeholder="请输入辅助核算" />
+        </el-form-item>
+        <el-form-item label="借方金额" prop="debitMoney">
+          <el-input v-model="form.debitMoney" placeholder="请输入借方金额" />
+        </el-form-item>
+        <el-form-item label="贷方金额" prop="creditorMoney">
+          <el-input v-model="form.creditorMoney" placeholder="请输入贷方金额" />
+        </el-form-item>
+        <el-form-item label="相关单据关联号" prop="flowId">
+          <el-input v-model="form.flowId" placeholder="请输入相关单据关联号" />
+        </el-form-item>
+        <el-form-item label="凭证id，一个凭证对应多个凭证详情" prop="voucherId">
+          <el-input v-model="form.voucherId" placeholder="请输入凭证id，一个凭证对应多个凭证详情" />
+        </el-form-item>
+        <el-form-item label="凭证号" prop="voucherNum">
+          <el-input v-model="form.voucherNum" placeholder="请输入凭证号" />
+        </el-form-item>
+        <el-form-item label="用户id" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入用户id" />
+        </el-form-item>
+        <el-form-item label="归档状态" prop="fileStatus">
+          <el-radio-group v-model="form.fileStatus">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.ARCHIVES_FILE_STATUS)"
+                      :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
       </div>
-      <table class="charge-table" border="1">
-        <tr>
-          <td width="6%">操作</td>
-          <td :width="isAuxiliary?'14%':'22%'">摘要</td>
-          <td :width="isAuxiliary?'15%':'22%'">会计科目</td>
-          <td width="14%" v-if="isAuxiliary">辅助核算</td>
-          <td width="50%">
-            <table style="height: 50px;">
-              <tr style="border-bottom: 1px solid #bab9b9;">
-                <td width="50%" style="border-right: 1px solid #bab9b9;">借方金额</td>
-                <td width="50%">贷方金额</td>
-              </tr>
-              <tr>
-                <td style="border-right: 1px solid #bab9b9;">
-                  <table class="debtor-lender-table" style="height: 100%;">
-                    <tr>
-                      <td>亿</td>
-                      <td>千</td>
-                      <td>百</td>
-                      <td>十</td>
-                      <td>万</td>
-                      <td>千</td>
-                      <td>百</td>
-                      <td>十</td>
-                      <td>元</td>
-                      <td>角</td>
-                      <td>分</td>
-                    </tr>
-                  </table>
-                </td>
-                <td>
-                  <table class="debtor-lender-table" style="height: 100%;">
-                    <tr>
-                      <td>亿</td>
-                      <td>千</td>
-                      <td>百</td>
-                      <td>十</td>
-                      <td>万</td>
-                      <td>千</td>
-                      <td>百</td>
-                      <td>十</td>
-                      <td>元</td>
-                      <td>角</td>
-                      <td>分</td>
-                    </tr>
-                  </table>
-                </td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-        <tr v-for="(item,index) in list">
-          <td>
-            <div @click="addList" class="charge-table-icon">
-              <i class="el-icon-plus" style="color: orangered;"></i>
-            </div>
-            <div @click="removeList(index)" class="charge-table-icon">
-              <i class="el-icon-close" style="color: #4a90e2;"></i>
-            </div>
-          </td>
-          <td>
-            <div @click="showInput(index,'main')" v-if="!item.isShowMainInput" class="main-subject">
-              <!--{{item.main}}-->
-              <textarea v-model="item.main"></textarea>
-            </div>
-            <div class="main-subject" v-if="item.isShowMainInput">
-              <!--<input type="text" v-model="item.main" @blur="hideInput(index,'main')" v-focus @keyup="keyupEvents(index,$event,1)">-->
-              <textarea v-model="item.main" @blur="hideInput(index,'main')" v-focus
-                        @keyup="keyupEvents(index,$event,1)"></textarea>
-
-              <div class="dropdown-menu suggest-list special-elements" style="top: 60px;">
-                <ul class="item-list">
-                  <li v-for="main in mainList" v-if="main.name.indexOf(item.main.trim())!=-1"
-                      :class="main.name==item.main?'hover':''"
-                      @click="voluationInput(index,'main',main.name)">{{ main.name }}
-                  </li>
-                </ul>
-              </div>
-
-            </div>
-            <i v-if="item.isShowMainInput" class="el-icon-more special-elements"
-               @click="selectionList(index,'main')"></i>
-          </td>
-          <td>
-            <div @click="showInput(index,'subject')" v-if="!item.isShowSubjectInput" class="main-subject">
-              <!--{{item.subject}}-->
-              <textarea v-model="item.subject.name"></textarea>
-            </div>
-            <div class="main-subject" v-if="item.isShowSubjectInput">
-              <!--<input type="text" v-model="item.subject" @blur="hideInput(index,'subject')" v-focus @keyup="keyupEvents(index,$event,2)">-->
-              <textarea v-model="item.subject.name" @blur="hideInput(index,'subject')" v-focus
-                        @keyup="keyupEvents(index,$event,2)"></textarea>
-
-              <div class="dropdown-menu suggest-list special-elements" style="top: 60px;">
-                <ul class="item-list">
-                  <li v-for="subject in subjectList" v-if="subject.name.indexOf(item.subject.name.trim())!=-1"
-                      :class="subject.name==item.subject.name?'hover':''"
-                      @click="voluationInput(index,'subject',subject)">
-                    {{ subject.name }}
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <i v-if="item.isShowSubjectInput" class="el-icon-more special-elements"
-               @click="selectionList(index,'subject')"></i>
-          </td>
-          <td v-if="isAuxiliary" :disabled="!item.isAuxiliary" :class="item.isAuxiliary?'':'td-auxiliary-dis'">
-            <div class="auxiliary-accounting" v-if="item.isAuxiliary" @click="selectionList(index,'auxiliary')">
-              <div v-if="item.auxiliary && item.auxiliary!=''" class="auxiliary-single">
-                <span>{{ item.auxiliary }}</span>
-                <i class="el-icon-close" @click.stop="clearAuxiliary(index,$event)"></i>
-              </div>
-            </div>
-          </td>
-          <td>
-            <table>
-              <tr>
-                <td width="50%" style="border-right: 1px solid #bab9b9;">
-                  <table class="debtor-tbale debtor-lender-table">
-                    <tr @click="showInput(index,'debtor')" v-if="!item.isShowDebtorInput"
-                        :class="item.debtor*1<0?'tr-negative':''">
-                      <td v-for="debtor in item.debtorList">{{ debtor }}</td>
-                    </tr>
-
-                    <tr v-if="item.isShowDebtorInput">
-                      <input @blur="hideInput(index,'debtor')" @keyup="debtorInputKeyUp(index,$event,3)"
-                             v-model="item.debtor" maxlength="12"
-                             v-focus
-                             onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
-                    </tr>
-                  </table>
-                </td>
-                <td width="50%">
-                  <table class="lender-tbale debtor-lender-table">
-                    <tr v-if="!item.isShowLenderInput" @click="showInput(index,'lender')"
-                        :class="item.lender*1<0?'tr-negative':''">
-                      <td v-for="lender in item.lenderList">{{ lender }}</td>
-                    </tr>
-
-                    <tr v-if="item.isShowLenderInput">
-                      <input @blur="hideInput(index,'lender')" @keyup="lenderInputKeyUp(index,$event,4)"
-                             v-model="item.lender" maxlength="11"
-                             v-focus
-                             onkeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;">
-                    </tr>
-                  </table>
-                </td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-        <tr>
-          <td :colspan="isAuxiliary?4:3" style="text-align: left;padding-left: 10px;">合计：</td>
-          <td>
-            <table>
-              <tr>
-                <td width="50%" style="border-right: 1px solid #bab9b9;">
-                  <table class="debtor-tbale debtor-lender-table">
-                    <tr>
-                      <td v-for="debtor in debtorTotalList">{{ debtor }}</td>
-                    </tr>
-                  </table>
-                </td>
-                <td width="50%">
-                  <table class="lender-tbale debtor-lender-table">
-                    <tr>
-                      <td v-for="lender in lenderTotalList">{{ lender }}</td>
-                    </tr>
-                  </table>
-                </td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-      </table>
-      <div style="height: 50px;line-height: 50px;">制单人：</div>
-<!--      <div style="text-align: right;" v-show="saveVisible">-->
-<!--        <el-button @click="preservation(1)">暂存</el-button>-->
-<!--        <el-button type="primary" @click="preservation(2)">保存</el-button>-->
-<!--      </div>-->
-    </div>
-
-    <!--<el-dialog title="摘要列表" width="30%" :visible.sync="dialogMainVisible">
-      <main-selector @closeMainDialog="closeMainDialog" ref="mainSelector"></main-selector>
-      <span slot="footer" class="dialog-footer">
-            <el-button @click="closeMainDialog">取消</el-button>
-            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit">确认</el-button>
-          </span>
-    </el-dialog>
-    <el-dialog title="会计科目" width="30%" :visible.sync="dialogSubjectVisible">
-      <subject-selector @closeSubjectDialog="closeSubjectDialog" ref="subjectSelector"></subject-selector>
-      <span slot="footer" class="dialog-footer">
-            <el-button @click="closeSubjectDialog">取消</el-button>
-            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit">确认</el-button>
-          </span>
     </el-dialog>
-    <el-dialog title="请选择" width="30%" :visible.sync="dialogAuxiliaryVisible">
-      <auxiliary-selector @closeAuxiliaryDialog="closeAuxiliaryDialog" ref="auxiliarySelector"></auxiliary-selector>
-      <span slot="footer" class="dialog-footer">
-            <el-button @click="closeAuxiliaryDialog">取消</el-button>
-            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit">确认</el-button>
-          </span>
-    </el-dialog>-->
-
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-import {
-  getVoucherDetailsPage
-} from '@/api/accounting/voucherDetails';
-
-Vue.directive('focus', {
-  // 当绑定元素插入到 DOM 中。
-  inserted: function (el) {
-    // 聚焦元素
-    el.focus();
-  }
-});
+import { createVoucherDetails, updateVoucherDetails, deleteVoucherDetails, getVoucherDetails, getVoucherDetailsPage, exportVoucherDetailsExcel } from "@/api/accounting/voucherDetails";
 
 export default {
-  name: "voucherForm",
-  props: ['id'],
-  // components: {
-  //   'main-selector': () => import('./components/mainSelector'),
-  //   'subject-selector': () => import('./components/subjectSelector'),
-  //   'auxiliary-selector': () => import('./components/auxiliarySelector'),
-  // },
+  name: "VoucherDetails",
+  components: {
+  },
   data() {
     return {
-      voucher: {
-        word: '记', no: 1, date: new Date(), bill: 0
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 凭证详情列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        lineNum: null,
+        createBy: null,
+        createTime: [],
+        digest: null,
+        voucherType: null,
+        subjectCode: null,
+        subjectName: null,
+        assistCheck: null,
+        debitMoney: null,
+        creditorMoney: null,
+        flowId: null,
+        voucherId: null,
+        voucherNum: null,
+        userId: null,
+        fileStatus: null,
       },
-      list: [
-        {
-          main: '',
-          isShowMainInput: false,
-          subject: {
-            number: '',
-            name: '',
-            detailJson: ''
-          },
-          isShowSubjectInput: false,
-          debtor: '',
-          debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowDebtorInput: false,
-          lender: '',
-          lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowLenderInput: false,
-          isAuxiliary: false,
-          auxiliary: ''
-        },
-        {
-          main: '',
-          isShowMainInput: false,
-          subject: {
-            number: '',
-            name: '',
-            detailJson: ''
-          },
-          isShowSubjectInput: false,
-          debtor: '',
-          debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowDebtorInput: false,
-          lender: '',
-          lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowLenderInput: false,
-          isAuxiliary: false,
-          auxiliary: ''
-        },
-        {
-          main: '',
-          isShowMainInput: false,
-          subject: {
-            number: '',
-            name: '',
-            detailJson: ''
-          },
-          isShowSubjectInput: false,
-          debtor: '',
-          debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowDebtorInput: false,
-          lender: '',
-          lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowLenderInput: false,
-          isAuxiliary: false,
-          auxiliary: ''
-        },
-        {
-          main: '',
-          isShowMainInput: false,
-          subject: {
-            number: '',
-            name: '',
-            detailJson: ''
-          },
-          isShowSubjectInput: false,
-          debtor: '',
-          debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowDebtorInput: false,
-          lender: '',
-          lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-          isShowLenderInput: false,
-          isAuxiliary: false,
-          auxiliary: ''
-        }
-      ],
-      debtorTotal: 0,
-      debtorTotalList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-      lenderTotal: 0,
-      lenderTotalList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-      wordList: [],
-      mainList: [],
-      subjectList: [],
-      dialogMainVisible: false,
-      dialogSubjectVisible: false,
-      dialogAuxiliaryVisible: false,
-      dialogMainIndex: 0,
-      dialogSubjectIndex: 0,
-      dialogAuxiliaryIndex: 0,
-      isAuxiliary: false,
-      saveVisible: true,
-      billNo: '',
-    }
-  },
-  mounted() {
-    document.addEventListener('keydown', this.handleEvent);
-    // getWordList().then(response => {
-    //   this.wordList = response.data.records;
-    // });
-    // getMainList().then(response => {
-    //   this.mainList = response.data.records;
-    // });
-    // getSubjectList().then(response => {
-    //   this.subjectList = response.data.records;
-    // });
-    getVoucherDetailsPage({ voucherId: 5 }).then(response => {
-      console.log(response.data.list)
-      this.list[0].subject.subjectName=response.data.list[0].subjectName
-
-    });
-
-    this.init();
-  },
-  updated() {
-    //给特定区域添加ID   绑定onmousedown 事件
-    var chargeContainer = document.getElementById('chargeContainer');
-    var outDiv = chargeContainer.getElementsByClassName('special-elements');
-    for (var i = 0; i < outDiv.length; i++) {
-      outDiv[i].onmousedown = function (e) {
-        //现代浏览器阻止默认事件
-        if (e && e.preventDefault)
-          e.preventDefault();
-        //IE阻止默认事件
-        else
-          window.event.returnValue = false;
-        return false;
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        voucherId: [{ required: true, message: "凭证id，一个凭证对应多个凭证详情不能为空", trigger: "blur" }],
+        voucherNum: [{ required: true, message: "凭证号不能为空", trigger: "blur" }],
       }
-    }
+    };
+  },
+  created() {
+    this.getList();
   },
   methods: {
-    judgeIsAuxiliary() {
-      var flag = false;
-      for (var i in this.list) {
-        var detailJson = this.list[i].subject.detailJson;
-        if (detailJson !== '' && detailJson !== undefined) {
-          flag = true;
-          this.list[i].isAuxiliary = true;
-        } else {
-          this.list[i].isAuxiliary = false;
-          this.list[i].auxiliary = '';
-        }
-      }
-      this.isAuxiliary = flag;
-    },
-    openMainDialog() {
-      this.dialogMainVisible = true
-    },
-    closeMainDialog(main) {
-      if (!main.isTrusted) {
-        this.list[this.dialogMainIndex].main = main;
-      }
-      this.dialogMainVisible = false
-    },
-    openSubjectDialog() {
-      this.dialogSubjectVisible = true
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getVoucherDetailsPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
     },
-    closeSubjectDialog(sub) {
-      if (!sub.isTrusted) {
-        this.list[this.dialogSubjectIndex].subject = sub;
-      }
-      this.dialogSubjectVisible = false;
-      this.judgeIsAuxiliary();
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
     },
-    openAuxiliaryDialog() {
-      this.dialogAuxiliaryVisible = true
-    },
-    closeAuxiliaryDialog(aux) {
-      if (!aux.isTrusted) {
-        this.list[this.dialogAuxiliaryIndex].auxiliary = aux;
-      }
-      this.dialogAuxiliaryVisible = false;
-    },
-    clearAuxiliary(index, e) {
-      this.list[index].auxiliary = '';
-    },
-
-    handleEvent(event) {
-      //console.log(event);
-      if (window.location.hash == '#/general_ledger/voucher_entry') {
-        if (event.keyCode === 83 && event.ctrlKey) {
-          //console.log('拦截到83+ctrl');
-          this.preservation(2);
-          event.preventDefault();
-          event.returnValue = false;
-          return false;
-        } else if (event.keyCode === 115) {
-          //console.log('拦截到115');//F4
-          this.addList();
-          event.preventDefault();
-          event.returnValue = false;
-          return false;
-        } else if (event.keyCode === 121) {
-          //console.log('拦截到121');//F10
-          event.preventDefault();
-          event.returnValue = false;
-          return false;
-        } else if (event.keyCode === 122) {
-          //console.log('拦截到122');//F11
-          event.preventDefault();
-          event.returnValue = false;
-          return false;
-        }
-      } else {
-        //需要销毁事件 防止全局生效
-        //document.removeEventListener('keydown', this.handleEvent);
-      }
-
-    },
-    showInput(index, type) {
-      for (var i in this.list) {
-        this.list[i].isShowDebtorInput = false;
-        this.list[i].isShowLenderInput = false;
-        this.list[i].isShowMainInput = false;
-        this.list[i].isShowSubjectInput = false;
-
-        if (i == index && type == 'debtor') {
-          this.list[index].isShowDebtorInput = true;
-        } else if (i == index && type == 'lender') {
-          this.list[index].isShowLenderInput = true;
-        } else if (i == index && type == 'main') {
-          this.list[index].isShowMainInput = true;
-        } else if (i == index && type == 'subject') {
-          this.list[index].isShowSubjectInput = true;
-        }
-      }
-    },
-    hideInput(index, type) {
-      if (type == 'debtor') {
-        //判断是否有小数点
-        var inx = this.list[index].debtor.indexOf('.');
-        if (inx != -1 && this.list[index].debtor.length - 1 != inx) {
-          this.list[index].debtor = (this.list[index].debtor * 1).toFixed(4);
-        }
-        this.list[index].isShowDebtorInput = false;
-      } else if (type == 'lender') {
-        //判断是否有小数点
-        var inx = this.list[index].lender.indexOf('.');
-        if (inx != -1 && this.list[index].lender.length - 1 != inx) {
-          this.list[index].lender = (this.list[index].lender * 1).toFixed(4);
-        }
-        this.list[index].isShowLenderInput = false;
-      } else if (type == 'main') {
-        this.list[index].isShowMainInput = false;
-      } else if (type == 'subject') {
-        this.list[index].isShowSubjectInput = false;
-      }
-    },
-    voluationInput(index, type, val) {
-      if (type == 'main') {
-        this.list[index].main = val;
-        this.list[index].isShowMainInput = false;
-      } else if (type == 'subject') {
-        this.list[index].subject.number = val.number;
-        this.list[index].subject.name = val.name;
-        this.list[index].subject.detailJson = val.detailJson;
-        this.list[index].isShowSubjectInput = false;
-      }
-      this.judgeIsAuxiliary();
-    },
-    selectionList(index, type) {
-      //console.log('弹出选择列表');
-      if (type == 'main') {
-        this.dialogMainIndex = index;
-        this.openMainDialog();
-      } else if (type == 'subject') {
-        this.dialogSubjectIndex = index;
-        this.openSubjectDialog();
-      } else if (type == 'auxiliary') {
-        this.dialogAuxiliaryIndex = index;
-        this.openAuxiliaryDialog();
-      }
-    },
-
-    keyupEvents(index, e, remaind) {
-      if (e.keyCode == 37) {
-        //console.log('拦截到37');//左
-        this.keyboardEvents('left', index * 4 + remaind);
-        return;
-      } else if (e.keyCode == 38) {
-        //console.log('拦截到38');//上
-        this.keyboardEvents('up', index * 4 + remaind);
-        return;
-      } else if (e.keyCode == 39) {
-        //console.log('拦截到39');//右
-        this.keyboardEvents('right', index * 4 + remaind);
-        return;
-      } else if (e.keyCode == 40) {
-        //console.log('拦截到40');//下
-        this.keyboardEvents('down', index * 4 + remaind);
-        return;
-      } else if (e.keyCode == 13) {
-        //console.log('拦截到13');//enter键
-        this.keyboardEvents('enter', index * 4 + remaind);
-        return;
-      } else if (e.keyCode == 118) {
-        //console.log('拦截到118');//F7
-        if (remaind == 1) {
-          this.selectionList(index, 'main');
-        } else if (remaind == 2) {
-          this.selectionList(index, 'subject');
-        }
-        return;
-      }
-
-      var main = this.list[index].main;
-      var subject = this.list[index].subject.name;
-      if (index - 1 >= 0) {
-        if (main.indexOf('//') != -1 || subject.indexOf('//') != -1) {
-          this.list[index].main = this.list[index - 1].main;
-          this.list[index].subject = this.list[index - 1].subject;
-          this.list[index].debtor = this.list[index - 1].debtor;
-          this.list[index].debtorList = this.list[index - 1].debtorList;
-          this.list[index].lender = this.list[index - 1].lender;
-          this.list[index].lenderList = this.list[index - 1].lenderList;
-          this.list[index].auxiliary = this.list[index - 1].auxiliary;
-          this.calcDebtorTotal();
-          this.calcLenderTotal();
-        }
-        if (main.indexOf('..') != -1) {
-          this.list[index].main = this.list[index - 1].main;
-        }
-      }
-      //判断是否显示辅助核算
-      this.judgeIsAuxiliary();
-    },
-    keyboardEvents(type, number) {
-      var total = this.list.length * 4;
-      if (type == 'enter') {
-        number++;
-      } else if (type == 'left' && number - 1 > 0) {
-        number--;
-      } else if (type == 'right' && number + 1 <= total) {
-        number++;
-      } else if (type == 'up' && number - 4 > 0) {
-        number = number - 4;
-      } else if (type == 'down' && number + 4 <= total) {
-        number = number + 4;
-      }
-      if (type == 'enter' && number > total) {
-        this.addList();
-      }
-      var index = parseInt(number / 4);
-      var remaind = number % 4;
-      if (remaind == 1) {
-        this.showInput(index, 'main');
-      } else if (remaind == 2) {
-        this.showInput(index, 'subject');
-      } else if (remaind == 3) {
-        this.showInput(index, 'debtor');
-      } else if (remaind == 0) {
-        this.showInput(index - 1, 'lender');
-      }
-    },
-    debtorInputKeyUp(index, e, remaind) {
-      //console.log(e);
-      //this.list[index].debtor=this.list[index].debtor.replace(/\D/g,'');
-      if (e.keyCode === 187) {
-        this.calcDebtorTotal(index);
-        this.calcLenderTotal(index);
-        var cha = this.lenderTotal - this.debtorTotal;
-
-        if (cha == 0) {
-          cha = '';
-        }
-        this.list[index].debtor = cha + '';
-      } else if (e.keyCode === 32) {
-        this.list[index].isShowLenderInput = true;
-        this.list[index].isShowDebtorInput = false;
-        this.list[index].lender = this.list[index].debtor.trim();
-        this.list[index].debtor = '';
-        this.list[index].debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-        var lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-        this.list[index].lenderList = this.collatingData(this.list[index].lender, lenderList);
-        this.calcDebtorTotal();
-        this.calcLenderTotal();
-        return;
-      } else if ((e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 13) {
-        this.keyupEvents(index, e, remaind);
-        return;
-      }
-      this.list[index].lender = '';
-      this.list[index].lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-      var debtor = this.list[index].debtor;
-      var debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-      this.list[index].debtorList = this.collatingData(debtor, debtorList);
-      this.calcDebtorTotal();
-      this.calcLenderTotal();
-    },
-    calcDebtorTotal(index) {
-      var debtorTotal = 0;
-      for (var i in this.list) {
-        if (this.list[i].debtor != null && this.list[i].debtor != '') {
-          if (!(index && index == i)) {
-            debtorTotal += (this.list[i].debtor) * 1;
-          }
-        }
-      }
-      this.debtorTotal = debtorTotal;
-      debtorTotal = debtorTotal + '';
-      var debtorTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-      this.debtorTotalList = this.collatingData(debtorTotal, debtorTotalList);
-    },
-    lenderInputKeyUp(index, e, remaind) {
-      //this.list[index].lender=this.list[index].lender.replace(/\D/g,'');
-      if (e.keyCode === 187) {
-        this.calcDebtorTotal(index);
-        this.calcLenderTotal(index);
-        var cha = this.debtorTotal - this.lenderTotal;
-        if (cha == 0) {
-          cha = '';
-        }
-        this.list[index].lender = cha + '';
-      } else if (e.keyCode === 32) {
-        this.list[index].isShowDebtorInput = true;
-        this.list[index].isShowLenderInput = false;
-        this.list[index].debtor = this.list[index].lender.trim();
-        this.list[index].lender = '';
-        this.list[index].lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-        var debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-        this.list[index].debtorList = this.collatingData(this.list[index].debtor, debtorList);
-        this.calcLenderTotal();
-        this.calcDebtorTotal();
-        return;
-      } else if ((e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 13) {
-        this.keyupEvents(index, e, remaind);
-        return;
-      }
-      this.list[index].debtor = '';
-      this.list[index].debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-      var lender = this.list[index].lender;
-      var lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-      this.list[index].lenderList = this.collatingData(lender, lenderList);
-      this.calcLenderTotal();
-      this.calcDebtorTotal();
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        lineNum: undefined,
+        createBy: undefined,
+        digest: undefined,
+        voucherType: undefined,
+        subjectCode: undefined,
+        subjectName: undefined,
+        assistCheck: undefined,
+        debitMoney: undefined,
+        creditorMoney: undefined,
+        flowId: undefined,
+        voucherId: undefined,
+        voucherNum: undefined,
+        userId: undefined,
+        fileStatus: undefined,
+      };
+      this.resetForm("form");
     },
-    calcLenderTotal(index) {
-      var lenderTotal = 0;
-      for (var i in this.list) {
-        if (this.list[i].lender != null && this.list[i].lender != '') {
-          if (!(index && index == i)) {
-            lenderTotal += (this.list[i].lender) * 1;
-          }
-        }
-      }
-      this.lenderTotal = lenderTotal;
-      lenderTotal = lenderTotal + '';
-      var lenderTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-      this.lenderTotalList = this.collatingData(lenderTotal, lenderTotalList);
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
     },
-    addList() {
-      var obj = {
-        main: '',
-        isShowMainInput: false,
-        subject: {
-          number: '',
-          name: '',
-          detailJson: ''
-        },
-        isShowSubjectInput: false,
-        debtor: '',
-        debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-        isShowDebtorInput: false,
-        lender: '',
-        lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-        isShowLenderInput: false,
-        isAuxiliary: false,
-        auxiliary: ''
-      };
-      this.list.push(obj);
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
     },
-    removeList(index) {
-      if (this.list.length <= 2) {
-        this.$message.error('至少保存两行');
-        return;
-      }
-      this.list.splice(index, 1);
-      this.calcDebtorTotal();
-      this.calcLenderTotal();
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加凭证详情";
     },
-
-    collatingData(debtor, debtorList) {
-      debtor = debtor.replace(/-/g, '');
-      //判断是否有小数点
-      if (debtor.indexOf('.') != -1) {
-        debtor = (debtor * 1).toFixed(4);
-        debtor = (debtor + '').replace(/\./g, '');
-      } else {
-        debtor = debtor + '00';
-      }
-      if (debtor.length <= 11) {
-        var cha = debtorList.length - debtor.length;
-        for (var i = 0; i < debtor.length; i++) {
-          debtorList[i + cha] = debtor.charAt(i);
-        }
-      } else {
-        for (var i = 0; i < debtor.length; i++) {
-          debtorList[i] = debtor.charAt(i);
-        }
-      }
-      return debtorList;
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getVoucherDetails(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改凭证详情";
+      });
     },
-    checkListData() {
-      if ((this.debtorTotal != 0 || this.lenderTotal != 0) && this.lenderTotal * 1 != this.debtorTotal * 1) {
-        this.$message.error('凭证借贷不平衡，请检查');
-        return;
-      }
-      var mainFlag = true;
-      for (var i in this.list) {
-        if (this.list[i].main != null && this.list[i].main != '') {
-          mainFlag = false;
-        }
-        if (this.list[i].subject.name == null || this.list[i].subject.name == '') {
-          this.$message.error('第' + (i * 1 + 1) + '行中的会计科目为必填项，请填写了再提交');
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
           return;
         }
-        if ((this.list[i].debtor == null || this.list[i].debtor == '') && (this.list[i].lender == null || this.list[i].lender == '')) {
-          this.$message.error('第' + (i * 1 + 1) + '行中借方金额、贷方金额必须填一个，请填写了再提交');
+        // 修改的提交
+        if (this.form.id != null) {
+          updateVoucherDetails(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
           return;
         }
-      }
-      if (mainFlag) {
-        this.$message.error('必须填写一个摘要，请填写了再提交');
-        return;
-      }
-
-      var list = [];
-      for (var a = 0; a < this.list.length; a++) {
-        var obj = {
-          explanation: this.list[a].main,
-          accountNumber: this.list[a].subject.number,
-          accountName: this.list[a].subject.name,
-          auxiliaryType: this.list[a].subject.detailJson,
-          itemObjectKeys: this.list[a].auxiliary,
-          basicDebitAmount: this.list[a].debtor,
-          basicCreditAmount: this.list[a].lender
-        };
-        list.push(obj);
-      }
-      var reqObj = {
-        id: this.id,
-        billNo: this.billNo,
-        billStatus: 2,
-        voucherType: this.voucher.word,
-        voucherNumber: this.voucher.no,
-        year: this.formatDate("yyyy-MM-dd hh:mm:ss", this.voucher.date),
-        creditTotal: this.lenderTotal,
-        debitTotal: this.debtorTotal,
-        attachments: this.voucher.bill,
-        list: list
-      };
-
-      return reqObj;
-    },
-    formatDate(fmt, date) {
-      if (typeof date === 'string') {
-        date = new Date(date);
-      }
-
-      var o = {
-        "M+": date.getMonth() + 1,                 //月份
-        "d+": date.getDate(),                    //日
-        "h+": date.getHours(),                   //小时
-        "m+": date.getMinutes(),                 //分
-        "s+": date.getSeconds(),                 //秒
-        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
-        "S": date.getMilliseconds()             //毫秒
-      };
-      if (/(y+)/.test(fmt))
-        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-      for (var k in o)
-        if (new RegExp("(" + k + ")").test(fmt))
-          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
-      return fmt;
-    },
-    preservation(status) {
-      var reqObj = this.checkListData();
-      //console.log(reqObj);
-
-      if (reqObj) {
-        addObj(reqObj).then(response => {
-          if (response.code == '2000') {
-
-            this.$notify({
-              title: '成功',
-              message: '创建成功',
-              type: 'success',
-              duration: 2000
-            });
-            this.init();
-          } else {
-            this.$notify({
-              title: '失败',
-              message: response.msg,
-              type: 'warning',
-              duration: 2000
-            })
-          }
+        // 添加的提交
+        createVoucherDetails(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
         });
-      }
+      });
     },
-    onSubmit() {
-      var reqObj = this.checkListData();
-      //console.log(reqObj);
-
-      if (reqObj) {
-        putObj(this.id, reqObj).then(response => {
-          if (response.code == '2000') {
-
-            this.$notify({
-              title: '成功',
-              message: '修改成功',
-              type: 'success',
-              duration: 2000
-            });
-
-            this.$emit('submitSuccess', response);
-
-          } else {
-            this.$notify({
-              title: '失败',
-              message: response.msg,
-              type: 'warning',
-              duration: 2000
-            })
-          }
-        });
-      }
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除凭证详情编号为"' + id + '"的数据项?').then(function() {
+          return deleteVoucherDetails(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
     },
-    init() {
-      if (this.id !== '' && this.id !== undefined) {
-        getObj(this.id)
-          .then(response => {
-            const data = response.data;
-            this.voucher = {word: data.voucherType, no: data.voucherNumber, date: data.year, bill: data.attachments};
-            this.list = [];
-            var isAuxiliary = false;
-            for (var i = 0; i < data.list.length; i++) {
-              var debtor = data.list[i].basicDebitAmount == 0 ? '' : data.list[i].basicDebitAmount + '';
-              var debtorList = debtor == '' ? ['', '', '', '', '', '', '', '', 0, 0, 0] : this.collatingData(debtor, ['', '', '', '', '', '', '', '', 0, 0, 0]);
-              var lender = data.list[i].basicCreditAmount == 0 ? '' : data.list[i].basicCreditAmount + '';
-              var lenderList = lender == '' ? ['', '', '', '', '', '', '', '', 0, 0, 0] : this.collatingData(lender, ['', '', '', '', '', '', '', '', 0, 0, 0]);
-              if (data.list[i].itemObjectKeys != null && data.list[i].itemObjectKeys != '') {
-                isAuxiliary = true;
-              }
-              var obj = {
-                main: data.list[i].explanation,
-                isShowMainInput: false,
-                subject: {
-                  number: data.list[i].accountNumber,
-                  name: data.list[i].accountName,
-                  detailJson: data.list[i].auxiliaryType
-                },
-                isShowSubjectInput: false,
-                debtor: debtor,
-                debtorList: debtorList,
-                isShowDebtorInput: false,
-                lender: lender,
-                lenderList: lenderList,
-                isShowLenderInput: false,
-                isAuxiliary: data.list[i].itemObjectKeys == '' ? false : true,
-                auxiliary: data.list[i].itemObjectKeys
-              };
-              this.list.push(obj);
-            }
-            this.debtorTotal = data.debitTotal + '';
-            this.debtorTotalList = this.collatingData(this.debtorTotal, ['', '', '', '', '', '', '', '', 0, 0, 0]);
-            this.lenderTotal = data.creditTotal + '';
-            this.lenderTotalList = this.collatingData(this.lenderTotal, ['', '', '', '', '', '', '', '', 0, 0, 0]);
-            this.dialogMainVisible = false;
-            this.dialogSubjectVisible = false;
-            this.dialogAuxiliaryVisible = false;
-            this.saveVisible = false;
-            this.dialogMainIndex = 0;
-            this.dialogSubjectIndex = 0;
-            this.dialogAuxiliaryIndex = 0;
-            this.isAuxiliary = isAuxiliary;
-            this.billNo = data.billNo;
-          });
-      } else {
-        this.voucher = {word: '记', no: 1, date: new Date(), bill: 0};
-        this.list = [
-          {
-            main: '',
-            isShowMainInput: false,
-            subject: {
-              number: '',
-              name: '',
-              detailJson: ''
-            },
-            isShowSubjectInput: false,
-            debtor: '',
-            debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowDebtorInput: false,
-            lender: '',
-            lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowLenderInput: false,
-            isAuxiliary: false,
-            auxiliary: ''
-          },
-          {
-            main: '',
-            isShowMainInput: false,
-            subject: {
-              number: '',
-              name: '',
-              detailJson: ''
-            },
-            isShowSubjectInput: false,
-            debtor: '',
-            debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowDebtorInput: false,
-            lender: '',
-            lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowLenderInput: false,
-            isAuxiliary: false,
-            auxiliary: ''
-          },
-          {
-            main: '',
-            isShowMainInput: false,
-            subject: {
-              number: '',
-              name: '',
-              detailJson: ''
-            },
-            isShowSubjectInput: false,
-            debtor: '',
-            debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowDebtorInput: false,
-            lender: '',
-            lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowLenderInput: false,
-            isAuxiliary: false,
-            auxiliary: ''
-          },
-          {
-            main: '',
-            isShowMainInput: false,
-            subject: {
-              number: '',
-              name: '',
-              detailJson: ''
-            },
-            isShowSubjectInput: false,
-            debtor: '',
-            debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowDebtorInput: false,
-            lender: '',
-            lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],
-            isShowLenderInput: false,
-            isAuxiliary: false,
-            auxiliary: ''
-          }
-        ];
-        this.debtorTotal = 0;
-        this.debtorTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-        this.lenderTotal = 0;
-        this.lenderTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];
-        this.dialogMainVisible = false;
-        this.dialogSubjectVisible = false;
-        this.dialogAuxiliaryVisible = false;
-        this.dialogMainIndex = 0;
-        this.dialogSubjectIndex = 0;
-        this.dialogAuxiliaryIndex = 0;
-        this.isAuxiliary = false;
-      }
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有凭证详情数据项?').then(() => {
+          this.exportLoading = true;
+          return exportVoucherDetailsExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '凭证详情.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
     }
   }
-}
+};
 </script>
-
-<style scoped>
-table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  padding: 0;
-  margin: 0;
-}
-
-table td {
-  text-align: center;
-  table-layout: fixed;
-  padding: 0px;
-  position: relative;
-}
-
-.main-subject {
-  position: relative;
-  height: 60px;
-  line-height: 30px;
-  text-align: left;
-}
-
-.charge-container {
-  padding: 10px;
-  font-size: 14px;
-  color: #444;
-  font-weight: 400;
-  background-color: white;
-}
-
-.charge {
-  width: 1124px;
-  margin: auto;
-}
-
-.charge-header {
-  margin-bottom: 10px;
-}
-
-.charge-header > div {
-  display: inline-block;
-  margin-right: 15px;
-}
-
-.tip-box {
-  width: 330px;
-  padding: 10px;
-  position: absolute;
-  top: 27px;
-  right: -15px;
-  z-index: 1005;
-  background-color: #fff;
-  box-shadow: 0 0 6px rgba(170, 170, 170, .73);
-  display: none;
-}
-
-.tip-box-table tr {
-  height: 25px;
-}
-
-.el-icon-info {
-  font-size: 18px;
-  margin-left: 30px;
-  cursor: pointer;
-}
-
-.el-icon-info:hover + .tip-box {
-  display: inline-block;
-}
-
-.el-icon-more {
-  position: absolute;
-  top: 22px;
-  right: 10px;
-  z-index: 2;
-  color: #666;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0px;
-  float: left;
-  padding: 5px 0;
-  margin: 2px 0 0;
-  text-align: left;
-  list-style: none;
-  background-color: #fff;
-  background-clip: padding-box;
-}
-
-.suggest-list {
-  width: 100%;
-  height: auto;
-  z-index: 1015;
-  min-width: inherit;
-  display: block;
-  overflow: hidden;
-  border: none;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
-}
-
-.suggest-list .item-list {
-  max-height: 375px;
-  overflow: auto;
-  list-style: none;
-  margin: 0px;
-  padding: 0px;
-}
-
-.item-list li {
-  display: flex;
-  padding: 0 10px;
-  height: 28px;
-  line-height: 28px;
-  cursor: pointer;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.item-list li:hover {
-  background: #ecebeb;
-}
-
-.item-list li.hover {
-  background: #ecebeb;
-}
-
-.charge-table, .tip-box-table {
-  border: 1px solid #bab9b9;
-}
-
-.charge-table, .debtor-tbale, .lender-tbale > tr {
-  height: 60px;
-}
-
-.charge-table > tr:first-child {
-  height: 50px;
-}
-
-.td-auxiliary-dis {
-  background-color: #f7f7f7;
-}
-
-.auxiliary-accounting {
-  height: 60px;
-  overflow: auto;
-  padding: 15px 0 0 30px;
-}
-
-.auxiliary-accounting:before {
-  content: "+";
-  font-size: 30px;
-  color: #4a90e2;
-  cursor: pointer;
-  padding: 0 11px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  line-height: 60px;
-}
-
-.auxiliary-single {
-  display: flex;
-  float: left;
-  height: 28px;
-  line-height: 28px;
-  margin-right: 5px;
-  cursor: pointer;
-  background: #eee;
-  padding: 0 8px;
-  border-radius: 2px;
-}
-
-.auxiliary-single span {
-  max-width: 90px;
-  overflow: hidden;
-  height: 28px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.auxiliary-single i {
-  color: red;
-  margin: 8px 0 8px 7px;
-  font-size: 10px;
-  visibility: hidden;
-}
-
-.auxiliary-single:hover i {
-  visibility: inherit;
-}
-
-.charge-table-icon {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.debtor-lender-table tr td {
-  width: 9%;
-  border-right: 1px solid #bab9b9;
-}
-
-.debtor-lender-table tr td:nth-child(3) {
-  border-right-color: rgba(74, 144, 226, .5);
-}
-
-.debtor-lender-table tr td:nth-child(6) {
-  border-right-color: rgba(74, 144, 226, .5);
-}
-
-.debtor-lender-table tr td:nth-child(9) {
-  border-right-color: rgba(226, 106, 74, .5);
-}
-
-.debtor-lender-table tr td:last-child {
-  border-right: none;
-}
-
-.tr-negative {
-  color: red;
-}
-
-.charge-table input, select {
-  width: 100%;
-  height: 60px;
-}
-
-.charge-table textarea {
-  width: 100%;
-  height: 60px;
-  padding: 9px 14px 9px 10px;
-  overflow: auto;
-  resize: none;
-  border: none;
-  border-radius: 0px;
-  margin: 0;
-  color: #444;
-  box-sizing: border-box;
-}
-</style>