fix: 耗材列表增加统计

src/views/inventory/consumables/components/DataStatistics.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="DataStatistics">
+    <div style="width: 200px">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <span>耗材种数</span>
+      <span class="font-700">{{ data.totalRow || 0 }}</span>
+    </div>
+    <div style="width: 300px">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <div>
+        <div>
+          <span>增加数量：</span>
+          <span class="num">{{ data.inSumTotal || 0 }}</span>
+        </div>
+        <div style="display: flex">
+          <div>
+            <span>手动增加：</span>
+            <span class="num">{{ data.winInNum || 0 }}</span>
+          </div>
+          <span style="margin: 0 20px; color: #ccc">|</span>
+          <div>
+            <span>入库：</span>
+            <span class="num">{{ data.stockInNum || 0 }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="width: 500px">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <div>
+        <div>
+          <span>减少数量：</span>
+          <span class="num">{{ data.outSumTotal || 0 }}</span>
+        </div>
+        <div style="display: flex">
+          <div>
+            <span>手动减少：</span>
+            <span class="num">{{ data.lossOutNum || 0 }}</span>
+          </div>
+          <span style="margin: 0 20px; color: #ccc">|</span>
+          <div>
+            <span>消耗：</span>
+            <span class="num">{{ data.consumeNum || 0 }}</span>
+          </div>
+          <span style="margin: 0 20px; color: #ccc">|</span>
+          <div>
+            <span>报损：</span>
+            <span class="num">{{ data.damageNum || 0 }}</span>
+          </div>
+          <span style="margin: 0 20px; color: #ccc">|</span>
+          <div>
+            <span>出库：</span>
+            <span class="num">{{ data.stockOutNum || 0 }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+</script>
+
+
+<style scoped lang="scss">
+.DataStatistics {
+  border: 1px solid #e4e7ed;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  > div {
+    height: 80px;
+    background-color: #f4f9ff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    padding: 20px;
+
+    .iconStyle {
+      background-color: #d4e9fe;
+      border-radius: 50%;
+      padding: 6px;
+      font-size: 36px;
+      color: #3f9eff;
+    }
+
+    span {
+      color: #666;
+      font-size: 14px;
+      &.num {
+        color: #3f9eff;
+      }
+    }
+  }
+}
+</style>

src/views/inventory/consumables/index.vue

@@ -5,9 +5,11 @@
     <page-search
       ref="searchRef"
       :search-config="searchConfig"
-      @query-click="handleQueryClick"
+      @query-click="newHandleQueryClick"
       @reset-click="handleResetClick"
     />
+    <!-- 统计 -->
+    <data-tongji :data="gongjiData"></data-tongji>
     <!-- 列表 -->
     <page-content
       ref="contentRef"
@@ -92,15 +94,15 @@
 
 <script setup lang="ts">
 import addHaocai from "./components/add-haocai.vue";
+import dataTongji from "./components/DataStatistics.vue";
 import addConsTakin from "./components/addConsTakin.vue";
-import orderApi, { type getListResponse, OrderInfoVo } from "@/api/order/order";
+import consApi from "@/api/product/cons";
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import contentConfig from "./config/content";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
-
 const router = useRouter();
 const {
   searchRef,
@@ -113,6 +115,26 @@ const {
   handleSearchClick,
   handleFilterChange,
 } = usePage();
+//统计数据
+const gongjiData = reactive({ totalRow: 0 });
+function getTongji(params: IObject | undefined) {
+  consApi.statistics(params).then((res) => {
+    Object.assign(gongjiData, res);
+  });
+}
+
+function newHandleQueryClick(e: IObject | undefined) {
+  const filterParams = contentRef.value?.getFilterParams();
+  contentRef.value?.fetchPageData({ ...e, ...filterParams }, true);
+  getTongji(e);
+}
+
+watch(
+  () => contentRef.value?.pagination.total,
+  (newval) => {
+    gongjiData.totalRow = newval as number;
+  }
+);
 
 //耗材盘点
 const refAddHaocaiTakin = ref();
@@ -123,14 +145,15 @@ function refAddHaocaiTakinShow(item: any) {
 function refresh() {
   console.log("refresh");
   contentRef.value?.fetchPageData();
+  getTongji(undefined);
 }
 const refAddHaocai = ref();
-function refAddHaocaiOpen(item) {
+function refAddHaocaiOpen(item: any) {
   refAddHaocai.value.open(item);
 }
 // 新增
 async function handleAddClick() {
-  refAddHaocaiOpen();
+  refAddHaocaiOpen(undefined);
 }
 // 编辑
 async function handleEditClick(row: IObject) {
@@ -184,29 +207,9 @@ function returnStateType(status: string) {
   }
 }
 
-const route = useRouter();
-// 结账
-function toPayOrder(order: getListResponse) {
-  route.push({
-    path: "/tool/index",
-    query: {
-      id: order.id,
-    },
-  });
-}
-//详情
-const refDetail = ref();
-function showdetail(row: OrderInfoVo) {
-  refDetail.value.show(row);
-}
-function toGoods(id: number) {
-  router.push({
-    path: "/product/index",
-    query: {
-      id,
-    },
-  });
-}
+onMounted(() => {
+  getTongji({});
+});
 </script>
 
 <style scoped lang="scss">