资金流水列表

src/components/common-list.vue

@@ -21,7 +21,8 @@
 					@click="listCk(i)"
 				>
 					<div v-for="j in config" :key="j.prop">
-						<span>{{ j.label }}：</span>{{ i[j.prop] }}
+						<span>{{ j.label }}：</span>
+						<span :style="i[j.style]">{{ i[j.prop] }}</span>
 					</div>
 				</div>
 				<div class="more-box" v-if="showMore" @click="listCk(i)">
@@ -112,8 +113,6 @@ const listCk = (item) => {
 			.center-content {
 				flex: 1;
 			}
-			.left-box {
-			}
 		}
 	}
 }

src/lang/cn.js

@@ -1055,5 +1055,13 @@ export const lang = {
 		bbb:'油泵电机',
 		ccc:'蓄料电机',
 		ddd:'离心电机',
+	},
+	flowFunds: {
+		name: '资金流水',
+		company: '归属公司',
+		account: '资金账户',
+		amount: '交易金额',
+		tradingHour: '交易时间',
+		digest: '摘要',
 	}
 }

src/router/routerLXF.js

@@ -65,6 +65,11 @@ export function routesLXF() {
       name: "灭菌机",
       component: () => import("../views/equipment/sterilizationMachine.vue"),
     },
+    {
+      path: "flowOfFunds",
+      name: "资金流水",
+      component: () => import("../views/fund/flow-of-funds/index.vue"),
+    },
   ];
   return routesLXF;
 }

src/views/fund/flow-of-funds/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <van-nav-bar :title="$t('flowFunds.name')" left-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
+    <template #right>{{ $t("common.add") }}</template>
+  </van-nav-bar>
+  <van-search v-model="req.keyword" :placeholder="$t('common.pleaseEnterKeywords')" @search="onRefresh" />
+  <van-pull-refresh v-model="loading" @refresh="onRefresh">
+    <div class="list">
+      <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('common.noMore')" @load="getList" style="margin-bottom: 60px">
+        <commonList :data="listData" @onClick="toDtl" :config="listConfig"></commonList>
+      </van-list>
+    </div>
+  </van-pull-refresh>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import commonList from "@/components/common-list.vue";
+
+const proxy = getCurrentInstance().proxy;
+const onClickLeft = () => proxy.$router.push("/main/working");
+const onClickRight = () => {
+  //   proxy.$router.push({
+  //     path: "materialLibraryAdd",
+  //     query: {
+  //       type: "add",
+  //     },
+  //   });
+};
+const req = ref({
+  pageNum: 1,
+  keyword: null,
+});
+const finished = ref(false);
+const onRefresh = () => {
+  req.value.pageNum = 1;
+  finished.value = false;
+  getList("refresh");
+};
+const loading = ref(false);
+const listData = ref([]);
+const getList = (type) => {
+  loading.value = true;
+  proxy
+    .post("/accountRunningWater/page", req.value)
+    .then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        res.data.rows = res.data.rows.map((item) => {
+          let status = "";
+          let style = "color: #04cb04";
+          if (item.status == 20) {
+            status = "-";
+            style = "color: red";
+          }
+          let currency = "";
+          if (item.currency) {
+            currency = item.currency;
+          }
+          return {
+            ...item,
+            currencyAmount: currency + " " + status + item.amount,
+            style: style,
+          };
+        });
+      }
+      listData.value = type === "refresh" ? res.data.rows : listData.value.concat(res.data.rows);
+      if (req.value.pageNum * 10 >= res.data.total) {
+        finished.value = true;
+      }
+      req.value.pageNum++;
+      loading.value = false;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+const toDtl = (row) => {
+  //   proxy.$router.push({
+  //     path: "materialLibraryAdd",
+  //     query: {
+  //       id: row.id,
+  //       type: 'edit'
+  //     },
+  //   });
+};
+const listConfig = ref([
+  {
+    label: proxy.t("flowFunds.company"),
+    prop: "corporationName",
+  },
+  {
+    label: proxy.t("flowFunds.account"),
+    prop: "accountManagementName",
+  },
+  {
+    label: proxy.t("flowFunds.amount"),
+    prop: "currencyAmount",
+    style: "style",
+  },
+  {
+    label: proxy.t("flowFunds.tradingHour"),
+    prop: "transactionTime",
+  },
+  {
+    label: proxy.t("flowFunds.digest"),
+    prop: "remarks",
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+.list {
+  min-height: 70vh;
+}
+</style>