From 5fe06e834b5c17f1b1cc04954ca5a9bb1b209769 Mon Sep 17 00:00:00 2001
From: duan <1004387497@qq.com>
Date: Fri, 14 Mar 2025 16:00:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/product/index.ts                     |  16 ++-
 src/views/mytemplate/index.vue               |   1 -
 src/views/product/index.vue                  |  62 +++++-----
 src/views/product/indexconfig/Paging.vue     |  24 ++++
 src/views/product/indexconfig/Table.vue      |  37 ++++++
 src/views/product/indexconfig/TableFour.vue  |  37 ++++++
 src/views/product/indexconfig/TableThree.vue |  34 ++++++
 src/views/product/indexconfig/TableTwo.vue   |  34 ++++++
 src/views/product/indexconfig/content.ts     |   1 -
 src/views/product/indexconfig/statistics.vue | 121 +++++++++++++++++--
 10 files changed, 321 insertions(+), 46 deletions(-)
 create mode 100644 src/views/product/indexconfig/Paging.vue
 create mode 100644 src/views/product/indexconfig/Table.vue
 create mode 100644 src/views/product/indexconfig/TableFour.vue
 create mode 100644 src/views/product/indexconfig/TableThree.vue
 create mode 100644 src/views/product/indexconfig/TableTwo.vue

diff --git a/src/api/product/index.ts b/src/api/product/index.ts
index 22886b4..12ebdb4 100644
--- a/src/api/product/index.ts
+++ b/src/api/product/index.ts
@@ -56,7 +56,21 @@ const AuthAPI = {
       method: "get",
     });
   },
-
+  // 统计
+  statistics(params: object) {
+    return request<any, Responseres>({
+      url: `${baseURL}/statistics`,
+      method: "get",
+      params
+    });
+  },
+  stockFlow(params: object) {
+    return request<any, Responseres>({
+      url: `${baseURL}/stockFlow`,
+      method: "get",
+      params
+    });
+  },
 };
 
 
diff --git a/src/views/mytemplate/index.vue b/src/views/mytemplate/index.vue
index 613f6b3..886fac6 100644
--- a/src/views/mytemplate/index.vue
+++ b/src/views/mytemplate/index.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- XXX模块 -->
   <div style="padding: 15px;">
     <!-- 搜索 -->
     <Search></Search>
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index d154e37..f22318a 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -2,26 +2,14 @@
   <div class="app-container">
     <!-- 列表 -->
     <!-- 搜索 -->
-    <page-search
-      ref="searchRef"
-      :search-config="searchConfig"
-      @query-click="handleQueryClick"
-      @reset-click="handleResetClick"
-    />
+    <page-search ref="searchRef" :search-config="searchConfig" @query-click="newHandleQueryClick"
+      @reset-click="handleResetClick2" />
     <!-- 顶部数据 -->
-    <Statistics></Statistics>
+    <Statistics :data="gongjiData"></Statistics>
     <!-- 列表 -->
-    <page-content
-      ref="contentRef"
-      :content-config="contentConfig"
-      @add-click="handleAddClick"
-      @edit-click="handleEditClick"
-      @export-click="handleExportClick"
-      @search-click="handleSearchClick"
-      @toolbar-click="handleToolbarClick"
-      @operat-click="handleOperatClick"
-      @filter-change="handleFilterChange"
-    >
+    <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
+      @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
       <!-- <template #status="scope">
           <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
@@ -34,20 +22,12 @@
         <DictLabel v-model="scope.row[scope.prop]" code="gender" />
       </template>
       <template #shangjia="scope">
-        <el-switch
-          v-model="scope.row[scope.prop]"
-          :active-value="1"
-          :inactive-value="0"
-          @click="handleSwitchChange(scope.row)"
-        ></el-switch>
+        <el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
+          @click="handleSwitchChange(scope.row)"></el-switch>
       </template>
       <template #mobile="scope">
         <el-text>{{ scope.row[scope.prop] }}</el-text>
