正式资金日报表修改

src/views/dataBoard/board/customerAnalysis/index.vue

@@ -6,11 +6,13 @@
           <el-select
             v-model="queryForm.countryId"
             placeholder="请选择"
+            clearable
+            filterable
             @change="onQuery"
           >
             <el-option
               v-for="item in countryData"
-              :label="item.chineseName"
+              :label="item.name"
               :value="item.id"
               :key="item.id"
             >

src/views/dataBoard/board/productAnalysis/index.vue

@@ -3,8 +3,8 @@
     <div style="background-color: white; padding: 20px">
       <el-form :inline="true" :model="queryForm">
         <el-form-item label="国家">
-          <el-select v-model="queryForm.countryId" placeholder="请选择" @change="onQuery">
-            <el-option v-for="item in countryData" :label="item.chineseName" :value="item.id" :key="item.id"> </el-option>
+          <el-select v-model="queryForm.countryId" placeholder="请选择" clearable filterable @change="onQuery">
+            <el-option v-for="item in countryData" :label="item.name" :value="item.id" :key="item.id" > </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="日期">

src/views/finance/fundManage/fundsStatement/index.vue

@@ -1,45 +1,257 @@
 <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 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"
+    >
+      <div class="statistics-item one">
+        <div class="left">期末余额</div>
+        <div class="center" style="margin: 0 15px"></div>
+        <div class="right">
+          <div
+            style="padding: 4px"
+            v-for="(item, index) in headerData"
+            :key="index"
+          >
+            <span style="margin-right: 24px; font-weight: 400">{{
+              item.currency
+            }}</span>
+            <span style="text-align: right; letter-spacing: 1px; float: right">
+              {{ moneyFormat(item.balance, 2) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="statistics-item two">
+        <div class="left">收入合计</div>
+        <div class="center" style="margin: 0 15px"></div>
+        <div class="right">
+          <div
+            style="padding: 4px"
+            v-for="(item, index) in headerData"
+            :key="index"
+          >
+            <span style="margin-right: 24px; font-weight: 400">{{
+              item.currency
+            }}</span>
+            <span style="text-align: right; letter-spacing: 1px; float: right">
+              {{ moneyFormat(item.income, 2) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="statistics-item three">
+        <div class="left">支出合计</div>
+        <div class="center" style="margin: 0 15px"></div>
+        <div class="right">
+          <div
+            style="padding: 4px"
+            v-for="(item, index) in headerData"
+            :key="index"
+          >
+            <span style="margin-right: 24px; font-weight: 400">{{
+              item.currency
+            }}</span>
+            <span style="text-align: right; letter-spacing: 1px; float: right">
+              {{ moneyFormat(item.expenditure, 2) }}
+            </span>
           </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>
+      </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"
+      >
+        <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; color: #333">
+                {{ row.name }}
+              </div>
+            </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>
+
+              <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="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>
+              {{ row.currencyType }}（{{ moneyFormat(row.balanceTotal, 2) }}）
+            </div>
+          </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, $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>
+                {{ 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>
+                {{ 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>
+                {{ moneyFormat(row[dayNum - i + 1 + "balance"], 2) }}
+              </div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 <script setup>
@@ -68,7 +280,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);
@@ -83,15 +297,13 @@ const flitterData = (arr) => {
   };
 };
 let req = ref({
-  dateBetween: formatDate(new Date(), 'yyyy-MM'),
+  dateBetween: formatDate(new Date(), "yyyy-MM"),
   managementId: null,
-})
-let dictsData = {}
-proxy
-  .getDict(['account_currency'])
-  .then((res) => {
-    dictsData = res
-  })
+});
+let dictsData = {};
+proxy.getDict(["account_currency"]).then((res) => {
+  dictsData = res;
+});
 const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
   // 状态列字体颜色
   // columnIndex 列下标
@@ -99,12 +311,12 @@ const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
   // row 行
   // column 列
   if (columnIndex === 0) {
-    return { background: "#F9F9F9",color:'#666' };
+    return { background: "#F9F9F9", color: "#666" };
   } else if (columnIndex === 1) {
-    return { background: "#F9F9F9",color:'#666' };
+    return { background: "#F9F9F9", color: "#666" };
   }
-}
-
+};
+const headerData = ref([]);
 const getList = async () => {
   loading.value = true;
   proxy.post("/accountStatement/capitalDaily", req.value).then((message) => {
@@ -129,9 +341,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;
             }
           }
@@ -141,24 +351,60 @@ const getList = async () => {
         }
       }
     }
-    console.log(arr);
     tableData.value = arr;
+    loading.value = false;
+    // 获取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([]);
 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();
 </script>
 <style lang="scss">
 .fundsStatement {
-  padding: 20px;
-  margin: 20px;
-  background: #fff;
+  padding: 15px;
+  // margin: 20px;
+  // background: #fff;
 
   .account-box {
     padding: 40px 20px;
@@ -173,7 +419,12 @@ getAccountManagement();
       img {
         width: 30px;
         height: 22px;
-        background: linear-gradient(138deg, #1B67FF 0%, #9F63FB 72%, #EA76FB 100%);
+        background: linear-gradient(
+          138deg,
+          #1b67ff 0%,
+          #9f63fb 72%,
+          #ea76fb 100%
+        );
         border-radius: 5px;
         opacity: 1;
         margin-right: 10px;
@@ -188,23 +439,66 @@ getAccountManagement();
         border-color: #fff !important;
         background: #eeeeee !important;
       }
-
-
     }
 
     tr:first-child {
-
       //选择第一个th
       th:first-child {
-        background: #EFF6FF !important;
+        background: #eff6ff !important;
       }
 
       //选择第二个th
       th:nth-child(2) {
-        background: #EFF6FF !important;
+        background: #eff6ff !important;
       }
     }
   }
 
-  .el-table__row {}
-}</style>
+  .el-table__row {
+  }
+}
+.hidden-text {
+  overflow: hidden;
+  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>