|
|
@@ -4,38 +4,119 @@
|
|
|
<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-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-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>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ :height="tableHiehgt"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="accountManagementAlias"
|
|
|
+ label="账户信息"
|
|
|
+ width="200"
|
|
|
+ fixed
|
|
|
+ >
|
|
|
<template #default="{ row }">
|
|
|
- <div class="account-box">
|
|
|
- <div class="text">
|
|
|
- <div class="account">账户名称：{{ row.accountManagementAlias }}</div>
|
|
|
- <div class="company">{{ row.corporationName }}</div>
|
|
|
+ <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 }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="img"></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>
|
|
|
+ </div>
|
|
|
+ <div class="corporation hidden-text">
|
|
|
+ {{ row.corporationName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="currencyType" label="币种" width="150" fixed>
|
|
|
+ <el-table-column prop="currencyType" label="币种" width="180" fixed>
|
|
|
<template #default="{ row }">
|
|
|
- {{ dictDataEcho(row.currencyType, dictsData.account_currency) }}
|
|
|
+ <!-- {{ dictDataEcho(row.currencyType, dictsData.account_currency)
|
|
|
+ }} -->
|
|
|
+ {{ row.currencyType }}（{{ row.balanceTotal }}）
|
|
|
+ <!-- {{ row.currencyType }}（*99999999.99） -->
|
|
|
</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
|
|
|
+ :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>
|
|
|
+ </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>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :prop="dayNum - i + 1 + 'balance'"
|
|
|
+ label="余额"
|
|
|
+ width="100"
|
|
|
+ align="right"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div>{{ moneyFormat(row[dayNum - i + 1 + "balance"], 2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
@@ -46,6 +127,8 @@ const { proxy } = getCurrentInstance();
|
|
|
const loading = ref(false);
|
|
|
let tableData = ref([]);
|
|
|
const dayNum = ref(0);
|
|
|
+const tableHiehgt = ref(0);
|
|
|
+tableHiehgt.value = document.documentElement.clientHeight - 250;
|
|
|
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
|
|
|
if (columnIndex === 0) {
|
|
|
const _row = flitterData(tableData.value).one[rowIndex];
|
|
|
@@ -64,7 +147,9 @@ const flitterData = (arr) => {
|
|
|
spanOneArr.push(1);
|
|
|
} else {
|
|
|
//注意这里的quarterly是表格绑定的字段，根据自己的需求来改
|
|
|
- if (item.accountManagementAlias === arr[index - 1].accountManagementAlias) {
|
|
|
+ if (
|
|
|
+ item.accountManagementAlias === arr[index - 1].accountManagementAlias
|
|
|
+ ) {
|
|
|
//第一列需合并相同内容的判断条件
|
|
|
spanOneArr[concatOne] += 1;
|
|
|
spanOneArr.push(0);
|
|
|
@@ -79,15 +164,25 @@ const flitterData = (arr) => {
|
|
|
};
|
|
|
};
|
|
|
let req = ref({
|
|
|
- dateBetween: formatDate(new Date(), 'yyyy-MM'),
|
|
|
- managementId:null,
|
|
|
-})
|
|
|
-let dictsData = {}
|
|
|
-proxy
|
|
|
- .getDict(['account_currency'])
|
|
|
- .then((res) => {
|
|
|
- dictsData = res
|
|
|
- })
|
|
|
+ dateBetween: formatDate(new Date(), "yyyy-MM"),
|
|
|
+ managementId: null,
|
|
|
+});
|
|
|
+let dictsData = {};
|
|
|
+proxy.getDict(["account_currency"]).then((res) => {
|
|
|
+ dictsData = res;
|
|
|
+});
|
|
|
+const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
+ // 状态列字体颜色
|
|
|
+ // columnIndex 列下标
|
|
|
+ // rowIndex 行下标
|
|
|
+ // row 行
|
|
|
+ // column 列
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ return { background: "#F9F9F9", color: "#666" };
|
|
|
+ } else if (columnIndex === 1) {
|
|
|
+ return { background: "#F9F9F9", color: "#666" };
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
const getList = async () => {
|
|
|
loading.value = true;
|
|
|
@@ -113,20 +208,29 @@ 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;
|
|
|
+ }
|
|
|
}
|
|
|
dayNum.value = kelement.flowingWaterList.length;
|
|
|
- arr.push(obj);
|
|
|
+ //往前插入
|
|
|
+ arr.unshift(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;
|
|
|
- });
|
|
|
+ proxy
|
|
|
+ .post("/accountManagement/page", { pageNum: 1, pageSize: 10000 })
|
|
|
+ .then((message) => {
|
|
|
+ accountManagementData.value = message.rows;
|
|
|
+ });
|
|
|
};
|
|
|
getList();
|
|
|
getAccountManagement();
|
|
|
@@ -136,57 +240,61 @@ getAccountManagement();
|
|
|
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;
|
|
|
- }
|
|
|
+ padding: 40px 20px;
|
|
|
+
|
|
|
.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;
|
|
|
+ display: flex;
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 22px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 138deg,
|
|
|
+ #1b67ff 0%,
|
|
|
+ #9f63fb 72%,
|
|
|
+ #ea76fb 100%
|
|
|
+ );
|
|
|
+ border-radius: 5px;
|
|
|
+ opacity: 1;
|
|
|
+ margin-right: 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;
|
|
|
+ background: #eeeeee !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ tr:first-child {
|
|
|
+ //选择第一个th
|
|
|
+ th:first-child {
|
|
|
+ background: #eff6ff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ //选择第二个th
|
|
|
+ th:nth-child(2) {
|
|
|
+ background: #eff6ff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .el-table__row {
|
|
|
+ }
|
|
|
+}
|
|
|
+.hidden-text {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
</style>
|
cz
