我的账户新增明细

src/SDrpManagement/myaccountclass/index.vue

@@ -66,6 +66,7 @@
               </div>
             </template>
             <template v-slot:opreation="scope">
+              <el-button class="inline-16" type="text" @click="drawShow(scope.data)">明细</el-button>
               <editPrice v-if="tool.checkAuth($route.name,'update')" class="inline-16" :data="scope.data"/>
               <delete-btn
                 @deleteCreate="deleteCreate"
@@ -77,26 +78,83 @@
               />
             </template>
           </tableMainLayout>
-<!--          <div style="margin-top:16px;text-align:right">
-            <el-pagination
-              background
-              small
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-              :current-page="param.content.pageNumber"
-              :page-size="param.content.pageSize"
-              layout="total, prev, pager, next, jumper"
-              :total="total">
-            </el-pagination>
-          </div>-->
         </div>
       </div>
     </normal-layout>
+    <el-drawer
+        :title="drawTitle"
+        :visible.sync="dialogVisible"
+        size="90%"
+        direction="rtl"
+        append-to-body
+        @close="onClose">
+      <div class="drawer__panel" style="margin-bottom: 0!important;">
+        <div style="display: flex;justify-content: space-between">
+          <div>
+            <el-input  style="width:200px;" placeholder="搜索" :suffix-icon="paramInfo.content.where.condition?paramInfo.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="paramInfo.content.where.condition" @keyup.native.enter="listDataInfo(paramInfo.content.pageNumber = 1)" @clear="listDataInfo(paramInfo.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
+            </el-input>
+            <exportFile class="inline-16" :columns="drawType?tablecolsIncome:tablecolsPay" :param="paramInfo" :fileName="drawTitle"></exportFile>
+          </div>
+          <div>
+            <span class="search__label">审核日期:</span>
+            <span style="font-size: 14px">{{checkDate}}</span>
+          </div>
+        </div>
+        <tableTemplate style="margin-top: 10px" ref="table" :layout="drawType?tablecolsIncome:tablecolsPay" :data="voucherList" :opwidth="200" :custom="true" height="calc(100vh - 170px)">
+          <template v-slot:customcol="scope">
+            <p v-if="scope.column.columnname === 'province'">
+              {{scope.column.data.province+scope.column.data.city+scope.column.data.county}}
+            </p>
+            <p v-else-if="scope.column.columnname === 'price'">
+                <span v-if="scope.column.data[scope.column.columnname]">
+                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+                </span>
+              <span v-else>--</span>
+            </p>
+            <p v-else-if="scope.column.columnname === 'amount'">
+                <span v-if="scope.column.data[scope.column.columnname]">
+                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+                </span>
+              <span v-else>--</span>
+            </p>
+            <p v-else-if="scope.column.columnname === 'outamount'">
+                <span v-if="scope.column.data[scope.column.columnname]">
+                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+                </span>
+              <span v-else>--</span>
+            </p>
+            <p v-else-if="scope.column.columnname === 'unInvoiceamount'">
+                <span v-if="scope.column.data[scope.column.columnname]">
+                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+                </span>
+              <span v-else>--</span>
+            </p>
+            <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
+          </template>
+        </tableTemplate>
+        <div  style="text-align:right;float: right;margin-top: 10px">
+          <el-pagination
+              background
+              @size-change="voucherHandleSizeChange"
+              @current-change="voucherHandleCurrentChange"
+              :current-page="voucherCurrentPage"
+              :pager-count="5"
+              :page-sizes="[100, 50,100, 200]"
+              :page-size="100"
+              layout="total,sizes, prev, pager, next, jumper"
+              :total="voucherTotal">
+          </el-pagination>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
+import tableTemplate from '@/views/salesData/components/table';
+import exportFile from '@/components/export_file/index'
 export default {
+  components:{tableTemplate,exportFile},
   data () {
     return {
       activeName:0,
@@ -131,10 +189,30 @@ export default {
           }
         }
       },
+      paramInfo:{
+        "id": "20240111131304",
+        "content": {
+          "sa_hrcashbillid": '',
+          "where": {
+            "condition": ""
+          },
+          "pageNumber":1,
+          "pageSize":20
+        }
+      },
       total:0,
       dateSelect:[],
       usertype:JSON.parse(sessionStorage.getItem('active_account')).usertype,
-      hrid:JSON.parse(sessionStorage.getItem('active_account')).hrid
+      hrid:JSON.parse(sessionStorage.getItem('active_account')).hrid,
+      drawTitle:'',
+      drawType:'',
+      dialogVisible:false,
+      tablecolsIncome:[],
+      tablecolsPay:[],
+      voucherList:[],
+      voucherTotal:0,
+      voucherCurrentPage:0,
+      checkDate:''
     }
   },
   methods:{
@@ -148,8 +226,6 @@ export default {
         }
       })
       this.acountlist = res.data
-      console.log(this.acountlist);
-
       this.accountMx()
     },
     async listDataSales(){
@@ -178,6 +254,12 @@ export default {
         console.log(res,"res的数据")
       }
     },
+    async listDataInfo(){
+      const res = await this.$api.requested(this.paramInfo)
+      this.voucherList = res.data
+      this.voucherTotal = res.total
+      this.voucherCurrentPage = res.pageNumber
+    },
     handleClick (index) {
       this.activeName = index
       this.accountMx()
@@ -211,9 +293,34 @@ export default {
         }
       }
       this.accountMx()
+    },
+    drawShow(data){
+      this.dialogVisible = true
+      console.log(data)
+      this.drawType = data.type
+      if (data.type){
+        this.drawTitle = data.billno + '_' + '收入凭证明细'
+      }else {
+        this.drawTitle = data.billno + '_' + '支出凭证明细'
+      }
+      this.paramInfo.content.sa_hrcashbillid = data.sa_hrcashbillid
+      this.checkDate = this.dateSelect !== '' && this.dateSelect !== null?this.dateSelect[0]+'至' + this.dateSelect[1] :""
+      this.listDataInfo()
+    },
+    onClose(){
+      this.dialogVisible = false
+    },
+    voucherHandleSizeChange(val){
+      this.paramInfo.content.pageSize = val
+      this.listDataInfo()
+    },
+    voucherHandleCurrentChange(val){
+      this.paramInfo.content.pageSize = val
+      this.listDataInfo()
     }
   },
   mounted () {
+    this.dateSelect = ''
     if (this.usertype == '1'){
       this.listDataSales()
     }else {
@@ -222,6 +329,8 @@ export default {
   },
   created () {
     this.tablecols = this.tool.tabelCol(this.$route.name)['accountMoneyDetailTable'].tablecols
+    this.tablecolsIncome = this.tool.tabelCol(this.$route.name)['incomeVoucherDetailsTable'].tablecols
+    this.tablecolsPay = this.tool.tabelCol(this.$route.name)['payVoucherDetailsTable'].tablecols
   },
 }