byte-sailing-new/src/views/finance/fundManage/fundsStatement/index.vue

<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" :height="tableHiehgt"
      :cell-style="cellStyle">
      <el-table-column prop="accountManagementAlias" label="账户信息" width="400" fixed>
        <template #default="{ row }">
          <div class="account-box">
            <div class="text">
              <img src="@/assets/images/account-icon.png" alt="">
              <div class="account">账户类型：{{ row.accountManagementAlias }}</div>
            </div>
            <div class="corporation">{{ row.corporationName }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="currencyType" label="币种" width="220" fixed>
        <template #default="{ row }">
          {{ dictDataEcho(row.currencyType, dictsData.account_currency) }}{{ row.currencyType }}（{{ row.balanceTotal }}）
        </template>
      </el-table-column>
      <el-table-column :label="(dayNum - i + 1) + '日'" v-for="i of dayNum" :key="i">
        <el-table-column :prop="(dayNum - i + 1) + 'income'" label="收入" width="120" />
        <el-table-column :prop="(dayNum - i + 1) + 'expenditure'" label="支出" width="120" />
        <el-table-column :prop="(dayNum - i + 1) + 'balance'" label="余额" width="120" />
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { formatDate } from "@/utils/index";
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];
    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,
})
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;
  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;
            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.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;
  });
};
getList();
getAccountManagement();
</script>
<style lang="scss">
.fundsStatement {
  padding: 20px;
  margin: 20px;
  background: #fff;

  .account-box {
    padding: 40px 20px;

    .text {
      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;
      }
    }
  }

  //修改tabletr边框颜色
  .is-group {
    tr {
      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 {}
}</style>