fix: socket连接代码优化，耗材增加具体统计弹窗

2025-03-14 10:25:49 +08:00
parent 7e9a9d1767
commit 814ca603d7
9 changed files with 413 additions and 142 deletions
--- a/src/views/inventory/consumables/components/DataStatistics.vue
+++ b/src/views/inventory/consumables/components/DataStatistics.vue
@@ -14,17 +14,23 @@
      <div>
        <div>
          <span>增加数量：</span>
-          <span class="num">{{ data.inSumTotal || 0 }}</span>
+          <span class="num" @click="refStockHistoryShow('addCountNumber')">
+            {{ data.inSumTotal || 0 }}
+          </span>
        </div>
        <div style="display: flex">
          <div>
            <span>手动增加：</span>
-            <span class="num">{{ data.winInNum || 0 }}</span>
+            <span class="num" @click="refStockHistoryShow('addNumber')">
+              {{ data.winInNum || 0 }}
+            </span>
          </div>
          <span style="margin: 0 20px; color: #ccc">|</span>
          <div>
            <span>入库：</span>
-            <span class="num">{{ data.stockInNum || 0 }}</span>
+            <span class="num" @click="refStockHistoryShow('manualIn')">
+              {{ data.stockInNum || 0 }}
+            </span>
          </div>
        </div>
      </div>
@@ -36,34 +42,47 @@
      <div>
        <div>
          <span>减少数量：</span>
-          <span class="num">{{ data.outSumTotal || 0 }}</span>
+          <span class="num" @click="refStockHistoryShow('subCountNumber')">
+            {{ data.outSumTotal || 0 }}
+          </span>
        </div>
        <div style="display: flex">
          <div>
            <span>手动减少：</span>
-            <span class="num">{{ data.lossOutNum || 0 }}</span>
+            <span class="num" @click="refStockHistoryShow('subNumber')">
+              {{ data.lossOutNum || 0 }}
+            </span>
          </div>
          <span style="margin: 0 20px; color: #ccc">|</span>
          <div>
            <span>消耗：</span>
-            <span class="num">{{ data.consumeNum || 0 }}</span>
+            <span class="num" @click="refStockHistoryShow('saleNumber')">
+              {{ data.consumeNum || 0 }}
+            </span>
          </div>
          <span style="margin: 0 20px; color: #ccc">|</span>
          <div>
            <span>报损：</span>
-            <span class="num">{{ data.damageNum || 0 }}</span>
+            <span class="num" @click="refStockHistoryShow('lossNumber')">
+              {{ data.damageNum || 0 }}
+            </span>
          </div>
          <span style="margin: 0 20px; color: #ccc">|</span>
          <div>
            <span>出库：</span>
-            <span class="num">{{ data.stockOutNum || 0 }}</span>
+            <span class="num" @click="refStockHistoryShow('manualOut')">
+              {{ data.stockOutNum || 0 }}
+            </span>
          </div>
        </div>
      </div>
    </div>
+
+    <stockHistory ref="refStockHistory"></stockHistory>
  </div>
 </template>
 <script setup>
