|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <div class="fundsStatement">
|
|
|
+ <el-form :inline="true" :model="req" class="demo-form-inline">
|
|
|
+
|
|
|
+ <el-form-item label="资金账户">
|
|
|
+ <el-select
|
|
|
+ v-model="req.managementId"
|
|
|
+ placeholder="请输入"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option :label="i.name" :value="i.id" v-for="i in accountManagementData" :key='i.id' />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间">
|
|
|
+ <!-- 选单月 -->
|
|
|
+ <el-date-picker
|
|
|
+ v-model="req.dateBetween"
|
|
|
+ type="month"
|
|
|
+ format="YYYY/MM"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ placeholder="选择日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="getList">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="accountManagementAlias"
|
|
|
+ label="账户信息"
|
|
|
+ width="400"
|
|
|
+ fixed
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="account-box">
|
|
|
+ <div class="text">
|
|
|
+ <div class="account">账户名称:{{row.accountManagementAlias}}</div>
|
|
|
+ <div class="company">{{row.corporationName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="img"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="currencyType"
|
|
|
+ label="币种"
|
|
|
+ width="150"
|
|
|
+ fixed
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ :label="index + '日'"
|
|
|
+ v-for="index of dayNum"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-table-column :prop="index + 'income'" label="收入" />
|
|
|
+ <el-table-column :prop="index + 'expenditure'" label="支出" />
|
|
|
+ <el-table-column :prop="index + 'balance'" label="余额" />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { formatDate } from '@/utils/index'
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
+const loading = ref(false)
|
|
|
+let tableData = ref([])
|
|
|
+const dayNum = ref(0)
|
|
|
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ const _row = flitterData(tableData.value).one[rowIndex]
|
|
|
+ const _col = _row > 0 ? 1 : 0
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: _col,
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const flitterData = (arr) => {
|
|
|
+ let spanOneArr = []
|
|
|
+ let concatOne = 0
|
|
|
+ arr.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ spanOneArr.push(1)
|
|
|
+ } else {
|
|
|
+ //注意这里的quarterly是表格绑定的字段,根据自己的需求来改
|
|
|
+ if (
|
|
|
+ item.accountManagementAlias ===
|
|
|
+ arr[index - 1].accountManagementAlias
|
|
|
+ ) {
|
|
|
+ //第一列需合并相同内容的判断条件
|
|
|
+ spanOneArr[concatOne] += 1
|
|
|
+ spanOneArr.push(0)
|
|
|
+ } else {
|
|
|
+ spanOneArr.push(1)
|
|
|
+ concatOne = index
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ one: spanOneArr,
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let req = ref({
|
|
|
+ dateBetween: formatDate(new Date(), 'yyyy-MM'),
|
|
|
+ managementId:null,
|
|
|
+})
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ console.log(req.value,123123123)
|
|
|
+ loading.value = true
|
|
|
+ proxy
|
|
|
+ .post('/accountStatement/capitalDaily',req.value)
|
|
|
+ .then((message) => {
|
|
|
+ console.log(message)
|
|
|
+ let arr = []
|
|
|
+ //公司循环
|
|
|
+ for (let i = 0; i < message.length; i++) {
|
|
|
+ const element = message[i]
|
|
|
+ //公司下的管理账户循环
|
|
|
+ for (let j = 0; j < element.managementList.length; j++) {
|
|
|
+ const jelement = element.managementList[j]
|
|
|
+ //管理账户下的币种循环
|
|
|
+ for (let k = 0; k < jelement.currencyList.length; k++) {
|
|
|
+ const kelement = jelement.currencyList[k]
|
|
|
+ let obj = {
|
|
|
+ corporationName: element.corporationName,
|
|
|
+ accountManagementAlias:
|
|
|
+ jelement.accountManagementAlias,
|
|
|
+ currencyType: kelement.currencyType,
|
|
|
+ }
|
|
|
+ //币种下的日期循环
|
|
|
+ for (
|
|
|
+ let l = 0;
|
|
|
+ l < kelement.flowingWaterList.length;
|
|
|
+ l++
|
|
|
+ ) {
|
|
|
+ const lelement = kelement.flowingWaterList[l]
|
|
|
+ obj[lelement.day + 'balance'] = lelement.balance
|
|
|
+ obj[lelement.day + 'income'] = lelement.income
|
|
|
+ obj[lelement.day + 'expenditure'] =
|
|
|
+ lelement.expenditure
|
|
|
+ }
|
|
|
+ dayNum.value = kelement.flowingWaterList.length
|
|
|
+ arr.push(obj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(arr)
|
|
|
+ tableData.value = arr
|
|
|
+ })
|
|
|
+}
|
|
|
+const accountManagementData = ref([])
|
|
|
+const getAccountManagement = async () => {
|
|
|
+ proxy
|
|
|
+ .post('/accountManagement/page',{pageNum:1,pageSize:10000})
|
|
|
+ .then((message) => {
|
|
|
+ accountManagementData.value = message.rows
|
|
|
+ })
|
|
|
+}
|
|
|
+getList()
|
|
|
+getAccountManagement()
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.fundsStatement {
|
|
|
+ padding: 20px;
|
|
|
+ margin: 20px;
|
|
|
+ background: #fff;
|
|
|
+ .account-box {
|
|
|
+ width: 360px;
|
|
|
+ height: 102px;
|
|
|
+ background: #eff6ff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 10px 20px 33px;
|
|
|
+ margin: 20px 10px;
|
|
|
+ box-shadow: 0px 2px 10px 1px rgba(153, 153, 153, 0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url(../../../../assets/images/icon_zhangh1.png)
|
|
|
+ no-repeat;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ padding-top: 10px;
|
|
|
+ .account {
|
|
|
+ color: #333;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .company {
|
|
|
+ color: #999;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .account-box:before {
|
|
|
+ content: '';
|
|
|
+ width: 10px;
|
|
|
+ height: 102px;
|
|
|
+ background: #0084ff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|