1

src/components/process/PurchasePayment.vue

@@ -554,6 +554,7 @@ const clickAdd = () => {
 const handleRemove = (index) => {
   formData.data.payDetailList.splice(index, 1);
   getDecisionAids();
+  changeMoney();
 };
 const changeAccount = (val) => {
   if (val) {

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

@@ -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>