|
@@ -1,241 +1,189 @@
|
|
|
<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
|
|
|
- >
|
|
|
- <template #default="{ row }">
|
|
|
- {{dictDataEcho(row.currencyType, dictsData.account_currency)}}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <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>
|
|
|
+ <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>
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ dictDataEcho(row.currencyType, dictsData.account_currency) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <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,
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+import { formatDate } from "@/utils/index";
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const loading = ref(false);
|
|
|
+let tableData = ref([]);
|
|
|
+const dayNum = ref(0);
|
|
|
+const objectSpanMethod = ({ 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 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,
|
|
|
-})
|
|
|
-let dictsData = {}
|
|
|
-proxy
|
|
|
- .getDict(['payment_status','account_currency'])
|
|
|
- .then((res) => {
|
|
|
- dictsData = res
|
|
|
- })
|
|
|
-
|
|
|
+ dateBetween: formatDate(new Date(), "yyyy-MM"),
|
|
|
+ managementId: "",
|
|
|
+});
|
|
|
+let dictsData = {};
|
|
|
+proxy.getDict(["payment_status", "account_currency"]).then((res) => {
|
|
|
+ dictsData = res;
|
|
|
+});
|
|
|
const getList = async () => {
|
|
|
- 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([])
|
|
|
+ loading.value = true;
|
|
|
+ proxy.post("/accountStatement/capitalDaily", req.value).then((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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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()
|
|
|
+ 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;
|
|
|
- }
|
|
|
- //修改tabletr边框颜色
|
|
|
- .is-group {
|
|
|
- tr {
|
|
|
- .el-table_1_column_1{
|
|
|
- background: #EEEEEE!important;
|
|
|
-
|
|
|
- }
|
|
|
- th{
|
|
|
- border-color: #fff!important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ //修改tabletr边框颜色
|
|
|
+ .is-group {
|
|
|
+ tr {
|
|
|
+ .el-table_1_column_1 {
|
|
|
+ background: #eeeeee !important;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ border-color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|