Browse Source

费用单批量打印

lilei 2 years ago
parent
commit
adc7046d4a

+ 4 - 2
src/utils/request.js

@@ -110,7 +110,7 @@ service.interceptors.request.use(config => {
 
 // response interceptor
 service.interceptors.response.use((response) => {
-  console.log(response, 'response.data.status')
+  // console.log(response, 'response.data.status')
   const et = sessionStorage.getItem('errorTips')
   if ((response.data.status == '1001' || response.data.status == '1099') && !et) {
     sessionStorage.setItem('errorTips', 1)
@@ -140,7 +140,9 @@ service.interceptors.response.use((response) => {
       description: response.data.code
     })
   }
-  store.commit('SET_loadingStatus', false)
+  if(response.data.status!='200'){
+    store.commit('SET_loadingStatus', false)
+  }
   return response.data
 }, err)
 

+ 2 - 2
src/utils/util.js

@@ -121,7 +121,7 @@ export function getAuthPriceCode (config, router, store) {
     return priceOptions.find(k => k.value == a[a.length-1])
   })
   // console.log(userAuthCode)
-  console.log(authCode)
+  // console.log(authCode)
   // 如果有权限code
   if(authCode){
     // 当前正在调用的接口url
@@ -130,7 +130,7 @@ export function getAuthPriceCode (config, router, store) {
     const authTree = store.state.app.authMenusList
     // 从所有的权限菜单中查找当前权限code对应的权限菜单数据
     const authNode = treeFind(authTree,(item)=>item.code == authCode)
-    console.log(authNode)
+    // console.log(authNode)
     // 从找到的对应权限菜单数据中判断当前调用接口的url是否存在,这里和权限菜单中的后台权限code比较
     const hasReqUrl = authNode.permission.split(',').find(item => url.replace(/\//g,'_').indexOf(item)>=0)
     // 如果存在则返回一个如 [1,0,1,0,0] 的格式的价格权限字符串给后台接口

+ 19 - 8
src/views/expenseManagement/expenseReimbursement/detail.vue

@@ -98,17 +98,16 @@
       </a-card>
     </a-spin>
     <!-- 打印预览 -->
-    <previewModal :showModal="showModal" @close="showModal=false" :detailSn="$route.params.sn" :detailData="detailData"></previewModal>
-    <iframe id="printfsqd" name="printfsqd" hidden></iframe>
+    <previewModal ref="previewModal" @printOk="printOk"></previewModal>
   </div>
 </template>
 
 <script>
 import { commonMixin } from '@/utils/mixin'
 import { STable } from '@/components'
-import { expenseAccountDetail, expenseAcctDetailFindList } from '@/api/expenseManagement'
+import { expenseAccountDetail, expenseAcctDetailFindList, getProcessInstance } from '@/api/expenseManagement'
 import previewModal from './previewModal.vue'
-import { jGPrint } from '@/libs/JGPrint.js'
+
 export default {
   name: 'ExpenseReimbursementListDetail',
   mixins: [commonMixin],
@@ -118,7 +117,6 @@ export default {
     return {
       spinning: false,
       disabled: false,
-      showModal: false, // 打印弹窗初始状态
       baseData: null,
       count: 0,
       // 加载数据方法 必须为 Promise 对象
@@ -162,9 +160,22 @@ export default {
       this.$router.push({ name: 'expenseReimbursementList' })
     },
     // 打印
-    handlePrint (type) {
-      const html = document.getElementById('printTest').innerHTML
-      jGPrint(html, type)
+    async handlePrint (type) {
+      this.spinning = true
+      // 费用明细
+      const fyListData = await expenseAcctDetailFindList({ expenseAccountSn: this.$route.params.sn }).then(res => res.data)
+      // 审核明细,待提交状态不获取
+      const spListData = this.detailData.state != 'WAIT_SUBMIT' ? await getProcessInstance({ businessType: 'EXPENSES', businessSn: this.$route.params.sn }).then(res => res.data) : null
+      this.$refs.previewModal.setData([
+      {
+        expenseInfo: this.detailData,
+        fyListData,
+        spListData
+      }
+      ])
+    },
+    printOk(res){
+      this.spinning = false
     },
     //  详情
     getDetail () {

+ 92 - 21
src/views/expenseManagement/expenseReimbursement/list.vue

@@ -10,12 +10,12 @@
                 <a-input id="salesManagementList-expenseAccountNo" v-model.trim="queryParam.expenseAccountNo" allowClear placeholder="请输入销售单号"/>
               </a-form-item>
             </a-col>
-            <a-col :md="6" :sm="24">
+            <a-col :md="4" :sm="24">
               <a-form-item label="申请人" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
                 <employee style="width: 100%;" id="salesManagementList-Employee" v-model="queryParam.applyPersonSn"></employee>
               </a-form-item>
             </a-col>
-            <a-col :md="6" :sm="24">
+            <a-col :md="4" :sm="24">
               <a-form-item label="费用类型">
                 <expenseType
                   id="salesManagementList-expenseType"
@@ -26,8 +26,7 @@
                 ></expenseType>
               </a-form-item>
             </a-col>
-            <template v-if="advanced">
-              <a-col :md="6" :sm="24">
+            <a-col :md="4" :sm="24">
                 <a-form-item label="费用发生月份">
                   <a-month-picker
                     placeholder="请选择月份"
@@ -38,12 +37,24 @@
                     style="width: 100%;"/>
                 </a-form-item>
               </a-col>
+            <template v-if="advanced">
               <a-col :md="6" :sm="24">
                 <a-form-item label="主题">
                   <a-input id="salesManagementList-title" v-model.trim="queryParam.title" allowClear placeholder="请输入主题"/>
                 </a-form-item>
               </a-col>
-              <a-col :md="6" :sm="24">
+              <a-col :md="4" :sm="24">
+                <a-form-item label="打印状态">
+                  <v-select
+                    v-model="queryParam.printStatus"
+                    ref="printStatus"
+                    id="pushOrder-printStatus"
+                    code="PRINT_STATUS"
+                    placeholder="请选择打印状态"
+                    allowClear></v-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="4" :sm="24">
                 <a-form-item label="状态">
                   <v-select
                     v-model="queryParam.state"
@@ -71,11 +82,17 @@
       <!-- 操作按钮 -->
       <div class="table-operator">
         <a-button type="primary" class="button-error" v-if="$hasPermissions('B_eRNew')" @click="handleEdit()">新增</a-button>
+        <a-button type="primary" :loading="spinning" @click="handlePlPrint()" ghost>批量打印</a-button>
+        <span style="margin-left: 8px">
+          <template v-if="rowSelectionInfo && rowSelectionInfo.selectedRowKeys.length>0">{{ `已选 ${rowSelectionInfo.selectedRowKeys.length} 项` }}</template>
+        </span>
       </div>
       <!-- 列表 -->
       <s-table
         class="sTable fixPagination"
         ref="table"
+        :row-selection="$hasPermissions('B_eRPrint')?{ columnWidth: '4%', getCheckboxProps: record => ({ props: { disabled: false } })}:null"
+        @rowSelection="rowSelectionFun"
         :style="{ height: tableHeight+70.5+'px' }"
         size="small"
         :rowKey="(record) => record.id"
@@ -143,6 +160,8 @@
     <verifyModal v-drag :openModal="openModal" :itemSn="itemSn" @close="openModal=false"></verifyModal>
     <!-- 新增 -->
     <baseDataModal :show="openBaseModal" @close="openBaseModal=false"></baseDataModal>
+    <!-- 打印预览 -->
+    <previewModal ref="printModal" @printOk="printOk"></previewModal>
   </a-card>
 </template>
 
@@ -154,13 +173,15 @@ import subarea from '@/views/common/subarea.js'
 import employee from './employee.js'
 import { STable, VSelect } from '@/components'
 import verifyModal from './verifyModal.vue'
+import previewModal from './previewModal.vue'
 import expenseType from '@/views/common/expenseType.js'
-import { expenseAccountList, expenseAccountDelete, expenseAccountAgainEdit } from '@/api/expenseManagement'
+import { getBatchLastProcessInstance } from '@/api/financeBook'
+import { expenseAccountList, expenseAccountDelete, expenseAccountAgainEdit, expenseAcctDetailFindList } from '@/api/expenseManagement'
 import baseDataModal from './baseDataModal.vue'
 export default {
   name: 'ExpenseReimbursementList',
   mixins: [commonMixin],
-  components: { STable, VSelect, subarea, verifyModal, baseDataModal, employee, expenseType },
+  components: { STable, VSelect, subarea, verifyModal, baseDataModal, employee, expenseType, previewModal },
   data () {
     let _this=this
     return {
@@ -180,8 +201,24 @@ export default {
         title: '', //  主题
         expenseType: undefined, // 费用类型
         expenseType2: undefined, // 费用类型2
+        printStatus: undefined, // 打印状态
         state: undefined // 状态
       },
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
+        { title: '费用单号', width: '8%', align: 'center', scopedSlots: { customRender: 'expenseAccountNo' } },
+        { title: '申请人', dataIndex: 'applyPersonName', width: '6%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '申请部门', dataIndex: 'applyDepartmentName', width: '8%', align: 'left', customRender: function (text) { return text || '--' } },
+        { title: '费用类型', scopedSlots: { customRender: 'expenseType' }, width: '8%', align: 'left' },
+        { title: '费用发生月份', dataIndex: 'expenseDate', width: '6%', align: 'center', customRender: function (text) { return moment(text).format('YYYY年MM月') || '--' } },
+        { title: '主题', dataIndex: 'title', width: '10%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '合计金额', dataIndex: 'applyExpenseTotal', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
+        { title: '创建时间', dataIndex: 'createDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '审核时间', dataIndex: 'finishDate', width: '8%', align: 'center', customRender: function (text, record) { return record.state == 'AUDIT_REJECT' || record.state == 'AUDIT_PASS' ? text : '--' } },
+        { title: '打印状态', dataIndex: 'printStatusDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '状态', dataIndex: 'stateDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
+      ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
         this.disabled = true
@@ -199,6 +236,7 @@ export default {
             const no = (data.pageNo - 1) * data.pageSize
             for (var i = 0; i < data.list.length; i++) {
               data.list[i].no = no + i + 1
+              data.list[i].content = data.list[i].content ? data.list[i].content.replace(/\n+/, '\n').split('\n') : ''
             }
             this.disabled = false
           }
@@ -206,21 +244,55 @@ export default {
           return data
         })
       },
-      columns: [{ title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
-        { title: '费用单号', width: '12%', align: 'center', scopedSlots: { customRender: 'expenseAccountNo' } },
-        { title: '申请人', dataIndex: 'applyPersonName', width: '8%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
-        { title: '申请部门', dataIndex: 'applyDepartmentName', width: '8%', align: 'left', customRender: function (text) { return text || '--' } },
-        { title: '费用类型', scopedSlots: { customRender: 'expenseType' }, width: '6%', align: 'center' },
-        { title: '费用发生月份', dataIndex: 'expenseDate', width: '6%', align: 'center', customRender: function (text) { return moment(text).format('YYYY年MM月') || '--' } },
-        { title: '主题', dataIndex: 'title', width: '10%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
-        { title: '合计金额', dataIndex: 'applyExpenseTotal', width: '8%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
-        { title: '创建时间', dataIndex: 'createDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '审核时间', dataIndex: 'finishDate', width: '8%', align: 'center', customRender: function (text, record) { return record.state == 'AUDIT_REJECT' || record.state == 'AUDIT_PASS' ? text : '--' } },
-        { title: '状态', dataIndex: 'stateDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }]
+      rowSelectionInfo: null // 批量选择的数据
     }
   },
   methods: {
+    // 表格选中项
+    rowSelectionFun (obj) {
+      this.rowSelectionInfo = obj || null
+    },
+    printOk(res){
+      this.spinning = false
+      if(res&&res.status == 200){
+        this.$refs.table.refresh()
+      }
+    },
+    // 批量打印
+    async handlePlPrint () {
+      const _this = this
+      const rows = _this.rowSelectionInfo && _this.rowSelectionInfo.selectedRows || []
+      const slen = rows.length
+      if (!_this.rowSelectionInfo || (_this.rowSelectionInfo && slen < 1)) {
+        _this.$message.warning('请在列表勾选后再进行批量操作!')
+        return false
+      }
+      this.spinning = true
+      const pageData = []
+      const businessSnList = []
+      
+      for(let i=0;i<rows.length;i++){
+        // 费用明细
+        const fyListData = await expenseAcctDetailFindList({ expenseAccountSn: rows[i].expenseAccountSn }).then(res => res.data)
+        // 审核明细,待提交状态不获取
+        if(rows[i].state != 'WAIT_SUBMIT'){
+          businessSnList.push(rows[i].expenseAccountSn)
+        }
+        pageData.push({
+          expenseInfo: rows[i],
+          fyListData: fyListData,
+          spListData: []
+        })
+      }
+      // 获取审核进度信息
+      const spListData = await getBatchLastProcessInstance({ 'businessType': 'EXPENSES', 'businessSnList': businessSnList }).then(res => res.data)
+      pageData.map(item => {
+        const sp = spListData[item.expenseInfo.expenseAccountSn]
+        item.spListData = sp ? sp.taskVOList : []
+      })
+      console.log(pageData)
+      this.$refs.printModal.setData(pageData)
+    },
     onChange (date, dateString) {
       this.queryParam.expenseDate = dateString
     },
@@ -314,7 +386,7 @@ export default {
     },
     setTableH () {
       const tableSearchH = this.$refs.tableSearch.offsetHeight
-      this.tableHeight = window.innerHeight - tableSearchH - 235
+      this.tableHeight = window.innerHeight - tableSearchH - 220
     }
   },
   watch: {
@@ -354,7 +426,6 @@ export default {
 <style lang="less">
   .salesManagementList-wrap{
     .sTable{
-      margin-top: 10px;
       .badge-con-t{
         .ant-badge-count{
           transform: scale(0.8);

+ 95 - 96
src/views/expenseManagement/expenseReimbursement/previewModal.vue

@@ -1,78 +1,80 @@
 <template>
-  <!-- <a-modal :footer="null" v-model="isShow" width="850px"> -->
-  <div class="container-print-view" style="width:100%;font-size: 12pt;position: fixed;font-family: auto;left:10000000px;padding:0;margin:0 auto;" id="printTest">
+  <div class="container-print-view" 
+  style="width:100%;font-size: 12pt;position: fixed;font-family: auto;left:-1000000px;padding:0;margin:0 auto;background-color: #fff;" 
+  >
+  <div class="expense-detail-print" style="width:564pt;margin:0 auto;" v-for="item in list" :key="item.expenseInfo.expenseAccountSn">
     <p class="container-title" style="text-align: center;font-size: 24px;font-weight: 600;">箭冠汽配企业费用报销单</p>
     <div class="container-info" style="width: 100%;border: 1px solid #000000;">
-      <div class="container-info-basics" v-if="expenseInfo">
+      <div class="container-info-basics" v-if="item.expenseInfo">
         <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
-          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">申请人:{{ expenseInfo&&expenseInfo.applyPersonName?expenseInfo.applyPersonName:'' }}</span>
-          <span style="display: inline-block;border-right: none;padding: 10px;">申请部门:{{ expenseInfo&&expenseInfo.applyDepartmentName?expenseInfo.applyDepartmentName:'' }}</span>
+          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">申请人:{{ item.expenseInfo.applyPersonName?item.expenseInfo.applyPersonName:'' }}</span>
+          <span style="display: inline-block;border-right: none;padding: 10px;">申请部门:{{ item.expenseInfo.applyDepartmentName?item.expenseInfo.applyDepartmentName:'' }}</span>
         </div>
         <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
-          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用类型:{{ expenseInfo&&expenseInfo.expenseTypeDictValue?expenseInfo.expenseTypeDictValue:'' }}</span>
-          <span style="display: inline-block;border-right: none;padding: 10px;">费用发生月份:{{ expenseInfo&&expenseInfo.expenseDate?expenseInfo.expenseDate.substring(0, 7):'' }}</span>
+          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用类型:{{ item.expenseInfo.expenseTypeDictValue?item.expenseInfo.expenseTypeDictValue:'' }}</span>
+          <span style="display: inline-block;border-right: none;padding: 10px;">费用发生月份:{{ item.expenseInfo.expenseDate?item.expenseInfo.expenseDate.substring(0, 7):'' }}</span>
         </div>
         <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
-          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用单号:{{ expenseInfo&&expenseInfo.expenseAccountNo?expenseInfo.expenseAccountNo:'' }}{{ expenseInfo&&expenseInfo.stateDictValue?'('+expenseInfo.stateDictValue+')':'' }}</span>
-          <span style="display: inline-block;border-right: none;padding: 10px;">合计金额:{{ (expenseInfo&&expenseInfo.applyExpenseTotal ||expenseInfo&&expenseInfo.applyExpenseTotal==0)?expenseInfo.applyExpenseTotal+'元':'' }}</span>
+          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用单号:{{ item.expenseInfo.expenseAccountNo?item.expenseInfo.expenseAccountNo:'' }}{{ item.expenseInfo.stateDictValue?'('+item.expenseInfo.stateDictValue+')':'' }}</span>
+          <span style="display: inline-block;border-right: none;padding: 10px;">合计金额:{{ (item.expenseInfo.applyExpenseTotal ||item.expenseInfo.applyExpenseTotal==0)?item.expenseInfo.applyExpenseTotal+'元':'' }}</span>
         </div>
         <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;overflow: hidden;">
           <div style="border-right: none;float: left;padding: 10px 0 10px 10px;">主题:</div>
-          <div style="padding: 10px;text-align: center;font-weight: bold;">
-            {{ expenseInfo&&expenseInfo.title?expenseInfo.title:'' }}
+          <div style="padding: 10px 10px 10px 50px;text-align: center;font-weight: bold;">
+            {{ item.expenseInfo.title?item.expenseInfo.title:'' }}
           </div>
         </div>
         <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
-          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;border-right: none;">详细说明:</span>
-          <div style="padding:0 20px 20px;">
-            <div v-for="(item,index) in expenseInfo.content" :key="index+'-content'">
-              {{ item || '--' }}
+          <span style="display: inline-block;width: 100%;padding: 10px 10px 5px;border-right: 1px solid #000000;border-right: none;">详细说明:</span>
+          <div style="padding:0 20px 10px 40px;">
+            <div v-for="(ditem,index) in item.expenseInfo.content" :key="index+'-content'">
+              {{ ditem || '--' }}
             </div>
           </div>
         </div>
       </div>
-      <div class="container-fytable" style="padding:0 10px;" v-if="fyListData">
-        <p class="table-title">费用明细:</p>
+      <div class="container-fytable" style="padding:0 10px;" v-if="item.fyListData">
+        <div class="table-title" style="padding: 10px 0;">费用明细:</div>
         <table
           border="1"
           cellspacing="0"
           cellpadding="0"
-          style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
+          style="width: 100%;border-collapse: collapse;font-size:10pt;text-align: center;"
           align="center">
           <thead>
             <tr>
-              <th style="padding:5px 10px;width:8%;">序号</th>
-              <th style="padding:5px 10px;width:26%;">记账方</th>
+              <th style="padding:5px 10px;width:6%;">序号</th>
+              <th style="padding:5px 10px;width:22%;">记账方</th>
               <!-- <th style="padding:5px 10px;width:15%;">区域/省/市</th> -->
               <th style="padding:5px 10px;width:10%;">记账费用</th>
-              <th style="padding:5px 10px;width:26%;">费用承担方</th>
-              <th style="padding:5px 10px;width:20%;">产品信息</th>
+              <th style="padding:5px 10px;width:30%;">费用承担方</th>
+              <th style="padding:5px 10px;width:22%;">产品信息</th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(item,index) in fyListData" :key="index">
-              <td style="text-align: center;width:8%;">{{ index+1 }}</td>
-              <td style="text-align: left;width:26%;padding:5px 10px;">
-                <div>{{ item.accountTypeDictValue }}</div>
-                <div>{{ item.accountName||'' }}</div>
-                <div v-if="item.accountNameFnumber">({{ item.accountNameFnumber }})</div>
+            <tr v-for="(fyItem,index) in item.fyListData" :key="index">
+              <td style="text-align: center;width:6%;">{{ index+1 }}</td>
+              <td style="text-align: left;width:22%;padding:0 10px;">
+                <div>{{ fyItem.accountTypeDictValue }}</div>
+                <div>{{ fyItem.accountName||'' }}</div>
+                <div v-if="fyItem.accountNameFnumber">({{ fyItem.accountNameFnumber }})</div>
               </td>
               <!-- <td style="text-align: left;width:15%;padding:5px 10px;">
-                <div>{{ item.subareaNames }}</div>
-                <div>{{ item.provinceName }}</div>
-                <div>{{ item.cityName }}</div>
+                <div>{{ fyItem.subareaNames }}</div>
+                <div>{{ fyItem.provinceName }}</div>
+                <div>{{ fyItem.cityName }}</div>
               </td> -->
-              <td style="text-align: right;width:10%;padding:5px 10px;">{{ item.expense||item.expense==0?toThousands(item.expense):'' }}</td>
-              <td style="text-align: left;width:26%;padding:5px 10px;vertical-align: top;">
-                <div v-for="(ditem,index) in item.detailSplitList" :key="ditem.id+'-'+index" style="padding: 3px 0;" >
+              <td style="text-align: right;width:10%;padding:0 10px;">{{ fyItem.expense||fyItem.expense==0?toThousands(fyItem.expense):'' }}</td>
+              <td style="text-align: left;width:30%;padding:0 10px;vertical-align: top;">
+                <div v-for="(ditem,index) in fyItem.detailSplitList" :key="ditem.id+'-'+index" style="padding: 3px 0;" >
                   {{ ditem.splitObjName }}
                   <span v-if="ditem.splitObjFnumber">({{ ditem.splitObjFnumber }})</span>
                   <span v-if="ditem.childDetailSplit&&ditem.childDetailSplit.splitObjName">/</span>
                   {{ ditem.childDetailSplit?ditem.childDetailSplit.splitObjName:'' }}: {{ ditem.childDetailSplit?toThousands(ditem.childDetailSplit.splitAmount):toThousands(ditem.splitAmount) }}
                 </div>
               </td>
-              <td style="text-align: left;width:20%;padding:5px 10px;vertical-align: top;">
-                <div v-for="ditem in item.detailProductsList" :key="ditem.id" style="padding: 3px 0;">
+              <td style="text-align: left;width:22%;padding:0 10px;vertical-align: top;">
+                <div v-for="ditem in fyItem.detailProductsList" :key="ditem.id" style="padding: 3px 0;">
                   <div v-if="ditem.productCode">{{ ditem.productCode }}: {{ toThousands(ditem.expense) }}</div>
                   <div v-else-if="ditem.productBrandName">{{ ditem.productBrandName }}<span v-if="ditem.productTypeShowName">/</span>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
                   <div v-else>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
@@ -82,7 +84,7 @@
           </tbody>
         </table>
       </div>
-      <div class="container-fytable" style="padding:0 10px 10px;" v-if="spListData">
+      <div class="container-fytable" style="padding:0 10px 10px;" v-if="item.spListData&&item.spListData.length">
         <p class="table-title">审批信息:</p>
         <table
           border="1"
@@ -102,86 +104,83 @@
             </tr>
           </thead>
           <tbody>
-            <tr style="height: 30px;padding: 5px;" v-for="(item,index) in spListData" :key="index">
+            <tr style="height: 30px;padding: 5px;" v-for="(spitem,index) in item.spListData" :key="index">
               <td style="padding:5px 10px;">{{ index+1||'' }}</td>
-              <td style="padding:5px 10px;text-align: left;">{{ item.userName||'' }}</td>
-              <td style="padding:5px 10px;">{{ item.userType||'' }}</td>
-              <td style="padding:5px 10px;">{{ item.state||'' }}</td>
-              <td style="padding:5px 10px;">{{ item.remark||'' }}</td>
-              <td style="padding:5px 10px;">{{ item.hasAttachments!= '0' ? '请在钉钉中查看附件内容' : '--' }}</td>
-              <td style="padding:5px 10px;">{{ item.date||'' }}</td>
+              <td style="padding:5px 10px;text-align: left;">{{ spitem.userName||'' }}</td>
+              <td style="padding:5px 10px;">{{ spitem.userType||'' }}</td>
+              <td style="padding:5px 10px;">{{ spitem.state||'' }}</td>
+              <td style="padding:5px 10px;">{{ spitem.remark||'' }}</td>
+              <td style="padding:5px 10px;">{{ spitem.hasAttachments!= '0' ? '请在钉钉中查看附件内容' : '--' }}</td>
+              <td style="padding:5px 10px;">{{ spitem.date||'' }}</td>
             </tr></tbody>
         </table>
       </div>
+      <div class="container-fytable" style="padding:0 10px 10px;" v-else>
+        <p class="table-title">审批信息:暂无</p>
+      </div>
     </div>
   </div>
-  <!-- </a-modal> -->
+  </div>
 </template>
 
 <script>
 import { commonMixin } from '@/utils/mixin'
-import { expenseAcctDetailFindList, getProcessInstance } from '@/api/expenseManagement'
+import { jGPlPrint } from '@/libs/JGPrint.js'
 export default {
   mixins: [commonMixin],
-  props: {
-    showModal: {
-      type: Boolean,
-      default: false
-    },
-    detailSn: {
-      type: [Number, String],
-      default: ''
-    },
-    detailData: {
-      type: Object,
-      default: () => { return null }
-    }
-  },
   data () {
     return {
-      isShow: this.showModal,
-      fyListData: [],
-      spListData: [],
-      expenseInfo: null
+      list: [],
+      printNums: []
     }
   },
   methods: {
-    pageInfo () {
-      this.getFyList()
-      if (this.expenseInfo.state != 'WAIT_SUBMIT') {
-        this.getSpList()
-      }
+    setData (list) {
+      this.list = list
+      // list.map(item => {
+      //   this.printNums.push({
+      //     billType: 'FINANCE_BOOK_DETAIL',
+      //     billSn: item.bookDetailSn,
+      //     billNo: item.bookNo,
+      //     printType: '费用单打印'
+      //   })
+      // })
+      setTimeout(()=>{
+        this.prints()
+      },100)
     },
-    getFyList () {
-      expenseAcctDetailFindList({ expenseAccountSn: this.detailSn }).then(res => {
-        if (res.status == 200) {
-          this.fyListData = res.data
-        } else {
-          this.fyListData = []
-        }
+    // 打印
+    prints(){
+      const _this = this
+      const html = document.getElementsByClassName('expense-detail-print')
+      const printCons = []
+      for (let i = 0; i < html.length; i++) {
+        const h = html[i].clientHeight
+        printCons.push({
+          h: h,
+          t: html[i].innerHTML
+        })
+      }
+      // 排序从小到大
+      printCons.sort((a, b) => {
+        return a['h'] - b['h']
       })
-    },
-    getSpList () {
-      getProcessInstance({ businessType: 'EXPENSES', businessSn: this.detailSn }).then(res => {
-        if (res.status == 200) {
-          this.spListData = res.data
-        } else {
-          this.spListData = []
+
+      const htmlStr = []
+      for (let i = 0; i < printCons.length; i++) {
+        if (printCons[i].h > 560) {
+          htmlStr.push('')
+        }else{
+          printCons[i].t = '<div style="width:564pt;margin:0 auto;height:535px;">' +printCons[i].t+'</div>'
         }
-      })
-    }
-  },
-  // mounted () {
-  //   this.pageInfo()
-  // },
-  watch: {
-    detailData (nVal, oVal) {
-      if (nVal) {
-        this.expenseInfo = nVal
-        this.fyListData = []
-        this.spListData = []
-        this.pageInfo()
+        htmlStr.push(printCons[i].t)
       }
+      this.$store.state.app.curActionPermission = 'B_eRPrint'
+      // html, type, callback, printLogParams
+      jGPlPrint(htmlStr, 'preview', function (res) {
+        _this.$store.state.app.curActionPermission = ''
+        _this.$emit('printOk', res)
+      })
     }
   }
 }