-        <copy-button
-          v-if="scope.row[scope.prop]"
-          :text="scope.row[scope.prop]"
-          style="margin-left: 2px"
-        />
+        <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
       </template>
     </page-content>
 
@@ -59,11 +39,7 @@
     </page-modal>
 
     <!-- 编辑 -->
-    <page-modal
-      ref="editModalRef"
-      :modal-config="editModalConfig"
-      @submit-click="handleSubmitClick"
-    >
+    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
       <template #gender="scope">
         <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
       </template>
@@ -107,7 +83,25 @@ const {
   handleFilterChange,
 } = usePage();
 const router = useRouter();
+let gongjiData = ref({});
+function newHandleQueryClick(e: IObject | undefined) {
+  const filterParams = contentRef.value?.getFilterParams();
+  contentRef.value?.fetchPageData({ ...e, ...filterParams }, true);
+  getTongji(e);
+}
+// 重置
+function handleResetClick2(queryParams: IObject) {
+  const filterParams = contentRef.value?.getFilterParams();
+  contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+  getTongji(queryParams);
 
+}
+
+function getTongji(params: IObject | undefined) {
+  UserAPI.statistics(params).then((res) => {
+    gongjiData.value = res
+  });
+}
 const form = reactive({
   num: "",
 });
diff --git a/src/views/product/indexconfig/Paging.vue b/src/views/product/indexconfig/Paging.vue
new file mode 100644
index 0000000..ee9b056
--- /dev/null
+++ b/src/views/product/indexconfig/Paging.vue
@@ -0,0 +1,24 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
+      layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
+      :total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  pagingConfig: {
+    type: Object,
+    default: () => { }
+  }
+})
+const emit = defineEmits(['sizeChange', 'currentChange'])
+// 当前条改变
+function handleSizeChange(val) {
+  emit('sizeChange', val)
+}
+// 当前页改变
+function handleCurrentChange(val) {
+  emit('currentChange', val)
+}
+</script>
\ No newline at end of file
diff --git a/src/views/product/indexconfig/Table.vue b/src/views/product/indexconfig/Table.vue
new file mode 100644
index 0000000..f1f8650
--- /dev/null
+++ b/src/views/product/indexconfig/Table.vue
@@ -0,0 +1,37 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="props.list" border style="width: 100%">
+      <el-table-column prop="productName" align="center" label="商品名称/规格名称" />
+      <el-table-column prop="afterNumber" align="center" label="变动后库存" />
+      <el-table-column prop="beforeNumber" align="center" label="原库存" />
+      <el-table-column prop="inOutNumber" align="center" label="变动数量" />
+      <el-table-column prop="" align="center" label="类型">
+        <template #default="scope">
+          {{ fliterinOutItem(scope.row.inOutItem) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createUserName" align="center" label="操作人" />
+      <el-table-column prop="remark" align="center" label="备注" />
+      <el-table-column prop="createTime" align="center" label="操作时间" />
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+function fliterinOutItem(d) {
+  // manual-in:手动入库 manual-out:手动出库 win-in:盘盈入库 loss-out:盘亏出库 order-in:订单退款入库 order-out:订单消费出库 damage-out:损耗出库
+  if (d == 'manual-in') return '手动入库'
+  else if (d == 'manual-out') return '手动出库'
+  else if (d == 'win-in') return '盘盈入库'
+  else if (d == 'loss-out') return '盘亏出库'
+  else if (d == 'order-in') return '订单退款入库'
+  else if (d == 'order-out') return '订单消费出库'
+  else if (d == 'damage-out') return '损耗出库'
+}
+</script>
diff --git a/src/views/product/indexconfig/TableFour.vue b/src/views/product/indexconfig/TableFour.vue
new file mode 100644
index 0000000..42a837b
--- /dev/null
+++ b/src/views/product/indexconfig/TableFour.vue
@@ -0,0 +1,37 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="props.list" border style="width: 100%">
+      <el-table-column prop="productName" align="center" label="商品名称/规格名称" />
+      <el-table-column prop="beforeNumber" align="center" label="原库存" />
+      <el-table-column prop="afterNumber" align="center" label="变动后库存" />
+      <el-table-column prop="inOutNumber" align="center" label="报损数量" />
+      <el-table-column prop="createUserName" align="center" label="报损人" />
+      <el-table-column prop="orderId" align="center" label="图片">
+        <template slot-scope="scope">
+          <img :src="JSON.parse(scope.row.imgUrls)[0]" alt="" style="width: 50px;height: 50px;">
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" align="center" label="备注" />
+      <el-table-column prop="createTime" align="center" label="操作时间" />
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+function fliterinOutItem(d) {
+  // manual-in:手动入库 manual-out:手动出库 win-in:盘盈入库 loss-out:盘亏出库 order-in:订单退款入库 order-out:订单消费出库 damage-out:损耗出库
+  if (d == 'manual-in') return '手动入库'
+  else if (d == 'manual-out') return '手动出库'
+  else if (d == 'win-in') return '盘盈入库'
+  else if (d == 'loss-out') return '盘亏出库'
+  else if (d == 'order-in') return '订单退款入库'
+  else if (d == 'order-out') return '订单消费出库'
+  else if (d == 'damage-out') return '损耗出库'
+}
+</script>
diff --git a/src/views/product/indexconfig/TableThree.vue b/src/views/product/indexconfig/TableThree.vue
new file mode 100644
index 0000000..b5830f7
--- /dev/null
+++ b/src/views/product/indexconfig/TableThree.vue
@@ -0,0 +1,34 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="props.list" border style="width: 100%">
+      <el-table-column prop="productName" align="center" label="商品名称/规格名称" />
+      <el-table-column prop="afterNumber" align="center" label="变动后库存" />
+      <el-table-column prop="beforeNumber" align="center" label="原库存" />
+      <el-table-column prop="inOutNumber" align="center" label="销量" />
+      <el-table-column prop="orderId" align="center" label="订单编号">
+      </el-table-column>
+      <el-table-column prop="createUserName" align="center" label="操作人" />
+      <el-table-column prop="remark" align="center" label="备注" />
+      <el-table-column prop="createTime" align="center" label="操作时间" />
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+function fliterinOutItem(d) {
+  // manual-in:手动入库 manual-out:手动出库 win-in:盘盈入库 loss-out:盘亏出库 order-in:订单退款入库 order-out:订单消费出库 damage-out:损耗出库
+  if (d == 'manual-in') return '手动入库'
+  else if (d == 'manual-out') return '手动出库'
+  else if (d == 'win-in') return '盘盈入库'
+  else if (d == 'loss-out') return '盘亏出库'
+  else if (d == 'order-in') return '订单退款入库'
+  else if (d == 'order-out') return '订单消费出库'
+  else if (d == 'damage-out') return '损耗出库'
+}
+</script>
diff --git a/src/views/product/indexconfig/TableTwo.vue b/src/views/product/indexconfig/TableTwo.vue
new file mode 100644
index 0000000..8344fdd
--- /dev/null
+++ b/src/views/product/indexconfig/TableTwo.vue
@@ -0,0 +1,34 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="props.list" border style="width: 100%">
+      <el-table-column prop="productName" align="center" label="商品名称/规格名称" />
+      <el-table-column prop="afterNumber" align="center" label="变动后库存" />
+      <el-table-column prop="beforeNumber" align="center" label="原库存" />
+      <el-table-column prop="inOutNumber" align="center" label="变动数量" />
+      <el-table-column prop="orderId" align="center" label="订单编号">
+      </el-table-column>
+      <el-table-column prop="createUserName" align="center" label="操作人" />
+      <el-table-column prop="remark" align="center" label="备注" />
+      <el-table-column prop="createTime" align="center" label="操作时间" />
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+function fliterinOutItem(d) {
+  // manual-in:手动入库 manual-out:手动出库 win-in:盘盈入库 loss-out:盘亏出库 order-in:订单退款入库 order-out:订单消费出库 damage-out:损耗出库
+  if (d == 'manual-in') return '手动入库'
+  else if (d == 'manual-out') return '手动出库'
+  else if (d == 'win-in') return '盘盈入库'
+  else if (d == 'loss-out') return '盘亏出库'
+  else if (d == 'order-in') return '订单退款入库'
+  else if (d == 'order-out') return '订单消费出库'
+  else if (d == 'damage-out') return '损耗出库'
+}
+</script>
diff --git a/src/views/product/indexconfig/content.ts b/src/views/product/indexconfig/content.ts
index 508aacd..0333dde 100644
--- a/src/views/product/indexconfig/content.ts
+++ b/src/views/product/indexconfig/content.ts
@@ -54,7 +54,6 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   exportsAction: async function (params) {
     // 模拟获取到的是全量数据
     const res = await UserAPI.getPage(params);
-    console.log("exportsAction", res.list);
     return res.list;
   },
   pk: "id",
diff --git a/src/views/product/indexconfig/statistics.vue b/src/views/product/indexconfig/statistics.vue
index acaec12..966680b 100644
--- a/src/views/product/indexconfig/statistics.vue
+++ b/src/views/product/indexconfig/statistics.vue
@@ -12,14 +12,17 @@
         <SortUp />
       </el-icon>
       <div>
-        <div><span>增加数量：</span><span>0</span></div>
+        <div><span>增加数量：</span><span class="datastyle" @click="clickEvent('inSumTotal')">{{ dataAll.dataList.inSumTotal
+        }}</span></div>
         <div style="display: flex;">
           <div>
-            <span>手动增加：</span><span>0</span>
+            <span>手动增加：</span><span class="datastyle" @click="clickEvent('winInNum')">{{ dataAll.dataList.winInNum
+            }}</span>
           </div>
           <span style="margin: 0 20px;color: #ccc;">|</span>
           <div>
-            <span>退货：</span><span>0</span>
+            <span>退货：</span><span class="datastyle" @click="clickEvent('refundInNum')">{{ dataAll.dataList.refundInNum
+            }}</span>
           </div>
         </div>
       </div>
@@ -29,36 +32,130 @@
         <SortDown />
       </el-icon>
       <div>
-        <div><span>减少数量：</span><span>0</span></div>
+        <div><span>减少数量：</span><span class="datastyle" @click="clickEvent('outSumTotal')">{{
+          dataAll.dataList.outSumTotal }}</span></div>
         <div style="display: flex;">
           <div>
-            <span>手动减少：</span><span>0</span>
+            <span>手动减少：</span><span class="datastyle" @click="clickEvent('lossOutNum')">{{ dataAll.dataList.lossOutNum
+            }}</span>
           </div>
           <span style="margin: 0 20px;color: #ccc;">|</span>
           <div>
-            <span>销售量：</span><span>0</span>
+            <span>销售量：</span><span class="datastyle" @click="clickEvent('salesNum')">{{ dataAll.dataList.salesNum
+            }}</span>
           </div>
           <span style="margin: 0 20px;color: #ccc;">|</span>
           <div>
-            <span>报损：</span><span>0</span>
+            <span>报损：</span><span class="datastyle" @click="clickEvent('damageNum')">{{ dataAll.dataList.damageNum
+            }}</span>
           </div>
         </div>
       </div>
     </div>
+    <!-- 弹窗 -->
+    <MyDialog ref="myDialogRef" :title="dataAll.dataTitle" width="70%" @confirm="myDialogRef.close()">
+      <!-- 表格 -->
+      <Table :list="dataAll.tableData"
+        v-if="dataAll.dataType == 'inSumTotal' || dataAll.dataType == 'winInNum' || dataAll.dataType == 'outSumTotal' || dataAll.dataType == 'lossOutNum'">
+      </Table>
+      <TableTwo :list="dataAll.tableData" v-else-if="dataAll.dataType == 'refundInNum'"></TableTwo>
+      <TableThree :list="dataAll.tableData" v-else-if="dataAll.dataType == 'salesNum'"></TableThree>
+
+      <TableFour :list="dataAll.tableData" v-else-if="dataAll.dataType == 'damageNum'"></TableFour>
+      <!-- 分页 -->
+      <Paging :pagingConfig="dataAll.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
+    </MyDialog>
   </div>
 </template>
 <script setup>
 import UserAPI from "@/api/product/index";
+import MyDialog from "@/components/mycomponents/myDialog.vue";
+import Table from './Table.vue'
+import TableTwo from './TableTwo.vue'
+import TableThree from './TableThree.vue'
+import TableFour from './TableFour.vue'
+import Paging from './Paging.vue'
 import { onMounted, reactive } from "vue";
-onMounted(() => {
-  getPage();
+const props = defineProps({
+  data: {
+    type: Object,
+  }
 })
+let dataAll = reactive({
+  dataList: [],
+  tableData: [],
+  pagingConfig: {
+    total: 0, // 总数
+    pageSize: 10, // 每页数据数量
+    pageNumber: 1, // 当前页码
+  },
+  dataType: "",
+  dataTitle: ""
+});
 let datas = reactive({
   totalRow: 0
 })
+const myDialogRef = ref(null)
+onMounted(() => {
+  getPage();
+})
+async function clickEvent(key) {
+  dataAll.dataType = key
+  let obj = {}
+  switch (key) {
+    case 'inSumTotal':
+      dataAll.dataTitle = '增加数据统计'
+      obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "in", inOutItem: "" }
+      break;
+    case 'winInNum':
+      dataAll.dataTitle = '手动增加统计'
+      obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "in", inOutItem: "win-in" }
+      break;
+    case 'refundInNum':
+      dataAll.dataTitle = '退货统计'
+      obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "in", inOutItem: "order-in" }
+      break;
+    case 'outSumTotal':
+      dataAll.dataTitle = '减少数量统计'
+      obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "out", inOutItem: "" }
+      break;
+    case 'lossOutNum':
+      dataAll.dataTitle = '手动减少统计'
+      obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "out", inOutItem: "loss-out" }
+      break;
+    case 'salesNum':
+      dataAll.dataTitle = '销量统计'
+      obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "out", inOutItem: "order-out" }
+      break;
+    case 'damageNum':
+      dataAll.dataTitle = '报损统计'
+      obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "out", inOutItem: "damage-out" }
+      break;
+  }
+  let res = await UserAPI.stockFlow(obj);
+  dataAll.tableData = res.records
+  dataAll.pagingConfig.total = res.totalRow
+  dataAll.pagingConfig.pageSize = res.pageSize
+  dataAll.pagingConfig.pageNumber = res.pageNumber
+  myDialogRef.value.open()
+}
+watch(() => props.data, (n) => {
+  dataAll.dataList = n
+})
+
 async function getPage() {
   let res = await UserAPI.getPage();
   datas.totalRow = res.totalRow
+  let ele = await UserAPI.statistics({ id: '', categoryId: '', type: '', name: '' });
+  dataAll.dataList = ele
+}
+function sizeChange(val) {
+  dataAll.pagingConfig.pageSize = val
+  clickEvent(dataAll.dataType)
+}
+function currentChange(val) {
+  dataAll.pagingConfig.pageNumber = val
+  clickEvent(dataAll.dataType)
 }
 </script>
 
@@ -97,4 +194,10 @@ async function getPage() {
     }
   }
 }
+
+.datastyle {
+  color: #4080ff !important;
+  cursor: pointer;
+  text-decoration: underline #4080ff;
+}
 </style>
\ No newline at end of file