|
|
@@ -1,124 +1,245 @@
|
|
|
<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="请输入" clearable>
|
|
|
- <el-option label="全部" value=""></el-option>
|
|
|
- <el-option
|
|
|
- :label="i.alias"
|
|
|
- :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"
|
|
|
- :height="tableHiehgt"
|
|
|
- :cell-style="cellStyle"
|
|
|
+ <div style="background: #fff; padding: 15px 15px 0 15px">
|
|
|
+ <el-form :inline="true" :model="req" class="demo-form-inline">
|
|
|
+ <el-form-item label="资金账户">
|
|
|
+ <el-select v-model="req.managementId" placeholder="请输入" clearable>
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option
|
|
|
+ :label="i.alias"
|
|
|
+ :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>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="padding: 20px; background: #fff; margin: 20px 0px"
|
|
|
+ class="statistics"
|
|
|
>
|
|
|
- <el-table-column
|
|
|
- prop="accountManagementAlias"
|
|
|
- label="账户信息"
|
|
|
- width="200"
|
|
|
- fixed
|
|
|
+ <div class="statistics-item one">
|
|
|
+ <div class="left">期末余额</div>
|
|
|
+ <div class="center"></div>
|
|
|
+ <div class="right">
|
|
|
+ <div
|
|
|
+ style="padding: 4px"
|
|
|
+ v-for="(item, index) in headerData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span style="margin-right: 10px">{{ item.currency }}</span>
|
|
|
+ <span> {{ moneyFormat(item.balance, 2) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistics-item two">
|
|
|
+ <div class="left">收入合计</div>
|
|
|
+ <div class="center"></div>
|
|
|
+ <div class="right">
|
|
|
+ <div
|
|
|
+ style="padding: 4px"
|
|
|
+ v-for="(item, index) in headerData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span style="margin-right: 10px">{{ item.currency }}</span>
|
|
|
+ <span> {{ moneyFormat(item.income, 2) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistics-item three">
|
|
|
+ <div class="left">支出合计</div>
|
|
|
+ <div class="center"></div>
|
|
|
+ <div class="right">
|
|
|
+ <div
|
|
|
+ style="padding: 4px"
|
|
|
+ v-for="(item, index) in headerData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span style="margin-right: 10px">{{ item.currency }}</span>
|
|
|
+ <span> {{ moneyFormat(item.expenditure, 2) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="background: #fff; padding: 15px 15px 0 15px">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ :height="tableHiehgt"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ v-loading="loading"
|
|
|
>
|
|
|
- <template #default="{ row }">
|
|
|
- <el-popover placement="top-start" trigger="hover">
|
|
|
- <div style="width: 100%">
|
|
|
- <div
|
|
|
- style="
|
|
|
- margin-bottom: 10px;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 14px;
|
|
|
- color: #333;
|
|
|
- "
|
|
|
- >
|
|
|
- {{ row.accountManagementAlias }}
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- {{ row.corporationName }}
|
|
|
+ <el-table-column
|
|
|
+ prop="accountManagementAlias"
|
|
|
+ label="账户信息"
|
|
|
+ width="200"
|
|
|
+ fixed
|
|
|
+ >
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div v-if="$index === 0">
|
|
|
+ <div style="font-weight: 700; font-size: 14px">
|
|
|
+ {{ row.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <template #reference>
|
|
|
- <div class="account-box">
|
|
|
- <div class="text">
|
|
|
- <img src="@/assets/images/account-icon.png" alt="" />
|
|
|
- <div class="account hidden-text">
|
|
|
- {{ row.accountManagementAlias }}
|
|
|
- </div>
|
|
|
+ <el-popover placement="top-start" trigger="hover" v-else>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ row.accountManagementAlias }}
|
|
|
</div>
|
|
|
- <div class="corporation hidden-text">
|
|
|
+ <div>
|
|
|
{{ row.corporationName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="currencyType" label="币种" width="180" fixed>
|
|
|
- <template #default="{ row }">
|
|
|
- <!-- {{ dictDataEcho(row.currencyType, dictsData.account_currency)
|
|
|
- }} -->
|
|
|
- {{ row.currencyType }}（{{ row.balanceTotal }}）
|
|
|
- <!-- {{ row.currencyType }}（*99999999.99） -->
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- :label="dayNum - i + 1 + '日'"
|
|
|
- v-for="i of dayNum"
|
|
|
- :key="i"
|
|
|
- align="center"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- :prop="dayNum - i + 1 + 'income'"
|
|
|
- label="收入"
|
|
|
- width="100"
|
|
|
- align="right"
|
|
|
- >
|
|
|
- <template #default="{ row }">
|
|
|
- <div>{{ moneyFormat(row[dayNum - i + 1 + "income"], 2) }}</div>
|
|
|
+
|
|
|
+ <template #reference>
|
|
|
+ <div class="account-box">
|
|
|
+ <div class="text">
|
|
|
+ <img src="@/assets/images/account-icon.png" alt="" />
|
|
|
+ <div class="account hidden-text">
|
|
|
+ {{ row.accountManagementAlias }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="corporation hidden-text">
|
|
|
+ {{ row.corporationName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- :prop="dayNum - i + 1 + 'expenditure'"
|
|
|
- label="支出"
|
|
|
- width="100"
|
|
|
- align="right"
|
|
|
- >
|
|
|
- <template #default="{ row }">
|
|
|
- <div>{{ moneyFormat(row[dayNum - i + 1 + "expenditure"], 2) }}</div>
|
|
|
+ <el-table-column prop="currencyType" label="币种" width="180" fixed>
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div v-if="$index === 0">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in row.currencyTypeList"
|
|
|
+ :key="index"
|
|
|
+ style="padding: 2px 0"
|
|
|
+ >
|
|
|
+ {{ item.currencyType }}（{{
|
|
|
+ moneyFormat(item.balanceTotal, 2)
|
|
|
+ }}）
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ row.currencyType }}（{{ moneyFormat(row.balanceTotal, 2) }}）
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- :prop="dayNum - i + 1 + 'balance'"
|
|
|
- label="余额"
|
|
|
- width="100"
|
|
|
- align="right"
|
|
|
+ :label="dayNum - i + 1 + '日'"
|
|
|
+ v-for="i of dayNum"
|
|
|
+ :key="i"
|
|
|
+ align="center"
|
|
|
>
|
|
|
- <template #default="{ row }">
|
|
|
- <div>{{ moneyFormat(row[dayNum - i + 1 + "balance"], 2) }}</div>
|
|
|
- </template>
|
|
|
+ <el-table-column
|
|
|
+ :prop="dayNum - i + 1 + 'income'"
|
|
|
+ label="收入"
|
|
|
+ width="100"
|
|
|
+ align="right"
|
|
|
+ >
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div v-if="$index === 0">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in row.currencyTypeList"
|
|
|
+ :key="index"
|
|
|
+ style="padding: 2px 0"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ moneyFormat(
|
|
|
+ row[item.currencyType + (dayNum - i + 1 + "") + "income"],
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ moneyFormat(row[dayNum - i + 1 + "income"], 2) }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :prop="dayNum - i + 1 + 'expenditure'"
|
|
|
+ label="支出"
|
|
|
+ width="100"
|
|
|
+ align="right"
|
|
|
+ >
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div v-if="$index === 0">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in row.currencyTypeList"
|
|
|
+ :key="index"
|
|
|
+ style="padding: 2px 0"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ moneyFormat(
|
|
|
+ row[
|
|
|
+ item.currencyType +
|
|
|
+ (dayNum - i + 1 + "") +
|
|
|
+ "expenditure"
|
|
|
+ ],
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ moneyFormat(row[dayNum - i + 1 + "expenditure"], 2) }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :prop="dayNum - i + 1 + 'balance'"
|
|
|
+ label="余额"
|
|
|
+ width="100"
|
|
|
+ align="right"
|
|
|
+ >
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div v-if="$index === 0">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in row.currencyTypeList"
|
|
|
+ :key="index"
|
|
|
+ style="padding: 2px 0"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ moneyFormat(
|
|
|
+ row[
|
|
|
+ item.currencyType + (dayNum - i + 1 + "") + "balance"
|
|
|
+ ],
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ moneyFormat(row[dayNum - i + 1 + "balance"], 2) }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
@@ -183,7 +304,7 @@ const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
return { background: "#F9F9F9", color: "#666" };
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
+const headerData = ref([]);
|
|
|
const getList = async () => {
|
|
|
loading.value = true;
|
|
|
proxy.post("/accountStatement/capitalDaily", req.value).then((message) => {
|
|
|
@@ -208,9 +329,7 @@ const getList = async () => {
|
|
|
obj[lelement.day + "balance"] = lelement.balance;
|
|
|
obj[lelement.day + "income"] = lelement.income;
|
|
|
obj[lelement.day + "expenditure"] = lelement.expenditure;
|
|
|
- console.log(kelement.flowingWaterList.length + "gggg" + l);
|
|
|
if (l === 0) {
|
|
|
- console.log(kelement.flowingWaterList.length);
|
|
|
obj.balanceTotal = lelement.balance;
|
|
|
}
|
|
|
}
|
|
|
@@ -220,8 +339,40 @@ const getList = async () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- console.log(arr);
|
|
|
- tableData.value = arr;
|
|
|
+ // 获取table第一行统计数据
|
|
|
+ proxy.post("/accountStatement/getCurrencyList", req.value).then((res) => {
|
|
|
+ let obj = {
|
|
|
+ currencyTypeList: [],
|
|
|
+ };
|
|
|
+ obj.name = "统计";
|
|
|
+ for (let i = 0; i < res.length; i++) {
|
|
|
+ const iele = res[i];
|
|
|
+ let objOne = {};
|
|
|
+ objOne.currencyType = iele.currencyType;
|
|
|
+ let num = 0;
|
|
|
+ // 获取相同币种的总余额
|
|
|
+ for (let o = 0; o < arr.length; o++) {
|
|
|
+ const oele = arr[o];
|
|
|
+ if (objOne.currencyType === oele.currencyType) {
|
|
|
+ num += oele.balanceTotal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ objOne.balanceTotal = num;
|
|
|
+ obj.currencyTypeList.push(objOne);
|
|
|
+ for (let j = 0; j < iele.flowingWaterList.length; j++) {
|
|
|
+ const jele = iele.flowingWaterList[j];
|
|
|
+ obj[iele.currencyType + jele.day + "balance"] = jele.balance;
|
|
|
+ obj[iele.currencyType + jele.day + "income"] = jele.income;
|
|
|
+ obj[iele.currencyType + jele.day + "expenditure"] = jele.expenditure;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ arr.unshift(obj);
|
|
|
+ tableData.value = arr;
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ proxy.post("/accountStatement/getTotalList", req.value).then((res) => {
|
|
|
+ headerData.value = res;
|
|
|
});
|
|
|
};
|
|
|
const accountManagementData = ref([]);
|
|
|
@@ -237,9 +388,9 @@ getAccountManagement();
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.fundsStatement {
|
|
|
- padding: 20px;
|
|
|
- margin: 20px;
|
|
|
- background: #fff;
|
|
|
+ padding: 15px;
|
|
|
+ // margin: 20px;
|
|
|
+ // background: #fff;
|
|
|
|
|
|
.account-box {
|
|
|
padding: 40px 20px;
|
|
|
@@ -297,4 +448,43 @@ getAccountManagement();
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
+.statistics {
|
|
|
+ display: flex;
|
|
|
+ .statistics-item {
|
|
|
+ padding: 15px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 280px;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ // background: #eff6ff;
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ opacity: 1;
|
|
|
+ .left {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .center {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one {
|
|
|
+ background: #eff6ff;
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ background: #fff1e1;
|
|
|
+ }
|
|
|
+ .three {
|
|
|
+ background: #e4f9f9;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
cz