+import stockHistory from "./stockHistory.vue";
 const props = defineProps({
  data: {
    type: Object,
@@ -72,6 +91,10 @@ const props = defineProps({
    },
  },
 });
+const refStockHistory = ref();
+function refStockHistoryShow(key) {
+  refStockHistory.value.show(key);
+}
 </script>


@@ -109,6 +132,7 @@ const props = defineProps({
      font-size: 14px;
      &.num {
        color: #3f9eff;
+        cursor: pointer;
      }
    }
  }
--- a/src/views/inventory/consumables/components/data.ts
+++ b/src/views/inventory/consumables/components/data.ts
@@ -0,0 +1,41 @@
+export const paramsMap = {
+  addCountNumber: {
+    inOutType: "in",
+  },
+  addNumber: {
+    inOutType: "in",
+    inOutItem: "win-in",
+  },
+  manualIn: {
+    inOutType: "in",
+    inOutItem: "manual-in",
+  },
+  subCountNumber: {
+    inOutType: "out",
+  },
+  subNumber: {
+    inOutType: "out",
+    inOutItem: "loss-out",
+  },
+  saleNumber: {
+    inOutType: "out",
+    inOutItem: "order-out",
+  },
+  lossNumber: {
+    inOutType: "out",
+    inOutItem: "damage-out",
+  },
+  manualOut: {
+    inOutType: "out",
+    inOutItem: "manual-out",
+  },
+};
+
+export const inOutItemMap = {
+  "manual-in": "手动入库",
+  "manual-out": "手动出库",
+  "win-in": "盘盈入库",
+  "loss-out": "盘亏出库",
+  "order-in": "订单退款入库",
+  "order-out": "订单消费出库"
+}
--- a/src/views/inventory/consumables/components/stockHistory.vue
+++ b/src/views/inventory/consumables/components/stockHistory.vue
@@ -0,0 +1,132 @@
+<!-- 商品库存记录 -->
+<template>
+  <el-dialog width="80%" :title="`${keysList[key]}`" v-model="dialogVisible" @close="reset">
+    <div class="head-container">
+      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" height="400px">
+        <!-- 共存前面 -->
+        <el-table-column label="耗材名称" prop="conName" />
+        <el-table-column label="原有库存" prop="beforeNumber"></el-table-column>
+        <el-table-column label="变动后库存" prop="afterNumber"></el-table-column>
+        <el-table-column label="库存变动数量" prop="inOutNumber"></el-table-column>
+        <el-table-column label="操作类型" prop="inOutItem">
+          <template v-slot="scope">
+            {{ inOutItemMap[scope.row.inOutItem] }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="variabilitytitle == '消耗'" label="订单编号" prop="orderNo">
+          <template v-slot="scope">
+            <div>
+              <el-button type="text" @click="toGoodslist(scope.row.orderNo)">
+                {{ scope.row.orderNo }}
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 减少数量 -->
+        <el-table-column v-if="variabilitytitle == '报损'" label="图片" prop="coverImg" />
+        <!-- 尾巴 -->
+        <el-table-column v-if="variabilitytitle != '消耗'" label="操作人" prop="createUserName" />
+        <el-table-column v-if="variabilitytitle != '消耗'" label="备注" prop="remark" />
+        <el-table-column label="操作时间" prop="createTime"></el-table-column>
+
+        <!-- <el-table-column label="现有库存" prop="balance" />
+          <el-table-column label="业务说明" prop="bizName" />
+          <el-table-column label="创建时间" prop="createTime"></el-table-column> -->
+      </el-table>
+    </div>
+    <div class="head-container">
+      <el-pagination
+        :total="tableData.total"
+        @size-change="handleSizeChange"
+        :current-page="tableData.page + 1"
+        :page-size="tableData.size"
+        @current-change="paginationChange"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import stockApi from "@/api/product/stock";
+import { paramsMap, inOutItemMap } from "./data";
+export default {
+  props: {
+    query: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      dayjs,
+      dialogVisible: false,
+      inOutItemMap,
+      key: "",
+      keysList: {
+        stockNumber: "现有数量",
+        addCountNumber: "增加数量",
+        addNumber: "手动增加",
+        manualIn: "入库",
+        refundNumber: "退货",
+        subCountNumber: "减少数量",
+        subNumber: "手动减少",
+        saleNumber: "消耗",
+        lossNumber: "报损",
+        manualOut: "出库",
+      },
+      productId: "",
+      tableData: {
+        sort: 1,
+        data: [],
+        page: 1,
+        size: 10,
+        loading: false,
+        total: 0,
+      },
+    };
+  },
+  methods: {
+    // 库存记录列表
+    async tbProductStockDetailStock() {
+      try {
+        this.tableData.loading = true;
+        const res = await stockApi.flow({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          ...paramsMap[this.key],
+        });
+        this.tableData.loading = false;
+        this.tableData.data = res.records;
+        this.tableData.total = res.totalRow * 1;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e;
+      this.tbProductStockDetailStock();
+    },
+    handleSizeChange(val) {
+      this.tableData.size = val;
+      this.tbProductStockDetailStock();
+    },
+    // 显示
+    show(key) {
+      this.dialogVisible = true;
+      this.key = key;
+      this.tbProductStockDetailStock();
+    },
+    // 初始化dialog
+    reset() {
+      this.tableData.page = 1;
+      this.tableData.data = [];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>